/* =============================================================
   Nude Dog · Who we are? · Longform companion essay · v1
   =============================================================
   Extends 06_styles.css. Inherits every palette role, every
   typographic scale, every spacing token. Adds only what the
   essay form requires: a reading column, pull-quote islands,
   the desktop / mobile copy toggle, the cross-reference link,
   and the inline marginal labels for Section 3.
   ============================================================= */

/* ---- E2 · Body copy +20% — body and description tokens scaled
   ×1.2 at every breakpoint where the parent stylesheet overrides
   them. Tag, headline, form-name, form-frame, method, anchor,
   nav scales remain untouched. -------------------------------- */
:root {
  --size-body:        21.6px;   /* 18 × 1.2 */
  --size-description: 26.4px;   /* 22 × 1.2 */
}

@media (max-width: 48rem) {
  :root {
    --size-description: 25.2px; /* 21 × 1.2 */
  }
}

@media (max-width: 36rem) {
  :root {
    --size-description: 24px;   /* 20 × 1.2 */
  }
}

@media (max-width: 24rem) {
  :root {
    --size-body: 20.4px;        /* 17 × 1.2 */
  }
}

/* ---- Reading column · narrower than the panel page ---- */
.essay {
  max-width: 44rem;
  margin-inline: auto;
}

@media (min-width: 64rem) {
  .essay { max-width: 46rem; }
}

/* ---- Cross-reference link in masthead ------------------- */
.masthead__crossref {
  font-family: var(--sans);
  font-size: var(--size-page-mark);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
  margin-inline-start: auto;
  white-space: nowrap;
}

.masthead__crossref:hover,
.masthead__crossref:focus { color: var(--accent); }

/* .masthead is now flex (06_styles.css E5 update). The crossref
   uses margin-inline-start: auto to sit on the right. */

/* ---- Essay header ---------------------------------------- */
.essay-header {
  margin-block-start: calc(var(--baseline) * 1.25);
  margin-block-end:   calc(var(--baseline) * 2.5);
  text-wrap: balance;
}

.essay-header .tag { margin-block-end: var(--baseline); }

.essay-header .headline--essay {
  font-size: var(--size-headline-md);
  line-height: 1.05;
  letter-spacing: -0.018em;
  font-style: italic;
  font-variation-settings: "opsz" 48;
  text-wrap: balance;
  margin-block-end: var(--baseline);
  font-weight: 400;
  color: var(--ink);
}

@media (max-width: 48rem) {
  .essay-header .headline--essay {
    font-size: var(--size-headline-sm);
  }
}

.essay-header .description {
  font-size: var(--size-description-sm);
  font-style: italic;
  color: var(--ink-2);
  line-height: 1.45;
}

/* ---- Section structure ----------------------------------- */
.section {
  margin-block-end: calc(var(--baseline) * 2.5);
  padding-block-start: calc(var(--baseline) * 0.5);
}

.section + .section {
  border-block-start: 1px solid var(--rule-soft);
  padding-block-start: calc(var(--baseline) * 1.75);
}

.section__mark {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin-block-end: 0.5rem;
  font-weight: 500;
}

.section__heading {
  font-family: var(--serif);
  font-size: var(--size-headline-sm);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-block-end: calc(var(--baseline) * 1.25);
  text-wrap: balance;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "opsz" 36;
}

@media (max-width: 48rem) {
  .section__heading { font-size: var(--size-headline-xs); }
}

/* ---- Body prose ------------------------------------------ */
.section p {
  font-family: var(--serif);
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--ink);
  margin-block-end: var(--baseline);
  text-wrap: pretty;
  font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1;
}

.section p:last-child { margin-block-end: 0; }

.section p em { font-style: italic; color: var(--ink); }

.section p .figure-num { font-variant-numeric: tabular-nums; }

/* ---- Pull-quote islands ---------------------------------- */
.pullquote {
  margin-block: calc(var(--baseline) * 1.5) calc(var(--baseline) * 1.5);
  padding-block: calc(var(--baseline) * 0.25);
  padding-inline: 0;
  border: none;
  display: block;
  text-align: start;
}

.pullquote__text {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--size-description) * 1.15);
  line-height: 1.32;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-wrap: balance;
  font-weight: 400;
  font-variation-settings: "opsz" 32;
  margin-block-end: 0.75rem;
}

@media (max-width: 48rem) {
  .pullquote__text {
    font-size: calc(var(--size-description) * 1.02);
  }
}

.pullquote__attribution {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--ink-2);
  font-weight: 500;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* ---- Desktop / mobile copy toggle ------------------------ */
.copy-desktop { display: block; }
.copy-mobile  { display: none;  }

@media (max-width: 48rem) {
  .copy-desktop { display: none;  }
  .copy-mobile  { display: block; }
}

/* ---- E3 · mobile-max toggle button + override ------------- */
.mobile-max-toggle {
  display: none;
  font-family: var(--sans);
  font-size: var(--size-tag);
  letter-spacing: 0.06em;
  background: transparent;
  border: 1px solid var(--rule);
  padding: 0.5rem 0.85rem;
  color: var(--ink-secondary);
  text-transform: lowercase;
  font-weight: 400;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  line-height: 1;
}

@media (max-width: 48rem) {
  .mobile-max-toggle {
    display: inline-block;
    margin: var(--baseline) 0;
  }
}

.mobile-max-toggle[data-state="on"] {
  color: var(--accent);
  border-color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* When mobile-max is engaged, the desktop (full-length) copy is
   shown in place of the mobile (condensed) copy. Only takes effect
   at the same breakpoint where the toggle itself is visible. */
@media (max-width: 48rem) {
  body.full-text-mode .copy-mobile  { display: none;  }
  body.full-text-mode .copy-desktop { display: block; }
}

/* ---- Central figure: reset / compound time-strip --------- */
.timestrip {
  margin-block: calc(var(--baseline) * 1.75);
  padding-block-start: calc(var(--baseline) * 1);
  padding-block-end:   calc(var(--baseline) * 0.5);
  border-block-start: 1px solid var(--rule);
}

.timestrip__svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* E1 · two-SVG split — desktop SVG above 48rem, mobile reconstruction
   below. Same encoding (ink = RESETS, accent = COMPOUNDS) holds at
   every width. */
.timestrip__svg--mobile  { display: none; }
.timestrip__svg--desktop { display: block; }

@media (max-width: 48rem) {
  .timestrip__svg--mobile  { display: block; }
  .timestrip__svg--desktop { display: none;  }
}

.timestrip__caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--size-form-frame);
  color: var(--ink-2);
  margin-block-start: calc(var(--baseline) * 0.625);
  line-height: 1.45;
}

.timestrip__caption-prime {
  font-family: var(--sans);
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--size-method-prime);
  letter-spacing: var(--track-caps-sub);
  color: var(--ink);
  margin-inline-end: 0.4em;
  font-weight: 500;
}

/* ---- Section 3 inline functions marginalia --------------- */
.functions-list {
  margin-block: var(--baseline);
  padding-inline-start: var(--gutter);
  border-inline-start: 1px solid var(--rule-light);
  display: grid;
  gap: calc(var(--baseline) * 0.5);
  list-style: none;
  padding-block: 0;
}

.functions-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.875rem;
  align-items: baseline;
}

.functions-list__mark {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: var(--track-caps-sub);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.functions-list__label {
  font-family: var(--serif);
  font-size: var(--size-body);
  color: var(--ink);
  line-height: 1.45;
}

.functions-list__label em { font-style: italic; }

.functions-list__label strong {
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}

/* ---- Footer block ---------------------------------------- */
.essay-footer {
  margin-block-start: calc(var(--baseline) * 3);
  padding-block: var(--baseline);
  border-block-start: 1px solid var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--size-form-frame);
  color: var(--ink-2);
  line-height: 1.45;
}

.essay-footer a {
  color: var(--ink-2);
  border-block-end: 1px dotted var(--rule);
}

.essay-footer a:hover,
.essay-footer a:focus { color: var(--accent); border-block-end-color: var(--accent); }

/* ---- Engagement names list in Section 5 ------------------ */
.engagements {
  list-style: none;
  padding: 0;
  margin-block: var(--baseline);
  display: grid;
  gap: var(--baseline);
}

.engagements li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
}

.engagements__name {
  font-family: var(--serif);
  font-size: var(--size-form-name);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.engagements__note {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--size-body);
  color: var(--ink-2);
  line-height: 1.5;
}

/* ---- Founder chord (Section 5) --------------------------- */
.chord {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  margin-block: var(--baseline);
  line-height: 1.6;
}

.chord__sep { color: var(--ink-3); margin-inline: 0.4em; }

/* ---- Risks block (Section 7) ----------------------------- */
.risks {
  list-style: none;
  padding: 0;
  margin-block: var(--baseline);
  display: grid;
  gap: calc(var(--baseline) * 0.75);
  counter-reset: risk;
}

.risks li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: 0.625rem;
  padding-block: calc(var(--baseline) * 0.375);
  border-block-end: 1px dotted var(--rule-light);
  counter-increment: risk;
}

.risks li:last-of-type { border-block-end: none; }

.risks li::before {
  content: counter(risk, upper-roman);
  font-family: var(--sans);
  font-size: var(--size-tag);
  letter-spacing: var(--track-caps-sub);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1.55;
}

.risks__name {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  font-size: var(--size-body);
  line-height: 1.45;
  margin-block-end: 0.25rem;
}

.risks__body {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-2);
  font-size: var(--size-body);
  line-height: 1.5;
}

/* ---- Terminal pull quote (final line) -------------------- */
.pullquote--terminal {
  margin-block-start: calc(var(--baseline) * 2);
  margin-block-end:   calc(var(--baseline) * 1);
  padding-block: var(--baseline);
  border-block-start: 1px solid var(--accent);
}

.pullquote--terminal .pullquote__text {
  font-size: calc(var(--size-description) * 1.25);
}

@media (max-width: 48rem) {
  .pullquote--terminal .pullquote__text {
    font-size: calc(var(--size-description) * 1.05);
  }
}