/* ============================================================
   TC Schilling — storyteller site
   One stylesheet, no framework, no build step.

   Palette: desert morning — pale green-white ground, prickly-pear
   green structure, prickly-pear-fruit magenta as the single accent.
   Type: Fraunces (display) + Karla (body).
   ============================================================ */

:root {
  --ground:      #F1F5F0;
  --surface:     #FFFFFF;
  --sunk:        #E5EBE3;
  --ink:         #16241B;
  --ink-2:       #405046;
  --ink-3:       #6D7C72;
  --rule:        #D3DCD2;
  --rule-2:      #B6C2B5;

  --green:       #2E5C44;
  --green-wash:  #E2EDE5;
  --bloom:       #A8264F;
  --bloom-2:     #8E1F43;
  --bloom-wash:  #FBE9EF;
  --sand:        #CFC3AF;
  --flag:        #F5E4A8;
  --flag-ink:    #6B5410;

  --shadow-s: 0 1px 2px rgba(22,36,27,.05);
  --shadow-m: 0 1px 2px rgba(22,36,27,.05), 0 10px 26px -14px rgba(22,36,27,.22);

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --gap: clamp(2.75rem, 7vw, 5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:      #101A14;
    --surface:     #17241C;
    --sunk:        #131E17;
    --ink:         #E8EEE8;
    --ink-2:       #B2C0B6;
    --ink-3:       #85958B;
    --rule:        #2A3A30;
    --rule-2:      #3D5145;

    --green:       #7FBF9B;
    --green-wash:  #16281D;
    --bloom:       #F08AAC;
    --bloom-2:     #F7A9C2;
    --bloom-wash:  #2C161F;
    --sand:        #6F6455;
    --flag:        #3A2F10;
    --flag-ink:    #F0DC9A;

    --shadow-s: 0 1px 2px rgba(0,0,0,.4);
    --shadow-m: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.65);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(1rem, .97rem + .18vw, 1.09rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 var(--pad); }
.wrap.narrow { max-width: 44rem; }

/* ---------------- type ---------------- */
h1, h2, h3 {
  font-family: var(--f-display);
  margin: 0;
  line-height: 1.08;
  text-wrap: balance;
  font-weight: 600;
  letter-spacing: -.012em;
}
h1 { font-size: clamp(2.15rem, 1.15rem + 4.4vw, 3.9rem); font-weight: 800; letter-spacing: -.022em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); }
p { margin: 0; }
em { font-style: italic; }
strong { font-weight: 700; }

a { color: var(--bloom); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--bloom-2); }
:focus-visible { outline: 2px solid var(--bloom); outline-offset: 3px; border-radius: 3px; }

.eyebrow {
  font-size: .76rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.lede {
  font-size: clamp(1.1rem, 1rem + .55vw, 1.35rem);
  line-height: 1.48; color: var(--ink-2); max-width: 38ch;
}
.prose { display: flex; flex-direction: column; gap: .85em; max-width: 62ch; color: var(--ink-2); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--surface); color: var(--ink); padding: .7rem 1rem; border-radius: 0 0 4px 0;
}
.skip:focus { left: 0; }

/* ---------------- header ---------------- */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: var(--ground); /* fallback for browsers without color-mix */
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4rem; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--ink); text-decoration: none; font-weight: 700;
}
.brand-mark { color: var(--green); display: inline-flex; }
.brand-name { font-family: var(--f-display); font-size: 1.12rem; letter-spacing: -.01em; }
header.site nav { display: flex; align-items: center; gap: clamp(.75rem, 2.5vw, 1.6rem); }
header.site nav a {
  color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 500;
}
header.site nav a:hover { color: var(--ink); }
.nav-cta {
  background: var(--green); color: #fff !important; padding: .45rem .95rem;
  border-radius: 999px; font-weight: 700 !important;
}
.nav-cta:hover { background: var(--ink); }
@media (prefers-color-scheme: dark) { .nav-cta { color: #0F1811 !important; } .nav-cta:hover { background: var(--bloom); } }

/* ---------------- hero ---------------- */
.hero { padding: clamp(2.75rem, 8vw, 5.5rem) 0 clamp(2.5rem, 7vw, 4.5rem); }
.hero-grid {
  display: grid; gap: clamp(1.75rem, 5vw, 3.25rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 54rem) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
}
.hero-text { display: flex; flex-direction: column; gap: 1.2rem; }
.hero h1 { max-width: 24ch; }

.hero-figure { margin: 0; }
/* Square rather than 3:2: the hero photo is a phone shot in portrait, and the
   two faces only both fit inside a square crop. If a landscape photo replaces
   it (e.g. TC reading to a real group), put this back to 3 / 2. */
.hero-figure img {
  width: 100%; border-radius: 6px;
  box-shadow: var(--shadow-m);
  aspect-ratio: 1 / 1; object-fit: cover;
}
.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .35rem; }
.btn {
  display: inline-block; padding: .8rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn.primary { background: var(--bloom); color: #fff; }
.btn.primary:hover { background: var(--bloom-2); color: #fff; }
.btn.ghost { border-color: var(--rule-2); color: var(--ink); }
.btn.ghost:hover { border-color: var(--ink); background: var(--surface); }
@media (prefers-color-scheme: dark) {
  .btn.primary { color: #22101A; }
  .btn.primary:hover { color: #22101A; }
}

/* ---------------- bands ---------------- */
.band { padding: var(--gap) 0; border-top: 1px solid var(--rule); }
.band.alt { background: var(--sunk); }
.s-head { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 2rem; }
.s-sub { color: var(--ink-2); max-width: 54ch; }

/* ---------------- programs ---------------- */
.programs { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 50rem) { .programs { grid-template-columns: 1fr 1fr; } }

.program {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 5px;
  box-shadow: var(--shadow-m); display: flex; flex-direction: column; overflow: hidden;
}
.program-head { padding: 1.4rem 1.4rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.program-head p:last-child { color: var(--ink-2); font-size: .97rem; }
.kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--green);
}
.program h3 { position: relative; padding-bottom: .55rem; }
.program h3::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 2.2rem; height: 2px;
  background: var(--bloom); border-radius: 2px;
}

.spec { margin: 0; border-top: 1px solid var(--rule); background: var(--ground); }
.spec > div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: .75rem;
  padding: .7rem 1.4rem; border-bottom: 1px solid var(--rule);
}
.spec > div:last-child { border-bottom: 0; }
.spec dt {
  font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); padding-top: .18rem;
}
.spec dd { margin: 0; font-size: .95rem; color: var(--ink); }
@media (max-width: 26rem) {
  .spec > div { grid-template-columns: 1fr; gap: .15rem; }
}

.aside {
  margin-top: 1.6rem; padding-left: 1rem; border-left: 2px solid var(--sand);
  color: var(--ink-2); font-size: .97rem; max-width: 58ch;
}

/* ---------------- listen ---------------- */
.listen { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 46rem) { .listen { grid-template-columns: 15rem 1fr; } }

.listen-art { margin: 0; }
.listen-art img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 6px; box-shadow: var(--shadow-m);
}
.art-ph {
  aspect-ratio: 1 / 1; width: 100%;
  display: grid; place-items: center; text-align: center;
  background: var(--green-wash); border: 1px dashed var(--rule-2); border-radius: 5px;
  color: var(--ink-3); font-size: .9rem; line-height: 1.4;
}
.art-ph small { color: var(--ink-3); opacity: .8; }

.listen-body { display: flex; flex-direction: column; gap: 1rem; max-width: 56ch; }
.listen-body > p { color: var(--ink-2); }
.avail { font-size: .93rem; color: var(--ink-3); }
.tagline {
  font-family: var(--f-display); font-style: italic;
  font-size: 1.06rem; color: var(--green);
  padding-left: .9rem; border-left: 2px solid var(--sand);
}

/* ---------------- audio sample ---------------- */
/* Native <audio> controls on purpose: they are keyboard accessible, work with
   screen readers, and need no JavaScript. They cannot be restyled beyond the
   surface they sit on, which is fine — the panel does the matching. */
.sample {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: 1rem 1.1rem 1.05rem; box-shadow: var(--shadow-m);
  display: flex; flex-direction: column; gap: .6rem;
}
.sample-label {
  font-family: var(--f-display); font-weight: 600; font-size: 1.02rem;
  color: var(--green); margin: 0;
}
.sample-player { width: 100%; display: block; height: 2.5rem; }
.sample-note { margin: 0; font-size: .86rem; color: var(--ink-3); }

.stores { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.stores a {
  display: inline-block; padding: .5rem 1rem; border: 1.5px solid var(--rule-2);
  border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: .93rem;
}
.stores a:hover { border-color: var(--bloom); color: var(--bloom); }
.borrow { font-size: .93rem; color: var(--ink-2); }

/* ---------------- about ---------------- */
.about { display: grid; gap: clamp(1.5rem, 4vw, 2.75rem); grid-template-columns: 1fr; align-items: start; }
/* 17rem rather than 15: the About photo is a two-person scene, not a headshot,
   so it needs a little more room for the faces to read at a glance. */
@media (min-width: 46rem) { .about { grid-template-columns: 17rem 1fr; } }
/* If the portrait is ever removed again, add class "about--solo" to .about */
.about--solo { grid-template-columns: 1fr !important; }
.about--solo .about-body { max-width: 46rem; }
.portrait { margin: 0; }
.portrait img {
  width: 100%; border-radius: 6px; box-shadow: var(--shadow-m);
  aspect-ratio: 1 / 1; object-fit: cover;
}
.portrait-ph { border-radius: 6px; }

/* ---------------- booking ---------------- */
.book .s-head { text-align: left; }
/* The form sits on its own surface so the Google chrome doesn't float
   awkwardly against the band background. */
.form-wrap {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: .5rem; box-shadow: var(--shadow-m); overflow: hidden;
}
.book iframe { width: 100%; border: 0; border-radius: 4px; display: block; }
.form-fallback { margin-top: .9rem; font-size: .9rem; color: var(--ink-3); }
.or { margin-top: 1.6rem; font-size: .93rem; color: var(--ink-3); }
.email { margin-top: .3rem; font-family: var(--f-display); font-size: clamp(1.1rem, 1rem + .7vw, 1.5rem); }
.email a { font-weight: 600; }

/* ---------------- footer ---------------- */
.site-foot { border-top: 1px solid var(--rule); padding: 2.25rem 0 3rem; margin-top: var(--gap); }
.foot-in { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between; align-items: baseline; }
.foot-brand { font-family: var(--f-display); font-weight: 600; }
.foot-meta { font-size: .92rem; color: var(--ink-3); }

/* ---------------- placeholder flags ----------------
   Currently unused — as of 2026-09-22 there is no [[REPLACE: ...]] left on the
   page. Kept deliberately rather than deleted: the store links go in on
   release, and whoever does that will want the mechanism that makes an
   unfinished spot impossible to miss. Wrap the text in <span class="todo">. */
.todo {
  background: var(--flag); color: var(--flag-ink);
  padding: .1em .4em; border-radius: 3px;
  font-size: .93em; font-weight: 700;
}
.todo-block {
  display: block; background: var(--flag); color: var(--flag-ink);
  padding: .9rem 1rem; border-radius: 4px; border-left: 3px solid currentColor;
  font-weight: 500;
}