/* ==========================================================================
   drishti. – portfolio
   One system: editorial type + warm paper surfaces + a cinematic desk.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* palette (kept from the original build) */
  --coral-300: #F5A688; --coral-500: #DA5F3A; --coral-600: #C95736; --coral-700: #A8442C; --coral-800: #803424;
  --n-50: #FFFDF9; --n-100: #FFF9F0; --n-200: #F6F0E8; --n-300: #EAE0D4; --n-400: #DECDBB; --n-500: #B6A394;
  --n-600: #8A786C; --n-700: #655A52; --n-800: #453A33; --n-900: #302822;
  --m-200: #CBC6C0; --m-300: #A29D97; --m-600: #413E3A; --m-700: #232120; --m-800: #171615; --m-900: #0F0E0D; /* warm charcoal greys (night) */
  --clay: #E6C5A4; --sage: #A7B8AD; --blue: #49658E;
  --ok: #2E8B57; --off: #C0392B;

  /* semantic (light = "day") */
  --bg: var(--n-200); --surface: var(--n-100); --surface-2: var(--n-50);
  --text: var(--n-900); --text-2: var(--n-700); --line: var(--n-400); --line-soft: var(--n-300);
  --accent: var(--coral-700); --accent-d: var(--coral-500);
  --btn-bg: var(--n-900); --btn-tx: var(--n-100);
  --nav-bg: rgba(255, 249, 240, .94);
  --paper: #FFF9F0; --ink: #302822;

  /* type */
  --f-b: 'Helvetica Neue', Helvetica, Arial, 'Nimbus Sans', sans-serif;
  --f-d: var(--f-b); /* one typeface everywhere */
  --f-h: var(--f-b);

  /* spacing (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 120px;
  --gutter: clamp(20px, 5.5vw, 72px);
  --section-y: clamp(72px, 10vw, 140px);
  --maxw: 1200px; --contentw: 1080px;
  --nav-h: 68px;

  /* radius: 8 / 12 / 20 / pill – nothing else */
  --r-s: 8px; --r-m: 12px; --r-l: 20px; --r-pill: 999px;

  /* shadow: surface / hover / overlay */
  --sh-1: 0 1px 2px rgba(48, 40, 34, .06), 0 2px 8px rgba(48, 40, 34, .06);
  --sh-2: 0 4px 12px rgba(48, 40, 34, .10), 0 12px 28px rgba(48, 40, 34, .10);
  --sh-3: 0 24px 64px rgba(20, 19, 18, .45);

  --t-hover: 200ms; --t-page: 450ms; --t-theme: 650ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
html[data-theme="night"] {
  --bg: var(--m-800); --surface: var(--m-700); --surface-2: #2F2D2B;
  --text: #FFF9F0; --text-2: var(--m-200); --line: var(--m-600); --line-soft: #34312E;
  --accent: var(--coral-300); --accent-d: var(--coral-500);
  --btn-bg: var(--n-100); --btn-tx: var(--m-800);
  --nav-bg: rgba(23, 22, 21, .94);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .25), 0 2px 8px rgba(0, 0, 0, .25);
  --sh-2: 0 4px 12px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html:has(dialog[open]) { overflow: hidden; background: color-mix(in srgb, var(--bg) 35%, #141312); }
body { margin: 0; font: 400 17px/1.6 var(--f-b); color: var(--text); background: var(--bg);
  transition: background var(--t-theme), color var(--t-theme); overflow-x: clip; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--f-b); font-weight: 600; margin: 0; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
:focus-visible { outline: 3px solid var(--accent-d); outline-offset: 3px; border-radius: var(--r-s); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: var(--s-3); top: -80px; z-index: 100; background: var(--btn-bg); color: var(--btn-tx); padding: var(--s-3) var(--s-4); border-radius: var(--r-m); text-decoration: none; }
.skip:focus { top: var(--s-3); }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { font: 600 13px/1.4 var(--f-b); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.eyebrow::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-d); flex: none; }
.h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -.025em; max-width: 18ch; }
.lede { color: var(--text-2); max-width: 56ch; margin-top: var(--s-4); }
.todo { display: inline-block; font: 600 12px/1.3 var(--f-b); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); border: 1px dashed var(--accent-d); border-radius: var(--r-s); padding: var(--s-1) var(--s-2); }
.ph-note { border: 1.5px dashed var(--line); border-radius: var(--r-m); padding: var(--s-3) var(--s-4); font-size: 14px; color: var(--text-2); margin-top: var(--s-3); }

/* ---------- 3. Buttons (one system) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-5);
  border-radius: var(--r-pill); font: 500 16px/1 var(--f-b); text-decoration: none; border: 1.5px solid var(--btn-bg);
  background: transparent; color: var(--text); transition: transform var(--t-hover), box-shadow var(--t-hover), background var(--t-hover); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn.primary { background: var(--btn-bg); color: var(--btn-tx); }
.btn.quiet { border-color: var(--line); }
.link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.link:hover { text-decoration-color: var(--accent-d); }
.close { position: absolute; top: var(--s-3); right: var(--s-3); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-size: 26px; line-height: 1; display: grid; place-items: center; z-index: 5; transition: background var(--t-hover); }
.close:hover { background: var(--line-soft); }
.dark .close, dialog.full .close { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }

/* ---------- 4. Navigation ---------- */
#nav { position: fixed; z-index: 30; top: calc(var(--s-3) + env(safe-area-inset-top, 0px)); left: var(--s-3); right: var(--s-3); max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: var(--s-1) var(--s-3) var(--s-1) var(--s-4);
  border-radius: var(--r-l); background: var(--nav-bg); border: 1px solid var(--line); box-shadow: var(--sh-1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background var(--t-theme), border-color var(--t-theme); }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; font: 700 21px/1 var(--f-b); letter-spacing: -.03em; min-height: 44px; }
.brand .dot { color: var(--accent-d); }
.brand img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--line); }
.links { display: flex; gap: var(--s-1); align-items: center; }
.links a, .links button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-m); border: 0; background: none; text-decoration: none; font: 500 15px var(--f-b); color: var(--text); transition: background var(--t-hover); }
.links a:hover, .links button:hover { background: var(--line-soft); }
.links [aria-current="true"] { background: var(--line-soft); box-shadow: inset 0 -2px 0 var(--accent-d); }
#menuBtn { display: none; width: 44px; height: 44px; border-radius: var(--r-m); border: 1px solid var(--line); background: transparent; place-items: center; }
#menuBtn span { display: block; width: 18px; height: 2px; background: currentColor; position: relative; border-radius: 2px; transition: background var(--t-hover); }
#menuBtn span::before, #menuBtn span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--t-hover); }
#menuBtn span::before { top: -6px; } #menuBtn span::after { top: 6px; }
#menuBtn[aria-expanded="true"] span { background: transparent; }
#menuBtn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
#menuBtn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
#menu { display: none; position: absolute; top: calc(100% + var(--s-2)); left: 0; right: 0; padding: var(--s-3); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2); flex-direction: column; }
#menu.on { display: flex; }
#menu a, #menu button { display: flex; align-items: center; min-height: 52px; padding: 0 var(--s-4); border-radius: var(--r-m); border: 0; background: none; text-align: left; text-decoration: none; font: 500 18px var(--f-b); }
#menu a:hover, #menu button:hover, #menu [aria-current="true"] { background: var(--line-soft); }

.themesw { position: fixed; z-index: 29; right: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); display: flex; padding: 4px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.themesw button { min-height: 44px; min-width: 64px; border: 0; background: none; border-radius: var(--r-pill); font: 500 14px var(--f-b); padding: 0 var(--s-4); }
.themesw button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-tx); }

/* ---------- 5. Hero ---------- */
#hero { min-height: min(100svh, 920px); display: flex; align-items: center; padding-top: calc(var(--nav-h) + var(--s-8)); padding-bottom: var(--s-8); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-7); align-items: center; }
#hero h1 { font-weight: 600; font-size: clamp(38px, 5.4vw, 72px); line-height: 1.08; letter-spacing: -.03em; max-width: 15ch; }
#hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub { font-size: clamp(18px, 1.6vw, 21px); color: var(--text-2); max-width: 36em; margin-top: var(--s-5); line-height: 1.55; }
.pv { font: inherit; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--accent-d); text-decoration-thickness: 2px; text-underline-offset: 5px; border-radius: var(--r-s); transition: color var(--t-hover); }
.pv:hover, .pv[aria-expanded="true"] { color: var(--accent); }
.peek { margin-top: var(--s-4); min-height: 3.2em; max-width: 36em; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--accent-d); background: var(--surface); border-radius: 0 var(--r-m) var(--r-m) 0; font-size: 15px; color: var(--text-2); box-shadow: var(--sh-1); }
.cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); }
.avail { margin-top: var(--s-5); font-size: 15px; color: var(--text-2); display: flex; gap: var(--s-2); align-items: center; }
.avail i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); flex: none; }
.micro { margin-top: var(--s-4); font: 400 15px/1.4 var(--f-b); color: var(--text-2); }
.facts { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.facts li { padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 14px; color: var(--text-2); background: var(--surface); }
.hero-av { width: clamp(120px, 14vw, 176px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px var(--bg), 0 0 0 8px var(--line), var(--sh-2); }

/* ---------- 6. Projects (archival folders) ---------- */
#projects { padding-block: var(--section-y); }
.sec-head { max-width: var(--contentw); margin: 0 auto var(--s-7); }
.stack { max-width: var(--contentw); margin-inline: auto; }
.folder { --i: 0; --c: var(--coral-500); position: sticky; top: calc(var(--nav-h) + var(--s-6) + var(--i) * 56px); margin: var(--s-8) 0 var(--s-9); min-height: 460px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px var(--r-l) var(--r-l) var(--r-l); box-shadow: var(--sh-1);
  transform-origin: top center; transition: translate var(--t-hover), box-shadow var(--t-hover); background-image: radial-gradient(color-mix(in srgb, var(--line) 35%, transparent) 1px, transparent 1px); background-size: 14px 14px; }
.folder:last-child { margin-bottom: 0; }
.folder:hover, .folder:focus-within { translate: 0 -4px; box-shadow: var(--sh-2); }
.tab { position: absolute; top: -35px; left: calc(var(--s-5) + var(--i) * 120px); height: 36px; display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-top: 4px solid var(--c); border-radius: var(--r-s) var(--r-s) 0 0; font: 600 14px var(--f-b); white-space: nowrap; }
.tab em { font: 400 13px var(--f-b); font-style: normal; color: var(--text-2); }
.f-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-6) var(--s-3) var(--s-6); min-height: 52px; border-bottom: 1px solid var(--line-soft); }
.f-head .num { font: 400 14px var(--f-b); color: var(--text-2); }
.f-head .go { text-decoration: none; font-weight: 600; color: var(--accent); display: inline-flex; min-height: 44px; align-items: center; }
.f-head .go::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } /* whole card is the hit-area */
.f-body { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-6); padding: var(--s-6); align-items: stretch; }
.f-body h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.02em; margin: var(--s-2) 0 var(--s-3); }
.f-body .prob { font: 500 17px/1.45 var(--f-b); color: var(--accent); margin-bottom: var(--s-3); }
.f-body p { color: var(--text-2); }
.f-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.f-meta dt { font: 600 12px var(--f-b); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.f-meta dd { margin: 2px 0 0; font-size: 15px; }
.vis { position: relative; min-height: 220px; border-radius: var(--r-m); border: 1px dashed var(--line); display: grid; place-items: center; text-align: center; padding: var(--s-5);
  background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--c) 10%, transparent) 14px 15px), color-mix(in srgb, var(--c) 16%, var(--surface)); font-size: 13px; color: var(--text-2); }
.vis b { display: block; font: 600 12px var(--f-b); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-2); }
.sec-cta { max-width: var(--contentw); margin: var(--s-7) auto 0; }

/* ---------- 7. About + workspace ---------- */
#about { padding-block: var(--section-y); }
.about-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-7); align-items: end; max-width: var(--contentw); margin: 0 auto var(--s-7); }
.about-intro .big { font: 600 clamp(20px, 2.2vw, 26px)/1.35 var(--f-b); margin-top: var(--s-4); }
.about-intro .big span { color: var(--accent); }
.about-intro .txt p + p { margin-top: var(--s-3); }
.about-intro .txt { color: var(--text-2); font-size: 16px; }
.scene-wrap { position: relative; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.stage { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-l); box-shadow: var(--sh-3); background: var(--m-900); }
.stage-img { position: absolute; inset: 0; border-radius: var(--r-l); overflow: hidden; }
.stage-img img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.stage-img .n { opacity: 0; transition: opacity var(--t-theme) ease; }
html[data-theme="night"] .stage-img .n { opacity: 1; }
.shade { position: absolute; left: 34.2%; width: 48.8%; top: 14.2%; height: 0; overflow: hidden; pointer-events: none; transition: height 700ms cubic-bezier(.5, 0, .2, 1);
  background: repeating-linear-gradient(0deg, rgba(90, 55, 30, .22) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(90, 55, 30, .18) 0 1px, transparent 1px 3px), linear-gradient(#c28f66, #a96f48);
  box-shadow: inset 0 -10px 0 #8a5a3a, 0 6px 14px rgba(0, 0, 0, .35); filter: saturate(.9); }
html[data-theme="night"] .shade { filter: brightness(.36) saturate(.8); }
html[data-shade="closed"] .shade { height: 21.4%; }
.h { position: absolute; border: 0; padding: 0; background: transparent; border-radius: var(--r-m); cursor: pointer; transition: box-shadow var(--t-hover), background var(--t-hover); }
.h:hover, .h:focus-visible { background: rgba(255, 222, 160, .14); box-shadow: 0 0 0 2px rgba(255, 226, 170, .9), 0 0 24px rgba(255, 200, 120, .45); outline: none; }
.h.press { background: rgba(255, 222, 160, .3); }
.h::after { content: attr(data-l); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); background: var(--ink); color: var(--paper); font: 500 13px/1.3 var(--f-b);
  padding: 6px 10px; border-radius: var(--r-s); box-shadow: var(--sh-2); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--t-hover), transform var(--t-hover); z-index: 3; }
.h[data-edge="l"]::after { left: 0; transform: translate(0, 4px); } .h[data-edge="r"]::after { left: auto; right: 0; transform: translate(0, 4px); }
.h[data-pos="below"]::after { bottom: auto; top: calc(100% + 8px); }
.h:hover::after, .h:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.h[data-edge]:hover::after, .h[data-edge]:focus-visible::after { transform: none; }
@media (hover: none) { .h::before { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 226, 170, .95); transform: translate(-50%, -50%); animation: pulse 2s infinite; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 226, 170, .6); } 100% { box-shadow: 0 0 0 18px rgba(255, 226, 170, 0); } }
.scene-hint { max-width: var(--contentw); margin: var(--s-4) auto 0; font-size: 14px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; }
.objlist { list-style: none; margin: var(--s-5) auto 0; padding: 0; max-width: var(--contentw); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.objlist button { text-align: left; min-height: 44px; display: inline-flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-4); border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-pill); font-size: 14px; transition: transform var(--t-hover), box-shadow var(--t-hover); }
.objlist button:hover { transform: translateY(-2px); box-shadow: var(--sh-1); }
.objlist img { width: 28px; height: 28px; object-fit: contain; display: none; mix-blend-mode: multiply; }
html[data-theme="night"] .objlist img { mix-blend-mode: normal; border-radius: 4px; }
.peekbtn { display: none; position: relative; width: 100%; aspect-ratio: 4 / 5; border: 0; padding: 0; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-2); background: var(--m-900); }
.peekbtn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.peekbtn .n { opacity: 0; transition: opacity var(--t-theme); } html[data-theme="night"] .peekbtn .n { opacity: 1; }
.peekbtn span { position: absolute; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); min-height: 52px; display: flex; align-items: center; justify-content: center; gap: var(--s-2); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font: 600 16px var(--f-b); box-shadow: var(--sh-2); }
.skills { max-width: var(--contentw); margin: var(--s-8) auto 0; }
.skills h3 { font-size: clamp(26px, 3vw, 36px); margin-bottom: var(--s-5); }
.skill-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.skill { padding-top: var(--s-4); border-top: 2px solid var(--line); }
.skill h4 { font: 600 18px var(--f-d); margin-bottom: var(--s-2); }
.skill p { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.music-pill { position: fixed; z-index: 29; left: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); display: none; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2); font-size: 14px; }
.music-pill.on { display: inline-flex; }
.music-pill i, .state i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.state { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: 14px; margin-top: var(--s-2); }
.state.off i { background: var(--off); box-shadow: 0 0 0 3px color-mix(in srgb, var(--off) 25%, transparent); }

/* ---------- 8. Experience ---------- */
#experience { padding-block: var(--section-y); border-top: 1px solid var(--line-soft); }
.xp { max-width: var(--contentw); margin: var(--s-7) auto 0; border-top: 1px solid var(--line); }
.xp-row { display: grid; grid-template-columns: 220px 1fr 1.2fr; gap: var(--s-6); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.xp-row .when { color: var(--text-2); font-size: 15px; }
.xp-row h3 { font: 600 clamp(22px, 2.4vw, 28px)/1.2 var(--f-d); }
.xp-row .role { color: var(--text-2); margin-top: var(--s-1); }
.xp-row ul { margin: 0; padding-left: 1.1em; color: var(--text-2); font-size: 15.5px; }
.xp-row li + li { margin-top: 4px; }
.xp-cta { max-width: var(--contentw); margin: var(--s-6) auto 0; }

/* ---------- 9. Contact + footer ---------- */
#contact { padding-block: var(--section-y); }
.contact-grid { max-width: var(--contentw); margin-inline: auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-7); align-items: center; }
#contact h2 { font-size: clamp(38px, 5.6vw, 72px); line-height: 1.05; letter-spacing: -.03em; }
#contact h2 u { text-decoration-color: var(--accent-d); text-decoration-thickness: 4px; text-underline-offset: 10px; }
#contact .lede { max-width: 38em; }
.contact-actions { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.contact-actions small { color: var(--text-2); font: 400 15px var(--f-b); margin-top: var(--s-2); }
footer { border-top: 1px solid var(--line); padding: var(--s-7) 0 calc(var(--s-9) / 2); }
.foot { display: grid; grid-template-columns: 1fr auto; gap: var(--s-6); max-width: var(--contentw); margin-inline: auto; }
.foot .brand { font-size: 28px; }
.foot p { color: var(--text-2); margin-top: var(--s-2); max-width: 32em; }
.foot nav { display: flex; gap: var(--s-1); flex-wrap: wrap; align-items: flex-start; }
.foot nav a, .foot nav button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s-3); border: 0; background: none; font: 500 15px var(--f-b); text-decoration: none; border-radius: var(--r-m); }
.foot nav a:hover, .foot nav button:hover { background: var(--line-soft); }
.foot small { grid-column: 1 / -1; color: var(--text-2); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); font-size: 13px; }

/* ---------- 10. Dialogs (one overlay system) ---------- */
dialog { padding: 0; border: 0; color: var(--ink); background: transparent; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(20, 19, 18, .62); }
dialog[open] { animation: fade 350ms both; }
dialog.out { animation: fadeOut 380ms both; }
dialog.panel { width: min(480px, calc(100vw - 32px)); margin: auto; overflow: visible; }
.card { position: relative; background: var(--paper); color: var(--ink); border-radius: var(--r-l); padding: var(--s-6); max-height: 88svh; overflow: auto; box-shadow: var(--sh-3); transform-origin: left center; animation: book 560ms cubic-bezier(.22, .9, .3, 1) both; }
dialog.out .card, dialog.out .win { animation: bookOut 240ms ease-in both; }
.card h2 { font: 600 28px/1.15 var(--f-d); margin: 0 var(--s-6) var(--s-3) 0; }
.card p, .card li { font-size: 16px; line-height: 1.55; color: var(--n-700); }
.card ul { margin: 0 0 var(--s-3); padding-left: 1.2em; }
.card .sprite { max-height: 190px; margin: 0 auto var(--s-4); mix-blend-mode: multiply; }
.card .sprite.t { cursor: pointer; }
html[data-theme="night"] .card .sprite { mix-blend-mode: normal; border-radius: var(--r-m); }
.card .act { margin-top: var(--s-3); }
.card .close { background: var(--n-200); color: var(--ink); border-color: var(--n-400); }
.card .ph-note { border-color: #b08a6a; color: #7a5a42; }
.card .todo { color: #8a3f26; border-color: #b08a6a; }
.card .btn { border-color: var(--ink); color: var(--ink); } .card .btn.primary { background: var(--ink); color: var(--paper); }
.card.note { background: linear-gradient(165deg, #ffe680, #fbc531); max-width: 380px; border-radius: 4px 4px var(--r-l) 4px; }
.nt { font: 600 clamp(22px, 5vw, 26px)/1.3 var(--f-b); color: #3a2a10; margin: var(--s-3) 0 var(--s-4); }
.nt s { text-decoration: none; background: linear-gradient(transparent 46%, #d62828 46% 56%, transparent 56%) no-repeat; background-size: 0 100%; transition: background-size .5s; }
.nt.cr s { background-size: 100% 100%; }
.card.note .act, .card.note .btn { border-color: #3a2a10; color: #3a2a10; background: rgba(255, 255, 255, .35); }
.titles { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0; }
.titles li { padding: 4px 12px; border-radius: var(--r-pill); background: var(--n-200); border: 1px solid var(--n-400); font-size: 14px; color: var(--ink); }
.keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2); margin: var(--s-4) 0; }
.keys button { height: 52px; border: 0; border-radius: var(--r-s); box-shadow: 0 5px 0 rgba(0, 0, 0, .28); transition: transform 90ms, box-shadow 90ms; }
.keys button.down, .keys button:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, .28); }
.player { margin: var(--s-3) 0; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 16 / 9; background: #2a1a12; }
.player iframe { width: 100%; height: 100%; border: 0; }
/* letter */
.card.letter { background: #f4e9d4; max-width: 520px; padding: var(--s-6); }
.env { position: relative; height: 150px; margin: 44px 0 var(--s-3); perspective: 900px; }
.env .back { position: absolute; inset: 40px 0 0; background: #d9c3a0; border-radius: var(--r-s); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.env .flap { position: absolute; left: 0; right: 0; top: 40px; height: 70px; background: #c9b088; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; animation: flap 900ms 350ms var(--ease) both; z-index: 1; }
.env .front { position: absolute; inset: 40px 0 0; background: #e6d3b1; clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); border-radius: var(--r-s); z-index: 3; }
.env .paper { position: absolute; left: 14px; right: 14px; top: 48px; height: 90px; background: #fffaf0; border-radius: 4px; z-index: 2; animation: rise 900ms 900ms var(--ease) both; }
@keyframes flap { to { transform: rotateX(180deg); z-index: 0; } }
@keyframes rise { to { top: -4px; } }
.letter-body { font: 400 17px/1.55 var(--f-b); color: #3a2a10; animation: fade 700ms 1.3s both; }
.letter-body p { font: inherit; color: inherit; margin-bottom: var(--s-3); }
.letter-body .sig { text-align: right; font-weight: 600; }
/* full-screen layer (level 3) */
dialog.full { width: 100vw; height: 100svh; max-width: 100vw; max-height: 100svh; margin: 0; color: #f6e7d2; background: rgba(12, 7, 4, .94); overflow: hidden; display: none; }
dialog.full[open] { display: flex; flex-direction: column; justify-content: center; }
dialog.full h2 { font: 600 clamp(26px, 4vw, 44px) var(--f-d); margin: 0 0 var(--s-1) 8vw; opacity: 0; transform: translateY(14px); transition: .8s .3s; }
dialog.full .sub { margin: 0 0 var(--s-4) 8vw; opacity: 0; font-size: 14px; transition: .8s .5s; }
dialog.full.go h2 { opacity: 1; transform: none; } dialog.full.go .sub { opacity: .7; }
.reel { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: var(--s-3) 8vw var(--s-6); cursor: grab; outline-offset: -4px; -webkit-overflow-scrolling: touch; }
.reel::-webkit-scrollbar { display: none; }
.strip { position: relative; display: inline-flex; align-items: center; background: #0d0d0d; padding: 44px 22px; transform: translateX(70vw) rotate(2deg); opacity: 0; transition: transform 1.2s var(--ease), opacity .6s; box-shadow: 0 20px 60px #000; }
dialog.go .strip { transform: none; opacity: 1; }
.strip::before, .strip::after { content: ''; position: absolute; left: 0; right: 0; height: 14px; background: repeating-linear-gradient(90deg, transparent 0 10px, #e9dcc4 10px 24px, transparent 24px 34px); }
.strip::before { top: 14px; } .strip::after { bottom: 14px; }
.fr { position: relative; flex: none; width: min(250px, 60vw); aspect-ratio: 3 / 4; margin: 0 9px; padding: 0; border: 0; background: #222; overflow: hidden; scroll-snap-align: center; border-radius: 2px; transition: transform .3s; }
.fr:hover, .fr:focus-visible { transform: translateY(-8px) scale(1.03); z-index: 2; }
.fr img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) sepia(.7) brightness(.55); transition: filter 1.2s; transition-delay: calc(var(--k) * .14s + .7s); }
dialog.go .fr img { filter: none; }
.fr i { position: absolute; bottom: 5px; left: 8px; font: 700 11px var(--f-b); color: #f5a23a; font-style: normal; letter-spacing: 1px; text-shadow: 0 1px 2px #000; }
dialog.lb { width: 100vw; height: 100svh; max-width: 100vw; max-height: 100svh; margin: 0; background: rgba(5, 3, 2, .9); display: none; place-items: center; }
dialog.lb[open] { display: grid; }
dialog.lb img { max-width: 90vw; max-height: 84svh; border-radius: var(--r-s); box-shadow: var(--sh-3); animation: zoomin .45s var(--ease) both; }
dialog.lb figure { margin: 0; text-align: center; color: #f6e7d2; font-size: 14px; }
dialog.lb figcaption { margin-top: var(--s-3); }
.lb-nav { position: absolute; top: 50%; width: 48px; height: 48px; transform: translateY(-50%); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .14); color: #fff; font-size: 22px; }
.lb-nav.p { left: var(--s-4); } .lb-nav.n { right: var(--s-4); }
/* simulated desktop */
dialog#desk { background: linear-gradient(#354F76, #8BA2C5 60%, var(--coral-300)); color: #fff; display: none; }
html[data-theme="night"] dialog#desk { background: linear-gradient(var(--m-900), var(--m-700) 60%, var(--coral-800)); }
dialog#desk[open] { display: block; }
.mt { position: absolute; inset: 0 0 auto 0; height: 34px; background: rgba(20, 19, 18, .6); font-size: 13px; display: flex; gap: var(--s-4); align-items: center; padding: 0 var(--s-4); }
.mt b { margin-left: 4px; } .mt .sp { margin-left: auto; padding-right: 56px; }
#mount { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(var(--m-800), var(--m-900)); clip-path: polygon(0 100%, 0 70%, 30% 25%, 40% 45%, 62% 0, 80% 38%, 100% 55%, 100% 100%); }
#line { position: absolute; left: 8%; bottom: 24%; max-width: 70%; font: 500 clamp(18px, 2.4vw, 26px) var(--f-b); opacity: .9; }
.dgrid { position: absolute; top: 72px; left: var(--s-5); display: grid; grid-template-columns: repeat(2, 96px); gap: var(--s-3); }
.dfold { position: absolute; top: 46px; right: var(--s-5); }
.ic { background: none; border: 0; color: #fff; text-align: center; font-size: 13px; padding: var(--s-2); min-height: 44px; border-radius: var(--r-m); }
.ic:hover, .ic:focus-visible { background: rgba(255, 255, 255, .2); }
.ic .f { background: var(--m-300); border-radius: var(--r-s); height: 46px; width: 60px; margin: 0 auto 6px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); }
.ic.ph .f { background: color-mix(in srgb, var(--m-300) 50%, transparent); border: 1.5px dashed rgba(255, 255, 255, .6); }
dialog#desk .close { top: 44px; }
.deskback { position: absolute; top: 44px; left: var(--s-5); min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .18); color: #fff; font: 500 14px var(--f-b); z-index: 5; }
.dgrid { top: 104px; } .dfold { top: 104px; }
/* mac-style windows */
dialog.win { width: min(760px, calc(100vw - 24px)); max-height: calc(100svh - 24px); margin: auto; overflow: visible; }
.win-in { position: relative; max-height: calc(100svh - 24px); overflow: auto; background: var(--paper); color: var(--ink); border-radius: var(--r-l); box-shadow: var(--sh-3); transform-origin: left center; animation: book 560ms cubic-bezier(.22, .9, .3, 1) both; }
.wb { background: var(--n-300); padding: var(--s-3) var(--s-4); display: flex; align-items: center; justify-content: space-between; font-size: 13px; position: sticky; top: 0; z-index: 2; }
.wb b { font-weight: 500; }
.wb .x { min-height: 44px; padding: 0 var(--s-3); border: 0; background: none; font-size: 14px; border-radius: var(--r-s); }
.wb .x:hover { background: rgba(0, 0, 0, .08); }
.wc { padding: var(--s-6); }
.wc h1, .wc h2.t { font: 600 clamp(26px, 3.4vw, 34px)/1.15 var(--f-b); margin: var(--s-2) 0 var(--s-2); }
.wc p { color: var(--n-700); }
.wc .btn { border-color: var(--ink); color: var(--ink); } .wc .btn.primary { background: var(--ink); color: var(--paper); }
.wc .cta { margin-top: var(--s-5); }
.win-in .todo { color: #8a3f26; border-color: #b08a6a; }
.win-in .ph-note { border-color: #b08a6a; color: #7a5a42; }
.win-in .eyebrow { color: var(--n-700); }
/* mobile desk explorer */
dialog#explore { background: var(--m-900); color: #fff; display: none; }
dialog#explore[open] { display: block; }
.xhead { position: absolute; z-index: 6; top: 0; left: 0; right: 0; padding: var(--s-3) var(--s-4); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(rgba(20, 19, 18, .9), transparent); pointer-events: none; font-size: 14px; }
.xhead .close { position: static; pointer-events: auto; }
.pan { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pan::-webkit-scrollbar { display: none; }
.pan .stage { height: 100%; width: auto; aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; }
.pan .stage-img { border-radius: 0; }
.pan .h::after { display: none; }

/* ---------- 11. Case study pages ---------- */
.cs-hero { padding-top: calc(var(--nav-h) + var(--s-8)); padding-bottom: var(--s-7); }
.cs-hero h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.08; letter-spacing: -.03em; max-width: 16ch; }
.cs-badge { margin-top: var(--s-5); }
.cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin: var(--s-6) 0; padding: var(--s-5) 0; border-block: 1px solid var(--line); }
.cs-meta dt { font: 600 12px var(--f-b); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.cs-meta dd { margin: 2px 0 0; }
.cs-body { max-width: 760px; }
.cs-body section { padding: var(--s-6) 0; border-top: 1px solid var(--line-soft); }
.cs-body h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: var(--s-3); }
.cs-body p { color: var(--text-2); }
.cs-hero-img { margin: var(--s-6) 0; min-height: 320px; }
.cs-next { margin-top: var(--s-7); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); flex-wrap: wrap; box-shadow: var(--sh-1); }
.cs-next h3 { font-size: clamp(22px, 3vw, 30px); }

/* ---------- 12. Motion + keyframes ---------- */
@keyframes book { from { transform: perspective(1400px) rotateY(-16deg) translateY(12px) scale(.97); opacity: 0; } 55% { opacity: 1; } to { transform: perspective(1400px) rotateY(0) translateY(0) scale(1); opacity: 1; } }
@keyframes bookOut { to { transform: perspective(1400px) rotateY(-8deg) translateY(10px) scale(.98); opacity: 0; } }
@keyframes fade { from { opacity: 0; } } @keyframes fadeOut { to { opacity: 0; } }
@keyframes zoomin { from { transform: scale(.8); opacity: 0; } }
@keyframes sheet { from { transform: translateY(100%); } } @keyframes sheetOut { to { transform: translateY(100%); } }

/* ---------- 13. Responsive ---------- */
@media (max-width: 1024px) {
  .skill-grid { grid-template-columns: repeat(2, 1fr); }
  .xp-row { grid-template-columns: 160px 1fr; } .xp-row ul { grid-column: 2; }
  .f-body { grid-template-columns: 1fr; } .vis { min-height: 180px; }
  .folder { min-height: 0; }
}
@media (max-width: 760px) {
  :root { --nav-h: 64px; --gutter: 22px; }
  .links { display: none; } #menuBtn { display: grid; }
  .hero-grid { grid-template-columns: 1fr; } .hero-av { order: -1; width: 96px; height: auto; }
  #hero { min-height: auto; }
  .folder { top: calc(var(--nav-h) + 44px + var(--i) * 46px); margin: 56px 0 72px; min-height: 0; } .folder:hover, .folder:focus-within { translate: none; } .vis { display: none; }
  .tab { left: var(--s-4); }
  .f-head, .f-body { padding-inline: var(--s-5); } .f-body { gap: var(--s-5); }
  .about-intro, .contact-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .stage-wrap-desktop { display: none; } .peekbtn { display: block; }
  .scene-hint { display: none; }
  .objlist { display: grid; grid-template-columns: 1fr 1fr; } .objlist button { border-radius: var(--r-m); justify-content: flex-start; padding: var(--s-2) var(--s-3); }
  .objlist img { display: block; flex: none; }
  .xp-row { grid-template-columns: 1fr; gap: var(--s-3); } .xp-row ul { grid-column: auto; }
  .skill-grid { grid-template-columns: 1fr; } .cs-meta { grid-template-columns: 1fr 1fr; }
  .foot { grid-template-columns: 1fr; }
  .themesw { right: var(--s-3); } .themesw button { min-width: 56px; padding: 0 var(--s-3); }
  dialog.panel { width: 100vw; margin: auto 0 0; }
  dialog.panel[open] { animation: sheet 400ms var(--ease) both; } dialog.panel.out { animation: sheetOut 300ms ease-in both; }
  dialog.panel .card { border-radius: var(--r-l) var(--r-l) 0 0; animation: none; max-height: 82svh; padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); }
  dialog.panel.out .card { animation: none; }
  .dgrid { grid-template-columns: repeat(2, 84px); }
}
@media (min-width: 761px) { .xhead, dialog#explore { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; scroll-behavior: auto !important; }
  .env .flap { transform: rotateX(180deg); } .env .paper { top: -4px; }
}

/* coffee illustration (vector, crisp at any size; full and empty states animate) */
.coffee-art { display: block; width: 190px; margin: 0 auto var(--s-4); padding: 0; border: 0; border-radius: var(--r-l); cursor: pointer;
  background: radial-gradient(closest-side at 50% 58%, #ffe2c2 0%, #fbefdf 55%, rgba(255, 249, 240, 0) 100%); }
.coffee-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.coffee-art:focus-visible { outline: 3px solid var(--accent-d); outline-offset: 4px; }
.cf-liq, .cf-ice, .cf-melt, .cf-pool, .cf-dew { transition: transform 1s cubic-bezier(.5, 0, .2, 1), opacity .8s ease; }
.cf-melt { opacity: 0; }
.coffee-art.empty .cf-liq { transform: translateY(150px); }
.coffee-art.empty .cf-ice { transform: translateY(120px); opacity: 0; }
.coffee-art.empty .cf-melt { opacity: 1; transition-delay: .5s; }
.coffee-art.empty .cf-pool { opacity: 0; }
.coffee-art.empty .cf-dew { opacity: .45; }
.cf-night { opacity: 0; transition: opacity var(--t-theme); }
html[data-theme="night"] .cf-night { opacity: 1; }
html[data-theme="night"] .coffee-art { background: radial-gradient(closest-side at 50% 58%, #f7c493 0%, #fbe6cc 55%, rgba(255, 249, 240, 0) 100%); }

/* film book: page-turn */
.book { position: relative; width: min(100%, 300px); height: 400px; margin: var(--s-2) auto var(--s-3); perspective: 1400px; }
.pg { position: absolute; inset: 0; background: #fffaf0; border: 1px solid var(--n-400); border-radius: 4px var(--r-m) var(--r-m) 4px; box-shadow: 0 8px 22px rgba(48, 40, 34, .22); padding: var(--s-5) var(--s-4) var(--s-4);
  display: flex; flex-direction: column; align-items: center; text-align: center; transform-origin: left center; backface-visibility: hidden; cursor: pointer;
  transition: transform 800ms cubic-bezier(.5, 0, .2, 1), opacity 300ms 500ms, box-shadow 800ms; background-image: linear-gradient(90deg, rgba(48, 40, 34, .12), transparent 14px); }
.pg.turned { transform: rotateY(-135deg); opacity: 0; pointer-events: none; box-shadow: none; }
.pg h3 { font: 600 22px/1.2 var(--f-b); margin: var(--s-3) 0 var(--s-1); color: var(--ink); }
.pg p { font-size: 14px; color: var(--n-700); }
.pg .poster { width: 128px; height: 264px; object-fit: cover; border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); background: var(--n-300); }
.pg .no { font: 600 12px var(--f-b); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pg.cover { background-color: #3a2a20; border-color: #2a1d15; color: #f6e7d2; justify-content: center; background-image: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 16px); }
.pg.cover h3 { color: #f6e7d2; font-size: 26px; } .pg.cover p { color: #d9c3a0; }
.book-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.book-nav .btn { min-height: 44px; padding: 0 var(--s-4); }
.book-nav span { font-size: 14px; color: var(--n-700); }
.book-nav .btn[disabled] { opacity: .35; pointer-events: none; }

.book { width: min(100%, 320px); height: 456px; touch-action: pan-y; user-select: none; }
.pg { padding: var(--s-4) var(--s-4) var(--s-3); cursor: grab; }
.pg:active { cursor: grabbing; }
.pg .poster { width: 108px; height: 224px; margin-top: var(--s-2); -webkit-user-drag: none; }
.pg h3 { margin-top: var(--s-3); }
.pg .line { font-size: 14px; line-height: 1.45; margin: var(--s-1) 0 var(--s-3); max-width: 24ch; }
.rt { display: flex; gap: var(--s-2); justify-content: center; }
.rt span { font-size: 12px; color: var(--n-700); padding: 4px 10px; border: 1px solid var(--n-400); border-radius: var(--r-pill); background: var(--n-100); }
.rt b { color: var(--ink); font-size: 14px; }
.card .fn, .fn { font-size: 12px; color: var(--n-600); margin-top: var(--s-2); }
.pg .fn { max-width: 26ch; }
.card .fn a { color: var(--accent); }

/* ---------- centered page frame (headings, hero, contact); reading text stays left ---------- */
.hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--s-5); }
.hero-grid > div { display: flex; flex-direction: column; align-items: center; }
.hero-av { order: -1; width: 112px; }
#hero h1 { max-width: 16ch; margin-inline: auto; }
.hero-sub, .peek { margin-inline: auto; }
.peek { text-align: center; border: 1px solid var(--line); border-radius: var(--r-m); }
#hero .eyebrow, .sec-head .eyebrow, #about .eyebrow, #contact .eyebrow { justify-content: center; }
.cta, .facts { justify-content: center; }
.sec-head { text-align: center; }
.sec-head .h2, .sec-head .lede, .about-intro .h2 { margin-inline: auto; }
.about-intro { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: var(--s-5); }
.about-intro .txt { max-width: 62ch; text-align: left; }
.scene-hint { justify-content: center; text-align: center; gap: var(--s-2) var(--s-5); }
.objlist { justify-content: center; }
.skills h3 { text-align: center; }
.xp-cta { text-align: center; }
.contact-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: var(--s-6); }
#contact .lede { margin-inline: auto; }
.contact-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
.contact-actions small { flex-basis: 100%; text-align: center; }
@media (max-width: 760px) { .objlist { justify-content: stretch; } .hero-av { width: 96px; } }
@media (max-width: 760px) { #hero .eyebrow, .sec-head .eyebrow, #about .eyebrow, #contact .eyebrow { text-align: center; } #hero .eyebrow::before, .sec-head .eyebrow::before, #about .eyebrow::before, #contact .eyebrow::before { display: none; } }

.about-intro .txt { text-align: center; max-width: 44ch; font-size: 18px; }

/* hero pop-up cards: absolutely positioned, so nothing in the layout moves */
.pvw { position: relative; display: inline; }
.pcard { position: absolute; top: calc(100% + 12px); left: 0; z-index: 20; width: min(280px, calc(100vw - 24px)); text-align: left; padding: var(--s-4); background: var(--surface); color: var(--text-2);
  border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-2); font: 400 15px/1.45 var(--f-b); letter-spacing: 0; opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--t-hover), transform var(--t-hover), visibility 0s var(--t-hover); }
.pcard b { display: block; color: var(--text); font-weight: 600; margin-bottom: 4px; }
.pvw.open .pcard { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.eyebrow.open::before { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.eyebrow[hidden] { display: none; }

/* film book: larger overlay, contained page-turn while dragging */
.card:has([data-book]) { width: min(94vw, 760px); max-width: none; overflow: visible; max-height: none; padding: var(--s-6) var(--s-5); }
.card:has([data-book]) .book { width: min(100%, 440px); height: min(600px, 66svh); perspective: 2000px; touch-action: pan-y; }
.card:has([data-book]) .pg { padding: var(--s-6) var(--s-5) var(--s-5); overscroll-behavior: contain; }
.card:has([data-book]) .pg .poster { width: auto; height: min(300px, 34svh); aspect-ratio: 216 / 450; object-fit: cover; }
.card:has([data-book]) .pg h3 { font-size: 26px; }
.card:has([data-book]) .pg .line { font-size: 16px; max-width: 30ch; }
.card:has([data-book]) .pg.cover h3 { font-size: 32px; }
.pg * { user-select: none; -webkit-user-select: none; }
dialog.panel:has([data-book]) { width: min(780px, calc(100vw - 24px)); }
@media (max-width: 760px) { .card:has([data-book]) { padding: var(--s-5) var(--s-3); max-height: 94svh; overflow-y: auto; overflow-x: clip; } .card:has([data-book]) .book { height: min(520px, 62svh); } }

/* YouTube player: inline in the Music card, small corner player once the card is closed */
#ytp { position: fixed; z-index: 28; left: var(--s-4); bottom: calc(var(--s-4) + 56px + env(safe-area-inset-bottom, 0px)); width: 300px; height: 152px; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sh-3); background: #000; }
#ytp iframe { width: 100%; height: 100%; border: 0; display: block; }
#ytp.in-card { position: relative; left: auto; bottom: auto; width: 100%; margin-top: var(--s-3); z-index: auto; }
@media (max-width: 760px) { #ytp:not(.in-card) { width: min(300px, calc(100vw - 32px)); } }

#ytp.in-card { height: 352px; aspect-ratio: auto; background: transparent; box-shadow: none; }

/* no eyebrows: sentence-case status pill + hand-marked headings */
.status { display: inline-flex; align-items: center; gap: var(--s-2); font: 500 14px/1 var(--f-b); color: var(--text-2); padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); margin: 0 0 var(--s-4); }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.hl { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23E46C47' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15 C 22 8, 38 19, 66 12 S 104 6, 128 13 S 170 17, 196 6' stroke-width='3.6' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") no-repeat left bottom / 104% .34em; color: inherit; white-space: nowrap; padding-bottom: .3em; margin-bottom: -.12em; }

.h2:has(.hl), #contact h2:has(.hl) { padding-bottom: .22em; }

/* ---------- folders v3: paper pad ---------- */
.pad-ui { display: none; }
.folder { box-shadow: 0 2px 3px rgba(48, 40, 34, .08), 0 18px 40px -12px rgba(48, 40, 34, .28); transform-origin: 50% 0; backface-visibility: visible;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .22 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(color-mix(in srgb, var(--line) 35%, transparent) 1px, transparent 1px);
  background-size: 160px 160px, 14px 14px; }
.folder::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #1b1511; opacity: var(--dim, 0); pointer-events: none; }
html[data-theme="night"] .folder { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55); }
.tab { box-shadow: 0 -2px 6px rgba(48, 40, 34, .08); }
/* static fallback (reduced motion / no JS): plain, readable list */
.pad:not(.pad-on) .folder { position: relative; top: auto; margin: 56px 0 0; }
.pad:not(.pad-on) .wrap { max-width: var(--contentw); }

.pad.pad-on { --step: 90svh; --sheet-h: min(600px, calc(100svh - var(--nav-h) - 170px)); height: calc(100svh + (var(--n) - 1) * var(--step)); }
.pad.pad-on .pad-stage { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display: flex; align-items: center; perspective: 1900px; perspective-origin: 50% 0; }
.pad.pad-on .pad-stage > .wrap { width: 100%; max-width: var(--contentw); margin-inline: auto; padding-top: 40px; }
.pad.pad-on .pad-sheets { position: relative; height: var(--sheet-h); transform-style: preserve-3d; }
.pad.pad-on .folder { position: absolute; inset: 0; top: 0; margin: 0; height: 100%; min-height: 0; will-change: transform; transition: none; translate: none; overflow: hidden; backface-visibility: hidden; }
.pad.pad-on .tab { top: 0; border-radius: 0 0 var(--r-s) var(--r-s); border-top: 0; border-bottom: 4px solid var(--c); display: none; }
.pad.pad-on .folder.flipped > * { visibility: hidden; }
.pad.pad-on .folder:hover, .pad.pad-on .folder:focus-within { translate: none; }
.pad.pad-on .f-body { align-content: start; }
.pad.pad-on .pad-ui { display: flex; align-items: center; justify-content: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-5); }
.pad-count { font: 500 15px var(--f-b); color: var(--text-2); min-width: 64px; text-align: center; } .pad-count b { color: var(--text); }
.pad-ui .btn { min-height: 44px; padding: 0 var(--s-4); }
.pad-snd { background: none; border: 1px solid var(--line); border-radius: var(--r-pill); min-height: 44px; padding: 0 var(--s-4); color: var(--text-2); font: 500 14px var(--f-b); cursor: pointer; }
.pad-snd[aria-pressed="false"] { opacity: .65; }
@media (max-width: 760px) { .pad.pad-on { --sheet-h: min(560px, calc(100svh - var(--nav-h) - 190px)); } .pad.pad-on .pad-stage > .wrap { padding-inline: var(--gutter); } .pad.pad-on .f-head { padding-block: var(--s-2); } }
#projects { overflow-x: clip; }
@media (max-width: 760px) {
  .pad.pad-on { --sheet-h: min(540px, calc(100svh - var(--nav-h) - 235px)); }
  .pad.pad-on .pad-stage { align-items: flex-start; }
  .pad.pad-on .f-meta, .pad.pad-on .f-body .todo { display: none; }
  .pad.pad-on .f-body { padding: var(--s-4) var(--s-5); gap: var(--s-3); }
  .pad.pad-on .f-body .prob { font-size: 16px; }
  .pad.pad-on .pad-ui { gap: var(--s-3); margin-top: var(--s-4); }
}
#hero { overflow-x: clip; }

/* spiral binding: slim graphite coils fixed at the hinge, punched holes on every sheet */
.pad.pad-on .pad-sheets::after { content: ''; position: absolute; left: 6%; right: 6%; top: -9px; height: 24px; pointer-events: none; transform: translateZ(70px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'%3E%3Crect x='6' y='1.5' width='8' height='21' rx='4' fill='none' stroke='%23423c38' stroke-width='2.2'/%3E%3Cpath d='M8 4.5v13' stroke='%23ffffff' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") round no-repeat; background-position: left center; background-size: 20px 24px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); }
.pad.pad-on .folder::before, .pad.pad-flow .folder::before { content: ''; position: absolute; left: 6%; right: 6%; top: 8px; height: 10px; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 10px 5px, color-mix(in srgb, var(--text) 38%, transparent) 0 2.6px, transparent 3.2px) round no-repeat; background-position: left top; background-size: 20px 10px; }
.pad-ui { row-gap: var(--s-2); }

/* ---------- letterhead header (replaces the floating nav bar) ---------- */
:root { --nav-h: 0px; }
@media (max-width: 760px) { :root { --nav-h: 0px; } }
#nav { position: absolute; z-index: 30; top: 0; left: 0; right: 0; max-width: var(--maxw); margin-inline: auto; min-height: 0; padding: var(--s-6) var(--gutter) 0;
  display: grid; grid-template-columns: auto minmax(0, 30ch); justify-content: space-between; align-items: start; gap: var(--s-5);
  background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#nav .brand { font-size: 22px; }
.letter-nav p { margin: 0; font: 400 16px/1.5 var(--f-b); color: var(--text); letter-spacing: -.005em; }
.ll { color: var(--accent); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; border-radius: 2px; transition: text-decoration-color var(--t-hover), color var(--t-hover); }
.ll:hover { text-decoration-color: currentColor; }
.ll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ll[aria-current="true"] { text-decoration-color: currentColor; }
#hero { padding-top: 150px; } .cs-hero { padding-top: 150px; }
html { scroll-padding-top: 24px; } section[id] { scroll-margin-top: 24px; }
@media (max-width: 760px) {
  #nav { grid-template-columns: 1fr; gap: var(--s-3); padding-top: var(--s-5); }
  .letter-nav p { font-size: 15px; max-width: 34ch; }
  #hero { padding-top: 190px; } .cs-hero { padding-top: 190px; }
}
/* calmer hero: no ringed avatar, no pill badge */
.hero-av { box-shadow: none; width: 88px; }
.status { border: 0; background: none; padding: 0; box-shadow: none; font-size: 15px; }
.status i { box-shadow: none; }
@media (max-width: 760px) { .hero-av { width: 76px; } }

/* ---------- sticky notebook strip with a dog-eared corner ---------- */
:root { --nav-h: 56px; } @media (max-width: 760px) { :root { --nav-h: 56px; } }
html { scroll-padding-top: 72px; } section[id] { scroll-margin-top: 72px; }
#bar { position: fixed; z-index: 40; top: 0; left: 50%; width: min(calc(100% - 24px), 760px); translate: -50% 0; transform: translateY(-120%); transition: transform 520ms cubic-bezier(.2, .9, .25, 1.05); filter: drop-shadow(0 6px 10px rgba(48, 40, 34, .16)); pointer-events: none; }
#bar.on { transform: translateY(0); pointer-events: auto; }
.bar-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: 52px; padding: 6px 28px 0 var(--s-4); background: var(--paper, var(--surface)); color: var(--ink, var(--text)); border-bottom: 1px solid var(--line);
  border-radius: 0 0 var(--r-m) var(--r-m); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
  background-image: radial-gradient(circle at 10px 6px, rgba(48, 40, 34, .35) 0 2.4px, transparent 3px); background-size: 20px 12px; background-repeat: round no-repeat; }
.bar-in::before { content: ''; position: absolute; inset: 12px 0 0; background: var(--paper, var(--surface)); z-index: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%); }
#bar::after { content: ''; position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; background: linear-gradient(135deg, #e9dccb 0 50%, transparent 50%); border-top-left-radius: 2px; filter: drop-shadow(-2px -2px 3px rgba(48, 40, 34, .22)); }
.bar-in > * { position: relative; z-index: 1; }
.bar-brand { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; font: 700 17px/1 var(--f-b); letter-spacing: -.03em; color: var(--ink, var(--text)); }
.bar-brand img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .bar-brand .dot { color: var(--accent-d); }
#bar nav { display: flex; align-items: center; gap: var(--s-4); } #bar .ll { font-size: 15px; min-height: 36px; display: inline-flex; align-items: center; color: var(--coral-700); }
html[data-theme="night"] #bar .bar-in, html[data-theme="night"] #bar .bar-in::before { background: #2d2a28; color: #fff9f0; }
html[data-theme="night"] .bar-brand { color: #fff9f0; } html[data-theme="night"] #bar .ll { color: var(--coral-300); }
html[data-theme="night"] #bar::after { background: linear-gradient(135deg, #4a4642 0 50%, transparent 50%); }
@media (max-width: 760px) { .bar-brand span { display: none; } #bar nav { gap: var(--s-3); } #bar .ll { font-size: 14px; } .bar-in { padding-right: 26px; } }
@media (prefers-reduced-motion: reduce) { #bar { transition: none; } }
/* project sheets: minimal square grid (graph paper) instead of dots */
.folder { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .22 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(color-mix(in srgb, var(--line) 38%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line) 38%, transparent) 1px, transparent 1px);
  background-size: 160px 160px, 28px 28px, 28px 28px; background-position: 0 0, -1px 8px, -1px 8px; }

/* ---------- 14px baseline grid: fine squares, and every line of text sits on a grid row ---------- */
.folder { --g: 14px; background-origin: border-box; background-size: 160px 160px, var(--g) var(--g), var(--g) var(--g); background-position: 0 0, 0 0, 0 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .22 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(color-mix(in srgb, var(--line) 30%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line) 30%, transparent) 1px, transparent 1px); }
.folder { border-width: 0; box-shadow: 0 0 0 1px var(--line), 0 2px 3px rgba(48, 40, 34, .08), 0 18px 40px -12px rgba(48, 40, 34, .28); }
.folder .f-head { min-height: 0; height: 56px; padding: 0 28px; }
.folder .f-head .num, .folder .f-head .go { line-height: 28px; min-height: 0; }
.folder .f-body { padding: 28px; gap: 28px; }
.folder .f-body .todo { display: inline-flex; align-items: center; height: 28px; line-height: 28px; padding-block: 0; }
.folder .f-body h3 { font-size: 26px; line-height: 28px; margin: 14px 0 14px; letter-spacing: -.02em; }
.folder .f-body .prob { font-size: 16px; line-height: 28px; margin: 0 0 14px; }
.folder .f-body p { font-size: 16px; line-height: 28px; margin-top: 0; margin-bottom: 0; }
.folder .f-meta { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); gap: 0 28px; }
.folder .f-meta dt { font-size: 12px; line-height: 28px; margin: 0; }
.folder .f-meta dd { font-size: 15px; line-height: 28px; margin: 0; }
html[data-theme="night"] .folder { box-shadow: 0 0 0 1px var(--line), 0 18px 40px -12px rgba(0, 0, 0, .55); }
@media (max-width: 760px) {
  .folder .f-head { height: 70px; padding: 14px 28px 0 20px; }
  .folder .f-head .num { font-size: 13px; line-height: 14px; max-width: 12ch; }
  .folder .f-head .go { white-space: nowrap; font-size: 14px; }
  .folder .f-body { padding: 14px 20px; }
}

/* accent picker */
.themesw { position: fixed; }
.themesw .acc-btn { min-width: 44px; width: 44px; padding: 0; display: grid; place-items: center; margin-right: 2px; }
.acc-btn i { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(from 20deg, #E46C47, #E0A030, #7C9A3A, #2FA39A, #3B82C4, #6C63C9, #B5588C, #E46C47); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
.themesw #accPop button, .themesw #pjAccPop button { min-width: 0; min-height: 0; padding: 0; margin: 0; font: inherit; }
#accPop, #pjAccPop { position: absolute; right: 0; bottom: calc(100% + 10px); display: grid; grid-template-columns: repeat(5, 36px); gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-3); }
#accPop[hidden] { display: none; }
#accPop button, #pjAccPop button { all: unset; box-sizing: border-box; width: 36px; height: 36px; border-radius: 50%; background: var(--sw); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: transform var(--t-hover); }
#accPop button:hover { transform: scale(1.08); }
#accPop button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
#accPop button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
/* squiggle underline now follows the accent colour */
.hl { background: none !important; position: relative; }
.hl::after { content: ''; position: absolute; left: 0; bottom: 0; width: 104%; height: .34em; background: var(--accent-d); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C 22 8, 38 19, 66 12 S 104 6, 128 13 S 170 17, 196 6' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat left center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C 22 8, 38 19, 66 12 S 104 6, 128 13 S 170 17, 196 6' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat left center / 100% 100%; }
@media (max-width: 760px) { #accPop { grid-template-columns: repeat(5, 34px); gap: 8px; padding: 12px; } #accPop button { width: 34px; height: 34px; } }

.acc-lab { grid-column: 1 / -1; margin: 0 0 2px; font: 500 13px var(--f-b); color: var(--text-2); } .acc-lab b { color: var(--text); }
#accPop button[aria-pressed="true"]::after { content: ''; display: block; width: 100%; height: 100%; background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
#accPop { grid-template-columns: repeat(4, 36px); }
@media (max-width: 760px) { #accPop { grid-template-columns: repeat(4, 34px); } }
html[data-theme="night"] #bar .bar-in, html[data-theme="night"] #bar .bar-in::before { background: #232120; }

/* sheets: whisper-quiet grid + a soft angular shade that deepens toward the lower-right */
.folder {
  background-image: conic-gradient(from 200deg at 0% 0%, rgba(48, 40, 34, 0) 0deg, rgba(48, 40, 34, .035) 45deg, rgba(48, 40, 34, .09) 90deg),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .22 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(color-mix(in srgb, var(--line) 15%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line) 15%, transparent) 1px, transparent 1px);
  background-size: 100% 100%, 160px 160px, var(--g) var(--g), var(--g) var(--g); background-position: 0 0, 0 0, 0 0, 0 0; }
html[data-theme="night"] .folder { background-image: conic-gradient(from 200deg at 0% 0%, rgba(0, 0, 0, 0) 0deg, rgba(0, 0, 0, .12) 45deg, rgba(0, 0, 0, .28) 90deg),
    linear-gradient(color-mix(in srgb, var(--line) 22%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line) 22%, transparent) 1px, transparent 1px);
  background-size: 100% 100%, var(--g) var(--g), var(--g) var(--g); }

/* ---------- sticky strip v2: flat editorial masthead (double hairline, same paper as the page) ---------- */
#bar { left: 0; width: 100%; translate: none; filter: none; transform: translateY(-110%); transition: transform 420ms cubic-bezier(.2, .8, .2, 1); }
#bar.on { transform: translateY(0); }
#bar::after { content: none; }
.bar-in { max-width: none; height: 52px; padding: 0 max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); border-radius: 0; clip-path: none; background-image: none;
  background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); border-bottom: 1px solid var(--text); }
.bar-in::before { content: none; }
.bar-in::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: color-mix(in srgb, var(--text) 45%, transparent); pointer-events: none; }
.bar-brand { color: var(--text); } .bar-brand img { display: none; }
#bar nav { gap: var(--s-5); } #bar .ll { color: var(--text); text-decoration-color: color-mix(in srgb, var(--text) 25%, transparent); }
#bar .ll:hover { color: var(--accent); text-decoration-color: var(--accent); }
html[data-theme="night"] #bar .bar-in, html[data-theme="night"] #bar .bar-in::before { background: color-mix(in srgb, var(--bg) 90%, transparent); color: var(--text); }
html[data-theme="night"] .bar-brand, html[data-theme="night"] #bar .ll { color: var(--text); }
@media (max-width: 760px) { .bar-in { padding-inline: var(--gutter); } .bar-brand span { display: inline; font-size: 16px; } #bar nav { gap: var(--s-3); } #bar .ll { font-size: 13.5px; } }
@media (max-width: 420px) { .bar-brand { display: none; } .bar-in { justify-content: center; } }
.bar-in { height: 56px; background: color-mix(in srgb, var(--bg) 95%, transparent); }
.bar-in::after { bottom: 3px; }
html[data-theme="night"] #bar .bar-in { background: color-mix(in srgb, var(--bg) 95%, transparent); }

/* subtle toggle switches (state is visible in the track, not only in the label) */
.tgl { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 var(--s-2); background: none; border: 0; color: var(--text-2); font: 500 14px var(--f-b); cursor: pointer; border-radius: var(--r-s); }
.tgl i { position: relative; width: 34px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--text) 18%, transparent); transition: background 220ms var(--ease); flex: none; }
.tgl i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform 220ms var(--ease); }
.tgl[aria-checked="true"] i { background: var(--accent-d); }
.tgl[aria-checked="true"] i::after { transform: translateX(14px); }
.tgl[aria-checked="true"] { color: var(--text); }
.tgl:hover i { background: color-mix(in srgb, var(--text) 28%, transparent); } .tgl[aria-checked="true"]:hover i { background: var(--accent); }
.tgl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tgl[hidden] { display: none; }

/* pad controls: one quiet row. arrows + counter in the middle, switches tucked to the right */
.pad.pad-on .pad-ui { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.pad-nav { display: flex; align-items: center; gap: var(--s-3); }
.pad-opts { justify-self: end; display: flex; align-items: center; gap: var(--s-2); }
.pad-arrow { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--text); cursor: pointer; transition: border-color var(--t-hover), background var(--t-hover); }
.pad-arrow:hover { border-color: var(--text); background: var(--surface); } .pad-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pad-arrow[disabled] { opacity: .3; pointer-events: none; }
@media (max-width: 760px) { .pad.pad-on .pad-ui { grid-template-columns: 1fr; justify-items: center; gap: var(--s-2); } .pad-opts { justify-self: center; } .pad-l { display: none; } }
.pad.pad-on .pad-opts { order: -1; justify-self: start; } .pad.pad-on .pad-l { order: 3; }
@media (max-width: 760px) { .pad.pad-on .pad-opts { order: 3; justify-self: center; } }

/* menu hover: a pen cursor, and the link gets inked with a quick hand-drawn stroke */
@media (hover: hover) and (pointer: fine) {
  #bar .ll, .letter-nav .ll { position: relative; text-decoration: none; padding-bottom: 2px; }
  #bar .ll::before, .letter-nav .ll::before { content: ''; position: absolute; left: -2px; right: -2px; bottom: -5px; height: 9px; background: var(--accent-d); pointer-events: none; clip-path: inset(0 100% 0 0); transition: clip-path 520ms cubic-bezier(.45, .05, .25, 1);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 14 3, 22 10, 38 6 S 64 3, 78 7 S 92 8, 98 4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat left center / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 14 3, 22 10, 38 6 S 64 3, 78 7 S 92 8, 98 4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat left center / 100% 100%; }
  #bar .ll:hover::before, .letter-nav .ll:hover::before, #bar .ll:focus-visible::before, .letter-nav .ll:focus-visible::before { clip-path: inset(0 0 0 0); }
  #bar .ll:hover, .letter-nav .ll:hover { color: var(--accent); }
}
/* keyboard focus gets the same inking (no cursor needed) */
#bar .ll:focus-visible::before, .letter-nav .ll:focus-visible::before { clip-path: inset(0 0 0 0); }
#bar .ll::before, .letter-nav .ll::before { }
@media (prefers-reduced-motion: reduce) { #bar .ll::before, .letter-nav .ll::before { transition: none; } }

/* handwritten name */
.brand > span, .foot .brand, #bar .brand { font-family: 'Sacramento', 'Brush Script MT', cursive; font-weight: 400; letter-spacing: 0; }
#nav .brand, #bar .brand { font-size: 36px; line-height: 1; }
#nav .brand > span, #bar .brand > span { font-size: 36px; }
.foot .brand { font-size: 44px; }

/* real pen that writes the underline */
.has-pen #bar .ll, .has-pen .letter-nav .ll { cursor: none; }
#pen { position: fixed; left: 0; top: 0; width: 92px; height: 74px; pointer-events: none; z-index: 120; opacity: 0; transition: opacity 160ms ease; will-change: transform; filter: drop-shadow(2px 5px 3px rgba(40, 28, 20, .22)); }
#pen.on { opacity: 1; }
#pen svg { display: block; overflow: visible; }
@media (prefers-reduced-motion: reduce) { #pen { display: none; } .has-pen #bar .ll, .has-pen .letter-nav .ll { cursor: pointer; } .crux .ll { cursor: pointer; } }
@media (hover: none), (pointer: coarse) { #pen { display: none; } }

/* first-visit guide bubble */
.pad-opts { position: relative; }
.guide { position: absolute; left: 0; bottom: calc(100% + 14px); width: min(310px, 86vw); padding: 14px 16px 12px; background: var(--surface); color: var(--text); border: 1.5px solid var(--text); border-radius: 10px; box-shadow: 3px 4px 0 color-mix(in srgb, var(--text) 85%, transparent); font: 400 14px/1.45 var(--f-b); z-index: 30; opacity: 0; transform: translateY(8px) rotate(-.6deg); transition: opacity 240ms ease, transform 300ms cubic-bezier(.3, 1.3, .5, 1); text-align: left; }
.guide.in { opacity: 1; transform: none; }
.guide::after { content: ''; position: absolute; left: 34px; bottom: -8px; width: 13px; height: 13px; background: var(--surface); border-right: 1.5px solid var(--text); border-bottom: 1.5px solid var(--text); transform: rotate(45deg); }
.guide b { display: block; font: 700 12px/1 var(--f-b); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-d); margin-bottom: 6px; }
.guide p { margin: 0 0 10px; }
.g-act { display: flex; gap: 8px; flex-wrap: wrap; }
.g-btn { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--text); background: none; color: var(--text); font: 600 13px var(--f-b); cursor: pointer; }
.g-btn.primary { background: var(--text); color: var(--bg); }
.g-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pad-opts.hint .tgl i { animation: gpulse 1.6s ease-in-out infinite; }
@keyframes gpulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
@media (max-width: 760px) { .guide { left: 50%; margin-left: calc(min(310px, 86vw) / -2); } .guide::after { left: calc(50% - 6px); } }
@media (prefers-reduced-motion: reduce) { .guide, .pad-opts.hint .tgl i { transition: none; animation: none; } }

/* ============ the room: one photographed room, viewed like a head turning ============ */
.scene-wrap { max-width: none; padding-inline: 0; } .scene-hint { max-width: var(--contentw); padding-inline: var(--gutter); }
.stage-wrap-desktop { display: block !important; } .peekbtn { display: none !important; }
.room { position: relative; width: 100%; height: clamp(500px, 56.25vw, 90svh); overflow: hidden; background: #120d0a; touch-action: pan-y; outline: none; isolation: isolate; user-select: none; -webkit-user-select: none; }
.rc, .rfb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .rfb { object-fit: cover; }
.rlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.rbtns { position: absolute; inset: 0; z-index: 3; overflow: hidden; }
.hs { position: absolute; display: block; padding: 0; margin: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; transition: box-shadow 260ms ease, background 260ms ease; -webkit-tap-highlight-color: transparent; }
.hs:hover, .hs:focus-visible { background: radial-gradient(ellipse at 50% 50%, rgba(255, 233, 196, .16), rgba(255, 233, 196, .03) 70%); box-shadow: 0 0 0 1.5px rgba(255, 226, 172, .6), 0 0 38px rgba(255, 196, 120, .28); }
.hs:focus-visible { outline: 2px solid #fff3dc; outline-offset: 3px; }
/* monitor: your folders on the real screen of the photo */
.mon-ui { position: absolute; left: 0; top: 0; width: 560px; height: 253px; transform-origin: 0 0; overflow: hidden; border-radius: 3px; opacity: .93; transition: filter 500ms; }
.mon-ui.wake { filter: brightness(1.25); }
.dsk { position: absolute; inset: 0; background: #08130f url("../assets/room/wallpaper.webp") center / cover no-repeat; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; color: #fff; }
.dsk::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .10; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }
.dsk-bar { position: relative; z-index: 1; height: 16px; background: rgba(10, 20, 16, .45); display: flex; align-items: center; gap: 11px; padding: 0 10px; font-size: 9.5px; backdrop-filter: blur(10px); color: #fff; }
.dsk-bar .ap { width: 9px; height: 11px; } .dsk-bar .ap path, .dsk-bar span svg path { fill: #fff; } .dsk-bar span svg path[stroke] { fill: none; stroke: #fff; }
.dsk-bar b { font-weight: 700; } .dsk-bar u { text-decoration: none; opacity: .9; font-weight: 500; }
.dsk-bar span { margin-left: auto; display: flex; align-items: center; gap: 8px; } .dsk-bar span svg { height: 9px; width: auto; } .dsk-bar span svg rect { stroke: #fff; } .dsk-bar span svg rect[fill="#fff"] { fill: #fff; }
.dsk-ic { position: absolute; left: 18px; top: 26px; display: grid; gap: 14px; }
.fo { display: grid; justify-items: center; gap: 3px; width: 82px; } .fo svg { width: 46px; height: auto; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.fo em { font: 600 9px/1.15 -apple-system, system-ui, sans-serif; font-style: normal; text-align: center; padding: 1px 5px; border-radius: 4px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.fo:first-child em { background: rgba(60, 120, 90, .85); text-shadow: none; }
.dsk-dock { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; gap: 7px; padding: 5px 8px; border-radius: 14px; background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(12px); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.dsk-dock i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); } .dsk-dock i svg { width: 17px; height: 17px; }
.mon-refl { position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, .09) 0 26%, transparent 26.4% 100%), linear-gradient(0deg, rgba(0, 0, 0, .12), transparent 40%); }
.mon-glow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(190, 212, 255, .55), rgba(190, 212, 255, 0)); mix-blend-mode: screen; transform: translateY(-20%); filter: blur(6px); }
.flame { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; transform: scale(var(--s, 1)); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 120, .7), rgba(255, 160, 80, .22) 55%, transparent); mix-blend-mode: screen; }
@keyframes flick { 0%, 100% { filter: brightness(1); } 20% { filter: brightness(.82); } 35% { filter: brightness(1.15); } 60% { filter: brightness(.9); } 80% { filter: brightness(1.08); } }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; } .flash.go { animation: flashgo 520ms ease-out; } @keyframes flashgo { 0% { opacity: .9; } 100% { opacity: 0; } }
.room-tip { position: absolute; z-index: 9; transform: translate(-50%, -100%); margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(24, 17, 12, .88); color: #fbf3e6; font: 500 13px var(--f-b); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 160ms; backdrop-filter: blur(6px); } .room-tip.on { opacity: 1; }
.room-hint { position: absolute; z-index: 6; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; padding: 8px 16px; border-radius: 999px; background: rgba(24, 17, 12, .6); color: #fbf3e6; font: 500 13px var(--f-b); pointer-events: none; transition: opacity 500ms; animation: hintb 3s ease-in-out infinite; } .room-hint.gone { opacity: 0; }
@keyframes hintb { 50% { translate: 0 -4px; } }
.room-back { position: absolute; z-index: 9; left: 16px; top: 16px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #fbf3e6; background: rgba(24, 17, 12, .72); color: #fbf3e6; font: 600 14px var(--f-b); cursor: pointer; backdrop-filter: blur(6px); }
.room-fade { position: absolute; inset: 0; z-index: 7; background: #0d0907; opacity: 0; pointer-events: none; transition: opacity 2200ms ease; } .room.arrive:not(.arrived) .room-fade { opacity: 1; }
@media (min-width: 761px) { html.room-open dialog.panel { margin: auto max(24px, 7vw) auto auto; } }
@media (max-width: 760px) { .room { height: min(80svh, 640px); } .room-hint { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .flame, .room-hint { animation: none; } .room-fade { transition: none; } }

/* receipt: prints slowly out of a slot when the coffee is clicked */
.card.rcpt { background: transparent; box-shadow: none; padding: 0; overflow: visible; max-height: none; animation: none; }
.card.rcpt .close { top: 10px; right: 10px; z-index: 3; }
html.room-open dialog.panel:has(.card.rcpt) { margin: auto; }
.rc-slot { overflow: visible; }
.rc-paper { position: relative; font: 500 min(15px, 1.65svh, 3.7vw)/1.5 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; color: #1d1b19; text-align: left; padding: 2em 2em 2.7em; perspective: 900px;
  background: #f4f2ee linear-gradient(#0000 0 1.45em, rgba(60, 50, 40, .05) 1.45em 1.5em) 0 0 / 100% 1.5em; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / 1.05em 100%, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - .55em) no-repeat; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / 1.05em 100%, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - .55em) no-repeat; -webkit-mask-composite: source-over; mask-composite: add;
  animation: rcin 1s ease-out both; }
@keyframes rcin { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
/* the receipt unfolds slowly, one fold at a time, top to bottom */
.rc-paper > *:not(.rc-star), .rc-paper dl > div { transform-origin: 50% 0; backface-visibility: hidden; animation: rcfold 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, .5s) both; }
@keyframes rcfold { from { transform: rotateX(-88deg); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
.rc-star { animation: rcin 1s ease-out 4s both; }
.rc-paper h2 { font-weight: 700; font-size: 1.75em; line-height: 1.2; font-family: inherit; letter-spacing: .14em; text-align: center; margin: 0; color: #1d1b19; }
.rc-paper p { color: #1d1b19; font-size: .93em; line-height: 1.5; margin: 0; }
.rc-c { text-align: center; } .rc-b { font-weight: 700; margin-top: .6em !important; } .rc-rule { text-align: center; overflow: hidden; white-space: nowrap; opacity: .6; margin: .7em 0 !important; }
.rc-paper dl { margin: 0; } .rc-paper dl > div { padding: .7em 0; border-bottom: 1px dashed rgba(29, 27, 25, .35); } .rc-paper dl > div:last-child { border: 0; }
.rc-paper dt { font-size: .8em; letter-spacing: .12em; text-transform: uppercase; opacity: .6; } .rc-paper dd { margin: .2em 0 0; font-weight: 700; font-size: 1em; line-height: 1.4; }
.rc-tot { display: flex; justify-content: space-between; font-weight: 700; letter-spacing: .08em; }
.rc-ty { letter-spacing: .3em; font-size: 1.07em !important; margin-top: .9em !important; }
.rc-bars { display: block; width: 62%; height: 3em; margin: 1em auto .3em; fill: #1d1b19; } .rc-code { font-size: .75em !important; opacity: .7; }
.rc-star { position: absolute; right: 1.7em; bottom: 4.8em; width: 2.4em; height: 2.4em; color: #5b5550; transform: rotate(14deg); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .rc-paper > *:not(.rc-star), .rc-paper dl > div { animation: rcfade 1.1s ease-out var(--d, .5s) both; } @keyframes rcfade { from { opacity: 0; } to { opacity: 1; } } }

/* turntable: a spinning record laid over the photographed one while the playlist plays */
.rec { position: absolute; display: none; pointer-events: none; transform: scaleY(.168); transform-origin: 50% 50%; }
.rec-d { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; mix-blend-mode: screen; will-change: transform; backface-visibility: hidden; background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 235, 210, .05) 0 1px, rgba(0, 0, 0, 0) 1px 3px); }
.rec-d::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,255,255,0) 0 8%, rgba(255,214,170,.34) 14%, rgba(255,255,255,0) 22% 58%, rgba(255,214,170,.26) 64%, rgba(255,255,255,0) 72%); }
.rec-d i { position: absolute; left: 50%; top: 50%; width: 36%; height: 36%; transform: translate(-50%, -50%); border-radius: 50%; }
.rec-d i::after { content: ''; position: absolute; left: 50%; top: 12%; width: 6%; height: 18%; margin-left: -3%; background: rgba(255, 238, 215, .8); border-radius: 50%; }
.rec-sh { display: none; }
.arm { position: absolute; display: none; pointer-events: none; transform-origin: 0 50%; }
.arm::before { content: ''; position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(180deg, #5a4d42 0 22%, #17130f 22% 100%); }
.arm i { position: absolute; right: -1px; top: 50%; width: 9%; height: 230%; transform: translateY(-50%); background: #0e0c0a; border-radius: 1px; box-shadow: 0 0 2px rgba(255, 210, 160, .35); }

/* lamp pull cord */
.cord { position: absolute; display: none; width: 18px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; z-index: 4; -webkit-tap-highlight-color: transparent; }
.cord::before { content: ''; position: absolute; left: 50%; top: 0; bottom: var(--bead, 6px); width: 1.4px; margin-left: -.7px; background: linear-gradient(#1c1815, #0e0c0a); box-shadow: 0 0 2px rgba(255, 190, 110, .35); }
.cord i { position: absolute; left: 50%; bottom: 0; width: var(--bead, 6px); height: calc(var(--bead, 6px) * 1.8); transform: translateX(-50%); border-radius: 50% 50% 55% 55%; background: radial-gradient(circle at 35% 30%, #4a443e, #1a1714 55%, #0b0a09); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.cord:hover i, .cord:focus-visible i { box-shadow: 0 0 0 3px rgba(255, 214, 140, .3), 0 1px 3px rgba(0, 0, 0, .6); }
.cord:active { cursor: grabbing; }
.cord:focus-visible { outline: 2px solid var(--lime, #cfe27a); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 760px) { dialog.panel:has(.card.rcpt) { width: min(480px, calc(100vw - 32px)); } .rc-paper { font-size: min(15px, 1.55svh, 3.5vw); } }

/* the sneaker drawer: a wooden drawer pulled out toward you */
.card.drawer { background: transparent; box-shadow: none; padding: 0; overflow: visible; max-height: none; animation: none; }
.card.drawer .close { top: -14px; right: -6px; z-index: 5; }
html.room-open dialog.panel:has(.card.drawer) { margin: auto; }
dialog.panel:has(.card.drawer) { width: min(1120px, 94vw); }
.dr-wrap { perspective: 1400px; animation: drpull 1.15s cubic-bezier(.2, .75, .25, 1) both; transform-origin: 50% 100%; }
@keyframes drpull { 0% { transform: translateY(36%) scale(.86) rotateX(14deg); opacity: 0; } 25% { opacity: 1; } 78% { transform: translateY(-1.2%) scale(1.012) rotateX(0deg); } 100% { transform: none; opacity: 1; } }
dialog.out .card.drawer .dr-wrap { animation: drpush .7s cubic-bezier(.5, 0, .7, .3) both; }
@keyframes drpush { to { transform: translateY(30%) scale(.88) rotateX(12deg); opacity: 0; } }
.dr-box { position: relative; border-radius: 10px 10px 0 0; padding: 16px 16px 0; background: linear-gradient(#2a1c12, #3a281a); box-shadow: inset 0 14px 22px rgba(0, 0, 0, .6), inset 0 0 0 2px #1c120b, 0 -2px 0 #51391f; }
.dr-in { overflow-x: auto; overflow-y: hidden; border-radius: 6px 6px 0 0; background: #0b0a09; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); scrollbar-width: thin; scrollbar-color: #6d4b2b #0b0a09; }
.dr-in img { display: block; height: clamp(220px, 31vw, 420px); width: auto; max-width: none; }
.dr-front { position: relative; display: grid; place-items: center; min-height: 96px; padding: 34px 20px 16px; border-radius: 0 0 10px 10px; text-align: center;
  background: repeating-linear-gradient(92deg, rgba(0, 0, 0, .06) 0 2px, rgba(255, 255, 255, .02) 2px 7px, rgba(0, 0, 0, .05) 7px 9px), linear-gradient(#a8743f, #8a5a2d 55%, #7a4d25); box-shadow: 0 18px 34px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 220, 170, .35), inset 0 -3px 0 rgba(0, 0, 0, .3); }
.dr-front h2 { margin: 0; font: 600 clamp(15px, 1.8vw, 20px)/1.2 var(--f-b, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: #3b2412; text-shadow: 0 1px 0 rgba(255, 225, 180, .45); }
.dr-knob { position: absolute; left: 50%; top: 12px; width: 64px; height: 18px; transform: translateX(-50%); border-radius: 9px; background: linear-gradient(#e8c783, #b08a3a 55%, #7a5a1e); box-shadow: 0 4px 6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5); }
@media (max-width: 760px) { .dr-box { padding: 10px 10px 0; } .dr-in img { height: 210px; } .dr-front { min-height: 66px; } .card.drawer .close { top: -48px; right: 0; } }
@media (prefers-reduced-motion: reduce) { .dr-wrap { animation: rcin .6s ease-out both; } dialog.out .card.drawer .dr-wrap { animation: none; opacity: 0; } }
@media (min-width: 761px) { .dr-in img { width: 100%; height: auto; } }

.fl { position: absolute; display: none; pointer-events: none; mix-blend-mode: screen; filter: blur(.3px); }

/* drawer v2: real wood grain, rises slowly from the bottom edge and stays docked there */
html.room-open dialog.panel:has(.card.drawer), dialog.panel:has(.card.drawer) { margin: auto auto 0; max-height: none; }
.dr-wrap { animation: drrise 2.8s cubic-bezier(.22, .6, .2, 1) both; transform-origin: 50% 100%; }
@keyframes drrise { from { transform: translateY(104%); } to { transform: none; } }
dialog.out .card.drawer .dr-wrap { animation: drsink 1.1s cubic-bezier(.5, 0, .75, .4) both; }
@keyframes drsink { to { transform: translateY(104%); } }
.dr-box { background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .0)), url("../assets/room/wood-dark.webp") center / cover; border-radius: 10px 10px 0 0; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .55), inset 0 10px 18px rgba(0, 0, 0, .55), 0 -2px 0 rgba(255, 210, 150, .25); }
.dr-front { background: linear-gradient(rgba(255, 220, 170, .10), rgba(0, 0, 0, .18)), url("../assets/room/wood-front.webp") center / cover; border-radius: 0; box-shadow: inset 0 2px 0 rgba(255, 220, 170, .4), inset 0 -3px 0 rgba(0, 0, 0, .35), 0 -10px 24px rgba(0, 0, 0, .4); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.dr-knob { background: linear-gradient(#efd08a, #b58d3a 55%, #6f5119); }
@media (prefers-reduced-motion: reduce) { .dr-wrap { animation: rcin 1s ease-out both; } }

/* softer screen light: warmer, dimmer, no harsh white */
.mon-ui { opacity: .9; filter: brightness(.8) saturate(.92) sepia(.12); }
.mon-ui.wake { filter: brightness(.95) saturate(.95) sepia(.12); }
.mon-ui::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255, 190, 120, .10), rgba(255, 170, 100, .06)); mix-blend-mode: soft-light; }
.mon-glow { background: radial-gradient(closest-side, rgba(255, 206, 150, .38), rgba(255, 190, 130, 0)); filter: blur(10px); }
.mon-refl { background: linear-gradient(118deg, rgba(255, 236, 210, .05) 0 26%, transparent 26.4% 100%), linear-gradient(0deg, rgba(0, 0, 0, .14), transparent 40%); }
.dsk-bar { background: rgba(10, 20, 16, .55); } .dsk-bar b, .dsk-bar u, .dsk-bar span { color: #f1e6d4; }

/* drawer v3: old, dark, used */
.dr-box { background: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)), url("../assets/room/wood-dark.webp") center / cover; border-radius: 6px 8px 0 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,.7), inset 0 12px 22px rgba(0,0,0,.7), inset 3px 0 6px rgba(0,0,0,.4), 0 -2px 0 rgba(120,80,40,.25); }
.dr-in { background: #070605; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 6px 14px rgba(0,0,0,.7); }
.dr-front { background: radial-gradient(120% 90% at 50% 0, rgba(0,0,0,0), rgba(0,0,0,.35)), url("../assets/room/wood-front.webp") center / cover; border-radius: 2px 3px 0 0; box-shadow: inset 0 1px 0 rgba(160,110,60,.22), inset 0 -3px 0 rgba(0,0,0,.5), inset 2px 0 0 rgba(0,0,0,.35), inset -2px 0 0 rgba(0,0,0,.35), 0 -10px 24px rgba(0,0,0,.5); }
.dr-front::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40px 24px at 8% 78%, rgba(0,0,0,.35), transparent), radial-gradient(70px 30px at 91% 30%, rgba(0,0,0,.3), transparent), linear-gradient(100deg, transparent 60%, rgba(0,0,0,.25)); mix-blend-mode: multiply; }
.dr-front h2 { color: rgba(214,170,110,.62); text-shadow: 0 -1px 0 rgba(0,0,0,.75), 0 1px 0 rgba(255,210,150,.08); letter-spacing: .2em; font-weight: 500; opacity: .9; transform: rotate(-.35deg); }
.dr-knob { width: 58px; height: 16px; background: linear-gradient(#8a6b3a, #5c4422 55%, #2e2110); box-shadow: 0 4px 6px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,220,160,.18), inset 0 -1px 2px rgba(0,0,0,.6); transform: translateX(-50%) rotate(-1.2deg); }

/* name only, same wordmark everywhere */
.bar-brand > span { font-family: 'Sacramento', 'Brush Script MT', cursive; font-weight: 400; letter-spacing: 0; font-size: 36px; line-height: 1; }
.bar-brand .dot { color: var(--accent-d); }
@media (max-width: 760px) { .bar-brand span { font-size: 32px; } #nav .brand, #nav .brand > span { font-size: 32px; } }

/* minimal project card */
.folder .f-body { align-items: center; }
.folder .f-body > div:first-child { display: flex; flex-direction: column; justify-content: center; align-self: stretch; }
.folder .f-body h3 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.15; margin: 0 0 14px; }
.folder .f-body .prob { margin: 0; color: var(--text-2); font-weight: 400; max-width: 32ch; }
.folder .f-meta { margin-top: auto; border-top: 0; padding-top: 0; }
.folder .f-meta dt { text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.folder .vis { align-self: stretch; }
.pad.pad-on .folder { display: flex; flex-direction: column; }
.pad.pad-on .folder .f-body { flex: 1; align-content: stretch; align-items: stretch; padding-bottom: 28px; }
.pad.pad-on .folder .vis { min-height: 0; }
.pad.pad-on .folder .f-meta { display: block; }
.pad.pad-on .folder .f-head { height: 76px; padding-top: 30px; padding-bottom: 0; box-sizing: border-box; align-items: center; }
.pad.pad-on .folder .f-head .num, .pad.pad-on .folder .f-head .go { display: flex; align-items: center; height: 28px; }

/* batmobile overlay */
.card.bat { background: #07080a; color: #e9e4db; padding: 0; overflow: hidden; width: min(440px, calc(100vw - 32px)); max-height: calc(100svh - 32px); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); animation: batin 1.1s cubic-bezier(.2,.7,.2,1) both; }
.card.bat .close { top: 10px; right: 10px; z-index: 3; background: rgba(0,0,0,.55); color: #fff; }
.bat-fig { margin: 0; position: relative; }
.bat-fig img { display: block; width: 100%; height: auto; max-height: calc(100svh - 32px); object-fit: cover; animation: batzoom 6s ease-out both; }
.bat-fig::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55)), linear-gradient(transparent 70%, rgba(0,0,0,.75)); }
.bat-fig figcaption { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2; text-align: center; font: 700 clamp(22px, 3vw, 30px)/1 var(--f-b); letter-spacing: .28em; text-transform: uppercase; color: #f1ead9; text-shadow: 0 2px 14px rgba(0,0,0,.9); opacity: 0; animation: batcap 1.2s 1s ease-out forwards; }
@keyframes batin { from { opacity: 0; transform: scale(.96); filter: brightness(3); } to { opacity: 1; transform: none; filter: none; } }
@keyframes batzoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes batcap { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; letter-spacing: .28em; } }
@media (prefers-reduced-motion: reduce) { .card.bat, .bat-fig img { animation: none; } .bat-fig figcaption { animation: none; opacity: 1; } }
html.room-open dialog.panel:has(.card.bat), dialog.panel:has(.card.bat) { margin: auto; }
.brand, .bar-brand { gap: 0; }
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { letter-spacing: -.02em; }
.bat-fig figcaption { font-family: 'Pirata One', 'UnifrakturCook', 'Old English Text MT', serif; font-weight: 400; text-transform: none; letter-spacing: .02em; font-size: clamp(38px, 5vw, 52px); animation-name: batcap2; }
@keyframes batcap2 { from { opacity: 0; letter-spacing: .12em; } to { opacity: 1; letter-spacing: .02em; } }

/* handwritten letter on natural yellowed paper */
.card.letter { max-width: 540px; padding: 30px 34px 34px 58px; border-radius: 3px; color: #1f2a4a;
  background:
    linear-gradient(90deg, transparent 44px, rgba(190, 80, 70, .35) 44px 45px, transparent 45px),
    repeating-linear-gradient(transparent 0 31px, rgba(90, 120, 150, .28) 31px 32px),
    radial-gradient(120% 100% at 20% 0, rgba(255, 244, 190, .55), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(170, 120, 40, .28), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .12 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    #efdc9f;
  box-shadow: 0 1px 2px rgba(60, 40, 10, .3), 0 24px 50px -10px rgba(40, 25, 5, .55), inset 0 0 60px rgba(150, 100, 30, .28); }
.card.letter h2 { font: 600 34px/32px 'Kalam', 'Segoe Script', 'Bradley Hand', cursive; color: #1f2a4a; margin: 6px 0 0; transform: rotate(-.8deg); }
.card.letter .env { margin: 16px 0 14px; transform: scale(.82); transform-origin: left center; }
.card.letter .letter-body { font: 500 23px/32px 'Kalam', 'Segoe Script', 'Bradley Hand', cursive; color: #1f2a4a; }
.card.letter .letter-body p { margin: 0 0 32px; transform: rotate(-.35deg); }
.card.letter .letter-body p:nth-child(even) { transform: rotate(.3deg) translateX(3px); }
.card.letter .letter-body .sig { font-weight: 600; font-size: 28px; text-align: right; transform: rotate(-2deg); margin: 0; }
.card.letter .close { color: #3a2a10; }
@media (max-width: 760px) { .card.letter { padding: 24px 20px 28px 46px; } .card.letter .letter-body { font-size: 21px; } }
.card.letter .env { display: none; }
.card.letter h2 { margin-bottom: 32px; }

/* red rubber stamp */
.card.letter .stamp { position: absolute; top: 26px; right: 92px; transform: rotate(-9deg); pointer-events: none; z-index: 2; }
.card.letter .stamp span { display: block; padding: 6px 16px 10px; border: 3px solid #b3261e; border-radius: 6px; outline: 1.5px solid #b3261e; outline-offset: 3px; color: #b3261e; font: 600 34px/1.25 'Hind', 'Noto Sans Devanagari', 'Nirmala UI', sans-serif; letter-spacing: .02em; opacity: .82; mix-blend-mode: multiply;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.2 1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") center / 220px 120px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.2 1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") center / 220px 120px;
  animation: stampin .5s .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes stampin { from { opacity: 0; transform: scale(1.7); } to { opacity: .82; transform: none; } }
.card.letter h2 { margin-top: 70px; }
@media (prefers-reduced-motion: reduce) { .card.letter .stamp span { animation: none; } }
.card.letter .letter-body { font-weight: 400; font-size: 19px; line-height: 32px; }
.card.letter h2 { font-weight: 400; font-size: 30px; }
.card.letter .letter-body .sig { font-size: 24px; }
@media (max-width: 760px) { .card.letter .letter-body { font-size: 17.5px; } }
.card.letter .letter-body p { margin: 0; }
.card.letter h2 { margin: 52px 0 32px; }
.card.letter { padding-bottom: 26px; }
.card.letter .letter-body p { margin: 0 0 14px; }
.card.letter h2 { margin: 66px 0 20px; }
/* no orphans: balance short blocks, avoid single-word last lines elsewhere */
.foot p, .foot small, h1, h2, h3, .hero-sub, .peek, .lede, .card h2, .letter-body p, .f-body .prob { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.foot .brand + p, .foot p { max-width: 24ch; }
.foot p { max-width: none; }
.foot p .ln { display: block; white-space: nowrap; }
@media (max-width: 420px) { .foot p .ln { white-space: normal; } }
#hero h1 .pv { color: var(--accent); font-style: italic; text-underline-offset: .12em; text-decoration-thickness: 3px; }
#hero h1 .pv:hover, #hero h1 .pv[aria-expanded="true"] { color: var(--accent-d); }
#hero h1 .pcard { font: 400 16px/1.45 var(--f-b); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--text-2); }
#hero h1 { max-width: none; font-size: clamp(34px, 5vw, 68px); }
#hero h1 .ln { display: block; }
#hero h1 > .ln .pvw { margin-right: -.07em; }
@media (max-width: 520px) { #hero h1 .ln { white-space: normal; } }
.hi { font-family: 'Hind', 'Noto Sans Devanagari', 'Nirmala UI', sans-serif; font-weight: 600; font-size: 1.08em; letter-spacing: 0; }
.hero-sub.kw { text-align: center; }
.hero-sub.kw .sep { color: var(--text-2); opacity: .5; font-weight: 300; margin: 0 .55em; }
.hero-sub.kw { text-wrap: nowrap; max-width: none; }
.hero-sub.kw .pv { white-space: nowrap; }
@media (max-width: 640px) { .hero-sub.kw { text-wrap: balance; } .hero-sub.kw .sep { margin: 0 .35em; } }

/* responsive hover bubbles */
.pcard.up { top: auto; bottom: calc(100% + 12px); transform: translateY(-6px); }
.pvw.open .pcard.up { transform: none; }
.pcard { max-width: calc(100vw - 24px); }
@media (pointer: coarse) { .pv { padding: 8px 2px; margin: -8px -2px; } }
@media (max-width: 520px) { #hero h1 .pcard { font-size: 15px; } .pcard { padding: var(--s-3) var(--s-4); } }
@media (max-width: 640px) { .hero-sub.kw { display: flex; flex-direction: column; align-items: center; gap: 10px; } .hero-sub.kw .sep { display: none; } .hero-sub.kw .pvw { display: block; } }
.pcard { white-space: normal; text-wrap: pretty; }
.hero-sub.kw .pcard { text-wrap: pretty; white-space: normal; }

/* accent roles swapped: the bright accent is for large text, a lighter tint of it for underlines */
:root { --accent-l: color-mix(in srgb, var(--accent-d) 50%, var(--bg)); }
.pv, .link, .ll { text-decoration-color: var(--accent-l); }
.link:hover, .ll:hover, .ll[aria-current="true"], .pv:hover, .pv[aria-expanded="true"] { text-decoration-color: var(--accent-d); }
#contact h2 u { text-decoration-color: var(--accent-l); }
.pv:hover, .pv[aria-expanded="true"] { color: var(--accent-d); }
#hero h1 .pv, #hero h1 .pv:hover, #hero h1 .pv[aria-expanded="true"] { color: var(--accent-d); }
#hero h1 em { color: var(--accent-d); }
#bar .ll { text-decoration-color: var(--accent-l); }

/* ===== small screens: hamburger + full-width menu sheet (desktop untouched) ===== */
.mbtn { display: none; }
#msheet { display: none; }
@media (max-width: 760px) {
  .mbtn { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--text); -webkit-tap-highlight-color: transparent; }
  .mbtn i { display: block; width: 24px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 320ms cubic-bezier(.2, .8, .2, 1), opacity 200ms; }
  .mbtn.on i:nth-child(1) { transform: translateY(8px) rotate(45deg); } .mbtn.on i:nth-child(2) { opacity: 0; } .mbtn.on i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .mbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
  #nav .mbtn { position: absolute; top: calc(var(--s-5) - 6px); right: calc(var(--gutter) - 10px); }
  #nav .brand { min-height: 44px; display: inline-flex; align-items: center; }
  #bar nav { display: none; }
  #bar .bar-in { justify-content: space-between; }
  #bar .bar-brand { display: inline-flex; }
  #bar .mbtn { margin-right: -10px; }
  #msheet { display: block; position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, #120d0a 52%, transparent); opacity: 0; transition: opacity 300ms ease; overscroll-behavior: contain; }
  #msheet[hidden] { display: none; }
  #msheet.on { opacity: 1; }
  .ms-in { background: var(--bg); color: var(--text); padding: var(--s-5) var(--gutter) var(--s-6); border-bottom: 1px solid color-mix(in srgb, var(--text) 45%, transparent); border-radius: 0 0 22px 22px; transform: translateY(-104%); transition: transform 420ms cubic-bezier(.2, .8, .2, 1); max-height: 100svh; overflow-y: auto; }
  #msheet.on .ms-in { transform: none; }
  .ms-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
  .ms-top .mbtn { margin-right: -10px; }
  .ms-top .brand { font-size: 32px; min-height: 44px; display: inline-flex; align-items: center; }
  .ms-in nav { display: grid; }
  .ms-in nav a, .ms-in nav button { display: flex; align-items: baseline; gap: 16px; min-height: 64px; padding: 14px 0; border: 0; border-top: 1px solid var(--line-soft); background: none; color: var(--text); font: 600 clamp(30px, 9vw, 40px)/1.1 var(--f-b); letter-spacing: -.03em; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; opacity: 0; transform: translateY(8px); transition: opacity 360ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1), color 160ms; }
  .ms-in nav b { font: 500 13px/1 var(--f-b); letter-spacing: .04em; color: var(--text-2); min-width: 22px; font-variant-numeric: tabular-nums; }
  #msheet.on .ms-in nav > * { opacity: 1; transform: none; }
  #msheet.on .ms-in nav > :nth-child(1) { transition-delay: 120ms; } #msheet.on .ms-in nav > :nth-child(2) { transition-delay: 170ms; } #msheet.on .ms-in nav > :nth-child(3) { transition-delay: 220ms; } #msheet.on .ms-in nav > :nth-child(4) { transition-delay: 270ms; }
  .ms-in nav a:active, .ms-in nav button:active { color: var(--accent); }
  .ms-in nav > :last-child { border-bottom: 1px solid var(--line-soft); }
  .ms-in > p { margin: var(--s-4) 0 0; font: 400 15px/1.4 var(--f-b); color: var(--text-2); }
  html.menu-open { overflow: hidden; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { #msheet, .ms-in, .ms-in nav > *, .mbtn i { transition: none; } }

/* ===== phones: the desk (touch devices only) ===== */
@media (pointer: coarse) {
  .room { touch-action: pan-y; }
  .cord::after { content: ''; position: absolute; inset: 0 -14px; }
  .hs:hover { background: transparent; box-shadow: none; }
  .hs.peek, .hs.peek:hover { background: radial-gradient(ellipse at 50% 50%, rgba(255, 233, 196, .2), rgba(255, 233, 196, .04) 70%); box-shadow: 0 0 0 1.5px rgba(255, 226, 172, .7), 0 0 34px rgba(255, 196, 120, .34); animation: peekp 1.1s ease-in-out infinite; }
  @keyframes peekp { 50% { box-shadow: 0 0 0 2.5px rgba(255, 226, 172, .95), 0 0 46px rgba(255, 196, 120, .5); } }
  .room-hint { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; max-width: calc(100% - 24px); padding: 10px 16px; }
  .room-hint .hand { position: relative; flex: none; width: 34px; height: 14px; }
  .room-hint .hand::before { content: ''; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fbf3e6; box-shadow: 0 0 0 5px rgba(251, 243, 230, .22); animation: handslide 1.8s ease-in-out infinite; }
  @keyframes handslide { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 75% { transform: translateX(22px); opacity: 1; } 100% { transform: translateX(22px); opacity: 0; } }
  .room-find { position: absolute; z-index: 8; top: 12px; right: 12px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(251, 243, 230, .85); background: rgba(24, 17, 12, .72); color: #fbf3e6; font: 600 13px var(--f-b); backdrop-filter: blur(6px); -webkit-tap-highlight-color: transparent; }
  html.room-open .room-find { display: none; }
}
@media (pointer: fine) { .room-find { display: none; } }
@media (pointer: coarse) and (prefers-reduced-motion: reduce) { .hs.peek, .room-hint .hand::before { animation: none; } .room-hint .hand::before { opacity: 1; } }

/* ===== phones: everything left aligned, project sheets sized to their content ===== */
@media (max-width: 760px) {
  .hero-grid { justify-items: start; text-align: left; }
  .hero-grid > div { align-items: flex-start; }
  #hero h1 { margin-inline: 0; max-width: none; }
  .hero-sub, .peek { margin-inline: 0; text-align: left; }
  .hero-sub.kw { text-align: left; align-items: flex-start; }
  #hero .eyebrow, .sec-head .eyebrow, #about .eyebrow, #contact .eyebrow { justify-content: flex-start; text-align: left; }
  .cta, .facts { justify-content: flex-start; }
  .sec-head { text-align: left; }
  .sec-head .h2, .sec-head .lede, .about-intro .h2 { margin-inline: 0; }
  .about-intro { text-align: left; justify-items: start; }
  .about-intro .txt { text-align: left; max-width: none; }
  .scene-hint, .objlist { justify-content: flex-start; text-align: left; }
  .skills h3, .xp-cta { text-align: left; }
  .contact-grid { text-align: left; justify-items: start; }
  #contact .lede { margin-inline: 0; }
  .contact-actions { justify-content: flex-start; }
  .contact-actions small { text-align: left; }
  .pad.pad-on .pad-ui { justify-content: flex-start; justify-self: start; }
  .pad.pad-on .pad-opts { justify-self: start; }
  .foot .brand + p, .foot p { max-width: none; }
  .pad.pad-on .folder .f-body h3 { font-size: clamp(22px, 6.6vw, 26px); line-height: 1.15; }
  .pad.pad-on .folder .f-body { padding: var(--s-3) var(--s-5) var(--s-4); }
  .pad.pad-on .folder .f-head { height: 64px; padding-top: 26px; }
  .pad.pad-on .folder { overflow: hidden; }
}
@media (max-width: 760px) { .pad.pad-on .folder .f-meta { margin-top: var(--s-4); } }

/* ===== smoother motion: the page-turn shade is its own layer; no live blur over the moving room on phones ===== */
.folder::after { content: none; }
.folder > .dim { position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: #1b1511; opacity: 0; pointer-events: none; will-change: opacity; }
@media (pointer: coarse) {
  .room-tip, .room-hint, .room-find, .room-back { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .room-tip, .room-find, .room-back { background: rgba(24, 17, 12, .88); }
  .room-hint { background: rgba(24, 17, 12, .72); }
  .room, .rc { transform: translateZ(0); }
}

/* ===== paper cards keep their own ink: the night accent is a light tint and vanishes on cream ===== */
html[data-theme="night"] .card, html[data-theme="night"] .pg { --accent: var(--coral-700); --accent-d: var(--coral-500); }
dialog.panel, dialog.panel .card { outline: none; }
dialog.panel .card:focus-visible { outline: none; }

/* ===== movie shelf on phones: pages are sized to the screen so nothing spills ===== */
@media (max-width: 760px) {
  .card:has([data-book]) { padding: var(--s-4) var(--s-4) var(--s-3); }
  .card:has([data-book]) .book { width: 100%; height: clamp(300px, calc(100svh - 290px), 520px); margin-block: var(--s-2); }
  .card:has([data-book]) .pg { padding: var(--s-4) var(--s-4) var(--s-3); overflow: hidden; }
  .card:has([data-book]) .pg .poster { height: clamp(120px, calc(100svh - 470px), 280px); }
  .card:has([data-book]) .pg h3 { font-size: 24px; margin-top: var(--s-2); }
  .card:has([data-book]) .pg .line { font-size: 15px; max-width: none; margin-bottom: var(--s-2); }
  .card:has([data-book]) .pg.cover h3 { font-size: 28px; }
}
@media (max-width: 760px) and (max-height: 640px) { .card:has([data-book]) .pg .fn { display: none; } }
@media (max-width: 760px) {
  dialog.panel:has([data-book]) { width: 100vw; margin: auto 0 0; }
  .book-nav { flex-wrap: nowrap; } .book-nav .btn { white-space: nowrap; padding: 0 var(--s-3); } .book-nav span { white-space: nowrap; text-align: center; }
}
@media (max-width: 760px) { .card:has([data-book]) { width: 100%; } }

.win .mail, .wc .mail { display: inline-block; margin-top: 4px; font: 600 clamp(18px, 5.4vw, 26px)/1.25 var(--f-b); letter-spacing: -.01em; color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-l, var(--accent)); text-decoration-thickness: 2px; text-underline-offset: 5px; overflow-wrap: anywhere; }

/* ===== contact: hover the heading and an iced black coffee drifts in behind it ===== */
#contact { position: relative; overflow: hidden; isolation: isolate; }
#contact .wrap { position: relative; z-index: 1; }
#contact-h { display: inline-block; position: relative; cursor: default; }
.cof-bg { position: absolute; z-index: -1; left: 62%; top: 50%; width: 210px; height: auto; max-width: none; translate: -50% -50%; opacity: 0; pointer-events: none; user-select: none; transition: opacity 700ms ease; }
#contact:has(#contact-h:hover) .cof-bg, #contact:has(#contact-h:focus-visible) .cof-bg { opacity: .13; }
html[data-theme="night"] #contact:has(#contact-h:hover) .cof-bg, html[data-theme="night"] #contact:has(#contact-h:focus-visible) .cof-bg { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .cof-bg { transition: opacity 300ms; } }
@media (max-width: 760px) { .cof-bg { left: 70%; width: 150px; } }

@media (pointer: fine) { .room-hint { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } .room-hint .lk { flex: none; opacity: .9; } .room-hint .lk-d { animation: lkd 2.4s ease-in-out infinite; } }
@keyframes lkd { 0%, 100% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
@media (prefers-reduced-motion: reduce) { .room-hint .lk-d { animation: none; } }
.contact-grid > div:first-child { position: relative; }

.wb .x { display: inline-flex; align-items: center; justify-content: center; width: 44px; padding: 0; border-radius: 50%; }

/* pop-up windows: spiral notebook page, like the Projects pad */
.win-in { background: linear-gradient(90deg, transparent 54px, rgba(190, 80, 70, .3) 54px 55px, transparent 55px), repeating-linear-gradient(transparent 0 33px, rgba(90, 120, 150, .2) 33px 34px), #fffaf0; border-radius: 4px var(--r-m) var(--r-m) 4px; }
.wb { background: #fffaf0; padding: 30px var(--s-4) 0 72px; position: sticky; box-shadow: 0 10px 10px -8px rgba(48, 40, 34, .12); }
.wb::before { content: ''; position: absolute; left: 6%; right: 6%; top: 2px; height: 24px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'%3E%3Crect x='6' y='1.5' width='8' height='21' rx='4' fill='none' stroke='%23423c38' stroke-width='2.2'/%3E%3Cpath d='M8 4.5v13' stroke='%23ffffff' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") round no-repeat; background-position: left center; background-size: 20px 24px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); }
.wb b { opacity: 0; position: absolute; pointer-events: none; }
.wb .x { position: absolute; top: 28px; right: 10px; }
.wc { padding: var(--s-4) var(--s-6) var(--s-6) 72px; }
@media (max-width: 760px) { .wb { padding-left: 62px; } .wc { padding: var(--s-3) var(--s-4) var(--s-5) 62px; } .win-in { background-position: -10px 0, 0 0, 0 0; } }

/* small dark poster pinned to the wall: creased, rolled at the bottom, stirred by a draught */
.frm { position: absolute; left: 0; top: 0; width: 304px; height: 448px; transform-origin: 0 0; display: none; filter: brightness(.85) saturate(.9) sepia(.08); }
.frm-in { position: absolute; inset: 0 0 26px 0; box-sizing: border-box; padding: 54px 26px 0; display: flex; flex-direction: column; align-items: flex-start; color: #ecebe6; transform-origin: 50% 0; animation: pw-r 6.3s ease-in-out infinite, pw-s 8.7s ease-in-out infinite -2s, pw-y 5.1s ease-in-out infinite -1s;
  background: radial-gradient(120% 80% at 30% 0, #23262c, #121317 70%), #15161a; box-shadow: 0 10px 16px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .06); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.frm-in i { font: italic 500 24px/1 'Inter', system-ui, sans-serif; letter-spacing: .04em; color: #b9b6ac; }
.frm-in b { margin-top: 8px; font: italic 800 50px/.98 'Inter', system-ui, sans-serif; letter-spacing: -.01em; color: #f4f2ea; }
.frm-in u { display: block; width: 70px; height: 6px; margin: 24px 0 16px; background: #5fc2ad; text-decoration: none; }
.frm-in small { font: 600 13px 'Inter', system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #9a978d; }
.frm .fold { position: absolute; pointer-events: none; }
.frm .f1 { left: 0; right: 0; top: 33%; height: 14px; background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .35) 45%, rgba(255, 255, 255, .09) 55%, transparent); }
.frm .f2 { left: 0; right: 0; top: 66%; height: 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .3) 45%, rgba(255, 255, 255, .08) 55%, transparent); }
.frm .f3 { top: 0; bottom: 0; left: 52%; width: 12px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .28) 45%, rgba(255, 255, 255, .07) 55%, transparent); }
.frm .roll { position: absolute; left: -5px; right: -5px; bottom: 0; height: 40px; border-radius: 20px / 18px; transform-origin: 50% 0; animation: pr-x 6.3s ease-in-out infinite;
  background: linear-gradient(#0b0c0f 0, #2a2d34 18%, #565a63 42%, #1b1d22 78%, #090a0c 100%); box-shadow: 0 8px 12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); }
.frm .roll::before { content: ''; position: absolute; left: 4px; right: 4px; top: -12px; height: 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.frm .pin { position: absolute; top: 12px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0a08c, #b0402c 60%, #5e1c10); box-shadow: 0 3px 4px rgba(0, 0, 0, .5); z-index: 2; }
.frm .p1 { left: 14px; } .frm .p2 { right: 14px; }
@keyframes pw-r { 0%, 100% { rotate: -.35deg; } 50% { rotate: .75deg; } }
@keyframes pw-s { 0%, 100% { transform: skewX(-.35deg); } 50% { transform: skewX(.5deg); } }
@keyframes pw-y { 0%, 100% { scale: 1 1; } 50% { scale: 1 .996; } }
@keyframes pr-x { 0%, 100% { translate: -2px 0; rotate: -.3deg; } 50% { translate: 4px 0; rotate: .6deg; } }
@media (prefers-reduced-motion: reduce) { .frm-in, .frm .roll { animation: none; } }
html[data-theme="night"] .frm { filter: brightness(.6) saturate(.9) sepia(.12); }

/* sticky note drawn crisp over the photo so it stays sharp when you zoom in */
.stk { position: absolute; left: 0; top: 0; width: 320px; height: 376px; transform-origin: 0 0; display: none; box-sizing: border-box; padding: 78px 34px 20px 52px; background: linear-gradient(#f6cd82, #f1c070); box-shadow: -5px 6px 14px rgba(120, 60, 0, .35); filter: brightness(.98) saturate(.95); }
.stk p { margin: 0; font: 500 40px/1.28 'DejaVu Serif', Georgia, 'Times New Roman', serif; color: #8a5a22; opacity: .92; }
.stk .tape { position: absolute; left: 50%; top: -6px; width: 44px; height: 54px; margin-left: -22px; background: linear-gradient(90deg, #e9cf9a, #f6e4b8 50%, #dfc088); opacity: .95; box-shadow: 0 2px 3px rgba(0, 0, 0, .25); }
html[data-theme="night"] .stk { filter: brightness(.55) saturate(.9); }
.foot .hi { font-family: 'Hind', 'Noto Sans Devanagari', 'Nirmala UI', sans-serif; font-weight: 600; font-size: 1.08em; color: var(--text); letter-spacing: 0; }

/* hero scroll cue */
#hero { position: relative; }
.scrollcue { position: absolute; left: 50%; bottom: 30px; translate: -50% 0; display: none; width: 44px; height: 56px; align-items: center; justify-content: center; color: var(--text-2); opacity: 0; text-decoration: none; animation: cuein 900ms ease 1.4s forwards; transition: opacity 500ms ease; }
.scrollcue.gone { animation: none; opacity: 0 !important; pointer-events: none; }
.scrollcue .sc-dot { animation: scdot 2.2s ease-in-out infinite; }
@keyframes cuein { to { opacity: .6; } }
@keyframes scdot { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(9px); opacity: 0; } 100% { transform: translateY(9px); opacity: 0; } }
@media (min-width: 761px) { .scrollcue { display: flex; } }
@media (prefers-reduced-motion: reduce) { .scrollcue { animation: none; opacity: .55; } .scrollcue .sc-dot { animation: none; } }

/* project status summary */
.status-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 10px; max-width: 520px; }
.status-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); font: 500 17px/1.3 var(--f-b); color: var(--text); }
.status-list b { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--f-b); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.status-list b::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #4fae7b; box-shadow: 0 0 0 3px rgba(79, 174, 123, .22); }
.status-list { margin-inline: auto; width: min(520px, 100%); }

/* team-radio card: F1 broadcast graphics language (slanted italic caps, bold bar), warm charcoal + site coral */
.card.f1 { background: #17151a; color: #f6efe4; border-radius: 6px; padding: 34px 30px 26px; max-width: 520px; box-shadow: 0 30px 60px -12px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06); position: relative; overflow: hidden; }
.card.f1::before { content: ''; position: absolute; left: -10%; right: -10%; top: 0; height: 10px; background: var(--coral-700, #c9482b); transform: skewX(-24deg); }
.card.f1 .close { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); }
.card.f1 .rad { display: flex; align-items: flex-end; gap: 5px; height: 26px; margin-top: 8px; }
.card.f1 .rad-t { margin-right: 10px; align-self: center; font: italic 700 13px/1 var(--f-b); letter-spacing: .18em; text-transform: uppercase; color: #ff8a67; }
.card.f1 .rad i { width: 4px; border-radius: 1px; background: #ff8a67; height: 30%; transform: skewX(-18deg); animation: radb 1.15s ease-in-out infinite; }
.card.f1 .rad i:nth-child(3) { animation-delay: -.2s; } .card.f1 .rad i:nth-child(4) { animation-delay: -.45s; } .card.f1 .rad i:nth-child(5) { animation-delay: -.7s; } .card.f1 .rad i:nth-child(6) { animation-delay: -.3s; } .card.f1 .rad i:nth-child(7) { animation-delay: -.55s; } .card.f1 .rad i:nth-child(8) { animation-delay: -.1s; }
@keyframes radb { 0%, 100% { height: 22%; } 50% { height: 100%; } }
.card.f1 .rad-q { margin: 26px 0 0; padding-top: 18px; border-top: 3px solid #ff8a67; font: italic 800 clamp(34px, 8vw, 54px)/1.02 var(--f-b); letter-spacing: -.01em; text-transform: uppercase; color: #fff; text-align: right; }
.card.f1 .rad-w { margin: 18px 0 0; text-align: right; font: italic 600 13px var(--f-b); letter-spacing: .2em; text-transform: uppercase; color: #b9b0a2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .card.f1 .rad i { animation: none; height: 60%; } }
/* team-radio card opens dead centre on every screen */
html.room-open dialog.panel:has(.card.f1), dialog.panel:has(.card.f1) { margin: auto; width: min(520px, calc(100vw - 32px)); }
dialog.panel[open]:has(.card.f1) { animation: fade 350ms both; }
dialog.panel .card.f1 { border-radius: 6px; max-height: none; }

.tldr { margin: var(--s-5) auto 0; width: min(520px, 100%); font: 600 22px/1.2 var(--f-b); letter-spacing: -.01em; color: var(--text); text-align: left; }
.tldr + .status-list { margin-top: var(--s-2); }
.tldr { font: 500 15px/1.2 var(--f-b); letter-spacing: .02em; color: var(--text-2); margin-top: var(--s-4); }

.crux { margin: var(--s-4) 0 0; text-align: center; }
.crux .ll { font: 500 17px var(--f-b); color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-d); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.crux .ll:hover { color: var(--accent); text-decoration-color: var(--accent); }
.crux .ll:active { color: var(--accent); }
.wc .status-list { margin: var(--s-3) 0 var(--s-2); width: 100%; max-width: none; }
.wc .status-list li { color: var(--ink); }
.wc .status-list b { color: var(--n-700); }
/* "I am Batman." sits at the top of the photo */
.bat-fig figcaption { top: clamp(26px, 5vw, 44px); bottom: auto; }
.bat-fig::after { background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.5)), linear-gradient(rgba(0,0,0,.7), transparent 32%), linear-gradient(transparent 82%, rgba(0,0,0,.4)); }

/* one cross, everywhere: same drawn icon, perfectly centred in a 44px round target, same inset from the corner */
.close, .wb .x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; line-height: 0; font-size: 0; }
.close svg, .wb .x svg { display: block; width: 16px; height: 16px; flex: none; }
.close { top: 14px; right: 14px; }
.card.rcpt .close, .card.bat .close { top: 14px; right: 14px; }
.wb .x { top: 24px; right: 14px; }
dialog#desk .close { top: 44px; right: 14px; }

/* room greeting bubble */
.say { position: absolute; z-index: 7; width: max-content; max-width: min(300px, calc(100% - 24px)); padding: 12px 16px; border-radius: 14px; background: #fbf3e6; color: #2a2118; font: 500 15px/1.35 var(--f-b); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); transform: translate(-50%, calc(-100% + 8px)) scale(.94); transform-origin: 50% 100%; opacity: 0; pointer-events: none; transition: opacity 600ms ease, transform 700ms cubic-bezier(.2, .8, .2, 1); }
.say b { font-weight: 700; }
.say::after { content: ''; position: absolute; left: calc(50% + var(--tx, 0px)); bottom: -8px; width: 16px; height: 16px; margin-left: -8px; background: #fbf3e6; transform: rotate(45deg); border-radius: 0 0 4px 0; }
.say.on { opacity: 1; transform: translate(-50%, -100%) scale(1); animation: saybob 3.2s ease-in-out 1s infinite; }
@keyframes saybob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .say { transition: opacity 300ms; } .say.on { animation: none; } }

/* sticky notes pop-up: two real notes, taped up, slightly crooked, handwritten */
.card.note { background: none; box-shadow: none; max-width: 400px; padding: 30px 22px 22px; overflow: visible; display: grid; gap: 30px; }
.card.note .close { background: rgba(0, 0, 0, .55); color: #fff; border-color: rgba(255, 255, 255, .25); }
.sn { position: relative; padding: 38px 28px 20px; border-radius: 2px 2px 2px 14px / 2px 2px 2px 20px; transform: rotate(-1.4deg); background: linear-gradient(172deg, #fff2a8 0%, #fddc5c 100%); box-shadow: 0 1px 1px rgba(80, 50, 0, .18), 0 16px 26px -10px rgba(40, 25, 0, .55); }
.sn2 { transform: rotate(1.2deg) translateX(8px); background: linear-gradient(172deg, #ffd9b0 0%, #ffb978 100%); }
.sn::after { content: ''; position: absolute; right: 0; bottom: 0; width: 38px; height: 38px; background: linear-gradient(315deg, rgba(0, 0, 0, .0) 50%, rgba(255, 255, 255, .0) 50%); border-radius: 0 0 2px 0; pointer-events: none; }
.sn::before { content: ''; position: absolute; inset: auto 0 0 auto; width: 52%; height: 14px; background: radial-gradient(60% 100% at 50% 100%, rgba(80, 50, 0, .18), transparent); }
.sn .tape { position: absolute; left: 50%; top: -13px; width: 92px; height: 28px; margin-left: -46px; transform: rotate(-3deg); background: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .72) 50%, rgba(255, 255, 255, .5)); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 100% 0, 96% 50%, 100% 100%, 8% 100%, 0 90%, 3% 50%); }
.sn .nt { font: 400 clamp(26px, 6vw, 31px)/1.2 'Kalam', 'Segoe Script', 'Bradley Hand', cursive; color: #3a2a12; margin: 0 0 14px; }
.sn .nt s { background-image: linear-gradient(transparent 44%, #c42b22 44% 54%, transparent 54%); }
.sn .act { margin: 0; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(60, 35, 0, .09); color: #4a3516; font: 600 13px var(--f-b); cursor: pointer; transition: background .2s; }
.sn .act:hover { background: rgba(60, 35, 0, .17); }
.card.note .close { top: -6px; right: -6px; }

/* greeting bubble: quiet, small, fades on its own */
.say { max-width: min(230px, calc(100% - 24px)); padding: 8px 12px; border-radius: 12px; background: rgba(251, 243, 230, .88); font: 500 13px/1.35 var(--f-b); box-shadow: 0 6px 16px rgba(0, 0, 0, .22); transition: opacity 1400ms ease, transform 1400ms cubic-bezier(.2, .8, .2, 1); }
.say::after { width: 12px; height: 12px; margin-left: -6px; bottom: -6px; background: rgba(251, 243, 230, .88); }
.say.on { animation: none; opacity: .92; }

/* notebook pop-up v2: punched holes with real wire coils, text sitting on the ruled lines */
.win-in { background: linear-gradient(90deg, transparent 54px, rgba(190, 80, 70, .3) 54px 55px, transparent 55px), repeating-linear-gradient(transparent 0 33px, rgba(90, 120, 150, .22) 33px 34px), #fffaf0; }
.wb { height: 68px; box-sizing: border-box; padding: 0; background: linear-gradient(90deg, transparent 54px, rgba(190, 80, 70, .3) 54px 55px, transparent 55px), repeating-linear-gradient(transparent 0 33px, rgba(90, 120, 150, .22) 33px 34px), #fffaf0; box-shadow: none; }
.wb::before { left: 22px; right: 22px; top: -3px; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='40' viewBox='0 0 24 40'%3E%3Cdefs%3E%3CradialGradient id='h' cx='50%25' cy='42%25' r='60%25'%3E%3Cstop offset='0' stop-color='%232b241f'/%3E%3Cstop offset='.7' stop-color='%234a4038'/%3E%3Cstop offset='1' stop-color='%238a7c6c'/%3E%3C/radialGradient%3E%3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%236d6a68'/%3E%3Cstop offset='.28' stop-color='%23f4f2ef'/%3E%3Cstop offset='.55' stop-color='%23a8a4a0'/%3E%3Cstop offset='1' stop-color='%234f4c4a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='12' cy='31' rx='5.2' ry='4.2' fill='url%28%23h%29'/%3E%3Cellipse cx='12' cy='31.8' rx='5.2' ry='4.2' fill='none' stroke='%23fffaf0' stroke-opacity='.55' stroke-width='.8'/%3E%3Cpath d='M3 27 C3 6 21 6 21 27 L21 30' fill='none' stroke='%23000' stroke-opacity='.22' stroke-width='3' stroke-linecap='round' transform='translate%281.2 2%29'/%3E%3Cpath d='M3.2 27 C3.2 5 20.8 5 20.8 27 L20.8 31.5' fill='none' stroke='url%28%23w%29' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M4.6 24 C5 10 11 8 13 8' fill='none' stroke='%23fff' stroke-opacity='.55' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left top; background-size: 24px 40px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.wc { padding: 0 var(--s-6) var(--s-6) 72px; }
.wc h1, .wc h2.t { font: 600 clamp(24px, 3vw, 30px)/34px var(--f-b); margin: 0; position: relative; top: 2px; }
.wc p { line-height: 34px; margin: 0 0 34px; position: relative; top: 6px; }
.wc .status-list, .wc .btn, .wc .cta { position: relative; }
.wc .mail { color: #e8431f; text-decoration-color: #ff8a67; }
@media (max-width: 760px) { .wc { padding: 0 var(--s-4) var(--s-5) 62px; } .wb { background-position: -10px 0, 0 0, 0 0; } .wb::before { left: 12px; right: 12px; } }
.wb::before { background-size: 30px 40px; left: 26px; right: 26px; }
.wc .mail { display: inline; margin: 0; line-height: 34px; font-size: clamp(18px, 5.4vw, 24px); }
/* TLDR rows sit on the ruled lines like the contact page */
.wc .status-list { margin: 0 0 34px; gap: 0; position: relative; top: 6px; }
.wc .status-list li { padding: 0; height: 34px; line-height: 34px; border-bottom: 0; font-size: 17px; }

/* pop-up notebook as a bottom sheet: one continuous paper, rises smoothly from the bottom */
dialog.win { width: min(760px, 100vw); max-width: 100vw; max-height: 88svh; margin: auto auto 0; padding: 0; overflow: visible; }
.win-in { display: flex; flex-direction: column; max-height: 88svh; overflow: hidden; border-radius: 18px 18px 0 0; border-bottom: 0; transform-origin: 50% 100%; animation: sheetUp 560ms cubic-bezier(.16, .84, .3, 1) both; box-shadow: 0 -18px 50px -12px rgba(30, 20, 12, .45);
  background: linear-gradient(90deg, transparent 54px, rgba(190, 80, 70, .3) 54px 55px, transparent 55px), #fffaf0; }
.wb { flex: none; background: linear-gradient(90deg, transparent 54px, rgba(190, 80, 70, .3) 54px 55px, transparent 55px), repeating-linear-gradient(transparent 0 33px, rgba(90, 120, 150, .22) 33px 34px); }
.wc { flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); background: linear-gradient(90deg, transparent 54px, rgba(190, 80, 70, .3) 54px 55px, transparent 55px), repeating-linear-gradient(transparent 0 33px, rgba(90, 120, 150, .22) 33px 34px); background-attachment: local; }
dialog.out .win { animation: sheetDown 260ms cubic-bezier(.4, 0, 1, 1) both; }
dialog.win::backdrop { transition: opacity 400ms ease; }
@keyframes sheetUp { from { transform: translateY(70%); opacity: 0; } 35% { opacity: 1; } to { transform: translateY(0); opacity: 1; } }
@keyframes sheetDown { to { transform: translateY(60%); opacity: 0; } }
@media (max-width: 760px) { .win-in { background-position: -10px 0, 0 0; } .wb, .wc { background-position: -10px 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .win-in { animation: fade 200ms both; } dialog.out .win { animation: fade 150ms reverse both; } }

/* sticky notes open in the centre */
html.room-open dialog.panel:has(.card.note), dialog.panel:has(.card.note) { margin: auto; width: min(460px, calc(100vw - 24px)); }
dialog.panel[open]:has(.card.note) { animation: fade 350ms both; }

/* rings stand proud of the paper (nothing behind them); closing folds the page up over the binding */
.win-in { overflow: visible; margin-top: 22px; }
.wb::before { top: -20px; }
.wc { border-radius: 0; }
dialog.out .win { animation: none; }
dialog.out .win .win-in { transform-origin: 50% 0; animation: pageFold 380ms cubic-bezier(.5, 0, .75, .4) both; }
@keyframes pageFold { 0% { transform: perspective(1400px) rotateX(0); filter: brightness(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: perspective(1400px) rotateX(105deg); filter: brightness(.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.out .win .win-in { animation: fade 150ms reverse both; } }

/* Batman card opens in the centre */
html.room-open dialog.panel:has(.card.bat), dialog.panel:has(.card.bat) { margin: auto; }
dialog.panel[open]:has(.card.bat) { animation: fade 350ms both; }

/* greeting: a typewritten slip, typed out line by line, pointing down at the turntable */
.say { width: max-content; max-width: min(268px, calc(100% - 24px)); padding: 14px 18px 16px; border-radius: 2px; background: #f8f2e4; color: #2b2622; font: 500 13px/1.65 'Courier New', ui-monospace, Menlo, Consolas, monospace; letter-spacing: .01em; box-shadow: 0 10px 22px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(80, 60, 40, .08); rotate: -1.6deg; transition: opacity 900ms ease, transform 900ms cubic-bezier(.2, .8, .2, 1); }
.say .ln { display: block; white-space: nowrap; clip-path: inset(0 100% 0 0); }
.say .ln:first-child { font-weight: 700; letter-spacing: .06em; }
.say .ln:last-child { color: #7a6a58; font-size: 12px; }
.say.on { animation: none; opacity: 1; }
.say.on .ln { animation: typeln 800ms steps(24, end) var(--d, 0s) both; }
@keyframes typeln { to { clip-path: inset(0 0 0 0); } }
.say::after { display: none; }
.say::before { content: ''; position: absolute; left: calc(50% + var(--tx, 0px) - 6px); top: 100%; width: 44px; height: 46px; margin-top: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='46' viewBox='0 0 44 46'%3E%3Cpath d='M10 3 C 2 16%2C 8 30%2C 28 38' fill='none' stroke='%23f6eedd' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M19 40 L29 38.5 L23 30' fill='none' stroke='%23f6eedd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; clip-path: none; opacity: .95; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .say .ln { clip-path: none; animation: none !important; } }

/* ===== movies & series: a vintage TV ===== */
html.room-open dialog.panel:has(.card.tv), dialog.panel:has(.card.tv) { margin: auto; width: min(660px, calc(100vw - 20px)); max-width: none; }
dialog.panel[open]:has(.card.tv) { animation: fade 300ms both; }
.card.tv { background: none; box-shadow: none; padding: 34px 10px 18px; overflow: visible; max-height: none; display: grid; justify-items: center; gap: 14px; }
.card.tv .close { background: rgba(0, 0, 0, .55); color: #fff; border-color: rgba(255, 255, 255, .25); top: 0; right: 0; }
.tv-set { position: relative; width: 100%; outline: none; animation: tvIn 700ms cubic-bezier(.2, .9, .25, 1) both; }
.tv-set:focus-visible .tv-body { box-shadow: 0 0 0 3px rgba(255, 138, 103, .6), 0 30px 60px -14px rgba(0, 0, 0, .7); }
@keyframes tvIn { from { transform: translateY(26px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.tv-ant { position: absolute; left: 50%; top: -34px; width: 120px; height: 40px; margin-left: -60px; z-index: 0; }
.tv-ant i { position: absolute; bottom: 0; left: 50%; width: 3px; height: 44px; background: linear-gradient(90deg, #8d8a84, #e7e3da, #6c6a66); border-radius: 2px; transform-origin: 50% 100%; }
.tv-ant i:first-child { transform: rotate(-32deg); } .tv-ant i:last-child { transform: rotate(28deg); }
.tv-body { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 112px; gap: 14px; padding: 22px; border-radius: 26px; background: repeating-linear-gradient(92deg, rgba(0, 0, 0, .05) 0 2px, rgba(255, 255, 255, 0) 2px 7px), linear-gradient(180deg, #8a5532, #6a3f23 60%, #55321c); box-shadow: 0 30px 60px -14px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 220, 180, .25), inset 0 -3px 0 rgba(0, 0, 0, .3); }
.tv-bezel { padding: 14px; border-radius: 34px / 30px; background: #151311; box-shadow: inset 0 0 0 2px #2a2623, inset 0 6px 14px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 220, 180, .2); }
.tv-glass { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 9% / 11%; background: #050505; container-type: inline-size; isolation: isolate; box-shadow: inset 0 0 40px rgba(0, 0, 0, .9); }
.tv-glass.on { animation: crtOn 800ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes crtOn { 0% { transform: scale(1, .005); filter: brightness(6); } 35% { transform: scale(1, .006); filter: brightness(6); } 70% { transform: scale(1, 1); filter: brightness(2.2); } 100% { transform: none; filter: none; } }
.tv-glass.chg > .tc.now { animation: vroll 560ms cubic-bezier(.3, .7, .2, 1) both; }
@keyframes vroll { 0% { transform: translateY(-38%) scaleY(1.25); filter: brightness(2.2) contrast(1.4); } 45% { transform: translateY(5%); filter: brightness(1.5); } 70% { transform: translateY(-1.5%); } 100% { transform: none; filter: none; } }
.tc { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 8cqw 9cqw 9cqw; opacity: 0; visibility: hidden; overflow: hidden; color: var(--fg, #fff); background: var(--bg, #222); font-family: var(--f-b); }
.tc.now { opacity: 1; visibility: visible; }
.tc-kind { margin: 0 0 1.4cqw; font: 600 2.7cqw/1 var(--f-b); letter-spacing: .22em; text-transform: uppercase; opacity: .85; position: relative; }
.tc-t { margin: 0; font: var(--tw, 800) var(--ts, 11cqw)/.95 var(--tf, var(--f-b)); letter-spacing: var(--tl, -.01em); text-transform: var(--tt, uppercase); position: relative; text-wrap: balance; }
.tc-by { margin: 2.6cqw 0 0; font: 500 2.8cqw/1.2 var(--f-b); opacity: .8; position: relative; }
.tc-line { margin: 2.4cqw 0 0; max-width: 78%; font: 400 2.9cqw/1.4 var(--f-b); opacity: .92; position: relative; }
.tc-art { position: absolute; inset: 0; pointer-events: none; }
.tc-art i { position: absolute; display: block; }
.tc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
/* one original title card per channel: palette, type and a simple motif of its own */
.tc-fight-club { --bg: #f0643c; --fg: #1a0f0b; --ts: 12.5cqw; --tl: -.04em; }
.tc-fight-club .tc-art i:nth-child(1) { left: -10%; top: -22%; width: 52%; height: 38%; background: #1a0f0b; border-radius: 12% 40% 12% 40%; transform: rotate(-14deg); }
.tc-fight-club .tc-art i:nth-child(2) { right: 8%; top: 12%; width: 22%; height: 22%; border: 1.6cqw solid #1a0f0b; border-radius: 50%; }
.tc-fight-club .tc-art i:nth-child(3) { left: 0; right: 0; top: 36%; height: 1.2cqw; background: #1a0f0b; opacity: .7; }
.tc-fight-club .tc-kind, .tc-fight-club .tc-by, .tc-fight-club .tc-line { color: #1a0f0b; }
.tc-scarface { --bg: radial-gradient(120% 90% at 70% 0%, #4a0f12, #0b0707 70%); --fg: #f2dca4; --tf: Georgia, 'Times New Roman', serif; --tw: 700; --ts: 13cqw; --tt: none; --tl: .01em; }
.tc-scarface .tc-art i:nth-child(1) { right: 10%; top: 8%; width: 30%; height: 30%; border: .8cqw solid #d8b45b; transform: rotate(45deg); }
.tc-scarface .tc-art i:nth-child(2) { right: 14%; top: 12%; width: 22%; height: 22%; border: .4cqw solid #d8b45b; transform: rotate(45deg); opacity: .6; }
.tc-scarface .tc-art i:nth-child(3) { left: 9%; right: 9%; top: 43%; height: .5cqw; background: #d8b45b; }
.tc-scarface .tc-t { color: #d8b45b; text-shadow: 0 .6cqw 0 #5a1a1a; }
.tc-rockstar { --bg: linear-gradient(160deg, #1c0b2e, #7a1b5d 60%, #f0457b); --fg: #fff; --ts: 14cqw; --tl: -.03em; }
.tc-rockstar .tc-art i:nth-child(1) { left: 12%; top: -4%; width: 4%; height: 62%; background: #fff; opacity: .9; transform: rotate(18deg); border-radius: 2cqw; box-shadow: 4cqw 0 0 #fff, 8cqw 0 0 #fff; opacity: .15; }
.tc-rockstar .tc-art i:nth-child(2) { right: 8%; top: 9%; width: 28%; height: 28%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe08a, #f0457b 70%); filter: blur(.4cqw); }
.tc-rockstar .tc-art i:nth-child(3) { left: 0; right: 0; top: 50%; height: 14%; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .5) 0 .3cqw, transparent .3cqw 2.4cqw); opacity: .35; }
.tc-tamasha { --bg: radial-gradient(70% 60% at 50% 0%, #ffd98a 0%, #a3191f 38%, #3b070b 100%); --fg: #fff3dc; --tf: Georgia, 'Times New Roman', serif; --tw: 700; --ts: 13cqw; --tt: none; --tl: .005em; }
.tc-tamasha .tc-art i:nth-child(1) { left: 0; top: 0; width: 22%; height: 100%; background: repeating-linear-gradient(90deg, #6d0d14 0 3cqw, #8e1119 3cqw 6cqw); clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%); opacity: .85; }
.tc-tamasha .tc-art i:nth-child(2) { right: 0; top: 0; width: 22%; height: 100%; background: repeating-linear-gradient(90deg, #8e1119 0 3cqw, #6d0d14 3cqw 6cqw); clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%); opacity: .85; }
.tc-tamasha .tc-art i:nth-child(3) { left: 38%; top: 14%; width: 24%; height: 24%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 200, .55), transparent 70%); }
.tc-good-will-hunting { --bg: #1d2b27; --fg: #eef3ea; --tf: 'Kalam', 'Segoe Print', cursive; --tw: 400; --ts: 12cqw; --tt: none; --tl: 0; }
.tc-good-will-hunting .tc-art { background: radial-gradient(90% 70% at 40% 20%, rgba(255, 255, 255, .08), transparent 70%); }
.tc-good-will-hunting .tc-art i:nth-child(1) { left: 46%; top: 8%; width: 36%; height: .5cqw; background: rgba(238, 243, 234, .5); box-shadow: 0 3.2cqw 0 rgba(238, 243, 234, .4), 0 6.4cqw 0 rgba(238, 243, 234, .3), 6cqw 9.6cqw 0 rgba(238, 243, 234, .35); border-radius: 1cqw; transform: rotate(-1.5deg); }
.tc-good-will-hunting .tc-art i:nth-child(2) { left: 9%; top: 8%; width: 18%; height: 18%; border: .6cqw solid rgba(238, 243, 234, .55); border-radius: 50%; border-right-color: transparent; transform: rotate(30deg); }
.tc-good-will-hunting .tc-art i:nth-child(3) { left: 14%; top: 24%; width: 12%; height: .5cqw; background: rgba(238, 243, 234, .5); transform: rotate(-24deg); }
.tc-mad-men { --bg: #e9d9b8; --fg: #1d2a2c; --ts: 11.5cqw; --tl: -.02em; }
.tc-mad-men .tc-art i:nth-child(1) { right: 6%; top: 0; width: 13%; height: 58%; background: #1d2a2c; }
.tc-mad-men .tc-art i:nth-child(2) { right: 6%; top: 44%; width: 13%; height: 13%; background: #d6561f; border-radius: 0 0 50% 50%; }
.tc-mad-men .tc-art i:nth-child(3) { right: 22%; top: 0; width: 9%; height: 36%; background: #2e7d78; }
.tc-suits { --bg: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 .3cqw, transparent .3cqw 3.2cqw), linear-gradient(180deg, #14223d, #0a1325); --fg: #eef2fa; --ts: 17cqw; --tl: .02em; }
.tc-suits .tc-art i:nth-child(1) { right: 12%; top: 0; width: 20%; height: 44%; background: #f4f6fb; clip-path: polygon(0 0, 100% 0, 50% 100%); opacity: .93; }
.tc-suits .tc-art i:nth-child(2) { right: 20.2%; top: 38%; width: 3.6%; height: 24%; background: #b3243a; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.tc-suits .tc-art i:nth-child(3) { left: 9%; right: 9%; top: 62%; height: .4cqw; background: #c8a85a; }
.tc-fleabag { --bg: #f4a6b8; --fg: #3b0d1d; --tf: Georgia, 'Times New Roman', serif; --tw: 700; --ts: 12cqw; --tt: none; --tl: -.01em; }
.tc-fleabag .tc-art i:nth-child(1) { right: 8%; top: 10%; width: 22%; height: 32%; background: #b3122f; border-radius: 12% 12% 4% 4%; box-shadow: inset 0 -3cqw 0 rgba(0, 0, 0, .18); }
.tc-fleabag .tc-art i:nth-child(2) { right: 10%; top: 38%; width: 18%; height: 12%; background: #8c0e25; border-radius: 3cqw; }
.tc-fleabag .tc-art i:nth-child(3) { left: 9%; top: 11%; width: 18%; height: 18%; border: .7cqw dashed #3b0d1d; border-radius: 50%; opacity: .5; }
.tc-fleabag .tc-kind, .tc-fleabag .tc-by, .tc-fleabag .tc-line, .tc-fight-club .tc-t { color: inherit; }
/* screen effects: static, scanlines, curve, glare, OSD */
.tv-snow { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; pointer-events: none; z-index: 3; mix-blend-mode: screen; }
.tv-lines { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px), radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.tv-glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, .13) 0 18%, transparent 34%), radial-gradient(60% 40% at 18% 8%, rgba(255, 255, 255, .1), transparent 70%); }
.tv-osd { position: absolute; right: 6cqw; top: 5cqw; z-index: 6; font: 700 4.4cqw/1 ui-monospace, Menlo, Consolas, monospace; color: #7dff9c; letter-spacing: .12em; text-shadow: 0 0 1.4cqw rgba(125, 255, 156, .8); opacity: 0; }
.tv-osd.osd-on { animation: osd 2.4s ease both; }
@keyframes osd { 0%, 8% { opacity: 0; } 14%, 70% { opacity: 1; } 100% { opacity: 0; } }
/* side panel: knobs, speaker grille, power LED */
.tv-side { display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; gap: 14px; padding: 10px 6px; border-radius: 16px; background: linear-gradient(180deg, #2b1a10, #1f120a); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 220, 180, .18); }
.tv-knob { position: relative; width: 62px; height: 62px; border: 0; padding: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a443d, #1b1816 70%); box-shadow: 0 4px 0 #0c0a09, 0 8px 12px rgba(0, 0, 0, .5), inset 0 0 0 3px #36312c; cursor: pointer; transition: transform 160ms ease; }
.tv-knob.small { width: 46px; height: 46px; }
.tv-knob:active { transform: translateY(2px) scale(.97); }
.tv-knob:focus-visible { outline: 2px solid #ff8a67; outline-offset: 3px; }
.tv-knob i { position: absolute; inset: 7px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #cfc7b8 0 8deg, #6d665c 8deg 18deg); transition: transform 560ms cubic-bezier(.3, 1.3, .4, 1); -webkit-mask: radial-gradient(circle, transparent 0 46%, #000 48%); mask: radial-gradient(circle, transparent 0 46%, #000 48%); }
.tv-knob::after { content: ''; position: absolute; left: 50%; top: 9px; width: 3px; height: 13px; margin-left: -1.5px; background: #ff8a67; border-radius: 2px; }
.tv-knob.small::after { top: 7px; height: 10px; }
.tv-grille { display: grid; gap: 5px; align-content: center; width: 100%; padding: 0 10px; }
.tv-grille i { display: block; height: 3px; border-radius: 2px; background: #0b0605; box-shadow: 0 1px 0 rgba(255, 220, 180, .14); }
.tv-led { width: 9px; height: 9px; border-radius: 50%; background: #ff5a3c; box-shadow: 0 0 8px 2px rgba(255, 90, 60, .7); animation: led 3s ease-in-out infinite; }
@keyframes led { 50% { opacity: .6; } }
.tv-legs { position: relative; z-index: 0; display: flex; justify-content: space-between; padding: 0 12%; margin-top: -4px; }
.tv-legs i { width: 16px; height: 24px; background: linear-gradient(90deg, #3c2515, #5a3820, #3c2515); border-radius: 0 0 6px 6px; transform: skewX(-6deg); }
.tv-legs i:last-child { transform: skewX(6deg); }
.tv-cap { margin: 0; color: #f3e7d6; font: 600 15px/1.3 var(--f-b); text-align: center; letter-spacing: .02em; }
.tv-dots { display: flex; gap: 8px; }
.tv-dots button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255, 240, 220, .6); background: none; cursor: pointer; position: relative; }
.tv-dots button::before { content: ''; position: absolute; inset: -14px -3px; }
.tv-dots button.now { background: #ff8a67; border-color: #ff8a67; transform: scale(1.15); }
@media (max-width: 560px) { .tv-body { grid-template-columns: 1fr 74px; padding: 14px; gap: 8px; border-radius: 20px; } .tv-bezel { padding: 8px; } .tv-knob { width: 48px; height: 48px; } .tv-knob.small { width: 38px; height: 38px; } .tv-knob i { inset: 5px; } .tv-ant { top: -28px; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .tv-set, .tv-glass.on, .tv-glass.chg > .tc.now { animation: none; } .tv-knob i { transition: none; } .tv-led { animation: none; } }
.tc-good-will-hunting .tc-art i:nth-child(2) { top: 5%; width: 12%; height: 12%; }
.tc-good-will-hunting .tc-art i:nth-child(3) { display: none; }
/* v2: each channel gets an original illustrated poster (SVG) instead of loose shapes */
.tc-art i { display: none !important; }
.tc-art svg { position: absolute; right: 6%; top: 6%; width: 44%; height: 62%; overflow: visible; filter: drop-shadow(0 1.4cqw 1.6cqw rgba(0, 0, 0, .28)); }
.tc-good-will-hunting .tc-art svg { right: 5%; top: 8%; width: 48%; }
.tc-scarface .tc-art svg, .tc-rockstar .tc-art svg { top: 4%; }
/* keep type and art apart: text column on the left, poster art on the right */
.tc { padding-right: 45cqw; }
.tc-t { font-size: min(var(--ts, 11cqw), 10.5cqw); }
.tc-line { max-width: none; }
.tc-art svg, .tc-good-will-hunting .tc-art svg, .tc-scarface .tc-art svg, .tc-rockstar .tc-art svg { right: 6%; left: auto; top: 12%; width: 36%; height: 70%; }

/* ===== movies & series: a shadow box of ticket stubs ===== */
html.room-open dialog.panel:has(.card.tbox), dialog.panel:has(.card.tbox) { margin: auto; width: min(600px, calc(100vw - 20px)); max-width: none; }
dialog.panel[open]:has(.card.tbox) { animation: fade 300ms both; }
.card.tbox { background: none; box-shadow: none; padding: 34px 6px 10px; overflow: visible; max-height: none; }
.card.tbox .close { background: rgba(0, 0, 0, .55); color: #fff; border-color: rgba(255, 255, 255, .25); top: 0; right: 0; }
.tb-frame { padding: 14px; border-radius: 6px; background: linear-gradient(145deg, #2a2420, #14110f); box-shadow: 0 34px 70px -16px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 230, 200, .18), inset 0 0 0 1px rgba(0, 0, 0, .6); animation: tbIn 640ms cubic-bezier(.2, .9, .25, 1) both; }
@keyframes tbIn { from { transform: translateY(22px) scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }
.tb-in { position: relative; aspect-ratio: 1 / 1.12; overflow: hidden; container-type: inline-size; isolation: isolate; border-radius: 2px; color: #f3e7d6;
  background: radial-gradient(90% 60% at 30% 12%, rgba(255, 190, 140, .09), transparent 70%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px), #17141a; box-shadow: inset 0 0 40px rgba(0, 0, 0, .85), inset 0 8px 18px rgba(0, 0, 0, .6); }
.tb-title { position: absolute; left: 7cqw; top: 6cqw; margin: 0; display: flex; gap: 1.2cqw; font: 800 15cqw/1 var(--f-b); letter-spacing: -.02em; }
.tb-title span { display: block; color: #f3e7d6; text-shadow: 0 .5cqw 0 #8f8473, 0 1.3cqw 1.6cqw rgba(0, 0, 0, .7); transform: rotate(calc((var(--i) - 2.5) * 1.6deg)) translateY(calc(var(--i) * -.3cqw)); animation: tbLetter 700ms cubic-bezier(.2, 1.2, .3, 1) both; animation-delay: calc(var(--i) * 70ms + 200ms); }
.tb-title span:nth-child(4) { color: #ff8a67; text-shadow: 0 .5cqw 0 #a8442a, 0 1.3cqw 1.6cqw rgba(0, 0, 0, .7); }
@keyframes tbLetter { from { transform: translateY(-14cqw) rotate(-14deg); opacity: 0; } }
.tb-film { position: absolute; right: 4cqw; top: 3cqw; bottom: 46%; width: 11cqw; display: grid; grid-template-rows: repeat(4, 1fr); gap: 1cqw; padding: 0 2cqw; background: repeating-linear-gradient(0deg, #2a2623 0 2.2cqw, transparent 2.2cqw 4cqw) left / 1.6cqw 100% no-repeat, repeating-linear-gradient(0deg, #2a2623 0 2.2cqw, transparent 2.2cqw 4cqw) right / 1.6cqw 100% no-repeat, #44403c; border-radius: .6cqw; opacity: .95; }
.tb-film span { display: grid; place-items: center; background: #cfc8bb; color: #2b2622; font: 700 6.4cqw/1 var(--f-b); border-radius: .4cqw; }
.tb-reel { position: absolute; left: 11cqw; top: 25cqw; width: 18cqw; color: #bdb4a6; opacity: .8; animation: tbSpin 24s linear infinite; }
@keyframes tbSpin { to { transform: rotate(360deg); } }
.tb-star { position: absolute; width: 5.4cqw; fill: #ff8a67; filter: drop-shadow(0 .5cqw .6cqw rgba(0, 0, 0, .6)); }
.tb-star.s1 { left: 5cqw; top: 8cqw; fill: #c9482b; transform: rotate(-12deg); } .tb-star.s2 { right: 19cqw; top: 22cqw; fill: #7fb8c9; width: 6.6cqw; transform: rotate(14deg); }
.tb-hint { position: absolute; left: 36cqw; top: 25cqw; margin: 0; font: 400 5.4cqw/1.25 'Kalam', 'Segoe Print', cursive; color: #f3e7d6; opacity: .85; transform: rotate(-3deg); }
.tb-pile { position: absolute; inset: 0; z-index: 2; }
.stub { position: absolute; left: var(--x); top: var(--y); width: 45cqw; height: 17cqw; padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(var(--r)); filter: drop-shadow(0 .5cqw .8cqw rgba(0, 0, 0, .55)); animation: stubDrop 820ms cubic-bezier(.3, 1.25, .4, 1) both; animation-delay: calc(var(--d) + 450ms); transition: transform 260ms cubic-bezier(.2, .8, .2, 1), filter 260ms ease, opacity 200ms ease; }
@keyframes stubDrop { from { transform: translateY(-60cqw) rotate(calc(var(--r) * -4)); opacity: 0; } 30% { opacity: 1; } }
.stub:hover, .stub:focus-visible { transform: translateY(-2cqw) rotate(calc(var(--r) * .3)) scale(1.04); z-index: 5; filter: drop-shadow(0 1.4cqw 1.6cqw rgba(0, 0, 0, .6)); outline: none; }
.stub:focus-visible .stub-in { box-shadow: inset 0 0 0 .5cqw #ff8a67; }
.stub.gone { opacity: 0; pointer-events: none; }
.stub-in { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 24%; background: #f6efe0; color: #1f1a16; text-align: left; border-radius: .8cqw;
  -webkit-mask: radial-gradient(circle at 76% 0, #0000 0 1.9cqw, #000 2cqw) top / 100% 51% no-repeat, radial-gradient(circle at 76% 100%, #0000 0 1.9cqw, #000 2cqw) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at 76% 0, #0000 0 1.9cqw, #000 2cqw) top / 100% 51% no-repeat, radial-gradient(circle at 76% 100%, #0000 0 1.9cqw, #000 2cqw) bottom / 100% 51% no-repeat; }
.stub-in::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .03) 0 1px, transparent 1px 3px); pointer-events: none; }
.stub-band { position: absolute; left: 0; top: 0; bottom: 0; width: 2.2cqw; background: var(--c); }
.stub-main { display: grid; align-content: center; gap: .6cqw; padding: 1.4cqw 2cqw 1.4cqw 4.4cqw; min-width: 0; }
.stub-main small { font: 700 2.1cqw/1 var(--f-b); letter-spacing: .16em; text-transform: uppercase; color: #6a5d50; }
.stub-main b { font: 800 4.3cqw/1.05 var(--f-b); letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
.stub-tear { position: relative; display: grid; align-content: center; justify-items: center; gap: .8cqw; padding: 1cqw; border-left: .35cqw dashed rgba(31, 26, 22, .4); }
.stub-tear em { font: 800 1.9cqw/1 var(--f-b); letter-spacing: .12em; font-style: normal; color: var(--c); filter: brightness(.8); }
.stub-bar { display: block; width: 100%; height: 4cqw; } .stub-bar svg { display: block; width: 100%; height: 100%; fill: #1f1a16; }
.stub-tear u { text-decoration: none; font: 700 1.8cqw/1 ui-monospace, Menlo, monospace; color: #6a5d50; }
.tb-glare { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .1) 0 14%, transparent 30%), linear-gradient(295deg, rgba(255, 255, 255, .05) 0 8%, transparent 20%); }
.tb-in.dim .tb-pile, .tb-in.dim .tb-title, .tb-in.dim .tb-film, .tb-in.dim .tb-reel, .tb-in.dim .tb-hint { filter: brightness(.35); transition: filter 400ms ease; }
.tk-wrap { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 5cqw; }
.tk { position: relative; width: 100%; display: grid; grid-template-columns: 1fr 24%; background: #f6efe0; color: #1f1a16; border-radius: 1.4cqw; box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, .65); transform-origin: 50% 50%;
  -webkit-mask: radial-gradient(circle at 76% 0, #0000 0 4.2cqw, #000 4.3cqw) top / 100% 51% no-repeat, radial-gradient(circle at 76% 100%, #0000 0 4.2cqw, #000 4.3cqw) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at 76% 0, #0000 0 4.2cqw, #000 4.3cqw) top / 100% 51% no-repeat, radial-gradient(circle at 76% 100%, #0000 0 4.2cqw, #000 4.3cqw) bottom / 100% 51% no-repeat; }
.tk-band { position: absolute; left: 0; top: 0; bottom: 0; width: 4cqw; background: var(--c); }
.tk-main { padding: 7cqw 5cqw 6cqw 9cqw; display: grid; gap: 2cqw; align-content: start; }
.tk-k { margin: 0; font: 700 3cqw/1 var(--f-b); letter-spacing: .18em; text-transform: uppercase; color: #6a5d50; }
.tk h3 { margin: 0; font: 800 9cqw/1 var(--f-b); letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }
.tk-by { margin: 0; font: 600 3.4cqw/1.3 var(--f-b); color: #3a312a; }
.tk-line { margin: 1cqw 0 0; font: 400 4.2cqw/1.45 'Kalam', 'Segoe Print', cursive; color: #2b2520; }
.tk-back { justify-self: start; margin-top: 2cqw; min-height: 44px; padding: 0 3.4cqw; border: 1.5px solid #1f1a16; border-radius: 99px; background: none; color: #1f1a16; font: 600 3.4cqw/1 var(--f-b); cursor: pointer; }
.tk-back:hover { background: #1f1a16; color: #f6efe0; }
.tk-tear { display: grid; align-content: center; justify-items: center; gap: 2cqw; padding: 3cqw; border-left: .6cqw dashed rgba(31, 26, 22, .4); }
.tk-tear em { font: 800 3.6cqw/1.15 var(--f-b); font-style: normal; letter-spacing: .1em; text-align: center; color: var(--c); filter: brightness(.78); writing-mode: vertical-rl; transform: rotate(180deg); }
.tk-bar { display: block; width: 90%; height: 9cqw; } .tk-bar svg { width: 100%; height: 100%; fill: #1f1a16; display: block; }
.tk-tear u { text-decoration: none; font: 700 3cqw/1 ui-monospace, Menlo, monospace; color: #6a5d50; }
@media (max-width: 520px) { .tb-frame { padding: 8px; } .tk-main { padding: 5cqw 3cqw 4cqw 8cqw; } .tk h3 { font-size: 8cqw; } }
@media (prefers-reduced-motion: reduce) { .tb-frame, .tb-title span, .stub, .tb-reel { animation: none; } }

.card.tbox .tb-title { font-size: 17cqw; line-height: 1; gap: 1.6cqw; left: 7cqw; top: 5cqw; }
.card.tbox .tb-film { bottom: 62%; }
.card.tbox .tb-reel { top: 27cqw; left: 12cqw; width: 16cqw; }
.card.tbox .tb-hint { top: 29cqw; left: 36cqw; }
.card.tbox .tb-star.s2 { top: 20cqw; right: 22cqw; }
.txt-cta { margin-top: var(--s-3); }
.txt-cta .ll { font: inherit; color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); }

/* box v2: a fuller heap of loose stubs underneath, plus a pair of orange admit-one tickets */
.tb-frags { position: absolute; inset: 0; pointer-events: none; }
.frag { position: absolute; display: block; border-radius: .5cqw; background: #e9dfcb; box-shadow: 0 .4cqw .7cqw rgba(0, 0, 0, .5); animation: fragIn 700ms cubic-bezier(.3, 1.2, .4, 1) both; animation-delay: 250ms; }
.frag.f0 { background: linear-gradient(90deg, #c9482b 0 5%, transparent 5%), repeating-linear-gradient(0deg, rgba(40, 30, 24, .5) 0 .5cqw, transparent .5cqw 2cqw) 10% 30% / 70% 60% no-repeat, #ece3d0; }
.frag.f1 { background: repeating-linear-gradient(90deg, #2b2622 0 .5cqw, transparent .5cqw 1.1cqw) 70% 50% / 22% 55% no-repeat, linear-gradient(90deg, #7fb8c9 0 5%, transparent 5%), #e4dac5; }
.frag.f2 { background: repeating-linear-gradient(0deg, rgba(40, 30, 24, .45) 0 .5cqw, transparent .5cqw 1.8cqw) 8% 25% / 62% 60% no-repeat, linear-gradient(90deg, #d8b45b 0 5%, transparent 5%), #f0e7d3; }
@keyframes fragIn { from { transform: translateY(-50cqw); opacity: 0; } 30% { opacity: 1; } }
.tb-admit { position: absolute; right: 2cqw; top: 40cqw; width: 17cqw; height: 8cqw; display: grid; place-items: center; background: #f0a73b; color: #7a3f06; border-radius: .6cqw; rotate: 9deg; box-shadow: 0 .5cqw .8cqw rgba(0, 0, 0, .55); font: 800 2.4cqw/1.1 var(--f-b); letter-spacing: .12em; text-align: center; border: .5cqw dashed rgba(122, 63, 6, .5); animation: fragIn 700ms cubic-bezier(.3, 1.2, .4, 1) 300ms both; }
.tb-admit b { font-weight: 800; }
.tk { transition: transform 160ms ease-out; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .frag, .tb-admit { animation: none; } }

/* the ticket box stands on the desk; click it and the TV switches on */
.tbx { position: absolute; left: 0; top: 0; width: 300px; transform-origin: 0 0; display: none; pointer-events: none; }
.tbx .tb-frame { animation: none; padding: 12px; box-shadow: 0 14px 18px -6px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 230, 200, .18); }
.tbx .tb-title span, .tbx .stub.still { animation: none; }
.tbx .stub.still { pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }
.tbx .stub-main small { font-size: 2.1cqw; }
.tbx .stub-tear em { font-size: 1.7cqw; }
.card.tv ~ *, .card.tv { }

/* phones: Batman, sticky-note and F1 cards float in the centre of the screen instead of hugging the bottom sheet */
@media (max-width: 760px) {
  html.room-open dialog.panel:has(.card.bat), dialog.panel:has(.card.bat),
  html.room-open dialog.panel:has(.card.note), dialog.panel:has(.card.note),
  html.room-open dialog.panel:has(.card.f1), dialog.panel:has(.card.f1) { width: min(440px, calc(100vw - 32px)); margin: auto; max-height: none; }
  dialog.panel .card.bat { border-radius: 14px; padding: 0; max-height: calc(100svh - 48px); width: 100%; }
  dialog.panel .card.f1 { border-radius: 6px; padding-bottom: 26px; max-height: none; width: 100%; }
  dialog.panel .card.note { border-radius: 0; padding: 30px 14px 22px; max-height: calc(100svh - 48px); overflow-y: auto; width: 100%; }
  .bat-fig img { max-height: calc(100svh - 48px); }
}
/* project button sits under the problem statement; the whole card stays clickable */
.f-body .go { margin-top: var(--s-4); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.f-body .go::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.f-body .go { justify-self: start; align-self: start; width: auto; padding: 0 22px; }
/* TV cards on phones: keep title, byline and a short line inside the glass */
@media (max-width: 560px) {
  .tc { padding: 6cqw 6cqw 7cqw; padding-right: 46cqw; }
  .tc-kind { font-size: 3.3cqw; margin-bottom: 1.6cqw; }
  .tc-t { font-size: min(var(--ts, 11cqw), 9.5cqw); overflow-wrap: anywhere; }
  .tc-by { font-size: 3.5cqw; margin-top: 2cqw; }
  .tc-line { font-size: 3.5cqw; line-height: 1.3; margin-top: 1.8cqw; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
}
@media (max-width: 560px) {
  .card.tv { touch-action: pan-y; padding-inline: 0; }
  .tc { padding-right: 42cqw; }
  .tc-kind { white-space: nowrap; letter-spacing: .12em; font-size: 3.1cqw; }
  .tc-by { font-size: 3.3cqw; }
}
.txt-cta-below { text-align: center; margin: var(--s-5) auto var(--s-6); }
/* TV overlay: solid dark backdrop so the page text never shows through the caption */
dialog.panel:has(.card.tv)::backdrop { background: rgba(10, 7, 6, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (max-width: 560px) { .tc-line { display: none; } }
@media (max-width: 760px) { .crux { text-align: left; } }
/* TLDR notebook: long project names wrap onto the next ruled line instead of overlapping */
.wc .status-list li { height: auto; min-height: 34px; align-items: flex-start; }
.wc .status-list li span { flex: 1; min-width: 0; line-height: 34px; }
.wc .status-list li b { line-height: 34px; flex: none; }
@media (max-width: 560px) { .wc .status-list li { font-size: 16px; gap: 10px; } }
.wb .x { top: 29px; }
/* TLDR: the title shares the header row with the close button */
.win-in.tl .wb b { opacity: 1; position: absolute; left: 72px; top: 34px; margin: 0; font: 600 clamp(24px, 3vw, 30px)/34px var(--f-b); color: var(--ink); pointer-events: none; }
.win-in.tl .wc h2.t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; padding: 0; }
@media (max-width: 760px) { .win-in.tl .wb b { left: 62px; } }
#contact-h .hd-btn { all: inherit; display: inline; margin: 0; padding: 0; background: none; border: 0; cursor: pointer; text-align: inherit; }
#contact-h .hd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }
#contact-h { cursor: pointer; }
.cs-back { margin: var(--s-5) 0 var(--s-4); }
.vis.cover { padding: 0; border: 0; background: none; overflow: hidden; border-radius: var(--r-m); display: block; min-height: 220px; }
.vis.cover .cover-svg { display: block; width: 100%; height: 100%; min-height: 220px; }
html[data-theme="night"] .vis.cover { filter: brightness(.82) contrast(1.02); }
.vis.cover { background-color: #F4F0E6; background-image: linear-gradient(rgba(92, 129, 153, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(92, 129, 153, .2) 1px, transparent 1px); background-size: 22px 22px; background-position: center; display: grid; place-items: center; padding: 8px; }
.vis.cover .cover-svg { width: 100%; height: auto; min-height: 0; max-height: 100%; }
.vis.cover { position: relative; } .vis.cover .cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.folder .f-body .prob .prob-tags { color: var(--accent); font-weight: 600; }
/* green cutting mat behind the diary */
.vis.cover { background-color: #2f7a55; background-image:
  linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px),
  linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px),
  linear-gradient(155deg, rgba(255,255,255,.07), transparent 45%, rgba(0,0,0,.1));
  background-size: 110px 110px, 110px 110px, 22px 22px, 22px 22px, 100% 100%; background-position: center; box-shadow: inset 0 0 0 4px #25664a, inset 0 0 0 5px rgba(255,255,255,.25); }
/* project card: even spacing for the CTA and a Role row that sits on the cover's bottom edge */
.folder .f-body .go { margin-top: 28px; }
.folder .f-meta { margin-bottom: 0; }
.folder .f-meta dd { margin-bottom: 0; }
@media (max-width: 760px) { .folder .f-body { padding-top: 16px; } .folder .f-meta { margin-top: 24px; } }
/* the plain backup photo must stay hidden while the live room is running; "display: block" above would otherwise override the hidden attribute and cover the 3D view */
.rfb[hidden] { display: none; }
/* project sheets: the pinned stack itself never catches clicks, so a sheet that is still settling into place (it sits slightly behind the stack plane) can still be clicked */
.pad.pad-on .pad-sheets { pointer-events: none; }
.pad.pad-on .pad-sheets > .folder { pointer-events: auto; }

/* room note: warm site tone (dark glass, site type, coral accent) instead of white paper */
.say { width: max-content; max-width: min(268px, calc(100% - 24px)); padding: 14px 18px 15px; border-radius: 14px; background: rgba(24, 17, 12, .84); color: #fbf3e6; font: 500 14px/1.55 var(--f-b); letter-spacing: 0; box-shadow: 0 12px 26px rgba(0, 0, 0, .35); rotate: 0deg; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.say .ln { clip-path: none; opacity: 0; }
.say.on .ln { animation: sayln 600ms ease var(--d, 0s) forwards; }
.say .ln:first-child { font-weight: 700; color: var(--coral-500, #e0734f); }
.say .ln:last-child { color: rgba(251, 243, 230, .62); font-size: 12.5px; }
@keyframes sayln { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .say .ln, .say.on .ln { opacity: 1; animation: none !important; } }

/* phone: keep the sheet + pager inside the sticky stage so the pager never spills under the next heading */
@media (max-width: 760px) {
  .pad.pad-on .folder { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .pad.pad-on .pad-stage > .wrap { padding-top: 16px; }
  .pad.pad-on .pad-ui { margin-top: var(--s-3); }
}

/* phone flow cards: no cover image, title 4px smaller (26px -> 22px) */
@media (max-width: 760px) {
  .folder .vis { display: none; }
  .folder .f-body h3 { font-size: 22px; line-height: 1.2; }
}


/* phone flow cards: exact pinned spiral (coil on the card's top edge, same as the stack) */
.pad.pad-flow .folder::after { content: ''; position: absolute; left: 6%; right: 6%; top: -9px; height: 24px; pointer-events: none; 
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'%3E%3Crect x='6' y='1.5' width='8' height='21' rx='4' fill='none' stroke='%23423c38' stroke-width='2.2'/%3E%3Cpath d='M8 4.5v13' stroke='%23ffffff' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") round no-repeat; background-position: left center; background-size: 20px 24px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); }
.pad.pad-flow .folder .tab { display: none; }
.pad.pad-flow .folder { overflow: visible; }
.pad.pad-flow .folder::after { opacity: 1; }
.pad.pad-flow .folder .f-body { padding-top: 34px; }

/* phone pinned stack: compact card so the whole sheet + pager sit inside the pinned stage, no clipping, no inner scroll */
@media (max-width: 760px) {
  .pad.pad-on .folder { overflow: hidden; }
  .pad.pad-on .folder .f-body { padding: 26px 22px 16px; gap: 10px; align-content: start; }
  .pad.pad-on .folder .f-body h3 { margin: 0 0 8px; }
  .pad.pad-on .folder .f-body .prob { font-size: 15px; line-height: 1.4; margin: 0 0 12px; }
  .pad.pad-on .folder .f-body .go { min-height: 44px; margin: 0 0 12px; }
  .pad.pad-on .folder .f-meta { margin: 0; }
  .pad.pad-on .folder .f-meta dd { font-size: 14px; line-height: 1.35; }
  .pad.pad-on .folder .tab { display: none; }
}

/* phone pinned card: more breathing room, project number set on the right of the title */
@media (max-width: 760px) {
  .pad.pad-on .folder .f-body { padding: 32px 24px 24px; gap: 14px; }
  .pad.pad-on .folder .fb-first { position: relative; }
  .pad.pad-on .folder .f-body h3 { padding-right: 64px; }
  .pad.pad-on .folder .fnum { display: block; position: absolute; top: -6px; right: 0; font: 700 72px/1 var(--f-b); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.2px var(--accent); pointer-events: none; }
}

/* phone pinned card: subtler number, steadier rhythm (title > summary > tags > action > role) */
@media (max-width: 760px) {
  .pad.pad-on .folder .f-body { padding: 34px 26px 28px; gap: 18px; }
  .pad.pad-on .folder .f-body h3 { margin: 0 0 12px; }
  .pad.pad-on .folder .f-body .prob { margin: 0 0 16px; }
  .pad.pad-on .folder .f-body .go { margin: 0 0 20px; }
  .pad.pad-on .folder .fnum { top: 4px; font: 600 52px/1 var(--f-b); -webkit-text-stroke: .8px color-mix(in srgb, var(--accent) 42%, transparent); }
  .pad.pad-on .folder .f-meta dt { margin-bottom: 4px; }
}

/* phone room: the greeting is a tap target (pans to the turntable) */
.say.tap { pointer-events: auto; cursor: pointer; }
.say.tap .ln:last-child { color: var(--coral-300, #F5A688); font-weight: 600; }
.say.tap { z-index: 12; }
.room .rlay { z-index: 20; }

/* phone room note: reads as a tappable action */
@media (pointer: coarse) {
  .say.tap .ln:last-child { color: var(--coral-300, #F5A688); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
}
/* photo reel: smaller polaroid prints, softly tilted, with white borders */
.fr { width: min(168px, 42vw); aspect-ratio: 4 / 5; padding: 8px 8px 26px; box-sizing: border-box; background: #f6f1e7; border-radius: 3px; box-shadow: 0 10px 22px rgba(0, 0, 0, .45); overflow: visible; margin: 0 8px; }
.fr img { border-radius: 1px; }
.fr:nth-child(odd) { transform: rotate(-1.6deg); }
.fr:nth-child(even) { transform: rotate(1.4deg) translateY(6px); }
.fr:hover, .fr:focus-visible { transform: translateY(-6px) rotate(0deg) scale(1.04); z-index: 2; }
.strip { padding: 34px 18px; }
@media (max-width: 760px) { .fr { width: min(150px, 40vw); } }

/* TV channel blurb: subtle, then fades away on its own */
@keyframes tcBlurbFade { 0%, 70% { opacity: .55; } 100% { opacity: 0; } }
.tv .tc.now .tc-line { font-size: 12px; line-height: 1.45; opacity: .55; animation: tcBlurbFade 9s ease forwards; }

/* project cards: the whole card is clickable */
#projects .folder { cursor: pointer; }

/* project 01 cover: the open sketchbook, cut out, lying on the green cutting mat */
.vis.cover { display: grid; place-items: center; }
.cover-diary { position: relative; width: 84%; max-width: 380px; transform: rotate(-2deg); }
.cover-diary img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 14px rgba(0,0,0,.42)); }
@media (max-width: 760px) { .cover-diary { width: 92%; } }

/* project 01 cover: the sketchbook sits at the centre of the mat */
.vis.cover { position: relative; }
.vis.cover.has-alt { min-height: 0; height: auto; aspect-ratio: 1 / 0.56; margin-right: var(--s-5); }
.cover-alt { position: absolute; left: 30%; bottom: -6%; transform: translateX(-50%) rotate(-30deg); width: 52%; max-width: 380px; }
.cover-alt img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 14px rgba(0,0,0,.42)); }
@media (max-width: 760px) { .vis.cover.has-alt { aspect-ratio: 1 / 0.86; } .cover-alt { width: 76%; } }

/* project 01 cover: four coffee cups on the cutting mat, corners of the frame */
.cover-cup { position: absolute; width: 11%; height: auto; filter: drop-shadow(0 10px 8px rgba(0,0,0,.4)); z-index: 2; }
.cover-cup.cc0 { left: 4%; top: 8%; transform: rotate(-12deg); }
.cover-cup.cc1 { right: 4%; top: 10%; transform: rotate(10deg); }
.cover-cup.cc2 { left: 5%; bottom: 8%; transform: rotate(8deg); }
.cover-cup.cc3 { left: 4%; top: 8%; transform: rotate(-9deg); }
@media (max-width: 760px) { .cover-cup { width: 14%; } }

/* project 01 cover: chrome earphones at the top right, cable running off the edge */
.cover-ear { position: absolute; top: -2%; left: 21%; right: auto; width: 24%; max-width: 220px; height: auto; transform: rotate(-8deg); filter: drop-shadow(0 10px 8px rgba(0,0,0,.4)); z-index: 2; }
@media (max-width: 760px) { .cover-ear { width: 30%; } }
/* Card 02 cover: full to-do board image, shown uncropped */
.vis.cover.todo-cover { aspect-ratio: 796 / 1000; min-height: 0; height: auto; margin-right: var(--s-5); }
.vis.cover.todo-cover .todo-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ---- locked project magnifier cursor ---- */
@media (hover: hover) and (pointer: fine) {
  [data-locked-cursor] { cursor: none; }
  [data-no-lock-cursor], [data-no-lock-cursor] * { cursor: auto !important; }
  [data-no-lock-cursor] a, [data-no-lock-cursor] button, [data-no-lock-cursor] [role="button"] { cursor: pointer !important; }
}
#lock-cursor {
  position: fixed; top: 0; left: 0;
  width: 110px; height: 110px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 9999;
  opacity: 0; transform: translate(-50%, -50%) scale(.45);
  transition: opacity 200ms ease, transform 280ms cubic-bezier(.34,1.6,.64,1);
  will-change: transform, opacity;
  /* glass rim: crisp inner highlight + soft outer glow */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.60),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 0 0 1.2px rgba(255,255,255,.22),
    0 6px 28px rgba(0,0,0,.34),
    0 2px 6px rgba(0,0,0,.18);
  overflow: hidden;
}
#lock-cursor.lc-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* canvas fills the circle as the magnified background */
#lc-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
}

.lc-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: lc-spin 6s linear infinite;
  /* ring sits above canvas */
  z-index: 1;
}
.lc-ring text { font: 700 7.5px/1 var(--f-b); letter-spacing: .22em; fill: rgba(255,255,255,.92); }

.lc-lock {
  width: 20px; height: 20px; color: #fff; flex-shrink: 0;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.7));
  position: relative; z-index: 2;
}

@keyframes lc-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lc-ring { animation: none; } }

/* locked badge — mobile tap reveal */
.lc-mobile-badge {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.7);
  width: 86px; height: 86px; border-radius: 50%;
  background: rgba(14,14,14,.78);
  border: 1.5px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 200ms ease, transform 240ms cubic-bezier(.34,1.5,.64,1); pointer-events: none;
}
.locked-vis.lc-tapped .lc-mobile-badge { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: hover) and (pointer: fine) { .lc-mobile-badge { display: none; } }

/* locked project note */
.locked-note { margin: var(--s-3) 0 0; font: 500 13.5px/1.5 var(--f-b); color: var(--text-2); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.locked-note svg { flex-shrink: 0; color: var(--text-2); position: relative; top: 1px; }
.locked-note .ll { font: inherit; }
/* Mobile: hide the image panel on project cards and give the text room to breathe */
@media (max-width: 760px) {
  .card .vis, .folder .vis, .folder .f-body .vis, .vis.cover { display: none !important; }
  .folder .f-body { gap: 18px; padding: 22px 22px 26px; }
  .folder .fnum { font-size: 40px; top: 10px; }
  .folder .prob { margin: 0; line-height: 1.5; }
  .folder .f-meta { margin-top: 2px; }
  .folder .go { align-self: flex-start; }
  .pad.pad-on .folder { height: auto; min-height: 100%; overflow: visible; }
  .folder .f-body h3 { font-size: 24px; line-height: 1.2; margin: 6px 0 12px; }
  .folder .f-body .prob { font-size: 15px; line-height: 1.5; }
  .folder .f-body .prob-tags { display: inline-block; line-height: 1.4; }
  .folder .f-meta dd { line-height: 1.4; }
  .folder .f-meta dt { line-height: 1.4; }
}
/* Greeting hover: minimal brand cursor and a gently rotating language bubble */
.hi-tip { position: relative; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4' fill='%23DA5F3A'/%3E%3C/svg%3E") 6 6, pointer; }
.hi-bubble { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); background: var(--coral-500); color: #ffffff; font: 500 12px/1.2 var(--f-b); letter-spacing: .02em; white-space: nowrap; padding: 4px 10px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .35s ease; z-index: 5; }
.hi-bubble.on { opacity: 1; transform: translate(-50%, 0); }
/* Desktop project cards: clearer rhythm between title, problem, tags, action and role */
@media (min-width: 761px) {
  .card .fb-first { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  .card .fb-first h3 { margin: 0; }
  .card .fb-first .prob { margin: 0; line-height: 1.65; max-width: 36ch; }
  .card .fb-first .prob-tags { display: inline-block; margin-top: var(--s-3); }
  .card .fb-first .go { margin-top: var(--s-2); }
  .card .f-meta { margin-top: var(--s-6); }
}

/* day / night switch: sun and moon icons */
.themesw #bd, .themesw #bn { min-width: 44px; width: 44px; padding: 0; display: grid; place-items: center; }
.themesw #bd svg, .themesw #bn svg { display: block; }