@charset "UTF-8";
/* ===========================================================================
   Esthetics Pro Collective
   ---------------------------------------------------------------------------
   BRAND SKIN — matches the live site (estheticsprocollective.com / styles.css)
   exactly: warm charcoal ink, greige, one taupe accent, pulled straight from
   that stylesheet. Variable NAMES are unchanged from the clinical version
   (--celadon-deep, --stone, --sky, etc. where still relevant) so most rules
   below didn't need to move — only values changed. Where the two designs
   disagree on which sections are light vs. dark (masthead + footer are light
   greige on the live site, not the clinical rework's dark "stone"), the
   rules themselves were patched too — that's a real color-scheme difference,
   not just a hex swap.

   Colors, verbatim from the live site's styles.css:
     #383732  ink          body text, hero/founders/CTA grounds
     #eeeceb  porcelain    masthead, footer, page background, light bands
     #9e8571  aubergine    the one accent — mission band, every hover state
     #f7f6f5  porcelain-2  FAQ question ground
     #fff     white        band--plum text, nav CTA pill, cards

   Two shades are derived, exactly as the live site itself derives them
   (this isn't new — it's copied from styles.css, which already solved this):
   #9e8571 is only ~3:1 against #eeeceb, fine for buttons/large text, too low
   for links and body copy.
     --celadon-deep (taupe-deep)  #7d6553   links + small text on light (4.7:1)
     --taupe-light                #c4ac97   labels/eyebrows on dark ink (5.5:1)

   --stone/--stone-dim/--stone-accent and --sky/--celadon are retired — the
   real site has no separate "stone" ground or blue accent, just light greige
   and dark ink sections. Anything that referenced them now points straight
   at --porcelain/--ink/--taupe-light/--text-invert-dim.

   Type and shape language are unchanged from the clinical rework: Josefin
   Sans display, DM Mono labels, 2px near-square radius, the hairline
   flow-line motif.
   ======================================================================== */

:root {
  /* Color ---------------------------------------------------------------- */
  --ink:          #383732;   /* warm charcoal: text, hero/founders/CTA grounds */
  --aubergine:    #9e8571;   /* the one accent: mission band, every hover state */
  --porcelain:    #eeeceb;   /* masthead, footer, page background, light bands  */
  --porcelain-2:  #f7f6f5;   /* FAQ question ground                             */
  --white:        #fff;      /* band--plum text, nav CTA pill, cards            */
  --celadon-deep: #7d6553;   /* derived — links + small text on light (4.7:1)   */
  --taupe-light:  #c4ac97;   /* derived — labels/eyebrows on dark ink (5.5:1)   */

  --text:         var(--ink);
  --text-dim:     #6b6862;
  --text-invert:  var(--porcelain);
  --text-invert-dim: #b8b4ad;
  --rule:         rgba(56, 55, 50, .16);
  --rule-invert:  rgba(238, 236, 235, .22);

  /* Type ------------------------------------------------------------------ */
  /*--display: "Bodoni Moda", "Didot", "Times New Roman", serif;*/
  --display: 'QuickSand', sans-serif;
  /*--body:    "Jost", "Futura", "Century Gothic", system-ui, sans-serif;*/
  --body: 'Josefin Sans', sans-serif;
  --mono:    "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(1rem, .97rem + .14vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.1rem + .35vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.3rem + .7vw, 1.95rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.4vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.7rem + 2.9vw, 4.6rem);

  /* Space ----------------------------------------------------------------- */
  --gap:     clamp(1rem, .8rem + 1vw, 1.6rem);
  --band:    clamp(3.5rem, 2.5rem + 4.5vw, 7rem);
  --shell:   72rem;
  --radius:  2px;           /* almost square: plate, not app */
}

/* Reset ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--porcelain);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid rgba(158, 133, 113, .5);   /* the original focus ring */
  outline-offset: 2px;
  border-radius: var(--radius);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--text-invert);
  padding: .75rem 1.25rem; z-index: 200;
}
.skip:focus { left: 1rem; top: 1rem; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, .6rem + 2.4vw, 2.5rem);
}

/* Typography -------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { text-wrap: pretty; }
/* No max-width by default — a lede standing alone above a full-width section
   (The Edit, free resources, 404) should use the whole shell width. The 34ch
   cap only makes sense next to a callout or signup form, so it's scoped to
   that .split context instead of applied globally. */
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--text-dim); }
.split .lede { max-width: 34ch; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .17em;
  color: var(--celadon-deep);
}

/* The flow line: hairline rule terminating in an arrowhead. Site's one motif. */
.flowline {
  display: block;
  position: relative;
  height: 1px;
  background: var(--rule);
  margin-top: 1.4rem;
}
.flowline::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  width: 0; height: 0;
  transform: translateY(-50%);
  border-left: 7px solid var(--aubergine);
  border-block: 4px solid transparent;
}

.flowhead { margin-bottom: calc(var(--band) * .42); }
.flowhead__h { margin-top: .5rem; }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .11em;
  text-decoration: none;
  padding: .95em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.btn--solid  { background: var(--porcelain); color: #000; }
.btn--solid:hover  { background: var(--aubergine); color: var(--white); }
.btn--ghost  { border-color: currentColor; }
.btn--ghost:hover  { background: var(--aubergine); color: var(--white); border-color: var(--aubergine); }

/* Masthead ---------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--porcelain);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.masthead .wordmark { text-align: center; }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap);
  min-height: 4.4rem;
}

.wordmark { text-decoration: none; line-height: 1; display: block; }
.wordmark__name {
  display: block;
  font-family: var(--display);
  font-size: 1.16rem;
  letter-spacing: .01em;
}
.wordmark__sub {
  display: block;
  font-family: var(--mono);
  font-size: .58rem;
  text-transform: lowercase;
  letter-spacing: .42em;
  color: var(--ink);
  margin-top: .18rem;
}
.wordmark--footer .wordmark__name { font-size: 1.35rem; }

.nav__list { display: flex; align-items: center; gap: clamp(.9rem, .4rem + 1.1vw, 1.7rem); }
.nav__list a {
  font-family: var(--mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  text-decoration: none;
  color: var(--ink);
  padding-block: .4rem;
  transition: color .2s ease;
}
.nav__list a:hover, .nav__list a[aria-current] { color: var(--ink); }
.nav__cta a {
  color: #000 !important;
  background: var(--white);
  padding: .62em 1.05em;
  border-radius: var(--radius);
}
.nav__cta a:hover { background: var(--aubergine); color: var(--white) !important; }

.navtoggle {
  display: none;
  align-items: center; gap: .55rem;
  background: none; border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .5rem .8rem;
  font-family: var(--mono); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .12em;
}
.navtoggle__bars { position: relative; width: 14px; height: 8px; }
.navtoggle__bars::before, .navtoggle__bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1px;
  background: currentColor; transition: transform .25s ease;
}
.navtoggle__bars::before { top: 0; }
.navtoggle__bars::after  { bottom: 0; }
[aria-expanded="true"] .navtoggle__bars::before { transform: translateY(3.5px) rotate(45deg); }
[aria-expanded="true"] .navtoggle__bars::after  { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 56rem) {
  .navtoggle { display: inline-flex; }
  .nav {
    position: absolute; inset: 100% 0 auto 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    display: none;
  }
  .nav[data-open] { display: block; }
  .nav__list {
    flex-direction: column; align-items: stretch;
    gap: 0;
    padding: .5rem clamp(1.1rem, .6rem + 2.4vw, 2.5rem) 1.5rem;
  }
  .nav__list li + li { border-top: 1px solid var(--rule); }
  .nav__list a { display: block; padding: .95rem 0; font-size: .82rem; }
  .nav__cta { margin-top: 1rem; border-top: 0 !important; }
  .nav__cta a { text-align: center; }
}

/* Hero -------------------------------------------------------------------- */
.hero {
  background: var(--ink);
  color: var(--text-invert);
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) 0;
  position: relative;
  overflow: hidden;
}
/* Headline sits beside the video again, so it needs a smaller size than a
   full-width h1 would — see .hero__h below. The lede/CTA row moved out of
   the grid entirely: it's a full-width block under both columns now. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
  align-items: center;
}
@media (max-width: 52rem) { .hero__grid { grid-template-columns: 1fr; } }

.hero__h {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
  margin-block: 1rem 0;
}
.hero__h em {
  font-style: italic;
  color: var(--taupe-light);
}
.hero .eyebrow { color: var(--taupe-light); }

.hero__copy { margin-top: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.hero__lede { color: var(--text-invert-dim); font-size: var(--step-1); max-width: 65ch; line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

/* Signature element: a short loop of estheticians practicing technique,
   filling the same frame the stroke-map diagram used to occupy. Paused for
   reduced-motion users by main.js, since CSS can't stop <video> playback. */
.herovideo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

/* Ledger ------------------------------------------------------------------ */
.ledger {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.ledger--light { border-top-color: var(--rule); }
.ledger__cell {
  padding: 1.4rem 1.2rem 1.6rem 0;
  border-right: 1px solid var(--rule);
}
.ledger--light .ledger__cell { border-right-color: var(--rule); }
.ledger__cell:last-child { border-right: 0; }
.ledger__cell + .ledger__cell { padding-left: 1.2rem; }

.ledger dt {
  font-family: var(--mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--taupe-light);
}
.ledger--light dt { color: var(--text-dim); }
.ledger dd {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
  line-height: 1.05;
  margin-top: .5rem;
}
.ledger__unit {
  display: block;
  font-family: var(--body);
  font-size: .74rem;
  letter-spacing: .02em;
  color: var(--text-invert-dim);
  margin-top: .45rem;
  line-height: 1.35;
}
.ledger--light .ledger__unit { color: var(--text-dim); }

@media (max-width: 46rem) {
  .ledger { grid-template-columns: repeat(2, 1fr); }
  .ledger__cell:nth-child(2n) { border-right: 0; }
  .ledger__cell:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .ledger--light .ledger__cell:nth-child(n + 3) { border-top-color: var(--rule); }
}

/* Bands ------------------------------------------------------------------- */
.band { padding-block: var(--band); }
.band--paper { background: var(--porcelain); }
.band--tint  { background: var(--porcelain-2); }
.band--plum  { background: var(--aubergine); color: var(--white); }
.band--ink   { background: var(--ink); color: var(--text-invert); }
.band--plum .eyebrow { color: var(--white); }
.band--ink .eyebrow { color: var(--taupe-light); }
.band--plum .flowline { background: var(--rule-invert); }
.band--plum .flowline::after { border-left-color: var(--white); }
.band--ink .flowline { background: var(--rule-invert); }
.band--ink .flowline::after { border-left-color: var(--taupe-light); }

/* Cards ------------------------------------------------------------------- */
.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.2rem, .8rem + 1.6vw, 2.2rem);
}

/* For grids whose item count varies (The Edit): auto-fit's 1fr tracks grow to
   fill the row when there are fewer items than fit, which looks oversized
   with only one or two cards. Locking to a fixed 3 columns on desktop keeps
   card size constant no matter how many editions exist — unused tracks just
   stay empty instead of stretching. Below this width, .cardgrid's own
   auto-fit already collapses to fewer columns, which is what we want on
   mobile/tablet regardless of count. */
@media (min-width: 60rem) {
  .cardgrid--fixed3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.card:hover { border-color: var(--celadon-deep); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }

.card__media { display: block; background: var(--porcelain-2); }
.card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.card__body { display: flex; flex-direction: column; flex: 1; padding: 1.35rem 1.35rem 1.15rem; }

.ceubadge {
  font-family: var(--mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--celadon-deep);
  display: flex; align-items: baseline; gap: .4rem;
  margin-bottom: .7rem;
}
.ceubadge__n {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}
.ceubadge--free { color: var(--text-dim); }

.card__title { margin-bottom: .6rem; }
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--celadon-deep); }

.card__blurb { font-size: .92rem; color: var(--text-dim); flex: 1; }

.card__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem;
  margin-top: 1.25rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
}
.card__more {
  font-family: var(--mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .12em;
  text-decoration: none;
  color: var(--celadon-deep);
}
.card__more:hover { text-decoration: underline; }
.card__more::after { content: " \203A"; }
.card__price { font-family: var(--display); font-size: 1.15rem; }

/* Prose ------------------------------------------------------------------- */
.prose { max-width: 62ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: var(--step-2); margin-top: 2.6rem; }
.prose h3 { font-size: var(--step-1); margin-top: 2rem; }
.prose a  { color: var(--celadon-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.prose strong { font-weight: 500; }
.prose ul, .prose ol { padding-left: 0; }
.prose li + li { margin-top: .55rem; }

/* Flow-marker list: the arrowhead motif reused as a bullet, because these
   items are directional steps in a protocol rather than a neutral list. */
.flowlist li {
  position: relative;
  padding-left: 1.7rem;
}
.flowlist li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 0; height: 0;
  border-left: 6px solid var(--celadon-deep);
  border-block: 4px solid transparent;
}

/* Numbered steps. Numbers are used ONLY where order genuinely matters — the
   renewal walkthrough — so the numbering carries real information. */
.steps { counter-reset: step; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 3.2rem;
  padding-bottom: 1.9rem;
  border-left: 1px solid var(--rule);
  margin-left: 1rem;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  transform: translateX(-50%);
  background: var(--porcelain);
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .08em;
  color: var(--celadon-deep);
  padding: .15rem .35rem;
}
.steps h3 { margin-bottom: .4rem; }

/* Accordion --------------------------------------------------------------- */
/* Built on <details>/<summary>. Every answer sits in the raw HTML, so crawlers
   and AI assistants can read it whether or not the panel is open. On the old
   site the answers never made it into the served HTML at all. */
.qa { border-top: 1px solid var(--rule); }
.qa__item { border-bottom: 1px solid var(--rule); }
.qa__item summary {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.25;
  list-style: none;
}
.qa__item summary::-webkit-details-marker { display: none; }
.qa__item summary::after {
  content: "+";
  flex: none;
  font-family: var(--mono); font-weight: 400;
  color: var(--celadon-deep);
  transition: transform .2s ease;
}
.qa__item[open] summary::after { content: "\2013"; }
.qa__item summary:hover { color: var(--celadon-deep); }
.qa__answer { padding-bottom: 1.4rem; max-width: 64ch; color: var(--text-dim); }
.qa__answer > * + * { margin-top: .9rem; }
.qa__answer a { color: var(--celadon-deep); }

/* Course page ------------------------------------------------------------- */
.crumbs { padding-top: 1.5rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .55rem; font-family: var(--mono); font-size: .7rem;
             text-transform: uppercase; letter-spacing: .11em; color: var(--text-dim); }
.crumbs li + li::before { content: "\203A"; margin-right: .55rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--celadon-deep); }

.coursehero { padding-block: clamp(2rem, 1.4rem + 2.5vw, 3.5rem) var(--band); }
.coursehero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
@media (max-width: 52rem) { .coursehero__grid { grid-template-columns: 1fr; } }

.coursehero__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  font-family: var(--mono); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-dim);
  margin-bottom: 1.2rem;
}
.coursehero__meta strong { color: var(--celadon-deep); font-weight: 500; }
.coursehero h1 { font-size: var(--step-3); }
.coursehero__lede { font-size: var(--step-1); color: var(--text-dim); margin-top: 1.1rem; line-height: 1.5; }

.enrollbox {
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: var(--radius);
  padding: 1.5rem;
  position: sticky; top: 5.6rem;
}
@media (max-width: 52rem) { .enrollbox { position: static; } }
.enrollbox__price { font-family: var(--display); font-size: var(--step-2); line-height: 1; }
.enrollbox__price small { display: block; font-family: var(--mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--text-dim); margin-top: .6rem; }
.enrollbox .btn { display: block; text-align: center; margin-top: 1.2rem; }
.enrollbox__facts { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
  font-size: .84rem; color: var(--text-dim); }
.enrollbox__facts li + li { margin-top: .5rem; }
.enrollbox__facts dt { font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .13em; }

.pricetbd {
  font-family: var(--mono); font-size: .78rem;
  color: var(--text-dim); line-height: 1.5;
}

/* Founders ---------------------------------------------------------------- */
.founders { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.8rem, 1rem + 3vw, 3.5rem); }
.founder__portrait {
  width: 100%; max-width: 15rem;
  aspect-ratio: 1; object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--rule);
  margin-bottom: 1.4rem;
}
.founder h3 { font-size: var(--step-2); }
.founder__role { font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--taupe-light); margin-top: .5rem; }
.founder__bio { margin-top: 1.2rem; color: var(--text-invert-dim); font-size: .95rem; }
.founder__bio > * + * { margin-top: .9rem; }
.founder__creds { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.3rem; }
.founder__creds li {
  font-family: var(--mono); font-size: .64rem;
  text-transform: uppercase; letter-spacing: .1em;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .35rem .6rem;
  color: var(--text-invert-dim);
}

/* CTA --------------------------------------------------------------------- */
.cta { background: var(--ink); color: var(--text-invert); padding-block: clamp(2.8rem, 2rem + 3vw, 4.5rem); }
.cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.8rem; }
.cta__h { font-size: var(--step-2); }
.cta__sub { color: var(--text-invert-dim); margin-top: .7rem; max-width: 44ch; font-size: .95rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Signup ------------------------------------------------------------------ */
.signup { max-width: 34rem; }
.signup__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup__label {
  display: block;
  font-family: var(--mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .14em;
  margin-bottom: .55rem;
}
.signup__row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.signup__label { flex: 1 0 100%; }
.signup__input {
  flex: 1 1 14rem;
  font: inherit;
  padding: .85em 1em;
  background: transparent;
  color: inherit;
  border: 1px solid var(--rule-invert);
  border-radius: var(--radius);
}
.band--paper .signup__input, .band--tint .signup__input { border-color: var(--rule); }
.signup__input::placeholder { color: var(--text-invert-dim); opacity: .7; }
.signup__note { font-size: .8rem; color: var(--text-invert-dim); margin-top: .9rem; }
.band--paper .signup__note, .band--tint .signup__note { color: var(--text-dim); }

/* Callout ----------------------------------------------------------------- */
.callout {
  border-left: 2px solid var(--celadon-deep);
  background: var(--porcelain-2);
  padding: 1.3rem 1.5rem;
  font-size: .94rem;
}
.callout__label {
  font-family: var(--mono); font-size: .64rem;
  text-transform: uppercase; letter-spacing: .15em;
  color: var(--celadon-deep);
  margin-bottom: .6rem;
}
.reviewed {
  font-family: var(--mono); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-dim);
}

/* Photos inside The Edit — a banner under the title and one photo attached
   to a single tip, just to break up long stretches of text. Width-capped
   and centered rather than full-bleed so portrait or landscape both sit
   comfortably inside the prose measure without dominating the page. */
.edit-figure {
  max-width: 30rem;
  margin: 1.6rem auto;
}
.edit-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.edit-figure--full { max-width: 100%; }

/* The "fills its column" figures (header banner + the side-by-side tip
   photo) get a fixed, fairly short aspect ratio instead of their natural
   one. Without this, a portrait source photo next to a short text column
   towers over it — object-fit crops to the same shape regardless of what
   the source image's own proportions happen to be. */
.edit-figure--full img { aspect-ratio: 3 / 2; object-fit: cover; }

/* The Edit's numbered steps normally use .prose's 62ch measure, which is
   comfortable for a single text column but leaves a lot of empty space down
   the right side of the page on desktop. .edit-steps lifts that cap so a
   tip with a photo can break out to two columns and use that space instead;
   .steps__copy puts the 62ch measure back for the text itself so plain
   tips (no image) still read at a normal width. */
.edit-steps.prose { max-width: none; }
.steps__copy { max-width: 62ch; }
.steps__copy > * + * { margin-top: 1.15rem; }
.steps__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: start;
}
@media (max-width: 52rem) { .steps__split { grid-template-columns: 1fr; } }

/* Two-column split -------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
}
@media (max-width: 52rem) { .split { grid-template-columns: 1fr; } }

.figstack { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.figstack img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.figstack img:nth-child(2) { transform: translateY(1.4rem); }
@media (max-width: 40rem) { .figstack img:nth-child(2) { transform: none; } }

/* Footer ------------------------------------------------------------------ */
.footer { background: var(--porcelain); color: var(--text-dim); padding-block: clamp(2.8rem, 2rem + 3vw, 4.5rem) 2rem; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(1.8rem, 1rem + 3vw, 3rem);
}
@media (max-width: 62rem) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 38rem) { .footer__grid { grid-template-columns: 1fr; } }

.footer__brand .wordmark { color: var(--ink); }
.footer__tag { font-size: .9rem; margin-top: 1rem; max-width: 28ch; }
.footer__head {
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.footer__nav a { font-size: .88rem; text-decoration: none; color: var(--ink); }
.footer__nav a:hover { color: var(--celadon-deep); text-decoration: underline; }
.footer__nav li + li { margin-top: .6rem; }
.footer__ceu { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: var(--celadon-deep); margin-left: .4rem; }

.license {
  display: flex; gap: .9rem; align-items: flex-start;
  margin-top: 1.6rem;
  text-decoration: none;
  font-size: .78rem;
  line-height: 1.5;
}
.license img { flex: none; background: #fff; padding: .3rem; border-radius: var(--radius); }
.license__label, .license__num, .license__prof, .license__verify { display: block; }
.license__label { font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink); }
.license__num { font-family: var(--mono); color: var(--celadon-deep); }
.license__prof { font-size: .72rem; }
.license__verify { color: var(--celadon-deep); margin-top: .3rem; }
.license:hover .license__verify { text-decoration: underline; }

.footer__legal {
  display: flex; flex-wrap: wrap; gap: .7rem 2rem;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: .76rem;
}
.footer__disclaim { max-width: 46ch; }
.footer__disclaim a { color: var(--celadon-deep); }

/* Utilities --------------------------------------------------------------- */
.u-center { text-align: center; margin-inline: auto; }
.u-mt { margin-top: clamp(1.6rem, 1rem + 2vw, 3rem); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}