/* ==========================================================================
   lindseylorette.com
   Built 2026-08-26 (Build 7, content and website lane).

   PALETTE LOCK, enforced in this file. Source of truth:
   Projects/Brand/Logo/Palette-v4-Proposal-2026-08-19.md, v4.1 and v4.2 sections.

     1. Cream #F7F3EC is the entire canvas. Every surface.
     2. Gold #DFAB43 NEVER carries text, at any size. Gold appears only as
        button fill, rule lines, card edges and graphic accents.
     3. Espresso #241F1A is ink and button-sized elements only.
     4. NO dark bands. NO dark footer. Ever.
     5. Tints are small charged elements, never full-width bands.
        Shell pink leads. Seaglass and lavender stay out of the website.
     6. Prata carries display type. Boldness comes from SCALE, since Prata
        ships one weight. Montserrat carries body and letterspaced labels.

   If you are editing this file, do not add a colour that is not in :root.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fonts */

@font-face {
  font-family: 'Prata';
  src: url('../fonts/Prata-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------- 2. Tokens */

:root {
  /* Locked palette. Nothing else may be used. */
  --cream: #F7F3EC;
  --gold: #DFAB43;
  --espresso: #241F1A;
  --shell: #F2B3A4;

  /* Working derivatives of the locked colours, for edges and quiet rules.
     These are the locked colours at reduced opacity, never new hues. */
  --ink-70: rgba(36, 31, 26, 0.70);
  --ink-55: rgba(36, 31, 26, 0.55);
  --ink-14: rgba(36, 31, 26, 0.14);
  --ink-08: rgba(36, 31, 26, 0.08);
  --gold-40: rgba(223, 171, 67, 0.40);
  --shell-22: rgba(242, 179, 164, 0.22);
  --shell-34: rgba(242, 179, 164, 0.34);

  --display: 'Prata', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --measure: 1140px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section-y: clamp(3.75rem, 8vw, 6.5rem);
}

/* -------------------------------------------------------------- 3. Reset */

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--espresso); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

:focus-visible { outline: 2px solid var(--espresso); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--espresso); color: var(--cream);
  padding: 0.75rem 1.25rem; z-index: 200;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ 4. Layout */

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

.section { padding-block: var(--section-y); }

/* Every section sits on cream. A "quiet" section is separated by a hairline
   rule, never by a tinted or dark band. */
.section + .section { border-top: 1px solid var(--ink-08); }

.section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 0 0 1.25rem;
}

/* ----------------------------------------------------------- 5. Type */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--espresso);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

/* Boldness by scale. Prata has one weight, so size does the shouting. */
h1 { font-size: clamp(2.75rem, 1.6rem + 5.4vw, 5.25rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.7vw, 3.25rem); line-height: 1.14; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); line-height: 1.24; }

p { margin: 0 0 1.25rem; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.7;
  color: var(--ink-70);
}

.prose p { margin-bottom: 1.5rem; }

/* The shell pink highlight swipe. The one tint move on the whole site:
   a small charged element under a key word, never a band. */
.swipe {
  background-image: linear-gradient(var(--shell-34), var(--shell-34));
  background-repeat: no-repeat;
  background-size: 100% 0.30em;
  background-position: 0 88%;
  padding-inline: 0.06em;
}

.signature {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.35;
  color: var(--espresso);
  max-width: 30ch;
}

/* A gold rule. Gold as a graphic line, carrying no text. */
.rule-gold {
  width: 62px; height: 3px;
  background: var(--gold);
  border: 0; margin: 0 0 1.5rem;
}
.rule-gold.centered { margin-inline: auto; }

/* ---------------------------------------------------------- 6. Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2rem;
  border: 1.5px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Primary: gold fill, espresso lettering. Contrast 7.8:1, verified.
   This is gold as a BUTTON, which the lock permits. It is never gold text. */
.btn-primary {
  background: var(--gold);
  color: var(--espresso);
  border-color: var(--gold);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--espresso);
  color: var(--cream);
  border-color: var(--espresso);
}

/* Secondary: espresso outline. Button-sized espresso, which the lock permits. */
.btn-secondary {
  background: transparent;
  color: var(--espresso);
  border-color: var(--espresso);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  background: var(--espresso);
  color: var(--cream);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}

/* A quiet text link with a gold underline rule beneath it. The rule is gold;
   the words stay espresso. */
.link-quiet {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--espresso);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.35rem;
  display: inline-block;
}
.link-quiet:hover { border-bottom-color: var(--espresso); }

/* ----------------------------------------------------- 7. Promo banner */

/* SLOT: empty at launch. Holds the Unconditional Love release when she says so.
   Turn it on by removing hidden from the <div> in each page's markup. */
.promo {
  background: var(--shell-22);
  border-bottom: 1px solid var(--ink-08);
  text-align: center;
  padding: 0.75rem var(--gutter);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.promo[hidden] { display: none; }

/* ----------------------------------------------------------- 8. Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--ink-08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 84px;
  padding-block: 0.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img { width: 40px; height: 40px; }
.brand-name {
  font-family: var(--display);
  font-size: 1.1875rem;
  letter-spacing: 0.055em;
  line-height: 1;
  color: var(--espresso);
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }
.nav a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--espresso);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--gold); }
.nav a[aria-current='page'] { border-bottom-color: var(--gold); }
.nav .btn { padding: 0.7rem 1.25rem; font-size: 0.6875rem; }

@media (max-width: 860px) {
  .header-inner { flex-wrap: wrap; min-height: 0; row-gap: 0.875rem; }
  .nav { width: 100%; flex-wrap: wrap; row-gap: 0.875rem; }
  .nav .btn { flex: 0 0 auto; }   /* its own row, natural width, never a full width slab */
}
@media (max-width: 560px) {
  .nav { gap: 1.125rem; }
  .nav a { font-size: 0.6875rem; letter-spacing: 0.14em; }
}

/* -------------------------------------------------------------- 9. Hero */

.hero { padding-block: clamp(3rem, 7vw, 5.5rem) var(--section-y); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero h1 { margin-bottom: 1.5rem; }
.hero .lede { max-width: 34ch; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------- 10. Photo slots */

/* EASY-SWAP PHOTO SLOT.
   Drop a file with the exact filename shown on the placeholder into
   Projects/Website/images/ and the photo appears. The label hides itself.
   No code edits, ever. Full instructions: Photo-Swap-Guide.md */

.photo-slot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  background: var(--shell-22);
  border: 1px solid var(--ink-14);
  border-radius: 2px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.photo-slot.wide { aspect-ratio: 3 / 2; }
.photo-slot.square { aspect-ratio: 1 / 1; }

.photo-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop toward the top. Her salvaged photos are tall portraits, so a centred
     crop lands on the torso and loses the face. */
  object-position: center 22%;
}
/* Per slot crop nudges, set by eye against the actual photo in each slot. */
.photo-slot.crop-face img   { object-position: center 14%; }
.photo-slot.crop-centre img { object-position: center 50%; }

.photo-label {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.5rem;
  max-width: 30ch;
}
.photo-label .photo-label-kicker {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 0.75rem;
}
.photo-label .photo-label-file {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--espresso);
  background: var(--cream);
  border: 1px solid var(--gold-40);
  border-radius: 2px;
  padding: 0.4rem 0.7rem;
  margin-bottom: 0.65rem;
  word-break: break-all;
}
.photo-label .photo-label-note {
  display: block;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--ink-70);
}

/* When the real photo loads, the label gets out of the way. */
.photo-slot.filled { background: var(--cream); }
.photo-slot.filled .photo-label { display: none; }

/* --------------------------------------------------------- 11. Cards */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 2.75rem;
}

.card {
  background: var(--cream);
  border: 1px solid var(--ink-14);
  border-top: 3px solid var(--gold);   /* gold as a card edge, carrying no text */
  border-radius: 2px;
  padding: clamp(1.5rem, 2.6vw, 2.125rem);
  display: flex;
  flex-direction: column;
}
.card h3 { margin-bottom: 0.875rem; }
.card p { font-size: 0.9375rem; color: var(--ink-70); margin-bottom: 1.5rem; }
.card .btn, .card .link-quiet { margin-top: auto; align-self: flex-start; }

/* The four doors. The visitor's own sentence leads each one. */
.door-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 2.75rem;
}
@media (max-width: 720px) { .door-grid { grid-template-columns: 1fr; } }

.door-voice {
  font-family: var(--display);
  font-size: clamp(1.3125rem, 1.15rem + 0.75vw, 1.625rem);
  line-height: 1.24;
  margin-bottom: 0.875rem;
}

.card-logo {
  height: 132px;
  width: auto;
  align-self: flex-start;   /* without this, the flex column stretches and distorts it */
  margin-bottom: 1.375rem;
}

/* -------------------------------------------------- 12. Tinted panels */

/* A tinted CARD, not a band. It never spans the full viewport width. */
.panel {
  background: var(--shell-22);
  border: 1px solid var(--ink-14);
  border-radius: 2px;
  padding: clamp(1.75rem, 4vw, 3.25rem);
}
.panel.plain { background: var(--cream); }

.panel-narrow { max-width: 760px; margin-inline: auto; text-align: center; }
.panel-narrow p { margin-inline: auto; }

/* SLOT: email capture. Visual only. Wired to nothing until her email
   system exists. The input and button are deliberately disabled so nobody
   types a real address into something that cannot receive it. */
.email-slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.75rem;
}
.email-slot input {
  flex: 1 1 280px;
  max-width: 360px;
  font-family: var(--body);
  font-size: 0.9375rem;
  color: var(--espresso);
  background: var(--cream);
  border: 1.5px solid var(--ink-14);
  border-radius: 2px;
  padding: 1rem 1.125rem;
}
.email-slot input::placeholder { color: var(--ink-55); }
.email-slot input:disabled { cursor: not-allowed; }
.email-slot .btn:disabled { opacity: 0.55; cursor: not-allowed; }

.slot-note {
  display: block;
  margin-top: 1.125rem;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-55);
}

/* ------------------------------------------------------- 13. Split rows */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split.photo-left > .photo-slot { order: -1; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split.photo-left > .photo-slot { order: 0; }
}

/* ------------------------------------------------------- 14. Proof list */

.proof {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.proof li {
  padding-left: 1.5rem;
  border-left: 3px solid var(--gold);   /* gold rule, espresso words */
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-70);
  max-width: 60ch;
}
.proof li strong { color: var(--espresso); font-weight: 600; }

.takeaways { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.takeaways li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-70);
  max-width: 60ch;
}
.takeaways li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 10px;
  background: var(--gold);
  border-radius: 50%;
}

.included { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.included li {
  font-size: 0.9375rem;
  color: var(--ink-70);
  padding-left: 1.5rem;
  position: relative;
}
.included li::before {
  content: '';
  position: absolute; left: 0; top: 0.75em;
  width: 12px; height: 2px; background: var(--gold);
}

/* -------------------------------------------------------- 15. Contact */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 2.75rem;
}
.contact-card {
  background: var(--cream);
  border: 1px solid var(--ink-14);
  border-top: 3px solid var(--gold);
  border-radius: 2px;
  padding: clamp(1.5rem, 2.6vw, 2.125rem);
}
.contact-card p { font-size: 0.9375rem; color: var(--ink-70); }
.contact-email {
  font-family: var(--display);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  line-height: 1.3;
  word-break: break-word;
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--espresso);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.2rem;
}

/* ---------------------------------------------------------- 16. Closer */

.closer { text-align: center; }
.closer h2 { max-width: 18ch; margin-inline: auto; }
.closer .btn-row { justify-content: center; }

/* ---------------------------------------------------------- 17. Footer */

/* Cream. Never dark. This is the standing rule, not a preference. */
.site-footer {
  background: var(--cream);
  border-top: 1px solid var(--ink-14);
  padding-block: clamp(2.75rem, 5vw, 4rem) 2rem;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr; } }

.footer-mark { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.footer-mark img { width: 44px; height: 44px; }
.footer-mark span { font-family: var(--display); font-size: 1.1875rem; letter-spacing: 0.055em; }

.footer-line {
  font-family: var(--display);
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.4375rem);
  line-height: 1.35;
  max-width: 26ch;
  margin: 0;
}

.footer-nav {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}
.footer-nav a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer-nav a:hover { border-bottom: 2px solid var(--gold); }

.social {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.social a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--gold-40);
  padding-bottom: 0.25rem;
}
.social a:hover { border-bottom-color: var(--gold); }

.footer-legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-08);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--ink-55);
}
.footer-legal p { margin: 0; }

/* ------------------------------------------------------- 18. Utilities */

.center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.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;
}

/* An unfinished piece of the build, marked so it cannot be mistaken for
   finished work. Used only where Lindsey's own words are still owed. */
.awaiting {
  border: 1px dashed var(--gold);
  border-radius: 2px;
  padding: 0.875rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-70);
  background: var(--cream);
}
.awaiting strong {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* The four doors: the mark is the anchor, so it sits centred in its card. */
.door-grid .card-logo { align-self: center; }

/* The parent lens mark, used on the speaking door where no product lockup
   exists. Its height is derived, not guessed, so the LENS ITSELF renders at
   exactly the same diameter as the lens inside the three product lockups.

   Product lockup: viewBox 600 x 797.1, lens group scaled 1.15, circle r168
   with a 9 stroke, so the lens outer diameter is (168*2+9)*1.15 = 396.75,
   which is 66.125% of the 600 width. At 132px tall the lockup is 99.34px
   wide, so its lens measures 65.7px.
   Standalone icon.svg: viewBox 400 square, same circle, so the lens is
   86.25% of the width. 65.7 / 0.8625 = 76px.

   The margins pad this 76px mark out to the same 132px block the lockups
   occupy, so all four cards line up. */
.card-logo.parent-mark {
  height: 76px;
  margin-top: 28px;
  margin-bottom: calc(1.375rem + 28px);
}

/* A longer headline needs a smaller top size, or it stacks into four lines
   in a half-width hero column. Used on the Speaking page. */
h1.h1-long { font-size: clamp(2.375rem, 1.5rem + 3.4vw, 3.75rem); }

/* ==========================================================================
   20. Build 14, 2026-08-27. Lindsey's confirmed edit list.

   Every rule below serves one numbered item on the list she collected and
   confirmed in the edits round. Nothing here introduces a colour. The
   palette lock at the top of this file still governs every value.
   ========================================================================== */

/* Edit 2. The hero button centres under the headline instead of sitting
   left. Scoped to a class so no other hero on the site moves. */
.btn-row.centred { justify-content: center; }

/* Edit 3. The three method card titles centre inside their cards. The card
   body copy is her locked wording and its alignment is deliberately left
   alone, so only the h3 moves. */
.method-cards .card h3 { text-align: center; }

/* Edit 5. The four doors: bigger graphics, readable words, slightly smaller
   buttons, and everything inside each box centred. */
.door-grid .card {
  text-align: center;
  align-items: center;
}
.door-grid .card-logo { height: 168px; }          /* was 132px */
.door-grid .door-voice {
  font-size: clamp(1.4375rem, 1.2rem + 0.85vw, 1.8125rem);
  margin-bottom: 1rem;
}
.door-grid .card p:not(.door-voice):not(.door-name) {
  font-size: 1.0625rem;                            /* was 0.9375rem */
  line-height: 1.7;
  color: var(--espresso);                          /* was 70% ink, she could not read it */
  max-width: 34ch;
  margin-inline: auto;
}
.door-grid .card .btn {
  align-self: center;
  font-size: 0.75rem;                              /* slightly smaller, her ask */
  padding: 0.85rem 1.6rem;
}

/* Edit 6. The speaking door has no product lockup to carry its name, so the
   name is set as type under the parent mark, sized to sit like the names
   printed inside the three product lockups beside it.

   The mark's height is derived, not guessed (see section 19 above): 76px
   rendered the lens at the same diameter as the lens inside a 132px lockup.
   The lockups are now 168px, so the mark scales by the same ratio,
   76 x (168 / 132) = 96.7px, and its padding scales with it. The name then
   takes the place the extra padding used to hold, so all four cards still
   line up on the same baseline. */
.door-grid .card-logo.parent-mark {
  height: 97px;
  margin-top: 12px;
  margin-bottom: 0.5rem;
}

/* Edit 7. Her three real Amazon reviews, sitting under the doors beside the
   journal they are about. Quiet by design: the doors are the section's job,
   and these are the proof standing behind one of them. */
.reviews {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--ink-08);
}
.reviews .section-label { text-align: center; }

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2rem;
  align-items: start;
}
.review {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 3px solid var(--gold);   /* gold rule, espresso words */
}
.review blockquote {
  margin: 0 0 1.125rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--espresso);
}
.review figcaption {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-55);
}

/* Edit 9. The footer social links become platform icons. The glyphs are
   drawn inline in the pages themselves, so nothing is fetched from anybody
   else's server, and they take their colour from the link, which is
   espresso. Her label wording is unchanged, which is what keeps her two
   Instagram accounts tellable apart. */
.social a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.social-icon {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--espresso);
}

/* Edits 13 and 14. A supporting photo beside a paragraph, deliberately
   smaller than the even split the story rows use. */
.split.narrow-photo { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .split.narrow-photo { grid-template-columns: 1fr; }
}
.split.narrow-photo h2 { margin-bottom: 1.5rem; }

/* --- Tuning pass, same session, after looking at the rendered page ------- */

/* The reviews label sits left, like the doors label above it. Left alone it
   inherited the site's paragraph measure and centred inside that, which read
   as neither centred nor aligned. */
.reviews .section-label { text-align: left; }

/* The speaking door's name, set to match how the three product lockups print
   their own names: small letterspaced caps under a short hairline rule.

   The four cards have to keep a level baseline, so the block from the top of
   the mark to the start of the door voice has to measure the same on all four.
   A product lockup measures 168px of image plus its 1.375rem margin, so 190px.
   The speaking door measures 12px of top margin (which is the transparent
   padding above the lens inside a lockup, so the lenses line up), plus the
   97px mark, plus the name block below it. The name block is 12 + 1 + 9 + 17.6,
   which is 39.6, so its bottom margin closes the gap: 190 - 12 - 97 - 39.6,
   which rounds to 41px. Verified against the rendered page rather than trusted
   from the arithmetic: all four door voices start 227px below their card top. */
.door-grid .card p.door-name {
  font-family: var(--display);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--espresso);
  margin: 0 0 41px;
}
.door-grid .card p.door-name::before {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  background: var(--ink-14);
  margin: 12px auto 9px;
}
.door-grid .card-logo.parent-mark { margin-bottom: 0; }

/* The footer's gold underline belongs under the words, not under the icon. */
.social a { border-bottom: none; padding-bottom: 0; }
.social a span {
  border-bottom: 2px solid var(--gold-40);
  padding-bottom: 0.25rem;
}
.social a:hover span { border-bottom-color: var(--gold); }