/* =========================================================
   Shannon LLC — home (front page) — indigo / editorial redesign
   Loaded only on the front page. New class names to avoid
   collisions with legacy .hero / .service-card rules in pages.css.
   ========================================================= */

/* ---------------- Hero ---------------- */
/* Pull the hero up under the (transparent) sticky header so it overlaps the
   dark hero — the header content goes white at the top, frosted on scroll. */
.home-hero { margin-top: -88px; }
@media (max-width: 720px) { .home-hero { margin-top: -64px; } }
.home-hero {
  position: relative;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  padding: 120px 0 0;
}
.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.home-hero__particles { position: absolute; inset: 0; }
/* 2D network / neural-mesh canvas — drifting nodes, distance-faded edges and
   signal pulses. Monochrome white on the dark hero, in line with the flat
   editorial design system. JS lives in app.js ([data-hero-network]). */
.home-hero__net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .9;
}
.home-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,15,30,.55) 0%, rgba(0,15,30,.35) 45%, rgba(0,15,30,.92) 100%);
}
.home-hero__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 88px;
}
.home-hero .eyebrow { color: rgba(255,255,255,.85); margin-bottom: 30px; }
.home-hero .eyebrow::before { background: rgba(255,255,255,.6); }
.home-hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(64px, 12vw, 122px);
  line-height: .92;
  letter-spacing: -.05em;
  margin: 0 0 32px;
}
.home-hero__title .accent-text { color: #fff; }
.home-hero__axis {
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 400;
  letter-spacing: .04em;
  color: rgba(255,255,255,.9);
  margin: 0 0 16px;
}
.home-hero__sub {
  font-size: 16px;
  line-height: 1.95;
  color: rgba(255,255,255,.72);
  max-width: 620px;
  margin: 0 0 40px;
}
.home-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* News chip pinned to the bottom-left of the hero */
.home-hero__news {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  align-self: flex-start;
  background: #fff;
  color: var(--ink);
  padding: 18px 26px;
  max-width: min(90vw, 760px);
}
.home-hero__news-date {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
}
.home-hero__news-cat {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  border: 1px solid var(--line);
  padding: 4px 10px;
  white-space: nowrap;
}
.home-hero__news-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  min-width: 0;
  /* 長いタイトルは最大2行で折り返し、超過分は省略記号。はみ出さない。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 720px) {
  .home-hero { min-height: 0; padding-top: 96px; }
  .home-hero__inner { padding-bottom: 48px; }
  .home-hero__news { flex-wrap: wrap; gap: 10px 14px; max-width: none; width: 100%; }
  .home-hero__news-cat { display: none; }
}

/* ---------------- Section header (split lead) ---------------- */
.home-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}
.home-head__lead {
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink-3);
  max-width: 420px;
}
.tech-dark .home-head__lead { color: rgba(255,255,255,.7); }

/* ---------------- Services list ---------------- */
.svc-list { border-top: 1px solid var(--ink); }
.svc-row {
  display: grid;
  grid-template-columns: 160px 1fr 1.05fr 60px;
  gap: 40px;
  align-items: center;
  padding: 40px 8px;
  border-bottom: 1px solid var(--line);
  transition: background .2s ease;
}
.svc-row:hover { background: var(--bg-alt); }
.svc-row__no {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
}
.svc-row__cat {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--muted);
  margin-top: 10px;
}
.svc-row__title {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -.03em;
  line-height: 1.2;
  margin: 0;
}
.svc-row__body {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-3);
  margin: 0;
}
.svc-row__arrow {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.svc-row:hover .svc-row__arrow { background: var(--ink); color: #fff; }
@media (max-width: 820px) {
  .svc-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "no arrow" "title arrow" "body body";
    gap: 12px 20px;
    padding: 28px 4px;
  }
  .svc-row__meta { grid-area: no; }
  .svc-row__no { grid-area: no; }
  .svc-row__cat { display: inline; margin-left: 12px; }
  .svc-row__title { grid-area: title; }
  .svc-row__body { grid-area: body; }
  .svc-row__arrow { grid-area: arrow; align-self: start; }
}

/* ---------------- Products ---------------- */
.prod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.prod-card { display: block; color: var(--ink); }
.prod-card__media {
  position: relative;
  height: 340px;
  margin-bottom: 26px;
  overflow: hidden;
  background: var(--bg-muted);
}
.prod-card__media img { width: 100%; height: 100%; object-fit: cover; }
.prod-card__media-label {
  position: absolute;
  left: 24px; bottom: 22px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 34px;
  letter-spacing: -.03em;
  color: rgba(255,255,255,.92);
}
.prod-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
}
.prod-card__title {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -.03em;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.prod-card__tag {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--muted);
}
.prod-card__body {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-3);
  margin: 0;
  max-width: 520px;
}
@media (max-width: 720px) {
  .prod-grid { grid-template-columns: 1fr; gap: 40px; }
  .prod-card__media { height: 240px; }
}

/* ---------------- Philosophy ---------------- */
.philo-lead {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.7;
  letter-spacing: -.02em;
  color: var(--ink-3);
  max-width: 920px;
  margin: 0 0 32px;
}
.philo-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 92px);
  line-height: .98;
  letter-spacing: -.05em;
  color: var(--ink);
  margin: 0 0 84px;
}
.philo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  border-top: 1px solid var(--ink);
  padding-top: 48px;
}
.philo-item__img {
  margin: 0 0 22px;
  overflow: hidden;
}
.philo-item__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  display: block;
}
.philo-item__no {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 20px;
}
.philo-item__title {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: -.02em;
  margin: 0 0 16px;
}
.philo-item__body {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-3);
  margin: 0;
}
@media (max-width: 820px) {
  .philo-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------------- Tech stack (dark) ---------------- */
.tech-dark {
  background: var(--ink);
  color: #fff;
}
.tech-dark .eyebrow { color: rgba(255,255,255,.7); }
.tech-dark .eyebrow::before { background: rgba(255,255,255,.6); }
.tech-dark .section-title,
.tech-dark .display-title { color: #fff; }
.tech-dark .display-title__kicker { color: rgba(255,255,255,.55); }
.tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.tech-list span {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 400;
  color: rgba(255,255,255,.6);
  padding: 10px 22px 10px 0;
  letter-spacing: -.01em;
}

/* ---------------- News list ---------------- */
.news-list { border-top: 1px solid var(--ink); }
.news-row {
  display: grid;
  grid-template-columns: 130px 150px 1fr 30px;
  gap: 32px;
  align-items: center;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.news-row__date {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.news-row__cat {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  border: 1px solid var(--line);
  padding: 5px 0;
  text-align: center;
  color: var(--ink-3);
}
.news-row__title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.news-row__arrow { justify-self: end; color: var(--ink); }
@media (max-width: 720px) {
  .news-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "date cat" "title title";
    gap: 8px 14px;
    padding: 20px 4px;
  }
  .news-row__date { grid-area: date; }
  .news-row__cat { grid-area: cat; justify-self: start; padding: 5px 10px; }
  .news-row__title { grid-area: title; }
  .news-row__arrow { display: none; }
}

/* Section header link (list-all) */
.home-morelink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}