/* ==========================================================================
   Wine Vita — shared site styles
   Built from the design system at .claude/skills/wine-vita-design.
   Tokens below are copied verbatim from tokens/colors.css, typography.css and
   spacing.css. The palette is FIXED — never add a hue that isn't here.
   ========================================================================== */

:root {
  --wv-terracotta: #B5652F;
  --wv-wine: #6B2737;
  --wv-olive: #6B7A4F;
  --wv-stone: #C9BFA8;
  --wv-cream: #F3E9DD;
  --wv-ink: #2E2620;

  --wv-terracotta-dark: #9A5225;
  --wv-wine-dark: #551D2B;
  --wv-olive-dark: #586640;
  --wv-stone-dark: #A99E82;
  --wv-cream-warm: #EFE2D2;
  --wv-ink-soft: #5A5047;

  --surface-page: var(--wv-cream);
  --surface-card: #FBF5EC;
  --text-heading: var(--wv-wine);

  --font-display: "Vollkorn", Georgia, "Times New Roman", serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-accent: "Caveat", "Segoe Script", cursive;
  --tracking-eyebrow: 0.16em;

  --radius-sm: 5px;
  --radius-lg: 12px;
  --shadow-md: 0 4px 12px rgba(46, 38, 32, 0.08);
  --shadow-lg: 0 12px 32px rgba(46, 38, 32, 0.12);
  --container-max: 1160px;
  --gutter: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--wv-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-heading);
  line-height: 1.14;
  text-wrap: pretty;
  margin: 0;
}

a { color: var(--wv-terracotta); }
a:hover { color: var(--wv-terracotta-dark); }

.wrap { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--gutter); }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--wv-terracotta);
}
.eyebrow--wine { color: var(--wv-wine); }

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

.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 2000;
  background: var(--wv-wine);
  color: var(--wv-cream);
  padding: 0.75rem 1rem;
}
.skip-link:focus { left: 0; }

/* Visible keyboard focus — added for accessibility; the design system has no
   focus state of its own. */
:focus-visible { outline: 2px solid var(--wv-terracotta); outline-offset: 2px; }

/* ---- Buttons (components/core/Button.jsx) ------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.btn--sm { padding: 8px 16px; font-size: 14px; }
.btn--wine { background: var(--wv-wine); border-color: var(--wv-wine); color: var(--wv-cream); }
.btn--wine:hover { background: var(--wv-wine-dark); border-color: var(--wv-wine-dark); color: var(--wv-cream); }
.btn--terracotta { background: var(--wv-terracotta); border-color: var(--wv-terracotta); color: var(--wv-cream); }
.btn--terracotta:hover { background: var(--wv-terracotta-dark); border-color: var(--wv-terracotta-dark); color: var(--wv-cream); }
.btn--outline { background: transparent; border-color: var(--wv-stone-dark); color: var(--wv-wine); }
.btn--outline:hover { background: var(--wv-cream-warm); color: var(--wv-wine); }

/* ---- Site nav (ui_kits/website/Chrome.jsx) ----------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(243, 233, 221, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--wv-stone);
}
.site-nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-nav__logo { display: flex; }
.site-nav__logo img { height: 51px; width: auto; }
.site-nav__links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.site-nav__links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--wv-ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.site-nav__links a:hover { color: var(--wv-wine); }
.site-nav__links a[aria-current="page"] { font-weight: 700; color: var(--wv-wine); }

/* ---- Hero (components/content/PhotoHero.jsx) --------------------------- */
.hero {
  position: relative;
  height: clamp(420px, 62vh, 600px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(46, 38, 32, 0.34) 0%,
    rgba(46, 38, 32, 0.20) 55%,
    rgba(46, 38, 32, 0.085) 100%);
}
.hero__body { position: relative; padding: 0 44px; text-align: center; transform: translateY(-26px); }
.hero__title { font-size: clamp(32px, 9vw, 38px); line-height: 1.08; color: var(--wv-cream); margin: 0; }
.hero__subtitle {
  font-size: 17px;
  /* Karla 700 — 600 is in the token scale but isn't in the loaded font request,
     so asking for it would get a synthetic bold and render badly over the photo. */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(243, 233, 221, 0.92);
  margin: 12px 0 0;
}

/* ---- Follow-along strip ------------------------------------------------ */
.follow { background: var(--wv-cream); border-bottom: 1px solid var(--wv-stone); padding: 20px var(--gutter); }
.follow__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.follow__form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.follow__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--wv-terracotta);
  white-space: nowrap;
}
.follow__input {
  width: 200px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--wv-ink);
  background: var(--surface-card);
  padding: 9px 12px;
  border: 1px solid var(--wv-stone-dark);
  border-radius: var(--radius-sm);
}
.social { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.social a {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--wv-wine);
  text-decoration: none;
  white-space: nowrap;
}
.social a:hover { color: var(--wv-terracotta); }

/* ---- Sections ---------------------------------------------------------- */
.section { padding: 72px var(--gutter); }
.section--cream { background: var(--wv-cream); }
.section--wine { background: var(--wv-wine); color: var(--wv-cream); }
.section--stone { background: var(--wv-stone); }
.section--tight { padding-block: 64px; }
.section h2 { font-size: clamp(30px, 4vw, 40px); }
.section--wine h2 { color: var(--wv-cream); }
.section__lead { font-size: 19px; margin: 0; text-wrap: pretty; }
.section--wine .section__lead { color: rgba(243, 233, 221, 0.9); }

.split {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split--photo-first { grid-template-columns: 0.9fr 1.1fr; gap: 48px; }

.prose { font-size: 18px; line-height: 1.65; margin: 0 0 26px; }

figure { margin: 0; }
figure img { display: block; width: 100%; object-fit: cover; border-radius: var(--radius-lg); }
figcaption { font-size: 13px; line-height: 1.5; color: var(--wv-ink); opacity: 0.7; margin-top: 8px; }

/* ---- Pillar grid ------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(243, 233, 221, 0.28);
}
.pillars h3 { font-size: 21px; line-height: 1.25; margin: 0 0 10px; color: var(--wv-cream); }
.pillars p { font-size: 16px; margin: 0; color: rgba(243, 233, 221, 0.85); text-wrap: pretty; }

/* ---- Cards (components/content/Card.jsx) ------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: var(--surface-card);
  border: 1px solid var(--wv-stone);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.card img { display: block; width: 100%; height: 180px; object-fit: cover; border-radius: 0; }
.card__body { padding: 22px 24px; }
.card h3 { font-size: 24px; line-height: 1.2; margin: 0 0 10px; }
.card p { font-size: 16px; line-height: 1.6; margin: 0; }

/* ---- Footer (ui_kits/website/Chrome.jsx) ------------------------------- */
.site-footer { background: var(--wv-wine); color: var(--wv-cream); padding: 56px var(--gutter) 40px; }
.site-footer__inner { max-width: var(--container-max); margin: 0 auto; }
.site-footer__top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; }
.site-footer__blurb { max-width: 320px; }
.site-footer__blurb img { height: 40px; width: auto; margin-bottom: 16px; }
.site-footer__blurb p { font-size: 15px; line-height: 1.6; color: rgba(243, 233, 221, 0.85); margin: 0; }
.site-footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.foot-col__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--wv-stone);
  margin-bottom: 14px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-col a { font-size: 15px; color: var(--wv-cream); text-decoration: none; }
.foot-col a:hover { color: var(--wv-stone); }
.site-footer__seal { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.site-footer__seal img { width: 72px; height: 72px; }
.site-footer__seal .social { flex-direction: column; align-items: flex-start; gap: 8px; }
.site-footer__seal .social a { color: var(--wv-stone); font-size: 13px; }
.site-footer__seal .social a:hover { color: var(--wv-cream); }
.site-footer__rule { border: 0; border-top: 1px solid rgba(243, 233, 221, 0.35); margin: 36px 0 20px; }
.site-footer__base {
  font-size: 13px;
  color: rgba(243, 233, 221, 0.7);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer__tagline { font-family: var(--font-accent); font-size: 20px; color: var(--wv-stone); }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .section { padding-block: 56px; }
  .split, .split--photo-first { grid-template-columns: 1fr; gap: 32px; }
  .split--photo-first figure { order: 2; }
  .pillars { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .cards { grid-template-columns: 1fr; }
  /* The "Follow along" button does not fit alongside four links on a phone,
     and the signup strip sits just below the hero anyway — so drop it here and
     let the links spread evenly across their own row. */
  .site-nav__inner { flex-wrap: wrap; row-gap: 10px; padding: 12px var(--gutter); }
  .site-nav__links { gap: 8px; width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  .site-nav__links .btn { display: none; }
  .site-nav__links a { font-size: 15px; }
  .follow__inner { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .pillars { grid-template-columns: 1fr; }
  .hero__body { padding-inline: 24px; }
  .follow__form { width: 100%; }
  .follow__input { width: 100%; flex: 1 1 160px; }
  /* On a phone the signup form takes the full width and the social links drop
     to their own row, where left-aligned looks like a stray fragment. */
  .follow .social { width: 100%; justify-content: center; }
  .site-footer__cols { gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Article pages (The story)
   ========================================================================== */

.article { background: var(--wv-cream); }

/* The reading measure from tokens/spacing.css: --container-text 680px. */
.measure { max-width: 680px; margin: 0 auto; }
.measure--wide { max-width: 1000px; margin: 0 auto; }

.article__head { padding: 72px var(--gutter) 8px; }
.article__title {
  font-size: clamp(34px, 6.5vw, 50px);
  line-height: 1.1;
  margin: 12px 0 22px;
}
.article__standfirst {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(19px, 2.6vw, 23px);
  line-height: 1.5;
  color: var(--wv-ink);
  margin: 0 0 36px;
}
.article__figure { padding: 0 var(--gutter); }
.article__body { padding: 48px var(--gutter) 72px; }
.article__body p { font-size: 18px; line-height: 1.72; margin: 0 0 20px; text-wrap: pretty; }
.article__body h2 { font-size: clamp(26px, 3.4vw, 30px); line-height: 1.2; margin: 44px 0 16px; }

/* Pull-quote (components/content/Pullquote.jsx) */
.pullquote {
  margin: 40px 0;
  padding-left: 24px;
  border-left: 3px solid var(--wv-wine);
}
.pullquote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(21px, 3vw, 26px);
  line-height: 1.35;
  color: var(--wv-ink);
}

/* Divider with the olive vine-leaf ornament (components/core/Divider.jsx) —
   the one sanctioned decorative use of Olive. */
.rule-ornament { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 36px; }
.rule-ornament span:first-child,
.rule-ornament span:last-child { flex: 1; height: 1px; background: var(--wv-stone); }
.rule-ornament i {
  width: 8px; height: 8px;
  background: var(--wv-olive);
  border-radius: 0 60% 0 60%;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

/* Hand-written accent (components/content/HandNote.jsx) — short phrases only,
   never body copy. */
.handnote {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  color: var(--wv-terracotta);
}

/* Signup band (components/content/Signup.jsx), wine tone */
.signup {
  background: var(--wv-wine);
  border: 1px solid var(--wv-wine);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  color: var(--wv-cream);
}
.signup__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--wv-stone);
  margin-bottom: 10px;
}
.signup__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  color: var(--wv-cream);
  margin: 0 0 8px;
  max-width: 520px;
}
.signup__note { font-size: 15px; line-height: 1.6; color: rgba(243, 233, 221, 0.82); margin: 0 0 18px; max-width: 460px; }
.signup__form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 460px; }
.signup__input {
  flex: 1 1 200px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--wv-cream);
  background: rgba(243, 233, 221, 0.08);
  padding: 11px 14px;
  border: 1px solid rgba(243, 233, 221, 0.35);
  border-radius: var(--radius-sm);
}
.signup__input::placeholder { color: rgba(243, 233, 221, 0.55); }
.signup__btn {
  font-size: 15px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--wv-terracotta);
  color: var(--wv-cream);
  cursor: pointer;
  font-family: var(--font-body);
}
.signup__btn:hover { background: var(--wv-terracotta-dark); }

/* ==========================================================================
   Producers page + reader gate
   ========================================================================== */

.page-head { background: var(--wv-wine); color: var(--wv-cream); padding: 72px var(--gutter) 60px; }
.page-head__inner { max-width: var(--container-max); margin: 0 auto; }
.page-head__eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--wv-stone);
  margin-bottom: 16px;
}
.page-head h1 { font-size: clamp(34px, 6vw, 52px); line-height: 1.1; color: var(--wv-cream); margin: 0 0 18px; }
.page-head p { font-size: 19px; line-height: 1.6; color: rgba(243, 233, 221, 0.9); max-width: 700px; margin: 0; text-wrap: pretty; }

/* Tag (components/core/Tag.jsx), olive tone — small accent use only. */
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wv-olive-dark);
  border: 1px solid var(--wv-olive);
  border-radius: var(--radius-pill, 999px);
  background: transparent;
}

.card__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--wv-terracotta);
  margin-bottom: 8px;
}
.card__footer { margin-top: 18px; }
.cards--producers { grid-template-columns: repeat(3, 1fr); }
.cards--producers .card img { height: 150px; }

.footnote { font-size: 15px; line-height: 1.7; color: var(--wv-ink); opacity: 0.75; max-width: 560px; margin: 36px 0 0; }

/* ---- Reader gate ------------------------------------------------------- */
.gate {
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface-card);
  border: 1px solid var(--wv-stone);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 36px 38px;
}
.gate__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--wv-terracotta);
  margin-bottom: 12px;
}
.gate h2 { font-size: clamp(24px, 3.4vw, 28px); line-height: 1.2; margin: 0 0 12px; }
.gate__intro { font-size: 16px; line-height: 1.65; margin: 0 0 24px; text-wrap: pretty; }
.gate__form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 700; color: var(--wv-ink); }
.field .hint { font-weight: 400; color: var(--wv-ink-soft); }
.field input,
.field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--wv-ink);
  background: var(--wv-cream);
  padding: 11px 14px;
  border: 1px solid var(--wv-stone-dark);
  border-radius: var(--radius-sm);
}
.form-error {
  font-size: 14px;
  color: var(--wv-wine);
  background: rgba(107, 39, 55, 0.07);
  border: 1px solid rgba(107, 39, 55, 0.25);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.fineprint { font-size: 13px; line-height: 1.6; color: var(--wv-ink); opacity: 0.78; margin: 0; }

@media (max-width: 900px) {
  .cards--producers { grid-template-columns: 1fr; }
  .gate { padding: 28px 22px; }
  .page-head { padding-block: 56px 48px; }
}

/* Confirmation after signup (components/content/Signup.jsx) */
.signup-done {
  font-family: var(--font-accent);
  font-size: 24px;
  color: var(--wv-terracotta);
  margin: 0;
}
.signup .signup-done { color: var(--wv-stone); }

/* ==========================================================================
   Producer profiles + the reader gate overlay
   ========================================================================== */

/* Cards stay legible behind the gate on purpose: seeing whose profiles are
   waiting is the reason to sign up. They are dimmed and made inert, not blurred
   out. */
.locked-area { position: relative; }
.locked-area.is-locked { max-height: 640px; overflow: hidden; }
.locked-area.is-locked .cards { pointer-events: none; }
.locked-area.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(243, 233, 221, 0.55) 0%,
    rgba(243, 233, 221, 0.86) 42%,
    rgba(243, 233, 221, 0.97) 100%);
  pointer-events: none;
}

.gate-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px var(--gutter) 0;
}
.gate-overlay .gate { position: sticky; top: 96px; width: 100%; }

.gate-inline { margin: 40px 0 8px; }

/* Producer cards are whole-card links once unlocked. */
.card--link { display: block; text-decoration: none; color: inherit; transition: box-shadow .18s ease, transform .18s ease; }
.card--link:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card--link:hover h3 { color: var(--wv-terracotta); }
.is-locked .card--link:hover { box-shadow: var(--shadow-md); transform: none; }

/* ---- Profile pages ----------------------------------------------------- */
.profile-lead p:first-of-type {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2.6vw, 23px);
  line-height: 1.5;
  color: var(--wv-ink);
}
.profile-lead p { font-size: 18px; line-height: 1.72; margin: 0 0 20px; text-wrap: pretty; }
.profile-section h2 { font-size: clamp(26px, 3.4vw, 30px); line-height: 1.2; margin: 44px 0 16px; }
.profile-section p { font-size: 18px; line-height: 1.72; margin: 0 0 20px; text-wrap: pretty; }

.profile-section--details {
  background: var(--surface-card);
  border: 1px solid var(--wv-stone);
  border-radius: var(--radius-lg);
  padding: 24px 28px 8px;
  margin-top: 48px;
}
.profile-section--details h2 { margin-top: 0; font-size: 22px; }
.details-list { list-style: none; margin: 0 0 20px; padding: 0; }
.details-list li { font-size: 16px; line-height: 1.6; padding: 8px 0; border-bottom: 1px solid var(--wv-stone); }
.details-list li:last-child { border-bottom: 0; }
.details-list strong { color: var(--wv-wine); }

@media (max-width: 900px) {
  .locked-area.is-locked { max-height: 560px; }
  .gate-overlay { padding-top: 24px; }
  .gate-overlay .gate { top: 80px; }
}


/* A portrait photograph closing a page. Held to 520px so it reads as a picture
   rather than a wall — a full-measure 3:4 image is over 900px tall. */
.portrait-shot { max-width: 520px; margin: 0 auto; }
.portrait-shot img { height: auto; border-radius: var(--radius-lg); }
.portrait-shot figcaption { text-align: center; }

/* Byline under a profile heading: who wrote it and when it was last touched.
   Both are signals search and AI systems weigh heavily, and neither was stated
   anywhere on the site before. */
.byline {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(243, 233, 221, 0.78);
  margin: 14px 0 0;
}
.byline time { white-space: nowrap; }

/* Hero on narrow screens.
   The title wraps to three or four lines on a phone, and centred vertically
   that pushes it down into the vine rows where it competes with detail. Pin it
   to the top instead, where the photograph is open sky, and move the scrim up
   with it so the type keeps its backing. Desktop is unchanged — at two lines,
   centred is right. */
/* The break only exists on narrow screens; desktop wraps naturally. */
.hero__break { display: none; }

@media (max-width: 700px) {
  .hero { align-items: flex-start; }
  /* 34px clears the nav, plus 6vh — about a tenth of the hero's height — to sit
     the block a little lower in the sky. */
  .hero__body { transform: none; padding-top: calc(34px + 6vh); }
  /* Sized so "a real education in wine" holds one line, and broken after the
     comma so it actually falls there: left to itself, greedy wrapping would
     carry "a real" up onto the first line. */
  .hero__title { font-size: clamp(25px, 7.2vw, 33px); }
  .hero__break { display: inline; }
  .hero__scrim {
    background: linear-gradient(to bottom,
      rgba(46, 38, 32, 0.42) 0%,
      rgba(46, 38, 32, 0.24) 45%,
      rgba(46, 38, 32, 0) 78%);
  }
}