/* ================================================================
   NICKDECKER.NET
   A digital studiolo — a map of questions, attention, and values.
   HTML + CSS + vanilla JS. No frameworks.

   Visual language: screen-printed posters, exhibition catalogs,
   Whole Earth Catalog, personal manifesto. Hard color blocks,
   big editorial type, generous breathing room.
   ================================================================ */

/* ----------------------------------------------------------------
   DESIGN TOKENS
   ---------------------------------------------------------------- */
:root {
  /* Palette — pulled from the reference poster ----------------- */
  --cream:    #F2E3CA;   /* main background                         */
  --red:      #E1542A;   /* Red-Orange — Inner World + the logo     */
  --blue:     #448EAA;   /* Outer World                             */
  --yellow:   #F6BE3C;   /* How They Relate                         */
  --ink:      #1F1F1D;   /* black/charcoal — main dark blocks + text*/
  --brown:    #66513E;   /* stroke / secondary dark tone            */
  --pink:     #E86BA5;   /* question-band accent                    */

  /* Type families --------------------------------------------- */
  --font-display: "eckmannpsych-small", serif;
  --font-body:    "inter-18pt", system-ui, sans-serif;

  /* ---- TYPE SCALE — golden ratio (φ = 1.618) ----------------
     A modular scale stepped off a 1.25rem reading size. Adjacent
     roles relate by √φ (1.272); major jumps by φ. Every value is a
     fluid clamp so the proportions hold from phone to wide desktop. */
  --type-caption:  clamp(0.72rem, 0.69rem + 0.16vw, 0.78rem);   /* eyebrows, caps labels */
  --type-fine:     clamp(0.85rem, 0.80rem + 0.26vw, 0.98rem);   /* small UI labels */
  --type-body:     clamp(1.0625rem, 1.0rem + 0.5vw, 1.25rem);   /* reading copy        */
  --type-question: clamp(1.0625rem, 0.97rem + 0.5vw, 1.3rem);   /* question band       */
  --type-label:    clamp(1.15rem, 1.0rem + 0.9vw, 1.5rem);      /* sub labels, card desc (≈ body·√φ) */
  --type-title:    clamp(1.85rem, 1.1rem + 3.3vw, 3.15rem);     /* section titles  (≈ body·φ²)       */
  --type-display:  clamp(2.25rem, 1.2rem + 4.7vw, 4.1rem);      /* statement + footer (≈ title·φ)    */

  /* ---- SPACING SCALE — golden ratio --------------------------
     Steps are φ-powers (1, φ, φ², φ³, φ⁴) so whitespace breathes on
     the same proportional system as the type. --gutter is the SINGLE
     horizontal padding used on every full-width block. */
  --gutter:    clamp(1.5rem, 1rem + 4vw, 5rem);
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  clamp(1rem, 0.8rem + 1vw, 1.618rem);            /* φ        */
  --space-md:  clamp(1.618rem, 1.2rem + 1.8vw, 2.618rem);     /* φ²       */
  --space-lg:  clamp(2.618rem, 1.9rem + 3.2vw, 4.236rem);     /* φ³       */
  --space-xl:  clamp(4.236rem, 2.8rem + 6vw, 6.854rem);       /* φ⁴       */

  /* Motion + rules -------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hair: 1.5px solid var(--brown);   /* secondary dark tone for rules */
}

/* ----------------------------------------------------------------
   RESET / BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

em { font-weight: 400; font-style: italic; }

a { color: inherit; }

/* Screen-reader-only utility */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
  white-space: nowrap;
}

/* ================================================================
   01 — SCROLL HERO
   ================================================================ */
.hero {
  /* Tall section = the animation timeline. The taller it is, the
     slower / more deliberate the consolidation feels. */
  position: relative;
  height: 260vh;
  background: var(--cream);
}

/* Sticky stage pins the wordmarks to the viewport while we scroll
   through the hero's height. position:relative so the bio + cue can
   be absolutely placed against it. */
.hero__stage {
  position: relative;
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* The marks live in one centered grid cell. Every wordmark occupies
   the SAME cell (grid-area 1/1) so they stack and can overlap
   perfectly at the end. JS translates this whole container upward in
   the "rise" phase so the consolidated wordmark settles near the top
   of the page like a masthead. */
.hero__marks {
  display: grid;
  place-items: center;
  width: 100%;
  will-change: transform;
}

.wordmark {
  /* Psychedelic print wordmark — all stacked into one grid cell */
  grid-area: 1 / 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  line-height: 0.9;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-size: clamp(2.6rem, 13vw, 11rem);
  text-transform: uppercase;

  /* Screen-printed feel: dark-brown ink outline, fill painted on top */
  -webkit-text-stroke: 2.5px var(--brown);
  paint-order: stroke fill;

  /* JS writes transform + opacity each frame; keep it cheap */
  will-change: transform, opacity;
  user-select: none;
}

/* Wordmark inks */
.wordmark--red    { color: var(--red); }
.wordmark--blue   { color: var(--blue); }
.wordmark--yellow { color: var(--yellow); }
.wordmark--pink   { color: var(--pink); }
.wordmark--ink    { color: var(--ink); }   /* the "black" wordmark */

/* Scroll cue */
.hero__cue {
  position: absolute;
  bottom: clamp(1.5rem, 5vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--type-fine);
  font-style: italic;             /* editorial accent, not micro-caps */
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  transition: opacity 0.3s ease;
}
.hero__cue-arrow {
  font-size: 1.1rem;
  animation: cue-bob 1.8s var(--ease) infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ================================================================
   BIO — lives INSIDE the hero stage (no divider above it).
   Absolutely placed beneath where the risen wordmark settles, and
   faded/slid in by JS during the "rise" phase. The whole masthead
   (wordmark + bio) sits on one uninterrupted cream field.
   ================================================================ */
.hero__bio {
  position: absolute;
  top: 50%;                 /* JS adds translateY(-50%) to center it */
  left: 0;
  right: 0;
  padding: 0 var(--gutter);
  /* JS writes opacity + transform each frame */
  opacity: 0;
  will-change: transform, opacity;
}
.hero__bio-copy {
  max-width: 44ch;          /* comfortable editorial measure */
  margin: 0 auto;           /* keep the column centered in the frame */
  text-align: left;         /* ragged-right reads cleaner on screen than
                               justified (no rivers without hyphenation) */
  hyphens: none;
  font-size: var(--type-body);
  font-weight: 500;
  line-height: 1.55;        /* open leading for comfortable reading */
  letter-spacing: -0.003em; /* Inter optical tightening at size      */
}
/* Inline links in the bio — italic (like the names they replaced),
   underlined in red-orange, filling in on hover. */
.bio__link {
  font-style: italic;
  font-weight: 400;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.bio__link:hover { color: var(--red); }

/* ================================================================
   THE ORBIT — four questions revolving (on scroll) around WISDOM.
   Progressive enhancement: the default/no-JS/reduced-motion state
   is a clean centered stack (eyebrow · WISDOM · the four questions).
   When JS activates motion it adds `.is-live`, which switches the
   stage to a sticky 100vh stage and reveals the rotating ring.
   ================================================================ */
.orbit { position: relative; background: var(--cream); }

.orbit__stage {
  padding: var(--space-xl) var(--gutter);
  display: grid;
  place-items: center;
  gap: var(--space-lg);
  text-align: center;
}
.orbit.is-live .orbit__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0;
  gap: 0;
  /* visible so the centred image can sit above the stage during entry */
  overflow: visible;
}

/* Eyebrow — hand-drawn "Questions I keep circling" lettering.
   mix-blend-mode: multiply drops the white PNG background onto the cream
   field. JS sets the width (= orbit width) and top (clear of the orbit). */
.orbit__eyebrow {
  z-index: 6;
  margin: 0;
  text-align: center;
}
.orbit__mark {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
.orbit.is-live .orbit__eyebrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center bottom;
  opacity: 0;                       /* JS fades + scales it in on scroll */
  will-change: opacity, transform;
  /* width + top + opacity + transform written by JS */
}

/* Still centre word — dark fill + cream halo so it reads on the
   colour-shifting wheel behind it. */
.orbit__center {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 0.4rem + 7vw, 5.2rem);   /* modest on phones, big on desktop */
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--ink);
  -webkit-text-stroke: 2px var(--cream);
  paint-order: stroke fill;
}
.orbit.is-live .orbit__center {
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* Rotating ring (live only) */
.orbit__ring { display: none; }
.orbit.is-live .orbit__ring {
  display: block;
  position: absolute;
  inset: 0;
}
/* The wheel — a solid disc that cross-fades through the section
   colours as the active question changes (JS sets background-color). */
.orbit__halo {
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--ink);
  border-radius: 50%;
  background-color: var(--red);     /* JS updates per active question */
  transition: background-color 0.7s var(--ease);
  /* width/height set by JS */
}
/* Questions arced along the wheel's perimeter (SVG textPath). The whole
   SVG is sized + the inner group rotated by JS; per-question font-size +
   opacity are written each frame for the active emphasis. */
.orbit__svg {
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}
.orbit__arc {
  font-family: var(--font-body);
  font-weight: 500;
  fill: var(--ink);
  /* the kit only ships Inter 500 — a matching stroke fattens the glyphs
     for a genuinely bolder weight (not faux-bold). */
  stroke: var(--ink);
  stroke-width: 0.13;
  paint-order: stroke;
  stroke-linejoin: round;
}

/* Fallback / reduced-motion stack */
.orbit__list {
  list-style: none;
  display: grid;
  gap: var(--space-md);
  max-width: 26ch;
  font-size: var(--type-label);
  line-height: 1.2;
  color: var(--ink);
}
.orbit.is-live .orbit__list { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* never go live: keep the static stack */
  .orbit { height: auto !important; }
}

/* ================================================================
   STATEMENT
   ================================================================ */
.statement {
  background: var(--ink);
  color: var(--cream);
  padding: var(--space-xl) var(--gutter);
}
/* Hand-lettered statement (cream lettering on transparent — reads
   directly on the ink field, no blend mode). */
.statement { display: grid; place-items: center; }
.statement__hw { display: inline-block; }
.statement__mark {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: min(86vw, 22rem);
  max-height: 74vh;
  height: auto;
}

/* ================================================================
   WRITERS — pink field, ink hand-lettering (multiply drops the
   transparent/white ground so the dark strokes read on pink).
   ================================================================ */
.writers {
  background: var(--pink);
  padding: var(--space-xl) var(--gutter);
  display: grid;
  place-items: center;
}
.writers__hw { display: inline-block; }
.writers__mark {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: min(88vw, 34rem);
  max-height: 66vh;
  height: auto;
  mix-blend-mode: multiply;
}

/* ================================================================
   HANDWRITING TOOLTIP — a minor bubble with the typed text, for
   anyone who finds the cursive hard to read. Hover (and focus) shows.
   ================================================================ */
.has-tip { position: relative; }
/* keyboard users can focus the lettering to reveal the legibility tip */
.has-tip:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; border-radius: 4px; }
.has-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 0.5rem);        /* BELOW the image — never covers it */
  transform: translateX(-50%) translateY(-3px);
  width: max-content;
  max-width: min(68vw, 16rem);
  background: var(--ink);
  color: var(--cream);
  border: 1px solid rgba(242, 227, 202, 0.45);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-caption);   /* small + subtle */
  line-height: 1.3;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.4em 0.65em;
  border-radius: 7px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s var(--ease);
  z-index: 80;
}
.has-tip:hover::after,
.has-tip:focus-visible::after {
  opacity: 0.95;
  transform: translateX(-50%) translateY(0);
}

/* ================================================================
   ACCORDION SYSTEM
   ================================================================ */
.accordion { border-top: var(--hair); }

/* --- Major section ------------------------------------------- */
.section { border-bottom: var(--hair); }

/* The colored header bar (the click target) */
.section__bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--gutter);
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: var(--type-title);
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: -0.01em;        /* tighten large italic caps */
  color: var(--ink);
  transition: filter 0.25s ease;
}
.section__bar:hover { filter: brightness(1.04); }
.section--red    .section__bar { background: var(--red); }
.section--blue   .section__bar { background: var(--blue); color: var(--cream); }
.section--yellow .section__bar { background: var(--yellow); }

.section__label { display: flex; align-items: baseline; gap: 0.7ch; }
.section__num { font-variant-numeric: tabular-nums; }
.section__rule { opacity: 0.55; }

/* --- Plus / X icon (rotates 45° to become an X) -------------- */
.icon {
  position: relative;
  flex: 0 0 auto;
  width: clamp(1.4rem, 3.4vw, 2rem);
  height: clamp(1.4rem, 3.4vw, 2rem);
  transition: transform 0.4s var(--ease);
}
.icon::before, .icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  border-radius: 2px;
}
.icon::before { /* horizontal bar */
  width: 100%; height: 1.5px;
  transform: translate(-50%, -50%);
}
.icon::after {  /* vertical bar */
  width: 1.5px; height: 100%;
  transform: translate(-50%, -50%);
}
/* Open state: rotate the whole plus 45° → a clean X */
[aria-expanded="true"] > .icon { transform: rotate(45deg); }

/* --- Generic collapsible panel (height animated by JS) ------- */
.panel {
  height: 0;
  overflow: hidden;
  transition: height 0.45s var(--ease);
}
/* Without JS the panels can't be toggled — leave them open so the
   prerendered content stays fully readable. */
.no-js .panel { height: auto; }
.no-js .icon { display: none; }

/* The question shown at the top of an opened section.
   PINK band to set the central question apart. Same Inter family as
   everything else but differentiated: where the section bar above is
   ITALIC, the question is roman/regular with open tracking — a quiet
   shift in voice. Kept to one line where it fits (no forced breaks). */
.section__question {
  background: var(--pink);
  color: var(--ink);
  border-top: var(--hair);   /* consistent rule between the bar + band */
  padding: var(--space-md) var(--gutter);
  font-size: var(--type-question);
  font-weight: 400;
  font-style: normal;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.07em;        /* tracked caps for the quiet voice */
  text-wrap: balance;
}

/* --- Subcategory row ----------------------------------------- */
.sub { border-top: var(--hair); }

.sub__bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--gutter);
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-label);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.05em;         /* tracked caps for the labels */
  transition: filter 0.2s ease;
}
.sub__bar:hover { filter: brightness(0.97); }

/* Label + its leading turn-arrow. The arrow is indented and a gap
   pushes the name further right, giving the stacked rows a stepped,
   margin-note rhythm. */
.sub__lead {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.sub__arrow {
  flex: 0 0 auto;
  width: clamp(1.4rem, 3.4vw, 2.1rem);
  height: auto;
  margin-left: var(--space-xs);   /* indent inward */
  transition: transform 0.3s var(--ease);
}
/* A small nudge on hover so the arrow feels alive */
.sub__bar:hover .sub__arrow { transform: translateX(3px); }

/* Alternating row colors (set per-row by JS: --on / --off) */
.sub--cream .sub__bar { background: var(--cream); color: var(--ink); }
.sub--dark  .sub__bar { background: var(--ink); color: var(--cream); }

/* --- Content card (revealed beneath an opened subcategory) --- */
.card {
  padding: var(--space-lg) var(--gutter);
  display: grid;
  gap: var(--space-md);
}
/* Card color cycle */
.card--red    { background: var(--red);        color: var(--cream); }
.card--blue   { background: var(--blue);       color: var(--cream); }
.card--yellow { background: var(--yellow);     color: var(--ink); }
.card--cream  { background: var(--cream);      color: var(--ink); }
.card--dark   { background: var(--ink);color: var(--cream); }

.card__desc {
  max-width: 40ch;
  font-size: var(--type-label);
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.card__topics {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  font-size: var(--type-fine);
  letter-spacing: 0.03em;
  text-transform: lowercase;
}
.card__topics li {
  padding: 0.35em 0.9em;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  opacity: 0.92;
}

.card__explore {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  font-size: var(--type-fine);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  transition: gap 0.25s var(--ease);
}
.card__explore:hover { gap: 1.1ch; }

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  background: var(--cream);
  border-top: var(--hair);
  padding: var(--space-xl) var(--gutter) var(--space-lg);
}
.footer__copy {
  max-width: 17ch;
  margin: 0 auto;            /* center the headline in the frame */
  font-size: var(--type-display);
  font-weight: 500;
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: -0.02em;   /* tight display tracking */
  text-align: center;        /* centered in frame */
  text-wrap: balance;
}
.footer__links {
  margin: var(--space-lg) auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* center the row(s) of buttons */
  gap: var(--space-xs);
  max-width: 52rem;
}

/* Colored screen-print "sticker" buttons — one per palette hue, each
   with a dark ink outline + hard offset shadow for the printed feel. */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.7em 1.3em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--type-fine);
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.pill:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
}
.pill:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* One hue each, with legible text on top */
.pill--red    { background: var(--red);    color: var(--cream); }
.pill--blue   { background: var(--blue);   color: var(--cream); }
.pill--yellow { background: var(--yellow); color: var(--ink); }
.pill--pink   { background: var(--pink);   color: var(--ink); }
.pill--brown  { background: var(--brown);  color: var(--cream); }
.pill--ink    { background: var(--ink);    color: var(--cream); }
.pill--cream  { background: var(--cream);  color: var(--ink); }

.footer__copyright {
  margin-top: var(--space-lg);
  text-align: center;        /* center the copyright line */
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-fine);
  letter-spacing: 0;
  opacity: 0.7;
}

/* ================================================================
   MOTION PREFERENCES
   If the user prefers reduced motion, skip the scroll choreography:
   show a single Red-Orange wordmark and reveal the bio immediately.
   (JS also reads this flag.)
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: 100vh; }
  .wordmark[data-fade="1"] { display: none; }
  /* Sit the masthead at the top with the bio below, statically. */
  .hero__marks { align-self: start; margin-top: 8vh; }
  .hero__bio { top: 28%; opacity: 1; }
  .hero__cue { display: none; }
}