/* Shared dropdown nav + inner page layout. Homepage content is untouched. */
.nav-links{gap:16px;letter-spacing:.06em}
@media(max-width:1280px){
  .nav-links{gap:12px;font-size:11px}
}
.nav-parent{white-space:nowrap}
.nav-parent.active,.nav-links a.is-current{opacity:1}
.nav-sub,.nav-parent .caret{display:none!important}

.page-hero{padding:160px 0 72px;position:relative;overflow:hidden}
.page-hero .reveal{opacity:1;transform:none}
.page-hero .crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;margin-bottom:22px}
.page-hero .crumb a{opacity:.8}
.page-hero .crumb a:hover{opacity:1}
.page-kicker{margin-bottom:18px}
.page-lead{max-width:760px;margin-top:28px}
.subrail{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:36px
}
.subrail a{
  border:1px solid var(--line);padding:10px 14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border-radius:999px;opacity:.7
}
.dark .subrail a,.brown .subrail a,.graphite .subrail a{border-color:var(--line-dark)}
.subrail a:hover,.subrail a.active{opacity:1;background:var(--ink);color:#fff;border-color:var(--ink)}
.dark .subrail a.active,.brown .subrail a.active,.graphite .subrail a.active{background:#f3f0ea;color:#111;border-color:#f3f0ea}
.detail-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:42px}
.detail-card{grid-column:span 4;border:1px solid var(--line);padding:26px;min-height:180px;min-width:0}
.detail-card .body{overflow-wrap:anywhere}
.dark .detail-card,.brown .detail-card,.graphite .detail-card{border-color:var(--line-dark)}
.detail-card .num{font-size:11px;letter-spacing:.16em;opacity:.45;margin-bottom:28px}
.body-types,.detail-card .tags,.solution .tags{display:flex;flex-wrap:wrap;gap:8px}
.body-types{margin-top:18px}
.family-figure{margin:28px 0 8px;border:1px solid var(--line);background:#f6f3ed}
.family-figure img{width:100%;height:auto;display:block}
.family-figure figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 18px 16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.detail-card .tags{margin-top:18px}
.detail-card .tag,.body-types .tag{text-transform:none;letter-spacing:.06em}
.split-2{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.stack-list{display:grid;gap:0}
.stack-item{border-top:1px solid var(--line);padding:26px 0;display:grid;grid-template-columns:88px 1fr;gap:18px}
.dark .stack-item,.brown .stack-item,.graphite .stack-item{border-color:var(--line-dark)}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.related a{
  display:block;border:1px solid var(--line);padding:22px;min-height:120px;transition:.3s
}
.dark .related a,.brown .related a,.graphite .related a{border-color:var(--line-dark)}
.related a:hover{transform:translateY(-5px);border-color:rgba(189,118,81,.55)}
body.inner .nav{background:rgba(239,235,228,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.08)}
body.inner .nav.darkstate{background:rgba(10,10,10,.82);border-color:rgba(255,255,255,.08);color:#fff}
body.inner .progress,body.inner .floating-label,body.inner .scroll-cue{display:none}

@media(max-width:980px){
  .nav-inner{position:relative;z-index:1003}
  .nav-links{
    display:flex!important;
    position:fixed;
    inset:0;
    z-index:1001;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:6px;
    padding:calc(110px + env(safe-area-inset-top)) 28px 48px;
    background:#f0ede7!important;
    color:#0b0b0b!important;
    font-size:22px;
    letter-spacing:.16em;
    text-transform:none;
    transform:none!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s ease,visibility .28s ease
  }
  .nav.darkstate .nav-links,
  .nav.menu-open .nav-links,
  .nav.darkstate.menu-open .nav-links{
    background:#f0ede7!important;
    color:#0b0b0b!important
  }
  .nav.menu-open .nav-links{
    opacity:1;
    visibility:visible;
    pointer-events:auto
  }
  .nav.menu-open,
  .nav.menu-open.scrolled,
  .nav.menu-open.darkstate,
  body.inner .nav.menu-open,
  body.inner .nav.menu-open.darkstate{
    background:#f0ede7!important;
    color:#0b0b0b!important;
    border-bottom-color:rgba(0,0,0,.06)!important
  }
  .nav.menu-open .logo-dark{display:block!important}
  .nav.menu-open .logo-light{display:none!important}
  .nav-links a,
  .nav-parent{
    display:block;
    width:100%;
    max-width:280px;
    padding:16px 8px;
    font-size:22px;
    letter-spacing:.18em;
    text-transform:none;
    text-align:center;
    opacity:1;
    transform:none
  }
  .nav-links a::after,
  .nav-parent::after{display:none!important}
  .nav-links a:hover,
  .nav-parent:hover{transform:none;opacity:1}
  .nav-links .i18n{white-space:normal}
  .nav-parent{font-size:22px;letter-spacing:.18em;text-transform:none;padding:16px 8px}
  .page-hero{padding:120px 0 48px}
  .detail-grid,.related,.split-2{grid-template-columns:1fr}
  .detail-card{grid-column:1/-1}
  .stack-item{grid-template-columns:1fr;gap:8px}
}
@media(max-width:620px){
  .page-hero{padding:108px 0 40px}
}

/* news */
.news-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.news-filter{
  border:1px solid var(--line);padding:10px 14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border-radius:999px;opacity:.7;background:transparent;color:inherit;cursor:pointer
}
.news-filter:hover,.news-filter.active{opacity:1;background:var(--ink);color:#fff;border-color:var(--ink)}
.news-list{margin-top:18px}
.news-item{
  display:grid;grid-template-columns:132px 88px minmax(0,1fr) 24px;gap:18px 28px;align-items:center;
  border-top:1px solid var(--line);padding:28px 0;transition:padding .35s var(--ease)
}
.news-item:last-child{border-bottom:1px solid var(--line)}
.news-item[hidden]{display:none}
.news-item:hover{padding-left:10px}
.news-item .date,.news-item .cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.news-item .title{font-size:clamp(20px,2vw,28px);line-height:1.28;font-weight:320;letter-spacing:-.02em}
.news-item .go{opacity:.35;transition:.3s var(--ease)}
.news-item:hover .go{opacity:1;transform:translateX(6px)}
.news-empty{display:none;padding:28px 0;opacity:.55}
.news-empty.show{display:block}
.article-title{font-size:clamp(40px,5vw,72px);max-width:980px}
.article-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.article{max-width:760px}
.article p{margin:0 0 22px}
.article p:last-child{margin-bottom:0}
@media(max-width:980px){
  .news-item{grid-template-columns:1fr auto;gap:8px 16px;align-items:start}
  .news-item .date{grid-column:1;grid-row:1}
  .news-item .cat{grid-column:1;grid-row:2}
  .news-item .title{grid-column:1;grid-row:3;margin-top:8px}
  .news-item .go{grid-column:2;grid-row:1 / span 3;align-self:center}
}