@import url("./footer.css");

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width:0; height:0; display:none; background:transparent; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: var(--step-0); line-height: 1.5; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }
::selection { background: var(--acid); color: #111; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--acid); color: #111; padding: 0.75rem 1rem; }
.skip-link:focus { top: 1rem; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 200; width:100%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 1.4rem var(--gutter); color: #fff; font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; pointer-events:none; transform:translateZ(0); backface-visibility:hidden; }
.brand { justify-self: start; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.88); pointer-events:auto; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 1rem; pointer-events:auto; }
.menu-toggle { min-width:4.5rem; min-height:2.75rem; border:1px solid rgba(255,255,255,.34); border-radius:999px; background:rgba(8,9,8,.74); box-shadow:0 .5rem 1.5rem rgba(0,0,0,.2); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); cursor: pointer; padding:.6rem .9rem; color:#fff; text-transform: uppercase; font-size: inherit; touch-action:manipulation; }
.menu-toggle:hover,.menu-toggle:focus-visible { border-color:var(--acid); background:var(--acid); color:#111; }
.menu-shell { position: fixed; inset: 0; z-index: 180; visibility: hidden; pointer-events: none; }
.menu-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.72); opacity: 0; backdrop-filter: blur(10px); transition: opacity .6s var(--ease); }
.menu-panel { position: absolute; right: 0; top: 0; width: min(50vw, 58rem); height: 100dvh; background: #f8f8f5; color: #111; transform: translateX(100%); transition: transform .75s var(--ease); padding: clamp(6rem,10vh,9rem) var(--gutter) 2rem; display: flex; flex-direction: column; justify-content: space-between; overflow: auto; }
body.menu-open .menu-shell { visibility: visible; pointer-events: auto; }
body.menu-open .menu-scrim { opacity: 1; }
body.menu-open .menu-panel { transform: translateX(0); }
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-list li { overflow: hidden; }
.menu-list a { display: grid; grid-template-columns: 4rem 1fr; align-items: baseline; border-bottom: 1px solid #ddd; padding: .2rem 0; font-family: var(--display); font-size: clamp(3rem, 5vw, 6.4rem); line-height: .95; color: #aaa; transform: translateY(115%); transition: color var(--fast), transform .72s var(--ease); }
.menu-list li:nth-child(2) a { transition-delay: .04s; }
.menu-list li:nth-child(3) a { transition-delay: .08s; }
.menu-list li:nth-child(4) a { transition-delay: .12s; }
.menu-list li:nth-child(5) a { transition-delay: .16s; }
.menu-list li:nth-child(6) a { transition-delay: .2s; }
body.menu-open .menu-list a { transform: translateY(0); }
.menu-list a:hover, .menu-list a[aria-current="page"] { color: #111; transform: translateX(.4rem); }
.menu-list small { font-family: var(--sans); font-size: .72rem; color: #777; }
.menu-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .72rem; text-transform: uppercase; }
.frame { padding-inline: var(--gutter); }
.eyebrow { font-size: var(--step--1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.display { margin: 0; font-family: var(--display); font-weight: 400; line-height: .84; letter-spacing: -.012em; text-transform: uppercase; }
.section { padding: var(--section) var(--gutter); }
.section-rule { border-top: 1px solid var(--line); }
.grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,8vw,10rem); }
.lede { font-size: var(--step-1); line-height: 1.22; max-width: 34ch; }
.accent { color: var(--acid); }
.muted { color: var(--muted); }
.pill { display: inline-flex; border: 1px solid currentColor; border-radius: 99px; padding: .45rem .8rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.arrow-link { display: inline-flex; align-items: center; gap: .7rem; text-transform: uppercase; font-size: .84rem; font-weight: 600; }
.arrow-link::after { content: "↗"; transition: transform var(--fast); }
.arrow-link:hover::after { transform: translate(.25rem,-.25rem); }
.site-footer { background: var(--paper); color: var(--ink); padding: var(--section) var(--gutter) 2rem; }
.footer-title { font-size: var(--step-3); max-width: 8ch; }
.footer-bottom { margin-top: 7rem; padding-top: 1rem; border-top: 1px solid currentColor; display: flex; justify-content: space-between; gap: 1rem; font-size: .76rem; text-transform: uppercase; }
.reveal { opacity: 0; transform: translateY(3rem); transition: opacity .9s var(--ease), transform .9s var(--ease); content-visibility:auto; contain-intrinsic-size:auto 36rem; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr 1fr; padding-top:max(1rem,env(safe-area-inset-top)); padding-right:max(1rem,env(safe-area-inset-right)); padding-left:max(1rem,env(safe-area-inset-left)); }
  .menu-panel { width: 100%; }
  .menu-list a { grid-template-columns: 2rem 1fr; font-size: clamp(3rem,15vw,5rem); }
  .grid-2 { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; }
}
@media (max-width: 420px) { .site-header { padding-inline: 1rem; } .header-actions { gap: .25rem; } .icon-button, .menu-toggle { padding: .25rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }