/* Shared dropdown nav + inner page layout. Homepage content is untouched. */
@media(max-width:1280px){
  .nav-links{gap:16px}
}
.nav-item{position:relative;display:flex;align-items:center}
.nav-parent{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav-parent .caret{width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);opacity:.45;margin-top:-3px}
.nav-sub{
  position:absolute;top:calc(100% + 16px);left:50%;
  transform:translateX(-50%) translateY(10px);
  min-width:228px;padding:12px 0;
  background:rgba(243,239,232,.97);backdrop-filter:blur(18px);
  border:1px solid rgba(12,12,12,.08);
  box-shadow:0 18px 50px rgba(16,14,12,.12);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  z-index:30
}
.nav-sub a{
  display:block;padding:11px 18px;margin:0;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.62;white-space:nowrap
}
.nav-sub a:hover,.nav-sub a.active{opacity:1;background:rgba(189,118,81,.08)}
.nav-sub a::after{display:none!important}
.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub{
  opacity:1;pointer-events:auto;visibility:visible;transform:translateX(-50%) translateY(0)
}
.nav.darkstate .nav-sub{
  background:rgba(12,12,12,.96);border-color:rgba(255,255,255,.1);color:#f3f0ea
}
.nav-item.is-current > .nav-parent{opacity:1}

.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}
.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}
.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-item{display:block;width:100%}
  .nav-parent{font-size:22px;letter-spacing:.04em;text-transform:none;padding:6px 0}
  .nav-sub{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;border:0;box-shadow:none;padding:4px 0 16px 2px;min-width:0;left:auto
  }
  .nav.darkstate .nav-sub{background:transparent}
  .nav-sub a{font-size:14px;letter-spacing:.06em;text-transform:none;padding:8px 0;opacity:.55}
  .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}
}