/* Kim Thursfield — the quiet expert of the three sites.
   Darkest and most restrained, gold first, pink used sparingly. Dominant serif,
   generous whitespace. Same Fraunces + Inter system as KTTA and TFP so the three
   read as one family, but this one holds its voice down. */

:root {
  --ink:        #120B10;   /* deeper and warmer than KTTA's near-black */
  --ink-soft:   #191019;
  --ink-card:   #1E141D;
  --gold:       #C9A36B;
  --gold-lt:    #E2C08D;
  --gold-deep:  #8A6F42;
  --pink:       #DB2777;   /* sparingly: one accent, not a theme */
  --ivory:      #F6EFE4;
  --tx-mute:    rgba(246,239,228,0.66);
  --tx-soft:    rgba(246,239,228,0.44);
  --rule:       rgba(201,163,107,0.26);
  --rule-soft:  rgba(246,239,228,0.10);
  --nav-h:      76px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }
body {
  font-family: 'Inter', sans-serif;
  background: var(--ink);
  color: var(--ivory);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--gold-lt); }

.display { font-family: 'Fraunces', serif; font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; }
.display em { font-style: italic; color: var(--gold-lt); }
h1.display { font-size: clamp(2.9rem, 7vw, 5rem); }
h2.display { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 1rem; }
h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.18rem; margin-bottom: 0.5rem; }
h4 { font-family: 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem; }
p { color: var(--tx-mute); margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.eyebrow { font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.eyebrow.center { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.eyebrow.center::before, .eyebrow.center::after { content: ''; height: 1px; width: 42px; background: var(--rule); }
.section-head .eyebrow { margin-bottom: 1rem; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 2rem; border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none; font-weight: 700; border: 1px solid transparent;
  cursor: pointer; font-family: 'Inter', sans-serif; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.btn.gold { background: var(--gold); color: #14100C; }
.btn.gold:hover { background: var(--gold-lt); transform: translateY(-2px); }
.btn.line { border-color: var(--rule); color: var(--gold-lt); }
.btn.line:hover { border-color: var(--gold); background: rgba(201,163,107,0.09); transform: translateY(-2px); }
.btn.wide { width: 100%; }

/* ── nav ── */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center;
  justify-content: space-between; padding: 0 3rem; background: rgba(18,11,16,0.9);
  border-bottom: 1px solid var(--rule-soft); }
.nav-logo { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--ivory); }
.nav-mark { width: 42px; height: 42px; flex-shrink: 0; border: 1px solid var(--gold); border-radius: 50%;
  display: grid; place-items: center; font-family: 'Fraunces', serif; font-weight: 600; font-size: 0.95rem;
  color: var(--gold-lt); letter-spacing: 0.04em; }
.nav-word .top { display: block; font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; line-height: 1.1; }
.nav-word .bot { display: block; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.nav-links { list-style: none; display: flex; align-items: center; gap: 2rem; }
.nav-links a { color: var(--tx-mute); text-decoration: none; font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--ivory); }
.nav-links .btn { color: #14100C; font-size: 0.62rem; padding: 0.62rem 1.3rem; }
.nav-links .btn:hover { color: #14100C; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--gold); display: block; }

/* ── hero ── text-led, no photograph.
   This site explains who Kim is in depth; the opening is a statement, not a portrait
   with a call to action stapled to it. */
.hero { padding: 6.5rem 3rem 6rem;
  background: radial-gradient(820px circle at 26% 6%, rgba(201,163,107,0.11) 0%, transparent 68%), var(--ink); }
.hero-inner { max-width: 1080px; margin: 0 auto; }
.hero .eyebrow { display: block; margin-bottom: 1.8rem; }
.hero h1 { margin-bottom: 1.8rem; max-width: 20ch; }
.lede { font-size: 1.2rem; line-height: 1.72; color: var(--tx-mute); max-width: 46rem; margin-bottom: 2rem; }
.signoff { font-family: 'Fraunces', serif; font-size: 1.05rem; color: var(--gold-lt); }
.signoff span { font-family: 'Inter', sans-serif; font-size: 0.68rem; letter-spacing: 0.2em;
  color: var(--gold); margin-left: 0.5rem; }

/* ── the short version: portrait and credential card side by side with the text ──
   The card was originally laid over the portrait and covered a quarter of her face.
   It now has its own column and never touches the photograph. */
.intro-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 4rem; align-items: start; }
.intro-text p { font-size: 1.04rem; }
/* The card is pinned to the aside's right edge and the photograph is sized from what is
   left, so the overlap is exactly a fifth of the picture at ANY desktop width rather than
   only at the one I happened to screenshot.
     card.left = asideW - cardW,  photoW = (asideW - cardW) / 0.8
     => horizontal overlap = photoW - (asideW - cardW) = 0.2 x photoW
   The photo is square, so `top: 80%` gives the same fifth vertically. */
/* The card width is fluid between bounds. A fixed 13.5rem held the geometry but ate the
   photograph at the narrow end of the desktop range: just above the 1020px breakpoint the
   picture came out 216px, the same width as the card. Both percentages resolve against
   this element, so the img calc and the card width stay in agreement. */
.intro-side { position: relative; --card-w: clamp(11rem, 42%, 13.5rem); }
/* `height: auto` is load-bearing. The img carries width="600" height="600" attributes,
   which the browser applies as presentational hints. Setting only `width` in CSS leaves
   the height hint standing, and an element with BOTH a width and a height ignores
   aspect-ratio: the portrait rendered 359x600 and stretched. */
.intro-side img { width: calc((100% - var(--card-w)) / 0.8); height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: 50% 22%; border-radius: 4px; filter: grayscale(0.2) contrast(1.03); }
/* The card overlaps the photograph again, because sitting it underneath left a column
   of dead space beside the text. It is pulled UP over the bottom edge and LEFT into the
   column gutter, so the overlap lands on shoulder and background. The first attempt
   floated it over the middle-right and covered a quarter of her face; the rule is that
   the card may touch the photograph but never the person. */
/* Deliberately IN FLOW rather than absolute. Absolute positioning gave the same overlap
   but the card hung 192px out of the section and over the next one, because the aside's
   height only counted the photograph. In flow it reserves its own height.
     margin-left: auto        pins it to the aside's right edge
     margin-top: (card - 100%)/4   is exactly -0.2 x photo height, since
                                   photoH = photoW = (asideW - cardW)/0.8
   A percentage margin resolves against the container's WIDTH, which is what makes this
   expressible at all. */
.cred-card { position: relative; z-index: 2; width: var(--card-w);
  margin-left: auto; margin-top: calc((var(--card-w) - 100%) / 4);
  background: var(--ink-card); border: 1px solid var(--rule); border-radius: 4px;
  padding: 1.25rem 1.3rem; box-shadow: 0 22px 55px rgba(0,0,0,0.6); }
.cred-eyebrow { font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.cred-card ul { list-style: none; margin-top: 0.9rem; }
.cred-card li { font-size: 0.86rem; color: var(--tx-mute); padding: 0.42rem 0; border-bottom: 1px solid var(--rule-soft); }
.cred-card li:last-child { border-bottom: 0; }
.cred-card strong { color: var(--ivory); font-weight: 600; }

/* ── sections ── */
.section { padding: 6rem 3rem; }
.section.tint { background: var(--ink-soft); }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-inner.narrow { max-width: 760px; }
/* The prose sections sit in a reading measure with balanced margins. At the full
   1200px the text ran to 46rem and left the right half of the screen empty, which
   reads as a mistake rather than as whitespace. */
.section-inner.editorial { max-width: 880px; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 3.2rem; }

/* ── long-form prose ──
   The substance of the site. Generous measure, serif subheads with a gold rule above,
   and a larger body size than the rest of the page because this is what people came
   to read rather than skim. */
.prose { max-width: 42rem; margin: 0 auto; }
.prose h3 { font-size: 1.45rem; margin: 3.2rem 0 1rem; padding-top: 1.8rem; position: relative; }
.prose h3::before { content: ''; position: absolute; top: 0; left: 0; width: 48px; height: 1px; background: var(--gold); }
.prose h3:first-child { margin-top: 0; padding-top: 0; }
.prose h3:first-child::before { display: none; }
.prose p { font-size: 1.06rem; line-height: 1.85; margin-bottom: 1.15rem; }
.prose em { color: var(--ivory); font-style: italic; }
.prose strong { color: var(--ivory); font-weight: 600; }
.status-line { border-left: 2px solid var(--gold); padding: 0.2rem 0 0.2rem 1.1rem; }
.status-line strong { color: var(--gold-lt); }

/* ── the four promises ── */
.promises { list-style: none; counter-reset: none; max-width: 42rem; margin: 0 auto; }
.promises li { position: relative; padding: 0 0 0 4.2rem; margin-bottom: 2.4rem; }
.p-num { position: absolute; left: 0; top: -0.15rem; font-family: 'Fraunces', serif; font-style: italic;
  font-size: 1.6rem; color: var(--gold); width: 3rem; text-align: right; }
.promises h3 { margin-bottom: 0.5rem; }
.promises p { font-size: 1rem; }

/* ── feature blocks ── */
.feature { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
.feature-text { max-width: 100%; }
.feature-text .eyebrow { display: block; margin-bottom: 1rem; }

.book-row { margin-top: 1.6rem; }

/* ── photographs in the prose ──
   Deliberately sparing. This is a text-led page and Kim's own words about the
   photographs were "VERY old and not professional", so they punctuate the reading
   rather than carry it. width/height attributes are on the <img> and MUST be paired
   with height:auto here: an element with both a width and a height hint ignores
   aspect-ratio, which stretched this page's portrait twice during the build. */
.figure { margin: 2.8rem 0; }
.figure img { width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--rule-soft); }
.figure figcaption { font-family: 'Fraunces', serif; font-style: italic; font-size: 0.9rem;
  color: var(--tx-soft); margin-top: 0.8rem; text-align: center; }
/* The concert shot is a tall portrait; left full-width it would tower over the
   measure, so it is capped and centred. The cabaret shot is 4:3 and runs full width. */
.figure.portrait img { max-width: 380px; margin: 0 auto; }

/* ── fee table ──
   Kim asked for fees to stay on the site "in case I need to increase fees I have
   something somewhere that people can see this". Amounts are her published ones
   minus the at-home rate, which she no longer offers. */
.fees { list-style: none; margin: 1.5rem 0 1.2rem; border-top: 1px solid var(--rule-soft); }
.fees li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.4rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--rule-soft); }
.fees .f-what { color: var(--ivory); font-size: 0.98rem; }
.fees .f-amt { color: var(--gold-lt); font-size: 0.95rem; text-align: right; }
.fees-note { font-size: 0.92rem; color: var(--tx-soft); }

/* ── form ── */
.form-card { background: var(--ink-card); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 2.4rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.field input, .field select, .field textarea {
  background: var(--ink); border: 1px solid var(--rule-soft); border-radius: 3px; padding: 0.85rem 1rem;
  color: var(--ivory); font-family: 'Inter', sans-serif; font-size: 0.95rem; min-height: 48px; }
.field textarea { min-height: auto; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field input::placeholder, .field textarea::placeholder { color: rgba(246,239,228,0.3); }
.field .hint { font-size: 0.74rem; color: var(--tx-soft); }
.field.consent { flex-direction: row; align-items: flex-start; gap: 0.7rem; }
.field.consent input { width: 20px; height: 20px; min-height: 20px; flex-shrink: 0; margin-top: 3px; accent-color: var(--gold); }
.field.consent label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.86rem;
  color: var(--tx-mute); line-height: 1.55; }

/* inline confirmation, in place of Web3Forms' own page */
.form-status { font-size: 0.9rem; line-height: 1.55; margin-top: 0.9rem; padding: 0.85rem 1.05rem;
  border-radius: 3px; border-left: 2px solid; }
.form-status.ok { background: rgba(201,163,107,0.10); border-color: var(--gold); color: var(--ivory); }
.form-status.bad { background: rgba(219,39,119,0.10); border-color: var(--pink); color: #FBCFE8; }
.or-line { text-align: center; margin-top: 1.8rem; font-size: 0.92rem; color: var(--tx-soft); }

/* ── footer ── */
footer { padding: 4rem 3rem 2rem; border-top: 1px solid var(--rule-soft); background: var(--ink-soft); }
.foot-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.6rem; }
.foot-brand p { font-size: 0.88rem; margin-top: 1rem; max-width: 22rem; }
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 0.55rem; }
.foot-col a { color: var(--tx-mute); text-decoration: none; font-size: 0.88rem; }
.foot-col a:hover { color: var(--gold-lt); }
.foot-bot { max-width: 1200px; margin: 3rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--rule-soft);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--tx-soft); }
.foot-bot a { color: var(--tx-mute); }

/* ── reveals ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1020px) {
  .nav { padding: 0.9rem 1.3rem; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; background: rgba(18,11,16,0.98);
    border-bottom: 1px solid var(--rule-soft); flex-direction: column; align-items: flex-start; gap: 0;
    padding: 0.6rem 1.4rem 1.4rem; display: none; }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 0.85rem 0; font-size: 0.85rem; }
  .nav-links .btn { margin-top: 0.7rem; width: 100%; }
  .nav-toggle { display: flex; }
  .hero { padding: 3.4rem 1.3rem 3.6rem; }
  .intro-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  /* photograph and card stack under the text, and the portrait stops being a full-width
     slab by capping it at a sensible reading width. The desktop overlap is undone: at
     this width there is no gutter to pull into, so a negative left margin would hang the
     card off the side of the screen. */
  .intro-side { max-width: 420px; }
  /* The desktop geometry is undone entirely: the photo goes back to full column width and
     the card returns to the normal flow underneath it, still slightly overlapping. */
  .intro-side img { width: 100%; }
  .cred-card { width: auto; margin: -2.2rem 0 0 0; padding: 1.5rem 1.6rem; }
  .section { padding: 4rem 1.3rem; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  footer { padding: 3rem 1.3rem 2rem; }
}
@media (max-width: 620px) {
  .strands, .res-grid, .form-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .form-card { padding: 1.5rem; }
  .hero-actions .btn, .feature-text .btn { width: 100%; }
  /* A fee and its description will not sit side by side at this width without one of
     them wrapping mid-phrase, so they stack and the amount goes under its own label. */
  .fees li { flex-direction: column; gap: 0.15rem; }
  .fees .f-amt { text-align: left; }
}
@media (max-width: 480px) {
  .nav-word .top { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}