/* ==========================================================================
   Na-Thing — mockup C2 "Chapters, one long page" (Spec W-1 v0.2)
   C reworked: the wordmark travels from `Nothing` to `Na-Thing.` (§3), the team
   chapter is large two-column cards with portraits and no employee numbers (§2),
   and Work lists four dated traces. Everything else is C as it was.
   Every colour, face and spacing step is a token on :root.
   ========================================================================== */

@import url('../../_shared/fonts/fonts.css');

/* Visual 4 rains Justin's own sentence as Hangul jamo (spec W-1 v0.2.2). Its own subset,
   its own unicode-range: the shared `내 꺼` subset in `_shared/fonts/` — which A, B and C
   also load — is not touched, and the two ranges do not overlap. */
@font-face {
  font-family: 'Noto Serif KR';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/noto-serif-kr-jamo.woff2') format('woff2');
  unicode-range: U+3131-3132, U+3134, U+3137, U+3139, U+3141, U+3145-3148, U+314e-3150, U+3153-3155, U+3157, U+315c, U+3161, U+3163;
}

:root {
  /* --- palette: sand ------------------------------------------------------ */
  --c-paper: #efe7da;
  --c-paper-deep: #e7ddcb;
  --c-walnut: #6b4423;
  --c-ink: #292320;
  --c-ink-soft: #6d6157;
  --c-rule: #d3c4ad;

  /* --- team accents (name underline only) --------------------------------- */
  --c-chloe: #f4c2c2;
  --c-mei: #264348;
  --c-max: #a49c92;
  --c-jack: #a49c92;

  /* --- type --------------------------------------------------------------- */
  --f-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-kr: 'Noto Serif KR', var(--f-display);

  --t-hero: clamp(2.75rem, 8.4vw, 7rem);
  --t-chapter: clamp(1.375rem, 2.5vw, 2rem);
  --t-title: clamp(2rem, 4.6vw, 3.25rem);
  --t-body: 1.0625rem;
  --t-answer: 1.0625rem; /* 17px — spec §2 asks for >= 16px */
  --t-name: 1.5rem; /* 24px — spec §2 asks for >= 22px */
  --t-role: 0.6875rem; /* 11px — spec §2: 11-12px */
  --t-small: 0.875rem;
  --t-micro: 0.75rem;
  --t-number: clamp(2.5rem, 6vw, 5.5rem);

  --lh-tight: 1.08;
  --lh-chapter: 1.45;
  --lh-body: 1.8;

  /* --- spacing scale ------------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 5rem;
  --s-9: 8rem;
  --s-10: 12rem;

  /* --- page geometry ------------------------------------------------------ */
  --w-page: 1200px;
  --w-margin: 13rem; /* the left margin the chapter numbers live in */
  --w-measure: 34ch;
  --w-answer: 60ch;
  --w-team: 1120px;
  --w-ledger-mark: 8rem;
  --w-gutter: 24px;
  --w-portrait: 160px; /* 240px from 1024 up — spec §2 */
  --w-initial: 96px;

  --dur-fade: 900ms;
  --dur-morph: 1400ms; /* the wordmark cross-fade — spec §3 asks for >= 1200ms */
}

/* --------------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

a {
  color: inherit;
}

.kr {
  font-family: var(--f-kr);
  font-style: normal;
}

.page {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 0 var(--w-gutter);
}

/* ------------------------------------------------------------------ chrome */

.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--c-paper);
  border-bottom: 1px solid transparent;
}

.topbar__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) 0;
}

.wordmark {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-walnut);
  text-decoration: none;
}

/* ------------------------------------------------- the wordmark journey (§3)

   `Nothing` -> `Nathing` -> `Na-thing` -> `Na-Thing` -> `Na-Thing.`, one glyph at a
   time, bound to scroll position. Two kinds of slot:

     .wm__slot   two glyphs stacked in the same grid cell, cross-faded. The cell takes
                 the width of the wider glyph, so nothing reflows when they swap.
     .wm__grow   a glyph that is not there yet (the hyphen, the full stop). The slot
                 grows from width 0 to the glyph's natural width over the same duration,
                 so its neighbours slide instead of jumping. app.js measures that width
                 once the webfont is ready and writes it to --wm-w-*; the em fallbacks
                 below keep the effect if the script never runs.

   The link carries a constant aria-label, the slots are aria-hidden: a screen reader
   hears "Na-Thing." from the first byte and never hears the journey.
   -------------------------------------------------------------------------- */

.wm {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.wm__slot {
  display: inline-grid;
}

.wm__slot > span {
  grid-area: 1 / 1;
  transition: opacity var(--dur-morph) ease;
}

.wm__from {
  opacity: 1;
}

.wm__to {
  opacity: 0;
}

.wm__grow {
  display: inline-grid;
  width: 0;
  transition: width var(--dur-morph) ease;
}

.wm__grow > span {
  grid-area: 1 / 1;
  width: max-content;
  justify-self: center;
  opacity: 0;
  transition: opacity var(--dur-morph) ease;
}

.wm.is-1 .wm__s-a .wm__from { opacity: 0; }
.wm.is-1 .wm__s-a .wm__to { opacity: 1; }

.wm.is-2 .wm__s-hyphen { width: var(--wm-w-hyphen, 0.3em); }
.wm.is-2 .wm__s-hyphen > span { opacity: 1; }

.wm.is-3 .wm__s-t .wm__from { opacity: 0; }
.wm.is-3 .wm__s-t .wm__to { opacity: 1; }

.wm.is-4 .wm__s-dot { width: var(--wm-w-dot, 0.26em); }
.wm.is-4 .wm__s-dot > span { opacity: 1; }

.nav {
  display: flex;
  gap: var(--s-5);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav a {
  color: var(--c-ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.nav a:hover {
  color: var(--c-walnut);
  border-bottom-color: var(--c-walnut);
}

.colophon {
  border-top: 1px solid var(--c-rule);
  padding: var(--s-7) 0 var(--s-8);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--c-ink-soft);
}

/* -------------------------------------------------------------------- hero */

.hero {
  min-height: calc(100vh - 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-8) 0 var(--s-9);
}

.hero__line {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  max-width: 13ch;
}

/* Decoration, drawn by CSS so it never reaches the DOM as text. */
.hero__arrow {
  margin-top: var(--s-8);
  font-size: 1.25rem;
  color: var(--c-ink-soft);
  line-height: 1;
}

.hero__arrow::before {
  content: '\2193';
}

/* ---------------------------------------------------------------- chapters */

/* Each paragraph is a chapter block: the number set large and pale in the left
   margin, the sentence at reading size beside it. The number is generated
   content — decoration, never page text. */
.chapter {
  position: relative;
  padding: 0 0 var(--s-9) var(--w-margin);
}

.chapter::before {
  content: attr(data-num);
  position: absolute;
  left: 0;
  top: -0.35em;
  font-family: var(--f-display);
  font-size: var(--t-number);
  font-weight: 400;
  line-height: 1;
  color: var(--c-walnut);
  opacity: 0.22;
}

.chapter p {
  margin: 0;
  font-size: var(--t-chapter);
  line-height: var(--lh-chapter);
  max-width: var(--w-measure);
}

.chapter--last p {
  max-width: 28ch;
}

.signature {
  display: block;
  margin-top: var(--s-6);
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-body);
  color: var(--c-ink-soft);
}

.onward {
  margin: 0;
  padding: var(--s-6) 0 var(--s-9) var(--w-margin);
  font-size: var(--t-small);
  color: var(--c-ink-soft);
}

.onward a {
  color: var(--c-walnut);
  text-decoration: none;
  border-bottom: 1px solid var(--c-rule);
}

/* Soft fade-in of home paragraphs on scroll. */
.fade {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-fade) ease, transform var(--dur-fade) ease;
}

.fade.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* The wordmark still travels — it just arrives instantly (spec §3). */
  .wm__slot > span,
  .wm__grow,
  .wm__grow > span {
    transition: none;
  }
}

/* ------------------------------------------------------- chapter openings */

.part {
  padding-top: var(--s-8);
  border-top: 1px solid var(--c-rule);
  scroll-margin-top: 5rem;
}

.part__label {
  margin: 0 0 var(--s-5);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.part__title {
  margin: 0 0 var(--s-5);
  font-family: var(--f-display);
  font-size: var(--t-title);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  max-width: 18ch;
}

.part__note {
  margin: 0 0 var(--s-8);
  max-width: 46ch;
  font-size: var(--t-small);
  color: var(--c-ink-soft);
}

/* -------------------------------------------------------------------- team */

/* One column on a phone, two from 640 up. Justin is last and, where there are two
   columns, spans both (spec §2). */
.team {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8) var(--s-7);
  max-width: var(--w-team);
  padding-bottom: var(--s-9);
}

.member {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.member--chloe { --card-accent: var(--c-chloe); }
.member--mei { --card-accent: var(--c-mei); }
.member--max { --card-accent: var(--c-max); }
.member--jack { --card-accent: var(--c-jack); }

.member__portrait {
  width: var(--w-portrait);
  height: var(--w-portrait);
  border-radius: 6px;
  border: 1px solid var(--c-rule);
  background: var(--c-paper-deep);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Justin's images are landscape 1536x1024 and the block is square, so the crop is done
   by the browser, never by re-encoding the file. The faces sit at about 45% from the
   left and 30% from the top. */
.member__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 30%;
  display: block;
}

/* No portrait file for Max and Jack yet: an initial circle inside the same block. */
.member__initial {
  width: var(--w-initial);
  height: var(--w-initial);
  border-radius: 50%;
  border: 1px solid var(--c-rule);
  background: var(--c-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--c-walnut);
}

.member__initial::before {
  content: attr(data-initial);
}

/* The one person who exists has no photo — the block holds a visual instead (spec §4). */
.member__portrait--visual {
  background: var(--c-paper-deep);
  padding: 0;
}

.visual {
  display: block;
  width: 100%;
  height: 100%;
}

.member__name {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-name);
  font-weight: 600;
  line-height: 1.2;
  align-self: flex-start;
  border-bottom: 2px solid var(--card-accent, var(--c-rule));
  padding-bottom: 2px;
}

/* Justin's card carries no team accent. */
.member--justin .member__name {
  border-bottom-color: transparent;
}

.member__role {
  margin: -0.5rem 0 0;
  font-size: var(--t-role);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.member__answer {
  margin: 0;
  max-width: var(--w-answer);
  font-size: var(--t-answer);
  line-height: 1.75;
}

.member__answer[data-placeholder='true']::before {
  content: 'draft';
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--f-body);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* -------------------------------------------------------------------- work */

/* Four traces. The label column carries the date; there is no line under a trace.
   Copy v0.6.3 puts the date and the sentence on separate lines, with no dash between
   them, so they are two elements in two grid columns rather than one hanging-indent
   paragraph. */
.ledger {
  list-style: none;
  margin: 0 0 var(--s-8);
  padding: 0;
}

.ledger li {
  display: grid;
  grid-template-columns: var(--w-ledger-mark) minmax(0, 1fr);
  align-items: baseline;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--c-rule);
}

.ledger li:first-child {
  border-top: 1px solid var(--c-rule);
}

.ledger__line {
  margin: 0;
  max-width: 66ch;
}

.ledger__mark {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.25rem;
  line-height: var(--lh-body);
  color: var(--c-walnut);
}

.closing {
  padding-bottom: var(--s-8);
}

.closing__head {
  margin: 0 0 var(--s-5);
  font-family: var(--f-display);
  font-size: var(--t-title);
  font-weight: 400;
  line-height: var(--lh-tight);
  max-width: 16ch;
}

.closing__body {
  margin: 0;
  max-width: 52ch;
}

/* --------------------------------------------------------------------- 404 */

.lost {
  padding: var(--s-9) 0 var(--s-10);
}

.lost__line {
  margin: 0 0 var(--s-6);
  font-family: var(--f-display);
  font-size: var(--t-title);
  font-weight: 400;
  line-height: var(--lh-tight);
  max-width: 16ch;
}

.lost a {
  font-size: var(--t-small);
  color: var(--c-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--c-rule);
}

/* ---------------------------------------------------------------- redirect */

/* team.html and work.html keep the three-page URL structure alive; they hand the
   visitor straight to the matching chapter. */
.relay {
  padding: var(--s-9) 0 var(--s-10);
}

.relay__line {
  margin: 0 0 var(--s-5);
  font-family: var(--f-display);
  font-size: var(--t-chapter);
  max-width: 24ch;
}

.relay a {
  font-size: var(--t-small);
  color: var(--c-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--c-rule);
}

/* ------------------------------------------------- portrait.html (comparison) */

/* Four blocks at the card's real size, labelled 1 2 3 4. A comparison aid for Justin, not
   a page of the site (spec v0.2 §4, v0.2.2 §2). Four 240-px blocks plus gaps need 1104 px
   and the column is 1120 wide, so they fit at full size on a wide screen; below that the
   grid shrinks all four equally rather than dropping one to the next row. */
.compare {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
  max-width: var(--w-team);
  padding: var(--s-8) 0 var(--s-9);
}

.compare__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: center;
}

/* On this page the block is elastic up to its real size, so four of them always stay equal. */
.compare-page .member__portrait {
  width: 100%;
  height: auto;
  max-width: var(--w-portrait);
  aspect-ratio: 1 / 1;
}

.compare__label {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.25rem;
  color: var(--c-ink-soft);
}

/* ------------------------------------------------------------------ tablet */

@media (min-width: 640px) {
  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member--justin {
    grid-column: 1 / -1;
  }
}

/* ----------------------------------------------------------------- desktop */

@media (min-width: 1024px) {
  :root {
    --w-portrait: 240px;
  }
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 900px) {
  :root {
    --w-margin: 0rem;
  }

  .chapter {
    padding-bottom: var(--s-8);
    padding-top: 4.25rem;
  }

  .chapter::before {
    top: 0;
    font-size: 3rem;
  }

  .onward {
    padding-left: 0;
  }

  .ledger li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-2);
  }
}

/* Tablet: two by two. */
@media (max-width: 1023px) {
  .compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .team {
    gap: var(--s-7);
  }

  /* Phone: one under the other. */
  .compare {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .compare__item {
    align-items: flex-start;
  }
}