/* G-Star Intelligence.
   Palette and type follow the content file, section 14, with the accent changed by the
   owner to rose gold #E5B69F (27 Sep 2026) to match the G-Star icon. Three dark grounds
   Navy removed by the owner (27 Sep 2026). Charcoal and slate alternate across sections,
   rose gold is the single accent, white for text.
   Carried over from the original gwynslee.com site: Lato in uppercase with wide
   tracking for navigation, labels and buttons, circular portraits with a ring,
   a short accent bar under centred titles, outline buttons, and a dark
   photographic band behind the closing call to action.
   Taken from the G-Star mark: the four-point star and the diagonal hairlines. */

@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/assets/fonts/lato-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/assets/fonts/lato-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/assets/fonts/lato-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --charcoal: #1C1C1F;
  --slate: #27282C;
  --copper: #E5B69F;
  --white: #FFFFFF;
  /* White at reduced strength only. No additional hues. */
  --text: rgba(255, 255, 255, 0.9);
  --text-soft: rgba(255, 255, 255, 0.72);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Lato", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(1rem, 5vw, 3rem);
  --measure: 40rem;
  --wide: 74rem;
  --section-y: clamp(4.5rem, 10vw, 8.5rem);

  /* Four-point star from the mark */
  --star: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--white); text-decoration-color: var(--copper); text-underline-offset: 0.22em; text-decoration-thickness: 1px; transition: color 0.2s linear; }
a:hover { color: var(--copper); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  font-optical-sizing: auto;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.55rem); }
p { margin: 0 0 1.25rem; }
strong { color: var(--white); font-weight: 700; }

.skip { position: absolute; left: -999px; top: 0; background: var(--copper); color: var(--charcoal); padding: 0.75rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: var(--measure); }
.lead { font-size: 1.15em; color: var(--white); }
.soft { color: var(--text-soft); }
.small { font-size: 0.9rem; color: var(--text-soft); }

/* Grounds, rotated across sections */
.g-charcoal { background: var(--charcoal); }
.g-slate { background: var(--slate); }
.section { padding: var(--section-y) 0; }
.section--tight { padding: calc(var(--section-y) * 0.55) 0; }

/* Labels, in the original site's uppercase Lato */
.eyebrow, .label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 1.25rem;
}

/* Headline pattern. White line, thin copper rule, copper punchline.
   Used on the hero, the problem pages and the track record only. */
.hl .punch { display: block; color: var(--copper); font-style: italic; font-weight: 400; }
.hl .punch::before { content: ""; display: block; width: 3.5rem; height: 1px; background: var(--copper); margin: 0.45em 0 0.35em; }

/* Centred title with a short bar beneath, from the original site */
.title { text-align: center; margin-left: auto; margin-right: auto; }
.title h2 { margin-bottom: 0; }
.title h2::after { content: ""; display: block; width: 2.5rem; height: 2px; background: var(--copper); margin: 1.1rem auto 0; }
.title p { margin: 1.5rem auto 0; max-width: 36rem; }

/* Star ornament */
.star { display: block; width: 1.1rem; height: 1.1rem; background: var(--copper); clip-path: var(--star); margin: 0 auto 1.5rem; }

/* Buttons, uppercase and tracked as on the original site */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 1rem 1.6rem;
  text-decoration: none;
  border: 2px solid var(--copper);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s linear, color 0.2s linear, border-color 0.2s linear;
}
.btn--primary { background: var(--copper); color: var(--charcoal); }
.btn--primary:hover { background: transparent; color: var(--white); }
.btn--outline { background: transparent; color: var(--white); }
.btn--outline:hover { background: var(--copper); color: var(--charcoal); }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 2rem 0 1rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--charcoal); }
.site-header .wrap { display: flex; align-items: center; gap: 2rem; min-height: 4.75rem; max-width: 100rem; }
.brand { flex: none; display: flex; align-items: center; gap: 0.7rem; margin-right: auto; text-decoration: none; white-space: nowrap; }
.brand img { height: 3rem; width: auto; }
.brand .word { font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); line-height: 1.1; }
.brand .word b { font-weight: 700; }
.brand .word span { color: var(--copper); font-weight: 400; }
.brand:hover .word { color: var(--white); }
.nav-toggle {
  background: none; border: 2px solid var(--copper); color: var(--white); cursor: pointer; border-radius: 0;
  font: 700 0.75rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase; padding: 0.55rem 0.8rem;
}
.site-nav { display: none; }
.site-nav.open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a, .site-nav .sub-toggle {
  color: var(--white); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0.5rem 0;
  font: 700 0.74rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
}
.site-nav a:hover, .site-nav .sub-toggle:hover, .site-nav a[aria-current="page"] { color: var(--copper); }
.header-cta { display: none; }

@media (max-width: 87.99rem) {
  .site-nav.open {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--charcoal); padding: 0.5rem var(--gutter) 2rem;
    max-height: calc(100vh - 4.75rem); overflow-y: auto;
  }
  .site-nav > ul > li { padding: 0.6rem 0; }
  .site-nav .sub-toggle { pointer-events: none; color: var(--copper); }
  .site-nav .sub-toggle .caret { display: none; }
  .site-nav .sub a { display: block; padding: 0.45rem 0 0.45rem 1rem; text-transform: none; letter-spacing: 0.02em; font-size: 1rem; font-weight: 400; }
  .site-nav .nav-cta { padding-top: 1.25rem; }
}
@media (min-width: 88rem) {
  .nav-toggle { display: none; }
  .site-nav { display: block; }
  .site-nav > ul { display: flex; gap: 1.15rem; align-items: center; white-space: nowrap; }
  .site-nav .has-sub { position: relative; }
  .site-nav .caret { display: inline-block; margin-left: 0.35rem; font-size: 0.7em; color: var(--copper); }
  .site-nav .sub { display: none; position: absolute; top: 100%; left: -1.25rem; min-width: 19rem; background: var(--slate); padding: 1rem 1.25rem; }
  .site-nav .has-sub:hover .sub, .site-nav .has-sub:focus-within .sub, .site-nav .has-sub.open .sub { display: block; }
  .site-nav .sub a { display: block; padding: 0.45rem 0; font: 400 0.98rem/1.4 var(--sans); letter-spacing: 0.01em; text-transform: none; }
  .site-nav .nav-cta { display: none; }
  .header-cta { display: inline-block; padding: 0.75rem 1rem; font-size: 0.7rem; white-space: nowrap; }
}

/* Photography. One warm, cinematic treatment for every photograph. */
.photo { filter: sepia(0.6) saturate(0.85) contrast(1.06) brightness(0.9); }

/* Circular portrait with a ring, as on the original site */
.portrait { border-radius: 50%; padding: 6px; border: 1px solid var(--copper); object-fit: cover; object-position: 50% 30%; aspect-ratio: 1; }

/* Hero */
.hero { position: relative; padding: clamp(2.25rem, 5vw, 3.75rem) 0 clamp(2rem, 3.5vw, 3rem); overflow: hidden; }
.hero .wrap { position: relative; display: grid; gap: 1.75rem; align-items: center; }
.hero h1 { font-size: clamp(2rem, 3.6vw, 3.15rem); max-width: 22ch; }
.hero .lead { max-width: 38rem; }
.hero-portrait { position: relative; }
/* Three audience lines under the hero actions, so each visitor finds their row */
.hero-audiences { list-style: none; margin: 1.75rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid rgba(229, 182, 159, 0.35); max-width: 38rem; font-size: 0.95rem; line-height: 1.55; color: var(--text-soft); }
.hero-audiences li { margin: 0 0 0.5rem; }
.hero-audiences strong { color: var(--copper); font-weight: 700; margin-right: 0.35rem; }
.hero-portrait .portrait { width: 7.5rem; }
@media (min-width: 56rem) {
  .hero .wrap { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 4rem; }
  .hero-portrait { order: 2; display: grid; place-items: center; }
  .hero-portrait::before {
    content: ""; position: absolute; inset: -12% -30% -12% -20%;
    background: url("/assets/img/streaks.svg") center / contain no-repeat;
  }
  .hero-portrait .portrait { position: relative; width: 100%; max-width: 19rem; }
}

/* Proof strip. Numbers are the design. No boxes. */
.proof { padding: clamp(2.5rem, 5vw, 3.75rem) 0; }
.proof ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
@media (min-width: 48rem) { .proof ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 3rem; } }
.figure {
  display: block; font-family: var(--serif); font-weight: 400; color: var(--copper);
  font-size: clamp(1.8rem, 4.6vw, 3.9rem); line-height: 1; letter-spacing: -0.02em; margin-bottom: 0.6rem;
}
.proof .caption { display: block; font-size: 0.95rem; line-height: 1.5; color: var(--text-soft); max-width: 17rem; }

/* Lists, separated by space with a small star, not by rules */
.plain-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.plain-list li { position: relative; padding: 0 0 0 1.9rem; margin: 0 0 1.15rem; }
.plain-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 0.7rem; height: 0.7rem;
  background: var(--copper); clip-path: var(--star);
}

/* Numbered offerings, separated by space */
.offerings { list-style: none; padding: 0; margin: 3.5rem 0 0; }
.offerings > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1rem; padding: 1.5rem 0; }
@media (min-width: 48rem) { .offerings > li { grid-template-columns: 6rem minmax(0, 1fr); padding: 2rem 0; } }
.offerings .num { font-family: var(--serif); font-size: clamp(2.2rem, 3.8vw, 3.2rem); line-height: 1; color: var(--copper); }
.offerings h3 { margin-bottom: 0.5rem; }
.offerings h3 a { text-decoration: none; }
.offerings h3 a:hover { color: var(--copper); }
.offerings p { margin-bottom: 0.4rem; max-width: 38rem; }
.fee { font-family: var(--serif); color: var(--copper); font-size: 1.3rem; }
.depth-links { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin-top: 2.5rem; }

/* Rows. A heading on the left, prose on the right, separated by space. */
.rows { margin: 3rem 0 0; }
.rows > div { display: grid; gap: 0.4rem; padding: 1.25rem 0; }
@media (min-width: 48rem) { .rows > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 3rem; padding: 1.5rem 0; } }
.rows dt, .rows h3 { font-family: var(--serif); font-size: 1.45rem; color: var(--white); margin: 0; line-height: 1.3; }
.rows dt a { text-decoration: none; }
.rows dt a:hover { color: var(--copper); }
.rows dd, .rows p { margin: 0; color: var(--text); }

/* Two-column prose with a heading */
.split { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 5rem; } }

/* Home, who I work with. Two audiences side by side, each topped with a copper rule. */
.audiences { display: grid; gap: 3rem; margin-top: 3rem; }
@media (min-width: 48rem) { .audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } }
.audiences > div { border-top: 2px solid var(--copper); padding-top: 1.75rem; }
.audiences p { color: var(--text-soft); }
.audiences a { text-decoration: none; }

/* Evidence and callout, set by type rather than boxes */
.evidence p { margin-bottom: 2rem; }
.evidence strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: var(--copper); margin-bottom: 0.35rem; }
.callout { font-family: var(--serif); font-size: clamp(1.35rem, 2.5vw, 1.85rem); line-height: 1.45; color: var(--white); max-width: 46rem; }
.callout strong { color: var(--copper); font-weight: 500; }

/* Offering sections on the hub */
.offering { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.offering .num { font-family: var(--serif); color: var(--copper); font-size: clamp(2.2rem, 3.8vw, 3.2rem); line-height: 1; display: block; margin-bottom: 1rem; }
.offering .proofline { color: var(--text-soft); font-style: italic; max-width: 38rem; padding-left: 1.9rem; position: relative; }
.offering .proofline::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.7rem; height: 0.7rem; background: var(--copper); clip-path: var(--star); }

/* Track record. One claim per row, the outcome beside it. */
.record { padding: clamp(2.75rem, 5vw, 4rem) 0; }
.record .wrap { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .record .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 5rem; align-items: start; } }
.record .outcome { order: -1; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--copper); font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.05; margin: 0; }
.record .outcome::before { content: ""; display: block; width: 3.5rem; height: 1px; background: var(--copper); margin-bottom: 1.25rem; }
.record h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.record .index { display: block; margin-bottom: 0.75rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; color: var(--text-soft); }
.rows .accent { color: var(--copper); }

/* Approach convictions */
.conviction { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.conviction .wrap { display: grid; gap: 1rem; }
@media (min-width: 56rem) { .conviction .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 5rem; } }

/* About */
.about-head .wrap { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 56rem) { .about-head .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 5rem; } }
.about-head .portrait { width: 100%; max-width: 20rem; }
.timeline { list-style: none; margin: 2rem 0 0; padding: 0; }
.timeline li { display: grid; gap: 0.1rem; padding: 0.9rem 0; }
@media (min-width: 48rem) { .timeline li { grid-template-columns: 13rem minmax(0, 1fr) minmax(0, 0.8fr); gap: 2rem; } }
.timeline .period { color: var(--text-soft); font-size: 0.95rem; }
.timeline .org { color: var(--copper); }
.creds { list-style: none; padding: 0; margin: 0; }
.creds li { padding: 0.35rem 0; }

/* FAQ */
.faq dt { font-family: var(--serif); font-size: 1.35rem; color: var(--white); margin-top: 2.25rem; }
.faq dd { margin: 0.5rem 0 0; max-width: 40rem; }

/* Closing call to action, a photographic band as on the original contact section */
.closing {
  position: relative; text-align: center; padding: clamp(5rem, 12vw, 9rem) 0;
  background: var(--charcoal) url("/assets/img/closing-light.jpg") center / cover no-repeat;
}
.closing::before { content: ""; position: absolute; inset: 0; background: rgba(28, 28, 31, 0.42); }
.closing h2, .closing .lead { text-shadow: 0 1px 12px rgba(28, 28, 31, 0.85), 0 0 2px rgba(28, 28, 31, 0.6); }
.closing .wrap { position: relative; }
.closing h2 { max-width: 20ch; margin: 0 auto; }
.closing h2::after { content: ""; display: block; width: 2.5rem; height: 2px; background: var(--copper); margin: 1.1rem auto 0; }
.closing .lead { max-width: 34rem; margin: 1.5rem auto 0; }
.closing .actions { justify-content: center; }
@media (min-width: 64rem) and (hover: hover) { .closing { background-attachment: fixed; } }

/* Contact form */
.form { display: grid; gap: 1.5rem; max-width: 44rem; }
@media (min-width: 48rem) { .form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.field { display: grid; gap: 0.45rem; }
.field label { font: 700 0.76rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); }
.field .hint { font-size: 0.9rem; color: var(--text-soft); }
.field input, .field select, .field textarea {
  font: 400 1rem/1.5 var(--sans); color: var(--white); background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 0; padding: 0.85rem 0.95rem; width: 100%;
}
.field select {
  appearance: none; padding-right: 2.5rem;
  background: var(--charcoal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23E5B69F' stroke-width='1.5'/%3E%3C/svg%3E") right 1rem center / 0.7rem no-repeat;
}
.field select option { background: var(--charcoal); color: var(--white); }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--copper); outline: 2px solid var(--copper); outline-offset: 1px; }
.field .error { color: var(--copper); font-size: 0.95rem; font-weight: 700; margin: 0; }
.field [aria-invalid="true"] { border-color: var(--copper); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-family: var(--serif); font-size: 1.4rem; color: var(--white); }
.contact-block { display: grid; gap: 1.25rem; align-content: start; }
.contact-block .portrait { width: 8.5rem; }

/* Footer */
.site-footer { background: var(--charcoal); padding: 4.5rem 0 2.5rem; font-size: 0.97rem; }
.site-footer .top { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) { .site-footer .top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }
.site-footer .who img { height: 3rem; width: auto; margin-bottom: 1.5rem; }
.site-footer .who p { color: var(--text-soft); max-width: 30rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 0.25rem 0; }
.site-footer a { text-decoration: none; color: var(--text); }
.site-footer a:hover { color: var(--copper); }
.site-footer h2 { font: 700 0.76rem/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--copper); margin-bottom: 1rem; }
.site-footer .base { margin-top: 3.5rem; color: var(--text-soft); font-size: 0.85rem; }

/* Owner review mode. Anything awaiting sign-off is hidden unless ?review=1 */
html:not(.review) [data-confirm] { display: none !important; }
html.review [data-confirm] { outline: 1px dashed var(--copper); outline-offset: 6px; }
html.review [data-confirm]::before, html.review [data-fallback]::before {
  display: block; font: 700 0.72rem/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--copper); margin-bottom: 0.4rem; font-style: normal;
}
html.review [data-confirm]::before { content: "Confirm. " attr(data-confirm); }
html.review [data-fallback]::before { content: "Fallback, live until confirmed. " attr(data-fallback); }
html.review span[data-confirm]::before, html.review span[data-fallback]::before { display: inline; margin-right: 0.4rem; }
html.review [data-fallback] { outline: 1px dotted rgba(255, 255, 255, 0.5); outline-offset: 6px; }
.review-bar { display: none; }
html.review .review-bar {
  display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: var(--copper); color: var(--charcoal); font: 700 0.9rem var(--sans); padding: 0.6rem var(--gutter); text-align: center;
}
html.review .review-bar a { color: var(--charcoal); }

/* Small phones. Keep the header on one line. */
@media (max-width: 30rem) {
  .site-header .wrap { gap: 0.75rem; }
  .brand { gap: 0.5rem; }
  /* Stacked logo (gstar-logo-narrow.png) from the picture element, half the width of the long one */
  .brand img { height: 2.75rem; }
}

/* Testimonials. Set by type, no boxes. The list flows in columns so quotes of
   different lengths sit naturally rather than in a rigid grid. */
.quote { margin: 0; }
.quote blockquote { margin: 0; position: relative; }
.quote blockquote::before {
  content: "\201C"; display: block; font-family: var(--serif); color: var(--copper);
  font-size: 3rem; line-height: 0.5; margin-bottom: 0.2rem; height: 1.6rem;
}
.quote blockquote p { font-family: var(--serif); font-size: 1.2rem; line-height: 1.6; color: var(--white); margin: 0; }
.quote figcaption { margin-top: 1.1rem; display: grid; gap: 0.15rem; }
.q-name { font: 700 0.78rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper); }
.q-role { font-size: 0.92rem; color: var(--text-soft); }
.quote--featured { max-width: 52rem; }
.quote--featured blockquote::before { font-size: 4.2rem; height: 2.1rem; }
.quote--featured blockquote p { font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.5; font-style: italic; }
.quote-list { margin-top: 4rem; }
@media (min-width: 56rem) { .quote-list { columns: 2; column-gap: 5rem; } }
.quote-list .quote { break-inside: avoid; margin: 0 0 3.5rem; }
.quote-source { margin-top: 1rem; }
html.review [data-note] { outline: 1px dotted rgba(255, 255, 255, 0.5); outline-offset: 6px; }
html.review [data-note]::before {
  content: "Note. " attr(data-note); display: block; font: 700 0.72rem/1.4 var(--sans); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--copper); margin-bottom: 0.6rem; font-style: normal;
}
.q-tag {
  display: inline-block; margin-bottom: 1rem; text-decoration: none;
  font: 700 0.72rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--white);
  padding-bottom: 0.2rem; border-bottom: 1px solid var(--copper);
}
.q-tag:hover { color: var(--copper); }

/* Insights */
.post-list { list-style: none; margin: 4rem 0 0; padding: 0; max-width: 46rem; }
.post-list li { margin: 0 0 3.5rem; }
.post-list h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 0.75rem; }
.post-list h2 a { text-decoration: none; }
.post-list h2 a:hover { color: var(--copper); }
.post-meta { font: 700 0.76rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 0.9rem; }
.post header h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.post header .eyebrow a { color: var(--copper); text-decoration: none; }
.post-body { margin-top: 3rem; }
.post-body h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 3rem 0 1rem; }
.post-body em { font-style: italic; }
.post-steps { padding-left: 1.5rem; margin: 1.5rem 0 1.75rem; }
.post-steps li { margin-bottom: 0.9rem; padding-left: 0.4rem; }
.post-steps li::marker { color: var(--copper); font-family: var(--serif); font-weight: 600; }
.post-body .plain-list { margin-bottom: 1.5rem; }
.post-foot { margin-top: 3.5rem; }

/* Speaking photo on About */
.speaking-photo { margin: 0; }
.speaking-photo img { width: 100%; height: auto; }
.speaking-photo figcaption { margin-top: 0.75rem; }