/* ==========================================================================
   dannyflorian.com — Danny Florián, Staff / Principal Product Designer
   Editorial paper-and-ink system. Serif display, sans body, mono labels.
   ========================================================================== */

/* --- 1. Tokens --------------------------------------------------------- */

:root {
  --paper:      #f0efe9;
  --paper-card: #fbfaf7;
  --surface:    #e5e6e0;
  --surface-2:  #e3e0d5;  /* darker warm tan — recessed segmented-control track */
  --ink:        #17251f;
  --ink-2:      #535d58;
  --ink-3:      #6f7670;
  --rule:       #c9cbc4;
  --rule-soft:  #dcdcd4;
  --accent:     #2e5d53;
  --accent-lo:  #4a7a70;
  --teal:       #38848b;  /* the accent mark in the wordmark */
  --teal-ink:   #2a666c;  /* darkened for text contrast on paper */

  /* Dark contact panel. --teal only reaches 3.5:1 on --ink-deep, so the accent
     is lifted to --teal-bright, which clears 4.5:1 at any size. */
  --ink-deep:      #112a2d;
  --on-dark:       #f0efe9;
  --on-dark-muted: #8fa3a5;
  --on-dark-rule:  rgb(255 255 255 / 0.15);
  --teal-bright:   #4aa3ab;

  --serif: "Source Serif 4", "Source Serif Pro", Iowan Old Style, Charter,
           Georgia, "Times New Roman", serif;
  --sans:  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
           Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
           Consolas, monospace;

  --gutter: 2.5rem;
  --measure: 68ch;
  --shell: 1366px;
  --masthead-h: 66px; /* what the sticky view toggle parks beneath */
}

/* --- 2. Reset ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--surface); color: var(--ink); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; font-family: var(--mono); font-size: 0.75rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* --- 3. Shell ---------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.rule {
  border: 0;
  height: 1px;
  margin: 0;
  background-image: repeating-linear-gradient(
    to right, var(--rule) 0 2px, transparent 2px 7px
  );
}

.rule--solid { background-image: none; background-color: var(--rule-soft); }

/* --- 4. Type primitives ------------------------------------------------ */

.label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.label--accent { color: var(--accent); }
.label--ink    { color: var(--ink); }

.display {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.021em;
  line-height: 1.07;
  text-wrap: balance;
}

.display em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.lede {
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.68;
  max-width: 53ch;
}

.prose {
  color: var(--ink-2);
  max-width: var(--measure);
  font-size: 1.0625rem;
  line-height: 1.72;
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.num {
  font-family: var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
}

/* --- 5. Site header ---------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}

/* Centred, not baseline-aligned: the wordmark is now an image whose bottom edge
   is the descender of the "y", which would hang the logo too high on a baseline. */
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
}

.wordmark {
  display: block;
  line-height: 0;
  text-decoration: none;
  color: var(--ink);
}

.wordmark img {
  height: 25px;
  width: auto;
  display: block;
}

.nav { display: flex; gap: 1.75rem; }
.nav a {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.16s ease;
}
.nav a:hover, .nav a[aria-current] { color: var(--ink); }

/* --- 6. Home: hero ----------------------------------------------------- */

.hero { padding-block: 5.5rem 4.5rem; }

.hero__eyebrow { margin-bottom: 1.75rem; }

.hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.25rem);
  margin-bottom: 1.75rem;
  max-width: 24ch;
  hyphens: none;
}

/* Keep the hyphenated accent phrase whole; a break at its hyphen reads as an
   accident. Short enough to stay safe down to 320px. */
.hero h1 em { white-space: nowrap; }

.hero .lede { margin-bottom: 2.25rem; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: color-mix(in srgb, var(--teal) 13%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--teal) 42%, transparent);
  border-radius: 999px;
  padding: 0.5rem 0.9375rem 0.5rem 0.8125rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal-ink);
}

.status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent);
  flex: none;
}

/* --- 7. Section frame -------------------------------------------------- */

.section { padding-block: 4rem; }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}

.section__title {
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  max-width: 27ch;
  margin-bottom: 2.5rem;
}

/* Headline carrying a standfirst underneath it: close the gap between the two
   so they read as one block, and let the standfirst hold the section's space. */
.section__title--lede { margin-bottom: 1.125rem; }
.section__lede {
  margin-bottom: 2.75rem;
  text-wrap: balance; /* short enough to orphan its last word otherwise */
}

/* --- 8. Home: work list ------------------------------------------------ */

.work { border-top: 1px solid var(--rule-soft); }

.work__item {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: stretch;
  padding-block: 1.875rem;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}

/* The media cell is a plain div so it stretches reliably to the row height — a
   bare <img> does not, because a replaced element with an intrinsic ratio sizes
   itself instead. The row height comes from the text column, so the tile is
   never shorter than the copy beside it, whatever the image's own proportions. */
.work__media {
  position: relative;
  align-self: stretch;
  min-height: 148px;
}

/* Absolutely positioned so the image contributes nothing to sizing at all —
   otherwise `height: 100%` against an auto-height parent falls back to the
   image's intrinsic height and the tile silently sets the row instead. */
.work__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: 16px;
  filter: saturate(0.72) contrast(0.96);
  transition: filter 0.2s ease;
}

/* A transparent brand graphic rather than a photograph: show it whole on a tile
   instead of cropping into it. */
.work__thumb--contain {
  object-fit: contain;
  background: var(--paper-card);
  padding: 0.625rem;
}

.work__item:hover .work__thumb { filter: none; }

.work__title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.work__title a { text-decoration: none; }
.work__title a::after {
  content: ""; position: absolute; inset: 0;
}
.work__title a:hover { color: var(--accent); }

.work__blurb {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.62;
  max-width: 52ch;
  margin-bottom: 0.9375rem;
}

.tags { display: flex; flex-wrap: wrap; gap: 0.4375rem; list-style: none; }

.tags li {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.25rem 0.4375rem;
  white-space: nowrap;
}

.work__meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  white-space: nowrap;
}

.work__cta { color: var(--accent); }

/* --- 9. Home: practice cards ------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
}

.card {
  background: var(--paper-card);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 1.375rem 1.375rem 1.5rem;
}

.card p {
  margin: 0.9375rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-2);
}

/* --- 10. Home: background + colophon ----------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 4rem;
}

.timeline { list-style: none; }

.timeline li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.0625rem;
  border-bottom: 1px solid var(--rule-soft);
}
.timeline li:first-child { border-top: 1px solid var(--rule-soft); }

.timeline__role { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.timeline__detail { font-size: 0.875rem; color: var(--ink-3); margin-top: 0.125rem; }

.stack + .stack { margin-top: 2rem; }
.stack p { font-size: 0.9375rem; color: var(--ink-2); margin: 0.75rem 0 0; }
.stack a { color: var(--accent); text-underline-offset: 3px; }

/* --- 11. Contact ------------------------------------------------------- */

.contact { padding-block: 3rem 4rem; }

/* Dark panel that closes the page. */
.callout {
  background: var(--ink-deep);
  border-radius: 20px;
  padding: clamp(1.75rem, 5vw, 3.75rem);
  color: var(--on-dark);
}

.callout__status {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin: 0 0 2.5rem;
}

.callout__status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 0 3px rgb(74 163 171 / 0.22);
  flex: none;
}

.callout__lede {
  font-size: clamp(1.25rem, 2.6vw, 1.9375rem);
  line-height: 1.34;
  letter-spacing: -0.014em;
  color: var(--on-dark);
  max-width: 30ch;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  text-wrap: pretty;
}

.callout__shoutrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.callout__shout {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 12vw, 9.5rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--teal-bright);
  margin: 0;
}

.callout__arrow {
  width: 22px;
  height: 38px;
  flex: none;
  margin-bottom: 0.75rem;
  fill: none;
  stroke: var(--teal-bright);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.callout__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  border-top: 1px solid var(--on-dark-rule);
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
}

.callout__action + .callout__action {
  border-left: 1px solid var(--on-dark-rule);
  padding-left: clamp(1.75rem, 4vw, 3rem);
}

.callout__icon {
  width: 22px; height: 22px;
  fill: none;
  stroke: var(--on-dark);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 1.5rem;
}

.callout__label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin: 0 0 0.5rem;
}

.callout__value {
  font-size: 1.0625rem;
  color: var(--on-dark);
  text-decoration: none;
  text-underline-offset: 5px;
}
.callout__value:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.callout__value:focus-visible { outline-color: var(--teal-bright); }

/* Below the panel */
.contact__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2rem;
}

.contact__note {
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: 46ch;
  margin: 0.625rem 0 0;
}

.backtotop {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
}
.backtotop:hover { color: var(--ink); }

.colophon { text-align: right; line-height: 2; }

.madeby {
  margin: 3.5rem 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* --- 12. Case study: outcome headline ---------------------------------- */

.cs-hero { padding-block: 4.5rem 3rem; }

.cs-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  align-items: baseline;
  margin-bottom: 2rem;
}

.cs-hero__eyebrow .sep { color: var(--rule); }

/* The single most important element on the page. */
.outcome {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.25rem, 5.1vw, 3.875rem);
  line-height: 1.06;
  letter-spacing: -0.024em;
  max-width: 26ch;
  text-wrap: balance;
  margin: 0;
}

.outcome b {
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}

/* --- 12b. Case study: depth toggle -------------------------------------- */

/* Summary vs. deep dive, with no JavaScript: a radio group read by :has().
   Deep dive is the default, so a browser without :has() simply shows the whole
   case study rather than a broken half of one. */

.viewbar {
  position: sticky;
  top: var(--masthead-h);
  z-index: 40;
  margin-top: 2.5rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-block: 1px solid var(--rule-soft);
}

.viewbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.6875rem;
}

/* Segmented control: a recessed warm-tan track with the active segment raised
   out of it in white. Inactive labels use --ink-2 rather than the usual --ink-3
   because --ink-3 only reaches 3.5:1 on the track at this size. */
.viewswitch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 1px 2px rgb(23 37 31 / 0.07);
  padding: 3px;
  margin: 0;
  min-inline-size: auto;
}

.viewswitch__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; margin: 0;
  pointer-events: none;
}

.viewswitch__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.4375rem 0.875rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.viewswitch__icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}

.viewswitch__label:hover { color: var(--ink); }

.viewswitch__input:checked + .viewswitch__label {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(23 37 31 / 0.13), 0 0 0 1px rgb(23 37 31 / 0.04);
}

.viewswitch__input:focus-visible + .viewswitch__label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.viewbar__note {
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin: 0;
  text-align: right;
}

/* The switch itself. Deep dive shows everything; summary drops the supporting
   detail and keeps outcome, role, reframe, impact and reflection intact. */
.summary-only { display: none; }

body:has(#depth-summary:checked) .deep-only { display: none; }
body:has(#depth-summary:checked) .summary-only { display: revert; }

@media (max-width: 700px) {
  .viewbar__note { display: none; }
  .viewbar__inner { justify-content: flex-start; }
}

/* --- 13. Case study: role bar ------------------------------------------ */

.rolebar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  margin: 0;
}

.rolebar dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.375rem;
}

.rolebar dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink);
}

.rolebar dd .quiet { color: var(--ink-3); }

/* --- 14. Case study: body sections -------------------------------------- */

.cs-section { padding-block: 3.5rem; }
.cs-section > .label { margin-bottom: 1.5rem; }

.cs-section h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  letter-spacing: -0.018em;
  line-height: 1.22;
  max-width: 31ch;
  margin-bottom: 1.25rem;
}

.cs-section h3 {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0.375rem;
}

/* A heading that is also a mono label keeps the label's voice. */
.cs-section h3.label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- 15. Case study: reframe (pull-quote weight, no colored box) --------- */

.reframe {
  padding-block: 3.5rem;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

.reframe blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.3vw, 2.375rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.26;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 26ch;
  text-wrap: balance;
}

.reframe blockquote em { font-style: normal; color: var(--accent); }

.reframe__after {
  margin-top: 1.75rem;
  max-width: 58ch;
  color: var(--ink-2);
  font-size: 1rem;
}

/* --- 16. Case study: work / figures ------------------------------------- */

.fig { margin-block: 2.5rem; }
.fig:first-of-type { margin-top: 0; }

.fig img {
  width: 100%;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  background: var(--paper-card);
}

.fig figcaption {
  margin-top: 0.875rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  max-width: 62ch;
}

.fig--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}
.fig--pair figcaption { margin-top: 0.75rem; }

.fig--inset img { background: var(--paper-card); padding: 1.5rem; }

/* --- 17. Case study: explorations --------------------------------------- */

.explorations { margin-top: 3.5rem; }

/* Abandoned directions rarely leave a presentable artifact behind, so these are
   typographic rather than pictorial: index, name, cause of death. */
.explorations__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  margin-top: 2rem;
}

.exploration {
  border-top: 1px solid var(--ink);
  padding-top: 1.125rem;
}

.exploration__index {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.5rem;
}

.exploration__name {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.1vw, 1.6875rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--accent);
  margin: 0 0 1rem;
  text-wrap: balance;
}

.exploration__why {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 0;
}

.exploration__why::before {
  content: "Died: ";
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- 18. Case study: tradeoffs (plain prose, not a table) --------------- */

.tradeoffs { list-style: none; max-width: var(--measure); }

.tradeoffs li {
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.68;
}
.tradeoffs li:first-child { border-top: 1px solid var(--rule-soft); }
.tradeoffs b { color: var(--ink); font-weight: 600; }

/* --- 19. Case study: impact -------------------------------------------- */

.impact__restate {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin-bottom: 2.75rem;
}
.impact__restate b { color: var(--accent); font-weight: 600; }

.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
}

.metric {
  background: var(--paper-card);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 1.375rem;
}

.metric__value {
  font-family: var(--serif);
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  margin-bottom: 0.5rem;
}

.metric__what { font-size: 0.9375rem; color: var(--ink); margin: 0 0 0.625rem; }

.metric__how {
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1.65;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  margin: 0;
  padding-top: 0.625rem;
  border-top: 1px solid var(--rule-soft);
}

/* --- 20. Case study: reflection (hard-capped) --------------------------- */

.reflection {
  padding-block: 3.5rem;
  border-top: 1px solid var(--rule-soft);
}

/* Runs the full width of the shell as a closing statement. Type scales up so the
   measure stays readable at that width, and the layout hard-caps it at six lines
   — three sentences of room, and no more.
   Scoped to its own class, not `.reflection p`, so it can't swallow the label. */
.reflection__statement {
  max-width: none;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.6vw, 2.375rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reflection__statement em { font-style: italic; }

/* The cap is a line count, but the same three sentences occupy more lines as the
   column narrows — so the allowance grows with the breakpoints. Three sentences
   always fit; a fourth paragraph never does. */
@media (max-width: 900px) {
  .reflection__statement { -webkit-line-clamp: 9; line-clamp: 9; }
}
@media (max-width: 560px) {
  .reflection__statement { -webkit-line-clamp: 15; line-clamp: 15; }
}

/* --- 20b. Passcode gate ------------------------------------------------- */

/* Obscures the case study until unlocked. The markup is still present — this is
   friction, not protection. Locked by default so the content is not flashed
   before the script runs; <noscript> undoes it, since a reader without
   JavaScript would otherwise be stuck behind a blur with no way through. */

body[data-gate] .gate-target {
  filter: blur(10px);
  pointer-events: none;
  user-select: none;
}

html.gate-open body[data-gate] .gate-target {
  filter: none;
  pointer-events: auto;
  user-select: auto;
}

html:not(.gate-open) body[data-gate] { overflow: hidden; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: color-mix(in srgb, var(--ink-deep) 45%, transparent);
  backdrop-filter: blur(2px);
}

.gate[hidden] { display: none; }

.gate__card {
  width: 100%;
  max-width: 25rem;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: 0 24px 60px rgb(17 42 45 / 0.24);
}

.gate__title {
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.16;
  margin: 0.875rem 0 0.75rem;
}

.gate__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 1.5rem;
}

.gate__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.4375rem;
}

.gate__input {
  width: 100%;
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.16em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.6875rem 0.875rem;
}

.gate__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.gate__input[aria-invalid="true"] { border-color: #a2423a; }

.gate__error {
  font-size: 0.875rem;
  color: #a2423a;
  margin: 0.625rem 0 0;
}
.gate__error[hidden] { display: none; }

.gate__actions {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  margin-top: 1.25rem;
}

.gate__submit {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 0.625rem 1.25rem;
  cursor: pointer;
}
.gate__submit:hover { background: var(--accent); }

.gate__ask {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-underline-offset: 4px;
}
.gate__ask:hover { color: var(--ink); }

/* --- 21. Case study: pager --------------------------------------------- */

.pager {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 2.5rem 4.5rem;
  border-top: 1px solid var(--rule-soft);
}

.pager a { text-decoration: none; }

.pager__next {
  text-align: right;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  display: block;
  margin-top: 0.4375rem;
}
.pager__next:hover { color: var(--accent); }

/* --- 22. Responsive ---------------------------------------------------- */

@media (max-width: 900px) {
  :root { --gutter: 1.75rem; }

  .cs-hero { padding-block: 2.75rem 2rem; }

  .cards,
  .metrics,
  .explorations__list { grid-template-columns: 1fr; }

  .split { grid-template-columns: 1fr; gap: 3rem; }

  .rolebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .work__item { grid-template-columns: 168px minmax(0, 1fr); }
  .work__media { grid-row: 1 / span 2; }
  .work__meta {
    grid-column: 2;
    text-align: left;
    flex-direction: row;
    gap: 1rem;
    margin-top: 0.875rem;
  }

  .fig--pair { grid-template-columns: 1fr; }
  .contact__foot { flex-direction: column; align-items: flex-start; }
  .colophon { text-align: left; }

  .callout__actions { grid-template-columns: 1fr; }
  .callout__action + .callout__action {
    border-left: 0;
    border-top: 1px solid var(--on-dark-rule);
    padding-left: 0;
    padding-top: 1.75rem;
  }
  .callout__arrow { display: none; }
}

@media (max-width: 560px) {
  /* The stacked masthead is 96–132px depending on whether the nav wraps, which
     makes a fixed offset for the sticky toggle unreliable. Release the header
     here and let the toggle own the top edge — it is the more useful control on
     a small screen, and two stacked bars would eat a third of the viewport. */
  :root { --masthead-h: 0px; }
  .masthead { position: static; }

  .cs-hero { padding-block: 1.75rem 1.5rem; }

  /* The slash separators only make sense on one line. */
  .cs-hero__eyebrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    margin-bottom: 1.5rem;
  }
  .cs-hero__eyebrow .sep { display: none; }

  .masthead__inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .nav { gap: 1.125rem; flex-wrap: wrap; }
  .hero { padding-block: 3.25rem 3rem; }
  .work__item { grid-template-columns: 1fr; }
  .work__media { grid-row: auto; aspect-ratio: 4 / 3; min-height: 0; }
  .work__meta { grid-column: 1; }
  .timeline li { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* --- 23. Motion + print ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .masthead, .pager, .skip-link, .viewbar { display: none; }
  /* Paper has no toggle: always print the full case study. */
  .deep-only { display: revert !important; }
  .summary-only { display: none !important; }
  body { background: #fff; }
  .fig img, .card, .metric { border-color: #ccc; }
  a { text-decoration: none; color: #000; }
}