/* ============================================================================
   PAGE COMPOSITIONS — every value here references a token from deco.css
   ============================================================================ */

/* ----------------------------------------------------------------- HERO */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--s-9) + env(safe-area-inset-top, 0px)) var(--s-8);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(var(--s-6), 6vw, var(--s-8));
  align-items: center;
  width: 100%;
}
.hero__salut {
  font-family: var(--f-body);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--c-blush);
}
.hero__name { font-size: var(--t-h1); }
.hero__role {
  font-family: var(--f-caps);
  font-size: clamp(var(--t-sm), 0.8rem + 0.9vw, 1.28rem);
  font-weight: 300;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-brass);
}

/* The hero copy is set flush right so it closes against the portrait, which
   is mirrored to face back into the text. Everything inside has to agree. */
.hero__copy { text-align: right; }
.hero__copy .rule { margin-inline: auto 0; transform-origin: right; }
.hero__copy .lead { margin-inline: auto 0; }
.hero__copy .hero__actions { justify-content: flex-end; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }

.hero__creed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2) var(--s-5);
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--c-text-soft);
}
/* Lozenge separators sit centred in the flex gap, never touching the words. */
.hero__creed li { position: relative; }
.hero__creed li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--s-5) / -2);
  inset-block-start: 50%;
  width: var(--lozenge-xs); height: var(--lozenge-xs);
  border: var(--line-w) solid var(--c-brass);
  transform: translate(-50%, -50%) rotate(45deg);
}
.hero__portrait { position: relative; }
.hero__portrait .mount { aspect-ratio: 4 / 5; }
/* The source file is mirrored on disk so she looks left, back into the copy.
   No CSS flip here — one flip, in one place, or the two cancel out. */
.hero__portrait .mount > img { object-position: 50% 26%; }
/* Offset hairline plate behind the portrait — depth without a shadow. */
.hero__portrait::before {
  content: "";
  position: absolute;
  inset: var(--s-5) calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-5);
  border: var(--line-w) solid var(--line-faint);
  clip-path: polygon(
    var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)
  );
  pointer-events: none;
}
.hero__scroll {
  position: absolute;
  inset-block-end: var(--s-5);
  inset-inline-start: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.hero__scroll-line {
  width: var(--s-8); height: var(--line-w);
  background: linear-gradient(90deg, var(--c-brass), transparent);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--c-blush);
  animation: sweep 2.6s var(--e-soft) infinite;
}
@keyframes sweep {
  0%   { transform: translateX(-100%); }
  60%,100% { transform: translateX(100%); }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__portrait { order: -1; max-width: 420px; }
  .hero__scroll { display: none; }
  /* Stacked, flush-right copy under a left-aligned portrait reads as a mistake. */
  .hero__copy { text-align: left; }
  .hero__copy .rule { margin-inline: 0 auto; transform-origin: left; }
  .hero__copy .lead { margin-inline: 0 auto; }
  .hero__copy .hero__actions { justify-content: flex-start; }
  .hero__creed { justify-content: flex-start; }
}

/* ------------------------------------------------------------- STAT BAR */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: var(--line-w) solid var(--line);
}
.stats__item {
  padding: var(--s-5) var(--s-4);
  text-align: center;
  border-inline-start: var(--line-w) solid var(--line-faint);
}
.stats__item:first-child { border-inline-start: 0; }
.stats__figure {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
  line-height: 1;
  color: var(--c-blush);
  display: block;
}
.stats__note { margin-top: var(--s-2); display: block; }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__item:nth-child(odd) { border-inline-start: 0; }
  .stats__item:nth-child(n+3) { border-top: var(--line-w) solid var(--line-faint); }
}

/* ---------------------------------------------------------------- WORK */
.work__item {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(var(--s-5), 4.5vw, var(--s-8));
  align-items: center;
  padding-block: clamp(var(--s-6), 5vw, var(--s-8));
  border-top: var(--line-w) solid var(--line-faint);
}
.work__item:nth-child(even) .work__media { order: -1; }
.work__head { display: flex; align-items: flex-start; gap: var(--s-4); }
.work__title { transition: color var(--d-mid) var(--e-out); }
.work__item:hover .work__title { color: var(--c-blush); }
.work__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
}
.work__tag {
  font-family: var(--f-caps);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-caps-sm);
  text-transform: uppercase;
  color: var(--c-text-faint);
  padding: var(--s-1) var(--s-3);
  border: var(--line-w) solid var(--line-faint);
}
.work__wins { display: grid; gap: var(--s-2); }
.work__wins li {
  display: grid;
  grid-template-columns: var(--s-8) 1fr;
  gap: var(--s-3);
  align-items: baseline;
  font-size: var(--t-sm);
  color: var(--c-text-soft);
}
.work__wins b {
  font-family: var(--f-display);
  font-size: var(--t-h4);
  font-weight: 400;
  color: var(--c-blush);
  line-height: 1;
}
@media (max-width: 900px) {
  .work__item, .work__item:nth-child(even) { grid-template-columns: 1fr; }
  .work__item:nth-child(even) .work__media { order: 0; }
  .work__media { order: -1; }
}

/* ---------------------------------------------------------- EXPERIENCE */
.cv__role {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-6);
  border-top: var(--line-w) solid var(--line-faint);
  position: relative;
}
.cv__when {
  font-family: var(--f-display);
  font-size: var(--t-h4);
  color: var(--c-brass);
  line-height: 1.1;
  white-space: nowrap;
}
.cv__where { margin-top: var(--s-2); }
.cv__title { margin-bottom: var(--s-2); }
.cv__org {
  font-family: var(--f-caps);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: var(--tr-caps-sm);
  text-transform: uppercase;
  color: var(--c-text-faint);
}
/* Role body: a short keyword-bearing summary, quantified wins, one takeaway. */
.cv__summary {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.62;
  color: var(--c-text-soft);
  max-width: 74ch;
}
.cv__wins { display: grid; gap: var(--s-2); margin-top: var(--s-4); max-width: 74ch; }
.cv__wins li {
  font-size: var(--t-sm);
  line-height: 1.58;
  color: var(--c-text-soft);
  padding-inline-start: var(--s-4);
  position: relative;
}
.cv__wins li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: var(--lozenge-sm); height: var(--lozenge-sm);
  border: var(--line-w) solid var(--c-blush-dim);
  transform: rotate(45deg);
}
.cv__wins strong { color: var(--c-parchment); font-weight: 600; }
/* The takeaway is the personal line — set apart by a brass rule, not a box. */
.cv__takeaway {
  margin-top: var(--s-4);
  padding-inline-start: var(--s-4);
  border-inline-start: var(--line-w) solid var(--line-lit);
  font-size: var(--t-sm);
  font-style: italic;
  line-height: 1.58;
  color: var(--c-text);
  max-width: 68ch;
}
.cv__takeaway b {
  display: block;
  font-family: var(--f-caps);
  font-size: var(--t-micro);
  font-weight: 600;
  font-style: normal;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-brass);
  margin-bottom: var(--s-2);
}
@media (max-width: 820px) {
  .cv__role { grid-template-columns: 1fr; }
}

/* Skills / education plates */
.plate__head {
  font-family: var(--f-caps);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-brass);
  padding-bottom: var(--s-3);
  border-bottom: var(--line-w) solid var(--line);
  margin-bottom: var(--s-4);
}
.plate__list { display: grid; gap: var(--s-2); }
.plate__list li { font-size: var(--t-sm); color: var(--c-text-soft); }
.plate__list--rule li { padding-block: var(--s-2); border-bottom: var(--line-w) solid var(--line-faint); }
.plate__list--rule li:last-child { border-bottom: 0; }
.plate__list dt { font-size: var(--t-sm); color: var(--c-parchment); }
.plate__list dd { margin: 0; font-size: var(--t-sm); color: var(--c-text-faint); }

/* --------------------------------------------------------------- ABOUT */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(var(--s-6), 6vw, var(--s-8));
  align-items: start;
}
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; } }
/* Deco drop cap */
.dropcap::first-letter {
  float: left;
  font-family: var(--f-display);
  font-size: 3.6em;
  line-height: 0.78;
  padding-inline-end: 0.10em;
  padding-block-start: 0.06em;
  color: var(--c-blush);
}
.faq { border-top: var(--line-w) solid var(--line-faint); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  text-align: start;
  font-family: var(--f-caps);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: var(--tr-caps-sm);
  text-transform: uppercase;
  color: var(--c-text);
  transition: color var(--d-fast) var(--e-out);
}
.faq__q:hover, .faq__q[aria-expanded="true"] { color: var(--c-blush); }
.faq__sign { position: relative; width: var(--s-3); height: var(--s-3); flex: none; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor;
}
.faq__sign::before { width: 100%; height: var(--line-w); }
.faq__sign::after  { width: var(--line-w); height: 100%; transition: transform var(--d-mid) var(--e-out); }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: scaleY(0); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-mid) var(--e-out);
}
.faq__a > div { overflow: hidden; }
.faq__a.is-open { grid-template-rows: 1fr; }
.faq__a p, .faq__a li { font-size: var(--t-sm); color: var(--c-text-soft); }
.faq__a-inner { padding-bottom: var(--s-5); display: grid; gap: var(--s-2); }

/* -------------------------------------------------------------- CONTACT */
.contact { text-align: center; }
.contact__mail {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 0.8rem + 2.6vw, 3.2rem);
  color: var(--c-parchment);
  display: inline-block;
  padding-bottom: var(--s-2);
  border-bottom: var(--line-w) solid var(--line);
  transition: color var(--d-mid) var(--e-out), border-color var(--d-mid) var(--e-out);
  word-break: break-word;
}
.contact__mail:hover { color: var(--c-blush); border-color: var(--c-blush); }
.contact__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); }

/* --------------------------------------------------------------- FOOTER */
.foot {
  border-top: var(--line-w) solid var(--line-faint);
  padding-block: var(--s-6);
  padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
}
.foot__bar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s-4);
}

/* ==========================================================================
   CASE STUDY PAGES
   ========================================================================== */
.study-hero {
  padding-block: calc(var(--s-9) + env(safe-area-inset-top, 0px)) var(--s-7);
  position: relative;
}
.study-hero__title { max-width: 18ch; }
.crumb {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-caps); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--c-text-faint);
  transition: color var(--d-fast) var(--e-out);
}
.crumb:hover { color: var(--c-blush); }

/* Fact table under the study hero */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-block-start: var(--line-w) solid var(--line);
}
.facts__cell {
  padding: var(--s-4);
  border-inline-start: var(--line-w) solid var(--line-faint);
  border-block-end: var(--line-w) solid var(--line-faint);
}
.facts__cell:first-child { border-inline-start: 0; }
.facts__val { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--c-text); }

/* Long-form study body */
.study { --w-text: 70ch; }
.study .section { padding-block: clamp(var(--s-7), 6vw, var(--s-8)); }
.study h2 + * { margin-top: var(--s-5); }
.study-list { display: grid; gap: var(--s-4); max-width: var(--w-text); }
.study-list li {
  padding-inline-start: var(--s-5);
  position: relative;
  color: var(--c-text-soft);
}
.study-list li::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: 0.68em;
  width: var(--lozenge-sm); height: var(--lozenge-sm);
  border: var(--line-w) solid var(--c-brass);
  transform: rotate(45deg);
}
.study-list strong { color: var(--c-parchment); }

/* Pull quote — the one place we let type get theatrical */
.quote {
  max-width: 24ch;
  font-family: var(--f-display);
  font-size: var(--t-h3);
  line-height: 1.28;
  color: var(--c-parchment);
  text-wrap: balance;
}
.quote__mark {
  display: block;
  font-family: var(--f-display);
  font-size: 3em;
  line-height: 0.5;
  color: var(--c-brass);
  margin-bottom: var(--s-3);
}
.quote__by { margin-top: var(--s-4); }
.quote-band {
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(var(--s-7), 7vw, var(--s-9));
  border-block: var(--line-w) solid var(--line-faint);
}
.quote-band .quote { max-width: 30ch; }

/* Before / after comparison */
.compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.compare__cap {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.compare__badge {
  font-family: var(--f-caps); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  padding: var(--s-1) var(--s-2);
  border: var(--line-w) solid currentColor;
}
.compare__badge--before { color: var(--c-text-faint); }
.compare__badge--after  { color: var(--c-blush); }

/* Numbered process steps */
.steps { display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: minmax(0, 88px) minmax(0, 1fr);
  gap: var(--s-4) var(--s-5);
  padding-block: var(--s-6);
  border-top: var(--line-w) solid var(--line-faint);
}
.step:last-child { border-bottom: var(--line-w) solid var(--line-faint); }
@media (max-width: 680px) { .step { grid-template-columns: 1fr; gap: var(--s-3); } }

/* Results grid on studies */
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; border: var(--line-w) solid var(--line); }
.results__cell {
  padding: clamp(var(--s-4), 3vw, var(--s-6));
  border-inline-start: var(--line-w) solid var(--line-faint);
}
.results__cell:first-child { border-inline-start: 0; }
.results__fig {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.4rem);
  line-height: 1;
  color: var(--c-blush);
  display: block;
}
.results__lab { margin-top: var(--s-3); display: block; line-height: 1.5; }

/* Next-project footer link */
.next {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  padding-block: clamp(var(--s-6), 5vw, var(--s-8));
  border-top: var(--line-w) solid var(--line);
  transition: padding-inline var(--d-mid) var(--e-out);
}
.next:hover { padding-inline: var(--s-3); }
.next:hover .next__title { color: var(--c-blush); }
.next__title { transition: color var(--d-mid) var(--e-out); }
@media (max-width: 680px) { .next { flex-direction: column; align-items: flex-start; } }

/* Ticket Attendant purple is quarantined to TA artefacts only */
.is-ta-accent { color: var(--c-purple); }

/* ==========================================================================
   BEFORE / AFTER — draggable reveal
   Two images in one frame, wiped by a hairline divider. Driven by a real
   range input so it is keyboard operable and announced correctly; the input
   sits invisible on top and supplies mouse, touch and pen dragging for free.
   With JS off it renders as a static half-and-half split, which still reads.
   ========================================================================== */
.ba { --ba-pos: 50%; }
.ba__stage {
  position: relative;
  aspect-ratio: var(--ba-ratio, 16 / 10);
  overflow: hidden;
  background: var(--c-abyss);
  touch-action: pan-y;
}
/* Default fit: scale BOTH plates to the same width and anchor them to the top,
   letting the stage crop the overflow. Two screenshots of the same page then
   line up under the divider — which is the entire point of the component.
   object-fit: cover would scale each by its own aspect ratio and misalign them. */
.ba__img {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
/* For plates that are not the same subject at the same width. */
.ba__stage--cover .ba__img {
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: var(--ba-focus, 50% 0%);
}
/* The "before" plate is clipped back to the divider position. */
.ba__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}
.ba__stage--contain { background: var(--c-parchment); }
.ba__stage--contain .ba__img {
  inset: 0;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}
.ba__stage--pad .ba__img { padding: clamp(var(--s-4), 4vw, var(--s-7)); }

.ba__divider {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--ba-pos);
  width: var(--line-w);
  background: var(--c-brass);
  transform: translateX(-50%);
  pointer-events: none;
}
/* The handle is the site's lozenge, scaled up — same ornament, same language. */
.ba__handle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--s-6);
  height: var(--s-6);
  transform: translate(-50%, -50%) rotate(45deg);
  border: var(--line-w) solid var(--c-brass);
  background: color-mix(in srgb, var(--c-abyss) 72%, transparent);
  backdrop-filter: blur(4px);
  transition: border-color var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out);
}
/* Two grip lines, counter-rotated so they stand upright inside the lozenge. */
.ba__handle::before,
.ba__handle::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--line-w);
  height: var(--s-3);
  background: var(--c-blush);
}
.ba__handle::before { transform: translate(-50%, -50%) rotate(-45deg) translateX(calc(var(--s-1) * -1)); }
.ba__handle::after  { transform: translate(-50%, -50%) rotate(-45deg) translateX(var(--s-1)); }

.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: none;
}
.ba__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--s-8);
  height: 100vh;
  cursor: ew-resize;
}
.ba__range::-moz-range-thumb {
  width: var(--s-8);
  height: 100vh;
  border: 0;
  border-radius: var(--radius);
  cursor: ew-resize;
}
.ba__stage:hover .ba__handle,
.ba__range:focus-visible + .ba__divider .ba__handle {
  border-color: var(--c-blush);
  background: color-mix(in srgb, var(--c-abyss) 88%, transparent);
}
.ba__range:focus-visible {
  outline: var(--line-w) solid var(--c-blush);
  outline-offset: calc(var(--s-1) * -1);
}

.ba__tag {
  position: absolute;
  inset-block-start: var(--s-3);
  font-family: var(--f-caps);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  padding: var(--s-1) var(--s-3);
  background: color-mix(in srgb, var(--c-abyss) 78%, transparent);
  border: var(--line-w) solid var(--line);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.ba__tag--before { inset-inline-start: var(--s-3); color: var(--c-text-soft); }
.ba__tag--after  { inset-inline-end: var(--s-3);  color: var(--c-blush); }

.ba__hint {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.ba figcaption { margin-top: var(--s-3); }

/* Two sliders side by side on wide screens, stacked below. */
.ba-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
@media (max-width: 860px) { .ba-pair { grid-template-columns: 1fr; } }

/* Work-card takeaway — same treatment as the résumé takeaway, one notch down. */
.work__take {
  padding-inline-start: var(--s-4);
  border-inline-start: var(--line-w) solid var(--line-lit);
  font-size: var(--t-sm);
  font-style: italic;
  line-height: 1.58;
  color: var(--c-text);
  max-width: 58ch;
}
.work__take b {
  display: block;
  font-family: var(--f-caps);
  font-size: var(--t-micro);
  font-weight: 600;
  font-style: normal;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--c-brass);
  margin-bottom: var(--s-2);
}

/* Drag affordance, marked with the same lozenge used on the handle. */
.ba__hint-mark {
  width: var(--lozenge-md);
  height: var(--lozenge-md);
  border: var(--line-w) solid var(--c-brass);
  transform: rotate(45deg);
  flex: none;
}