/* ==========================================================================
   NATV DESIGNS — SHARED STYLESHEET
   This one file controls the look of every page on the site.
   Change something here and it changes everywhere. That's the point.

   Contents
   01. Design tokens (colors, type, spacing)
   02. Reset & base
   03. Typography
   04. Layout helpers
   05. Header
   06. Footer
   07. Buttons
   08. Forms
   09. Cards & project grid
   10. Tags, stats & callouts
   11. Hero
   12. Case-study page parts
   13. Design-system page only
   14. Motion & accessibility
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   Every color and size the site uses, named once, in one place.
   ========================================================================== */

:root {
  /* --- Brand colors --------------------------------------------------- */
  --navy-900:  #04203A;   /* deepest — footers, overlays                   */
  --navy-800:  #073151;   /* THE brand navy — taken from the hero artwork  */
  --navy-700:  #0A4573;   /* lifted navy — gradients, hover states         */
  --blue-500:  #009ADA;   /* sky blue — pulled from the ORA work           */
  --blue-ink:  #036492;   /* darker blue that is safe for text on white    */
  --yellow:    #FFE600;   /* signal yellow — the accent, navy only         */
  --yellow-dk: #E6CF00;   /* pressed / hover state for yellow              */
  --orange:    #FF6A00;   /* coral orange — big shapes, never small text   */
  --orange-ink:#C24B00;   /* darker orange that is safe for text on white  */
  --lime:      #A3DE04;   /* rare accent, from the Subculture work         */

  /* --- Neutrals -------------------------------------------------------- */
  --ink:       #0E1B26;   /* body text on light                            */
  --slate:     #4A5C6B;   /* secondary text, captions                      */
  --line:      #DCE5EC;   /* hairlines and borders                         */
  --cloud:     #F2F6FA;   /* soft page background                          */
  --white:     #FFFFFF;

  /* --- Semantic roles -------------------------------------------------- */
  --bg:            var(--white);
  --bg-soft:       var(--cloud);
  --text:          var(--ink);
  --text-muted:    var(--slate);
  --link:          var(--blue-ink);
  --border:        var(--line);

  /* --- Type ------------------------------------------------------------ */
  --font-display: 'Poppins', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-marker:  'Covered By Your Grace', 'Bradley Hand', cursive;
  /* the case-study decks' own faces: Oswald sets the titles, Inter the rest */
  --font-deck:      'Oswald', 'Poppins', sans-serif;
  --font-deck-body: 'Inter', 'Source Sans 3', sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem,    0.97rem + 0.17vw, 1.09rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.35rem, 1.2rem  + 0.75vw, 1.75rem);
  --step-3:  clamp(1.7rem,  1.4rem  + 1.5vw,  2.5rem);
  --step-4:  clamp(2.2rem,  1.6rem  + 3vw,    3.5rem);
  --step-5:  clamp(2.8rem,  1.7rem  + 5.5vw,  6rem);

  /* --- Spacing --------------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* --- Shape ----------------------------------------------------------- */
  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(4,32,58,.08), 0 2px 6px rgba(4,32,58,.06);
  --shadow:    0 4px 12px rgba(4,32,58,.10), 0 12px 32px rgba(4,32,58,.10);
  --shadow-lg: 0 10px 24px rgba(4,32,58,.14), 0 28px 64px rgba(4,32,58,.18);

  --container: 1200px;
  --measure: 68ch;      /* comfortable reading width for long text */

  --ease: cubic-bezier(.22,.61,.36,1);

  /* --- The mark -------------------------------------------------------
     The Waterline wordmark is drawn once per page as an SVG <symbol> and
     recolored by these four properties. These are the LIGHT-ground values:
     white letters above the waterline, yellow below, held by a thin navy
     outline. Anything with a navy background switches the stroke off (see
     the .on-navy group below) and the letters read as solid.             */
  --wl-above:    #FFFFFF;
  --wl-below:    var(--yellow);
  --wl-stroke:   var(--navy-800);
  --wl-stroke-w: 5;
}

/* Every navy surface turns the outline off — there is nothing for it to do. */
.site-header,
.site-footer,
.section--navy,
.page-hero,
.hero-stage,
.on-dark {
  --wl-stroke: transparent;
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-7) 0;
}

::selection { background: var(--yellow); color: var(--navy-900); }


/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--navy-800);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); font-weight: 700; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3 { font-size: var(--step-2); font-weight: 600; }
h4 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 var(--sp-5); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .18s var(--ease);
}
a:hover { color: var(--navy-800); }

strong, b { font-weight: 650; color: var(--navy-800); }

small, .text-sm { font-size: var(--step--1); }

ul, ol { margin: 0 0 var(--sp-5); padding-left: 1.3em; }
li { margin-bottom: var(--sp-2); }

/* Pull-quote. No box and no side tab — a short rule ending in a filled dot,
   the same device as the hero, then the quote set large. */
blockquote {
  position: relative;
  margin: var(--sp-7) 0;
  padding: var(--sp-6) 0 0;
  max-width: 46ch;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--navy-800);
}
blockquote::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 64px; height: 2px;
  background: var(--navy-800);
}
blockquote::after {
  content: "";
  position: absolute; top: -4px; left: 62px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--yellow);
}
.on-dark blockquote, .section--navy blockquote { color: var(--white); }
.on-dark blockquote::before,
.section--navy blockquote::before { background: rgba(255,255,255,.5); }

/* The signature "GROWTH" treatment: big outlined display type. */
.display-outline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-5);
  line-height: .95;
  letter-spacing: .01em;
  color: transparent;
  -webkit-text-stroke: 2px var(--yellow);
  text-stroke: 2px var(--yellow);
  margin: 0;
}
@supports not (-webkit-text-stroke: 1px black) {
  .display-outline { color: var(--yellow); }
}
/* A 2px stroke is too heavy once the type shrinks on a phone. */
@media (max-width: 900px) {
  .display-outline { -webkit-text-stroke-width: 1.5px; }
}

.marker { font-family: var(--font-marker); font-weight: 400; letter-spacing: .01em; }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-ink);
  margin: 0 0 var(--sp-3);
}
.on-dark .eyebrow, .section--navy .eyebrow { color: var(--yellow); }

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--slate);
  max-width: var(--measure);
}
/* The same voice as .lede but at body size — for the paragraph that opens a
   section inside the page, where the hero's larger step reads oversized
   against the copy around it. */
.section-copy {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--slate);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }


/* ==========================================================================
   04. LAYOUT HELPERS
   ========================================================================== */

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2.5rem, 820px); margin-inline: auto; }
/* Only used by the work grid, so four cards across still have room to breathe. */
.container--wide { width: min(100% - 2.5rem, 1560px); margin-inline: auto; }

.section { padding-block: var(--sp-9); background: var(--bg); }
.section--tight { padding-block: var(--sp-7); }
.section--soft { background: var(--cloud); }
.section--navy {
  background: var(--navy-800);
  color: rgba(255,255,255,.86);
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
/* :not(.btn) matters — without it this rule outranks .btn--primary and
   paints yellow text on a yellow button. */
.section--navy a:not(.btn) { color: var(--yellow); }
.section--navy a:not(.btn):hover { color: var(--white); }

.section-head { margin-bottom: var(--sp-7); max-width: var(--measure); }
/* Centered variant — centers the block in the container and the text in it. */
.section-head--center {
  text-align: center;
  margin-inline: auto;
}
.section-head--center .lede,
.section-head--center .section-copy { margin-inline: auto; }
.section-head--center .actions { justify-content: center; }

/* Row of buttons. Was .hero__actions, now general-purpose. */
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.actions--center { justify-content: center; }

.stack > * + * { margin-top: var(--sp-5); }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* The diagonal split that runs through the NATV portfolio work. */
.diagonal-rule {
  height: 10px;
  background: linear-gradient(100deg,
    var(--orange) 0 33%, var(--yellow) 33% 66%, var(--blue-500) 66% 100%);
  border-radius: var(--radius-pill);
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--yellow); color: var(--navy-900);
  padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--radius) 0;
  font-family: var(--font-display); font-weight: 600; z-index: 100;
}
.skip-link:focus { left: 0; top: 0; }

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


/* ==========================================================================
   05. HEADER  (identical on every page)
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,49,81,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Three tracks with equal outer columns, so the page links sit on the true
   centre of the page rather than in whatever space the logo leaves. The
   inline padding is GROWTH's own left inset (222 of 2880), so the mark lines
   up with the G in the hero below it. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-5);
  min-height: 72px;
  width: 100%;
  max-width: none;
  padding-inline: max(1.25rem, 7.71%);
}
.site-header__inner > .logo { justify-self: start; margin-right: 0; }
.site-header__inner > .nav { justify-self: center; }
.site-header__inner > .social { justify-self: end; }

/* The Waterline wordmark. Letters only — no frame, no badge, no container. */
.logo {
  display: inline-flex; align-items: center;
  text-decoration: none; margin-right: auto;
}
.logo__mark {
  display: block;
  height: 34px; width: auto;
  transition: opacity .18s var(--ease);
}
.logo:hover .logo__mark { opacity: .82; }

/* The N tile — the square companion, for avatars and anywhere small. */
.logo__tile {
  width: 40px; height: 40px; border-radius: 9px;
  flex: 0 0 auto;
  transition: transform .18s var(--ease);
}
.logo:hover .logo__tile { transform: translateY(-1px); }

.nav { display: flex; align-items: center; gap: var(--sp-5); }
.nav a {
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 500;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--white); border-bottom-color: rgba(255,230,0,.5); }
.nav a[aria-current="page"] { color: var(--yellow); border-bottom-color: var(--yellow); }

.social { display: flex; align-items: center; gap: var(--sp-3); }
.social a {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: rgba(255,255,255,.75);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.social a:hover { background: var(--yellow); color: var(--navy-900); }
.social svg { width: 17px; height: 17px; fill: currentColor; }

.nav-toggle {
  display: none;
  background: none; border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-sm); color: var(--white);
  padding: .4rem .6rem; cursor: pointer;
  font-family: var(--font-display); font-size: .85rem;
}

@media (max-width: 720px) {
  .nav-toggle { display: block; order: 2; }
  .site-header__inner {
    display: flex; flex-wrap: wrap; padding-block: .6rem;
    padding-inline: 1.25rem;
  }
  .site-header__inner > .logo { margin-right: auto; }
  .nav {
    order: 4; width: 100%; display: none;
    flex-direction: column; align-items: flex-start;
    gap: 0; padding-bottom: var(--sp-3);
  }
  .site-header.is-open .nav { display: flex; }
  .nav a { width: 100%; padding: .65rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  /* Logo + Menu on one row. The social links live in the footer and inside
     the open menu, so nothing is lost and the sticky bar stays shallow. */
  .site-header .social { display: none; }
  .site-header.is-open .social {
    display: flex; order: 5; width: 100%;
    padding-top: var(--sp-3); margin-left: -7px;
  }
}


/* ==========================================================================
   06. FOOTER  (identical on every page)
   ========================================================================== */

.site-footer {
  background: var(--navy-900);
  color: rgba(255,255,255,.66);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--step--1);
}
.site-footer h4 {
  color: var(--white); font-size: .95rem;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--sp-4);
}
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: var(--yellow); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--sp-2); }

.footer-grid {
  display: grid; gap: var(--sp-7);
  grid-template-columns: 1.4fr 1fr 1fr;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between; align-items: center;
}
.footer-bottom .social a { color: rgba(255,255,255,.7); }


/* ==========================================================================
   07. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: .98rem; font-weight: 600; letter-spacing: .01em;
  padding: .8rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s var(--ease), background .18s var(--ease),
              color .18s var(--ease), border-color .18s var(--ease),
              box-shadow .18s var(--ease);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--yellow); color: var(--navy-900);
  box-shadow: 0 4px 14px rgba(255,230,0,.28);
}
.btn--primary:hover { background: var(--yellow-dk); color: var(--navy-900); box-shadow: 0 8px 22px rgba(255,230,0,.36); }

.btn--secondary {
  background: transparent; color: var(--navy-800); border-color: var(--navy-800);
}
.btn--secondary:hover { background: var(--navy-800); color: var(--white); }

/* Any navy surface — including the hero and interior page banners. */
.on-dark .btn--secondary,
.section--navy .btn--secondary,
.hero-stage .btn--secondary,
.page-hero .btn--secondary {
  color: var(--white); border-color: rgba(255,255,255,.55);
}
.on-dark .btn--secondary:hover,
.section--navy .btn--secondary:hover,
.hero-stage .btn--secondary:hover,
.page-hero .btn--secondary:hover {
  background: var(--white); color: var(--navy-800); border-color: var(--white);
}

.btn--ghost { background: transparent; color: var(--link); padding-inline: .4rem; }
.btn--ghost:hover { color: var(--navy-800); text-decoration: underline; }

.btn--sm { font-size: .87rem; padding: .55rem 1.1rem; }

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ==========================================================================
   08. FORMS
   ========================================================================== */

.form { max-width: 620px; }
.field { margin-bottom: var(--sp-5); }
.field label {
  display: block;
  font-family: var(--font-display);
  font-size: .9rem; font-weight: 600;
  color: var(--navy-800);
  margin-bottom: var(--sp-2);
}
.field .hint { display: block; font-size: var(--step--1); color: var(--slate); font-weight: 400; margin-top: 2px; }
.req { color: var(--orange-ink); }

.input, .select, .textarea {
  width: 100%;
  font-family: var(--font-body); font-size: 1rem;
  color: var(--ink); background: var(--white);
  padding: .8rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #93A3B1; }
.input:hover, .select:hover, .textarea:hover { border-color: #B9C7D3; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(0,154,218,.18);
  outline: none;
}
.textarea { min-height: 150px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234A5C6B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.6rem;
}

.on-dark .field label { color: var(--white); }
.on-dark .input, .on-dark .select, .on-dark .textarea {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.24);
  color: var(--white);
}
.on-dark .input::placeholder, .on-dark .textarea::placeholder { color: rgba(255,255,255,.5); }


/* ==========================================================================
   09. CARDS & PROJECT GRID
   ========================================================================== */

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card__body { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.card__title { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.card__text { color: var(--slate); font-size: .97rem; margin-bottom: var(--sp-4); }

.project-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
/* Explicit column counts rather than auto-fill, so every row is full and
   evenly spaced instead of leaving a ragged last row. */
@media (min-width: 620px)  { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .project-grid { grid-template-columns: repeat(4, 1fr); } }

.project-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.project-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cloud);
}
.project-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.project-card:hover .project-card__media img { transform: scale(1.045); }

.project-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.project-card__client {
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-ink);
}
.project-card__title {
  font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 600; line-height: 1.25;
  color: var(--navy-800); margin: 0;
}
.project-card__text { color: var(--slate); font-size: .94rem; margin: 0; }
.project-card__cue {
  margin-top: auto;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  color: var(--blue-ink);
  display: inline-flex; align-items: center; gap: .4rem;
}
.project-card:hover .project-card__cue { color: var(--navy-800); }
.project-card__cue::after { content: "→"; transition: transform .2s var(--ease); }
.project-card:hover .project-card__cue::after { transform: translateX(4px); }


/* ==========================================================================
   10. TAGS, STATS & CALLOUTS
   ========================================================================== */

.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }

.tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .76rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: var(--radius-pill);
  background: var(--cloud);
  color: var(--navy-800);
  border: 1px solid var(--border);
  margin: 0;
}
.tag--accent { background: var(--yellow); border-color: var(--yellow); color: var(--navy-900); }
.on-dark .tag, .section--navy .tag {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.22);
}

.stats { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat { padding: var(--sp-5) 0; border-top: 4px solid var(--yellow); }
.stat__num {
  font-family: var(--font-display);
  font-size: var(--step-3); font-weight: 700; line-height: 1;
  color: var(--navy-800); display: block; margin-bottom: var(--sp-2);
}
.stat__label { font-size: .92rem; color: var(--slate); line-height: 1.45; }
.section--navy .stat__num { color: var(--yellow); }
.section--navy .stat__label { color: rgba(255,255,255,.8); }

/* Callout. Marked by the three-color diagonal from the portfolio work rather
   than a colored bar down one side. */
.callout {
  padding: var(--sp-6);
  background: var(--cloud);
  border-radius: var(--radius-lg);
}
.callout::before {
  content: "";
  display: block;
  width: 52px; height: 6px;
  margin-bottom: var(--sp-4);
  border-radius: var(--radius-pill);
  background: linear-gradient(100deg,
    var(--orange) 0 38%, var(--yellow) 38% 68%, var(--blue-500) 68% 100%);
}
.callout h4 { margin-bottom: var(--sp-2); }
.on-dark .callout, .section--navy .callout {
  background: rgba(255,255,255,.06);
}


/* ==========================================================================
   11. HERO
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — exact rebuild of the Adobe Portfolio composition.

   The original was one 3.4 MB picture with every word baked into it. This is
   the same picture with the type painted out, the type set again as real HTML,
   and Donna's head cut out and put back in front of the lettering.

   Every position below is measured from the original 2880 x 1616 artwork and
   expressed as a percentage, so the whole composition scales as one piece.
   Type is sized in cqw (percent of the stage width) for the same reason.
   -------------------------------------------------------------------------- */

.hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2880 / 1616;
  container-type: inline-size;
  overflow: hidden;
  background: var(--navy-800);
  color: var(--white);
}
.hero-stage > * { position: absolute; margin: 0; }

/* The hero holds its place while the rest of the page scrolls up over it —
   the behaviour the Adobe Portfolio original had. Only above the breakpoint
   where the fixed composition still applies. */
@media (min-width: 901px) {
  .hero-stage { position: sticky; top: 0; z-index: 0; }
  /* Sections only — never every child. `.filterbar` sets its own
     position: sticky and must keep it. */
  main > .section { position: relative; z-index: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero-stage { position: relative; } }

.hero-stage__plate {
  inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* GROWTH — measured x 222→2625, cap top y 464, cap height 357 */
.hero-stage__growth {
  left: 7.71%;
  top: var(--growth-top, 24.21%);
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--growth-size, 17.7cqw);
  letter-spacing: var(--growth-track, 0.0337em);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: var(--growth-stroke, 0.243cqw) var(--yellow);
  white-space: nowrap;
}
@supports not (-webkit-text-stroke: 1px black) {
  .hero-stage__growth { color: var(--yellow); }
}

/* Donna, full frame and transparent, drawn over the lettering. Same 2880:1616
   frame as the background, so she needs no positioning of her own. */
.hero-stage__figure { inset: 0; z-index: 3; display: block; }
.hero-stage__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-stage__copy { left: 7.71%; top: 55.56%; z-index: 4; width: 84%; }

.hero-stage__greet {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--greet-size, 4.12cqw);
  line-height: 1.112;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
}
/* Covered By Your Grace sets smaller per em than the marker font in the
   original artwork, so it needs sizing up to hold its own beside "I'm". */
.hero-stage__greet .marker {
  color: var(--yellow);
  font-weight: 400;
  font-size: 1.28em;
  line-height: 1;
  /* Caps, as in the original artwork. Done in CSS so the underlying text
     stays "Donna" — better for copy-paste and for screen readers. */
  text-transform: uppercase;
}

/* The rule and its target, running from just past "I'm Donna" across to the
   portrait. Start measured against the rendered name rather than the original
   artwork, since Covered By Your Grace sets to a different width than the
   marker font in the original. The name ends at 26.82% here; keeping the
   original's 1.46% gap puts the rule at 28.28%. The right end stays where the
   artwork puts it (66.68%), so the target lands in the same place. */
.hero-stage__rule {
  left: 28.28%; top: 69.49%;
  width: 38.4%; height: 1px;
  background: rgba(255,255,255,.8);
  z-index: 4;
}
/* Measured off the artwork: 3.09% of stage width overall, a yellow ring
   around a #D9D9D9 core — a target, not a filled dot. Its centre sits at
   66.68% / 69.49%, exactly where the artwork's own target was, so it lands
   on the patch left behind when that one was removed from her sleeve. */
.hero-stage__rule::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  transform: translate(50%, -50%);
  width: 3.09cqw; height: 3.09cqw;
  border-radius: 50%;
  background: #D9D9D9;
  border: 0.78cqw solid var(--yellow);
}

/* Role and bio sit in one panel whose TEXT edge lands on 28.28% — where the
   pointer line starts. The panel itself begins 1.4cqw earlier to allow for its
   own padding, so the type, not the box, is what aligns. The frosted backing
   is what lets the copy run across her arm and stay readable. */
.hero-stage__panel {
  /* No box of any kind — the copy sits straight on the artwork. With the
     padding gone, the panel's own left edge is now the text edge, so it moves
     to 28.28% and the top returns to where the artwork sets the role line. */
  left: 28.28%; top: 71.77%;
  width: 35.3%;
  z-index: 4;
  padding: 0;
  background: none;
}
.hero-stage__role {
  position: static;
  font-family: var(--font-display);
  font-weight: 600;
  /* 1.26cqw wanted 36.97% of the stage and wrapped; the artwork sets this line
     at 33.4%, so it comes down to hold one line, as the original does. */
  font-size: 1.13cqw;
  white-space: nowrap;
  color: var(--white);
  margin: 0 0 0.75cqw;
}
.hero-stage__bio {
  position: static;
  width: auto;
  font-size: 1.108cqw;
  line-height: 1.41;
  color: rgba(255,255,255,.92);
  text-align: justify;
  margin: 0;
}
.hero-stage__actions {
  left: 25.4%; bottom: 5%;
  z-index: 4;
  display: flex; gap: 1cqw;
}
.hero-stage__actions .btn {
  font-size: 1.15cqw;
  padding: 1.05cqw 2.1cqw;
  border-width: 0.14cqw;
}

/* Below 900px the fixed composition stops working — the type would be
   unreadably small — so it reflows into a stacked layout. */
@media (max-width: 900px) {
  .hero-stage {
    aspect-ratio: auto;
    container-type: normal;
    padding: var(--sp-7) 1.25rem var(--sp-8);
    background:
      radial-gradient(120% 90% at 12% 0%, var(--navy-700) 0%, transparent 55%),
      linear-gradient(150deg, var(--navy-800) 0%, var(--navy-900) 70%);
  }
  .hero-stage > * { position: static; }
  .hero-stage__plate { display: none; }
  .hero-stage__figure { display: block; }
  .hero-stage__figure img {
    width: 210px; height: 210px;
    margin: 0 auto var(--sp-5);
    object-fit: cover; object-position: center 34%;
    border-radius: 50%;
    border: 3px solid rgba(255,230,0,.7);
    /* the crop is transparent around her, so this fills the circle */
    background: var(--navy-800);
  }
  .hero-stage__growth {
    font-size: clamp(2.6rem, 12vw, 4.5rem);
    -webkit-text-stroke-width: 1.5px;
    margin-bottom: .1em;
  }
  .hero-stage__greet { font-size: clamp(2rem, 8.5vw, 3rem); margin-bottom: var(--sp-4); }
  .hero-stage__rule { display: none; }
  /* Stacked, nothing overlaps her, so the panel drops its frosting and
     its measured width and just becomes normal flow copy. */
  .hero-stage__panel {
    width: auto; padding: 0; border-radius: 0;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .hero-stage__role { font-size: 1rem; white-space: normal; margin-bottom: var(--sp-4); }
  .hero-stage__bio {
    width: auto; font-size: 1rem; line-height: 1.7;
    text-align: left; margin-bottom: var(--sp-6);
  }
  .hero-stage__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
  .hero-stage__actions .btn { font-size: .98rem; padding: .8rem 1.6rem; border-width: 2px; }
}

/* Simple page banner for interior pages */
.page-hero {
  background: linear-gradient(150deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: var(--white);
  padding-block: var(--sp-8) var(--sp-8);
}
.page-hero h1 { color: var(--white); margin-bottom: var(--sp-4); }
.page-hero .lede { color: rgba(255,255,255,.82); }


/* ==========================================================================
   12. CASE-STUDY PAGE PARTS
   ========================================================================== */

.case-meta {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding: var(--sp-6) 0;
  border-top: 1px solid rgba(255,255,255,.18);
  margin-top: var(--sp-6);
}
.case-meta dt {
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--yellow); margin-bottom: var(--sp-2);
}
.case-meta dd { margin: 0; color: rgba(255,255,255,.9); font-size: .96rem; line-height: 1.5; }

.figure { margin: var(--sp-7) 0; }
.figure img {
  width: 100%; border-radius: var(--radius-lg);
  box-shadow: var(--shadow); background: var(--cloud);
}
.figure figcaption {
  margin-top: var(--sp-3);
  font-size: var(--step--1); color: var(--slate);
  text-align: center; font-style: italic;
}
.figure--wide { width: min(100vw - 2.5rem, 1200px); margin-inline: auto; }
.figure--plain img { box-shadow: none; border: 1px solid var(--border); }

.gallery { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: var(--sp-7) 0; }
.gallery img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

.next-project {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-7) 0;
  border-top: 1px solid var(--border);
  margin-top: var(--sp-8);
}

/* Placeholder block for images that still need supplying */
.placeholder {
  display: grid; place-items: center;
  aspect-ratio: 16/9;
  background: repeating-linear-gradient(45deg, var(--cloud) 0 12px, #E8EEF5 12px 24px);
  border: 2px dashed #B9C7D3;
  border-radius: var(--radius-lg);
  color: var(--slate);
  font-family: var(--font-display); font-size: .95rem; font-weight: 500;
  text-align: center; padding: var(--sp-5);
}


/* ==========================================================================
   13. DESIGN-SYSTEM PAGE ONLY
   ========================================================================== */

.swatches { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.swatch {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--white);
}
.swatch__chip { height: 92px; }
.swatch__meta { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.swatch__name { font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--navy-800); display: block; }
.swatch__hex  { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .82rem; color: var(--slate); }
.swatch__use  { display: block; font-size: .78rem; color: var(--slate); margin-top: var(--sp-2); line-height: 1.4; }

.spec {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  background: var(--white);
}
.spec + .spec { margin-top: var(--sp-5); }
.spec__label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .76rem; color: var(--slate);
  display: block; margin-top: var(--sp-2);
}

.logo-demo { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.logo-demo__panel {
  display: grid; place-items: center; gap: var(--sp-4);
  padding: var(--sp-7); border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.logo-demo__panel--light { background: var(--white); }
.logo-demo__panel--soft  { background: var(--cloud); }
.logo-demo__panel--dark  { background: var(--navy-800); border-color: var(--navy-800); }
.logo-demo__caption { font-size: var(--step--1); color: var(--slate); }
.logo-demo__panel--dark .logo-demo__caption { color: rgba(255,255,255,.7); }
.logo--lg .logo__mark { height: 72px; }
.logo--sm .logo__mark { height: 26px; }


/* ---- Logo concept lab (logo-concepts.html) ------------------------------
   Marks are drawn as SVG <symbol>s and recolored by custom properties, so
   the same drawing adapts to a light or a dark background.
   ------------------------------------------------------------------------ */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.concept {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.concept + .concept { margin-top: var(--sp-7); }

.concept__head { padding: var(--sp-6) var(--sp-6) var(--sp-5); }
.concept__num {
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-ink);
}
.concept__name { font-size: var(--step-2); margin: .35rem 0 .4rem; }
.concept__idea { color: var(--slate); max-width: 62ch; margin: 0; }

.concept__stage { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .concept__stage { grid-template-columns: 1fr; } }

.stage {
  display: grid; place-items: center;
  padding: var(--sp-8) var(--sp-6);
  min-height: 240px;
  --mk-ink: var(--navy-800);
  --mk-tint: var(--blue-500);
  --mk-accent: var(--yellow);
  /* Waterline colorways. No container of any kind — just the letters, with a
     thin navy stroke that does the work of holding them on a light ground. */
  --wl-above: #FFFFFF;
  --wl-below: var(--yellow);
  --wl-stroke: var(--navy-800);
  --wl-stroke-w: 5;
}
.stage--light { background: var(--cloud); }
.stage--paper { background: var(--white); }
.stage--dark  {
  background: var(--navy-800);
  --mk-ink: #FFFFFF; --mk-tint: #7ED0F5;
  /* On navy the stroke has nothing to do — the letters read as solid. */
  --wl-stroke: transparent;
}

.mk { display: block; width: 172px; height: 172px; }
/* Fluid, so it never outgrows a narrow panel. The viewBox keeps the ratio. */
.mk--wide { width: 100%; max-width: 260px; height: auto; }

.concept__sizes {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-6);
  padding: var(--sp-6);
  border-top: 1px solid var(--border);
  --mk-ink: var(--navy-800);
  --mk-tint: var(--blue-500);
  --mk-accent: var(--yellow);
}
.sizechip { display: grid; justify-items: center; gap: var(--sp-2); }
.sizechip span {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .7rem; color: var(--slate);
}

.concept__why {
  padding: var(--sp-6);
  border-top: 1px solid var(--border);
  background: var(--cloud);
  display: grid; gap: var(--sp-5);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 760px) { .concept__why { grid-template-columns: 1fr; } }
.concept__why h4 { margin-bottom: var(--sp-2); font-size: 1rem; }
.concept__why p { margin: 0; font-size: .95rem; color: var(--slate); }
.concept__why .flag h4 { color: var(--orange-ink); }

.brandbox {
  position: relative;
  background: var(--navy-800);
  color: rgba(255,255,255,.9);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
}
.brandbox h2 { color: var(--white); }
.brandbox__text {
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: var(--sp-5);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .86rem; line-height: 1.65;
  white-space: pre-wrap;
  max-height: 340px; overflow-y: auto;
  color: rgba(255,255,255,.88);
}
.brandbox__bar { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin-top: var(--sp-5); }
.copy-status { font-size: .9rem; color: var(--yellow); font-family: var(--font-display); font-weight: 600; }

.ds-nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  padding: var(--sp-5) 0;
}
.ds-nav a {
  font-family: var(--font-display); font-size: .85rem; font-weight: 600;
  text-decoration: none; color: var(--navy-800);
  padding: .35rem .85rem; border: 1px solid var(--border);
  border-radius: var(--radius-pill); background: var(--white);
}
.ds-nav a:hover { background: var(--navy-800); color: var(--white); border-color: var(--navy-800); }

.demo-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.demo-panel {
  padding: var(--sp-6); border-radius: var(--radius-lg);
  background: var(--navy-800);
}


/* ==========================================================================
   14. MOTION & ACCESSIBILITY
   ========================================================================== */

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

@media print {
  /* Chrome, Safari and Firefox can all "Save as PDF" from the print dialog,
     so these rules are what turn the resume page into a clean document:
     no navigation, no dark panels eating toner, nothing that only makes
     sense on screen. */
  @page { margin: 14mm 14mm 16mm; }

  .site-header, .site-footer, .nav-toggle, .ds-nav,
  .skip-link, .no-print { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; font-size: 10.5pt; }
  a { color: #000 !important; text-decoration: none !important; }

  /* Navy panels become plain paper */
  .page-hero, .section--navy, .hero-stage, .section--soft {
    background: #fff !important; color: #000 !important;
    padding-block: 0 !important;
  }
  .page-hero h1, .section--navy h2, .lede { color: #000 !important; }
  .page-hero .eyebrow, .eyebrow { color: #555 !important; }

  .section { padding-block: 10pt !important; }
  .section--tight { padding-block: 8pt !important; }
  .container, .container--narrow, .container--wide { width: 100% !important; max-width: none !important; }

  h1 { font-size: 22pt; margin-bottom: 2pt; }
  h2 { font-size: 13pt; margin: 12pt 0 6pt; }
  h3, .role__title { font-size: 11pt; }
  .lede { font-size: 11pt; }

  /* Keep a role and its bullets on the same page */
  .role, .credential, .stat { break-inside: avoid; page-break-inside: avoid; }
  .role { padding-block: 8pt; }
  .role ul { color: #000 !important; }
  .role li { margin-bottom: 3pt; }
  .role__where { color: #333 !important; margin-bottom: 5pt; }

  .stats { gap: 8pt; }
  .stat { border-top: 2pt solid #000; padding: 5pt 0; }
  .stat__num { font-size: 15pt; color: #000 !important; }
  .stat__label { font-size: 8.5pt; color: #333 !important; }

  .tag { border: 0.5pt solid #999 !important; background: #fff !important; color: #000 !important; }
  .resume-grid { grid-template-columns: 1.75fr 1fr !important; gap: 18pt !important; }
  .credential strong, .credential span { color: #000 !important; }

  /* the resume page's designed devices, flattened for paper */
  .deep, .split__panel { background: #fff !important; color: #000 !important; }
  .deep::before { display: none !important; }
  .polaroids, .hangers, .rule-bar, .split__panel { display: none !important; }
  .deep h2, .deep h3, .deep .role__title { color: #000 !important; }
  .deep .role__where { color: #333 !important; }
  .deep ul, .deep li, .deep p { color: #000 !important; }
  .chip { border-color: #999 !important; color: #000 !important; background: #fff !important; }
  .chips { justify-content: flex-start !important; gap: 6pt !important; }
  .split { grid-template-columns: 1fr !important; }
  .split__copy { padding: 0 !important; }
  .ruled { text-align: left !important; }
}


/* ==========================================================================
   15. BLOG
   A mixed feed: long reads span two columns, short notes span one, so the
   two kinds are distinguishable at a glance without separate pages.
   ========================================================================== */

.post-feed {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .post-feed { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .post-feed { grid-template-columns: repeat(3, 1fr); } }

.post {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* A long read takes two columns and leads with type rather than an image. */
@media (min-width: 640px) { .post--article { grid-column: span 2; } }

.post__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--cloud); }
.post--article .post__media { aspect-ratio: 21 / 9; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post:hover .post__media img { transform: scale(1.04); }

.post__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.post__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate);
}
.post__kind { color: var(--blue-ink); }
.post__kind--note { color: var(--orange-ink); }
.post__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); line-height: 1.25; color: var(--navy-800); margin: 0;
}
.post--article .post__title { font-size: var(--step-2); }
.post__excerpt { color: var(--slate); font-size: .95rem; margin: 0; }
.post__cue {
  margin-top: auto;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--blue-ink);
  display: inline-flex; align-items: center; gap: .4rem;
}
.post__cue::after { content: "→"; transition: transform .2s var(--ease); }
.post:hover .post__cue::after { transform: translateX(4px); }

/* The article page itself */
.article { max-width: var(--measure); margin-inline: auto; }
.article__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  font-family: var(--font-display); font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75);
}
.article p { font-size: var(--step-1); line-height: 1.75; }
.article h2 { margin-top: var(--sp-7); }
.article h3 { margin-top: var(--sp-6); }
.article figure { margin: var(--sp-7) 0; }
.article figure img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.article figcaption {
  margin-top: var(--sp-3); font-size: var(--step--1);
  color: var(--slate); text-align: center; font-style: italic;
}


/* ==========================================================================
   16. RESUME
   ========================================================================== */

.role { padding-block: var(--sp-6); border-top: 1px solid var(--border); }
.role:first-of-type { border-top: 0; padding-top: 0; }
.role__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); color: var(--navy-800); margin: 0 0 var(--sp-2);
}
.role__where {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-family: var(--font-display); font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink);
  margin-bottom: var(--sp-4);
}
.role ul { margin: 0; padding-left: 1.15em; color: var(--slate); }
.role li { margin-bottom: var(--sp-3); }

.credential { padding-block: var(--sp-4); border-top: 1px solid var(--border); }
.credential:first-of-type { border-top: 0; padding-top: 0; }
.credential strong { display: block; color: var(--navy-800); }
.credential span { color: var(--slate); font-size: .95rem; }

.resume-grid { display: grid; gap: var(--sp-8); grid-template-columns: 1.7fr 1fr; align-items: start; }
@media (max-width: 900px) { .resume-grid { grid-template-columns: 1fr; } }


/* ==========================================================================
   17. THE RESUME PAGE — devices lifted from the Product Design portfolio
       layout: hanging lines, a polaroid collage, centered rules, capability
       chips and split panels.
   ========================================================================== */

/* --- Dark hero with the contour texture and lines dropping from the top --- */
.deep {
  position: relative;
  background: var(--navy-900);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.deep::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--deep-texture, none);
  background-size: cover; background-position: center;
  opacity: .22; z-index: -1;
}
/* the yellow strings the photos appear to hang from */
.hangers { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hangers span {
  position: absolute; top: 0; width: 2px;
  background: var(--yellow); opacity: .85;
}
.hangers span:nth-child(1) { left: 26%; height: 34%; }
.hangers span:nth-child(2) { left: 47%; height: 46%; }
.hangers span:nth-child(3) { left: 66%; height: 28%; }
@media (max-width: 760px) { .hangers { display: none; } }

/* --- Polaroids ---------------------------------------------------------- */
.polaroids {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: flex-start;
  gap: 0;
}
.polaroid {
  background: #fff;
  padding: 14px 14px 42px;
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  width: clamp(150px, 19vw, 232px);
}
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.polaroid:nth-child(1) { transform: rotate(-6deg); margin-right: -22px; z-index: 2; }
.polaroid:nth-child(2) { transform: rotate(2.5deg) translateY(46px); z-index: 3; }
.polaroid:nth-child(3) { transform: rotate(-2deg) translateY(12px); margin-left: -22px; z-index: 1; }
@media (max-width: 620px) {
  .polaroid:nth-child(3) { display: none; }
  .polaroid { padding-bottom: 28px; }
}

/* --- Centered heading with the yellow bar beneath ------------------------- */
.ruled { text-align: center; }
.ruled + .rule-bar {
  height: 6px; background: var(--yellow);
  width: min(100% - 2.5rem, var(--container));
  margin: var(--sp-5) auto 0;
}

/* --- Capability chips --------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); }
.chip {
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: var(--navy-800); background: var(--white);
  border: 1.5px solid var(--navy-800);
  border-radius: var(--radius-pill);
  padding: .7rem 1.5rem;
}
.on-dark .chip, .deep .chip {
  background: transparent; color: var(--white); border-color: rgba(255,255,255,.55);
}

/* --- Split panel: copy one side, full-bleed color block the other ------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__copy { padding: var(--sp-9) var(--sp-7); }
.split__copy p { text-align: justify; }
.split__panel {
  background: var(--yellow);
  display: grid; place-items: center;
  padding: var(--sp-8);
  min-height: 340px;
}
.split__panel img {
  width: 100%; max-width: 420px;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(4,32,58,.32);
  transform: rotate(-3deg);
}

/* "Let's Connect!" — the handwritten mark from the Product Design layout,
   sitting top-right of the hero. The supplied artwork had an email address
   underneath it; that was cropped off to keep the address off the page. */
.lets-connect { position: absolute; top: var(--sp-6); right: var(--sp-6); z-index: 4; display: block; }
.lets-connect img { width: clamp(118px, 13vw, 186px); height: auto; }
.lets-connect:hover { opacity: .85; }
@media (max-width: 820px) { .lets-connect { display: none; } }


/* ==========================================================================
   18. RESUME v2 — matching the current graphic-resume layout
   ========================================================================== */

/* Discipline row under the hero */
.disciplines {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3) var(--sp-5);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(.95rem, 1.4vw, 1.2rem);
  color: var(--white);
}
.disciplines li { list-style: none; margin: 0; display: flex; align-items: center; gap: var(--sp-5); }
.disciplines li:not(:last-child)::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--yellow); flex: 0 0 auto;
}

/* Chips separated by a dotted run, as in the artwork */
.chips--dotted { align-items: center; gap: var(--sp-3); }
.chips--dotted .dots {
  color: var(--slate); letter-spacing: .18em; font-weight: 700;
  font-family: var(--font-display); user-select: none;
}
@media (max-width: 760px) { .chips--dotted .dots { display: none; } }

/* "What I Do" — ring bullet, heading, then a bar that fades down the list */
.doing { display: grid; gap: var(--sp-6); }
.doer { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-4); align-items: start; }
.doer__ring {
  width: 36px; height: 36px; border-radius: 50%;
  background: #D9D9D9; border: 9px solid var(--yellow);
  margin-top: 2px;
}
.doer__head { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-3); }
.doer__head h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.9rem, 1.15vw, 1.02rem);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy-800); margin: 0; white-space: nowrap;
}
.doer__bar { flex: 1; height: 7px; border-radius: 2px; background: var(--bar, #132B3D); min-width: 30px; }
@media (max-width: 700px) {
  .doer__head { flex-wrap: wrap; }
  .doer__head h3 { white-space: normal; }
  .doer__bar { flex-basis: 100%; }
}
.doer p { color: var(--slate); text-align: justify; margin: 0; font-size: .97rem; }

/* Framed artwork, like a poster on a wall */
.framed {
  background: #111; padding: 14px;
  box-shadow: 0 26px 60px rgba(4,32,58,.34);
  display: inline-block; max-width: 100%;
}
.framed__mat { background: #fff; padding: 16px; }
.framed img { display: block; width: 100%; }

/* Filter row above the work grid */
.filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-5);
  font-family: var(--font-display); font-weight: 600; font-size: .84rem;
  letter-spacing: .04em;
}
.filters span:nth-child(odd)  { color: var(--yellow-dk); }
.filters span:nth-child(even) { color: var(--orange-ink); }

/* Work grid — white-framed cards */
.work-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .work-grid { grid-template-columns: 1fr; } }
.work-card {
  background: #fff; padding: 12px; display: block;
  box-shadow: var(--shadow); text-decoration: none;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.work-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.work-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

/* Toolbox band */
.toolbox {
  background: var(--navy-800); position: relative; overflow: hidden;
  padding-block: var(--sp-8);
}
.toolbox::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--deep-texture, none);
  background-size: cover; opacity: .3;
}
.toolbox__row {
  position: relative; display: flex; flex-wrap: wrap;
  justify-content: space-around; align-items: center; gap: var(--sp-6);
}
.toolbox__row span {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.95rem, 1.5vw, 1.25rem);
  color: var(--yellow); letter-spacing: .02em;
}

/* The rule and target trailing off the greeting, as in the graphic resume */
.greet-row { display: flex; align-items: flex-end; gap: var(--sp-5); }
.trail {
  position: relative; flex: 1; min-width: 60px; height: 1px;
  background: rgba(255,255,255,.8);
  margin-bottom: .62em;
}
.trail::after {
  content: ""; position: absolute; right: 0; top: 50%;
  transform: translate(50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: #D9D9D9; border: 9px solid var(--yellow);
}
@media (max-width: 760px) { .trail { display: none; } }


/* ==========================================================================
   19. RESUME + CASE STUDIES — the filtered "console" build, on white
   Same structure as the dark prototype, retoned for the site's white ground.
   Note: signal yellow is 1.27:1 on white, so it is never used as text here —
   only as the active filter fill, where navy sits on it at 10.57:1.
   ========================================================================== */

.console { background: var(--white); color: var(--ink); }
.console h1, .console h2, .console h3, .console h4 { color: var(--navy-800); }

.mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate);
}

.panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

/* --- layout: sticky identity rail beside the working column ------------- */
.console__grid { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-8); align-items: start; }
@media (max-width: 980px) { .console__grid { grid-template-columns: 1fr; gap: var(--sp-7); } }
.rail { position: sticky; top: 104px; }
@media (max-width: 980px) { .rail { position: static; } }

/* Both columns open with a head of the same height, so the metrics panel and
   the experience stack start on exactly the same line. */
.col-head { min-height: 3.2rem; margin: 0 0 var(--sp-5); }
@media (max-width: 980px) { .col-head { min-height: 0; } }

/* --- the filter bar ----------------------------------------------------- */
.filterbar {
  position: sticky; top: 72px; z-index: 20;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-block: 1px solid var(--border);
  padding-block: var(--sp-4);
}
.filterbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); }
.filter {
  font-family: var(--font-display); font-weight: 600; font-size: .86rem;
  color: var(--navy-800);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .48rem .9rem;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.filter:hover { border-color: var(--navy-800); }
.filter[aria-pressed="true"] {
  background: var(--yellow); color: var(--navy-900); border-color: var(--yellow);
}
.filter__n { opacity: .55; margin-left: .4rem; font-variant-numeric: tabular-nums; }

/* --- roles -------------------------------------------------------------- */
.job { margin-bottom: var(--sp-5); }
.job[hidden] { display: none; }
.job > summary {
  list-style: none; cursor: pointer;
  padding: var(--sp-5);
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4);
  align-items: center;
}
.job > summary::-webkit-details-marker { display: none; }
.job > summary:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }
.job__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--navy-800); margin: 0 0 .3rem; }
.job__sign {
  width: 30px; height: 30px; border-radius: 6px; flex: 0 0 auto;
  border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--blue-ink);
  font-size: 1.1rem; line-height: 1; transition: transform .2s var(--ease);
}
.job[open] .job__sign { transform: rotate(45deg); }
.job__body { padding: 0 var(--sp-5) var(--sp-5); }
.job__body ul { list-style: none; padding: 0; margin: 0; }
.duty { padding: var(--sp-3) 0; border-top: 1px solid var(--border); color: var(--slate); }
.duty[hidden] { display: none; }
.duty__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--sp-2); }
.duty__tag {
  font-family: ui-monospace, Menlo, monospace; font-size: .66rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate);
  border: 1px solid var(--border);
  border-radius: 4px; padding: .12rem .42rem;
}
.duty__tag[data-on="true"] { color: var(--navy-900); background: var(--yellow); border-color: var(--yellow); }

/* --- metrics. Numbers are navy, not yellow: yellow on white is 1.27:1. --- */
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.metric { padding: var(--sp-4); }
.metric__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-2); color: var(--navy-800); line-height: 1;
  font-variant-numeric: tabular-nums; display: block; margin-bottom: .35rem;
}
.metric__l { font-size: .8rem; color: var(--slate); line-height: 1.4; }

/* --- filtered project grid ---------------------------------------------- */
.proj-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .proj-grid { grid-template-columns: 1fr; } }
/* Same behaviour as the project cards on the home page: the image grows,
   the card lifts, and no outline is drawn on hover. */
.proj {
  overflow: hidden; text-decoration: none; display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.proj:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.proj[hidden] { display: none; }
.proj img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.proj:hover img { transform: scale(1.045); }
.proj__t { padding: var(--sp-4); font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--navy-800); display: block; }

.empty { padding: var(--sp-7); text-align: center; color: var(--slate); }
.empty[hidden] { display: none; }

/* --- toolbox strip ------------------------------------------------------ */
.tools-strip { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: center; padding: var(--sp-5); }
.tools-strip img { height: 34px; width: auto; opacity: .95; }

/* ==========================================================================
   20. CASE STUDIES — same console treatment as the resume
   ========================================================================== */

.meta-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 760px) { .meta-row { grid-template-columns: repeat(2, 1fr); } }
.meta { padding: var(--sp-4); }
.meta dt { font-family: ui-monospace, Menlo, monospace; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-bottom: .4rem; }
.meta dd { margin: 0; color: var(--navy-800); font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.35;
  /* a client name like FreshwaterAquarium.com is one unbreakable word and is
     wider than a meta cell on a phone; let it break rather than push the page */
  overflow-wrap: anywhere; }

.deck { display: grid; gap: var(--sp-6); }
.plate { overflow: hidden; }
.plate img { width: 100%; display: block; background: var(--cloud); }
/* every .deck sits inside a white .console, so the caption is dark on light --
   it carried a white-on-white colour left over from an earlier dark deck */
.plate figcaption {
  font-family: ui-monospace, Menlo, monospace; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line);
}

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 620px) { .pager { grid-template-columns: 1fr; } }
.pager a { display: block; padding: var(--sp-5); text-decoration: none; transition: border-color .18s var(--ease); }
.pager a:hover { border-color: var(--navy-800); box-shadow: var(--shadow); }
.pager .mono { display: block; margin-bottom: .4rem; }
.pager strong { color: var(--navy-800); font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; }
.pager .next { text-align: right; }


/* Resume hero. Same 2880:1616 stage the home page uses, full bleed, so the
   two pages read as one site. Image only — no copy over it. */
.resume-hero { width: 100%; background: var(--navy-800); }
.resume-hero__stage {
  width: 100%;
  aspect-ratio: 2880 / 1616;
  overflow: hidden;
}
.resume-hero__img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 38%;
}
@media (max-width: 700px) {
  .resume-hero__stage { aspect-ratio: 4 / 3; }
  .resume-hero__img { object-position: 62% 38%; }
}

/* Sticky on scroll, exactly like the home hero: it holds its place while the
   page rides up over it. Above the reflow breakpoint only, and never for
   anyone who has asked for reduced motion. */
@media (min-width: 901px) {
  .resume-hero { position: sticky; top: 0; z-index: 0; }
}
@media (prefers-reduced-motion: reduce) { .resume-hero { position: static; } }

@media print { .resume-hero { display: none; } }


/* ==========================================================================
   22. CASE STUDY NARRATIVE
   The decks used to be flat images. These are the pieces that carry the same
   content as real text — process steps, personas, the red route matrix and
   the storyboard — so it is searchable, selectable and readable aloud.
   ========================================================================== */

/* numbered process steps */
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-4); padding: 0; margin: 0 0 var(--sp-7); counter-reset: step; }
.steps li { counter-increment: step; display: flex; align-items: center; gap: var(--sp-3); }
.steps li::before {
  content: counter(step);
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; background: var(--blue-500); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
}
.steps li span { font-family: var(--font-display); font-weight: 600; color: var(--navy-800); font-size: .95rem; }
.steps li:not(:last-child)::after { content: ""; width: 26px; height: 1px; background: var(--border); }

/* copy beside a plate */
.split-copy { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-7); align-items: start; }
@media (max-width: 860px) { .split-copy { grid-template-columns: 1fr; } }

/* bulleted lists that read as findings rather than decoration */
ul.tick { list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
ul.tick li { position: relative; padding-left: 1.1rem; margin-bottom: .55rem; color: var(--slate); font-size: .94rem; line-height: 1.55; }
ul.tick li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-500); }

/* personas */
.personas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); margin-top: var(--sp-6); }
@media (max-width: 980px) { .personas { grid-template-columns: 1fr; } }
.persona { padding: var(--sp-6); }
.persona__head { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.persona__head img { width: 100%; border-radius: 8px; border: 1px solid var(--border); }
.persona h3 { margin: 0 0 .3rem; font-size: var(--step-1); color: var(--navy-800); }
.persona h3 span { font-weight: 400; color: var(--slate); }
.persona__quote { margin: 0 0 .4rem; font-style: italic; color: var(--blue-ink); }
.persona__bio { color: var(--slate); font-size: .94rem; line-height: 1.6; }
.persona__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-4); margin: var(--sp-5) 0; padding: var(--sp-4) 0; border-block: 1px solid var(--border); }
.persona__facts dt { font-family: ui-monospace, Menlo, monospace; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.persona__facts dd { margin: 0; font-size: .9rem; color: var(--navy-800); font-weight: 600; }
.persona__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
@media (max-width: 560px) { .persona__cols, .persona__facts { grid-template-columns: 1fr; } }

/* red route matrix */
.table-wrap { overflow-x: auto; margin-top: var(--sp-6); }
.matrix { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .86rem; }
.matrix caption { text-align: left; margin-bottom: var(--sp-4); }
.matrix th, .matrix td { border: 1px solid var(--border); padding: var(--sp-4); vertical-align: middle; }
.matrix thead th { background: var(--cloud); color: var(--navy-800); font-family: var(--font-display); font-size: .78rem; }
.matrix tbody th { text-align: left; background: var(--cloud); color: var(--navy-800); font-family: var(--font-display); font-size: .78rem; white-space: nowrap; }
.matrix td { color: var(--navy-800); font-weight: 600; background: var(--white); }
.matrix td:empty, .matrix td[aria-hidden] { background: var(--cloud); }

/* storyboard */
.storyboard { list-style: none; padding: 0; margin: 0 0 var(--sp-7); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .storyboard { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .storyboard { grid-template-columns: 1fr; } }
.storyboard li { display: flex; gap: var(--sp-3); }
.storyboard__n { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: var(--navy-800); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: .78rem; }
.storyboard strong { display: block; color: var(--navy-800); font-family: var(--font-display); font-size: .92rem; margin-bottom: .25rem; }
.storyboard p { margin: 0; font-size: .85rem; color: var(--slate); line-height: 1.5; }

/* Column helpers for the case-study panels. These exist as classes rather than
   inline styles so the breakpoints can actually win — an inline
   grid-template-columns outranks every media query and overflows the page. */
.meta-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.meta-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .meta-row.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .meta-row.cols-2, .meta-row.cols-3 { grid-template-columns: 1fr; } }

/* Pull quotes from user interviews */
.quotes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
@media (max-width: 900px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .quotes { grid-template-columns: 1fr; } }
.quotes blockquote {
  margin: 0; padding: var(--sp-5);
  background: var(--navy-800); color: rgba(255,255,255,.92);
  border-radius: 10px; font-size: .92rem; line-height: 1.55;
}
.quotes blockquote::before { content: "\201C"; display: block; font-size: 2rem; line-height: .6; color: var(--yellow); margin-bottom: .4rem; }

/* Numbered audit findings */
.findings { list-style: none; counter-reset: f; padding: 0; margin: var(--sp-6) 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .findings { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .findings { grid-template-columns: 1fr; } }
.findings li { counter-increment: f; }
.findings li::before {
  content: counter(f); display: grid; place-items: center;
  width: 30px; height: 30px; margin-bottom: var(--sp-3);
  border: 1px solid var(--navy-800); border-radius: 50%;
  color: var(--navy-800); font-family: var(--font-display); font-weight: 600; font-size: .82rem;
}
.findings strong { display: block; color: var(--navy-800); font-family: var(--font-display); font-size: 1rem; margin-bottom: .3rem; }
.findings p { margin: 0; color: var(--slate); font-size: .9rem; line-height: 1.55; }

/* Colour swatches */
.swatches { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-5); padding: 0; margin: 0; }
.swatches li { text-align: center; }
.swatches span { display: block; width: 68px; height: 68px; border-radius: 50%; margin-bottom: .5rem; }
.swatches code { font-size: .72rem; color: var(--slate); letter-spacing: .04em; }

/* Magazine spreads — wide landscape pages, so they get their own rhythm */
.spreads { display: grid; gap: var(--sp-7); }
.spreads .spread { margin: 0; }
.spreads .spread img { width: 100%; border-radius: 10px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: block; }
.spreads figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); margin-top: var(--sp-4); }
.spreads figcaption strong { font-family: var(--font-display); font-size: var(--step-1); color: var(--navy-800); }
.spreads figcaption span { color: var(--slate); font-size: .95rem; }

/* Design-system principles */
.principles { margin: var(--sp-6) 0 0; }
.principles > div { padding-block: var(--sp-4); border-top: 1px solid var(--border); }
.principles dt { font-family: var(--font-display); font-weight: 600; color: var(--navy-800); font-size: .98rem; margin-bottom: .25rem; }
.principles dd { margin: 0; color: var(--slate); font-size: .93rem; line-height: 1.55; }

/* Pull quote */
blockquote.pull {
  margin: var(--sp-4) 0 var(--sp-5);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-3); line-height: 1.15; letter-spacing: -0.02em;
  color: var(--navy-800);
}
blockquote.pull::first-line { color: var(--blue-500); }

/* Spread rows — the design-system layout, applied across the case study:
   Donna's own commentary on one side, the magazine spread on the other,
   alternating sides so the page keeps a rhythm. */
.spread-row {
  display: grid; grid-template-columns: 1fr 1.35fr;
  gap: var(--sp-7);
  /* Spreads sit on the same --sp-9 rhythm the sections use. No rule between
     them — the space does that job. */
  align-items: center;
  padding-block: var(--sp-9);
}
.spread-row:first-of-type { padding-top: var(--sp-6); }
/* Flipping the sides must flip the track widths too, or the spread lands in
   the narrow column and renders smaller than its neighbours. */
/* The media column is sometimes a <figure> and sometimes a <div> wrapping the
   figure plus its note, so order by role rather than by tag. */
.spread-row--flip { grid-template-columns: 1.35fr 1fr; }
.spread-row--flip > * { order: 2; }
.spread-row--flip > figure,
.spread-row--flip > .spread-media { order: 1; }
@media (max-width: 900px) {
  /* stacked, so a viewport-height row would just be empty space */
  .spread-row { grid-template-columns: 1fr; gap: var(--sp-5); min-height: 0; padding-block: var(--sp-8); }
  .spread-row--flip > div, .spread-row--flip > figure { order: initial; }
}
.spread-row h3 { font-size: var(--step-2); color: var(--navy-800); margin: 0 0 var(--sp-3); }
.spread-row p { color: var(--slate); margin: 0 0 var(--sp-3); }
.spread-row .mono { color: var(--slate); }
.spread-row figure { margin: 0; }
.spread-row figure img {
  width: 100%; display: block;
  border-radius: 8px; border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Covers — the two portrait pages, opening the case study */
.covers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); max-width: 860px; }
@media (max-width: 620px) { .covers { grid-template-columns: 1fr; } }
.covers figure { margin: 0; }
.covers figcaption { margin-top: var(--sp-3); }

/* Zoom trigger. The button is invisible — it exists so every image is
   reachable by keyboard, not just by mouse. */
button.zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: inherit;
}
button.zoom img { border-radius: 8px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
button.zoom:hover img { transform: scale(1.012); box-shadow: var(--shadow-lg); }
button.zoom:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { button.zoom img { transition: none; } button.zoom:hover img { transform: none; } }

/* The enlarged view */
.lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: 96vw; max-height: 96vh;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(4,32,58,.88); }
.lightbox img { display: block; max-width: 96vw; max-height: 90vh; width: auto; height: auto; border-radius: 8px; }
.lightbox__close {
  position: absolute; top: -14px; right: -14px; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: var(--yellow); color: var(--navy-900);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Uniform spread sizing — every landscape page renders to the same box */
/* Only the magazine's spread rows are forced to a common ratio — .plate is
   used by every other case study, whose decks have their own proportions and
   must never be cropped to fit. */
.spread-row figure img { aspect-ratio: 2000 / 1296; object-fit: cover; }
.covers img, .lightbox img { aspect-ratio: auto; object-fit: contain; }

/* The page gallery — every spread in the book at one uniform size */
.page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-6); }
@media (max-width: 1000px) { .page-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .page-grid { grid-template-columns: 1fr; } }
.page-card { margin: 0; }
.page-card figcaption { margin-top: var(--sp-3); display: grid; gap: .15rem; }
.page-card figcaption strong { font-family: var(--font-display); font-size: .98rem; color: var(--navy-800); }
.page-card figcaption .mono { font-size: .68rem; }
.page-card figcaption span:last-child { color: var(--slate); font-size: .88rem; line-height: 1.45; }
.page-card img { aspect-ratio: 1400 / 907; object-fit: cover; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }

/* ==========================================================================
   23. SKETCH → SPREAD COMPARE
   Drag to wipe between the hand sketch and the finished page. Built on a real
   <input type="range"> so it works with a keyboard and a screen reader, not
   just a mouse — the visible handle is decoration over that input.
   ========================================================================== */
.compare {
  position: relative; margin: 0;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow);
  --pos: 50%;
  touch-action: pan-y;
}
.compare img { display: block; width: 100%; height: auto; }
.compare__after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(0 0 0 var(--pos)); }
.compare__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; z-index: 3;
  -webkit-appearance: none; appearance: none; background: none;
}
.compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.compare__range::-moz-range-thumb { width: 44px; height: 100%; border: 0; background: transparent; }
.compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: var(--yellow); z-index: 2;
  transform: translateX(-1px); pointer-events: none;
}
.compare__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; background: var(--yellow);
  box-shadow: 0 2px 10px rgba(4,32,58,.35);
}
.compare__handle::before {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%); z-index: 1;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: var(--navy-900); letter-spacing: .1em;
}
.compare__range:focus-visible + .compare__handle::after { outline: 3px solid var(--blue-500); outline-offset: 3px; }
.compare__label {
  position: absolute; bottom: 10px; z-index: 2;
  font-family: ui-monospace, Menlo, monospace; font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: 4px;
  background: rgba(4,32,58,.72); color: #fff; pointer-events: none;
}
.compare__label--a { left: 10px; }
.compare__label--b { right: 10px; }

/* The finished magazine, shot as a stack. The drop shadow is baked into the
   PNG's alpha, so it needs no panel, border or shadow of its own — those would
   double up and box in an image that is meant to float. */
.stack-shot { margin: 0; }
.stack-shot img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.stack-shot button.zoom img { border-radius: 0; box-shadow: none; border: 0; }
.stack-shot button.zoom:hover img { box-shadow: none; }

/* ==========================================================================
   24. ORA MAGAZINE — IMAGES FLOAT
   The pages carry their own edges, so no panel, border, radius or shadow is
   added on this page. Scoped to the magazine components so the other case
   studies keep their card treatment.
   ========================================================================== */
.compare {
  border: 0; box-shadow: none; border-radius: 0;
}
.page-card img,
.spread-row figure img,
.covers img {
  border: 0; box-shadow: none; border-radius: 0;
}
button.zoom img { border-radius: 0; }
button.zoom:hover img { box-shadow: none; }
.page-card button.zoom:hover img,
.spread-row button.zoom:hover img { box-shadow: none; }

/* Covers sit centred on the page */
.covers { margin-inline: auto; }

/* Covers are portrait; letterbox them into the same cell so the grid stays even */
.page-card--portrait img { object-fit: contain; background: var(--cloud); }

/* ==========================================================================
   25. CLIENT NOTES
   Real notes from the stakeholder review, set beside the spread they were
   written about. Marker face and an editor's-pen colour so they read as
   margin scribbles rather than body copy — the scans they came from are
   faint pencil and would not have reproduced.
   ========================================================================== */
.note {
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  max-width: 34ch;
}
.note__arrow { width: 24px; height: 46px; flex: 0 0 auto; color: var(--orange-ink); }
.note__arrow path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.note__text {
  font-family: var(--font-marker);
  font-size: 1.32rem; line-height: 1.25;
  color: var(--orange-ink);
}
.note__src {
  display: block; margin-top: .35rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate);
}
/* The note sits under its spread, in the same column, arrow pointing back up
   at it — so it reads as a margin scribble on that page, not on the copy. */
.spread-media { display: block; }
.spread-media > figure { margin: 0; }
.note__arrow { align-self: start; }

/* .spread-row p zeroes paragraph margins; the note needs its own breathing room */
.spread-row .note, .split-copy .note { margin-top: var(--sp-5); }
.spread-media__cap { display: block; margin-top: var(--sp-3); color: var(--slate); }

/* Several notes can land on one spread — the clownfish pages drew eight */
.note__list { display: grid; gap: .35rem; }
.note__line {
  font-family: var(--font-marker);
  font-size: 1.28rem; line-height: 1.2;
  color: var(--orange-ink);
}

/* Centre the two columns against each other, rather than hanging both from the
   top — used where the image and the list beside it differ a lot in height. */
.split-copy--middle { align-items: center; }
/* the list is the only thing in its column here, so its leading margin just
   pushes it off-centre against the image */
.split-copy--middle .principles:first-child { margin-top: 0; }
/* The caption sits inside the figure, so centring the figure leaves the image
   itself high by half the caption. Pulling the figure's layout box up by the
   caption's height centres the picture instead. Only above the breakpoint,
   where the caption is a single line and the columns are side by side. */
@media (min-width: 861px) {
  .split-copy--middle figure { margin-bottom: -32px; }
}

/* ==========================================================================
   26. PAGE CORNER FOLD
   The artefact is paper, so the gallery cards lift a corner on hover. Built
   from borders on a pseudo-element: the bottom edge is the underside of the
   flap catching light, the left edge is the shadow it casts. Nothing moves
   for anyone who has asked for reduced motion.
   ========================================================================== */
.page-card button.zoom { position: relative; }
.page-card button.zoom::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 0; height: 0;
  border-style: solid;
  /* The triangle is always full size and scaled down out of sight instead of
     being grown by its border-width — animating a border re-runs layout on
     every frame, and this sits on two dozen cards at once. */
  border-width: 0 0 42px 42px;
  border-color: transparent transparent var(--cloud) rgba(4,32,58,.28);
  box-shadow: -3px -3px 8px rgba(4,32,58,.13);
  transform: scale(0);
  transform-origin: 100% 100%;
  transition: transform .34s var(--ease);
  will-change: transform;
  pointer-events: none;
}
.page-card button.zoom:hover::after,
.page-card button.zoom:focus-visible::after { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .page-card button.zoom::after { transition: none; }
  .page-card button.zoom:hover::after,
  .page-card button.zoom:focus-visible::after { transform: scale(0); }
}

/* ==========================================================================
   27. SCROLL MOTION
   Added by script, never in the markup — with JavaScript off, or reduced
   motion on, everything is simply visible.
   ========================================================================== */
.js-reveal { opacity: 0; transform: translateY(16px); }
.js-reveal.is-in { opacity: 1; transform: none; }
.js-reveal { transition: opacity .55s var(--ease), transform .55s var(--ease); }

/* The note is typed in when it reaches the screen, as though someone were
   writing it while you look at the spread. Height is reserved before the text
   is cleared, so nothing below it shifts as the line grows. */
.note__line { min-height: var(--line-h, auto); }
.note.is-typing .note__line::after {
  content: ""; display: inline-block;
  width: 2px; height: .95em; margin-left: 2px; vertical-align: -.1em;
  background: currentColor;
  animation: note-caret .7s steps(1, end) infinite;
}
@keyframes note-caret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .note.is-typing .note__line::after { display: none; }
}

/* Three-up metrics that actually collapse — an inline grid-template-columns
   would outrank every breakpoint and squeeze the labels on a phone. */
.metrics.metrics--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .metrics.metrics--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .metrics.metrics--3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   28. DECK SLIDES
   The case-study decks rebuilt as HTML rather than shown as pictures: same
   header strip, blue/black headline, numbered callouts on leader lines, icon
   row, pull quote and page number — but as real text a search engine can read
   and a screen reader can speak.

   Palette sampled from the source artwork:
     ORA blue      #0090D0
     callout ink   #E84008
   Slides are 1.348:1 in the deck. Here they keep that proportion on a wide
   screen and reflow to a single column on a narrow one, because absolutely
   positioned callouts on a 4:3 canvas are unreadable on a phone.
   ========================================================================== */
.slide {
  --ora-blue: #0093D0;
  --ora-ink: #E8470A;
  --deck-rule: #E2E2E2;
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: clamp(1.5rem, 3.2cqw, 3rem);
  container-type: inline-size;
  overflow: hidden;
}
.slide + .slide { margin-top: var(--sp-7); }

/* header strip: number, section label, standing tagline */
.slide__top { display: flex; align-items: baseline; gap: .6rem; margin-bottom: clamp(1.2rem,3cqw,2.4rem); }
.slide__num { font-family: var(--font-deck); font-weight: 700; font-size: clamp(1.1rem,2.4cqw,1.6rem); color: var(--ora-blue); line-height: 1; }
.slide__label { font-family: var(--font-deck); font-weight: 600; font-size: clamp(.56rem,1.05cqw,.68rem); letter-spacing: .16em; text-transform: uppercase; color: var(--navy-800); }
.slide__tag { margin-left: auto; font-family: var(--font-deck); font-weight: 600; font-size: clamp(.5rem,.95cqw,.62rem); letter-spacing: .12em; text-transform: uppercase; color: var(--navy-800); }
.slide__tag b { color: var(--ora-blue); font-weight: 700; }

/* headline: blue lead word, black remainder */
.slide__h { font-family: var(--font-deck); font-weight: 700; line-height: 1.02; letter-spacing: -.005em;
  text-transform: uppercase; font-size: clamp(1.5rem, 4.4cqw, 3rem); margin: 0 0 .5rem; color: var(--ink); }
.slide__h b { color: var(--ora-blue); font-weight: 700; }
.slide__sub { font-family: var(--font-deck); font-weight: 600; text-transform: uppercase;
  letter-spacing: .01em; font-size: clamp(.8rem,1.35cqw,1.02rem); color: var(--ora-ink);
  margin: 0 0 clamp(1rem,2.4cqw,2rem); padding-bottom: clamp(.8rem,1.8cqw,1.4rem); border-bottom: 1px solid var(--deck-rule); }

/* title on the left, executive summary on the right, one rule under both —
   the masthead every plate in the deck opens with */
.slide__head { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
  gap: clamp(1.2rem,3.2cqw,3.4rem); align-items: start;
  margin-bottom: clamp(1.4rem,3.2cqw,2.6rem); padding-bottom: clamp(.9rem,2.2cqw,1.6rem);
  border-bottom: 1px solid var(--deck-rule); }
.slide__head .slide__sub { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.slide__summary { border-left: 1px solid var(--deck-rule); padding-left: clamp(1rem,2.4cqw,2rem); }
.slide__summary h4 { margin: 0 0 .55rem; font-family: var(--font-deck); font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(.78rem,1.2cqw,.95rem); color: var(--ora-ink); }
.slide__summary p { margin: 0; font-family: var(--font-deck-body); line-height: 1.62;
  font-size: clamp(.78rem,1.05cqw,.9rem); color: var(--slate); }

/* three mats in a row, each hung off a lettered callout by a dotted leader */
.slide__trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  grid-template-rows: auto 1fr auto;
  /* only the columns take the wide gap — the rows are spaced by the leader
     itself, so the callout copy sits close to the line that hangs off it */
  column-gap: clamp(1rem,2.6cqw,2.6rem); row-gap: 0;
  margin-bottom: clamp(1.4rem,3.2cqw,2.6rem); }
.slide__mat { margin: 0; display: grid; grid-template-columns: auto minmax(0,1fr);
  grid-template-rows: auto 1fr auto; column-gap: .6rem; }
/* borrow the trio's rows so label, leader and mat align across all three */
@supports (grid-template-rows: subgrid) {
  .slide__mat { grid-row: span 3; grid-template-rows: subgrid; }
}
.slide__mat > b { grid-column: 1; grid-row: 1; align-self: start; }
.slide__matcopy { grid-column: 2; grid-row: 1; }
.slide__matcopy h4 { margin: 0 0 .4rem; font-family: var(--font-deck); font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.2;
  font-size: clamp(.74rem,1.2cqw,.95rem); color: var(--ora-ink); }
.slide__matcopy p { margin: 0; font-family: var(--font-deck-body); line-height: 1.55;
  font-size: clamp(.74rem,1cqw,.85rem); color: var(--slate); }
/* the leader drops from the badge to the mat and ends in a dot, exactly as the
   horizontal callout leaders do on the interior slides */
.slide__leader { grid-column: 1; grid-row: 2; justify-self: center; position: relative;
  width: 7px; min-height: clamp(.7rem,1.6cqw,1.3rem); margin: .45rem 0 0; z-index: 1; }
.slide__leader::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  /* overhang: the mats are photographed at an angle, so beneath the badge the
     artwork starts about a quarter of the way down the image. Measured on all
     three mats; the line ends on the mat rather than short of it. */
  bottom: calc(-1 * clamp(16px, 5.2cqw, 64px));
  background:
    radial-gradient(circle at 50% calc(100% - 3px), var(--ora-ink) 2.6px, transparent 3.1px) no-repeat,
    repeating-linear-gradient(to bottom, var(--ora-ink) 0 5px, transparent 5px 10px) 50% 0 / 1px 100% no-repeat; }
.slide__mat > img { grid-column: 1 / -1; grid-row: 3; align-self: start;
  width: 100%; height: auto; display: block; }

/* artwork with numbered callouts either side */
.slide__stage { display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center;
  /* the leaders have to cross this gutter, so they read it from the same
     variable rather than repeating the value and drifting out of step */
  --stage-gap: clamp(1rem,2.4cqw,2rem); gap: var(--stage-gap);
  --leader-reach: calc(var(--stage-gap) + 1.6cqw); }
/* the field-results slides lead with the product itself: the artwork takes the
   room and the leaders run further in, over the mat rather than just to it */
/* the plates leave a real gutter between the mat and the right-hand callouts —
   that gutter is what gives callout 4's elbow room to run */
.slide__stage--gutter { --stage-gap: clamp(1.8rem,7.1cqw,5rem); }
.slide__stage--hero { grid-template-columns: .95fr 2.3fr .95fr;
  --leader-reach: calc(var(--stage-gap) + 9.5cqw); }
/* the field-results plate sets its first callout high and its second low, so
   one leader descends onto the mat and the other runs back along it */
.slide__stage--hero .slide__side { align-self: start; padding-top: 0; }
/* the hero stage's side columns are narrow so the artwork can be large; the
   label needs to hold one line for the leader to leave from the end of the
   words rather than from the middle of a wrapped block */
.slide__stage--hero .slide__callout dt { font-size: clamp(.66rem,1cqw,.78rem); }
.slide__stage--hero .slide__side--r { align-self: end; padding-top: 0;
  padding-bottom: clamp(.5rem,3cqw,2.4rem); }


.slide__stage figure { margin: 0; grid-column: 2; }
/* the dwell-time plate runs the mat almost the full width with a single
   callout beside it, so this stage drops the empty column entirely */
/* one callout instead of two, so the artwork sits centred in the slide with the
   callout carried high on its right — the empty column is what keeps it centred */
.slide__stage--solo { grid-template-columns: .95fr 2.3fr .95fr; }
.slide__stage--solo > figure { grid-column: 2; }
/* the delivery plate runs three panels: the bundle contents listed down the
   left, the open box in the middle and the mat in situ on the right. The list
   names the box's contents rather than pointing at them, so it carries no
   leaders. */
.slide__stage--bundle { grid-template-columns: minmax(0,1.15fr) minmax(0,2.25fr) minmax(0,1fr); }
.slide__stage--bundle > figure { grid-column: auto; }
.slide__stage--bundle .slide__side { align-content: center; }
.slide__stage--bundle .slide__callout dt::after { content: none; }
.slide__stage--bundle .slide__callout dt { display: block; }
/* the plate heads the list in ORA blue and rules a hairline under every item,
   the last one included */
.slide__contents { align-self: center; }
.slide__contents h4 { margin: 0 0 clamp(.7rem,1.8cqw,1.2rem);
  font-family: var(--font-deck); font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.1;
  font-size: clamp(.95rem,1.7cqw,1.4rem); color: var(--ora-blue); }
.slide__stage--bundle .slide__contents .slide__side,
.slide__contents .slide__side:has(.slide__callout:nth-child(2)) {
  display: grid; grid-template-rows: none; gap: 0;
  align-self: auto; align-content: start; padding-block: 0; }
.slide__contents .slide__callout { padding-bottom: clamp(.6rem,1.5cqw,1rem);
  border-bottom: 1px solid var(--deck-rule); }
.slide__contents .slide__callout + .slide__callout { padding-top: clamp(.6rem,1.5cqw,1rem); }

/* the specification plate stacks all four callouts down the left and gives the
   exploded artwork the right-hand two thirds, each leader running across to
   the layer it names */
.slide__stage--spec { grid-template-columns: minmax(0,1fr) minmax(0,2.2fr); }
.slide__stage--spec > figure { grid-column: 2; }
.slide__stage--spec .slide__side,
.slide__stage--spec .slide__side:has(.slide__callout:nth-child(2)) { align-self: stretch; align-items: start;
  /* the fifth, empty row keeps the four callouts in the upper two thirds, where
     the fanned layers still reach far enough left for their leaders to land */
  grid-template-rows: repeat(4, 1fr) .9fr; padding-block: clamp(.5rem,2cqw,1.6rem); }

.slide__stage--solo .slide__side--r { align-self: start;
  padding-top: clamp(.5rem,2.4cqw,1.8rem); padding-bottom: 0; }

.slide__stage img { width: 100%; display: block; }
.slide__side { display: grid; gap: clamp(1rem,2.6cqw,2rem); align-content: center; }
/* the plates spread a pair of callouts across the artwork's height rather than
   centring them as a block — which is what puts callout 4 down beside the logo */
/* A pair of callouts sits on equal rows rather than being pushed apart by
   space-between. Space-between aligns the first callout's top and the last
   one's bottom, so whenever the two blocks differ in height — one line of copy
   more on one side — the lower labels stop lining up across the artwork.
   Equal rows put every label at the same offset on both sides, whatever the
   copy does. */
.slide__side:has(.slide__callout:nth-child(2)) { align-self: stretch;
  grid-template-rows: 1fr 1fr; align-items: start;
  padding-block: clamp(.5rem,2cqw,1.6rem); }
.slide__side--r { text-align: left; }

.slide__callout { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.slide__callout > b, .slide__mat > b {
  width: 1.75em; height: 1.75em; flex: 0 0 auto;
  /* One painted ring, not four border arcs: at this size the arc joins
     antialias into a hairline seam across the circle. */
  box-shadow: inset 0 0 0 1px var(--ora-ink); border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-deck); font-weight: 600; line-height: 1;
  font-size: clamp(.6rem,1.1cqw,.76rem); color: var(--ora-ink);
  /* Oswald's line box is taller below the baseline than the caps need, so a
     box-centred letter reads low. Trimming the bottom lifts the ink to the
     circle's true centre: measured at .0475em for Oswald 600. */
  padding-bottom: .095em;
}
.slide__callout dt {
  position: relative; z-index: 1;
  font-family: var(--font-deck-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: clamp(.7rem,1.15cqw,.84rem); color: var(--ora-ink);
  margin-bottom: .3rem;
  /* the leader: a dashed rule running from the label toward the artwork, ending
     in a dot — the detail that makes these read as deck callouts */
  display: flex; align-items: center; gap: .5rem;
}
.slide__callout dt::after {
  content: ""; flex: 1 1 1.4rem; min-width: 1.1rem; height: 7px; align-self: center;
  /* run past the callout column, across the stage gap, and onto the artwork —
     in the plates the leader always ends with its dot on the mat */
  margin-right: calc(-1 * var(--leader-reach));
  background:
    radial-gradient(circle at calc(100% - 3px) 50%, var(--ora-ink) 2.6px, transparent 3.1px) no-repeat,
    repeating-linear-gradient(to right, var(--ora-ink) 0 5px, transparent 5px 10px) 0 50% / 100% 1px no-repeat;
}
/* on the right-hand side the leader runs the other way */
/* On the right the leader is not a trailing rule after the label — it hangs off
   the outer edge of the numbered badge and runs back toward the mat, which is
   how every right-hand callout in the plates is built. */
.slide__side--r .slide__callout dt::after { content: none; }

/* the left-hand elbow: a horizontal run off the end of the label, then a drop
   onto the artwork. Both segments hang off the label so the run starts exactly
   where the words stop, as it does in the plate. */
.slide__callout--elbow dt::after { content: none; }
.slide__callout--elbow dt > span { position: relative; }
.slide__callout--elbow dt > span::before {
  content: ""; position: absolute; left: 100%; top: calc(50% - 3.5px);
  width: var(--elbow-run, 7.5cqw); height: 7px;
  background: repeating-linear-gradient(to right, var(--ora-ink) 0 5px, transparent 5px 10px) 0 50% / 100% 1px no-repeat;
}
.slide__callout--elbow dt > span::after {
  content: ""; position: absolute; left: calc(100% + var(--elbow-run, 7.5cqw)); top: calc(50% - 3.5px);
  width: var(--elbow-len, 10.9cqw); height: 7px;
  transform-origin: left center;
  transform: rotate(var(--elbow-deg, 29.6deg));
  background:
    radial-gradient(circle at calc(100% - 3px) 50%, var(--ora-ink) 2.6px, transparent 3.1px) no-repeat,
    repeating-linear-gradient(to right, var(--ora-ink) 0 5px, transparent 5px 10px) 0 50% / 100% 1px no-repeat;
}
@container (max-width: 1060px) {
  .slide__callout--elbow dt > span::before,
  .slide__callout--elbow dt > span::after { content: none; }
  .slide__callout--elbow dt::after { content: ""; }
}

.slide__side--r .slide__callout > b { position: relative; }
.slide__side--r .slide__callout > b::before {
  content: ""; position: absolute; right: 100%; top: calc(50% - 3.5px);
  width: var(--lead-h, 9.3cqw); height: 7px;
  background:
    radial-gradient(circle at 3px 50%, var(--ora-ink) 2.6px, transparent 3.1px) no-repeat,
    repeating-linear-gradient(to right, var(--ora-ink) 0 5px, transparent 5px 10px) 0 50% / 100% 1px no-repeat;
}
/* callout 4 adds the deck's elbow: the horizontal run loses its dot and a
   second segment drops from its far end to the ORA badge on the mat */
.slide__side--r .slide__callout--angled > b::before,
.slide__callout--angled > b::before {
  width: var(--lead-h, 1.28cqw);
  background: repeating-linear-gradient(to right, var(--ora-ink) 0 5px, transparent 5px 10px) 0 50% / 100% 1px no-repeat;
}
.slide__side--r .slide__callout--angled > b::after,
.slide__callout--angled > b::after {
  content: ""; position: absolute; right: calc(100% + var(--lead-h, 1.28cqw)); top: calc(50% - 3.5px);
  width: var(--lead-a, 8.52cqw); height: 7px;
  transform-origin: right center;
  transform: rotate(var(--lead-deg, -26deg));
  background:
    radial-gradient(circle at 3px 50%, var(--ora-ink) 2.6px, transparent 3.1px) no-repeat,
    repeating-linear-gradient(to right, var(--ora-ink) 0 5px, transparent 5px 10px) 0 50% / 100% 1px no-repeat;
}

@container (max-width: 720px) {
  .slide__side--r .slide__callout dt::after { content: ""; }
  .slide__side--r .slide__callout > b::before,
  .slide__callout--angled > b::after { content: none; }
  .slide__stage, .slide__stage--hero { --leader-reach: 0px; }
  .slide__stage--hero { grid-template-columns: 1fr; }
  .slide__side--r .slide__callout dt::after { margin-left: 0; }
}
.slide__callout dd { margin: 0; font-family: var(--font-deck-body); font-size: clamp(.8rem,1.12cqw,.9rem); line-height: 1.55; color: var(--slate); }

/* icon row along the bottom */
.slide__icons { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1rem,2.4cqw,2rem); margin-top: clamp(1.4rem,3cqw,2.6rem);
  padding-top: clamp(1.2rem,2.6cqw,2rem); border-top: 1px solid var(--deck-rule); }

/* the ruled box that closes every plate: the rationale block sits in the first
   cell, the icons divide the rest. The dividers are cell borders rather than
   gap rules so they run the full height of the box on their own. */
.slide__band { display: grid; border: 1px solid var(--deck-rule);
  margin-top: clamp(1.4rem,3cqw,2.6rem); }
.slide__band--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.slide__band--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* with a rationale in the first cell the deck gives it 47% and divides the rest */
/* the three-cell band gives its icons a little more width than the plate does:
   at 17.66fr the labels wrapped to two lines and the cells came out uneven */
.slide__band--lead.slide__band--3 { grid-template-columns: minmax(0,29.5fr) repeat(3, minmax(0,23.5fr)); }
.slide__band--lead.slide__band--4 { grid-template-columns: minmax(0,47fr) repeat(4, minmax(0,13.25fr)); }
.slide__band > .slide__rationale { margin: 0; padding: clamp(1rem,2.4cqw,1.9rem); border-top: 0; }
.slide__band > .slide__icons { display: contents; }
/* each icon becomes a divided cell of the box */
.slide__band .slide__icon { position: relative;
  padding: clamp(1rem,2.4cqw,1.9rem) clamp(.6rem,1.6cqw,1.2rem);
  border-left: 1px solid var(--deck-rule); align-content: start; }
/* on the stacked plates the divider is a short rule, inset from both borders */
.slide__icons--stacked .slide__icon { border-left: 0; }
.slide__icons--stacked .slide__icon::before { content: ""; position: absolute;
  left: 0; top: 15%; bottom: 32%; width: 1px; background: var(--deck-rule); }
.slide__icons--stacked .slide__icon:first-child::before { content: none; }
.slide__band--lead .slide__icons--stacked .slide__icon:first-child::before { content: ""; }
.slide__band .slide__icon:first-child { border-left: 0; }
.slide__band--lead .slide__icon:first-child { border-left: 1px solid var(--deck-rule); }

/* Between the desktop layout and the stacked one there is a band where the
   lead cell squeezes the icons until their labels wrap and the cells stop
   matching. Give the rationale its own row there and let the icons have the
   full width to divide. */
@container (max-width: 1060px) {
  .slide__band--lead.slide__band--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .slide__band--lead.slide__band--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .slide__band--lead > .slide__rationale { grid-column: 1 / -1;
    border-bottom: 1px solid var(--deck-rule); }
  .slide__band--lead .slide__icon:first-child { border-left: 0; }

  /* The hero stage's leaders aim at the middle of their callout. As the slide
     narrows the copy grows taller and that midpoint drifts up toward the mat's
     top corner, where an angled mat is at its narrowest and the leader would
     land in empty space. So this stage stacks earlier than the others. */
  .slide__stage--hero { grid-template-columns: 1fr; --leader-reach: 0px; }
  .slide__stage--hero > figure { grid-column: 1; order: -1; }
  .slide__stage--hero .slide__side--r { text-align: left; }
  .slide__stage--hero .slide__side--r .slide__callout { grid-template-columns: auto 1fr; }
  .slide__stage--hero .slide__side--r .slide__callout > b { order: 0; }
  .slide__stage--hero .slide__side--r .slide__callout dt { flex-direction: row; }
  .slide__stage--hero .slide__side--r .slide__callout dt::after { transform: none; margin-left: 0; }
}
.slide__icons--centered .slide__icon { grid-template-columns: minmax(0,1fr);
  justify-items: center; text-align: center; align-content: center;
  gap: clamp(.5rem,1.4cqw,.9rem); }
.slide__icons--stacked .slide__icon { grid-template-columns: minmax(0,1fr);
  align-content: start; gap: clamp(.5rem,1.4cqw,.9rem); }
.slide__icons--stacked .slide__icon svg { justify-self: center;
  width: clamp(40px,5.5cqw,66px); }
/* the plate leaves more air under the icon than between label and copy */
.slide__icons--stacked .slide__icon { row-gap: clamp(.7rem,1.9cqw,1.2rem); }
.slide__icons--centered .slide__icon svg { width: clamp(36px,4.8cqw,58px); height: auto; color: var(--ink); }
.slide__icons--centered .slide__icon span { font-family: var(--font-deck); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.25;
  font-size: clamp(.6rem,.98cqw,.76rem); color: var(--ora-ink); }
.slide__icon { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.slide__icon svg { width: clamp(38px,5.2cqw,62px); height: auto; color: var(--navy-800); }
.slide__icon dt { font-family: var(--font-deck-body); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(.8rem,1.28cqw,.95rem); line-height: 1.25; color: var(--ora-ink); margin-bottom: .3rem; }
.slide__icon dd { margin: 0; font-family: var(--font-deck-body); font-size: clamp(.78rem,1.05cqw,.86rem); line-height: 1.5; color: var(--slate); }

/* the sketch + rationale band that opens the deck's lower third. In the plates
   this sits inside the same ruled band as the icon row, so the icons drop
   their own rule when a band precedes them. */
.slide__rationale { display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,1fr);
  gap: clamp(1rem,2.6cqw,2.2rem); align-items: center;
  margin-top: clamp(1.4rem,3cqw,2.6rem); padding-top: clamp(1.2rem,2.6cqw,2rem);
  border-top: 1px solid var(--deck-rule); }
.slide__sketch { display: block; width: 100%; height: auto; }
/* without the sketch the copy takes the whole lead cell — which is what was
   setting the band's height: squeezed beside the clam the same paragraph ran
   eleven lines instead of seven */
.slide__rationale--text { grid-template-columns: minmax(0,1fr); }
.slide__rationale h4 { margin: 0 0 .5rem; font-family: var(--font-deck); font-weight: 700;
  text-transform: uppercase; line-height: 1.15; font-size: clamp(.95rem,1.55cqw,1.35rem); color: var(--ora-ink); }
.slide__rationale p { margin: 0; font-family: var(--font-deck-body); line-height: 1.6;
  font-size: clamp(.82rem,1.15cqw,.95rem); color: var(--slate); }
.slide__rationale + .slide__icons { border-top: 0; padding-top: 0;
  margin-top: clamp(1.2rem,2.6cqw,2rem); }

/* closing pull quote, framed by drafting crop marks, and the page number */
.slide__quote { position: relative; display: flex; align-items: center; justify-content: center;
  gap: clamp(.8rem,2cqw,1.6rem); margin-top: clamp(1.6rem,3.6cqw,3rem);
  margin-inline: clamp(0px,13cqw,190px);
  padding: clamp(1rem,2.4cqw,1.8rem) clamp(1.2rem,3cqw,2.6rem);
  /* four L-shaped corner marks, drawn as backgrounds so the markup stays clean */
  --cm: linear-gradient(var(--deck-rule), var(--deck-rule));
  background:
    var(--cm) 0 0 / 1px 30% no-repeat,      var(--cm) 0 0 / 4% 1px no-repeat,
    var(--cm) 100% 0 / 1px 30% no-repeat,   var(--cm) 100% 0 / 4% 1px no-repeat,
    var(--cm) 0 100% / 1px 30% no-repeat,   var(--cm) 0 100% / 4% 1px no-repeat,
    var(--cm) 100% 100% / 1px 30% no-repeat,var(--cm) 100% 100% / 4% 1px no-repeat; }
.slide__mark { width: clamp(44px,5.6cqw,76px); height: auto; border-radius: clamp(4px,.7cqw,9px); display: block; }
.slide__quote p { margin: 0; font-family: var(--font-deck); font-weight: 700; line-height: 1.08;
  font-size: clamp(1rem,2.7cqw,1.9rem); color: var(--ink); text-transform: uppercase; letter-spacing: -.005em; }
.slide__quote p b, .slide__quote p span { display: block; }
.slide__quote p b { color: var(--ora-blue); font-weight: 700; }
.slide__quote::before, .slide__quote::after { content: "\201C"; font-family: Georgia, serif;
  font-size: clamp(1.6rem,4cqw,3rem); line-height: .8; color: var(--ora-ink); }
.slide__quote::before { align-self: flex-start; }
.slide__quote::after { content: "\201D"; align-self: flex-end; }

/* the drafting footer: corner motif, dimension rule, bracketed sheet number */
.slide__foot { position: relative; display: flex; align-items: center;
  gap: clamp(.5rem,1.4cqw,1rem); margin-top: clamp(1.6rem,4cqw,3rem); }
/* plates that close on the band or the artwork rather than a pull quote leave
   less room above the footer, and the drafting motif — which is anchored to
   the footer rule and stands 100px tall — climbs into the icon row. Open the
   gap so it sits clear. */
.slide__band + .slide__foot,
.slide__stage + .slide__foot { margin-top: clamp(2.8rem,8.5cqw,6rem); }
.slide__blueprint { position: absolute; left: 0; bottom: 0; width: clamp(78px,9cqw,130px);
  height: auto; pointer-events: none; }
.slide__hair { flex: 1 1 auto; height: 1px; background: var(--deck-rule); }
.slide__hair--short { flex: 0 0 clamp(20px,3.4cqw,48px); }
.slide__page { position: absolute; right: clamp(1rem,2.4cqw,2rem); bottom: clamp(.7rem,1.6cqw,1.2rem);
  font-family: var(--font-deck-body); font-size: clamp(.5rem,.9cqw,.6rem); letter-spacing: .16em; color: var(--slate); }
.slide__foot .slide__page { position: static; flex: 0 0 auto;
  border: 1px solid var(--deck-rule); padding: .3rem clamp(.5rem,1.2cqw,.9rem);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .22em;
  font-size: clamp(.5rem,.82cqw,.62rem); color: var(--slate); }

@container (max-width: 720px) {
  .slide__stage { grid-template-columns: 1fr; }
  .slide__stage figure { grid-column: 1; order: -1; }
  .slide__side--r { text-align: left; }
  .slide__side--r .slide__callout { grid-template-columns: auto 1fr; }
  .slide__side--r .slide__callout > b { order: 0; }
  /* the type is sized in container units, which collapse along with the slide.
     Below the breakpoint it needs real reading sizes, not scaled-down deck
     sizes — a 10px callout is a picture of text, not text. */
  .slide__sub { font-size: .82rem; }
  .slide__body p { font-size: .95rem; }
  .slide__callout dt, .slide__icon dt { font-size: .76rem; }
  .slide__callout dd, .slide__icon dd { font-size: .9rem; line-height: 1.55; }
  .slide__rationale { grid-template-columns: 1fr; gap: 1rem; }
  .slide__head { grid-template-columns: 1fr; gap: 1.2rem; }
  .slide__summary { border-left: 0; padding-left: 0; padding-top: 1rem; border-top: 1px solid var(--deck-rule); }
  .slide__summary h4 { font-size: .95rem; }
  .slide__summary p { font-size: .92rem; }
  /* the mats stack, so the leaders would point at nothing */
  .slide__trio { grid-template-columns: 1fr; gap: 1.8rem; }
  .slide__leader { display: none; }
  .slide__matcopy h4 { font-size: .9rem; }
  .slide__matcopy p { font-size: .92rem; }
  /* the ruled box becomes two stacked rows: rationale, then a 2x2 icon grid */
  .slide__band, .slide__band--3, .slide__band--4,
  .slide__band--lead.slide__band--3, .slide__band--lead.slide__band--4 { grid-template-columns: 1fr; }
  .slide__band > .slide__rationale { grid-column: 1 / -1; border-bottom: 1px solid var(--deck-rule); }
  .slide__band .slide__icon { border-left: 0; border-top: 1px solid var(--deck-rule); }
  .slide__band .slide__icon:first-child { border-top: 0; }
  .slide__band--lead .slide__icon:first-child { border-left: 0; border-top: 0; }
  .slide__icons--centered .slide__icon span { font-size: .72rem; }
  .slide__quote { flex-wrap: wrap; padding: 1.2rem; margin-inline: 0; }
  /* the quote needs the full width down here, which is where the drafting
     motif used to sit — it is decoration, so it steps aside */
  .slide__blueprint { display: none; }
  .slide__sketch { max-width: 300px; margin-inline: auto; }
  .slide__rationale h4 { font-size: 1.15rem; }
  .slide__rationale p { font-size: .95rem; }
  .slide__callout > b { font-size: .74rem; }
  .slide__label, .slide__tag { font-size: .62rem; }
  .slide__quote p { font-size: 1.15rem; }
}
/* body copy inside a slide, above the stage */
.slide__body { max-width: 74ch; margin-bottom: clamp(1rem,2.4cqw,1.8rem); }
.slide__body p { margin: 0 0 .6rem; font-family: var(--font-deck-body);
  font-size: clamp(.85rem,1.2cqw,.95rem); line-height: 1.65; color: var(--slate); }
.slide__body strong { color: var(--ora-ink); font-weight: 700; }
/* a stage with callouts on one side only still centres its artwork */
.slide__stage > div:empty { display: block; }

/* ===========================================================================
   29  A Fresh Take — FreshwaterAquarium.com brand guidelines
   The deck is reproduced page for page rather than re-flowed: each page is a
   fixed 2096x1554 stage (the deck's own units) with everything positioned as a
   percentage of it, so the whole plate scales with the column and stays true
   at any width. Type is real text — DM Sans and DM Mono, sized in cqw off the
   stage — so the page still reads as a document to a search engine and a
   screen reader. Sizes and tracking were measured off the source PDF: cap
   heights give the size, ink widths give the tracking.
   =========================================================================== */
.fwdeck { display: grid; gap: clamp(1.6rem,3.4vw,3rem); }
.fwslide { margin: 0; }
.fwslide figcaption {
  margin-top: .7rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
}
.fwslide figcaption b { color: var(--navy-800); margin-right: .55rem; }

.fwp {
  position: relative; aspect-ratio: 2096 / 1554; overflow: hidden;
  background: #fff; color: #000;
  container-type: inline-size;
  font-family: 'DM Sans', system-ui, sans-serif; font-weight: 400;
  /* the deck's own weights are all real cuts; never let the browser fake one */
  font-synthesis-weight: none;
  border: 1px solid var(--border); border-radius: 4px;
  box-shadow: var(--shadow-sm);
}
.fwp > * { position: absolute; margin: 0; }
/* Headings inside a plate are structural (h3/h4 keep the document outline) but
   must not pick up the site's display face or scale — the plate sets its own. */
.fwp h1, .fwp h2, .fwp h3, .fwp h4, .fwp h5, .fwp h6, .fwp p, .fwp span, .fwp div {
  font-family: inherit; font-weight: inherit; color: inherit;
  letter-spacing: inherit; line-height: inherit; text-transform: none; }
.fwp img { display: block; }
.fwp .bx { display: block; }
.fwp i { font-style: italic; }
.fwp b { font-weight: 700; }
@media print { .fwp { break-inside: avoid; } }

/* A deck page is a fixed composition: scaled to a phone it lands at about 7pt
   type, which is not reading size. Below the breakpoint each page keeps a
   legible width and pans inside its own scroller instead of shrinking. */
@media (max-width: 720px) {
  .fwslide { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .fwslide .fwp { width: 680px; }
  .fwslide figcaption::after {
    content: " — swipe to pan"; color: var(--slate); opacity: .8; letter-spacing: .04em; }
}

.fwp .e { font-size:1.0019cqw; line-height:1.0; letter-spacing:.085em; text-transform:uppercase; color:#7F7F7F; white-space:nowrap; }
.fwp .m { font-size:1.0019cqw; line-height:1.0; font-family:'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.06em; text-transform:uppercase; color:#7F7F7F; white-space:nowrap; }
.fwp .ms { font-size:0.6823cqw; line-height:1.0; font-family:'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.09em; text-transform:uppercase; color:#727272; white-space:nowrap; }
.fwp .h1 { font-size:6.9656cqw; line-height:1.0; font-weight:700; letter-spacing:-.056em; white-space:nowrap; }
.fwp .h2 { font-size:3.0534cqw; line-height:1.0; font-weight:700; letter-spacing:-.046em; white-space:nowrap; }
.fwp .h3 { font-size:1.5267cqw; line-height:1.0; white-space:nowrap; }
.fwp .b { font-size:1.5267cqw; line-height:1.25;  }
.fwp .bt { font-size:1.5267cqw; line-height:0.875;  }
.fwp .bq { font-size:1.5267cqw; line-height:1.25; font-style:italic; }
.fwp .cap { font-size:2.1470cqw; line-height:1.0; white-space:nowrap; letter-spacing:-.09em; }
.fwp .sm { font-size:1.1450cqw; line-height:1.0; white-space:nowrap; }
.fwp .sm2 { font-size:1.2405cqw; line-height:1.0; white-space:nowrap; }
.fwp .ital { font-size:1.1594cqw; line-height:1.0; letter-spacing:.02em; white-space:nowrap; }
.fwp .t { font-size:1.5267cqw; line-height:1.0; white-space:nowrap; }


/* ---- A Fresh Take: motion ------------------------------------------------
   Every animation is opt-in: the deck only animates once the page script adds
   .fw-motion, so with no JS (or with reduced motion asked for) each plate
   renders exactly as it does at rest. Only transform and opacity are animated,
   and everything is paused while its page is off screen.
   ------------------------------------------------------------------------- */

/* the rockscape is one flat photograph — the three stones touch and share a
   shadow, so they cannot be split without new cut-outs. The group floats as a
   group, which is what reads as "floating" at this size anyway. */
/* registered so the hover change eases in rather than snapping mid-drift;
   browsers without @property just switch amplitude, which is still fine */
@property --amp  { syntax: "<percentage>"; inherits: false; initial-value: 0.3%; }
@property --tilt { syntax: "<angle>";      inherits: false; initial-value: 0.12deg; }
.fw-motion .fw-float { --amp: .3%; --tilt: .12deg; will-change: transform;
  transition: --amp .6s ease, --tilt .6s ease; }
.fw-motion .fwp.is-in .fw-float { animation: fwFloat 6.5s ease-in-out infinite; }
/* hover lifts the stones further off the page; touch still gets the idle drift */
.fw-motion .fwp:hover .fw-float { --amp: 1.15%; --tilt: .4deg; }
@keyframes fwFloat {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  35%     { transform: translate3d(0, calc(var(--amp) * -1), 0) rotate(calc(var(--tilt) * -1)); }
  70%     { transform: translate3d(0, calc(var(--amp) * -.38), 0) rotate(var(--tilt)); }
}

/* core values rise in, one after the next */
.fw-motion .fw-rise {
  opacity: 0; transform: translateY(.55em);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0ms);
}
.fw-motion .fwp.is-in .fw-rise { opacity: 1; transform: none; }

/* the colour bars draw in from their left edge */
.fw-motion .fw-fill {
  transform: scaleX(0); transform-origin: left center;
  transition: transform .85s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0ms);
}
.fw-motion .fwp.is-in .fw-fill { transform: scaleX(1); }

/* the goldfish hold station and drift, each on its own phase */
.fw-motion .fw-swim { will-change: transform; }
.fw-motion .fwp.is-in .fw-swim--a { animation: fwSwimA 9s ease-in-out infinite; }
.fw-motion .fwp.is-in .fw-swim--b { animation: fwSwimB 11s ease-in-out -3s infinite; }
@keyframes fwSwimA {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  30%     { transform: translate3d(-1.4%,-1.6%,0) rotate(-1.1deg); }
  65%     { transform: translate3d(.8%,.9%,0) rotate(.7deg); }
}
@keyframes fwSwimB {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  40%     { transform: translate3d(1.2%,1.8%,0) rotate(1.2deg); }
  75%     { transform: translate3d(-.6%,.6%,0) rotate(-.5deg); }
}

/* the post row: five apertures onto one shared strip, so a step carries every
   post one slot to the right and the arriving one lands on the phone screen */
.fw-reel { position: absolute; overflow: hidden; background: #fff; }
.fw-reel__track { position: absolute; top: 0; height: 100%; width: 0; }
.fw-reel__track img {
  position: absolute; top: 0; height: 100%;
  object-fit: cover; display: block;
  /* the track is a zero-width positioning context, so the site-wide
     img{max-width:100%} would otherwise clamp every frame to nothing */
  max-width: none;
}
.fw-motion .fwp.is-in .fw-reel__track {
  animation: fwReel 20s cubic-bezier(.72,0,.28,1) infinite;
}
/* five steps of one pitch (413 of 2096 = 19.7042cqw); after five the strip is
   back on an identical frame, so the loop has no seam */
@keyframes fwReel {
  0%,  14% { transform: translateX(0); }
  20%, 34% { transform: translateX(19.7042cqw); }
  40%, 54% { transform: translateX(39.4084cqw); }
  60%, 74% { transform: translateX(59.1126cqw); }
  80%, 94% { transform: translateX(78.8168cqw); }
  100%     { transform: translateX(98.5210cqw); }
}

@media (prefers-reduced-motion: reduce) {
  .fw-motion .fw-float, .fw-motion .fw-swim,
  .fw-motion .fwp.is-in .fw-reel__track { animation: none !important; }
  .fw-motion .fw-rise { opacity: 1; transform: none; transition: none; }
  .fw-motion .fw-fill { transform: none; transition: none; }
}

/* ===========================================================================
   30  Subculture Marine — the storefront rebuilt screen by screen
   The source is a set of 1280x832 screen designs, so each one is reproduced as
   a fixed-ratio stage with everything positioned as a percentage of it: the
   nav, sidebar, product cards, forms and cart tables are real text and CSS
   rather than a screenshot, and only the coral photography is raster. Sizes,
   positions and colours were measured off the design files.
   =========================================================================== */
.scdeck { display: grid; gap: clamp(1.6rem,3.4vw,3rem); }
.scslide { margin: 0; }
.scslide figcaption {
  margin-top: .7rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
}
.scslide figcaption b { color: var(--navy-800); margin-right: .55rem; }

.scp {
  --sc-teal: #00FCA8;      /* logo, section headings, active nav */
  --sc-gold: #FCA800;      /* outline buttons, the active category */
  --sc-cart: #00A76C;      /* add-to-cart fill */
  --sc-rule: #808080;      /* the hairline beside the sidebar */
  --sc-card: #1a1a1a;      /* card border */
  position: relative; aspect-ratio: 1280 / 832; overflow: hidden;
  background: #000; color: #fff;
  container-type: inline-size;
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 400;
  font-synthesis-weight: none;
  border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow-sm);
}
.scp--tall { aspect-ratio: 1244 / 1936; }
.scp > * { position: absolute; margin: 0; }
.scp img { display: block; }
.scp h1, .scp h2, .scp h3, .scp h4, .scp p, .scp span, .scp div, .scp li, .scp dt, .scp dd {
  font-family: inherit; font-weight: inherit; color: inherit;
  letter-spacing: inherit; line-height: inherit; text-transform: none; }
.scp ul, .scp ol { list-style: none; padding: 0; }
.scp .bx { display: block; }

/* chrome ------------------------------------------------------------------ */
/* Sizes come from the cap heights measured on the design files (Poppins caps
   at .697 em); tracking from the ink widths. */
.scp .sc-nav {
  font-size: 1.2344cqw; font-weight: 500; letter-spacing: .154em;
  text-transform: uppercase; white-space: nowrap; line-height: 1;
}
.scp .sc-nav.is-on { color: var(--sc-teal); }
.scp .sc-btn {
  display: grid; place-items: center; border: 1px solid var(--sc-gold);
  font-size: 1.1172cqw; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; white-space: nowrap; color: #fff; line-height: 1;
}
.scp .sc-h {
  font-size: 3.0234cqw; font-weight: 600; letter-spacing: .184em;
  text-transform: uppercase; color: var(--sc-teal); white-space: nowrap; line-height: 1;
}
.scp .sc-cat {
  font-size: 1.9063cqw; font-weight: 400; letter-spacing: .175em;
  text-transform: uppercase; white-space: nowrap; line-height: 1;
}
.scp .sc-cat.is-on { color: var(--sc-gold); }
.scp .sc-rule { background: var(--sc-rule); }

/* product cards ----------------------------------------------------------- */
.scp .sc-card { border: 1px solid var(--sc-card); }
.scp .sc-name {
  font-size: 1.2344cqw; font-weight: 300; letter-spacing: 0; text-transform: uppercase;
  text-align: center; white-space: nowrap; line-height: 1;
}
.scp .sc-underline { background: #fff; }
.scp .sc-price {
  font-size: 1.2344cqw; font-weight: 600; font-style: italic; letter-spacing: .034em;
  text-align: center; white-space: nowrap; line-height: 1;
}
.scp .sc-add {
  /* the label and cart mark measure 65 and 16 units inside a 100-wide pill in
     the design, so the type is set to hit that rather than to a cap height */
  display: flex; align-items: center; justify-content: center; gap: .55em;
  background: var(--sc-cart); color: #fff; overflow: hidden;
  font-size: .8984cqw; font-weight: 600; letter-spacing: 0; white-space: nowrap;
  border-radius: 2px; line-height: 1;
}
.scp .sc-add svg { width: 1.3em; height: 1.3em; fill: currentColor; flex: 0 0 auto; }

/* copy, forms and tables --------------------------------------------------- */
.scp .sc-copy {
  /* the body copy is set very wide: 771 units carries about 72 characters, which
     puts the tracking near .2em rather than the .14 it looks like */
  font-size: 1.1172cqw; font-weight: 300; letter-spacing: .184em; line-height: 1.406;
  text-transform: uppercase; text-align: justify;
}
.scp .sc-field {
  border: 1px solid var(--sc-cart); border-radius: 3px;
  display: flex; align-items: center; padding-left: 1.2cqw;
  font-size: .9375cqw; font-style: italic; color: #b9b9b9; letter-spacing: .02em;
}
.scp .sc-th {
  font-size: 1.0156cqw; font-weight: 600; letter-spacing: .06em; color: var(--sc-teal);
  white-space: nowrap; line-height: 1;
}
.scp .sc-td {
  font-size: 1.0938cqw; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; line-height: 1;
}

/* A 1280-wide screen scaled to a phone lands at about 6pt type. Below the
   breakpoint each screen keeps a legible width and pans in its own scroller. */
@media (max-width: 720px) {
  .scslide { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .scslide .scp { width: 700px; }
  .scslide figcaption::after {
    content: " — swipe to pan"; color: var(--slate); opacity: .8; letter-spacing: .04em; }
}

/* the header wordmark, set as type rather than scaled from a small raster */
.scp .sc-wm { font-weight: 700; text-transform: uppercase;
  white-space: nowrap; line-height: 1; }
/* tracking fitted to the design's own ink widths: SUB 48, CULTURE 97,
   Marine Co. 147 — the last is set very wide, as the mark has it */
.scp .sc-wm--a { color: var(--sc-teal); letter-spacing: -.056em; }
.scp .sc-wm--b { color: #fff; font-weight: 300; letter-spacing: -.058em; }
.scp .sc-wm--c { color: #fff; font-weight: 400; letter-spacing: .519em; }
/* a 1-unit rule rounds away to nothing at some display scales, which is why the
   dividers under the product names came and went between cards */
.scp .sc-hair { min-height: 1px; }

/* the payment step, built rather than screenshotted so it stays crisp */
.scp .sc-pay__h   { color: #06281d; font-weight: 600; letter-spacing: .01em; white-space: nowrap; line-height: 1; }
.scp .sc-pay__lbl { color: #06281d; font-weight: 400; letter-spacing: .01em; white-space: nowrap; line-height: 1; }
.scp .sc-pay__t   { color: #111; font-weight: 600; letter-spacing: .01em; white-space: nowrap; line-height: 1; }
.scp .sc-pay__s   { color: #7b8291; font-weight: 400; letter-spacing: .01em; white-space: nowrap; line-height: 1; }
.scp .sc-pay__sec { color: var(--sc-gold); font-weight: 500; letter-spacing: .01em; white-space: nowrap; line-height: 1; }
.scp .sc-pay__chip { position: absolute; display: grid; place-items: center;
  font-family: inherit; line-height: 1; letter-spacing: 0; }

/* ---- Subculture Marine: motion ------------------------------------------
   Opt-in, like the Fresh Take deck: nothing moves until the page script adds
   .sc-motion, so with no JavaScript every screen renders exactly as it sits at
   rest. Only transform, opacity and a mask are animated, and each screen runs
   only while it is on the page.
   ------------------------------------------------------------------------ */

/* the reef line and the corals rise in from the foot of the plate */
.sc-motion .sc-rise {
  opacity: 0; transform: translateY(13%);
  will-change: transform, opacity;
}
.sc-motion .scp.is-in .sc-rise {
  opacity: 1; transform: none;
  transition: opacity 1.1s ease-out, transform 1.35s cubic-bezier(.19,.72,.28,1);
  transition-delay: var(--d, 0ms);
}

/* The lockup starts under water and surfaces as the level falls. The edge is a
   real wave — three sines of different wavelengths, softened with a blur — and
   it drifts sideways as it descends, so the surface moves rather than scanning.
   Below the line the mark still shows faintly, the way something submerged does. */
.sc-reveal { position: absolute; }
.sc-reveal img { display: block; position: absolute; inset: 0; }
.sc-reveal__under { opacity: 0; }
.sc-motion .sc-reveal__under { opacity: .17; filter: saturate(.5) brightness(.8); }
.sc-motion .sc-reveal__over {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%221600%22%20viewBox%3D%220%200%201200%201600%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%227%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M%20-20%20-40%20L%20-20%201397.8%20L%20-10%201405.9%20L%200%201410.7%20L%2010%201412.6%20L%2020%201412.8%20L%2030%201413.2%20L%2040%201414.5%20L%2050%201416.3%20L%2060%201417.3%20L%2070%201416.5%20L%2080%201413.8%20L%2090%201410.3%20L%20100%201408.0%20L%20110%201408.2%20L%20120%201411.1%20L%20130%201415.1%20L%20140%201417.9%20L%20150%201417.4%20L%20160%201413.1%20L%20170%201405.8%20L%20180%201397.7%20L%20190%201390.6%20L%20200%201385.6%20L%20210%201382.3%20L%20220%201379.5%20L%20230%201376.4%20L%20240%201373.2%20L%20250%201371.0%20L%20260%201371.6%20L%20270%201375.9%20L%20280%201383.6%20L%20290%201392.6%20L%20300%201400.5%20L%20310%201405.2%20L%20320%201406.5%20L%20330%201405.5%20L%20340%201404.1%20L%20350%201404.1%20L%20360%201406.0%20L%20370%201409.0%20L%20380%201411.6%20L%20390%201412.8%20L%20400%201412.7%20L%20410%201412.5%20L%20420%201413.6%20L%20430%201416.6%20L%20440%201420.9%20L%20450%201424.5%20L%20460%201425.1%20L%20470%201421.4%20L%20480%201413.8%20L%20490%201404.2%20L%20500%201395.0%20L%20510%201388.0%20L%20520%201383.8%20L%20530%201381.5%20L%20540%201379.8%20L%20550%201377.8%20L%20560%201375.8%20L%20570%201375.1%20L%20580%201377.0%20L%20590%201381.8%20L%20600%201388.5%20L%20610%201394.9%20L%20620%201399.0%20L%20630%201399.7%20L%20640%201397.6%20L%20650%201394.8%20L%20660%201393.5%20L%20670%201394.9%20L%20680%201399.1%20L%20690%201404.5%20L%20700%201409.4%20L%20710%201412.9%20L%20720%201415.2%20L%20730%201417.2%20L%20740%201420.1%20L%20750%201424.0%20L%20760%201427.6%20L%20770%201429.1%20L%20780%201426.7%20L%20790%201420.0%20L%20800%201410.5%20L%20810%201400.4%20L%20820%201392.4%20L%20830%201387.6%20L%20840%201385.8%20L%20850%201385.5%20L%20860%201385.1%20L%20870%201383.9%20L%20880%201382.3%20L%20890%201381.7%20L%20900%201383.0%20L%20910%201386.3%20L%20920%201390.2%20L%20930%201392.9%20L%20940%201392.9%20L%20950%201390.3%20L%20960%201386.5%20L%20970%201383.9%20L%20980%201384.6%20L%20990%201389.0%20L%201000%201396.2%20L%201010%201404.1%20L%201020%201410.8%20L%201030%201415.5%20L%201040%201418.6%20L%201050%201421.2%20L%201060%201424.1%20L%201070%201427.2%20L%201080%201429.1%20L%201090%201428.1%20L%201100%201423.3%20L%201110%201415.3%20L%201120%201406.0%20L%201130%201397.9%20L%201140%201393.1%20L%201150%201391.7%20L%201160%201392.7%20L%201170%201393.9%20L%201180%201393.9%20L%201190%201392.1%20L%201200%201389.4%20L%201210%201387.2%20L%201220%201386.5%20L%201220%20-40%20Z%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23s%29%22%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%221600%22%20viewBox%3D%220%200%201200%201600%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%227%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M%20-20%20-40%20L%20-20%201397.8%20L%20-10%201405.9%20L%200%201410.7%20L%2010%201412.6%20L%2020%201412.8%20L%2030%201413.2%20L%2040%201414.5%20L%2050%201416.3%20L%2060%201417.3%20L%2070%201416.5%20L%2080%201413.8%20L%2090%201410.3%20L%20100%201408.0%20L%20110%201408.2%20L%20120%201411.1%20L%20130%201415.1%20L%20140%201417.9%20L%20150%201417.4%20L%20160%201413.1%20L%20170%201405.8%20L%20180%201397.7%20L%20190%201390.6%20L%20200%201385.6%20L%20210%201382.3%20L%20220%201379.5%20L%20230%201376.4%20L%20240%201373.2%20L%20250%201371.0%20L%20260%201371.6%20L%20270%201375.9%20L%20280%201383.6%20L%20290%201392.6%20L%20300%201400.5%20L%20310%201405.2%20L%20320%201406.5%20L%20330%201405.5%20L%20340%201404.1%20L%20350%201404.1%20L%20360%201406.0%20L%20370%201409.0%20L%20380%201411.6%20L%20390%201412.8%20L%20400%201412.7%20L%20410%201412.5%20L%20420%201413.6%20L%20430%201416.6%20L%20440%201420.9%20L%20450%201424.5%20L%20460%201425.1%20L%20470%201421.4%20L%20480%201413.8%20L%20490%201404.2%20L%20500%201395.0%20L%20510%201388.0%20L%20520%201383.8%20L%20530%201381.5%20L%20540%201379.8%20L%20550%201377.8%20L%20560%201375.8%20L%20570%201375.1%20L%20580%201377.0%20L%20590%201381.8%20L%20600%201388.5%20L%20610%201394.9%20L%20620%201399.0%20L%20630%201399.7%20L%20640%201397.6%20L%20650%201394.8%20L%20660%201393.5%20L%20670%201394.9%20L%20680%201399.1%20L%20690%201404.5%20L%20700%201409.4%20L%20710%201412.9%20L%20720%201415.2%20L%20730%201417.2%20L%20740%201420.1%20L%20750%201424.0%20L%20760%201427.6%20L%20770%201429.1%20L%20780%201426.7%20L%20790%201420.0%20L%20800%201410.5%20L%20810%201400.4%20L%20820%201392.4%20L%20830%201387.6%20L%20840%201385.8%20L%20850%201385.5%20L%20860%201385.1%20L%20870%201383.9%20L%20880%201382.3%20L%20890%201381.7%20L%20900%201383.0%20L%20910%201386.3%20L%20920%201390.2%20L%20930%201392.9%20L%20940%201392.9%20L%20950%201390.3%20L%20960%201386.5%20L%20970%201383.9%20L%20980%201384.6%20L%20990%201389.0%20L%201000%201396.2%20L%201010%201404.1%20L%201020%201410.8%20L%201030%201415.5%20L%201040%201418.6%20L%201050%201421.2%20L%201060%201424.1%20L%201070%201427.2%20L%201080%201429.1%20L%201090%201428.1%20L%201100%201423.3%20L%201110%201415.3%20L%201120%201406.0%20L%201130%201397.9%20L%201140%201393.1%20L%201150%201391.7%20L%201160%201392.7%20L%201170%201393.9%20L%201180%201393.9%20L%201190%201392.1%20L%201200%201389.4%20L%201210%201387.2%20L%201220%201386.5%20L%201220%20-40%20Z%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23s%29%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-size: 109.375cqw 145.8333cqw;  mask-size: 109.375cqw 145.8333cqw;
  -webkit-mask-position: 0 -129.5573cqw;      mask-position: 0 -129.5573cqw;
  will-change: mask-position;
}
.sc-motion .scp.is-in .sc-reveal__over { animation: scSurface 2.8s cubic-bezier(.34,.06,.3,1) .35s both; }
@keyframes scSurface {
  from { -webkit-mask-position: 0 -129.5573cqw;        mask-position: 0 -129.5573cqw; }
  to   { -webkit-mask-position: -26cqw -114.3229cqw;   mask-position: -26cqw -114.3229cqw; }
}
/* as the mark clears the surface the ghost underneath is no longer needed */
.sc-motion .scp.is-in .sc-reveal__under { animation: scSettle 2.8s ease-out .35s both; }
@keyframes scSettle { 0%, 55% { opacity: .17; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sc-motion .sc-rise { opacity: 1; transform: none; transition: none; }
  .sc-motion .sc-reveal__over { -webkit-mask-image: none; mask-image: none; animation: none !important; }
  .sc-motion .sc-reveal__under { opacity: 0; animation: none !important; }
}

/* ---- the working prototype ---------------------------------------------- */
.scp .sc-proto__nav, .scp .sc-proto__cat, .scp .sc-proto__add, .scp .sc-proto__cart,
.scp .sc-proto__login, .scp .sc-proto__cta, .scp .sc-proto__checkout, .scp .sc-proto__back,
.scp .sc-proto__choice, .scp .sc-proto__link, .scp .sc-proto__home {
  font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.scp .sc-proto__home { position: absolute; background: none; border: 0; padding: 0; z-index: 2; }
.scp .sc-proto__nav, .scp .sc-proto__cart {
  position: absolute; background: none; border: 0; padding: 0; color: #fff;
  transition: color .18s ease; white-space: nowrap;
}
.scp .sc-proto__nav:hover, .scp .sc-proto__cart:hover { color: var(--sc-teal); }
.scp .sc-proto__nav.is-on { color: var(--sc-teal); }
.scp .sc-proto__cart { color: var(--sc-teal); display: flex; align-items: center; gap: .35em; }
.scp .sc-proto__ico { width: 1.05em; height: 1.05em; display: inline-grid; place-items: center; }
.scp .sc-proto__ico svg { width: 100%; height: 100%; fill: currentColor; }
.scp .sc-proto__count {
  display: inline-grid; place-items: center; min-width: 1.45em; height: 1.45em; padding: 0 .3em;
  border-radius: 1em; background: var(--sc-teal); color: #04241a;
  font-weight: 700; font-size: .76em; letter-spacing: 0;
}
.scp .sc-proto__cart[data-empty="1"] .sc-proto__count { background: #2a3a35; color: #8fa39c; }
.scp .sc-proto__cat {
  position: absolute; background: none; border: 0; padding: 0;
  text-align: left; color: #fff; transition: color .18s ease;
}
.scp .sc-proto__cat:hover { color: var(--sc-teal); }
.scp .sc-proto__cat.is-on { color: var(--sc-gold); }
.scp .sc-proto__add { border: 0; transition: filter .18s ease, transform .12s ease; }
.scp .sc-proto__add:hover { filter: brightness(1.12); }
.scp .sc-proto__add:active { transform: translateY(1px); }
.scp .sc-proto__add.is-added { background: var(--sc-gold); color: #14100a; }
.scp .sc-proto__login, .scp .sc-proto__cta, .scp .sc-proto__checkout, .scp .sc-proto__back {
  background: none; transition: background .18s ease, color .18s ease;
}
.scp .sc-proto__login:hover, .scp .sc-proto__cta:hover,
.scp .sc-proto__checkout:hover, .scp .sc-proto__back:hover {
  background: var(--sc-gold); color: #14100a;
}
.scp .sc-proto__link {
  background: none; border: 0; padding: 0; color: var(--sc-teal);
  font: inherit; text-decoration: underline; text-underline-offset: 2px;
}
/* the payment methods are real options */
.scp .sc-pay__opt {
  position: absolute; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; border-radius: 8px;
}
.scp .sc-pay__opt:focus-visible { outline: 2px solid var(--sc-gold); outline-offset: 2px; }
.scp .sc-pay__dot {
  position: absolute; border-radius: 50%; background: #fff;
  border: 1.5px solid #b9bec9; pointer-events: none;
  display: grid; place-items: center;
}
.scp .sc-pay__dot.is-on { background: var(--sc-gold); border-color: var(--sc-gold); }
.scp .sc-pay__dot.is-on::after {
  content: ""; width: 52%; height: 34%; margin-top: -14%;
  border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; rotate: -45deg;
}

/* form fields in the prototype, styled like the design's own */
.scp .sc-input {
  position: absolute; font-family: inherit; font-style: italic; color: #fff;
  background: transparent; border: 1px solid var(--sc-cart); border-radius: 3px;
  padding: 0 1.2cqw; letter-spacing: .02em; box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
}
.scp .sc-input::placeholder { color: #b9b9b9; opacity: 1; }
.scp .sc-input:focus { outline: 2px solid var(--sc-teal); outline-offset: 1px; border-color: var(--sc-teal); }
.scp .sc-proto__go { background: none; transition: background .18s ease, color .18s ease; }
.scp .sc-proto__go:hover { background: var(--sc-gold); color: #14100a; }
.scp .sc-proto__choice {
  position: absolute; background: none; border: 1px solid #2c2c2c; border-radius: 6px;
  transition: border-color .18s ease, background .18s ease;
}
.scp .sc-proto__choice:hover { border-color: var(--sc-teal); background: rgba(0,252,168,.05); }
.scp .sc-proto__arrow { position: absolute; color: var(--sc-teal); font-size: 2.2cqw; line-height: 0; }
.scp .sc-proto__row-x {
  position: absolute; background: none; border: 0; color: #6d7a75; cursor: pointer;
  font-family: inherit; line-height: 1; padding: 0; transition: color .18s ease;
}
.scp .sc-proto__row-x:hover { color: var(--sc-gold); }
.scp [class*="sc-proto__"]:focus-visible {
  outline: 2px solid var(--sc-teal); outline-offset: 2px; border-radius: 2px;
}

/* the deck positions direct children of .scp; the prototype's views wrap
   theirs, so the wrappers pass the positioning down */
/* These wrappers span the whole plate so their children can be positioned
   against it — which also means they sit over the header and the sidebar and
   would eat every click aimed at them. They pass pointer events through; only
   what is actually drawn inside them takes a click. */
.scp .sc-proto__view, .scp .sc-proto__grid, .scp .sc-proto__lines {
  position: absolute; inset: 0; pointer-events: none;
}
.scp .sc-proto__view > *, .scp .sc-proto__grid > *, .scp .sc-proto__lines > * {
  position: absolute; margin: 0; pointer-events: auto;
}
/* a nested wrapper is itself a child of a view, so the rule above would hand it
   pointer events back at equal specificity — these keep it transparent */
.scp .sc-proto__view > .sc-proto__grid,
.scp .sc-proto__view > .sc-proto__lines { pointer-events: none; }
.scp .sc-proto__view[hidden], .scp .sc-proto__grid[hidden] { display: none; }

/* the caption carries the controls for the live screen */
.scslide__tools { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.scslide__tools button {
  font: inherit; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: none; border: 0; padding: 0; color: var(--blue-ink);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.scslide__tools button:hover { color: var(--navy-800); }

/* full screen: the stage grows to the viewport, keeping its ratio */
.scslide:fullscreen { background: #000; display: grid; place-items: center; padding: 0; }
.scslide:fullscreen figcaption { display: none; }
.scslide:fullscreen .scp {
  width: min(100vw, calc(100vh * 1280 / 832));
  height: auto; border: 0; border-radius: 0; box-shadow: none;
}
.scslide:-webkit-full-screen .scp {
  width: min(100vw, calc(100vh * 1280 / 832)); height: auto; border: 0;
}

/* ===========================================================================
   31  ORA posters — presentation, not reconstruction
   These are print pieces, so the page's job is to show them at a size where the
   grid reads and then get out of the way. Each sheet opens at print resolution;
   the detail shots carry the caption treatment at 100%.
   =========================================================================== */
/* a sheet in the deck: no card, no stroke — the poster simply floats on the
   page's own white, carried by its shadow */
.plate--sheet { background: none; border: 0; box-shadow: none;
  padding: clamp(1rem,3vw,2.4rem) 0; }
/* one source of truth for the sheet width -- the poster and the label under it
   are both held to it, so they can never drift apart */
.plate--sheet { --sheet-w: min(100%, 560px); }
.sheet__frame {
  display: block; margin: 0 auto; padding: 0; border: 0; background: none;
  width: var(--sheet-w); cursor: zoom-in; position: relative; font: inherit;
}
.sheet__frame img {
  display: block; width: 100%; height: auto;
  box-shadow: 0 18px 44px rgba(6,14,26,.22); transition: transform .22s ease, box-shadow .22s ease;
}
.sheet__frame:hover img { transform: translateY(-3px); box-shadow: 0 26px 56px rgba(6,14,26,.3); }
.sheet__frame:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 6px; }
.sheet__cue {
  position: absolute; right: .8rem; bottom: .8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(10,22,40,.78); padding: .35em .7em; border-radius: 100px;
  opacity: 0; transition: opacity .22s ease;
}
.sheet__frame:hover .sheet__cue, .sheet__frame:focus-visible .sheet__cue { opacity: 1; }

/* the framed shots sit on the page's own white — no card, no rounded corner and
   no tinted image ground, so nothing reads as a box around them */
.plate--bare { background: none; border: 0; box-shadow: none; padding: 0; }
.plate--bare img { border-radius: 0; background: none; }

/* the zoom viewer: the sheet at print resolution, pannable */
.zoomer {
  position: fixed; inset: 0; z-index: 200; background: rgba(8,16,28,.97);
  display: grid; grid-template-rows: auto 1fr;
}
.zoomer[hidden] { display: none; }
.zoomer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid rgba(255,255,255,.12);
}
.zoomer__title {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.zoomer__close {
  font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 1px solid rgba(255,255,255,.4); color: #fff;
  padding: .5em 1.1em; border-radius: 100px; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.zoomer__close:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.zoomer__stage { overflow: auto; overscroll-behavior: contain; cursor: grab; }
.zoomer__stage.is-dragging { cursor: grabbing; }
.zoomer__stage img { display: block; max-width: none; }
@media (prefers-reduced-motion: reduce) {
  .poster__frame, .poster__cue { transition: none; }
}

/* ---------------------------------------------------------------------------
   31b  ORA posters — motion
   Same opt-in shape as the other case studies: JS adds .ora-motion to <html>,
   so with no script (or with reduced motion asked for) every sheet renders at
   its final position and the trio sits open.
   --------------------------------------------------------------------------- */
.ora-motion .ora-rise {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.68,.28,1);
}
.ora-motion .ora-fan.ora-rise { transition-duration: .5s; }
.ora-motion .plate.is-in .ora-rise { opacity: 1; transform: none; }

/* the trio, built from the same three sheet images the deck already loaded.
   The stage holds them at the composite's geometry; closed, the two outer
   sheets sit exactly behind the front one, so it reads as a single poster.
   __b is the front slot -- it carries the black coral sheet, so the open fan
   reads white, black, white. */
.ora-fan {
  position: relative; width: 100%; aspect-ratio: 1868 / 1040;
  margin: 0 auto; max-width: 980px;
}
.ora-fan img {
  position: absolute; margin: 0; width: var(--w); height: var(--h);
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--rot));
  box-shadow: 0 0 0 1px #d6dade, 0 18px 44px rgba(6,14,26,.22);
  background: #fff;
}
.ora-fan__a { --x: 21.09%; --y: 47.60%; --w: 33.44%; --h: 79.81%; --rot: -6deg; z-index: 1; }
.ora-fan__c { --x: 78.91%; --y: 47.60%; --w: 33.44%; --h: 79.81%; --rot:  6deg; z-index: 2; }
.ora-fan__b { --x: 50.00%; --y: 50.00%; --w: 38.68%; --h: 92.31%; --rot:  0deg; z-index: 3; }

/* closed: stacked behind the front sheet, square to the page.
   The delay lets the plate's own fade-in land first, so you read a single
   poster for a beat before it opens. */
.ora-motion .ora-fan__a { transition: transform 1.05s cubic-bezier(.19,.84,.3,1) .5s; }
.ora-motion .ora-fan__c { transition: transform 1.05s cubic-bezier(.19,.84,.3,1) .62s; }
.ora-motion .plate:not(.is-in) .ora-fan__a {
  transform: translate(-50%, -50%) translate(86.4%, 3%) rotate(0deg);
}
.ora-motion .plate:not(.is-in) .ora-fan__c {
  transform: translate(-50%, -50%) translate(-86.4%, 3%) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .ora-motion .ora-rise { opacity: 1; transform: none; transition: none; }
  .ora-motion .ora-fan__a, .ora-motion .ora-fan__c,
  .ora-motion .plate:not(.is-in) .ora-fan__a,
  .ora-motion .plate:not(.is-in) .ora-fan__c {
    transform: translate(-50%,-50%) rotate(var(--rot)); transition: none;
  }
}

/* the poster labels: the numbered line keeps the deck's mono voice, the blurb
   below it drops back into body type. Both are held to the width of the piece
   they describe so the text block sits squarely under the poster. */
.plate--sheet figcaption { width: var(--sheet-w); margin-inline: auto; padding-inline: 0; }
.plate--bare  figcaption { width: min(100%, 980px); margin-inline: auto; padding-inline: 0; }
/* the label follows its poster in, a beat behind */
.ora-motion .plate figcaption.ora-rise { transition-delay: .14s; }

.plate__note {
  display: block; margin-top: .6rem; max-width: 62ch;
  font-family: var(--font-body); font-size: .95rem; line-height: 1.6;
  letter-spacing: 0; text-transform: none; color: var(--slate);
}

/* PC:BEGIN ==================================================================
   33  Pop Corals — the case study rebuilt as plates
   Same idea as the countermats deck in section 28: the case study is set as
   real HTML rather than shown as pictures, so the type is sharp, the copy is
   readable by a search engine and a screen reader, and every plate reflows to
   one column on a phone instead of shrinking into a picture of text.

   What is different is the voice. The countermats plates are drafting sheets;
   Pop Corals is a neon candy shop, so these plates take their palette and
   lettering from the storefront as it stands today:

     ink     #18023C  the deep purple the site's bands are painted in
     grape   #2A1251  her brand purple, for surfaces that sit on the ink
     magenta #CC0DA2  the accent — labels, rules, quote marks
     yellow  #EDBD00  numerals only, as the 2022 deck used them
     mist    #F3F2F2  the light band behind the product grid

   The giant watermark word behind each plate is hers too: the 2022 case study
   ran OVERVIEW, PROCESS, RESEARCH and DESIGN behind its sections.
   ========================================================================== */
.pcdeck { display: grid; gap: var(--sp-7); }

.pcp {
  --pc-ink: #18023C;
  --pc-grape: #2A1251;
  --pc-magenta: #CC0DA2;
  --pc-yellow: #EDBD00;
  --pc-mist: #F3F2F2;
  --pc-rule: #E5DFEF;
  position: relative;
  background: #fff;
  color: var(--pc-ink);
  border: 1px solid var(--pc-rule);
  border-radius: 10px;
  padding: clamp(1.5rem, 3.2cqw, 3rem);
  container-type: inline-size;
  overflow: hidden;
}
/* the dark plates: cover, brand and the two that carry a storefront */
.pcp--ink { background: var(--pc-ink); color: #fff; border-color: var(--pc-grape);
  --pc-rule: #3C2168; }
.pcp--ink .pcp__label, .pcp--ink .pcp__h, .pcp--ink .pcp__col h4,
.pcp--ink .pcp__stat dt { color: #fff; }
.pcp--ink .pcp__body p, .pcp--ink .pcp__col p, .pcp--ink .pcp__summary p,
.pcp--ink .pcp__cap { color: #CFC4E4; }
/* the brand magenta is 3.7:1 on the deep purple — fine as a fill behind white
   numerals, too weak as small text, so text on the dark plates takes a tint of
   it instead */
.pcp--ink { --pc-magenta-text: #FF67D3; }
.pcp--ink .pcp__tag, .pcp--ink .pcp__sub, .pcp--ink .pcp__summary h4,
.pcp--ink .pcp__cband, .pcp--ink .pcp__stat dt { color: var(--pc-magenta-text); }

/* the watermark: set in the plate's own lettering, large, and barely there */
.pcp__ghost { position: absolute; left: clamp(1rem, 2.6cqw, 2.4rem); top: clamp(2.6rem, 7cqw, 5rem);
  margin: 0; font-family: var(--font-deck); font-weight: 700; text-transform: uppercase;
  font-size: clamp(3.5rem, 13cqw, 11rem); line-height: .8; letter-spacing: -.02em;
  color: color-mix(in srgb, var(--pc-grape) 8%, transparent);
  pointer-events: none; user-select: none; }
.pcp--ink .pcp__ghost { color: rgba(255, 255, 255, .055); }
.pcp__ghost--right { left: auto; right: clamp(1rem, 2.6cqw, 2.4rem); text-align: right; }
.pcp > *:not(.pcp__ghost) { position: relative; }

/* header strip: plate number, section label, the standing line from the badge */
.pcp__top { display: flex; align-items: baseline; gap: .6rem; margin-bottom: clamp(1.1rem, 2.8cqw, 2.2rem); }
/* the deck's yellow numerals. On her purple plates the brand yellow is right;
   on a white one it is 1.8:1 against the paper, so the light plates take a
   darker gold that still reads as the same ink. */
.pcp__num { font-family: var(--font-deck); font-weight: 700; line-height: 1;
  font-size: clamp(1.1rem, 2.4cqw, 1.6rem); color: #A87F00; }
.pcp--ink .pcp__num { color: var(--pc-yellow); }
.pcp__label { font-family: var(--font-deck); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; font-size: clamp(.56rem, 1.05cqw, .68rem); color: var(--pc-grape); }
.pcp__tag { margin-left: auto; font-family: var(--font-deck); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; font-size: clamp(.5rem, .95cqw, .62rem); color: var(--pc-magenta); }

/* headline: magenta lead, ink remainder — the storefront's own pairing */
/* `.console h3` paints every heading in this section ORA navy, and a bare class
   ties with it on specificity and loses on order — so the two headings that are a
   single class name qualify themselves with their element. */
h3.pcp__h { font-family: var(--font-deck); font-weight: 700; text-transform: uppercase;
  line-height: 1.02; letter-spacing: -.005em; font-size: clamp(1.5rem, 4.4cqw, 3rem);
  margin: 0 0 .5rem; color: var(--pc-ink); }
.pcp__h b { color: var(--pc-magenta); font-weight: 700; }
.pcp__sub { font-family: var(--font-deck); font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; font-size: clamp(.8rem, 1.35cqw, 1.02rem); color: var(--pc-magenta);
  margin: 0 0 clamp(1rem, 2.4cqw, 2rem); padding-bottom: clamp(.8rem, 1.8cqw, 1.4rem);
  border-bottom: 1px solid var(--pc-rule); }

/* title left, the one-paragraph standfirst right, one rule under both */
.pcp__head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3.2cqw, 3.4rem); align-items: start;
  margin-bottom: clamp(1.4rem, 3.2cqw, 2.6rem); padding-bottom: clamp(.9rem, 2.2cqw, 1.6rem);
  border-bottom: 1px solid var(--pc-rule); }
.pcp__head .pcp__sub { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.pcp__summary { border-left: 1px solid var(--pc-rule); padding-left: clamp(1rem, 2.4cqw, 2rem); }
.pcp__summary h4 { margin: 0 0 .55rem; font-family: var(--font-deck); font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(.78rem, 1.2cqw, .95rem); color: var(--pc-magenta); }
.pcp__summary p, .pcp__body p { margin: 0 0 .6rem; font-family: var(--font-deck-body);
  line-height: 1.62; font-size: clamp(.82rem, 1.12cqw, .93rem); color: var(--slate); }
.pcp__body { max-width: 74ch; }
.pcp__body p:last-child, .pcp__summary p:last-child { margin-bottom: 0; }
.pcp__body strong { color: var(--pc-magenta); font-weight: 700; }

/* columns: the problem/solution pair, the objectives, the closing pair */
.pcp__cols { display: grid; gap: clamp(1rem, 2.6cqw, 2.4rem); margin-top: clamp(1.2rem, 2.8cqw, 2.2rem); }
.pcp__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcp__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcp__col h4 { margin: 0 0 .5rem; font-family: var(--font-deck); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.15;
  font-size: clamp(.86rem, 1.35cqw, 1.05rem); color: var(--pc-ink); }
.pcp__col p { margin: 0 0 .5rem; font-family: var(--font-deck-body); line-height: 1.6;
  font-size: clamp(.8rem, 1.1cqw, .92rem); color: var(--slate); }
.pcp__col--boxed { background: var(--pc-mist); border-radius: 8px;
  padding: clamp(.9rem, 2.2cqw, 1.6rem); }
.pcp--ink .pcp__col--boxed { background: var(--pc-grape); }

/* a ticked list in the plates' own lettering */
.pcp__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pcp__list li { position: relative; padding-left: 1.3em; font-family: var(--font-deck-body);
  font-size: clamp(.8rem, 1.1cqw, .92rem); line-height: 1.55; color: var(--slate); }
.pcp__list li::before { content: ""; position: absolute; left: 0; top: .52em;
  width: .5em; height: .5em; border-radius: 50%; background: var(--pc-magenta); }
.pcp--ink .pcp__list li { color: #CFC4E4; }
.pcp__list b { color: var(--pc-ink); font-weight: 700; }
.pcp--ink .pcp__list b { color: #fff; }

/* the numbers strip under the cover and the overview */
.pcp__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 2cqw, 1.8rem); margin-top: clamp(1.2rem, 2.8cqw, 2.2rem);
  padding-top: clamp(1rem, 2.4cqw, 1.8rem); border-top: 1px solid var(--pc-rule); }
.pcp__stat { margin: 0; }
.pcp__stat dt { font-family: var(--font-deck); font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; font-size: clamp(.5rem, .92cqw, .62rem); color: var(--pc-magenta); }
.pcp__stat dd { margin: .3rem 0 0; font-family: var(--font-deck); font-weight: 600;
  text-transform: uppercase; line-height: 1.15;
  font-size: clamp(.86rem, 1.5cqw, 1.15rem); color: inherit; }

/* screenshots, always in a browser frame so a page reads as a page */
.pcp__shot { margin: 0; }
.pcp__browser { border: 1px solid var(--pc-rule); border-radius: 8px; overflow: hidden;
  background: #fff; box-shadow: var(--shadow-sm); }
.pcp--ink .pcp__browser { border-color: #43276F; box-shadow: none; }
.pcp__chrome { display: flex; align-items: center; gap: .35rem;
  padding: clamp(.35rem, .9cqw, .6rem) clamp(.5rem, 1.2cqw, .9rem);
  background: var(--pc-mist); border-bottom: 1px solid var(--pc-rule); }
.pcp--ink .pcp__chrome { background: var(--pc-grape); border-bottom-color: #43276F; }
.pcp__chrome span { width: clamp(5px, .7cqw, 9px); aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, var(--pc-grape) 30%, transparent); }
.pcp--ink .pcp__chrome span { background: rgba(255, 255, 255, .25); }
.pcp__browser img { display: block; width: 100%; height: auto; }
.pcp__cap { margin: .6rem 0 0; font-family: var(--font-deck-body);
  font-size: clamp(.68rem, .98cqw, .8rem); line-height: 1.5; color: var(--slate); }
.pcp__cap b { color: var(--pc-ink); font-weight: 700; }
.pcp--ink .pcp__cap b { color: #fff; }

/* artwork beside its notes: the shape most plates use */
.pcp__stage { display: grid; gap: clamp(1.2rem, 3cqw, 2.6rem); align-items: start; }
.pcp__stage--copy { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.pcp__stage--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }
.pcp__stage--tall { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }

/* numbered notes — the deck's callouts, without the drafting leaders */
.pcp__notes { display: grid; gap: clamp(.8rem, 2cqw, 1.5rem); margin: 0; }
.pcp__note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; }
.pcp__note > b { width: 1.75em; height: 1.75em; border-radius: 50%; display: grid; place-items: center;
  background: var(--pc-magenta); color: #fff; font-family: var(--font-deck); font-weight: 600;
  line-height: 1; font-size: clamp(.62rem, 1.1cqw, .78rem); padding-bottom: .095em; }
.pcp__note dt { font-family: var(--font-deck-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: clamp(.72rem, 1.15cqw, .86rem); color: var(--pc-ink);
  margin-bottom: .25rem; }
.pcp--ink .pcp__note dt { color: #fff; }
.pcp__note dd { margin: 0; font-family: var(--font-deck-body); line-height: 1.55;
  font-size: clamp(.78rem, 1.1cqw, .9rem); color: var(--slate); }
.pcp--ink .pcp__note dd { color: #CFC4E4; }

/* what people said, on cards the color of the storefront */
.pcp__quotes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.7rem, 1.8cqw, 1.4rem); margin-top: clamp(1.2rem, 2.8cqw, 2.2rem); }
.pcp__quotes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcp__quote { margin: 0; position: relative; background: var(--pc-grape); color: #fff;
  border-radius: 8px; padding: clamp(1.4rem, 3cqw, 2rem) clamp(.9rem, 2cqw, 1.4rem) clamp(.9rem, 2cqw, 1.4rem);
  font-family: var(--font-deck-body); font-size: clamp(.76rem, 1.05cqw, .88rem); line-height: 1.55; }
.pcp__quote::before { content: "\201C"; position: absolute; left: clamp(.6rem, 1.6cqw, 1.1rem);
  top: clamp(.1rem, .6cqw, .35rem); font-family: Georgia, serif; line-height: 1;
  font-size: clamp(1.8rem, 3.6cqw, 2.8rem); color: var(--pc-magenta); }
.pcp__quote cite { display: block; margin-top: .6rem; font-style: normal;
  font-family: var(--font-deck); font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; font-size: clamp(.5rem, .9cqw, .62rem); color: var(--pc-yellow); }

/* The persona board, built to the template Donna picked: a dark rail down the
   left carrying the name on its side, and a field of white cards on mist. The
   two persona plates give up the usual plate header for it — the rail says the
   number, the label and the name, so a second header would only repeat itself. */
.pcp--persona { padding: 0; }
.pcx { --pcx-gap: clamp(.55rem, 1.3cqw, 1rem);
  display: grid; grid-template-columns: clamp(78px, 15cqw, 190px) minmax(0, 1fr); }
/* two columns, as the template rails it: the job details in the first, the name
   standing at the foot of the second */
.pcx__rail { position: relative; background: var(--pc-ink); color: #fff;
  padding: clamp(.9rem, 2cqw, 1.6rem) clamp(.4rem, 1cqw, .9rem);
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto 1fr;
  justify-content: center; column-gap: clamp(.4rem, 1.1cqw, 1rem);
  row-gap: clamp(1rem, 2.6cqw, 2rem); }
.pcx__num { grid-column: 1 / -1; justify-self: center; }
.pcx__meta { grid-column: 1; grid-row: 2; align-self: center; }
h3.pcx__name { grid-column: 2; grid-row: 2; align-self: end; }
.pcx__num { font-family: var(--font-deck); font-weight: 700; line-height: 1;
  font-size: clamp(1.1rem, 2.4cqw, 1.6rem); color: var(--pc-yellow); }
/* the rail's type reads bottom-to-top, as it does on her board */
.pcx__meta, .pcx__name { writing-mode: vertical-rl; transform: rotate(180deg); }
.pcx__meta { display: flex; flex-direction: row-reverse; align-items: center;
  gap: clamp(1.4rem, 3.4cqw, 2.8rem); margin: 0; }
/* each pair opens with a hairline running on in the same column as the words, the way
   the template rules its rail. In vertical writing the flex main axis runs down the
   rail, so the rule is a flex item with a length and a 1.5px thickness. */
.pcx__meta div { display: flex; align-items: flex-start; gap: .75em; }
.pcx__meta div::before { content: ""; flex: 0 0 clamp(1.6rem, 4cqw, 3.2rem); width: 1.5px;
  background: rgba(255, 255, 255, .5); }
.pcx__meta dt { font-family: var(--font-deck); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: clamp(.64rem, 1.02cqw, .8rem); color: #fff; }
.pcx__meta dd { margin: 0; font-family: var(--font-deck-body);
  font-size: clamp(.68rem, 1.08cqw, .86rem); color: #CFC4E4; }
h3.pcx__name { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .3em;
  font-family: var(--font-deck); font-weight: 700; text-transform: uppercase; line-height: .85;
  letter-spacing: .02em; font-size: clamp(1.7rem, 5cqw, 3.8rem); color: #fff; }
.pcx__name span { font-weight: 600; font-size: .21em; letter-spacing: .2em;
  color: var(--pc-yellow); }
/* the flourish where the rail meets the board: the dark edge bows out and a
   magenta line follows it, drawn rather than faked with a border so it keeps
   its curve at every plate height */
.pcx__edge { position: absolute; left: 100%; top: 0; height: 100%; width: clamp(14px, 2.6cqw, 34px);
  pointer-events: none; }

/* the board is a grid, not a stack of boxes that happen to sit near each other: one
   gap everywhere, an outer margin of one and a half of it, and every card stretched to
   its row so the tops and bottoms line up across the whole plate */
.pcx__board { background: var(--pc-mist); padding: calc(var(--pcx-gap) * 1.6); min-width: 0; }
.pcx__top { display: flex; align-items: baseline; gap: .6rem;
  margin-bottom: clamp(.7rem, 1.8cqw, 1.3rem); }
.pcx__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pcx-gap); align-items: stretch; }
/* square corners on the board: the template's blocks are plain rectangles, and the
   rounding was the last thing softening the grid */
.pcx__card { background: #fff; padding: clamp(.75rem, 1.7cqw, 1.25rem);
  min-width: 0; display: flex; flex-direction: column; }
.pcx__card h4 { margin: 0; font-family: var(--font-deck); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.1;
  font-size: clamp(.7rem, 1.12cqw, .88rem); color: var(--pc-ink); }
.pcx__hint { margin: .2rem 0 clamp(.6rem, 1.4cqw, .9rem); font-family: var(--font-deck-body);
  font-size: clamp(.64rem, .92cqw, .76rem); line-height: 1.4; color: var(--slate); }
.pcx__card ul { list-style: none; margin: 0; padding: 0; display: grid;
  gap: clamp(.4rem, 1cqw, .7rem); }
.pcx__card li { position: relative; padding-left: .85em; font-family: var(--font-deck-body);
  font-size: clamp(.68rem, .98cqw, .82rem); line-height: 1.45; color: var(--slate); }
.pcx__card li::before { content: "\2013"; position: absolute; left: 0; color: var(--pc-magenta); }

/* the bio card: portrait and facts down the left, the words beside them */
.pcx__bio { grid-column: span 2; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto; gap: clamp(.9rem, 2.2cqw, 1.8rem); align-items: start; }
.pcx__face { width: clamp(72px, 10.5cqw, 128px); aspect-ratio: 1; border-radius: 50%;
  display: block; }
/* the stats run along the foot of the card, in the same blocks the behavior traits
   use — label in the deck's yellow, value in white */
.pcx__stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3rem;
  margin: clamp(.4rem, 1cqw, .8rem) 0 0; }
.pcx__stats div { display: flex; align-items: baseline; gap: .6em; padding: .4em .75em;
  background: var(--pc-ink); }
.pcx__stats dt { font-family: var(--font-deck); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: clamp(.5rem, .8cqw, .62rem); color: var(--pc-yellow); }
.pcx__stats dd { margin: 0; font-family: var(--font-deck-body); line-height: 1.3;
  font-size: clamp(.62rem, .9cqw, .76rem); color: #fff; }
.pcx__who h4 { font-size: clamp(.88rem, 1.4cqw, 1.1rem); }
.pcx__role { margin: .1rem 0 0; font-family: var(--font-deck); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  font-size: clamp(.54rem, .88cqw, .66rem); color: var(--pc-magenta); }
.pcx__said { margin: clamp(.5rem, 1.2cqw, .8rem) 0 0; font-family: var(--font-deck-body);
  font-style: italic; font-size: clamp(.72rem, 1.05cqw, .88rem); line-height: 1.5;
  color: var(--pc-ink); }
.pcx__bio p:last-child { margin: clamp(.5rem, 1.2cqw, .8rem) 0 0; font-family: var(--font-deck-body);
  font-size: clamp(.68rem, .98cqw, .82rem); line-height: 1.5; color: var(--slate); }

/* the personality scales: a yellow rule with the dot set where her own words put her */
.pcx__scales { flex: 1 1 auto; display: flex; flex-direction: column;
  justify-content: space-between; gap: clamp(.6rem, 1.4cqw, 1rem); }
.pcx__scale { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.pcx__scale span { font-family: var(--font-deck-body); font-size: clamp(.64rem, .92cqw, .78rem);
  color: var(--pc-ink); }
/* Every track is the same length -- measured identical at 780, 900, 1000, 1100, 1200
   and 1440. What made them read as uneven is the dot: a dark disc sitting on an evenly
   yellow line reads as the end of a bar, so a dot at 80% looked like a longer slider
   than one at 38%. Drawing the run up to the dot and leaving the rest pale keeps the
   full length visible, so all five plainly stop in the same place. */
.pcx__scale i { grid-column: 1 / -1; position: relative; height: 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--pc-yellow) 26%, #fff); margin-top: .4rem; }
.pcx__scale i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--at); background: var(--pc-yellow); border-radius: 2px; }
.pcx__scale i::after { content: ""; position: absolute; left: var(--at); top: 50%;
  width: clamp(8px, 1.1cqw, 12px); aspect-ratio: 1; border-radius: 50%;
  background: var(--pc-ink); transform: translate(-50%, -50%); }

/* what she follows: the brands, apps and devices from the foot of her board */
/* the two stacked cards divide the row between them, so the column ends level with
   its neighbours instead of stopping short */
.pcx__stack { display: grid; grid-template-rows: auto 1fr; gap: var(--pcx-gap); }
.pcx__inf { display: grid; gap: .35rem; margin-bottom: clamp(.6rem, 1.4cqw, .9rem); }
.pcx__inf:last-child { margin-bottom: 0; }
.pcx__inf > span { font-family: var(--font-deck); font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; font-size: clamp(.5rem, .82cqw, .6rem); color: var(--pc-magenta); }
.pcx__logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.35rem, .9cqw, .6rem); }
.pcx__logos img { height: clamp(18px, 2.1cqw, 24px); width: auto; display: block; }
.pcx__logos svg { height: clamp(16px, 1.9cqw, 22px); width: auto; display: block;
  color: var(--pc-ink); }
.pcx__card .pcx__chips { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem;
  margin: 0; padding: 0; }
.pcx__chips li { padding: .35em .7em; background: var(--pc-ink); color: #fff;
  font-family: var(--font-deck); font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; font-size: clamp(.52rem, .84cqw, .64rem); }
.pcx__chips li::before { content: none; }
.pcx__board .pcp__foot { margin-top: clamp(1rem, 2.4cqw, 1.8rem); }

/* The journey map: five stages across, four bands down. Each stage is one
   column element rather than five loose cells, so on a phone the map can break
   into five stage cards that keep their own band labels — a flat grid would
   stack as four lists of five, which is the wrong way round. Subgrid is what
   keeps the bands level across the columns. */
.pcp__map { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr));
  grid-template-rows: auto repeat(4, auto);
  border: 1px solid var(--pc-rule); border-radius: 8px; overflow: hidden; }
.pcp__bands, .pcp__stagecol { display: grid; grid-row: 1 / -1;
  grid-template-rows: auto repeat(4, 1fr); }
@supports (grid-template-rows: subgrid) {
  .pcp__bands, .pcp__stagecol { grid-template-rows: subgrid; }
}
.pcp__stagecol { border-left: 1px solid var(--pc-rule); }
.pcp__bands > *, .pcp__stagecol > * { padding: clamp(.6rem, 1.5cqw, 1rem) clamp(.5rem, 1.3cqw, .9rem);
  border-top: 1px solid var(--pc-rule); }
.pcp__bands > :first-child, .pcp__stagecol > :first-child { border-top: 0; }
.pcp__stagehd { background: var(--pc-ink); color: #fff; }
.pcp__stagehd b { display: block; color: inherit; font-family: var(--font-deck); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.1;
  font-size: clamp(.72rem, 1.25cqw, .95rem); }
.pcp__stagehd span { display: block; margin-top: .2rem; font-family: var(--font-deck-body);
  font-size: clamp(.62rem, .92cqw, .74rem); line-height: 1.35; color: #CFC4E4; }
.pcp__band { background: var(--pc-mist); font-family: var(--font-deck); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; line-height: 1.2;
  font-size: clamp(.52rem, .92cqw, .64rem); color: var(--pc-magenta); align-content: center; }
.pcp__cell { font-family: var(--font-deck-body); font-size: clamp(.7rem, 1cqw, .84rem);
  line-height: 1.45; color: var(--slate); }
.pcp__cell--feel { color: var(--pc-ink); font-style: italic; }
.pcp__cell--fix { background: color-mix(in srgb, var(--pc-magenta) 7%, #fff); color: var(--pc-ink); }
/* each cell names its own band, for the stacked layout and for anyone reading
   the map a cell at a time; the band column says it on a wide screen */
.pcp__cband { display: none; font-family: var(--font-deck); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; color: var(--pc-magenta); }

/* the lo-fi wireframe, drawn rather than photographed so it stays sharp */
.pcp__wire { display: grid; gap: clamp(.3rem, .8cqw, .55rem); background: #fff;
  border: 1px solid var(--pc-rule); border-radius: 6px; padding: clamp(.4rem, 1cqw, .7rem); }
.pcp__wire div, .pcp__wire span { background: #DBD7E4; border-radius: 3px; position: relative; }
.pcp__wire .w-nav { height: clamp(14px, 2.4cqw, 26px); background: #C6C0D4; }
/* the placeholder cross, drawn as two diagonal bands rather than a picture */
.pcp__wire .w-hero { aspect-ratio: 16 / 7;
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - 1px), #BAB3CB calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to top right, transparent calc(50% - 1px), #BAB3CB calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
/* wrappers carry the numbered badge, so they hold no fill of their own */
.pcp__wire .w-intro, .pcp__wire .w-row, .pcp__wire .w-grid { background: none; }
.pcp__wire .w-intro { display: grid; gap: clamp(.25rem, .6cqw, .45rem);
  padding-block: clamp(.2rem, .6cqw, .45rem); }
.pcp__wire .w-intro span { height: clamp(4px, .7cqw, 7px); width: 72%; margin-inline: auto; }
.pcp__wire .w-intro span + span { width: 46%; }
.pcp__wire .w-row, .pcp__wire .w-grid { display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(.3rem, .8cqw, .55rem); }
.pcp__wire .w-row div { aspect-ratio: 1; }
.pcp__wire .w-grid div { aspect-ratio: 3 / 4; }
.pcp__wire .w-cta { height: clamp(34px, 6cqw, 66px); background: #CFC9DD; }
.pcp__wire .w-foot { height: clamp(18px, 3cqw, 34px); background: #C6C0D4; }
.pcp__wire b { position: absolute; top: -.55em; left: -.55em; z-index: 1;
  width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--pc-magenta); color: #fff;
  display: grid; place-items: center; font-family: var(--font-deck); font-weight: 600; line-height: 1;
  font-size: clamp(.55rem, .95cqw, .7rem); padding-bottom: .09em; }

/* the brand plate: chips, specimen, cut-outs */
.pcp__swatches { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.6rem, 1.6cqw, 1.2rem); margin: 0; padding: 0; }
.pcp__swatches li { text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(.55rem, .92cqw, .68rem); letter-spacing: .04em; color: inherit; }
.pcp__swatches span { display: block; aspect-ratio: 1; border-radius: 50%; margin-bottom: .45rem; }
.pcp__type p { margin: 0 0 .35rem; font-family: var(--font-deck); color: inherit; line-height: 1.1; }
.pcp__type .t1 { font-weight: 700; text-transform: uppercase; font-size: clamp(1.3rem, 3.4cqw, 2.4rem); }
.pcp__type .t2 { font-weight: 600; text-transform: uppercase; font-size: clamp(.95rem, 2.2cqw, 1.5rem); }
.pcp__type .t3 { font-weight: 400; text-transform: uppercase; font-size: clamp(.8rem, 1.6cqw, 1.1rem);
  letter-spacing: .06em; }
.pcp__type .t4 { font-family: var(--font-deck-body); font-weight: 400;
  font-size: clamp(.78rem, 1.1cqw, .92rem); line-height: 1.6; }
.pcp__cats { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.5rem, 1.4cqw, 1.1rem); margin: 0; padding: 0; align-items: end; }
.pcp__cats li { text-align: center; }
.pcp__cats img { display: block; width: auto; height: clamp(46px, 8cqw, 96px); margin: 0 auto .4rem; }
.pcp__cats span { font-family: var(--font-deck); font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; font-size: clamp(.5rem, .88cqw, .62rem); color: var(--pc-magenta); }

/* the closing rule and the sheet number */
.pcp__foot { display: flex; align-items: center; gap: clamp(.5rem, 1.4cqw, 1rem);
  margin-top: clamp(1.6rem, 3.6cqw, 2.8rem); }
.pcp__hair { flex: 1 1 auto; height: 1px; background: var(--pc-rule); }
.pcp__hair--short { flex: 0 0 clamp(20px, 3.4cqw, 48px); }
.pcp__page { flex: 0 0 auto; border: 1px solid var(--pc-rule); padding: .3rem clamp(.5rem, 1.2cqw, .9rem);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .22em;
  font-size: clamp(.5rem, .82cqw, .62rem); color: var(--slate); }
.pcp--ink .pcp__page { color: #CFC4E4; }

/* Below this width the deck stops being a deck: every grid becomes one column
   and the type goes back to real reading sizes, because a 10px note is a
   picture of text, not text. */
@container (max-width: 720px) {
  .pcp__head, .pcp__stage,
  .pcp__cols--2, .pcp__cols--3 { grid-template-columns: 1fr; }
  /* the persona board: the rail lies down across the top, its type the right way
     up again, and the cards run one to a row */
  .pcx, .pcx__grid { grid-template-columns: 1fr; }
  .pcx__rail { grid-template-rows: none; grid-template-columns: auto 1fr; align-items: center;
    justify-content: start; gap: .9rem; padding: 1rem 1.2rem; }
  .pcx__num { grid-column: 1; justify-self: start; }
  .pcx__meta, h3.pcx__name { grid-column: 2; grid-row: auto; align-self: center; }
  .pcx__meta, .pcx__name { writing-mode: horizontal-tb; transform: none; }
  .pcx__meta { display: none; }
  h3.pcx__name { flex-direction: row; align-items: baseline; gap: .6em; font-size: 1.9rem; }
  .pcx__edge { display: none; }
  .pcx__bio { grid-column: auto; grid-template-columns: 1fr; }
  .pcx__card li, .pcx__facts dd, .pcx__hint { font-size: .9rem; }
  .pcx__card h4 { font-size: .95rem; }
  .pcx__scale span { font-size: .85rem; }
  .pcp__head { gap: 1.1rem; }
  .pcp__summary { border-left: 0; padding-left: 0; padding-top: 1rem; border-top: 1px solid var(--pc-rule); }
  .pcp__quotes, .pcp__quotes--2 { grid-template-columns: 1fr; }
  .pcp__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcp__swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pcp__cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pcp__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcp__ghost { font-size: 3.4rem; top: 2.2rem; }
  .pcp__sub { font-size: .82rem; }
  .pcp__body p, .pcp__summary p, .pcp__col p, .pcp__list li { font-size: .92rem; }
  .pcp__note dt { font-size: .78rem; }
  .pcp__note dd, .pcp__quote, .pcp__cell { font-size: .9rem; }
  .pcp__cap { font-size: .8rem; }
  /* the map becomes five stage cards, each cell naming its own band */
  .pcp__map { grid-template-columns: 1fr; grid-template-rows: none; }
  .pcp__bands { display: none; }
  .pcp__stagecol { grid-row: auto; grid-template-rows: none; border-left: 0; }
  .pcp__cband { display: block; margin-bottom: .2rem; }
}
/* PC:END */

/* TB:BEGIN =================================================================
   32  Trailblazer — the product story rebuilt plate by plate
   Each plate is its deck page rendered with the lettering removed, with the type
   set on top as real text and placed by measured baselines in the deck's own
   2096 x 1554 units, so it reads to search engines and screen readers and stays
   true at any width. Generated by publish_tb.py -- edit the generator, not here.
   ============================================================================ */
.tbdeck { display: grid; gap: clamp(1.6rem,3.4vw,3rem); }
.tbslide { margin: 0; }
.tbslide figcaption { margin-top: .7rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.tbslide figcaption b { color: var(--navy-800); margin-right: .55rem; }
.tbp { position: relative; aspect-ratio: 2096 / 1554; overflow: hidden; background: #F4F0E8;
  color: #1A1710; container-type: inline-size; font-synthesis: none;
  border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow-sm); }
.tbp > * { position: absolute; margin: 0; white-space: nowrap; }
.tbp h2, .tbp h3, .tbp p { font-weight: 400; letter-spacing: 0; text-transform: none; }
.tbp .tb-bg { inset: 0; width: 100%; height: 100%; display: block; }
.tbp .tb-ch  { font-family: 'Playfair Display', Georgia, serif; line-height: 1; color: #1A1710; }
.tbp .tb-chi { font-family: 'Playfair Display', Georgia, serif; line-height: 1; color: #C4861C; font-style: italic; }
.tbp .tb-h   { font-family: 'Playfair Display', Georgia, serif; color: #1A1710; }
.tbp .tb-h em { font-style: italic; color: #C4861C; }
.tbp .tb-b   { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 400; color: #7A7060; }
/* 400, untracked: ink mass picks 400 over 300, and it matches the deck's line widths
   to 0.4 units without the tracking 300 would need */
.tbp .tb-lat { font-family: 'DM Sans', system-ui, sans-serif; font-style: italic; line-height: 1; color: #C4861C; }
@media (max-width: 720px) {
  .tbslide { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .tbslide .tbp { width: 680px; }
}
.tbp > p, .tbp > h2, .tbp > h3 { line-height: 1; letter-spacing: 0; margin: 0; text-transform: none; }
.tbp .tj { display: block; text-align-last: justify; } .tbp .tjl { display: block; }
.tbp .tx1 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 400; color: #F4F0E8; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx2 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 400; color: #F4F0E8; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx3 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 700; color: #6B7E6A; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx4 { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 400; color: #F4F0E8; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx5 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; color: #1A1710; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx6 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-style: italic; color: #C4861C; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx7 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 400; color: #7A7060; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx8 { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 400; font-style: italic; color: #C4861C; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx9 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-style: italic; color: #6B7E6A; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx10 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 400; color: #7A7060; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx11 { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 400; font-style: italic; color: #121C1A; letter-spacing: -0.030em; text-transform: none; }
.tbp .tx12 { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 400; font-style: italic; color: #6B7E6A; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx13 { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-style: italic; color: #1A1710; letter-spacing: 0.043em; text-transform: none; }
.tbp .tx14 { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-style: italic; color: #C4861C; letter-spacing: -0.042em; text-transform: none; }
.tbp .tx15 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 700; color: #121C1A; letter-spacing: -0.030em; text-transform: none; }
.tbp .tx16 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 700; color: #121C1A; letter-spacing: 0.000em; text-transform: uppercase; }
.tbp .tx17 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 400; color: #121C1A; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx18 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 700; color: #1C2B24; letter-spacing: -0.030em; text-transform: none; }
.tbp .tx19 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 700; color: #1C2B24; letter-spacing: 0.000em; text-transform: uppercase; }
.tbp .tx20 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; color: #C4861C; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx21 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-style: italic; color: #F4F0E8; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx22 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; color: #C4861C; letter-spacing: -0.030em; text-transform: none; }
.tbp .tx23 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 600; color: #121C1A; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx24 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 600; color: #6B7E6A; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx25 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 600; color: #6B7E6A; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx26 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 500; color: #121C1A; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx27 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 500; color: #6B7E6A; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx28 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 500; color: #6B7E6A; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx29 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 700; color: #121C1A; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx30 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 600; color: #F4F0E8; letter-spacing: -0.013em; text-transform: uppercase; }
.tbp .tx31 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 300; color: #F4F0E8; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx32 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 600; color: #F4F0E8; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx33 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 400; color: #F4F0E8; letter-spacing: 0.030em; text-transform: none; }
.tbp .tx34 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 700; color: #1A1710; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx35 { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-style: italic; color: #F4F0E8; letter-spacing: 0.037em; text-transform: none; }
.tbp .tx36 { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 400; font-style: italic; color: #F4F0E8; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx37 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 300; color: #7A7060; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx38 { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 400; font-style: italic; color: #1A1710; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx39 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 500; color: #C4861C; letter-spacing: 0.227em; text-transform: none; }
.tbp .tx40 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 700; color: #1C2B24; letter-spacing: 0.196em; text-transform: none; }
.tbp .tx41 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 600; color: #1C2B24; letter-spacing: -0.021em; text-transform: none; }
.tbp .tx42 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 700; color: #C4861C; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx43 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 600; color: #1C2B24; letter-spacing: -0.030em; text-transform: none; }
.tbp .tx44 { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; color: #1C2B24; letter-spacing: -0.030em; text-transform: none; }
.tbp .tx45 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 500; color: #1C2B24; letter-spacing: -0.017em; text-transform: none; }
.tbp .tx46 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 700; color: #1C2B24; letter-spacing: 0.030em; text-transform: none; }
.tbp .tx47 { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; color: #1C2B24; letter-spacing: -0.017em; text-transform: none; }
.tbp .tx48 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 600; color: #FFFFFF; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx49 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 400; color: #766C5C; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx50 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-style: italic; color: #C4861C; letter-spacing: 0.128em; text-transform: none; }
.tbp .tx51 { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 700; color: #C4861C; letter-spacing: 0.000em; text-transform: none; }
.tbp .tx52 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; color: #121C1A; letter-spacing: 0.000em; text-transform: none; }
/* centred on the shape it sits in: left is that shape's centre */
.tbp .tb-c { transform: translateX(-50%); text-align: center; }
/* plate 14: the booking-flow prototype -- Donna's 3x screens inside the plates'
   iPhone frame, with tap targets placed in the screens' own 375 x 812 points */
.tbproto { position: relative; background: #F4F0E8; color: #1A1710; container-type: inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "intro device panel"; align-items: center;
  gap: clamp(20px, 3.5vw, 56px); padding: clamp(28px, 4.5vw, 64px) clamp(20px, 4.5vw, 64px); }
.tbproto__intro { grid-area: intro; align-self: start; }
.tbproto__device { grid-area: device; }
.tbproto__panel { grid-area: panel; }
.tbproto__kicker { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(14px, 1.35cqw, 18px);
  line-height: 1.3; margin: 0 0 1.4em; letter-spacing: 0; text-transform: none; }
.tbproto__kicker em { color: #C4861C; }
.tbproto__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 400;
  font-size: clamp(34px, 4.4cqw, 62px); line-height: 1.02; margin: 0 0 .45em; letter-spacing: 0; text-transform: none; }
.tbproto__lede { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; color: #7A7060;
  font-size: clamp(16px, 1.4cqw, 19px); line-height: 1.6; margin: 0; max-width: 30ch; }

.tbproto__phone { position: relative; width: clamp(250px, 30cqw, 360px); aspect-ratio: 1064 / 2096;
  filter: drop-shadow(0 18px 28px rgba(26, 23, 16, .22)); }
/* the screen is its own stacking context under the frame, so a sliding screen can
   never paint over the bezel, the rounded corners or the Dynamic Island */
.tbproto__screen { position: absolute; z-index: 0; isolation: isolate; left: 8.4567%; top: 4.3276%;
  width: 83.0867%; height: 91.3090%; overflow: hidden; border-radius: 12% / 5.6%; background: #121C1A; }
.tbproto__frame { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* one screen; --u is one of the screen's points */
.tbproto__view { position: absolute; inset: 0; overflow: hidden; background: #121C1A;
  container-type: inline-size; --u: calc(100cqw / 375);
  transition: transform .38s cubic-bezier(.2, .7, .2, 1), opacity .38s ease; }
.tbproto__view > img:only-child, .tbproto__base { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tbproto__view.is-in-right, .tbproto__view.is-out-right { transform: translateX(100%); }
.tbproto__view.is-in-left, .tbproto__view.is-out-left { transform: translateX(-28%); opacity: .35; }
.tbproto__view.is-fading { opacity: 0; }
.tbproto__view.is-fading { transition-duration: .26s; }
.tbproto__layer { position: absolute; display: block; pointer-events: none; }

.tbproto__hot { position: absolute; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden;
  border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tbproto__hot:focus-visible { outline: 2px solid #E0A33A; outline-offset: 1px; }
.tbproto__ripple { position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(224, 163, 58, .38) 0, rgba(224, 163, 58, .16) 45%, rgba(224, 163, 58, 0) 70%);
  transform: scale(.1); opacity: 1; animation: tbp-ripple .55s ease-out forwards; }
@keyframes tbp-ripple { to { transform: scale(1); opacity: 0; } }

/* the guide ring glides between the targets on a screen */
.tbproto__ring { position: absolute; box-sizing: border-box; pointer-events: none; border: 2px solid #E0A33A;
  transition: left .5s cubic-bezier(.2, .8, .2, 1), top .5s cubic-bezier(.2, .8, .2, 1),
    width .5s cubic-bezier(.2, .8, .2, 1), height .5s cubic-bezier(.2, .8, .2, 1),
    border-radius .5s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
  animation: tbp-ring-in .35s ease-out, tbp-pulse 1.9s ease-out .35s infinite; }
.tbproto__ring.is-fresh { transition: none; }
.tbproto__ring.is-gone { opacity: 0; }
.tbproto__ring.is-nudge { animation: tbp-nudge .45s ease-in-out, tbp-pulse 1.9s ease-out .45s infinite; }
@keyframes tbp-ring-in { from { opacity: 0; transform: scale(1.18); } to { opacity: 1; transform: none; } }
@keyframes tbp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 163, 58, .6); }
  70%  { box-shadow: 0 0 0 12px rgba(224, 163, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 163, 58, 0); } }
@keyframes tbp-nudge { 0%, 100% { transform: none; } 20% { transform: translateX(-5%) scale(1.06); }
  45% { transform: translateX(4%) scale(1.06); } 70% { transform: translateX(-2%); } }

/* site / trail: the details sheet */
.tbproto__sheet { position: absolute; will-change: transform;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.tbproto__sheet.is-closed { transform: translateY(74%); }
.tbproto__sheet .tbproto__sheetimg { left: 0; top: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 calc(var(--u) * -4) calc(var(--u) * 14) rgba(0, 0, 0, .28)); }

/* dates, guests */
.tbproto__swap { opacity: 0; transition: opacity .3s ease; }
.tbproto__swap.is-on { opacity: 1; }
.tbproto__pop { opacity: 0; transform: scale(.4); transition: opacity .18s ease, transform .42s cubic-bezier(.16, 1, .3, 1); }
.tbproto__pop.is-on { opacity: 1; transform: none; }
.tbproto__wipe { clip-path: inset(0 100% 0 0); transition: clip-path .5s cubic-bezier(.2, .8, .2, 1) .06s; }
.tbproto__wipe.is-on { clip-path: inset(0 0 0 0); }
.tbproto__digit { opacity: 0; transition: opacity .22s ease, transform .32s cubic-bezier(.2, .8, .2, 1); }
.tbproto__digit.is-on { opacity: 1; }
.tbproto__step { transition: opacity .25s ease; }
.tbproto__step.is-off { opacity: .35; }
.tbproto__step.is-press { animation: tbp-press .3s ease-out; }
@keyframes tbp-press { 40% { transform: scale(.84); } 100% { transform: none; } }
.tbproto__veil { position: absolute; background: rgba(244, 240, 232, .52); pointer-events: none;
  opacity: 0; transition: opacity .3s ease; }
.tbproto__veil.is-on { opacity: 1; }
.tbproto__rise { opacity: 0; transform: translateY(calc(var(--u) * 7)); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.tbproto__rise--late { transition-delay: .14s; }
.tbproto__rise.is-on { opacity: 1; transform: none; }

/* checkout, drawn for the prototype in the app's own type and colours */
.tbx { position: absolute; inset: 0; color: #1C2B24; font-family: 'Barlow', system-ui, sans-serif; }
.tbx > * { position: absolute; margin: 0; box-sizing: border-box; }
.tbx p { white-space: nowrap; letter-spacing: 0; text-transform: none; }
.tbx-title { text-align: center; font: 600 calc(var(--u) * 31)/1 'Barlow Condensed', system-ui, sans-serif; color: #F4F0E8; }
.tbx-thumb { border-radius: calc(var(--u) * 10); }
.tbx-site { font: 700 calc(var(--u) * 17)/1.1 'Barlow Condensed', system-ui, sans-serif; }
.tbx-meta { font: 400 calc(var(--u) * 12.5)/1.25 'Barlow', system-ui, sans-serif; color: #6B7E6A; }
.tbx-badge { display: grid; place-items: center; border-radius: 999px; background: #C8A96E;
  font: 600 calc(var(--u) * 12)/1 'Barlow Condensed', system-ui, sans-serif; color: #1C2B24; }
.tbx-rule { border: 0; background: #E1DFD5; }
.tbx-section { font: 500 calc(var(--u) * 10.5)/1.3 'Barlow', system-ui, sans-serif; color: #6B7E6A;
  letter-spacing: .1em !important; text-transform: uppercase !important; }
/* a quiet reset: :where keeps it below every .tbx-* rule */
:where(.tbx) button { margin: 0; padding: 0; border: 0; overflow: hidden; cursor: pointer; font: inherit; color: inherit;
  background: none; -webkit-tap-highlight-color: transparent; }
.tbx button:focus-visible { outline: 2px solid #E0A33A; outline-offset: 2px; }
.tbx-autofill { border-radius: 999px; background: #E6E4DA; color: #2D5A3D;
  font: 600 calc(var(--u) * 11)/1 'Barlow', system-ui, sans-serif; transition: opacity .3s ease; }
.tbx-autofill span { color: #C4861C; }
.tbx-autofill.is-done { opacity: .45; }
.tbx-seg { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 11); background: #E6E4DA; }
.tbx-seg__opt { position: relative; border-radius: calc(var(--u) * 8); background: transparent;
  font: 600 calc(var(--u) * 13)/1 'Barlow Condensed', system-ui, sans-serif; color: #6B7E6A;
  transition: background .25s ease, color .25s ease; }
.tbx-seg__opt[aria-checked="true"] { background: #121C1A; color: #F4F0E8; }
.tbx-field { display: block; border-radius: calc(var(--u) * 12); background: #FBF9F4; text-align: left;
  box-shadow: inset 0 0 0 1px #DAD8CE; transition: box-shadow .25s ease, opacity .3s ease, transform .3s ease; }
.tbx-field.is-typing { box-shadow: inset 0 0 0 1.5px #C4861C; }
.tbx-field.is-filled { box-shadow: inset 0 0 0 1px #A9C9B1; }
.tbx-ico { position: absolute; left: calc(var(--u) * 13); top: calc(var(--u) * 12); width: calc(var(--u) * 18); height: calc(var(--u) * 18);
  fill: none; stroke: #6B9E78; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tbx-label { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 6);
  font: 500 calc(var(--u) * 9.5)/1.2 'Barlow', system-ui, sans-serif; color: #8A968A; letter-spacing: .03em; }
.tbx-value { position: absolute; left: calc(var(--u) * 40); right: calc(var(--u) * 30); top: calc(var(--u) * 19);
  display: flex; align-items: center; white-space: nowrap; overflow: hidden;
  font: 500 calc(var(--u) * 14.5)/1.25 'Barlow', system-ui, sans-serif; color: #1C2B24; }
.tbx-field--mono .tbx-value { font: 400 calc(var(--u) * 13.5)/1.3 'JetBrains Mono', ui-monospace, monospace; }
.tbx-field.is-empty .tbx-value::before { content: 'Tap to fill'; color: #B3BBB1; }
.tbx-caret { width: 1.5px; height: 1em; margin-left: 1px; background: #C4861C; opacity: 0; }
.tbx-field.is-typing .tbx-caret { opacity: 1; animation: tbx-blink .8s steps(1) infinite; }
@keyframes tbx-blink { 50% { opacity: 0; } }
.tbx-ok { position: absolute; right: calc(var(--u) * 12); top: calc(var(--u) * 12); width: calc(var(--u) * 18); height: calc(var(--u) * 18);
  fill: none; stroke: #2D5A3D; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .35s cubic-bezier(.16, 1, .3, 1); }
.tbx-field.is-filled .tbx-ok { opacity: 1; transform: none; }
.tbx[data-method="apple"] .tbx-field--pay { opacity: 0; transform: translateY(calc(var(--u) * -8)); pointer-events: none; }
.tbx-due { font: 700 calc(var(--u) * 17)/1.2 'Barlow Condensed', system-ui, sans-serif; }
.tbx-amount { text-align: right; font: 700 calc(var(--u) * 21)/1.2 'Barlow Condensed', system-ui, sans-serif; color: #2D5A3D; }
.tbx-fee { font: 400 calc(var(--u) * 11)/1.25 'Barlow', system-ui, sans-serif; color: #6B7E6A; }
.tbx-pay { border-radius: calc(var(--u) * 16.67); background: #121C1A; color: #F4F0E8; opacity: .45;
  font: 600 calc(var(--u) * 17)/1 'Barlow Condensed', system-ui, sans-serif; transition: opacity .3s ease, background .3s ease; }
.tbx-pay.is-ready { opacity: 1; }
.tbx-pay.is-paid { background: #2D5A3D; }
.tbx-pay__in { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); transition: transform .3s ease; }
.tbx-pay__ico { width: calc(var(--u) * 15); height: calc(var(--u) * 15); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tbx-pay__spin { position: absolute; right: calc(var(--u) * 18); top: 50%; width: calc(var(--u) * 16); height: calc(var(--u) * 16);
  margin-top: calc(var(--u) * -8); border-radius: 50%; border: 2px solid rgba(244, 240, 232, .25); border-top-color: #E0A33A;
  opacity: 0; transition: opacity .2s ease; }
.tbx-pay.is-busy .tbx-pay__spin { opacity: 1; animation: tbx-spin .7s linear infinite; }
@keyframes tbx-spin { to { transform: rotate(1turn); } }
.tbx-demo { text-align: center; font: 400 calc(var(--u) * 11)/1.2 'Barlow', system-ui, sans-serif; color: #A7B2A6; }

/* confirmation: the ring draws, the check follows, a few sparks */
.tbx-done { position: absolute; pointer-events: none; }
.tbx-done svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tbx-done__arc, .tbx-done__tick { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tbx-done__halo { opacity: 0; transform-box: view-box; transform-origin: var(--o) var(--o); }
.tbx-spark { opacity: 0; transform-box: view-box; transform-origin: var(--o) var(--o); }
.tbx-done.is-drawn .tbx-done__arc { stroke-dashoffset: 0; transition: stroke-dashoffset .75s cubic-bezier(.65, 0, .35, 1); }
.tbx-done.is-drawn .tbx-done__tick { stroke-dashoffset: 0; transition: stroke-dashoffset .35s cubic-bezier(.3, .7, .4, 1) .7s; }
.tbx-done.is-drawn .tbx-done__halo { animation: tbx-halo 1.1s ease-out 1s; }
.tbx-done.is-drawn .tbx-spark { animation: tbx-spark .7s cubic-bezier(.2, .8, .3, 1) 1s; }
.tbx-done.is-still * { transition: none !important; animation: none !important; }
@keyframes tbx-halo { 0% { opacity: 0; transform: scale(.8); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes tbx-spark {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(var(--s0)) scale(.4); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(var(--s1)) scale(1); } }
/* Trail Complete: the hiker takes a slow breath; Achievements: the level bar pulses */
.tbx-breathe.is-on { animation: tbx-breathe 4.2s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes tbx-breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(232, 168, 76, 0)); }
  42%      { transform: scale(1.08); filter: drop-shadow(0 0 calc(var(--u) * 7) rgba(232, 168, 76, .6)); }
  55%      { transform: scale(1.08); filter: drop-shadow(0 0 calc(var(--u) * 7) rgba(232, 168, 76, .6)); } }
.tbx-xp.is-on { animation: tbx-xp 2.4s ease-in-out infinite; }
@keyframes tbx-xp {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(224, 163, 58, 0)); }
  50%      { filter: brightness(1.2) drop-shadow(0 0 calc(var(--u) * 5) rgba(224, 163, 58, .8)); } }
.tbx-toast { position: absolute; z-index: 3; display: flex; align-items: center; gap: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 14); box-sizing: border-box; border-radius: calc(var(--u) * 16);
  background: rgba(18, 28, 26, .92); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 24) rgba(0, 0, 0, .35);
  color: #F4F0E8; font: 400 calc(var(--u) * 12)/1.3 'Barlow', system-ui, sans-serif;
  opacity: 0; transform: translateY(-120%); transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .25s ease; }
.tbx-toast b { font: 600 calc(var(--u) * 14)/1.2 'Barlow Condensed', system-ui, sans-serif; }
.tbx-toast.is-on { opacity: 1; transform: none; }
.tbx-toast__ico { flex: none; width: calc(var(--u) * 22); height: calc(var(--u) * 22); fill: none; stroke: #E0A33A; stroke-width: 1.6; stroke-linecap: round; }

/* navigate: the marker walks the route and the covered trail turns gold */
.nav-map { position: absolute; overflow: hidden; pointer-events: none; }
.nav-map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nav-done { fill: none; stroke: #E8A84C; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.nav-done--glow { stroke: rgba(232, 168, 76, .32); stroke-width: 10; filter: blur(2px); }
.nav-dot circle { transform-box: fill-box; transform-origin: center; }
.nav-dot__core { fill: #E8A84C; opacity: 0; transform: scale(.4);
  transition: opacity .25s ease, transform .5s cubic-bezier(.16, 1, .3, 1); }
.nav-dot__halo { fill: rgba(232, 168, 76, .35); opacity: 0; }
.nav-dot.is-lit .nav-dot__core { opacity: 1; transform: none; }
.nav-dot.is-lit .nav-dot__halo { animation: nav-halo .9s ease-out; }
@keyframes nav-halo { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(2.4); } }
.nav-marker { position: absolute; width: calc(100% * 40 / 375); aspect-ratio: 1; transform: translate(-50%, -50%); }
.nav-marker::before { content: ""; position: absolute; inset: -30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 163, 58, .42) 0 45%, rgba(224, 163, 58, .22) 60%, rgba(224, 163, 58, 0) 71%);
  animation: nav-breathe 2.6s ease-in-out infinite; }
.nav-marker img { position: relative; display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 0, 0, .4)); }
.nav-marker.is-arrived::after { content: ""; position: absolute; inset: -30%; border-radius: 50%;
  border: 2px solid #E8A84C; animation: nav-burst 1s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes nav-breathe { 50% { transform: scale(1.1); opacity: .8; } }
@keyframes nav-burst { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.9); } }
.nav-t { position: absolute; margin: 0; white-space: nowrap; letter-spacing: 0; text-transform: none;
  transition: opacity .17s ease, transform .25s ease; }
.nav-t.is-out { opacity: 0; transform: translateY(calc(var(--u) * 3)); }
.nav-head, .nav-title { font: 600 calc(var(--u) * 16)/1 'Barlow Condensed', system-ui, sans-serif; color: #F4F0E8; }
.nav-pill { text-align: center; font: 700 calc(var(--u) * 14.67)/1 'Barlow Condensed', system-ui, sans-serif; color: #6B9E78; }
.nav-sub { font: 400 calc(var(--u) * 11)/1 'Barlow', system-ui, sans-serif; color: #A3C4A8; }
.nav-stat { position: absolute; margin: 0; display: flex; justify-content: center; align-items: baseline;
  gap: calc(var(--u) * 3.33); line-height: 1; white-space: nowrap; letter-spacing: 0; }
.nav-num { font: 700 calc(var(--u) * 23.33)/1 'Barlow Condensed', system-ui, sans-serif; color: #F4F0E8;
  font-variant-numeric: tabular-nums; }
.nav-unit { font: 500 calc(var(--u) * 10)/1 'Barlow', system-ui, sans-serif; color: #A3C4A8; }
.nav-pp { position: absolute; pointer-events: none; }
.nav-pp svg { display: block; width: 100%; height: 100%; fill: #F4F0E8; stroke: #F4F0E8; }
.nav-pp__pause rect { stroke: none; }
.nav-pp__play, .nav-pp.is-paused .nav-pp__pause { opacity: 0; }
.nav-pp.is-paused .nav-pp__play { opacity: 1; }
.nav-pp.is-done { opacity: .4; transition: opacity .4s ease; }

/* the panel beside the phone */
.tbproto__steps { list-style: none; counter-reset: tbp; margin: 0 0 18px; padding: 0; }
/* the site gives list items a bottom margin; here every row is ruled and evenly spaced */
.tbproto__steps li { counter-increment: tbp; margin: 0; }
.tbproto__steps button { display: flex; gap: .8em; align-items: baseline; width: 100%; margin: 0;
  text-align: left; background: none; border: 0; border-top: 1px solid rgba(122, 112, 96, .25);
  padding: .68em 0; font: 400 clamp(15px, 1.3cqw, 18px)/1.3 'Barlow Semi Condensed', system-ui, sans-serif;
  color: #7A7060; cursor: pointer; letter-spacing: 0; text-transform: none; }
.tbproto__steps li:last-child button { border-bottom: 1px solid rgba(122, 112, 96, .25); }
.tbproto__steps button::before { content: counter(tbp, decimal-leading-zero); min-width: 1.9em;
  font: italic 400 .8em 'DM Sans', system-ui, sans-serif; color: #C4861C; }
.tbproto__steps button:hover { color: #1A1710; }
.tbproto__steps button.is-done { color: #6B7E6A; }
.tbproto__steps button[aria-current="step"] { color: #1A1710; font-weight: 600; }
.tbproto__note { font: italic 400 14px/1.5 'DM Sans', system-ui, sans-serif; color: #6B7E6A; margin: 0 0 16px; }
.tbproto__controls { display: flex; flex-wrap: wrap; gap: 10px; }
.tbproto__btn { font: 700 12px/1 'DM Sans', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  padding: .95em 1.3em; border-radius: 999px; border: 1px solid #1C2B24; background: transparent;
  color: #1C2B24; cursor: pointer; }
.tbproto__btn--go { background: #1C2B24; color: #F4F0E8; }
.tbproto__btn:disabled { opacity: .35; cursor: default; }
.tbproto__steps button:focus-visible, .tbproto__btn:focus-visible { outline: 2px solid #C4861C; outline-offset: 3px; }

@media (max-width: 960px) {
  .tbproto { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "intro intro" "device panel"; }
  .tbproto__lede { max-width: 46ch; }
}
@media (max-width: 600px) {
  .tbproto { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "device" "panel"; }
  .tbproto__phone { width: min(76vw, 320px); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tbproto__view, .tbproto__sheet, .tbproto__ring, .tbproto__swap, .tbproto__pop, .tbproto__wipe,
  .tbproto__digit, .tbproto__rise, .tbx-field, .tbx-ok, .tbx-toast, .tbx-done *, .nav-t, .nav-dot__core { transition: none !important; }
  .tbproto__ring, .tbproto__ripple, .tbproto__step, .tbx-done *, .tbx-caret,
  .nav-marker::before, .nav-marker::after, .nav-dot__halo, .tbx-breathe, .tbx-xp { animation: none !important; }
  .tbproto__ring { box-shadow: 0 0 0 4px rgba(224, 163, 58, .35); }
}
/* TB:END */