/* fargone » framed pages. tokens, components, page chrome, inner pages. */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Jost:wght@300;400;500&display=swap');

/* fargone — tokens. one theme: night. warm black ground, bone ink, film photos do the colour. */
:root {
  /* grounds */
  --black: #191813;          /* page ground: warm, never pure black */
  --deep: #100f0c;           /* photo overlays, the darkest shadow */
  --panel: #201f18;          /* raised surfaces, image placeholders */
  --line: #34322a;           /* hairlines between rows, outline buttons */

  /* ink */
  --bone: #f0eee6;           /* headlines, primary text, the solid button */
  --ink: #d9d6cb;            /* body copy */
  --dim: #8e8b7e;            /* labels, metadata, past events */
  --on-bone: #191813;        /* text on a bone fill */

  /* glass — anything floating over a photo */
  --glass: rgba(25, 24, 19, .42);
  --glass-strong: rgba(25, 24, 19, .6);
  --glass-line: rgba(240, 238, 230, .16);
  --glass-blur: blur(18px) saturate(1.2); /* @kind other */

  /* product photography sits on its own pale ground */
  --product-ground: #e9e7e1;

  /* type */
  --font-display: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;

  --text-display: 400 clamp(46px, 7.2vw, 108px)/0.94 var(--font-display);   /* tracking -0.035em */
  --text-title: 400 clamp(26px, 2.8vw, 38px)/1.08 var(--font-display);      /* tracking -0.025em */
  --text-heading: 500 18px/1.25 var(--font-body);                           /* tracking -0.01em */
  --text-body: 400 16px/1.55 var(--font-body);
  --text-small: 400 14px/1.45 var(--font-body);
  --text-label: 400 11px/1.4 var(--font-mono);                              /* uppercase, tracking 0.08em */
  --text-button: 500 11px/1 var(--font-mono);                               /* uppercase, tracking 0.08em */
  --text-numeral: 300 40px/1 var(--font-display);                           /* event dates; tracking -0.03em */

  /* shape */
  --radius-img: 14px;        /* photos, product shots */
  --radius-card: 22px;       /* floating cards (the join card) */
  --radius-pill: 999px;      /* every button, pill and capsule */

  --h-btn: 40px;
  --h-btn-sm: 30px;
  --h-status: 24px;

  /* space */
  --gut: clamp(16px, 2.4vw, 32px); /* @kind spacing */
  --max: 1320px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px; --space-20: 80px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1); /* @kind other */
  --dur: .25s; /* @kind other */

  /* film grain overlay, at 0.2 opacity, blend overlay */
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); /* @kind other */
}

body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

/* fargone — components. the app CSS: one pill family, one capsule, one status pill. */

/* ---------- type ---------- */
.label { font: var(--text-label); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.display { font: var(--text-display); letter-spacing: -.035em; color: var(--bone); text-transform: lowercase; margin: 0; }
.title { font: var(--text-title); letter-spacing: -.025em; color: var(--bone); text-transform: lowercase; margin: 0; }
.heading { font: var(--text-heading); letter-spacing: -.01em; color: var(--bone); text-transform: lowercase; margin: 0; }
.copy { font: var(--text-body); color: var(--ink); max-width: 54ch; margin: 0; }
.small { font: var(--text-small); color: var(--ink); margin: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--h-btn); padding: 0 18px 0 20px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none;
  font: var(--text-button); letter-spacing: .08em; text-transform: uppercase;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
/* back arrows are drawn pointing left, so they nudge left */
.btn:hover .arrow.back { transform: translateX(-3px); }
.btn:focus-visible { outline: 1px solid var(--bone); outline-offset: 3px; }
.btn.solid { background: var(--bone); color: var(--on-bone); }
.btn.solid:hover { background: #fff; }
.btn.glass { background: var(--glass); border-color: var(--glass-line); color: var(--bone); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.btn.glass:hover { background: var(--glass-strong); border-color: rgba(240, 238, 230, .3); }
.btn.line { background: none; border-color: var(--line); color: var(--bone); }
.btn.line:hover { border-color: var(--dim); }
.btn.sm { height: var(--h-btn-sm); padding: 0 13px; font-size: 10px; gap: 8px; }
.btn.icon { width: var(--h-btn); padding: 0; }
.btn.icon.sm { width: var(--h-btn-sm); }
.btn:disabled { opacity: .4; cursor: default; }

/* ---------- status pill: same shape, never a button ---------- */
.status {
  display: inline-flex; align-items: center; gap: 7px; height: var(--h-status); padding: 0 10px;
  border-radius: var(--radius-pill); border: 1px solid var(--line);
  font: 400 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); white-space: nowrap;
}
.status.live { border-color: transparent; background: var(--bone); color: var(--on-bone); }
.status.live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: fg-pulse 2s ease-in-out infinite; }
.status.over-photo { background: rgba(16, 15, 12, .55); border-color: transparent; color: var(--ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@keyframes fg-pulse { 50% { opacity: .25; } }

/* ---------- capsule: nav and filters ---------- */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.seg a, .seg button {
  height: 32px; padding: 0 16px; border-radius: var(--radius-pill); border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; text-decoration: none;
  font: var(--text-button); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg a:hover, .seg button:hover { color: var(--bone); background: rgba(240, 238, 230, .08); }
.seg .on, .seg .on:hover { background: var(--bone); color: var(--on-bone); }

/* ---------- nav ---------- */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: var(--gut); }
.logo { display: flex; align-items: center; gap: 9px; justify-self: start; }
.logo img { width: auto; display: block; }
.logo .lk-icon { height: 26px; }
.logo .lk-word { height: 19px; }
.nav-end { justify-self: end; display: flex; gap: 8px; }

/* ---------- join card ---------- */
.join { width: 360px; padding: 20px; border-radius: var(--radius-card); background: rgba(25, 24, 19, .5); border: 1px solid var(--glass-line); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); }
.join-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.join-top .label { color: var(--ink); }
.join .heading { font-size: 22px; font-weight: 400; letter-spacing: -.02em; }
.join .small { margin-top: 6px; }
.field { display: flex; align-items: center; gap: 6px; margin-top: 16px; height: 44px; padding: 0 4px 0 16px; border-radius: var(--radius-pill); background: rgba(240, 238, 230, .07); border: 1px solid var(--glass-line); }
.field:focus-within { border-color: rgba(240, 238, 230, .45); }
.field input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font: var(--text-small); color: var(--bone); }
.field input::placeholder { color: var(--dim); }
.field .btn { height: 36px; }
.picks { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.pick { position: relative; }
.pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.pick span { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--glass-line); font: 400 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.pick input:checked + span { background: rgba(240, 238, 230, .14); border-color: rgba(240, 238, 230, .4); color: var(--bone); }

/* ---------- event row ---------- */
.events { border-top: 1px solid var(--line); }
.event { display: grid; grid-template-columns: 120px 1fr 150px 130px 24px; align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.event .date { display: flex; align-items: baseline; gap: 10px; }
.event .day { font: var(--text-numeral); letter-spacing: -.03em; color: var(--bone); }
.event .small { color: var(--dim); margin-top: 3px; }
.event .status { justify-self: start; }
.event .go { color: var(--dim); justify-self: end; }
.event.past .day, .event.past .heading { color: var(--dim); }

/* ---------- product card ---------- */
.product { display: block; text-decoration: none; color: inherit; }
.product .img { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-img); background: var(--product-ground); }
.product .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product .img .btn { position: absolute; left: 12px; right: 12px; bottom: 12px; }
.product .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 2px 0; }
.product .meta .label { margin-top: 3px; }
.price { font: 400 13px/1 var(--font-mono); color: var(--bone); }

/* ---------- photo ---------- */
.photo-frame { position: relative; overflow: hidden; border-radius: var(--radius-img); background: var(--panel); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame .status { position: absolute; left: 10px; bottom: 10px; }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .2; mix-blend-mode: overlay; background-image: var(--grain); }

*{box-sizing:border-box}
a{color:var(--bone);text-decoration:none}a:hover{color:#fff}
img{display:block;max-width:100%}
.fgrain{position:fixed;inset:0;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background-image:var(--grain);z-index:50}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sec{padding:112px 0 0}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:28px;flex-wrap:wrap}
.tlink{font:var(--text-button);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;padding:0;height:32px}
.tlink:hover{color:var(--bone)}
.tlink svg{width:9px;height:9px;transition:transform var(--dur) var(--ease)}
.arrow{width:13px;height:13px}
.ph{background:var(--panel);border-radius:var(--radius-img);overflow:hidden;position:relative}
.ph img{width:100%;height:100%;object-fit:cover}
.ph .status{position:absolute;left:10px;bottom:10px}
.foot{margin-top:140px;border-top:1px solid var(--line);padding:40px 0 32px}
.foot-g{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.foot-g h4{font:var(--text-label);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:0 0 14px;font-weight:400}
.foot-g a{display:block;font:var(--text-small);color:var(--ink);margin-bottom:8px}
.foot-g a:hover{color:var(--bone)}
.foot-b{display:flex;justify-content:space-between;margin-top:56px;gap:16px;flex-wrap:wrap}
.wordbig{font:400 clamp(80px,17vw,260px)/.8 var(--font-display);letter-spacing:-.05em;color:var(--bone);margin:72px 0 0;text-transform:lowercase}
@media (max-width:860px){.foot-g{grid-template-columns:1fr 1fr}}

/* ---------- page ---------- */

.hdr{position:fixed;top:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px var(--gut);transition:background-color var(--dur) var(--ease)}
.hdr.solidbg{background:rgba(25,24,19,.72);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.hdr nav{display:flex;gap:28px}
.hdr .end{justify-self:end;display:flex;align-items:center;gap:22px}
.mm.open>.tlink{color:var(--bone)}
.mm.open>.tlink svg{transform:rotate(180deg)}
.hdr .v-cap,.hdr .v-ov{display:none}
body[data-nav="capsule"] .v-click,body[data-nav="overlay"] .v-click{display:none}
body[data-nav="capsule"] .hdr .v-cap{display:inline-flex}
body[data-nav="overlay"] .hdr .v-ov{display:inline-flex}
.isl-w{position:relative;height:40px;width:var(--cw,360px)}
.isl{position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--cw,360px);border-radius:20px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);overflow:hidden;transition:width .45s var(--ease),border-radius .45s var(--ease),background-color .3s var(--ease)}
.isl.open{width:min(600px,calc(100vw - 2*var(--gut)));border-radius:var(--radius-card);background:rgba(25,24,19,.84)}
.isl-row{display:flex;justify-content:center;gap:2px;padding:3px}
.isl-row>*{height:32px;padding:0 16px;border-radius:var(--radius-pill);border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:var(--text-button);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.isl-row>*:hover{color:var(--bone);background:rgba(240,238,230,.08)}
.isl-row svg{width:9px;height:9px;transition:transform var(--dur) var(--ease)}
.isl-row .on,.isl-row .on:hover{background:var(--bone);color:var(--on-bone)}
.isl-row .on svg{transform:rotate(180deg)}
.isl-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.isl.open .isl-body{grid-template-rows:1fr}
.isl-body>div{overflow:hidden;min-height:0}
.pane{display:none;padding:8px 16px 14px;animation:fg-in .35s var(--ease)}
.pane.on{display:block}
@keyframes fg-in{from{opacity:0;transform:translateY(-4px)}}
.irow{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--glass-line)}
.irow .d{font:300 28px/1 var(--font-display);letter-spacing:-.03em;color:var(--bone)}
.itiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:4px}
.itiles .ph{aspect-ratio:4/5;background:var(--product-ground);border-radius:10px}
.itiles p{display:flex;justify-content:space-between;gap:6px;margin:8px 0 0}
.ifoot{margin-top:10px}

.mm{position:static}.hdr nav{position:relative}
.dd{display:none;animation:fg-in .3s var(--ease)}
@keyframes fg-in{from{opacity:0;transform:translateY(-6px)}}
.dd .ph img{transition:opacity .45s var(--ease),transform .8s var(--ease)}
.ddglass{background:rgba(25,24,19,.82);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border:1px solid var(--glass-line);box-shadow:0 24px 60px rgba(0,0,0,.35)}
body[data-dd="card"] .mm.open .dd-card{display:block}
body[data-dd="sheet"] .mm.open .dd-sheet{display:grid}
body[data-dd="list"] .mm.open .dd-list{display:grid}
.dd-card,.dd-list{position:absolute;top:calc(100% + 14px);left:50%;border-radius:var(--radius-card);padding:8px;background:rgba(25,24,19,.82);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border:1px solid var(--glass-line);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.dd-card{width:380px;margin-left:-190px}
.dc-img{display:block;aspect-ratio:16/9;border-radius:16px}
.dc-img .status{position:absolute;left:10px;top:10px;bottom:auto}
.dc-img:hover img{transform:scale(1.03)}
.dc-b{padding:14px 12px 8px;display:flex;flex-direction:column}
.dc-next{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding-bottom:12px}
.dc-next .d{font:300 40px/1 var(--font-display);letter-spacing:-.03em;color:var(--bone)}
.dc-row{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--glass-line)}
.dc-row .small{color:var(--ink)}.dc-row:hover .small{color:var(--bone)}
.dc-b .tlink{margin-top:6px}
.dc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dc-grid .ph{aspect-ratio:1;background:var(--product-ground);border-radius:12px}
.dc-grid a:hover img{transform:scale(1.04)}
.dc-grid p{display:flex;justify-content:space-between;margin:8px 4px 4px}
.dc-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 6px 4px;border-top:1px solid var(--glass-line);margin-top:6px}
.dd-sheet{position:fixed;top:64px;left:12px;right:12px;height:min(500px,calc(100vh - 76px));border-radius:var(--radius-card);padding:28px;background:rgba(16,15,12,.9);backdrop-filter:blur(28px) saturate(1.1);-webkit-backdrop-filter:blur(28px) saturate(1.1);border:1px solid var(--glass-line);box-shadow:0 30px 80px rgba(0,0,0,.4);grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:28px}
.sh-links{display:flex;flex-direction:column;justify-content:flex-end}
.sh-links .label{margin:0 0 auto}
.sh-links a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:400 clamp(30px,3vw,44px)/1.15 var(--font-display);letter-spacing:-.035em;color:var(--dim);padding:4px 0;transition:color var(--dur) var(--ease)}
.sh-links a:hover{color:var(--bone)}
.sh-feat{display:block;border-radius:16px;height:100%}
.sh-feat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,15,12,.7),rgba(16,15,12,0) 55%)}
.sh-feat .sh-cap{position:absolute;z-index:2;left:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.sh-feat .status{position:static}
.sh-feat:hover img{transform:scale(1.03)}
.sh-side{display:flex;flex-direction:column;gap:2px}
.sh-side>.label{margin:0 0 10px}
.sh-ev{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--glass-line)}
.sh-ev .d{font:300 32px/1 var(--font-display);letter-spacing:-.03em;color:var(--bone)}
.sh-prods{grid-column:span 2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:0}
.sh-prods a{display:flex;flex-direction:column;min-height:0}
.sh-prods .ph{flex:1;min-height:0;background:var(--product-ground);border-radius:16px}
.sh-prods .ph img{position:absolute;inset:0}
.sh-prods a:hover img{transform:scale(1.03)}
.sh-prods p{display:flex;justify-content:space-between;margin:10px 2px 0}
.dd-list{width:540px;margin-left:-270px;padding:20px;grid-template-columns:minmax(0,1fr) 190px;gap:20px;align-items:stretch}
.ls-links{display:flex;flex-direction:column;justify-content:center}
.ls-links a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:400 30px/1.25 var(--font-display);letter-spacing:-.03em;color:var(--dim);padding:6px 0;border-bottom:1px solid var(--glass-line);transition:color var(--dur) var(--ease),padding var(--dur) var(--ease)}
.ls-links a:last-child{border-bottom:0}
.ls-links a.on{color:var(--bone);padding-left:6px}
.ls-pv{aspect-ratio:4/5;border-radius:16px}
.ls-pv.prod{background:var(--product-ground)}
.ls-pv img{position:absolute;inset:0;opacity:0}
.ls-pv img.on{opacity:1}
.ddsw{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:40}
.ddsw .seg button{white-space:nowrap}
@media (max-width:900px){.ddsw{display:none}}
.nextchip{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 4px 0 14px;border-radius:var(--radius-pill);background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.nextchip .status{height:24px}.nextchip .label{white-space:nowrap}#navsw button,.hdr .seg a{white-space:nowrap}
.ov{position:fixed;inset:0;z-index:30;background:rgba(16,15,12,.9);backdrop-filter:blur(28px) saturate(1.1);-webkit-backdrop-filter:blur(28px) saturate(1.1);display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);padding:88px var(--gut) var(--gut);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
body.ov-open .ov{opacity:1;visibility:visible}
.ov .top{position:absolute;top:14px;left:var(--gut);right:var(--gut);display:flex;justify-content:space-between;align-items:center}
.ov ul{list-style:none;margin:0;padding:0;align-self:end}
.ov li a{display:flex;align-items:baseline;gap:18px;font:400 clamp(48px,6.4vw,96px)/1.02 var(--font-display);letter-spacing:-.04em;color:var(--dim);transition:color var(--dur) var(--ease),transform .4s var(--ease)}
.ov li a .label{transform:translateY(-.4em)}
.ov li a:hover,.ov li a.on{color:var(--bone);transform:translateX(8px)}
.ov .side{display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.ov .pv{position:relative;flex:1;border-radius:var(--radius-card);overflow:hidden;background:var(--panel)}
.ov .pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
.ov .pv img.on{opacity:1}
.ov .pv .status{position:absolute;left:14px;bottom:14px;z-index:2}
.ov .meta{display:flex;justify-content:space-between;gap:16px}
.navsw{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px}
.navsw .label{color:var(--ink)}@media (max-width:900px){.navsw{display:none}.hdr{grid-template-columns:1fr auto}.hdr .v-ov
.mm{position:static}.hdr nav{position:relative}
.dd{display:none;animation:fg-in .3s var(--ease)}
@keyframes fg-in{from{opacity:0;transform:translateY(-6px)}}
.dd .ph img{transition:opacity .45s var(--ease),transform .8s var(--ease)}
.ddglass{background:rgba(25,24,19,.82);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border:1px solid var(--glass-line);box-shadow:0 24px 60px rgba(0,0,0,.35)}
body[data-dd="card"] .mm.open .dd-card{display:block}
body[data-dd="sheet"] .mm.open .dd-sheet{display:grid}
body[data-dd="list"] .mm.open .dd-list{display:grid}
.dd-card,.dd-list{position:absolute;top:calc(100% + 14px);left:50%;border-radius:var(--radius-card);padding:8px;background:rgba(25,24,19,.82);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border:1px solid var(--glass-line);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.dd-card{width:380px;margin-left:-190px}
.dc-img{display:block;aspect-ratio:16/9;border-radius:16px}
.dc-img .status{position:absolute;left:10px;top:10px;bottom:auto}
.dc-img:hover img{transform:scale(1.03)}
.dc-b{padding:14px 12px 8px;display:flex;flex-direction:column}
.dc-next{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding-bottom:12px}
.dc-next .d{font:300 40px/1 var(--font-display);letter-spacing:-.03em;color:var(--bone)}
.dc-row{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--glass-line)}
.dc-row .small{color:var(--ink)}.dc-row:hover .small{color:var(--bone)}
.dc-b .tlink{margin-top:6px}
.dc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dc-grid .ph{aspect-ratio:1;background:var(--product-ground);border-radius:12px}
.dc-grid a:hover img{transform:scale(1.04)}
.dc-grid p{display:flex;justify-content:space-between;margin:8px 4px 4px}
.dc-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 6px 4px;border-top:1px solid var(--glass-line);margin-top:6px}
.dd-sheet{position:fixed;top:64px;left:12px;right:12px;height:min(500px,calc(100vh - 76px));border-radius:var(--radius-card);padding:28px;background:rgba(16,15,12,.9);backdrop-filter:blur(28px) saturate(1.1);-webkit-backdrop-filter:blur(28px) saturate(1.1);border:1px solid var(--glass-line);box-shadow:0 30px 80px rgba(0,0,0,.4);grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:28px}
.sh-links{display:flex;flex-direction:column;justify-content:flex-end}
.sh-links .label{margin:0 0 auto}
.sh-links a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:400 clamp(30px,3vw,44px)/1.15 var(--font-display);letter-spacing:-.035em;color:var(--dim);padding:4px 0;transition:color var(--dur) var(--ease)}
.sh-links a:hover{color:var(--bone)}
.sh-feat{display:block;border-radius:16px;height:100%}
.sh-feat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,15,12,.7),rgba(16,15,12,0) 55%)}
.sh-feat .sh-cap{position:absolute;z-index:2;left:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.sh-feat .status{position:static}
.sh-feat:hover img{transform:scale(1.03)}
.sh-side{display:flex;flex-direction:column;gap:2px}
.sh-side>.label{margin:0 0 10px}
.sh-ev{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--glass-line)}
.sh-ev .d{font:300 32px/1 var(--font-display);letter-spacing:-.03em;color:var(--bone)}
.sh-prods{grid-column:span 2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:0}
.sh-prods a{display:flex;flex-direction:column;min-height:0}
.sh-prods .ph{flex:1;min-height:0;background:var(--product-ground);border-radius:16px}
.sh-prods .ph img{position:absolute;inset:0}
.sh-prods a:hover img{transform:scale(1.03)}
.sh-prods p{display:flex;justify-content:space-between;margin:10px 2px 0}
.dd-list{width:540px;margin-left:-270px;padding:20px;grid-template-columns:minmax(0,1fr) 190px;gap:20px;align-items:stretch}
.ls-links{display:flex;flex-direction:column;justify-content:center}
.ls-links a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:400 30px/1.25 var(--font-display);letter-spacing:-.03em;color:var(--dim);padding:6px 0;border-bottom:1px solid var(--glass-line);transition:color var(--dur) var(--ease),padding var(--dur) var(--ease)}
.ls-links a:last-child{border-bottom:0}
.ls-links a.on{color:var(--bone);padding-left:6px}
.ls-pv{aspect-ratio:4/5;border-radius:16px}
.ls-pv.prod{background:var(--product-ground)}
.ls-pv img{position:absolute;inset:0;opacity:0}
.ls-pv img.on{opacity:1}
.ddsw{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:40}
.ddsw .seg button{white-space:nowrap}
@media (max-width:900px){.ddsw{display:none}}
.nextchip{display:none!important}.hdr .end .tlink{display:none}.ov{grid-template-columns:1fr}.ov .side{display:none}}
.panel{position:absolute;left:var(--gut);right:var(--gut);top:calc(100% + 6px);padding:24px;border-radius:var(--radius-card);background:rgba(25,24,19,.78);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border:1px solid var(--glass-line);box-shadow:0 24px 60px rgba(0,0,0,.3);display:grid;grid-template-columns:1fr 1.6fr;gap:40px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.mm.open .panel{opacity:1;visibility:visible;transform:none}
.plist a,.plist a:first-child{border-color:var(--glass-line)!important}.plist .label{white-space:nowrap}.panel{grid-template-columns:minmax(400px,1fr) 1.6fr}.plist a{display:grid;grid-template-columns:56px 1fr auto;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.plist a:first-child{border-top:1px solid var(--line)}
.plist .d{font:300 28px/1 var(--font-display);letter-spacing:-.03em;color:var(--bone)}
.ptiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ptiles.four{grid-template-columns:repeat(4,1fr)}
.ptile .ph{aspect-ratio:16/10}
.ptiles.four .ph{aspect-ratio:4/5;background:var(--product-ground)}
.ptile p{margin:10px 0 0;display:flex;justify-content:space-between}
.hero{position:relative;height:100vh;min-height:720px;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,15,12,.8),rgba(16,15,12,.15) 42%,rgba(16,15,12,0) 60%),linear-gradient(to bottom,rgba(16,15,12,.45),rgba(16,15,12,0) 18%)}
.hero .base{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:var(--gut);display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.ticket{width:320px;padding:18px;border-radius:var(--radius-card);background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.ticket .row1{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.ticket .big{font:300 64px/.9 var(--font-display);letter-spacing:-.04em;color:var(--bone)}
.ticket .btn{width:100%;margin-top:16px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.split a{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--radius-img);overflow:hidden}
.split img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.split a:hover img{transform:scale(1.03)}
.split a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,15,12,.7),rgba(16,15,12,0) 45%)}
.split .cap{position:absolute;z-index:2;left:24px;right:24px;bottom:24px;display:flex;justify-content:space-between;align-items:flex-end}
.shop{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.product .img .btn{opacity:0;transform:translateY(6px);transition:all var(--dur) var(--ease)}
.product:hover .img .btn{opacity:1;transform:none}
.roll{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.roll .ph{aspect-ratio:4/5}
.listband{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;padding:56px 0 0}
.listband .field{margin:0;background:var(--panel);border-color:var(--line)}


.hero{height:100vh;min-height:720px;padding:64px 12px 12px;overflow:visible}
.hero::after{display:none}
.frame{position:relative;height:100%;border-radius:var(--radius-card);overflow:hidden}
.frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,15,12,.75),rgba(16,15,12,0) 50%)}
.frame .base{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:28px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.cd{width:340px;padding:18px;border-radius:var(--radius-card);background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.cd .row1{display:flex;justify-content:space-between;align-items:center}
.cd .nums{display:grid;grid-template-columns:repeat(3,1fr);margin:20px 0 4px;border-top:1px solid var(--glass-line)}
.cd .nums div{padding-top:12px}.cd .nums div+div{border-left:1px solid var(--glass-line);padding-left:14px}
.cd .n{font:300 44px/1 var(--font-display);letter-spacing:-.04em;color:var(--bone);font-variant-numeric:tabular-nums}
.cd .btn{width:100%;margin-top:16px}
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(-1 * var(--gut))}
.rail::-webkit-scrollbar{display:none}
.rail .product{flex:0 0 clamp(220px,24vw,320px);scroll-snap-align:start}
.rail .product .img .btn{opacity:0;transform:translateY(6px);transition:all var(--dur) var(--ease)}
.rail .product:hover .img .btn{opacity:1;transform:none}
.railctl{display:flex;gap:6px}
.hdr nav{gap:6px}
.hdr nav>.tlink,.mm>.tlink{padding:0 14px;border-radius:var(--radius-pill);transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.hdr nav>.tlink:hover,.mm>.tlink:hover{background:rgba(240,238,230,.08)}
.mm.open>.tlink{background:var(--bone);color:var(--on-bone)}
.tlink:focus{outline:none}.tlink:focus-visible{outline:1px solid rgba(240,238,230,.5);outline-offset:2px}
body:has(.mm.open) .frame>img{transform:scale(1.02);filter:brightness(.6);transition:transform .8s var(--ease),filter .4s var(--ease)}
.frame>img{transition:transform .8s var(--ease),filter .4s var(--ease)}
body[data-dd="attach"] .hdr{top:8px;left:12px;right:12px;padding:8px 8px 8px 16px;border-radius:var(--radius-card);background:var(--glass-strong);border:1px solid var(--glass-line);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);isolation:isolate}
body[data-dd="attach"] .hdr:has(.mm.open),body[data-dd="attach"] .hdr:has(.mm.closing){background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body[data-dd="attach"] .hdr nav{position:static}
body[data-dd="attach"] .mm.open .dd-sheet,body[data-dd="attach"] .mm.closing .dd-sheet{display:grid;position:absolute;top:-1px;left:-1px;right:-1px;height:min(520px,calc(100vh - 24px));padding:72px 24px 24px;z-index:-1;border-radius:var(--radius-card);background:rgba(16,15,12,.9);animation:fg-grow .5s var(--ease) both}
body[data-dd="attach"] .mm.open .dd-sheet::before,body[data-dd="attach"] .mm.closing .dd-sheet::before{content:"";position:absolute;left:16px;right:16px;top:56px;height:1px;background:var(--glass-line)}
body[data-dd="attach"] .mm.open .dd-sheet>*{animation:fg-in .35s .15s var(--ease) both}
@keyframes fg-grow{from{clip-path:inset(0 0 calc(100% - 58px) 0 round 22px)}to{clip-path:inset(0 0 0 0 round 22px)}}
body[data-dd="attach"] .mm.closing .dd-sheet{animation:fg-shrink .42s var(--ease) both;pointer-events:none}
body[data-dd="attach"] .mm.closing .dd-sheet>*{animation:fg-fade .18s var(--ease) both}
body[data-dd="attach"] .mm.swap .dd-sheet{animation:none}
@keyframes fg-shrink{from{clip-path:inset(0 0 0 0 round 22px)}to{clip-path:inset(0 0 calc(100% - 58px) 0 round 22px)}}
@keyframes fg-fade{to{opacity:0;transform:translateY(-4px)}}
body[data-dd="card"] .mm.closing .dd-card,body[data-dd="list"] .mm.closing .dd-list,body[data-dd="sheet"] .mm.closing .dd-sheet{display:block;animation:fg-fade .22s var(--ease) both;pointer-events:none}
body[data-dd="list"] .mm.closing .dd-list,body[data-dd="sheet"] .mm.closing .dd-sheet{display:grid}
body[data-dd="attach"] .hdr{background:rgba(20,19,15,.84);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);transition:none}
body[data-dd="attach"] .mm.open .dd-sheet,body[data-dd="attach"] .mm.closing .dd-sheet{background:rgba(20,19,15,.84);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border:1px solid var(--glass-line);box-shadow:none}
body[data-dd="attach"] .mm.open .dd-sheet{box-shadow:0 30px 80px rgba(0,0,0,.35);transition:box-shadow .4s var(--ease)}
body[data-dd="attach"] .mm.closing .dd-sheet::before{animation:fg-fade .2s var(--ease) both}
body[data-dd="attach"] .mm>.tlink{transition:background-color .35s var(--ease),color .35s var(--ease)}
body[data-dd="sheet"] .mm.open .dd-sheet{animation:fg-drop .4s var(--ease) both}
body[data-dd="sheet"] .mm.open .dd-sheet>*{animation:fg-in .35s .1s var(--ease) both}
body[data-dd="sheet"] .mm.swap .dd-sheet{animation:none}
body[data-dd="sheet"] .mm.closing .dd-sheet{animation:fg-lift .3s var(--ease) both}
@keyframes fg-drop{from{opacity:0;transform:translateY(-10px) scale(.99)}}
@keyframes fg-lift{to{opacity:0;transform:translateY(-10px) scale(.99)}}
.sh-feat{grid-column:span 2}
.cd2{display:flex;flex-direction:column;align-items:flex-end;gap:14px;text-align:right}
.cd2-n{display:flex;gap:18px;font:400 13px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.cd2-n b{font:300 clamp(48px,5vw,72px)/.9 var(--font-display);letter-spacing:-.04em;color:var(--bone);font-variant-numeric:tabular-nums;margin-right:4px}
.cd2-pill{display:flex;align-items:center;gap:18px;height:52px;padding:0 6px 0 22px;border-radius:var(--radius-pill);background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);transition:background-color var(--dur) var(--ease)}
.cd2-pill:hover{background:var(--glass-strong)}
.cd2-pill .cd2-t{display:flex;align-items:baseline;gap:12px;white-space:nowrap}

html{scroll-behavior:smooth}

/* events sheet: hover cross-fade */
.sh-feat img{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease),transform .8s var(--ease)}
.sh-feat img.on{opacity:1}
.sh-links a.on{color:var(--bone)}
.sh-cap.swap{animation:fg-in .35s var(--ease)}
.sh-feat .status:not(.live){background:rgba(16,15,12,.55);border-color:transparent;color:var(--ink);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* =========================================================
   inner pages: climbs, rides, past, gallery, item
   ========================================================= */
.nav-on{color:var(--bone)!important;background:rgba(240,238,230,.08)}
.page{padding-top:64px}
.crumbs{display:flex;gap:10px;align-items:center;margin:0 0 18px}
.crumbs a{color:var(--dim)}.crumbs a:hover{color:var(--bone)}

/* framed page hero: same frame as home, shorter */
.phero{height:min(76vh,760px);min-height:520px;padding:64px 12px 0}
.phero .frame{height:100%}
.phero .base{align-items:flex-end}
.phero .lede{font:var(--text-body);color:var(--ink);max-width:40ch;margin:18px 0 0}
.phero .side{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}

/* plain page head (no photo) */
.head{padding:120px 0 0}
.head .display{margin-top:4px}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}

/* intro: big statement left, facts right */
.intro{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start}
.intro .title{max-width:20ch}
.intro .copy+.copy{margin-top:14px}
.facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.facts>div{padding:16px 0 18px;border-bottom:1px solid var(--line)}
.facts>div:nth-child(odd){padding-right:16px}
.facts>div:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
.facts .heading{margin-top:8px}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.step{padding:22px;border-radius:var(--radius-card);background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;min-height:220px}
.step .n{font:300 40px/1 var(--font-display);letter-spacing:-.03em;color:var(--bone)}
.step .heading{margin-top:auto}
.step .small{color:var(--dim)}

/* event list on inner pages */
.events.empty{padding:28px 0;color:var(--dim)}
.event .label.place{white-space:nowrap}
a.event:hover .heading{color:#fff}
a.event:hover .go{color:var(--bone)}
.event .go svg{width:13px;height:13px}

/* photo strip: 3 or 4 film frames */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.strip.three{grid-template-columns:repeat(3,1fr)}
.strip .ph{aspect-ratio:4/5}
.strip .ph.wide{aspect-ratio:auto}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font:var(--text-heading);letter-spacing:-.01em;color:var(--bone)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 24px/1 var(--font-display);color:var(--dim);transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .copy{padding:0 0 22px;color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1.6fr;gap:56px;align-items:start}
.two>.label{padding-top:22px}

/* cross-link band: the other thing we do */
.xband{position:relative;display:block;height:420px;border-radius:var(--radius-card);overflow:hidden}
.xband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.xband:hover img{transform:scale(1.03)}
.xband::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,15,12,.75),rgba(16,15,12,0) 55%)}
.xband .cap{position:absolute;z-index:2;left:28px;right:28px;bottom:28px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}

/* past: one chapter per city */
.chapters{display:flex;flex-direction:column}
.chapter{display:grid;grid-template-columns:minmax(220px,1fr) 2.4fr;gap:40px;padding:40px 0;border-top:1px solid var(--line)}
.chapter:last-child{border-bottom:1px solid var(--line)}
.chapter .yr{font:300 var(--text-numeral);font-size:64px;line-height:.9;letter-spacing:-.04em;color:var(--bone)}
.chapter .city{margin-top:10px}
.chapter .title{margin:0 0 12px}
.chapter .copy{color:var(--ink)}
.chapter .strip{margin-top:24px}
.chapter .none{margin-top:24px;padding:28px;border-radius:var(--radius-img);border:1px dashed var(--line);color:var(--dim)}
.chapter.now .yr{color:var(--bone)}
.timeline{display:flex;gap:6px;flex-wrap:wrap}

/* gallery */
.masonry{columns:3;column-gap:12px}
.shot{break-inside:avoid;margin:0 0 12px;position:relative}
.shot button{display:block;width:100%;padding:0;border:0;background:var(--panel);border-radius:var(--radius-img);overflow:hidden;cursor:zoom-in}
.shot img{width:100%;height:auto;transition:transform .8s var(--ease),filter .4s var(--ease)}
.shot button:hover img{transform:scale(1.02)}
.shot figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.shot figcaption a{font:var(--text-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.shot figcaption a:hover{color:var(--bone)}
.roll-sec+.roll-sec{padding-top:72px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:60;background:rgba(16,15,12,.96);display:grid;grid-template-rows:auto 1fr auto;padding:14px var(--gut) 18px;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.lb.open{opacity:1;visibility:visible}
.lb-top,.lb-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px}
.lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:16px 0}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-img);transition:opacity .25s var(--ease)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%)}
.lb-nav.prev{left:0}.lb-nav.next{right:0}
.lb-nav.prev svg{transform:scaleX(-1)}
.lb-nav.prev:hover svg{transform:scaleX(-1) translateX(3px)}
body.lock{overflow:hidden}

/* item page */
.pd{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:start}
.pd-media{display:grid;grid-template-columns:72px 1fr;gap:12px}
.pd-thumbs{display:flex;flex-direction:column;gap:8px}
.pd-thumbs button{padding:0;border:1px solid transparent;border-radius:10px;overflow:hidden;background:var(--product-ground);cursor:pointer;aspect-ratio:1;opacity:.6;transition:opacity var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pd-thumbs button.on,.pd-thumbs button:hover{opacity:1}
.pd-thumbs button.on{border-color:var(--bone)}
.pd-thumbs img{width:100%;height:100%;object-fit:cover}
.pd-main{position:relative;aspect-ratio:1;border-radius:var(--radius-img);overflow:hidden;background:var(--product-ground)}
.pd-main.dark{background:var(--panel)}
.pd-main img{width:100%;height:100%;object-fit:cover;transition:opacity .25s var(--ease)}
.pd-info{position:sticky;top:88px;display:flex;flex-direction:column}
.pd-info .display{font-size:clamp(40px,4.6vw,64px)}
.pd-price{font:400 18px/1 var(--font-mono);color:var(--bone);margin:16px 0 0}
.pd-info .copy{margin-top:20px}
.opt{margin-top:26px}
.opt-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:var(--h-btn);min-width:52px;padding:0 16px;border-radius:var(--radius-pill);border:1px solid var(--line);background:none;color:var(--ink);font:var(--text-button);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.chip:hover{border-color:var(--dim);color:var(--bone)}
.chip.on{background:var(--bone);border-color:var(--bone);color:var(--on-bone)}
.chip .sw{width:12px;height:12px;border-radius:50%;border:1px solid rgba(240,238,230,.3)}
.pd-buy{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.pd-buy .btn{width:100%;height:48px}
.pd-buy .small{color:var(--dim)}
.pd-buy .btn.need{animation:fg-shake .35s var(--ease)}
@keyframes fg-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.pd .faq{margin-top:32px}
.pd .faq summary{font:var(--text-button);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding:18px 0}
.spec{display:grid;grid-template-columns:90px 1fr;gap:6px 16px;padding:0 0 20px}
.spec dt{font:var(--text-label);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.spec dd{margin:0;font:var(--text-small);color:var(--ink)}
.size-t{width:100%;border-collapse:collapse;font:400 12px/1 var(--font-mono);color:var(--ink);margin-bottom:12px}
.size-t th,.size-t td{text-align:left;padding:10px 0;border-bottom:1px solid var(--line);font-weight:400}
.size-t th{color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.pd-faq .copy{padding:0 0 20px}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.product .img.worn{background:var(--panel)}
.notfound{padding:160px 0 40px}

/* =========================================================
   phones and small tablets
   ========================================================= */
@media (max-width:900px){
  .frame::after{background:linear-gradient(to top,rgba(16,15,12,.88),rgba(16,15,12,.55) 50%,rgba(16,15,12,0) 80%)}
  .hero{height:auto;min-height:0;padding:64px 8px 8px}
  .hero .frame{height:calc(100svh - 72px);min-height:600px}
  .frame .base{flex-direction:column;align-items:flex-start;padding:20px;gap:24px}
  .cd2{align-items:flex-start;text-align:left;width:100%}
  .cd2-n{gap:14px}
  .cd2-pill{width:100%;justify-content:space-between;padding-left:18px}
  .cd2-pill .cd2-t .label{display:none}
  .cd2-pill .cd2-more{display:none}
  .display{font-size:clamp(44px,13vw,72px)}
  .sec{padding-top:80px}
  .split{grid-template-columns:1fr}
  .split a{aspect-ratio:4/5}
  .rail .product{flex-basis:72vw}
  .roll,.strip{grid-template-columns:1fr 1fr}
  .strip.three{grid-template-columns:1fr 1fr}
  .listband{grid-template-columns:1fr;gap:20px}
  .phero{height:auto;min-height:0;padding:64px 8px 0}
  .phero .frame{height:72svh;min-height:480px}
  .phero .side{align-items:flex-start;text-align:left}
  .intro,.two,.pd,.chapter{grid-template-columns:1fr;gap:28px}
  .two>.label{padding-top:0}
  .steps{grid-template-columns:1fr}
  .step{min-height:0}
  .event{grid-template-columns:64px 1fr auto;gap:14px;padding:18px 0}
  .event .label.place,.event .go{display:none}
  .event .day{font-size:30px}
  .masonry{columns:2}
  .xband{height:340px}
  .pd-media{grid-template-columns:1fr}
  .pd-thumbs{flex-direction:row;order:2}
  .pd-thumbs button{width:64px}
  .pd-info{position:static}
  .related{grid-template-columns:1fr 1fr}
  .head{padding-top:104px}
  .lb-nav{display:none}
}
@media (max-width:560px){
  .facts{grid-template-columns:1fr}
  .facts>div:nth-child(even){padding-left:0;border-left:0}
  .masonry{columns:1}
  .event{grid-template-columns:52px 1fr}
  .event .status{grid-column:2;justify-self:start}
}

/* ---------- page transitions ----------
   browsers with cross-page view transitions keep the old page up until the next one is ready,
   then crossfade it in while the header holds still. older browsers get a fade up on load. */
@view-transition{navigation:auto}
.hdr{view-transition-name:fg-hdr}
::view-transition-old(root){animation:fg-vt-out .18s ease-out both}
::view-transition-new(root){animation:fg-vt-in .36s var(--ease) both}
::view-transition-old(fg-hdr),::view-transition-new(fg-hdr){animation-duration:.2s}
@keyframes fg-vt-out{to{opacity:0}}
@keyframes fg-vt-in{from{opacity:0;transform:translateY(8px)}}
@keyframes fg-page{from{opacity:0;transform:translateY(10px)}}
@supports not (view-transition-name:none){main{animation:fg-page .45s var(--ease) backwards}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}main{animation:none!important}}
/* with the phone menu open, the header crossfades with the menu instead of floating over it */
body.ov-open .hdr{view-transition-name:none}