/* The portfolio's own dress for the Deep Listening studies and site model
   — his note, 2026-09-30: the three new pieces are great, but "the designs
   will need to be brought into the fold to match the portfolio."

   These two pages are plain static files (three.js, no build), so they
   can't import the site's tokens; the values below mirror
   styles/tokens.css and app/globals.css by hand. If a token changes
   there, change it here. Fonts are the site's own self-hosted files
   (Instrument Sans, Space Mono, both OFL — licences beside them). FT
   System is asked for first in the stack, as on the site, and declared
   nowhere until it's bought. */

@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 500; font-display: swap; src: url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap; src: url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-weight: 400; font-display: swap; src: url("fonts/space-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --p-bg: #FFFEFA;
  --p-ink: #1C1A17;
  --p-text-2: rgba(28, 26, 23, .62);
  --p-text-3: rgba(28, 26, 23, .50);
  --p-rule: rgba(28, 26, 23, .12);
  --p-surface: #F8F5EE;
  --p-accent: #6D79FF;
  --p-accent-ink: #2949FF;
  --p-glass-line: #BAC0FF;
  --p-font: "FT System", "Instrument Sans", system-ui, sans-serif;
  --p-mono: "Space Mono", Menlo, "Lucida Console", monospace;
  --p-book: 350;
  --p-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --p-radius: 10px;
}

/* the slash label — "/ THE FACTS" — as on every case page */
.p-slash {
  font-family: var(--p-mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--p-ink);
  margin: 0;
}
/* the way back to the case study — a button you can see is a button,
   his note 2026-10-02 ("wayfinding for the viewer to get back to the case
   study"); it was an 11px mono label. Set as the 3D page's view buttons:
   a paper pill on the foil rim, the body face, ink. */
.p-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  align-self: start;
  width: fit-content;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--p-foil-rim);
  border-radius: 999px;
  background: color-mix(in srgb, var(--p-bg) 70%, transparent);
  font-family: var(--p-font);
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--p-ink);
  text-decoration: none;
}
.p-back:hover { background: var(--p-bg); color: var(--p-ink); }
.p-back:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; }

/* Go — the site's foil button (components/FoilLink.tsx and its CSS),
   his call, 2026-09-30: the ways on from these pages "should be buttons —
   side-by-side", as on the case page. Same part, by hand: paper at rest,
   the pale pearl foil only while pressed, the light under the finger;
   a tap holds the foil a beat while its colours roll in place, then the
   page changes (js/go.js). Values mirror styles/tokens.css. */
:root {
  --p-foil-cyan: #7FEFFF; --p-foil-blue: #6FA2FF; --p-foil-violet: #A98BFF;
  --p-foil-pink: #FF9BDD; --p-foil-butter: #FFF08A; --p-foil-mint: #8FFFC0;
  --p-foil-light: rgba(255, 255, 255, .75);
  --p-foil-light-soft: rgba(255, 255, 255, .15);
  --p-foil-dim: rgba(28, 26, 23, .05);
  --p-foil-reach-mid: rgba(0, 0, 0, .35);
  --p-foil-reach-far: rgba(0, 0, 0, .08);
  --p-foil-rim: rgba(28, 26, 23, .35);
  --p-foil-shade: rgba(28, 26, 23, .22);
}
/* two (or more) side by side, equal widths, together the full width of
   the column — his call, 2026-10-02 ("all other buttons … stretch
   across the entire field") */
.p-gos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.p-stage { display: block; perspective: 700px; min-width: 0; }
.p-go {
  --lx: 0; --ly: 0; --lc: 0; --press: 0; --shift: 0;
  --light-x: calc(50% + var(--lx) * 50%);
  --light-y: calc(50% + var(--ly) * 100%);
  --light-reach: radial-gradient(ellipse 75% 280% at var(--light-x) var(--light-y),
    black 0%, var(--p-foil-reach-mid) 45%, var(--p-foil-reach-far) 100%);
  position: relative;
  display: flex; justify-content: center; align-items: center; gap: 6px;
  isolation: isolate; overflow: hidden;
  padding: 12px 16px;
  border-radius: 999px;
  font-family: var(--p-font); font-weight: 500; font-size: 14px; letter-spacing: -0.02em; line-height: 1.3;
  text-align: center;
  color: var(--p-ink); text-decoration: none; background: var(--p-bg);
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  box-shadow:
    inset 0 0 0 1px var(--p-foil-rim),
    calc(var(--lx) * var(--press) * -3px) calc(3px - var(--press) * 1.5px) calc(5px - var(--press) * 2px) var(--p-foil-shade);
  transform:
    rotateY(calc(var(--lx) * var(--press) * 5deg))
    rotateX(calc(var(--ly) * var(--press) * -8deg))
    scale(calc(1 - var(--press) * 0.02));
}
.p-go::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(110deg,
    var(--p-foil-cyan), var(--p-foil-blue), var(--p-foil-violet), var(--p-foil-pink),
    var(--p-foil-butter), var(--p-foil-mint), var(--p-foil-cyan) 25%);
  background-size: 400% 400%;
  background-position: calc(50% - var(--lx) * 38% - var(--shift) * 25%) calc(50% - var(--ly) * 38%);
  -webkit-mask-image: var(--light-reach); mask-image: var(--light-reach);
  mix-blend-mode: multiply;
  opacity: calc(var(--press) * (0.35 + var(--lc) * 0.4));
}
.p-go::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(farthest-corner circle at var(--light-x) var(--light-y),
    var(--p-foil-light) 0%, var(--p-foil-light-soft) 30%, var(--p-foil-dim) 100%);
  opacity: calc(var(--press) * (0.5 + var(--lc) * 0.5));
}
.p-go > span { position: relative; z-index: 2; }
.p-go:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; }
/* the pages' own link rule turns a pressed link blue (a phone counts a tap
   as hover) — not this one: ink, pressed or not */
.p-go:hover, .p-go:active, .p-go:visited { color: var(--p-ink); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .p-go { transform: none; } }

/* The chip — the front page's kind chip, the case page's severity chip:
   mono, outlined, square-ish, ink. */
.p-chip {
  display: inline-block; justify-self: start;
  font-family: var(--p-mono); font-size: 11px; letter-spacing: 0; text-transform: uppercase; line-height: 1.3;
  padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--p-ink) 40%, transparent); border-radius: 3px;
  color: var(--p-ink);
}

/* Folds — the front page's (components/WorkList.tsx and its CSS, the
   "bare" list the case page uses) for these static pages; js/folds.js
   opens them. Closed: the square, the name, a chip where the list has
   one, the plus. Open: the facts under the name, each under its term.
   One open at a time in a list. The name wraps rather than trails off —
   in a review every word of it counts. */
.p-folds { list-style: none; margin: 36px 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--p-ink) 30%, transparent); }
.p-fold { border-bottom: 1px solid var(--p-rule); }
.p-fold-head {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) 40px; align-items: center; column-gap: 24px;
  width: 100%; padding: 22px 12px; border: 0; background: none; color: var(--p-ink);
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color 120ms var(--p-ease), color 120ms var(--p-ease);
}
.p-folds-chip .p-fold-head { grid-template-columns: 18px minmax(0, 1fr) 88px 40px; }
.p-fold-head:focus-visible { outline: 2px solid var(--p-accent); outline-offset: -2px; }
@media (hover: hover) {
  .p-fold-head:hover { background: var(--p-accent); color: var(--p-bg); }
  .p-fold-head:hover .p-chip { color: var(--p-bg); border-color: color-mix(in srgb, var(--p-bg) 55%, transparent); }
}
.p-mark { width: 7px; height: 7px; background: currentColor; }
.p-fold-name { font-family: var(--p-font); font-weight: 400; font-size: 36px; letter-spacing: -0.05em; line-height: 1.1; }
.p-fold-name b { font-weight: inherit; }
.p-sign { position: relative; width: 16px; height: 16px; justify-self: end; }
.p-sign::before, .p-sign::after {
  content: ''; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1px; background: currentColor;
  transition: transform 240ms var(--p-ease);
}
.p-sign::after { transform: rotate(90deg); }
.p-fold[data-open] .p-sign::after { transform: rotate(0deg); }
.p-fold-panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 240ms var(--p-ease), visibility 0s linear 240ms;
}
.p-fold[data-open] .p-fold-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 240ms var(--p-ease), visibility 0s; }
.p-fold-inner { overflow: hidden; min-height: 0; padding: 0 12px 0 54px; }
.p-facts { margin: 4px 0 28px; display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.p-facts > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 24px; align-items: baseline; }
.p-facts dt { font-family: var(--p-mono); font-size: 11px; letter-spacing: 0; text-transform: uppercase; line-height: 1.4; color: var(--p-ink); }
.p-facts dd { margin: 0; font-weight: var(--p-book); font-size: 18px; letter-spacing: -0.03em; line-height: 1.35; color: var(--p-ink); }
.p-facts dd b { font-weight: 500; }
/* the chip is already in the row on a desk */
.p-fold-kind { display: none !important; }

@media (max-width: 700px) {
  .p-fold-head, .p-folds-chip .p-fold-head { grid-template-columns: 7px minmax(0, 1fr) 20px; column-gap: 14px; padding: 18px 0; align-items: start; }
  .p-mark { margin-top: 9px; }
  .p-sign { margin-top: 4.5px; }
  .p-fold-name { font-size: 22px; letter-spacing: -0.04em; line-height: 1.15; }
  .p-fold-chip { display: none; }
  .p-fold-inner { padding: 0; }
  .p-facts { margin: 2px 0 24px; }
  .p-facts > div { grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; }
  .p-facts dd { font-size: 16px; line-height: 1.3; }
  .p-fold-kind { display: grid !important; }
  .p-fold-kind .p-chip { font-size: 10px; padding: 3px 5px; }
}
@media (max-width: 700px) and (hover: hover) {
  .p-fold-head:hover { background: none; color: var(--p-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .p-fold-head, .p-fold-panel, .p-fold[data-open] .p-fold-panel, .p-sign::before, .p-sign::after { transition: none; }
}