/* 5.41 Studio — pass 2 (luxury details). Loaded last; additive overrides on the tokens in base.css.
   Sections: 1 reduced-motion safety net · 2 type · 3 rhythm + covered-text · 4 interaction states · 5 reticle cursor ·
   6 media frames per scene · 7 footer sign-off. */

/* ---------- 1. Reduced motion: everything visible, nothing waits on a scroll, observer or particle reveal ---------- */
@media (prefers-reduced-motion: reduce) {
  .gr-rv, .gr-rv.is-in { opacity: 1 !important; transform: none !important; }
  .gr-md-rule, .gr-md-rule.gr-rv { transform: none !important; }
  .gr-cl-rows, .gr-vw { opacity: 1 !important; }
  .gr-field-box::after { transform: none !important; }
  .gr-cover-final, .gr-cover-word { opacity: 1 !important; visibility: visible !important; }
}

/* ---------- 2. Typography ---------- */
:root {
  --trk-xl: -.045em;      /* display above ~200px */
  --trk-l: -.034em;       /* 120-200px */
  --trk-m: -.022em;       /* 56-120px */
  --trk-s: -.012em;       /* 30-56px */
  --measure: 62ch;
}
/* optical tracking: the bigger the type, the tighter (the cover titles scale with the viewport, so the tracking steps with it) */
.gr-cover .gr-cover-word { letter-spacing: var(--trk-l); }
@media (min-width: 1500px) { .gr-cover .gr-cover-word { letter-spacing: var(--trk-xl); } }
@media (max-width: 699px) { .gr-cover .gr-cover-word { letter-spacing: var(--trk-m); } }
.gr-cover.is-long .gr-cover-word { letter-spacing: var(--trk-l); }
.gr-cover.is-sentence .gr-cover-word { letter-spacing: var(--trk-m); }
.gr-md-big { letter-spacing: var(--trk-l); text-wrap: wrap; }   /* natural breaks: the aside sits beside its short last line */
.gr-vw-num { letter-spacing: var(--trk-s); }
.gr-st-big { letter-spacing: var(--trk-s); }
.gr-email { letter-spacing: var(--trk-s); }
.gr-land-brand { letter-spacing: var(--trk-s); }

/* balanced headings, no widows or orphans in running copy */
h1, h2, h3, h4, .gr-cover-word, .gr-cover-line, .gr-md-lead, .gr-md-line, .gr-pn-title, .gr-tile-title, .gr-player-title, .gr-vw-cap { text-wrap: balance; }
p, li, dd, figcaption, .gr-md-text, .gr-md-intro, .gr-bio-p, .gr-st-big { text-wrap: pretty; }
/* opening quote marks and statement openers hang into the margin where the engine supports it */
.gr-st-big, .gr-md-lead, .gr-cover.is-sentence .gr-cover-word, blockquote { hanging-punctuation: first last; }

/* tabular, lining figures everywhere numbers change or align */
.gr-vw-num, .gr-vw-d, .gr-md-sv, .gr-hud-tc, .gr-foot-tc, .gr-rl-n, .gr-mono, .gr-bp-val { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* comfortable measure on body copy */
.gr-md-text, .gr-md-intro, .gr-bio-p, .gr-cover-line, .gr-bio-label { max-width: var(--measure); }
.gr-vw-cap { max-width: 36ch; margin-left: auto; }
@media (max-width: 860px) { .gr-vw-cap { margin-inline: auto; } }

/* cap-height alignment: mono caps and display digits sit on their cap box, not their line box, so labels centre optically in buttons
   and against the big numerals (progressive: engines without text-box simply keep the line box) */
@supports (text-box: trim-both cap alphabetic) {
  .gr-btn, .gr-send, .gr-cta, .gr-foot-a { text-box: trim-both cap alphabetic; }
  .gr-vw-label, .gr-vw-cap, .gr-vw-d, .gr-vw-c { text-box: trim-both cap alphabetic; }
  .gr-vw-num { line-height: 1.2; }
}

/* ---------- 3. Vertical rhythm + covered-text ----------
   One rhythm: each chapter closes on --ch-pb (72-136px), each cover opens below the nav card (never under it) and hands over to its
   content with --sp-f-l. Everything inside a chapter keeps the existing fluid steps. */
.gr-chapter { --ch-pb: clamp(72px, 8.5vw, 136px); --nav-clear: calc(var(--hud-h) + 10px + 46px + var(--sp-4)); }
.gr-cover { padding-top: var(--nav-clear); padding-bottom: var(--sp-f-l); }
.gr-cl-wrap { padding-bottom: var(--sp-f-l); }
.gr-contact { padding-bottom: 0; }
/* anchors, focus jumps and in-page scrolls land clear of the HUD + nav card */
html { scroll-padding-top: calc(var(--hud-h) + 70px); scroll-padding-bottom: calc(var(--hud-h) + 24px); }
/* the sticky film index never slides under the nav card */
.gr-ix { top: calc(var(--hud-h) + 70px); }

/* ---------- 4. Interaction: one hover, one focus, one press ---------- */
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.gr-input:focus-visible { outline-offset: 0; }
.gr-nav-card a:focus-visible, .gr-nav-cur:focus-visible, .gr-nav-drop a:focus-visible { outline-offset: -3px; }

/* text links draw their underline in from the left and retract to the right */
.gr-status a {
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
  transition: background-size var(--t-move), color var(--t-fade);
}
.gr-status a:hover, .gr-status a:focus-visible { background-position: 0 100%; background-size: 100% 1px; }
.gr-foot-a::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% + .9em); height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--t-move); }
.gr-foot-a:hover::after, .gr-foot-a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.gr-email { background: linear-gradient(var(--amber), var(--amber)) 100% 100% / 0 2px no-repeat; transition: color var(--t-fade), background-size var(--t-slow); padding-bottom: .08em; }
.gr-email:hover, .gr-email:focus-visible { background-position: 0 100%; background-size: 100% 2px; }

/* panels and photographs lift a hair and brighten; logos rise and come up to full strength */
.gr-pn-frame, .gr-tile-frame, .gr-st-frame, .gr-ph-frame { transition: border-color var(--dur-hover) var(--ease), transform var(--dur-move) var(--ease), box-shadow var(--t-slow), filter var(--dur-move) var(--ease); }
.gr-pn:hover .gr-pn-frame, .gr-pn:focus-visible .gr-pn-frame, .gr-tile:hover .gr-tile-frame, .gr-tile:focus-visible .gr-tile-frame,
.gr-st:hover .gr-st-frame, .gr-st:focus-visible .gr-st-frame, .gr-ph:hover .gr-ph-frame, .gr-ph:focus-visible .gr-ph-frame { transform: translate3d(0, -3px, 0); filter: brightness(1.06); }
.gr-cl-logo { transition: opacity var(--dur-hover) var(--ease), transform var(--dur-move) var(--ease); }
.gr-cl-item:hover .gr-cl-logo { transform: translate3d(0, -2px, 0) scale(1.03); }
.gr-ix-item { transition: color var(--dur-hover) var(--ease), transform var(--dur-move) var(--ease); }
.gr-ix-item:hover { transform: translate3d(3px, 0, 0); }

/* press: everything you can click settles back a touch */
.gr-btn:active, .gr-cta:active, .gr-send:active, .gr-chip:active, .gr-menu-btn:active, .gr-foot-top:active { transform: translate3d(0, 1px, 0) scale(.98); }
.gr-pn:active .gr-pn-frame, .gr-tile:active .gr-tile-frame, .gr-st:active .gr-st-frame, .gr-ph:active .gr-ph-frame { transform: scale(.985); filter: brightness(1.02); }
.gr-ix-item:active { transform: translate3d(1px, 0, 0); }

/* ---------- 5. Reticle cursor (js/polish.js; desktop mouse only, off under reduced motion) ---------- */
#gr-reticle { position: fixed; left: 0; top: 0; z-index: 2000; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity var(--t-fade); will-change: transform; contain: layout style; }
#gr-reticle.is-on { opacity: 1; }
#gr-reticle.is-native { opacity: 0; }
#gr-reticle i, #gr-reticle b { position: absolute; display: block; border-radius: 50%; font-style: normal; }
.gr-ret-ring { left: -12px; top: -12px; width: 24px; height: 24px; border: 1px solid #fff; mix-blend-mode: difference; transition: transform var(--t-move), opacity var(--t-fade); }
.gr-ret-dot { left: -2px; top: -2px; width: 4px; height: 4px; background: #f3a712; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); transition: opacity var(--t-fade), transform var(--t-move); }
#gr-reticle .gr-ret-disc { left: -33px; top: -33px; width: 66px; height: 66px; display: grid; place-items: center; background: rgba(8, 9, 12, .72); border: 1px solid rgba(255, 255, 255, .38); color: #fff;
  font: 500 10px/1 var(--font-mono); letter-spacing: .18em; text-indent: .18em; text-transform: uppercase; opacity: 0; transform: scale(.35); transition: transform var(--t-move), opacity var(--t-fade); }
#gr-reticle.is-link .gr-ret-ring { transform: scale(1.45); }
#gr-reticle.is-media .gr-ret-ring, #gr-reticle.is-media .gr-ret-dot { opacity: 0; transform: scale(.4); }
#gr-reticle.is-media .gr-ret-disc { opacity: 1; transform: scale(1); }
#gr-reticle.is-down .gr-ret-ring { transform: scale(.78); }
#gr-reticle.is-down.is-media .gr-ret-disc { transform: scale(.88); }
html.gr-reticle-on, html.gr-reticle-on * { cursor: none !important; }
html.gr-reticle-on :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea, [contenteditable="true"]) { cursor: text !important; }
html.gr-reticle-on :is(select, iframe) { cursor: auto !important; }

/* ---------- 6. Media frames, per scene ----------
   Light scenes: a soft three-step contact shadow (the print sits on the glass). Dark scenes: a faint edge light (the glass catches the
   rim). Same 1px hairline on every frame, in the scene's own line colour. */
.gr-pn-frame, .gr-tile-frame, .gr-st-frame, .gr-ph-frame, .gr-bp-box, .gr-player-frame {
  box-shadow: 0 0 0 1px rgba(236, 235, 231, .06), 0 -1px 14px -4px rgba(236, 235, 231, .12), 0 22px 40px -24px rgba(0, 0, 0, .75);
}
html[data-lit] :is(.gr-pn-frame, .gr-tile-frame, .gr-st-frame, .gr-ph-frame) {
  box-shadow: 0 1px 1px rgba(34, 26, 16, .10), 0 8px 16px -8px rgba(34, 26, 16, .24), 0 26px 46px -26px rgba(34, 26, 16, .34);
}
html[data-lit] :is(.gr-pn:hover .gr-pn-frame, .gr-tile:hover .gr-tile-frame, .gr-st:hover .gr-st-frame, .gr-ph:hover .gr-ph-frame) {
  box-shadow: 0 2px 2px rgba(34, 26, 16, .10), 0 14px 24px -10px rgba(34, 26, 16, .28), 0 34px 56px -28px rgba(34, 26, 16, .38);
}
.gr-bp-box, .gr-player-frame { box-shadow: none; }

/* ---------- 7. Footer sign-off ---------- */
.gr-foot { margin-top: clamp(72px, 8vw, 128px); padding: var(--sp-5) 0 calc(var(--hud-h) + var(--sp-5)); }
.gr-foot-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-4) var(--sp-f-l); max-width: 1500px; margin: 0 auto; }
.gr-foot-sign { margin: 0; font-size: var(--t-label-m); letter-spacing: .16em; color: var(--tx-title); white-space: pre-wrap; }
.gr-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1) clamp(18px, 2.6vw, 44px); }
.gr-foot-a { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; padding: 0; color: var(--tx-body); font-size: var(--t-label-m); letter-spacing: .12em; text-decoration: none; text-transform: none; position: relative; }
.gr-foot-a:hover, .gr-foot-a:focus-visible { color: var(--ink); }
.gr-foot-top span { display: inline-block; font-size: .8em; transition: transform var(--t-move); }
.gr-foot-top:hover span, .gr-foot-top:focus-visible span { transform: translate3d(0, -3px, 0); }
.gr-foot-tc { margin: 0; justify-self: end; font-size: var(--t-label-m); letter-spacing: .14em; color: var(--tx-body); }
.gr-foot-tcl { color: var(--dim); }
.gr-foot-tcv { color: var(--ink); }
@media (max-width: 860px) {
  .gr-foot-row { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--sp-2); }
  .gr-foot-links { justify-content: flex-start; gap: 0 var(--sp-5); }
  .gr-foot-tc { justify-self: start; }
}

/* ---------- Pass 3/4: adapt (iOS Safari / phones) ---------- */
/* no backdrop-filter (older iOS, Low Power Mode, some Android WebViews): the glass becomes a firmer tint so text keeps its contrast */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root { --glass-thin: rgba(8, 10, 14, .84); --glass-thick: rgba(5, 6, 9, .95); }
}
/* body height: small viewport first so the iOS URL bar never changes it mid-scroll */
body { min-height: 100vh; min-height: 100svh; }
/* touch: every control is at least 44px (the visible mark stays the same size; the hit area grows) */
@media (pointer: coarse) {
  .gr-menu-btn::after { inset: -11px -8px; }
  .gr-lm-i { min-height: 44px; align-items: center; }
  .gr-land-cue, .gr-boot-skip { min-height: 44px; }
  .gr-email { padding-block: .22em; }
  .gr-foot-a, .gr-foot-top { min-height: 44px; display: inline-flex; align-items: center; }
  .gr-chip, .gr-ix-folder { min-height: 44px; }
  html { -webkit-tap-highlight-color: transparent; }
}
/* never let a long word or a wide caption push the page sideways */
.gr-chapter { max-width: 100vw; overflow-x: clip; }
/* reserve the poster boxes so nothing below them moves while images arrive */
.gr-pn-frame, .gr-tile-frame, .gr-st-frame, .gr-ph-frame { contain: layout paint; }