/* Courtney Struble · interactive résumé
   Three tones in the scene (ivory paper, academic navy, ink) plus regalia gold.
   The page matches it: cut-paper folders, a 1.5px ink rule, a hard navy shadow. */

:root {
  --paper: #F8F4EC;
  --sheet: #FFFDF8;
  --navy: #2B3B72;
  --ink: #17192B;
  --gold: #C9A04A;
  --gold-ink: #7E5F17;       /* gold dark enough for text on paper */
  --muted: #4A4C5C;
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --serif: "Libre Caslon Text", Georgia, serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --edge: 0 0 0 1.5px var(--ink);
  --shadow: 9px 9px 0 var(--navy);
  --fw: min(440px, 38vw);
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 var(--sans); overflow-x: hidden; }
button { font: inherit; color: inherit; }
a { color: var(--navy); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stage { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; }
.grain {
  position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0.14; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.1 0 0 0 0 0.17 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.spine { position: relative; z-index: 1; pointer-events: none; }
.spine section { display: block; }

/* ------------------------------------------------------------ type + buttons */
.eyebrow { margin: 0 0 10px; font: 700 12px/1.2 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-ink); }
h1, h2 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px;
  font: 700 12px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  border: 0; cursor: pointer; box-shadow: var(--edge); transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn--gold { background: var(--gold); color: var(--ink); box-shadow: var(--edge), 4px 4px 0 var(--navy); }
.btn--ghost { background: var(--sheet); color: var(--ink); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--edge), 6px 6px 0 var(--navy); }
.btn:active { transform: translate(2px, 2px); box-shadow: var(--edge), 1px 1px 0 var(--navy); }
.btn:disabled { opacity: .45; cursor: progress; transform: none; }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 11px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ------------------------------------------------------------ gate */
.gate { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--paper); color: var(--navy); transition: opacity .8s var(--ease), visibility .8s; }
.gate.is-gone { opacity: 0; visibility: hidden; }
.gate__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; text-align: center; }
.seal--gate { width: 132px; height: 132px; }
.seal--gate .ring { transform-origin: 56px 56px; animation: seal-spin 30s linear infinite; }
@keyframes seal-spin { to { transform: rotate(360deg); } }
.gate__name { margin: 4px 0 0; font: 400 34px/1 var(--display); color: var(--ink); }
.gate__name em { font: italic 400 18px var(--serif); color: var(--navy); }
.gate__status { margin: 0; font: italic 400 15px var(--serif); color: var(--muted); min-height: 1.5em; }
.gate__buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.gate__note { margin: 4px 0 0; max-width: 34ch; font-size: 13px; color: var(--muted); }
.gate__text { font-size: 13px; color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .seal--gate .ring { animation: none; } }

/* ------------------------------------------------------------ header */
.header {
  position: fixed; z-index: 40; top: 14px; left: 16px; right: 16px; display: flex; align-items: center; gap: 18px;
  padding: 8px 8px 8px 14px; background: var(--sheet); box-shadow: var(--edge), 5px 5px 0 var(--navy);
}
.brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--navy); }
.minicap { width: 34px; height: 34px; overflow: visible; }
.brand__name { font: 400 20px/1 var(--display); color: var(--ink); white-space: nowrap; }
.brand__name em { font: italic 400 13px var(--serif); color: var(--navy); }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav button { background: none; border: 0; padding: 10px 10px; cursor: pointer; font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.nav button:hover, .nav button[aria-current="true"] { color: var(--navy); box-shadow: inset 0 -2px 0 var(--gold); }
.sound { display: flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; padding: 8px; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sound__bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound__bars i { width: 3px; height: 4px; background: var(--navy); }
.sound[aria-pressed="true"] .sound__bars i { animation: bars 0.9s ease-in-out infinite alternate; }
.sound__bars i:nth-child(2) { animation-delay: -.3s !important; } .sound__bars i:nth-child(3) { animation-delay: -.6s !important; } .sound__bars i:nth-child(4) { animation-delay: -.15s !important; }
@keyframes bars { from { height: 3px; } to { height: 14px; } }

/* ------------------------------------------------------------ hero */
.hero { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.hero__copy { position: absolute; left: clamp(20px, 5vw, 72px); top: 50%; transform: translateY(-46%); width: min(520px, 42vw); pointer-events: auto; }
.hero h1 { font-size: clamp(44px, 5.6vw, 84px); line-height: 0.98; }
.hero__lede { margin: 20px 0 26px; max-width: 42ch; font-size: 17px; color: var(--ink); }
.hero__buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.hint { position: absolute; left: clamp(20px, 5vw, 72px); bottom: 26px; margin: 0; padding: 10px 14px; max-width: 300px; font-size: 13px; background: var(--sheet); box-shadow: var(--edge); pointer-events: auto; }

/* ------------------------------------------------------------ folders */
.folders { position: fixed; z-index: 20; left: clamp(16px, 2.6vw, 40px); top: 96px; bottom: 28px; width: var(--fw); pointer-events: none; }
.folder {
  position: absolute; left: 0; right: 0; top: 34px; bottom: 0; display: flex; flex-direction: column;
  transform: translateY(calc(100% + 120px)); transition: transform .8s var(--ease), filter .8s var(--ease);
  pointer-events: none;
}
.folder[data-state="up"] { transform: none; pointer-events: auto; }
.folder[data-state="behind"] { transform: translateY(0); filter: brightness(.97); }
.folder[data-state="peek"] { transform: translateY(calc(100% - 4px)); }
.folder__body {
  position: relative; flex: 1; overflow: auto; padding: 26px 28px 24px; background: var(--sheet);
  box-shadow: var(--edge), var(--shadow); scrollbar-width: thin;
}
.folder__label, .folder__tab {
  position: absolute; top: -30px; height: 31px; padding: 0 14px; display: flex; align-items: center;
  font: 700 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--navy);
  background: var(--sheet); box-shadow: var(--edge); clip-path: inset(-3px -3px 0 -3px); border: 0;
}
.folder__label { left: 0; }
.folder__tab { left: calc(var(--tab) * 25%); width: 25%; justify-content: center; cursor: pointer; pointer-events: auto; white-space: nowrap; font-size: 10px; letter-spacing: .12em; padding: 0 6px; }
.folder[data-state="up"] .folder__tab { color: var(--ink); box-shadow: var(--edge), inset 0 3px 0 var(--gold); }
.folder[data-state="down"] .folder__tab { pointer-events: none; }
.folder--drawer[data-state="peek"] { transform: none; }
.folder--drawer[data-state="behind"] .folder__body, .folder--drawer[data-state="peek"] .folder__body { visibility: hidden; }
.folder[data-state="up"] { z-index: 2; }
.folder h2 { font-size: clamp(30px, 2.7vw, 40px); line-height: 1.04; }
.lede { margin: 14px 0 18px; font: 400 17px/1.5 var(--serif); color: var(--ink); }
.pair { display: grid; gap: 14px; margin: 0; }
.pair div { padding-top: 12px; border-top: 1px solid rgba(43,59,114,.28); }
.pair dt { font: 400 19px/1.25 var(--display); color: var(--navy); }
.pair dd { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.fine { margin: 14px 0 0; font-size: 12px; color: var(--muted); }
blockquote { margin: 8px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(43,59,114,.28); font: italic 400 21px/1.35 var(--serif); color: var(--navy); }

/* route sheet */
.route { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.route li { display: grid; grid-template-columns: 22px 44px 1fr; gap: 8px; align-items: start; padding: 7px 0; border-top: 1px solid rgba(43,59,114,.18); font-size: 13.5px; line-height: 1.3; color: var(--muted); transition: color .3s; }
.route li b { font: 700 12px/1.4 var(--sans); letter-spacing: .08em; color: var(--gold-ink); }
.route li span strong { display: block; font-weight: 600; color: var(--ink); }
.route .box { width: 14px; height: 14px; margin-top: 2px; box-shadow: var(--edge); background: var(--sheet); position: relative; }
.route li[data-state="done"] .box { background: var(--navy); }
.route li[data-state="done"] .box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--sheet); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.route li[data-state="now"] { color: var(--ink); }
.route li[data-state="now"] .box { background: var(--gold); }
.route li[data-state="todo"] { opacity: .55; }

/* audit counter */
.counter { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.counter__n { font: 400 64px/1 var(--display); color: var(--navy); min-width: 1.2ch; font-variant-numeric: tabular-nums; }
.counter__of { font: 400 26px/1 var(--display); color: var(--muted); }
.counter__label { font: 700 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-left: 6px; }
.cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 14px 0 10px; }
.cells i { height: 14px; box-shadow: var(--edge); background: var(--sheet); transition: background .25s; }
.cells i.on { background: var(--navy); }
.status { margin: 0; font: italic 400 16px var(--serif); color: var(--navy); }

/* toolkit */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 14px; }
.stats div { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 2px solid var(--navy); }
.stats strong { font: 400 34px/1 var(--display); color: var(--navy); }
.stats span { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 6px 10px; font: 600 12.5px/1 var(--sans); background: var(--sheet); box-shadow: var(--edge); color: var(--muted); transition: background .25s, color .25s; }
.chips li.on { background: var(--navy); color: var(--sheet); }

/* contact */
.email { display: inline-block; margin: 4px 0 18px; font: 400 clamp(24px, 2.4vw, 34px)/1.1 var(--display); color: var(--navy); text-decoration: none; box-shadow: inset 0 -2px 0 var(--gold); word-break: break-all; }
.email:hover { color: var(--ink); }

/* ------------------------------------------------------------ pins */
.pins { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.pin { position: absolute; left: 0; top: 0; will-change: transform; }
.pin__dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: var(--edge); transition: transform .3s var(--ease); }
.pin__stem { position: absolute; left: -0.75px; bottom: 6px; width: 1.5px; height: 34px; background: var(--ink); transform-origin: bottom; transition: transform .35s var(--ease); }
.pin__card {
  position: absolute; left: -2px; bottom: 40px; min-width: 190px; max-width: 250px; padding: 10px 12px 11px;
  background: var(--sheet); box-shadow: var(--edge), 5px 5px 0 var(--navy); transform-origin: bottom left;
  transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.pin__card p { margin: 0; }
.pin__card .l0 { font: 700 11px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.pin__card .l1 { margin-top: 4px; font: 400 18px/1.15 var(--display); color: var(--ink); }
.pin__card .l2 { margin-top: 3px; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.pin[data-state="hidden"] { display: none; }
.pin[data-state="done"] .pin__card { opacity: 0; transform: scale(.9) translateY(6px); }
.pin[data-state="done"] .pin__stem { transform: scaleY(0); }
.pin[data-state="done"] .pin__dot { transform: scale(.75); background: var(--navy); }

/* ------------------------------------------------------------ progress rail */
.rail { position: fixed; z-index: 25; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; }
.rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(23,25,43,.35); }
.rail button { position: relative; width: 14px; height: 14px; padding: 0; border: 0; cursor: pointer; background: var(--sheet); box-shadow: var(--edge); transform: rotate(45deg); transition: background .25s; }
.rail button[aria-current="true"] { background: var(--gold); }
.rail button span { position: absolute; right: 24px; top: 50%; transform: rotate(-45deg) translateY(-50%); transform-origin: right center; white-space: nowrap; opacity: 0; font: 700 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--navy); background: var(--sheet); padding: 4px 6px; box-shadow: var(--edge); pointer-events: none; transition: opacity .2s; }
.rail button:hover span, .rail button:focus-visible span { opacity: 1; }

/* ------------------------------------------------------------ scrubber (?scrub=1) */
.scrubber { position: fixed; z-index: 70; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(720px, 90vw); display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: var(--sheet); box-shadow: var(--edge); }
.scrubber input { flex: 1; }
.scrubber output { font: 600 13px var(--sans); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ fallback */
.fallback { position: fixed; inset: 0; z-index: 80; padding: 12vh 8vw; background: var(--paper); }
.fallback h1 { font-size: 48px; margin-bottom: 12px; }
.fallback .btn { margin: 8px 8px 0 0; }
.no-webgl .gate, .no-webgl .header, .no-webgl .hero, .no-webgl .folders, .no-webgl .rail { display: none; }

.is-grab { cursor: pointer; }

/* ------------------------------------------------------------ phones */
@media (max-width: 1080px) { .nav { display: none; } }
@media (max-width: 860px) {
  :root { --fw: auto; }
  .header { top: 10px; left: 10px; right: 10px; gap: 8px; }
  .brand__name { font-size: 17px; }
  .sound__label { display: none; }
  .folders { left: 12px; right: 12px; top: auto; bottom: 12px; height: 50svh; width: auto; }
  .folder h2 { font-size: 27px; }
  .folder__body { padding: 18px 18px 16px; }
  .lede { font-size: 15px; margin: 10px 0 12px; }
  .pair dd, .route li { font-size: 12.5px; }
  .hero__copy { left: 12px; right: 12px; width: auto; top: auto; bottom: 12px; transform: none; padding: 20px 18px; background: var(--sheet); box-shadow: var(--edge), 6px 6px 0 var(--navy); }
  .hero .eyebrow { display: none; }
  .hero h1 { font-size: 40px; }
  .hero__lede { font-size: 15px; margin: 10px 0 16px; }
  .hint { display: none; }
  .rail { display: none; }
  .stats strong { font-size: 26px; }
  .pin__card { min-width: 150px; max-width: 190px; padding: 8px 10px; }
  .pin__card .l1 { font-size: 15px; }
  .only-pointer { display: none; }
}
@media (max-width: 480px) { .header .btn { display: none; } }
@media (hover: none) { .only-pointer { display: none; } }
.lite .grain { display: none; }