/* ================================================================
   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-caption);
  font-weight: 500;
  letter-spacing: 0.3em;          /* generous eyebrow tracking */
  text-transform: uppercase;
  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;          /* editorial measure for justified copy */
  margin: 0 auto;           /* keep the column centered in the frame */
  text-align: justify;      /* justified body copy */
  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); }

/* ================================================================
   STATEMENT
   ================================================================ */
.statement {
  background: var(--ink);
  color: var(--cream);
  padding: var(--space-xl) var(--gutter);
}
.statement__copy {
  max-width: 17ch;
  margin: 0 auto;            /* center the block in the frame */
  font-size: var(--type-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;   /* tight display tracking */
  text-transform: uppercase;
  text-align: center;        /* centered in frame */
  text-wrap: balance;
}

/* ================================================================
   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);
}

/* 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-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;        /* wide tracking, editorial caption */
  font-size: var(--type-caption);
  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-weight: 500;
  font-size: var(--type-caption);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  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; }
}