/* ==========================================================================
   PHASE 1 CLONE — the Softly Softly skin, on the new stack.
   Ships Wed Sept 9 2026. Replaced by the real design Wed Sept 16.

   This file is deliberately SEPARATE from style.css. Phase 1 and Phase 2 are
   two different skins of the same stack; keeping them in different files means
   the redesign never has to merge against the throwaway.

   Palette sampled from the live Wix site (docs/research/current-site-audit.md).
   Deleting this file, clone.njk and the four *.njk clone pages removes Phase 1
   entirely.
   ========================================================================== */

:root {
  /* --- Softly Softly palette, sampled from the live site --- */
  --ss-ground: #c6e0e2;  /* pale ice blue — the page */
  --ss-sky:    #7fccf7;  /* button blue */
  --ss-muted:  #a5b8ba;  /* gray-teal — panels and footer */
  --ss-ink:    #414141;
  --ss-white:  #fff;

  --bg:    var(--ss-ground);
  --text:  var(--ss-ink);
  --rule:  rgba(65, 65, 65, 0.25);

  /* Tim, 2026-09-04: the sans is FRANKLIN GOTHIC, the serif is COOPER BLACK
     ITALIC, on every heading and announcement. Wix obfuscates font names behind
     machine hashes (wfont_fe053b_...), so this could not be read off the site.

     ⚠️ Family names matter more than they look. An earlier version of this
     file asked for "Franklin Gothic Heavy" / "Medium" / "Book". The font
     actually installed on Tim's Mac reports its family as plain
     "Franklin Gothic" (styles: Regular, Italic, Condensed — no Heavy), so
     every one of those names missed and the browser fell through to the
     fallback. Verified via system_profiler 2026-09-04.

     These stacks ask for the real faces first, then degrade to open
     equivalents. See the note below about who actually sees what. */
  --font-display: "franklin-gothic-atf", "Franklin Gothic", "Libre Franklin",
                  Helvetica, Arial, sans-serif;
  --font-body:    "franklin-gothic-atf", "Franklin Gothic", "Libre Franklin",
                  Helvetica, Arial, sans-serif;
  --font-retro:   "cooper-black-std", "Cooper Black", "Alfa Slab One",
                  Georgia, serif;

  /* ───────────────────────────────────────────────────────────────────────
     WHO ACTUALLY SEES THESE FONTS  —  solved 2026-09-04

     The lowercase names are Adobe Fonts families, served to EVERY visitor from
     Tim's own kit (see clone.njk). That is the real thing, licensed, not a
     lookalike — and it does not depend on anyone having a font installed.

     The names after them are the fallback ladder, in order:
       "Franklin Gothic" / "Cooper Black"  — a local copy, if the visitor has one
       Libre Franklin / Alfa Slab One      — open stand-ins from Google

     WEIGHTS AVAILABLE in franklin-gothic-atf (kit aeb1eeg, extended
     2026-09-04 at Tim's request — before that it held only 200 and 900, so
     every bold thing on the page collapsed onto the heaviest weight):

       200  Light      body copy
       600  Demi       spare
       700  Bold       nav, eyebrows, in-copy bold
       800  Heavy      display headings  ← Tim: "heaviest uses should be Heavy,
                                            not ultra"
       900  Black      buttons only      ← Tim: "button might look better as Black"

     cooper-black-std exists ONLY as 400 italic. Do not ask it for other
     weights or an upright — both get synthesised and look smeared.

     ⚠️ Adobe kits are domain-allowlisted. If headings suddenly render in Libre
     Franklin on a new hostname, the domain needs adding to the kit at
     fonts.adobe.com — the site will not break, it just falls down the ladder.
     ─────────────────────────────────────────────────────────────────────── */

  --measure: 60ch;
  --gutter: clamp(1.15rem, 5vw, 3rem);
  --wrap: 68rem;
}

/* --------------------------------------------------------- reset + base */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, p, figure, ul, ol { margin: 0; }
/* height:auto is load-bearing — without it the width/height attributes act as
   presentational hints and every sized image renders stretched. */
img, svg { max-width: 100%; height: auto; display: block; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  /* The Wix site sets 10px body copy site-wide. We are not reproducing that —
     it fails WCAG and it is named in the audit as the thing most worth fixing.
     16px floor. This is the one deliberate departure from the original. */
  font-size: 1rem;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

a { color: inherit; }

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ss-ink); color: #fff;
  padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 3px solid var(--ss-ink); outline-offset: 3px; }

/* --------------------------------------------------------------- header */
.mast {
  padding-block: 1.5rem 0.5rem;
}
.mast__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.social {
  display: flex;
  gap: .85rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.social a {
  display: block;
  color: var(--ss-muted);
  transition: color .15s;
}
.social a:hover { color: var(--ss-ink); }
.social svg { width: 17px; height: 17px; fill: currentColor; }

.nav {
  display: flex;
  gap: 1.4rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.nav a {
  text-decoration: none;
  color: var(--ss-ink);
  padding-block-start: .5rem;
  border-block-start: 2px solid transparent;
}
.nav a:hover { border-block-start-color: var(--rule); }
.nav a[aria-current="page"] { border-block-start-color: var(--ss-ink); }

/* ----------------------------------------------------------- type scale */
.display {
  font-family: var(--font-display);
  /* 800 Heavy, not 900 Black. Tim's call: at display size the heaviest weight
     reads as shouting, and Heavy holds the same presence with more shape. */
  font-weight: 800;
  color: var(--ss-white);
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.005em;
}
/* Cooper Italic. `.retro` is the white version used over the ground;
   `.retro-ink` is the same face in body ink, for headings that sit in running
   copy rather than over open colour. Splitting them this way means the
   typeface choice is in one place and only the colour differs. */
.retro,
.retro-ink {
  font-family: var(--font-retro);
  font-weight: 400;
  font-style: italic;
  line-height: 1.05;
}
.retro { color: var(--ss-white); }
.retro-ink { color: var(--ss-ink); }

.hero {
  text-align: center;
  padding-block: clamp(2rem, 6vw, 4rem) 0;
}
.hero__big { font-size: clamp(2.8rem, 11vw, 6.5rem); }
.hero__sub { font-size: clamp(1.5rem, 5vw, 2.9rem); margin-block-start: .1em; }

.cover {
  width: min(100%, 24rem);
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
}

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-block;
  background: var(--ss-sky);
  color: var(--ss-white);
  text-decoration: none;
  font-size: .72rem;
  /* 900 Black — buttons are small and letterspaced, so they can carry the
     heaviest weight where a headline can't. */
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 1rem 3rem;
  border-radius: 999px;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn-wrap { text-align: center; margin-block-start: 2rem; }

/* ------------------------------------------------------------- sections */
.section { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.section--tight { padding-block: clamp(1.5rem, 4vw, 2.5rem); }

.section__head {
  font-size: clamp(1.9rem, 5.5vw, 3.1rem);
  text-align: center;
  margin-block-end: 2rem;
}

/* Store row — three product shots on the open ground, as on the original. */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
}

/* Two-up: copy on the ground, a gray-teal panel alongside. */
.split {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .split { grid-template-columns: 1fr 1fr; }
}

.split__copy {
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter);
  font-size: .95rem;
}
.split__copy > * + * { margin-block-start: 1em; }

.split__panel {
  background: var(--ss-muted);
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.split__panel .retro { font-size: clamp(1.3rem, 3vw, 1.75rem); }

/* The arch-masked photo from the original homepage. */
.arch {
  border-radius: 50% 50% 0 0 / 32% 32% 0 0;
  overflow: hidden;
  max-width: 15rem;
}
.arch img { width: 100%; }

.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.lede { font-size: 1.05rem; }

.link-underline { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------- endless autumn page */
.autumn { text-align: center; }
/* The welcome lettering is part of this artwork, not live text — see the
   comment in endlessautumn.njk. */
.autumn__art { width: min(100%, 34rem); margin-inline: auto; }

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

.includes {
  list-style: none;
  padding: 0 0 0 1.5rem;
  margin: 0;
  border-inline-start: 2px solid var(--ss-ink);
  display: grid;
  gap: .85rem;
  font-size: .9rem;
  font-weight: 700;
}

/* ------------------------------------------------------------ art by us */
.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px;
  background: #6b4a2a;
  padding: 4px;
  margin-block-start: 2.5rem;
}
.art-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* ---------------------------------------------------------------- seated */
/* The Seated widget ships its own styles; these only pull it into the
   Softly Softly palette. Its class names are Seated's, so if the widget ever
   restyles, the worst case is that it reverts to their default look — the
   dates still render. */
/* Every rule here is scoped under the container's ID on purpose. Seated
   injects its own stylesheet at runtime, after ours, so plain class selectors
   lose the cascade — verified 2026-09-04, when the ticket button rendered
   white-on-pale-blue and the row divider was white at 20% opacity, i.e.
   invisible on this background. An ID selector outranks their classes.

   These are Seated's class names. If they ever restyle the widget the worst
   case is that it reverts to their default look — the dates still render. */
#seated-55fdf2c0 {
  max-width: 46rem;
  margin-inline: auto;
  text-align: start;
}
#seated-55fdf2c0 .seated-event-row {
  border-block-end: 1px solid var(--rule);
  padding-block: .9rem;
}
#seated-55fdf2c0 .seated-event-date-cell,
#seated-55fdf2c0 .seated-event-venue-cell,
#seated-55fdf2c0 .seated-event-venue-name,
#seated-55fdf2c0 .seated-event-venue-location,
#seated-55fdf2c0 .seated-event-location-cell {
  color: var(--ss-ink);
  font-family: var(--font-body);
}
#seated-55fdf2c0 .seated-event-date-cell { font-weight: 700; }
#seated-55fdf2c0 .seated-event-link,
#seated-55fdf2c0 .seated-event-link1 {
  background: var(--ss-sky);
  color: var(--ss-white);
  border: 0;
  border-radius: 999px;
  padding: .6rem 1.6rem;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
}
#seated-55fdf2c0 .seated-follow-message,
#seated-55fdf2c0 .seated-no-events,
#seated-55fdf2c0 .seated-follow-marketing-text { color: var(--ss-ink); }

/* --------------------------------------------------------------- footer */
.foot {
  background: var(--ss-muted);
  margin-block-start: auto;
  padding-block: clamp(2rem, 5vw, 3rem);
  font-size: .82rem;
  color: #4a4a4a;
}
.foot .social { margin-block-end: 1.5rem; }
.foot .social svg { width: 26px; height: 26px; }
.foot .social a { color: #8a9a9c; }
.foot .social a:hover { color: #4a4a4a; }
.foot__block + .foot__block { margin-block-start: 1.1rem; }
.foot a { color: inherit; }
.foot__legal { margin-block-start: 1.5rem; font-size: .78rem; }

/* The original exposes three industry emails as raw mailto: links — a
   spam-harvesting liability flagged in the audit. Carried over as-is for
   Phase 1 so the clone stays faithful; worth changing in Phase 2. */

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