:root { --paper:#eeeddd; --soft:#f4f1e8; --ink:#111717; --lake:#153843; --red:#e54632; --line:rgb(17 23 23 / .22); font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; overflow-x:clip; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font:inherit; }
.skip { position:fixed; z-index:20; top:-60px; left:14px; padding:12px 16px; color:var(--soft); background:var(--red); }
.skip:focus { top:12px; }
.product-nav { position:relative; z-index:10; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:74px; padding:0 3vw; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--soft) 94%,transparent); }
.wordmark { display:flex; align-items:center; gap:13px; width:fit-content; font-size:12px; font-weight:700; letter-spacing:.13em; }
.brand-glyph { position:relative; display:block; width:45px; height:27px; flex:0 0 45px; }
.brand-glyph b { position:absolute; inset:0 auto auto 0; font-size:26px; line-height:1; letter-spacing:-.14em; }
.glyph-line { position:absolute; z-index:1; left:0; right:0; top:13px; height:1px; background:currentColor; }
.glyph-eye { position:absolute; z-index:2; right:1px; top:6px; width:15px; height:15px; border:1.5px solid currentColor; border-radius:50%; background:var(--soft); box-shadow:inset 0 0 0 4px var(--soft),inset 0 0 0 5px currentColor; }
.glyph-eye::after { content:""; position:absolute; inset:5px; border-radius:50%; background:currentColor; }
.product-nav nav { display:flex; gap:34px; font:10px/1 'Courier New',monospace; letter-spacing:.12em; text-transform:uppercase; }
.product-nav .cart { justify-self:end; font:10px/1 'Courier New',monospace; letter-spacing:.12em; text-transform:uppercase; }

.product-hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(390px,.65fr); min-height:calc(100svh - 74px); border-bottom:1px solid var(--line); }
.plate { position:relative; display:grid; place-items:center; min-height:760px; overflow:hidden; border-right:1px solid var(--line); background:radial-gradient(circle at 54% 44%,#fff 0,transparent 40%),repeating-linear-gradient(0deg,transparent 0 3px,rgb(17 23 23 / .018) 4px),var(--soft); }
.plate::before { content:""; position:absolute; width:min(62vw,720px); aspect-ratio:1; border:1px solid rgb(17 23 23 / .12); border-radius:50%; box-shadow:0 0 0 18px rgb(17 23 23 / .025),0 0 0 19px rgb(17 23 23 / .08); }
.plate::after { content:""; position:absolute; inset:24px; border:1px solid rgb(17 23 23 / .18); pointer-events:none; }
.product-visual { position:relative; z-index:2; width:min(80%,940px); }
.product-visual img { width:100%; filter:drop-shadow(0 28px 18px rgb(17 23 23 / .16)); transition:opacity .26s ease,transform .52s cubic-bezier(.16,1,.3,1),filter .52s ease; }
.product-visual::after { content:""; position:absolute; inset:8% 3%; pointer-events:none; opacity:.16; mix-blend-mode:screen; background:linear-gradient(108deg,transparent 25%,rgb(255 255 255 / .85) 45%,transparent 64%); transform:translateX(-75%); }
.plate.is-changing .product-visual img { opacity:0; transform:translateY(12px) scale(.965); filter:drop-shadow(0 18px 12px rgb(17 23 23 / .1)) brightness(1.12); }
.plate-code,.plate-note { position:absolute; z-index:3; margin:0; font:9px/1.45 'Courier New',monospace; letter-spacing:.14em; }
.plate-code { top:46px; left:46px; color:var(--red); }
.plate-note { left:46px; bottom:46px; }
.plate-axis { position:absolute; z-index:3; top:50%; right:48px; margin:0; transform:translateY(-50%); font:18px/1.55 Georgia,serif; text-align:center; }
.product-order { align-self:start; position:sticky; top:0; min-height:calc(100svh - 74px); padding:clamp(64px,8vh,96px) clamp(34px,4vw,74px) 48px; }
.eyebrow,.shipping,.signal-copy > p { font:10px/1.4 'Courier New',monospace; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow { margin:0 0 28px; color:var(--red); }
.product-order h1 { margin:0; font-size:clamp(44px,4.5vw,72px); line-height:.88; letter-spacing:-.06em; overflow-wrap:anywhere; }
.lede { max-width:440px; margin:32px 0 34px; font:16px/1.55 Georgia,serif; }
.price { margin:0 0 46px; font:28px/1 'Courier New',monospace; }
.price span { font-size:10px; letter-spacing:.12em; }
.colorways { margin:0 0 34px; padding:0; border:0; }
.colorways legend { display:flex; justify-content:space-between; width:100%; margin-bottom:14px; font:10px/1 'Courier New',monospace; letter-spacing:.1em; text-transform:uppercase; }
.colorways output { color:var(--red); }
.colorways button { position:relative; display:inline-grid; grid-template-columns:26px auto; align-items:center; gap:9px; min-height:42px; margin-right:7px; padding:7px 12px 7px 7px; overflow:hidden; color:var(--ink); border:1px solid transparent; background:transparent; font:12px/1 Georgia,serif; cursor:pointer; }
.colorways button.is-active { border-color:var(--ink); }
.colorways button.is-active::after { content:""; position:absolute; inset:auto 0 0; height:2px; background:var(--red); transform-origin:left; }
.swatch { width:26px; height:26px; border:1px solid rgb(17 23 23 / .3); border-radius:50%; background:linear-gradient(135deg,#171a13,#6b661e 42%,#ddd9c8 72%,#222); }
.quick-specs { margin:0 0 34px; font:10px/1.3 'Courier New',monospace; }
.quick-specs div { display:grid; grid-template-columns:1fr auto; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); }
.quick-specs dt { color:rgb(17 23 23 / .58); }
.quick-specs dd { margin:0; }
.buy { display:grid; grid-template-columns:1fr auto; align-items:center; width:100%; min-height:58px; padding:0 18px; color:var(--soft); border:0; background:var(--red); font:10px/1 'Courier New',monospace; letter-spacing:.08em; text-align:left; text-transform:uppercase; cursor:pointer; transition:background .2s ease; }
.buy:hover { background:var(--ink); }
.shipping { margin:14px 0 0; color:rgb(17 23 23 / .56); font-size:8px; }

.signal { height:250svh; color:var(--soft); background:#081416; view-timeline-name:--signal; view-timeline-axis:block; }
.signal-sticky { position:sticky; top:0; height:100svh; min-height:650px; overflow:hidden; }
.signal-sticky > img,.signal-wash { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.signal-subject { filter:saturate(.72) contrast(1.04); transform:scale(1.08); }
.signal-backdrop { display:none; }
.signal-wash { background:linear-gradient(90deg,rgb(6 17 18 / .86) 0 31%,transparent 65%),linear-gradient(0deg,rgb(6 17 18 / .38),transparent 50%); }
.signal-copy { position:absolute; z-index:2; left:5vw; top:50%; width:min(610px,44vw); transform:translateY(-45%); }
.signal-copy > p { color:var(--red); }
.signal-copy h2 { margin:22px 0 28px; font-size:clamp(60px,8vw,130px); line-height:.82; letter-spacing:-.07em; }
.signal-copy span { display:block; max-width:390px; font:16px/1.55 Georgia,serif; }
.signal ol { position:absolute; z-index:2; right:4vw; bottom:5vh; display:flex; gap:24px; list-style:none; margin:0; padding:0; font:9px/1 'Courier New',monospace; letter-spacing:.13em; }
.signal li:nth-child(2) { color:var(--red); }

.field-manual { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); gap:10vw; min-height:105svh; padding:11vw 5vw; background:radial-gradient(circle at 22% 48%,#fff,transparent 32%),var(--paper); }
.field-manual header { align-self:start; position:sticky; top:11vw; }
.field-manual header p { margin:0 0 28px; color:var(--red); font:10px/1.4 'Courier New',monospace; letter-spacing:.13em; }
.field-manual h2 { max-width:850px; margin:0 0 54px; font-size:clamp(66px,9vw,146px); line-height:.8; letter-spacing:-.075em; }
.field-manual header a { display:inline-block; padding-bottom:10px; border-bottom:1px solid; font:10px/1 'Courier New',monospace; letter-spacing:.1em; text-transform:uppercase; }
.field-manual-body { align-self:center; }
.build-notes { display:grid; gap:0; }
.build-notes article { display:grid; grid-template-columns:48px 1fr; gap:24px; padding:34px 0; border-bottom:1px solid var(--line); }
.build-notes span { color:var(--red); font:italic 24px/1 Georgia,serif; }
.build-notes h3 { margin:0 0 10px; font-size:25px; letter-spacing:-.04em; }
.build-notes p { max-width:420px; margin:0; font:14px/1.55 Georgia,serif; }
.field-manual dl { margin:70px 0 0; font:10px/1.3 'Courier New',monospace; }
.field-manual dl div { display:grid; grid-template-columns:1fr auto; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); }
.field-manual dd { margin:0; color:rgb(17 23 23 / .62); }
footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; min-height:250px; padding:46px 3vw; color:var(--soft); background:var(--ink); font:10px/1.4 'Courier New',monospace; letter-spacing:.1em; text-transform:uppercase; }
footer img { width:190px; filter:invert(1) grayscale(1) brightness(2); }
footer p { margin:0; }
footer a { justify-self:end; }

@keyframes signal-drift { from { transform:scale(1.08); } to { transform:translate3d(-2vw,0,0) scale(1.18); } }
@keyframes signal-copy { 0%,35% { opacity:1; transform:translateY(-45%); } 100% { opacity:.2; transform:translateY(-58%); } }
@keyframes product-breathe { from { transform:translate3d(-.4%,.4%,0) rotate(-.2deg); } to { transform:translate3d(.6%,-.6%,0) rotate(.25deg); } }
@keyframes prism-pass { 0%,16% { transform:translateX(-75%); opacity:0; } 42% { opacity:.18; } 68%,100% { transform:translateX(75%); opacity:0; } }
@keyframes colorway-time { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (prefers-reduced-motion:no-preference) {
  .product-visual { animation:product-breathe 5.5s ease-in-out infinite alternate; }
  .product-visual::after { animation:prism-pass 6.8s ease-in-out infinite; }
  .colorways button.is-active::after { animation:colorway-time 4.2s linear both; }
  .signal-subject { animation:signal-drift linear both; animation-timeline:--signal; animation-range:entry 0% exit 100%; }
  .signal-copy { animation:signal-copy linear both; animation-timeline:--signal; animation-range:entry 0% exit 88%; }
}
@media (max-width:800px) {
  .product-nav { grid-template-columns:1fr auto; height:62px; padding:0 16px; }
  .wordmark { gap:9px; font-size:10px; }
  .brand-glyph { transform:scale(.88); transform-origin:left center; margin-right:-4px; }
  .product-nav nav { display:none; }
  .product-hero { grid-template-columns:1fr; }
  .plate { min-height:68svh; border-right:0; border-bottom:1px solid var(--line); }
  .plate::after { inset:10px; }
  .product-visual { width:92%; }
  .plate-code { top:26px; left:24px; }
  .plate-note { left:24px; bottom:24px; }
  .plate-axis { right:24px; font-size:14px; }
  .product-order { position:relative; min-height:0; padding:64px 16px 80px; }
  .product-order h1 { font-size:clamp(54px,15vw,76px); }
  .signal { height:190svh; }
  .signal-sticky { min-height:560px; }
  .signal-subject { object-position:61% 62%; }
  .signal-wash { background:linear-gradient(0deg,rgb(6 17 18 / .9) 0 48%,transparent 84%); }
  .signal-copy { top:auto; left:16px; right:48px; bottom:9vh; width:auto; transform:none; }
  .signal-copy h2 { font-size:clamp(56px,16vw,78px); }
  .signal ol { right:18px; bottom:3vh; gap:12px; font-size:7px; }
  .field-manual { grid-template-columns:1fr; gap:84px; min-height:auto; padding:100px 16px; }
  .field-manual header { position:static; }
  .field-manual h2 { font-size:clamp(58px,16vw,82px); }
  .field-manual dl { margin-top:52px; }
  footer { grid-template-columns:1fr; gap:34px; padding:48px 16px; }
  footer a { justify-self:start; }
}
@media (max-width:800px) and (orientation:portrait) {
  .signal { height:160svh; }
  .signal-backdrop { display:block; filter:blur(20px) brightness(.58) saturate(.65); transform:scale(1.14); }
  .signal-sticky > .signal-subject { inset:0 auto auto -35%; width:135%; max-width:none; height:auto; object-fit:contain; filter:saturate(.9) contrast(1.03); transform:none; animation:none; -webkit-mask-image:linear-gradient(#000 0 84%,transparent 100%); mask-image:linear-gradient(#000 0 84%,transparent 100%); }
  .signal-copy { top:50%; right:16px; bottom:auto; opacity:1; transform:none; animation:none; }
  .signal-copy h2 { margin:18px 0 20px; font-size:clamp(44px,12vw,58px); line-height:.86; }
  .signal-copy span { max-width:32ch; font-size:15px; line-height:1.45; }
}