/* =========================================================
   Aditya Bhamidipati — Portfolio v2
   "Field notes of a builder": dense grid, hand-drawn notes,
   story-telling illustrations instead of big empty photos.
   ========================================================= */
:root {
  --paper: #f3f2ec;
  --paper-2: #e9e7df;
  --card: #fbfaf6;
  --ink: #121212;
  --ink-2: #3b3a36;
  --muted: #7a786f;
  --line: rgba(18, 18, 18, 0.12);
  --accent: #3d2bff;     /* blue-violet */
  --accent-soft: #dcd8ff;
  --lime: #d4ff3a;       /* highlighter */
  --red: #e5484d;        /* only for Covdonors (blood) */
  --display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --hand: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --gutter: clamp(16px, 3vw, 40px);
  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--lime); color: var(--ink); }
svg { overflow: visible; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.hand { font-family: var(--hand); font-weight: 600; }
.muted { color: var(--muted); }
mark { background: linear-gradient(transparent 55%, var(--lime) 55%, var(--lime) 92%, transparent 92%); color: inherit; padding: 0 .08em; }

/* ---------- Loader: a tiny boarding sequence ---------- */
.loader {
  position: fixed; inset: 0; z-index: 1000; background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
}
.loader__inner { width: min(420px, 80vw); }
.loader__route { display: flex; justify-content: space-between; font-family: var(--display); font-size: 44px; font-weight: 700; letter-spacing: -.02em; }
.loader__bar { position: relative; height: 1px; background: rgba(255,255,255,.2); margin: 18px 0 12px; }
.loader__bar i { position: absolute; inset: 0; background: var(--lime); transform: scaleX(0); transform-origin: left; }
.loader__plane { position: absolute; top: -9px; left: 0; width: 18px; height: 18px; fill: var(--lime); transform: translateX(-50%); }
.loader__meta { display: flex; justify-content: space-between; color: rgba(255,255,255,.55); }
html.no-loader .loader { display: none; }

.curtain { position: fixed; inset: 0; z-index: 998; background: var(--ink); transform: scaleY(0); transform-origin: bottom; pointer-events: none; }
html.is-arriving .curtain { transform: scaleY(1); transform-origin: top; }

/* ---------- Cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 997; pointer-events: none;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff; mix-blend-mode: difference;
  transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .3s;
  display: grid; place-items: center;
}
.cursor span { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cursor.is-big { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: var(--lime); mix-blend-mode: normal; }
.cursor.is-big span { opacity: 1; }
.cursor.is-link { width: 30px; height: 30px; margin: -15px 0 0 -15px; background: transparent; border: 1px solid #fff; }
.cursor.is-draw { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
@media (hover: none) { .cursor { display: none; } }
@media (hover: hover) { body, a, button { cursor: none; } }

/* ---------- Nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 14px 0; transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.nav.is-solid { background: rgba(243,242,236,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav__logo { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.nav__logo i { width: 10px; height: 10px; background: var(--accent); border-radius: 3px; display: inline-block; animation: morph 6s var(--ease) infinite; }
.nav__links { display: flex; gap: 4px; font-size: 14px; }
.nav__links a { padding: 6px 12px; border-radius: 999px; transition: background .3s; }
.nav__links a:hover { background: var(--paper-2); }
.nav__clocks { display: flex; gap: 14px; color: var(--muted); }
.nav__clocks b { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .nav__clocks { display: none; } }
.nav__logo { white-space: nowrap; }
@media (max-width: 640px) {
  .nav__links a { padding: 6px 8px; } .nav__links { font-size: 13px; gap: 0; }
  .nav__links a[href$="#journey"], .nav__links a[href$="#offclock"] { display: none; }
  .log__map .pin text { font-size: 24px !important; }
  .log__map .pin text.code { font-size: 36px !important; }
  .log__map .ocean { display: none; }
}

/* ---------- Split text ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.w > span { display: inline-block; will-change: transform; }

/* ---------- Section heads ---------- */
.section { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.head { display: grid; grid-template-columns: 160px 1fr minmax(220px, 340px); gap: 24px; align-items: end; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.head__idx { color: var(--muted); }
.head__title { font-family: var(--display); font-weight: 700; font-size: clamp(36px, 4.6vw, 64px); line-height: .95; letter-spacing: -.02em; font-variation-settings: "wdth" 88; }
.head__aside { color: var(--ink-2); font-size: 14px; }
@media (max-width: 860px) { .head { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--ink); font-size: 14px; font-weight: 500; position: relative; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .45s var(--ease); border-radius: inherit; }
.btn:hover { color: var(--paper); }
.btn:hover::before { transform: none; }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid::before { background: var(--accent); }

/* =========================================================
   HERO
   ========================================================= */
.hero { padding-top: 96px; padding-bottom: 40px; }
.hero__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; min-height: calc(100svh - 150px); }
.kicker { display: flex; align-items: center; gap: 10px; color: var(--muted); margin-bottom: 22px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.hero__title {
  font-family: var(--display); font-weight: 700; letter-spacing: -.022em; line-height: .92;
  font-size: clamp(54px, 7.4vw, 120px); font-variation-settings: "wdth" 84, "opsz" 96;
}
.hero__title .soft { font-weight: 300; font-variation-settings: "wdth" 100, "opsz" 96; letter-spacing: -.02em; }
.morph-wrap { display: inline-block; vertical-align: baseline; }
.morph { display: inline-block; width: .62em; height: .62em; margin: 0 .08em 0 .02em; background: var(--accent); animation: morph 6s var(--ease) infinite; transform-origin: center; }
@keyframes morph {
  0%, 18% { border-radius: 50%; transform: rotate(0); background: var(--accent); }
  25%, 43% { border-radius: 8%; transform: rotate(45deg) scale(.85); background: var(--accent); }
  50%, 68% { border-radius: 50% 50% 8% 50%; transform: rotate(0); background: var(--ink); }
  75%, 93% { border-radius: 0; transform: rotate(90deg) scale(.9); background: var(--accent); }
  100% { border-radius: 50%; transform: rotate(180deg); background: var(--accent); }
}
.scribble { position: relative; display: inline-block; }
.scribble svg { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .32em; }
.scribble path { fill: none; stroke: var(--lime); stroke-width: 10; stroke-linecap: round; mix-blend-mode: multiply; }
.hero__lede { margin-top: 26px; font-size: clamp(16px, 1.35vw, 19px); color: var(--ink-2); max-width: 46ch; }
.hero__lede b { color: var(--ink); font-weight: 600; }
.hero__cta { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; min-height: 0; padding-top: 24px; } }

/* ---------- Boarding pass ---------- */
.pass-wrap { position: relative; perspective: 1200px; }
.pass {
  display: grid; grid-template-columns: 1fr 108px; background: var(--card); border-radius: 18px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 30px 60px -30px rgba(18,18,18,.35); border: 1px solid var(--line);
  transform-style: preserve-3d; will-change: transform; position: relative;
}
.pass__main { padding: 22px 22px 18px; }
.pass__head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.pass__head b { color: var(--accent); font-weight: 500; }
.pass__route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 18px 0 14px; }
.pass__code { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 4.2vw, 58px); line-height: .9; letter-spacing: -.02em; }
.pass__city { color: var(--muted); font-size: 12px; margin-top: 4px; }
.pass__fly { position: relative; height: 54px; }
.pass__fly svg { width: 100%; height: 100%; }
.pass__fly .arc { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 5; }
.pass__fly .arc-back { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 3 5; }
.pass__fly .jet { fill: var(--ink); }
.pass__fly .jet-back { fill: var(--accent); }
.pass__fly small { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); white-space: nowrap; color: var(--muted); }
.pass__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pass__grid dt { color: var(--muted); margin-bottom: 2px; }
.pass__grid dd { font-weight: 500; font-size: 14px; line-height: 1.25; }
.pass__status { color: var(--accent); }
.pass__stub {
  border-left: 2px dashed var(--line); padding: 18px 12px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; gap: 10px;
  position: relative; transition: transform .6s var(--ease);
  transform-origin: left center;
}
.pass__stub::before, .pass__stub::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); }
.pass__stub::before { top: -11px; } .pass__stub::after { bottom: -11px; }
.pass:hover .pass__stub { transform: rotate(4deg) translate(6px, 4px); }
.pass__stub b { font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.barcode { display: flex; gap: 2px; height: 120px; width: 46px; flex-direction: column; }
.barcode i { display: block; background: var(--ink); width: 100%; }
.pass-note { position: absolute; left: -10px; bottom: -64px; font-size: 26px; color: var(--accent); transform: rotate(-4deg); display: flex; align-items: center; gap: 6px; }
.pass-note svg { width: 54px; height: 40px; transform: scaleY(-1) rotate(-10deg); }
.pass-note path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
@media (max-width: 980px) { .pass-note { position: static; margin-top: 18px; } }
@media (max-width: 520px) {
  .pass { grid-template-columns: 1fr; }
  .pass__stub { border-left: 0; border-top: 2px dashed var(--line); flex-direction: row; }
  .pass__stub::before, .pass__stub::after { display: none; }
  .barcode { flex-direction: row; height: 40px; width: 150px; }
  .barcode i { height: 100%; width: auto; }
  .pass__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Ticker ---------- */
.ticker { background: var(--ink); color: var(--paper); overflow: hidden; padding: 14px 0; }
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__item { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -.02em; padding-right: 30px; display: flex; align-items: center; gap: 30px; white-space: nowrap; font-variation-settings: "wdth" 90; }
.ticker__item::after { content: "✦"; color: var(--lime); font-size: .6em; }

/* =========================================================
   FLIGHT LOG
   ========================================================= */
.log { position: relative; }
.log__pin { height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 64px; }
.log__stage { position: relative; }
.log__map { width: 100%; height: auto; max-height: 52svh; display: block; }
.log__map .land { fill: var(--paper-2); stroke: rgba(18,18,18,.28); stroke-width: 1; stroke-linejoin: round; }
.log__map .region { font-family: var(--display); font-weight: 800; font-size: 56px; letter-spacing: -.025em; fill: rgba(18,18,18,.07); }
.log__map .ocean { font-family: var(--hand); font-size: 26px; fill: var(--muted); }
.log__map .route-bg { fill: none; stroke: rgba(18,18,18,.18); stroke-width: 1.5; stroke-dasharray: 4 7; }
.log__map .route-ink { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.log__map .pin circle.dot { fill: var(--paper); stroke: var(--ink); stroke-width: 2; transition: fill .4s, stroke .4s; }
.log__map .pin circle.ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; }
.log__map .pin text { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; fill: var(--ink); }
.log__map .pin text.code { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.log__map .pin.is-on circle.dot { fill: var(--accent); stroke: var(--accent); }
.log__map .pin.is-on circle.ring { opacity: 1; animation: ring 1.8s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.log__map .plane { fill: var(--ink); }
.log__cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 20px; }
.stop { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; opacity: .45; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .5s, box-shadow .5s; }
.stop.is-on { opacity: 1; transform: none; border-color: var(--ink); box-shadow: 0 12px 30px -18px rgba(18,18,18,.4); }
.stop__top { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 8px; }
.stop h4 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; line-height: 1.05; }
.stop p { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.log__progress { display: flex; justify-content: space-between; margin-top: 14px; color: var(--muted); }
@media (max-width: 900px) {
  .log__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .stop { min-width: 220px; scroll-snap-align: start; }
}

/* =========================================================
   CASE FILES (work)
   ========================================================= */
.cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cases { grid-template-columns: 1fr; } }
.case {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s;
}
.case:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(18,18,18,.45); border-color: var(--ink); }
.case__art { position: relative; aspect-ratio: 3 / 2; background: var(--paper-2); overflow: hidden; border-bottom: 1px solid var(--line); }
.case__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.case__art .label { position: absolute; left: 12px; top: 12px; padding: 4px 8px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.case__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.case__meta { display: flex; justify-content: space-between; color: var(--muted); }
.case h3 { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -.02em; line-height: 1; margin-top: 4px; }
.case__role { color: var(--accent); font-weight: 500; font-size: 13px; }
.case__line { font-size: 14px; color: var(--ink-2); flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin-top: 8px; }
.chips li { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.chips li.hi { background: var(--lime); border-color: transparent; }
.case__go { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.case__go span:last-child { transition: transform .5s var(--ease); }
.case:hover .case__go span:last-child { transform: translateX(6px); }

/* — illustration: Stealth capsule — */
.art-stealth { background: #e9e6ff; }
.cap-l, .cap-r { transition: transform .9s var(--ease); }
.case:hover .cap-l { transform: translateX(-16px); }
.case:hover .cap-r { transform: translateX(16px); }
.gran { transform-box: fill-box; transform-origin: center; transition: transform 1s var(--ease), opacity .6s; opacity: 0; }
.case:hover .gran { opacity: 1; transform: translate(var(--x), var(--y)); }
.cap-float { animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }

/* — illustration: Micron wafer — */
.art-micron { background: #e6e9ee; }
.die { fill: #c7ccd6; transition: fill .3s; }
.die.lit { animation: die 3.2s var(--ease) infinite; animation-delay: var(--d); }
@keyframes die { 0%, 60%, 100% { fill: #c7ccd6; } 20% { fill: var(--accent); } }
.case:hover .die.lit { animation-duration: 1.6s; }
.wafer-spin { transform-box: fill-box; transform-origin: center; transition: transform 1.6s var(--ease); }
.case:hover .wafer-spin { transform: rotate(30deg); }

/* — illustration: Lowe's visualizer — */
.art-lowes { background: #f3ede2; }
.case:hover .scanline { animation-duration: 1.8s !important; }

/* — illustration: Covdonors — */
.art-cov { background: #fde9e7; }
.ecg { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: ecg 2.6s linear infinite; }
@keyframes ecg { to { stroke-dashoffset: -520; } }
.case:hover .ecg { animation-duration: 1.3s; }

/* =========================================================
   ABOUT (bento)
   ========================================================= */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.cell { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: relative; overflow: hidden; }
.cell__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); margin-bottom: 10px; }
.cell h3 { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -.02em; line-height: 1.05; }
.cell p { font-size: 14px; color: var(--ink-2); }
.about-photo { grid-column: span 3; padding: 0; min-height: 360px; }
.about-photo .ph { position: absolute; inset: 0; }
.about-photo figcaption { position: absolute; left: 12px; bottom: 10px; color: #fff; font-size: 22px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.about-bio { grid-column: span 5; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.about-bio .big { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.08; letter-spacing: -.025em; color: var(--ink); }
.about-bio .big .fw { opacity: .15; }
.path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.path span { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; background: var(--paper); }
.path i { color: var(--muted); font-style: normal; }
.about-loop { grid-column: span 4; }
.loop svg { width: 100%; height: auto; }
.loop .ring-path { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 6; }
.loop .node rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.loop .node text { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-anchor: middle; dominant-baseline: central; fill: var(--ink); }
.loop .node.hot rect { fill: var(--ink); } .loop .node.hot text { fill: var(--paper); }
.loop .core { font-family: var(--hand); font-size: 30px; text-anchor: middle; fill: var(--accent); }
.loop .runner { fill: var(--accent); }
@media (max-width: 1000px) { .about-photo { grid-column: span 5; } .about-bio { grid-column: span 7; } .about-loop { grid-column: span 12; } }
@media (max-width: 640px) { .about-photo, .about-bio, .about-loop { grid-column: span 12; } }

/* =========================================================
   OFF THE CLOCK
   ========================================================= */
.c-globe { grid-column: span 7; grid-row: span 2; min-height: 560px; display: flex; flex-direction: column; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.c-globe .cell__head { color: rgba(255,255,255,.55); }
.c-globe h3 { color: var(--paper); }
.c-globe p { color: rgba(255,255,255,.7); max-width: 44ch; }
.globe-box { position: relative; flex: 1; display: grid; grid-template-columns: 1fr 240px; gap: 10px; margin-top: 12px; min-height: 400px; }
.globe-canvas { width: min(100%, 460px); aspect-ratio: 1; align-self: center; justify-self: center; cursor: grab; touch-action: pan-y; contain: layout paint size; opacity: 0; transition: opacity 1.2s; }
.globe-canvas.ready { opacity: 1; }
.globe-canvas:active { cursor: grabbing; }
.places-ui { display: flex; flex-direction: column; gap: 10px; min-height: 0; max-height: 470px; align-self: center; width: 100%; }
.places-stats { color: rgba(255,255,255,.6); line-height: 1.6; }
.places-stats b { color: var(--lime); font-weight: 500; }
.places-tabs { display: flex; gap: 4px; }
.places-tabs button { flex: 1; padding: 7px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--paper); transition: background .3s, color .3s; }
.places-tabs button small { opacity: .55; font-size: 9.5px; }
.places-tabs button.is-on { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.places-tabs button.is-on small { opacity: .7; }
.places { list-style: none; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; mask-image: linear-gradient(#000 88%, transparent); }
.places button.is-lived span::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); margin-left: 6px; vertical-align: middle; }
.places-legend { color: rgba(255,255,255,.45); font-size: 10px; }
.places-legend i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); margin-right: 6px; vertical-align: middle; }
.places button { width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 8px; font-size: 13px; transition: background .3s, border-color .3s; color: var(--paper); }
.places button small { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .05em; }
.places button:hover, .places button.is-on { background: rgba(255,255,255,.08); border-color: var(--lime); }
.places .legend { display: flex; gap: 12px; margin-top: 8px; color: rgba(255,255,255,.5); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.places .legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
@media (max-width: 760px) { .globe-box { grid-template-columns: 1fr; } .places-ui { max-height: 340px; } }

.c-ritual { grid-column: span 5; }
.ritual-screen { margin-top: 14px; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 14px; min-height: 176px; display: flex; flex-direction: column; gap: 10px; }
.ritual-top { display: flex; align-items: center; gap: 10px; }
.mic { width: 38px; height: 38px; border-radius: 50%; background: var(--lime); color: var(--ink); display: grid; place-items: center; flex: none; transition: transform .3s var(--ease); }
.mic:hover { transform: scale(1.08); }
.mic svg { width: 16px; height: 16px; }
.wave { display: flex; align-items: center; gap: 3px; height: 28px; flex: 1; }
.wave i { width: 3px; border-radius: 2px; background: rgba(255,255,255,.35); height: 4px; transition: height .12s; }
.wave.on i { background: var(--lime); }
.transcript { font-family: var(--mono); font-size: 13px; min-height: 20px; color: rgba(255,255,255,.9); }
.transcript::after { content: "▍"; animation: blink 1s infinite; color: var(--lime); }
.parsed { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.parsed span { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.parsed span.next { background: var(--accent); border-color: var(--accent); }

.c-art { grid-column: span 5; display: flex; flex-direction: column; }
.pad { position: relative; margin-top: 12px; flex: 1; min-height: 190px; border-radius: 10px; border: 1px dashed var(--line);
  background-color: #fff; background-image: radial-gradient(rgba(18,18,18,.12) 1px, transparent 1px); background-size: 16px 16px; }
.pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.pad__hint { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; color: rgba(18,18,18,.25); pointer-events: none; transition: opacity .4s; text-align: center; }
.pad.used .pad__hint { opacity: 0; }
.pad__tools { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; }
.pad__tools button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.pad__tools button.is-on { box-shadow: 0 0 0 2px var(--ink); }
.pad__tools .clear { width: auto; border-radius: 999px; padding: 0 8px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; background: var(--paper); border: 1px solid var(--line); box-shadow: none; }

.c-fit, .c-cine, .c-photo { grid-column: span 4; min-height: 260px; display: flex; flex-direction: column; }
.cell .fit-word { color: var(--ink); font-family: var(--display); font-weight: 800; font-size: clamp(34px, 3.4vw, 50px); letter-spacing: -.025em; line-height: 1; margin-top: auto; }
.fit-word span { display: inline-block; color: var(--accent); }
.fit-ring { position: absolute; right: 16px; bottom: 16px; width: 74px; height: 74px; }
.fit-ring circle { fill: none; stroke-width: 6; }
.fit-ring .bg { stroke: var(--paper-2); }
.fit-ring .fg { stroke: var(--lime); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; stroke-dasharray: 201; stroke-dashoffset: 201; }

.c-cine { background: #171717; color: var(--paper); border-color: #171717; }
.c-cine .cell__head { color: rgba(255,255,255,.5); }
.c-cine h3 { color: var(--paper); }
.c-cine p { color: rgba(255,255,255,.7); }
.cine-row { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.watch { width: 86px; height: 86px; flex: none; }
.watch .face { fill: #222; stroke: rgba(255,255,255,.3); stroke-width: 2; }
.watch .tick { stroke: rgba(255,255,255,.5); stroke-width: 2; }
.watch .hand { stroke: var(--paper); stroke-linecap: round; transform-origin: 50px 50px; }
.watch .h-m { animation: spin 6s linear infinite; }
.watch .h-s { stroke: var(--lime); animation: spin 1s steps(60) infinite; }
.c-cine:hover .watch .hand { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }
.cell .cine-q { font-family: var(--hand); font-size: 26px; line-height: 1.05; color: var(--lime); }
.cine-q .alt { display: none; }
.c-cine:hover .cine-q .def { display: none; }
.c-cine:hover .cine-q .alt { display: inline; }
.filmstrip { position: absolute; right: -30px; top: 18px; width: 160px; height: 34px; background: #000; transform: rotate(12deg);
  background-image: linear-gradient(90deg, transparent 6px, #2a2a2a 6px, #2a2a2a 30px, transparent 30px); background-size: 36px 100%;
  border-top: 6px dotted #555; border-bottom: 6px dotted #555; opacity: .8; }

.c-photo { padding: 0; color: #fff; background: #000; border-color: #000; }
.viewfinder { position: absolute; inset: 0; }
.viewfinder .ph { position: absolute; inset: 0; border-radius: 0; }
.viewfinder .ph:not(.has-img) { background: radial-gradient(circle at 30% 30%, #5b5b66, #121212); }
.vf-ui { position: absolute; inset: 14px; pointer-events: none; }
.vf-ui i { position: absolute; width: 22px; height: 22px; border-color: #fff; border-style: solid; }
.vf-ui i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.vf-ui i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.vf-ui i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.vf-ui i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.vf-ui .focus { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border: 1.5px solid var(--lime); border-radius: 4px; transition: transform .5s var(--ease); }
.c-photo:hover .vf-ui .focus { transform: scale(.7); }
.vf-top, .vf-bot { position: absolute; left: 30px; right: 30px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.vf-top { top: 18px; } .vf-bot { bottom: 18px; }
.vf-top .rec::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 6px; animation: blink 1.2s infinite; }
.vf-title { position: absolute; left: 30px; bottom: 44px; font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

@media (max-width: 1000px) {
  .c-globe { grid-column: span 12; grid-row: auto; }
  .c-ritual, .c-art { grid-column: span 6; }
  .c-fit, .c-cine, .c-photo { grid-column: span 6; }
}
@media (max-width: 640px) { .c-ritual, .c-art, .c-fit, .c-cine, .c-photo { grid-column: span 12; } }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--ink); color: var(--paper); padding: clamp(56px, 7vw, 96px) 0 24px; margin-top: 40px; }
.board { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 26px; }
.flap { width: clamp(30px, 4.6vw, 64px); height: clamp(42px, 6.4vw, 88px); background: #1d1d1d; border-radius: 6px; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: clamp(24px, 4vw, 56px); color: var(--lime); position: relative; overflow: hidden; }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.6); }
.flap.space { background: transparent; }
.footer__mail { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 6.4vw, 96px); letter-spacing: -.025em; line-height: 1; display: inline-block; font-variation-settings: "wdth" 85; transition: color .3s; }
.footer__mail:hover { color: var(--lime); }
.footer__note { font-size: 26px; color: var(--lime); margin-top: 14px; transform: rotate(-2deg); display: inline-block; }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; }
.footer__row nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__row a { opacity: .7; transition: opacity .3s; } .footer__row a:hover { opacity: 1; }
.footer__clocks { color: rgba(255,255,255,.5); }
.footer__clocks b { color: var(--paper); font-weight: 500; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, calc(100% + 40px)); background: var(--lime); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; transition: transform .6s var(--ease); }
.toast.is-on { transform: translate(-50%, 0); }

/* ---------- Image placeholders ---------- */
.ph { position: relative; overflow: hidden; background: var(--paper-2); display: grid; place-items: center; color: var(--muted); font-family: var(--hand); font-size: 24px; }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph.has-img > span { display: none; }

/* =========================================================
   CASE STUDY PAGES (compact)
   ========================================================= */
.cs { padding-top: 92px; }
.cs-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.cs-back { display: inline-flex; gap: 6px; color: var(--muted); margin-bottom: 18px; }
.cs-back:hover { color: var(--ink); }
.cs-title { font-family: var(--display); font-weight: 700; font-size: clamp(44px, 5.6vw, 88px); line-height: .94; letter-spacing: -.022em; font-variation-settings: "wdth" 82, "opsz" 96; }
.cs-title em { font-style: normal; color: var(--accent); }
.cs-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 24px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cs-meta div { background: var(--card); padding: 12px 14px; }
.cs-meta dt { color: var(--muted); margin-bottom: 3px; }
.cs-meta dd { font-weight: 500; }
.cs-cover { border-radius: var(--radius); border: 1px solid var(--line); min-height: 320px; background: #fff; }
.cs-cover > img[style*="contain"] { padding: 5%; }
@media (max-width: 900px) { .cs-top { grid-template-columns: 1fr; } .cs-cover { aspect-ratio: 16/10; min-height: 0; } }
.cs-story { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.cs-story .cell h3 { font-size: 20px; margin-bottom: 8px; }
.cs-story .cell p { font-size: 15px; line-height: 1.55; }
.cs-story .cell p + p { margin-top: .7em; }
.cs-story .n { position: absolute; right: 14px; top: 12px; color: var(--muted); }
.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.cs-stat { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 18px; }
.cs-stat b { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 4.4vw, 64px); letter-spacing: -.025em; line-height: 1; display: block; color: var(--lime); }
.cs-stat span { font-size: 13px; color: rgba(255,255,255,.7); }
.cs-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
@media (max-width: 860px) { .cs-gallery { grid-template-columns: repeat(2, 1fr); } }
.shot { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; margin: 0; }
.shot .ph { position: absolute; inset: 0; }
.shot .ph > img { transition: transform .8s var(--ease); }
.shot:hover .ph > img { transform: scale(1.05); }
.shot figcaption { position: absolute; left: 10px; bottom: 8px; color: #fff; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; text-shadow: 0 1px 6px rgba(0,0,0,.7); opacity: 0; transition: opacity .3s; }
.shot:has(.has-img) figcaption { opacity: 1; }
.shot.wide { grid-column: span 2; aspect-ratio: 8 / 3; }
.shot.natural { aspect-ratio: auto; background: #fff; }
.shot.natural .ph { position: relative; inset: auto; background: #fff; }
.shot.natural .ph > img { position: relative; height: auto; }
.shot.natural .ph:not(.has-img) { aspect-ratio: 8 / 3; background: var(--paper-2); }
.shot.natural figcaption { color: var(--ink); text-shadow: none; background: var(--lime); padding: 3px 6px; border-radius: 4px; }
@media (max-width: 520px) { .cs-gallery { grid-template-columns: 1fr; } .shot.wide { grid-column: auto; aspect-ratio: 4 / 3; } .shot.natural { aspect-ratio: auto; } }
.next-case { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; padding: 22px; border-radius: var(--radius); background: var(--accent); color: #fff; transition: background .4s; }
.next-case:hover { background: var(--ink); }
.next-case b { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4vw, 56px); letter-spacing: -.025em; line-height: 1; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 900; background: rgba(10,10,10,.92); display: grid; place-items: center; padding: 4vmin; opacity: 0; pointer-events: none; transition: opacity .4s; }
.lightbox.is-on { opacity: 1; pointer-events: auto; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 8px; transform: scale(.96); transition: transform .5s var(--ease); }
.lightbox.is-on img { transform: none; }
.lightbox p { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .loader { display: none; }
}

/* ---------- Notes (formerly handwritten): display font, sized to sit with the rest ---------- */
.hand { font-weight: 600; letter-spacing: -.01em; }
.pass-note { font-size: 16px; transform: none; }
.about-photo figcaption { font-size: 15px; }
.loop .core { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.pad__hint { font-size: 18px; }
.cell .cine-q { font-size: 17px; line-height: 1.25; font-weight: 600; }
.footer__note { font-size: 17px; transform: none; color: rgba(255,255,255,.6); }
.ph { font-size: 16px; }

/* ---------- Cinephile tile: Baahubali × Interstellar backdrop ---------- */
.c-cine { isolation: isolate; background: #0d0d0d; }
.c-cine::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("images/cine-bg.jpg") center / cover no-repeat; transition: transform 1.4s var(--ease); }
.c-cine:hover::before { transform: scale(1.06); }
.c-cine::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,8,8,.6) 0%, rgba(8,8,8,.12) 38%, rgba(8,8,8,.25) 60%, rgba(8,8,8,.88) 100%); }
.c-cine .watch .face { fill: rgba(20,20,20,.75); }

.cell .fit-word { padding-right: 86px; }

/* =========================================================
   SLIDE-IN MENU
   ========================================================= */
html.has-menu .nav__links { display: none; }
/* icon-only button: three lines → ⚡ bolt on hover → ✕ when open */
.menu-btn {
  display: grid; place-items: center; width: 52px; height: 44px; border-radius: 999px;
  background: var(--ink); color: var(--paper); position: relative;
  transition: background .45s var(--ease), color .45s var(--ease);
}
.menu-btn__icon { position: relative; width: 24px; height: 20px; }
.menu-btn__icon i {
  position: absolute; left: 1px; width: 22px; height: 2px; border-radius: 2px; background: currentColor;
  transform-origin: center; transition: transform .55s var(--ease), background .3s, opacity .3s;
}
.menu-btn__icon i:nth-child(1) { top: 3px; }
.menu-btn__icon i:nth-child(2) { top: 9px; }
.menu-btn__icon i:nth-child(3) { top: 15px; }
/* hover: the lines turn lime and pulse like a sound wave (an equalizer), each a beat apart */
html:not(.menu-open) .menu-btn:hover .menu-btn__icon i { background: var(--lime); transform-origin: right center; animation: eq .9s var(--ease) infinite alternate; }
html:not(.menu-open) .menu-btn:hover .menu-btn__icon i:nth-child(2) { animation-delay: -.3s; }
html:not(.menu-open) .menu-btn:hover .menu-btn__icon i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0% { transform: scaleX(1); } 50% { transform: scaleX(.38); } 100% { transform: scaleX(.72); } }
/* open: ✕ */
html.menu-open .menu-btn { background: var(--lime); color: var(--ink); }
html.menu-open .menu-btn__icon i:nth-child(1) { transform: translateY(6px) rotate(45deg) scaleX(.82); }
html.menu-open .menu-btn__icon i:nth-child(2) { transform: scaleX(0); opacity: 0; }
html.menu-open .menu-btn__icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg) scaleX(.82); }

html.menu-open .nav { z-index: 95; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav__clocks, .nav__logo { transition: opacity .4s; }
html.menu-open .nav__clocks { opacity: 0; }

.menu-shade {
  position: fixed; inset: 0; z-index: 85; opacity: 0; visibility: hidden;
  background: rgba(18, 18, 18, .3);
  backdrop-filter: blur(14px) saturate(.85); -webkit-backdrop-filter: blur(14px) saturate(.85);
}
.menu { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(580px, 100vw); visibility: hidden; }
.menu__wash, .menu__inner { position: absolute; inset: 0; border-radius: 28px 0 0 28px; }
.menu__wash { background: var(--lime); }
.menu__inner {
  background: var(--ink); color: var(--paper); display: flex; flex-direction: column;
  padding: 100px clamp(24px, 4vw, 52px) 28px; overflow-y: auto; overscroll-behavior: contain;
}
@media (max-width: 600px) { .menu__wash, .menu__inner { border-radius: 0; } }
.menu__top { display: flex; justify-content: space-between; color: rgba(255,255,255,.45); padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.menu__list { display: flex; flex-direction: column; margin-top: 6px; }
.menu__item { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 6px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); transition: opacity .45s var(--ease); }
.menu__num { color: rgba(255,255,255,.4); align-self: start; padding-top: 1.1em; }
.menu__mask { display: block; overflow: hidden; padding-bottom: .08em; transition: transform .7s var(--ease); }
.menu__label {
  display: inline-block; transform-origin: left bottom;
  font-family: var(--display); font-weight: 700; letter-spacing: -.022em; line-height: .98;
  font-size: clamp(42px, 5.6vw, 72px); font-variation-settings: "wdth" 84, "opsz" 96;
  transition: color .4s var(--ease);
}
.menu__arrow { font-size: 30px; color: var(--lime); opacity: 0; transform: translate(-12px, 12px) rotate(-12deg); transition: opacity .4s, transform .7s var(--ease); }
.menu__list:hover .menu__item { opacity: .3; }
.menu__list .menu__item:hover { opacity: 1; }
.menu__item:hover .menu__mask { transform: translateX(16px); }
.menu__item:hover .menu__label { color: var(--lime); }
.menu__item:hover .menu__arrow { opacity: 1; transform: none; }
.menu__foot { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.menu__kicker { color: rgba(255,255,255,.45); }
.menu__mail { font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.1vw, 28px); letter-spacing: -.02em; transition: color .3s; }
.menu__mail:hover { color: var(--lime); }
.menu__socials { display: flex; gap: 18px; flex-wrap: wrap; }
.menu__socials a { opacity: .65; transition: opacity .3s; }
.menu__socials a:hover { opacity: 1; }
.menu__clocks { color: rgba(255,255,255,.45); }
.menu__clocks b { color: var(--paper); font-weight: 500; }
@media (max-width: 600px) { html.menu-open .nav__logo { color: var(--paper); } }

/* ---------- Camera tile: real photo + legibility fade ---------- */
.viewfinder .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 52%, rgba(0,0,0,.62) 100%); pointer-events: none; }
.viewfinder .ph > img { transition: transform 1.4s var(--ease); }
.c-photo:hover .viewfinder .ph > img { transform: scale(1.05); }

/* ---------- Fitness tile: gym photo backdrop ---------- */
.c-fit { isolation: isolate; background: #111; border-color: #111; color: var(--paper); }
.c-fit::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("images/fitness-bg.jpg") 62% 30% / cover no-repeat; transition: transform 1.4s var(--ease); }
.c-fit:hover::before { transform: scale(1.05); }
.c-fit::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,8,8,.62) 0%, rgba(8,8,8,.18) 40%, rgba(8,8,8,.35) 62%, rgba(8,8,8,.9) 100%); }
.c-fit .cell__head { color: rgba(255,255,255,.6); }
.c-fit h3 { color: var(--paper); }
.cell.c-fit .fit-word { color: var(--paper); }
.cell.c-fit .fit-word span { color: var(--lime); }
.c-fit .fit-ring .bg { stroke: rgba(255,255,255,.18); }

/* ---------- Cinephile v2: Rajamouli vs Nolan, pick a side ---------- */
.c-cine { min-height: 280px; }
.c-cine::after { background: linear-gradient(180deg, rgba(8,8,8,.5) 0%, rgba(8,8,8,0) 22%, rgba(8,8,8,0) 55%, rgba(8,8,8,.78) 100%); }
.c-cine .cell__head { position: relative; z-index: 3; color: rgba(255,255,255,.8); }
.cine-prompt { color: var(--lime); }
.cine-side {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; padding: 18px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  transition: background .6s var(--ease), backdrop-filter .6s var(--ease), -webkit-backdrop-filter .6s var(--ease);
}
.cine-left { left: 0; }
.cine-right { right: 0; align-items: flex-end; text-align: right; }
.cine-name { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 2.5vw, 36px); line-height: 1; letter-spacing: -.02em; color: var(--paper); transition: color .35s, transform .6s var(--ease); }
.cine-films { font-size: 10px; color: var(--lime); opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .6s var(--ease); }
.cine-side:hover .cine-name { color: var(--lime); transform: translateY(-2px); }
.cine-side:hover .cine-films { opacity: 1; transform: none; }
/* the side you didn't pick drops to black & white */
.c-cine:has(.cine-left:hover) .cine-right,
.c-cine:has(.cine-right:hover) .cine-left { background: rgba(8,8,8,.5); backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1); }
.cine-vs { position: absolute; left: 50%; bottom: 20px; z-index: 2; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--ink); font-size: 10px; }
@media (hover: none) { .cine-films { opacity: 1; transform: none; } }

/* ---------- Lens photo: zoom in so Aditya sits centre-frame ---------- */
.c-photo .viewfinder .ph > img { width: 155%; max-width: none; left: 0; object-position: 50% 46%; }

/* ---------- Hero layout: copy + buttons left, pass right; on phones the buttons drop under the pass ---------- */
.hero__grid { grid-template-areas: "copy pass" "cta pass"; grid-template-rows: auto auto; align-content: center; row-gap: 0; }
.hero__copy { grid-area: copy; align-self: end; }
.pass-wrap { grid-area: pass; align-self: center; }
.hero__cta { grid-area: cta; align-self: start; }
@media (max-width: 980px) {
  .hero__grid { grid-template-areas: "copy" "pass" "cta"; row-gap: 28px; }
  .hero__cta { margin-top: 0; }
}

/* =========================================================
   Boarding pass: hover tears the stub off along the perforation
   The card is now two separate paper pieces; the shadow follows their shapes.
   ========================================================= */
.pass { background: none; border: 0; box-shadow: none; filter: drop-shadow(0 26px 26px rgba(18,18,18,.16)) drop-shadow(0 1px 1px rgba(18,18,18,.08)); }
.pass__main {
  position: relative; background: var(--card); border: 1px solid var(--line); border-right: 2px dashed rgba(18,18,18,.18);
  border-radius: 18px 0 0 18px;
}
/* punch-hole notches now sit on the main piece's perforated edge */
.pass__main::before, .pass__main::after { content: ""; position: absolute; right: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); z-index: 1; }
.pass__main::before { top: -11px; } .pass__main::after { bottom: -11px; }
.pass__stub::before, .pass__stub::after { display: none; }
.pass__stub {
  background: var(--card); border: 1px solid var(--line); border-left: 0; border-radius: 0 18px 18px 0;
  /* ragged, torn-paper left edge (little triangles) + solid paper everywhere else */
  -webkit-mask: linear-gradient(#000 0 0) 5px 0 / calc(100% - 5px) 100% no-repeat, conic-gradient(from 45deg at 0 50%, #000 90deg, #0000 0) 0 0 / 5px 7px repeat-y;
          mask: linear-gradient(#000 0 0) 5px 0 / calc(100% - 5px) 100% no-repeat, conic-gradient(from 45deg at 0 50%, #000 90deg, #0000 0) 0 0 / 5px 7px repeat-y;
  transform-origin: 0% 100%;
  transition: transform .8s cubic-bezier(.34, 1.56, .5, 1);
}
.pass:hover .pass__stub { transform: translate(7px, 3px) rotate(8deg); }
/* the main piece gives a tiny tug the other way */
.pass__main { transition: transform .8s cubic-bezier(.34, 1.56, .5, 1); }
.pass:hover .pass__main { transform: rotate(-.6deg); }

@media (max-width: 520px) {
  .pass__main { border-right: 1px solid var(--line); border-bottom: 2px dashed rgba(18,18,18,.18); border-radius: 18px 18px 0 0; }
  .pass__main::before, .pass__main::after { display: none; }
  .pass__stub { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 18px 18px; -webkit-mask: none; mask: none; transform-origin: 0% 0%; }
}

/* =========================================================
   Flight log on phones: stacked map, one card at a time
   ========================================================= */
.log__map--m { display: none; }
@media (max-width: 640px) {
  .log__map--d { display: none; }
  .log__map--m { display: block; width: 100%; height: auto; max-height: 50svh; margin: 0 auto; }
  .log__map--m .pin text.code { font-size: 30px !important; }
  .log__map--m .pin circle.dot { stroke-width: 3; }
  .log__map--m .route-ink { stroke-width: 4; }
  .log__map--m .route-bg { stroke-width: 2; }
  .log__map--m .land { stroke-width: 1.5; }

  .log__pin { justify-content: flex-start; padding-top: 76px; }
  .log .head { margin-bottom: 8px; padding-bottom: 12px; }
  .log .head__aside { font-size: 13px; }

  /* one full-width card, no half-visible neighbour; it follows the plane */
  .log__cards { gap: 0; margin-top: 10px; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .log__cards::-webkit-scrollbar { display: none; }
  .stop { min-width: 100%; padding: 14px 16px; opacity: 1; transform: none; border-color: var(--ink); box-shadow: none; }
  .stop h4 { font-size: 22px; }
  .stop p { font-size: 14px; }

  /* single status line instead of the repeated "Departed" */
  .log__progress span:first-child { display: none; }
  .log__progress { justify-content: flex-start; margin-top: 10px; }
}

/* ---------- Case pages: clear "Back to work" pill ---------- */
.cs-back {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  padding: 10px 10px 10px 14px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  box-shadow: 0 10px 24px -14px rgba(18,18,18,.6);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.cs-back:hover { background: var(--lime); color: var(--ink); }
.cs-back__arrow {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--lime); color: var(--ink); font-size: 15px; line-height: 1;
  transition: transform .5s var(--ease), background .35s, color .35s;
}
.cs-back:hover .cs-back__arrow { transform: translateX(-4px); background: var(--ink); color: var(--lime); }
.cs-back__idx { padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 10.5px; }
.cs-back:hover .cs-back__idx { background: rgba(18,18,18,.1); }

/* ---------- Performance: anything scrolled out of view stops animating ---------- */
.is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }
/* lighter frosted bar while scrolling */
.nav.is-solid { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(243,242,236,.9); }
/* hint the browser to keep moving parts on the GPU */
.ticker__track, .pass, .menu__inner, .menu__wash, .cursor { will-change: transform; }

/* =========================================================
   Boarding pass on touch screens: tap to tear, tap again to restore
   (hover is ignored on touch so the tear doesn't get "stuck")
   ========================================================= */
@media (hover: none) {
  .pass { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pass:hover .pass__stub, .pass:hover .pass__main { transform: none; }
  .pass.is-torn .pass__stub { transform: translate(7px, 3px) rotate(8deg); }
  .pass.is-torn .pass__main { transform: rotate(-.6deg); }
}
/* phones: the stub sits under the ticket, so it tears downward along the dashed line */
@media (max-width: 520px) {
  .pass__stub {
    transform-origin: 0% 0%;
    /* ragged torn top edge, matching the desktop version */
    -webkit-mask: linear-gradient(#000 0 0) 0 5px / 100% calc(100% - 5px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 7px 5px repeat-x;
            mask: linear-gradient(#000 0 0) 0 5px / 100% calc(100% - 5px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 7px 5px repeat-x;
  }
  .pass.is-torn .pass__stub { transform: translate(4px, 16px) rotate(4deg); }
  .pass.is-torn .pass__main { transform: rotate(-.8deg); }
}

/* =========================================================
   Phones & older browsers: never rely on aspect-ratio alone
   (older iPhone Safari and in-app browsers ignore it → boxes collapse to 0px)
   ========================================================= */
@media (max-width: 900px) {
  .cs-cover { aspect-ratio: auto; height: clamp(210px, 60vw, 460px); min-height: 0; }
}
@supports not (aspect-ratio: 1 / 1) {
  .case__art { height: 0; padding-top: 66.67%; }
  .shot { height: 0; padding-top: 75%; }
  .shot.wide { padding-top: 37.5%; }
  .shot.natural { height: auto; padding-top: 0; }
  .shot.natural .ph:not(.has-img) { height: 0; padding-top: 37.5%; }
  .globe-canvas { height: min(460px, 80vw); }
  .cs-cover { min-height: 320px; }
}
@supports not (aspect-ratio: 1 / 1) {
  @media (max-width: 520px) { .shot.wide { padding-top: 75%; } }
}

/* =========================================================
   v3 LOADER: window seat, landing in Mumbai
   The window's giant box-shadow *is* the cabin wall, so growing the
   window at the end "opens" it onto the homepage underneath.
   ========================================================= */
.loader { display: block; background: transparent; color: var(--paper); overflow: hidden; cursor: pointer; }
.window {
  position: absolute; left: 50%; top: 50%;
  width: clamp(170px, 22vw, 260px); height: clamp(236px, 30.5vw, 360px);
  border-radius: 46% / 34%; overflow: hidden; will-change: width, height, transform;
  box-shadow: 0 0 0 12px #242424, 0 0 0 14px #3a3a3a, 0 0 0 16px #1a1a1a, 0 0 0 220vmax #121212;
}
.sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #050b24 0%, #13205e 30%, #3d2bff 52%, #ff7f57 76%, #ffd29e 100%);
  background-size: 100% 260%; background-position: 0% 0%;
}
.sun { position: absolute; left: 50%; bottom: -30%; width: 160%; height: 70%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,214,160,.85), rgba(255,140,90,.25) 60%, transparent); opacity: .0; }
.clouds { position: absolute; inset: 0; }
.cloud { position: absolute; top: 0; display: block; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.55) 45%, rgba(255,255,255,0)); filter: blur(3px); will-change: transform; }
.city {
  position: absolute; left: -30%; right: -30%; bottom: -10%; height: 75%;
  transform-origin: 50% 100%;
  background:
    radial-gradient(circle, rgba(255,210,122,.95) 0 1.2px, transparent 1.8px) 0 0 / 11px 9px,
    radial-gradient(circle, rgba(212,255,58,.9) 0 1px, transparent 1.6px) 5px 4px / 17px 13px,
    radial-gradient(circle, rgba(255,255,255,.8) 0 .8px, transparent 1.4px) 2px 6px / 7px 11px,
    linear-gradient(180deg, transparent 0%, #0a0a16 22%, #070710 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 30%); mask: linear-gradient(180deg, transparent 0%, #000 30%);
}
.city-wrap { perspective: 260px; }
.landed { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: clamp(26px, 2.6vw, 34px); line-height: .95; letter-spacing: -.02em; color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.5); opacity: 0; }
.shade { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, #ecebe4, #d9d6cc); border-bottom: 7px solid #bcb8ad; }
.shade i { position: absolute; left: 50%; bottom: 10px; width: 44px; height: 6px; margin-left: -22px; border-radius: 4px; background: #a9a597; }
.glare { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.2), transparent 38%, transparent 70%, rgba(255,255,255,.06));
  box-shadow: inset 0 0 36px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.06); }
.cabin { position: absolute; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; padding: 0 16px; color: rgba(243,242,236,.5); }
.cabin--top { top: 9vh; } .cabin--bottom { bottom: 9vh; }
.cabin b { color: var(--lime); font-weight: 500; font-variant-numeric: tabular-nums; }
.cabin .phase { color: rgba(243,242,236,.85); }
@media (max-width: 600px) { .cabin { gap: 6px 14px; font-size: 10px; } .cabin--top { top: 8vh; } .cabin--bottom { bottom: 8vh; } }
/* v3 loader: brighter, taller city with a lime runway converging in perspective */
.city { height: 92%; bottom: -8%; left: -45%; right: -45%;
  background:
    radial-gradient(circle, rgba(255,210,122,1) 0 1.6px, transparent 2.3px) 0 0 / 12px 10px,
    radial-gradient(circle, rgba(212,255,58,.95) 0 1.3px, transparent 2px) 6px 5px / 19px 15px,
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.7px) 3px 7px / 8px 12px,
    linear-gradient(180deg, transparent 0%, #0b0b1a 18%, #06060e 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 22%); mask: linear-gradient(180deg, transparent 0%, #000 22%); }
.city::after {
  content: ""; position: absolute; left: 46%; width: 8%; top: 20%; bottom: 0;
  border-left: 3px dashed var(--lime); border-right: 3px dashed var(--lime);
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.95) 0 10px, transparent 10px 24px) 50% 0 / 2px 100% no-repeat, rgba(10,10,20,.92);
  filter: drop-shadow(0 0 4px rgba(212,255,58,.8));
}

/* =========================================================
   v3 LOADER (current): a pile of boarding passes
   ========================================================= */
.loader { background: #121212; }
.pile { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.mini {
  position: absolute; left: 0; top: 0; width: var(--mw, 280px);
  display: grid; grid-template-columns: 1fr 62px; overflow: hidden;
  background: var(--card); color: var(--ink); border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 22px 34px -14px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.25);
  will-change: transform;
}
.mini::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.mini__main { padding: 14px 14px 12px; }
.mini__head { display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.mini__route { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; }
.mini__route b { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 7vw, 34px); letter-spacing: -.02em; line-height: 1; }
.mini__route i { font-style: normal; font-size: 14px; color: var(--muted); flex: 1; text-align: center; }
.mini__cities { display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); margin-top: 4px; }
.mini__stub { border-left: 2px dashed var(--line); padding: 12px 8px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; }
.mini__stub span { font-size: 10px; color: var(--ink); font-weight: 500; }
.mini__stub em { display: block; width: 32px; flex: 1; min-height: 48px;
  background: repeating-linear-gradient(180deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px); }
.pass--flying { pointer-events: none; will-change: transform; }
.loader .cabin { gap: 10px 22px; }
.loader .cabin b { font-size: 12px; }


/* =========================================================
   v3 LOADER polish: worn passes + ARRIVED stamp
   ========================================================= */
/* worn, travelled-with passes */
.mini .wear { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.mini.is-crease .wear { background: linear-gradient(102deg, transparent 47%, rgba(0,0,0,.08) 49%, rgba(255,255,255,.6) 50%, transparent 53%); }
.mini.is-corner .wear { background: radial-gradient(circle at var(--corner, 0% 0%), rgba(176,132,64,.28) 0%, rgba(176,132,64,.12) 22%, transparent 42%); }
.mini.is-punch .mini__stub {
  -webkit-mask: radial-gradient(circle 6px at 50% calc(100% - 13px), transparent 97%, #000 100%);
          mask: radial-gradient(circle 6px at 50% calc(100% - 13px), transparent 97%, #000 100%); }
.mini.is-dogear .mini__stub {
  -webkit-mask: linear-gradient(225deg, transparent 13px, #000 13.5px); mask: linear-gradient(225deg, transparent 13px, #000 13.5px); }
.mini.is-dogear .mini__stub::after { content: ""; position: absolute; right: 0; top: 0; width: 18px; height: 18px;
  background: linear-gradient(45deg, #e6e1d4 50%, transparent 50%); box-shadow: -1px 1px 2px rgba(0,0,0,.15); }
.mini__stub { position: relative; }

/* the ARRIVED · BOM ink stamp (stays on the hero boarding pass) */
.arrived-stamp {
  position: absolute; right: 22px; bottom: 16px; z-index: 2;
  display: grid; place-items: center; gap: 1px; padding: 7px 15px 6px;
  border: 3px solid #e5484d; border-radius: 10px; color: #e5484d;
  box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 3.5px rgba(229,72,77,.55);
  font-family: var(--mono); text-transform: uppercase; line-height: 1;
  transform: rotate(-11deg); opacity: .85; mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask: radial-gradient(circle at 30% 40%, transparent 0 .7px, #000 1.2px) 0 0 / 7px 6px;
          mask: radial-gradient(circle at 30% 40%, transparent 0 .7px, #000 1.2px) 0 0 / 7px 6px;
}
.arrived-stamp small { font-size: 9px; letter-spacing: .16em; }
.arrived-stamp b { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -.01em; }
@media (max-width: 520px) { .arrived-stamp { right: 14px; bottom: 12px; padding: 5px 9px 4px; } .arrived-stamp b { font-size: 19px; } }

/* Boarding-pass shadow lives on the (never-tilting) wrapper: a filter on the 3D-tilting pass
   gets dropped by the browser on hover, which made the shadow vanish. */
.pass { filter: none; }
.pass-wrap { filter: drop-shadow(0 26px 26px rgba(18,18,18,.16)) drop-shadow(0 1px 1px rgba(18,18,18,.08)); }
.pass--flying { filter: drop-shadow(0 26px 26px rgba(18,18,18,.16)) drop-shadow(0 1px 1px rgba(18,18,18,.08)); }
/* stronger, clearly visible lift under the boarding pass (rest + hover) */
.pass-wrap, .pass--flying { filter: drop-shadow(0 28px 26px rgba(18,18,18,.26)) drop-shadow(0 6px 8px rgba(18,18,18,.12)); }
/* Shadow as its own layer behind the card (filters can be dropped around 3D-tilting elements) */
.pass-wrap { filter: none; }
.pass-wrap::before {
  content: ""; position: absolute; inset: 8px 14px 2px; border-radius: 18px; z-index: 0; pointer-events: none;
  box-shadow: 0 34px 48px -16px rgba(18,18,18,.42), 0 12px 20px -10px rgba(18,18,18,.22);
}
.pass-wrap .pass { position: relative; z-index: 1; }
/* back to the original soft shadow look (kept on the wrapper so it survives the hover tilt/tear) */
.pass-wrap::before { content: none; }
.pass-wrap, .pass--flying { filter: drop-shadow(0 26px 26px rgba(18,18,18,.16)) drop-shadow(0 1px 1px rgba(18,18,18,.08)); }
/* hero boarding pass: exactly the shadow the passes have once they land on the loader pile */
.pass-wrap { filter: none; }
.pass-wrap::before {
  content: ""; position: absolute; inset: 0; border-radius: 18px; z-index: 0; pointer-events: none;
  box-shadow: 0 22px 34px -14px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.25);
}
.pass-wrap .pass { position: relative; z-index: 1; }
.pass--flying { filter: none; box-shadow: 0 22px 34px -14px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.25); border-radius: 18px; }

.pass-wrap.is-waiting::before { opacity: 0; }
/* Shadow back on the pass itself so it follows the main ticket and the torn stub separately (no ghost card).
   preserve-3d was what made browsers drop the filter on hover; the pass is flat, so it isn't needed. */
.pass-wrap::before { content: none; }
.pass-wrap { filter: none; }
.pass, .pass--flying {
  transform-style: flat;
  filter: drop-shadow(0 18px 16px rgba(0,0,0,.4)) drop-shadow(0 2px 4px rgba(0,0,0,.22));
}
.pass--flying { box-shadow: none; }

/* loader: small "click to unmute" line under the bottom text */
.unmute {
  position: absolute; left: 50%; bottom: calc(9vh - 30px); transform: translateX(-50%); z-index: 6;
  padding: 4px 10px; border-radius: 999px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(243,242,236,.45); border: 1px solid rgba(243,242,236,.12); background: transparent; white-space: nowrap;
  transition: color .3s, border-color .3s, background .3s;
}
.unmute:hover { color: var(--paper); border-color: rgba(243,242,236,.35); }
.unmute[aria-pressed="true"] { color: var(--lime); border-color: rgba(212,255,58,.4); }
@media (max-width: 600px) { .unmute { bottom: calc(8vh - 28px); } }

/* Desktop pass: the punch notches are real holes now (they used to be cream circles drawn on top,
   which the drop-shadow outlined as bumps). Each half of the main ticket gets its own half-hole. */
@media (min-width: 521px) {
  .pass__main::before, .pass__main::after { display: none; }
  .pass__main {
    -webkit-mask: radial-gradient(circle 10px at 100% 0, #0000 96%, #000 100%) top / 100% 51% no-repeat,
                  radial-gradient(circle 10px at 100% 100%, #0000 96%, #000 100%) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle 10px at 100% 0, #0000 96%, #000 100%) top / 100% 51% no-repeat,
                  radial-gradient(circle 10px at 100% 100%, #0000 96%, #000 100%) bottom / 100% 51% no-repeat;
  }
}

/* =========================================================
   Boarding pass shadow, final: plain box-shadows on the two paper pieces.
   No CSS filters (some browsers drop them when children move, e.g. Safari on the stub tear),
   no masks on the pieces (masks would clip their own shadow), no tilt.
   ========================================================= */
.pass, .pass--flying, .pass-wrap { filter: none !important; }
.pass-wrap::before { content: none !important; }
.pass--flying { box-shadow: none !important; }
.pass__main, .pass__stub { box-shadow: 0 22px 34px -14px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.2); }
.pass__main, .pass__stub { -webkit-mask: none !important; mask: none !important; }
@media (min-width: 521px) {
  .pass__main::before, .pass__main::after { display: block; }   /* cream punch notches, as originally */
}

/* v3: slightly larger wordmark + morphing shape */
.nav__logo { font-size: 22px; gap: 9px; }
.nav__logo i { width: 12px; height: 12px; }

/* travel card: breathing room between heading and paragraph */
.c-globe h3 { margin-bottom: 14px; }

/* =========================================================
   v3 CURSOR: Figma-style arrow + name-tag label
   ========================================================= */
.cursor, .cursor.is-big, .cursor.is-link, .cursor.is-draw {
  width: 0; height: 0; margin: 0; border: 0; border-radius: 0; background: none; mix-blend-mode: normal;
  display: block; transition: none;
}
.cursor__arrow {
  position: absolute; left: -3px; top: -3px; width: 22px; height: 23px; overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
  transform-origin: 3px 3px; transition: transform .35s var(--ease);
}
.cursor__arrow path { fill: #2a2a2a; stroke: #fff; stroke-width: 2; stroke-linejoin: round; transition: fill .25s; }
.cursor.is-link .cursor__arrow { transform: scale(1.12); }
.cursor.is-link .cursor__arrow path { fill: var(--accent); }
.cursor.is-draw .cursor__arrow { transform: scale(.8); }
.cursor span {
  position: absolute; left: 16px; top: 19px; padding: 5px 9px; border-radius: 3px 10px 10px 10px;
  background: var(--lime); color: var(--ink); box-shadow: 0 4px 12px rgba(0,0,0,.18);
  opacity: 0; transform: scale(.7); transform-origin: 0 0; transition: opacity .2s, transform .35s var(--ease);
}
.cursor.is-big span { opacity: 1; transform: none; }
.cursor.is-big .cursor__arrow path { fill: var(--accent); }

/* cursor: very slightly larger arrow */
.cursor__arrow { width: 24px; height: 25px; }
.cursor span { left: 17px; top: 21px; }

/* loader on phones: everything sits a little lower (pile shift is in main.js) */
@media (max-width: 600px) {
  .loader .cabin--top { top: 9.5vh; }
  .loader .cabin--bottom { bottom: calc(6.5vh + 34px); }
  .unmute { bottom: 6.5vh; }
}

/* arrow cursor also shows over the loading screen */
.cursor { z-index: 2000; }
@media (hover: hover) { .loader, .loader button { cursor: none; } }

/* =========================================================
   v4 PAGES: Work / About / Off the clock (shared hero + next link)
   ========================================================= */
.pg { padding-top: 92px; }
.pg-top { padding-top: clamp(12px, 2vw, 28px); }
.pg-top__row { display: grid; grid-template-columns: 1fr minmax(220px, 360px); gap: 24px; align-items: end;
  padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.pg-lead { color: var(--muted); font-size: 16px; line-height: 1.5; }
.pg .section { padding-top: clamp(24px, 3vw, 40px); }
@media (max-width: 860px) { .pg-top__row { grid-template-columns: 1fr; gap: 12px; } }

.pg-next { display: flex; flex-direction: column; gap: 6px; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(24px, 4vw, 48px); border-top: 1px solid var(--line); }
.pg-next__k { color: var(--muted); }
.pg-next__t { font-family: var(--display); font-weight: 700; font-size: clamp(44px, 8vw, 128px); letter-spacing: -.03em; line-height: .9;
  font-variation-settings: "wdth" 82; display: inline-flex; align-items: center; gap: .2em; transition: color .4s var(--ease); }
.pg-next__t i { font-style: normal; display: inline-block; transition: transform .5s var(--ease); }
.pg-next:hover .pg-next__t { color: var(--accent); }
.pg-next:hover .pg-next__t i { transform: translateX(.18em); }

/* =========================================================
   v4 B-ROLL: endless photo wall (moves up/down and sideways)
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html:has(body.is-wall) { overflow: hidden; height: 100%; overscroll-behavior: none; }
body.is-wall { overflow: hidden; height: 100%; background: var(--paper); overscroll-behavior: none; }
body.is-wall .nav.is-solid { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
body.is-wall .nav .wrap > * { pointer-events: auto; }
body.is-wall .nav__logo { background: var(--paper); padding: 8px 14px 8px 12px; border-radius: 999px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.12); }
body.is-wall .nav__clocks { display: none; }

.wall { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.wall.is-grabbing { cursor: grabbing; }
.wall__track { position: absolute; inset: 0; --squash: 1; }
.wtile { position: absolute; left: 0; top: 0; width: var(--tw); padding: 0; border: 0; background: none; will-change: transform; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.wtile[hidden] { display: none; }
.wtile__in { position: relative; display: block; width: 100%; border-radius: var(--radius); overflow: hidden; background: #e4e1d8;
  box-shadow: 0 22px 34px -16px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.1);
  transform: scale(var(--squash)); transition: translate .5s var(--ease), box-shadow .5s var(--ease); }
.wtile__in img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; pointer-events: none; }
.wtile__cap { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: inline-flex; gap: 6px; padding: 5px 9px;
  border-radius: 3px 10px 10px 10px; background: var(--lime); color: var(--ink); font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px) scale(.9); transform-origin: 0 100%;
  transition: opacity .3s, transform .45s var(--ease); }
.wtile__cap b { font-weight: 500; opacity: .55; }
.wtile:hover .wtile__in, .wtile:focus-visible .wtile__in { translate: 0 -6px; box-shadow: 0 34px 44px -18px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.1); }
.wtile:hover .wtile__cap, .wtile:focus-visible .wtile__cap { opacity: 1; transform: none; }
.wtile:focus-visible { outline: none; }
.wtile:focus-visible .wtile__in { outline: 2px solid var(--accent); outline-offset: 3px; }

.wall-hint { position: fixed; left: 50%; bottom: 22px; z-index: 50; transform: translateX(-50%); display: inline-flex; gap: 10px; align-items: center;
  padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); pointer-events: none; transition: opacity .6s, transform .6s var(--ease); white-space: nowrap; }
.wall-hint i { font-style: normal; color: var(--lime); letter-spacing: .2em; }
.wall-hint.is-gone { opacity: 0; transform: translate(-50%, 12px); }
@media (hover: hover) { .wall, .wtile { cursor: none; } }

/* viewer */
.br-lb { position: fixed; inset: 0; z-index: 1500; background: rgba(8,8,8,.96); display: grid; place-items: center; padding: 56px 72px; }
.br-lb[hidden] { display: none; }
.br-lb__fig { margin: 0; display: grid; justify-items: center; gap: 12px; max-width: 100%; max-height: 100%; }
.br-lb__fig img { max-width: min(100%, 1600px); max-height: calc(100vh - 140px); max-height: calc(100svh - 140px); width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.br-lb__fig figcaption { display: flex; gap: 18px; justify-content: center; width: 100%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(243,242,236,.7); }
.br-lb__fig figcaption [data-lb-num] { color: var(--lime); }
.br-lb__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); color: var(--paper); font-size: 18px; transition: background .3s, color .3s; }
.br-lb__btn:hover { background: var(--lime); color: var(--ink); border-color: transparent; }
.br-lb__prev { left: 16px; } .br-lb__next { right: 16px; }
.br-lb__close { position: absolute; top: 16px; right: 16px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: var(--paper); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.br-lb__close:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 700px) {
  .br-lb { padding: 56px 12px 80px; }
  .br-lb__btn { top: auto; bottom: 16px; transform: none; }
  .br-lb__prev { left: calc(50% - 60px); } .br-lb__next { right: calc(50% - 60px); }
}
@media (hover: hover) { .br-lb, .br-lb button { cursor: none; } }