/* =========================================================================
   Vivien Hudson — design system
   Derived from her own supplied materials. Every colour below was measured
   from the pixels of her banners (see Design System/Claude Design System/
   PALETTE.md), not invented.

   Two deliberate, documented deviations from the measured pack:

   1. --gold-ink. The measured gold (#C9B7A5) appears in her banners only as
      thin type and hairline rules, so every sampled pixel is partly blended
      with the cream behind it — the pack itself flags this as its least
      precise value. Used as text on cream it lands at roughly 1.7:1 contrast
      and fails WCAG for any size. --gold-ink is that same hue de-blended
      toward its likely true value, which is both accessible and probably
      closer to her real ink. The measured gold is kept, unaltered, for rules,
      icon strokes and accents on navy, where it reads correctly.

   2. No script signature. Her identity uses a gold script signature for her
      name. No font file exists for it, and inventing a stand-in signature for
      a real person to publish under her own name is not a call this build
      should make. Her name is set in the display serif instead.

   Both are listed for her sign-off in HANDOVER.md.
   ========================================================================= */

/* ---------- tokens ---------- */
:root {
  /* measured navies */
  --ink:        #081C36;
  --ink-deep:   #141721;
  --ink-soft:   #19314C;

  /* measured gold, plus the accessible text variant */
  --gold:       #C9B7A5;
  --gold-pale:  #D4C6B7;
  --gold-ink:   #96754A;

  /* measured creams and greys */
  --cream:      #F4F2F0;
  --cream-warm: #EBE7E1;
  --grey:       #595E66;
  --grey-light: #9DA0A6;

  /* type */
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* a 1.25 scale, set in rem so it respects user font settings */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-md:   1.25rem;
  --t-lg:   1.75rem;
  --t-xl:   2.5rem;
  --t-2xl:  3.5rem;
  --t-3xl:  5rem;

  /* spacing */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;
  --s-7: 9rem;

  /* her layout is generous; the measure stays narrow so text is restful */
  --measure: 34rem;
  --wide:    72rem;
  --gutter:  clamp(1.5rem, 6vw, 6rem);

  --rule: 1px solid var(--gold);
  --rule-quiet: 1px solid rgba(89, 94, 102, 0.22);
}

/* Her direction is "calm and generous", and at desktop widths the large
   spacing reads exactly that way. On a phone two adjacent sections stack
   their padding into roughly 190px of empty screen, which reads as a void
   rather than as generosity. Scale the largest steps down for small
   viewports only; the proportions are unchanged. */
@media (max-width: 48rem) {
  :root {
    --s-5: 2.75rem;
    --s-6: 3.5rem;
    --s-7: 4.5rem;
  }
}

:root {

  --rule: 1px solid var(--gold);
  --rule-quiet: 1px solid rgba(89, 94, 102, 0.22);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

/* figures carry a browser default margin of 1em 40px, which quietly insets
   every portrait and pushes the hairline rules off the image edge */
figure { margin: 0; }

/* Nothing in her identity is boxed or rounded. Enforce it globally. */
* { border-radius: 0 !important; box-shadow: none !important; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

/* Her banners set the headline large but never so large it outruns its
   column. At 7vw the hero ran to five lines on a laptop and pushed the call
   to action below the fold, which is the opposite of calm. */
h1 { font-size: clamp(2rem, 4.2vw, 3.5rem); letter-spacing: 0.03em; }
h2 { font-size: clamp(1.75rem, 4.5vw, var(--t-xl)); }
h3 { font-size: clamp(1.25rem, 2.6vw, var(--t-lg)); letter-spacing: 0.08em; }

p { margin: 0 0 var(--s-2); max-width: var(--measure); text-wrap: pretty; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
a:hover { color: var(--gold-ink); }

strong { font-weight: 600; }

/* the letter-spaced small caps label her banners use throughout */
.eyebrow {
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-ink);
  margin: 0 0 var(--s-3);
  max-width: none;
}

.lede {
  font-size: clamp(1.125rem, 2.2vw, var(--t-md));
  line-height: 1.55;
  color: var(--ink-soft);
}

.quiet { color: var(--grey); }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.narrow { max-width: 46rem; margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--s-6); }
.section--tight { padding-block: var(--s-5); }
.section--warm { background: var(--cream-warm); }
.section--ink { background: var(--ink); color: var(--cream); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--cream); }
.section--ink .lede { color: var(--gold-pale); }
.section--ink .eyebrow { color: var(--gold); }
.section--ink a { color: var(--gold); }

/* separation is done with hairline rules and white space, never boxes */
.rule { border: 0; border-top: var(--rule); margin: 0; width: 4rem; }
.rule--full { width: 100%; border-top: var(--rule-quiet); }

/* ---------- header ---------- */
.masthead {
  border-bottom: var(--rule-quiet);
  background: var(--cream);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-3);
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--display);
  font-size: var(--t-md);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.wordmark:hover { color: var(--ink); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  align-items: center;
}

.nav a {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-decoration: none;
  color: var(--grey);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
}

.nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  padding: 0.9rem 2rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn:hover { background: var(--ink); color: var(--cream); }

.btn--ink { border-color: var(--gold); color: var(--gold); }
.btn--ink:hover { background: var(--gold); color: var(--ink); }

/* ---------- the signature element: the reveal ----------
   Her whole thesis is that pressure reveals what is already there. The word
   "reveals" is therefore not styled — it is revealed, once, by a gold rule
   that sweeps across it on load. It is the only animation on the page.      */
.reveal-word {
  position: relative;
  display: inline-block;
  color: var(--gold-ink);
  font-style: italic;
}

.reveal-word::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.12em;
  height: 1px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  animation: sweep 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

@keyframes sweep { to { transform: scaleX(1); } }

.hero__line--2 {
  opacity: 0;
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.4em); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-word::after { animation: none; transform: scaleX(1); }
  .hero__line--2 { animation: none; opacity: 1; }
}

/* ---------- hero ---------- */
.hero { padding-block: clamp(var(--s-4), 7vh, var(--s-6)) var(--s-5); }
.hero h1 { margin-bottom: var(--s-3); }
.hero .lede { margin-bottom: var(--s-4); max-width: 32rem; }

/* ---------- the philosophy chain ----------
   Numbering appears in exactly one place on this site, because exactly one
   piece of her content is genuinely ordered: her philosophy is a chain where
   each step makes the next one possible. The hairline joins the links.      */
.chain { list-style: none; margin: 0; padding: 0; max-width: 44rem; }

.chain li {
  position: relative;
  padding-left: clamp(3rem, 7vw, 4.5rem);
  padding-bottom: var(--s-4);
}

.chain li::before {
  content: attr(data-step);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gold-ink);
}

/* the connecting hairline — the chain itself */
.chain li::after {
  content: "";
  position: absolute;
  left: clamp(0.85rem, 2.2vw, 1.2rem);
  top: 1.8em;
  bottom: 0.4em;
  width: 1px;
  background: var(--gold);
}

.chain li:last-child { padding-bottom: 0; }
.chain li:last-child::after { display: none; }

.chain p {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.8vw, var(--t-lg));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}

.section--ink .chain p { color: var(--cream); }
.section--ink .chain li::before { color: var(--gold); }

/* ---------- the icon row from her banners ---------- */
.disciplines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.disciplines li { text-align: center; }

.disciplines svg {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto var(--s-2);
  stroke: var(--gold-ink);
  stroke-width: 1;
  fill: none;
}

.section--ink .disciplines svg { stroke: var(--gold); }

.disciplines span {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.5;
  color: var(--grey);
}

.section--ink .disciplines span { color: var(--gold-pale); }

/* ---------- generic prose blocks ---------- */
.stack > * + * { margin-top: var(--s-3); }
.stack--wide > * + * { margin-top: var(--s-4); }

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--s-4) var(--s-5);
}

.cols p { max-width: 30rem; }

.list-plain { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }

.list-plain li {
  padding-block: var(--s-2);
  border-top: var(--rule-quiet);
}

.list-plain li:last-child { border-bottom: var(--rule-quiet); }

/* ---------- footer ---------- */
.footer {
  background: var(--ink);
  color: var(--cream-warm);
  padding-block: var(--s-5) var(--s-4);
}

.footer h2 {
  font-size: var(--t-md);
  color: var(--cream);
  letter-spacing: 0.18em;
  margin-bottom: var(--s-2);
}

.footer a { color: var(--gold); text-underline-offset: 0.3em; }
.footer a:hover { color: var(--gold-pale); }

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s-4);
  padding-bottom: var(--s-4);
}

.footer__lockup {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold-pale);
  line-height: 2;
  margin: 0;
}

.footer__nav { display: flex; flex-direction: column; gap: 0.5rem; }

.footer__nav a {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  font-weight: 600;
}

.footer__base {
  border-top: 1px solid rgba(201, 183, 165, 0.28);
  padding-top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  align-items: flex-start;
}

.footer__base p {
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--grey-light);
  margin: 0;
  max-width: 40rem;
  line-height: 1.7;
}

/* ---------- the mandatory build disclaimer ---------- */
.disclaimer {
  background: var(--ink-deep);
  color: var(--gold-pale);
  border-top: 1px solid rgba(201, 183, 165, 0.28);
  padding-block: var(--s-3);
}

.disclaimer p {
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  line-height: 1.8;
  margin: 0;
  max-width: 58rem;
  color: var(--gold-pale);
}

.disclaimer a { color: var(--gold); }

/* ---------- imagery ----------
   Every photograph on this site is Vivien's own, lifted from the banners she
   supplied. Her blueprint asks for real imagery and generous white space, and
   her banners always pair her portrait with type rather than floating it in a
   card, so the components below do the same. Nothing is boxed or rounded. */

/* the hero pairing her banners use: type left, portrait right */
.hero--portrait .wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s-5);
  align-items: center;
}

.hero--portrait .hero__text { min-width: 0; }

.hero__portrait {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 30rem;
}

.hero__portrait img { width: 100%; display: block; }

/* a hairline that runs under the portrait, as in her banners */
.hero__portrait::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  border-bottom: var(--rule);
}

@media (max-width: 56rem) {
  .hero--portrait .wrap { grid-template-columns: 1fr; gap: var(--s-4); }
  .hero__portrait { justify-self: start; max-width: 22rem; }
}

/* a portrait set beside prose, alternating side by page */
.figure-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--s-5);
  align-items: center;
}

.figure-split--reverse { grid-template-columns: 1.1fr 0.9fr; }
.figure-split--reverse .figure-split__media { order: 2; }

.figure-split__media { position: relative; }
.figure-split__media img { width: 100%; display: block; }

.figure-split__media::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  border-bottom: var(--rule);
}

@media (max-width: 56rem) {
  .figure-split,
  .figure-split--reverse { grid-template-columns: 1fr; gap: var(--s-4); }
  .figure-split--reverse .figure-split__media { order: 0; }
  .figure-split__media { max-width: 22rem; }
}

/* a wide quiet band carrying her portrait behind navy */
.portrait-band {
  position: relative;
  min-height: 22rem;
  display: grid;
  align-items: center;
  background: var(--ink);
  overflow: hidden;
}

.portrait-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
  opacity: 0.32;
  filter: grayscale(0.2);
}

.portrait-band .wrap { position: relative; z-index: 1; }
.portrait-band, .portrait-band h2, .portrait-band p { color: var(--cream); }
.portrait-band .eyebrow { color: var(--gold); }

/* her real signature, lifted from her own banner.
   multiply drops the pale photographic background into the cream behind it,
   so the gold reads as ink on the page rather than as a pasted rectangle. */
.signature {
  display: block;
  width: 11rem;
  max-width: 60%;
  margin-top: var(--s-3);
  mix-blend-mode: multiply;
}

.section--ink .signature, .portrait-band .signature { mix-blend-mode: screen; }

/* the VH monogram */
.monogram { width: 4.5rem; height: auto; }
.monogram--sm { width: 2.75rem; }

.masthead__mark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

/* the credential bar her banners run across the foot */
.credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.credentials li {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-pale);
  padding-right: var(--s-3);
  border-right: 1px solid rgba(201, 183, 165, 0.3);
}

.credentials li:last-child { border-right: 0; padding-right: 0; }

/* ---------- accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
}

.section--ink :focus-visible, .footer :focus-visible, .disclaimer :focus-visible {
  outline-color: var(--gold);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  z-index: 10;
  font-size: var(--t-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.skip-link:focus { left: 0; color: var(--cream); }

.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;
}