/* ---------------------------------------------------------------- tokens */
:root {
  --g-celadon: #7d9c92;
  --g-celadon-brk: #b8cdc3;
  --g-tenmoku: #3a2419;
  --g-tenmoku-brk: #8d4a24;
  --g-shino: #d9a066;
  --g-shino-brk: #f0dcc0;
  --g-oatmeal: #cfc3ab;
  --g-oatmeal-brk: #ebe4d6;
  --g-ash: #8d8046;
  --g-ash-brk: #c2b784;
  --g-ironred: #9c472a;
  --g-ironred-brk: #c9785a;
  --g-rutile: #4f7285;
  --g-rutile-brk: #8fadbc;
  --g-bisque: #c4a88f;
  --g-bisque-brk: #dcc6b2;

  /* Common pottery colors, not the Wix template's stock imagery.
     The pale gray-green that used to be the ground came off a background
     PHOTOGRAPH in their preview, not off their brand, and the orange and blue
     blocks were the same. So the palette is built from the materials
     instead: unglazed bisque, porcelain, raw clay, iron oxide slip and
     terracotta. Contrast checked, worst ground first. */
  --paper:      #f5efe6;   /* unglazed bisque */
  --white:      #fdfbf8;   /* porcelain */
  --paper-warm: #efe6d8;   /* raw clay */
  --paper-deep: #e9dfd0;   /* sand, a shade deeper */
  --ink:        #2a211a;   /* iron oxide slip, 13.80:1 on bisque */
  --ink-soft:   #5f5449;   /* 6.44:1 on bisque */
  --ink-faint:  #584d43;   /* 7.18:1 on bisque */
  --rule:       #ded2c0;
  --accent:     #8f4a26;   /* terracotta, 5.79:1 bisque / 6.40 porcelain / 5.02 sand */
  --accent-deep:#733a1d;
  --terracotta: #c87f56;   /* fired terracotta, for blocks not text */
  --clay:       #d9b391;   /* a lighter clay body */
  --dark:       #2a211a;
  --on-dark:    #f0e8dc;   /* 12.98:1 on the dark band */

  --ease-out:  cubic-bezier(.2,.7,.2,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --t-fast:    150ms;
  --t-mid:     320ms;
  --t-slow:    620ms;

  --measure: 60ch;
  --gut: clamp(18px, 5vw, 64px);
}

/* ----------------------------------------------------------------- reset */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

h1,h2,h3 {
  font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  line-height: 1.02; letter-spacing: -.022em; margin: 0; text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 7.2vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.12rem, 1.7vw, 1.4rem); line-height: 1.22; letter-spacing: -.012em; }
/* The second line of a headline, in italic. The one type move that carries
   the voice: a claim, then the turn. */
h1 em, h2 em {
  display: block; font-style: italic; font-weight: 400;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  color: var(--accent);
}
p  { margin: 0 0 1.1em; max-width: var(--measure); }
/* A heading and the paragraph under it are a pair, and the pair needs air. */
h1 + p, h2 + p, h3 + p, h1 + .lede, h2 + .lede, h3 + .lede,
h1 + .meta, h2 + .meta, h3 + .meta { margin-top: .7em; }
.head-block h2 + .lede { margin-top: .85em; }

.wrap { width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 68ch; }
.lede { font-size: clamp(1.1rem, 1.7vw, 1.32rem); color: var(--ink-soft); }
.eyebrow {
  display: inline-block; margin: 0 0 1.1em;
  font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--terracotta) 38%, var(--white));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 999px; padding: .45em .9em;
}
.band-dark .eyebrow, .closer .eyebrow {
  color: var(--clay); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2);
}
.band-terracotta .eyebrow { background: var(--white); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.band-clay .eyebrow  { background: var(--white); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.skip { position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:.7em 1.1em; z-index:100; }
.skip:focus { left:0; }

/* ------------------------------------------------------------ demo banner */
.banner {
  background: var(--dark); color: var(--on-dark);
  font-size: .82rem; line-height: 1.5; text-align: center;
  padding: .6em var(--gut);
}
.banner b { color: #fff; }
.banner a { color: #e8a77c; }

/* ------------------------------------------------------------- THE TILE */
.tile {
  position: relative; border-radius: 2px 2px 8px 8px;
  background: linear-gradient(to bottom,
    var(--brk) 0%, var(--brk) 7%, var(--body) 26%, var(--body) 78%,
    color-mix(in srgb, var(--body) 84%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.12);
  overflow: hidden;
  filter: saturate(.74) contrast(.95);
  transition: filter var(--t-slow) var(--ease-soft);
}
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(104deg, transparent 28%, rgba(255,255,255,.45) 46%, transparent 64%);
  transform: translateX(-130%); pointer-events: none;
}
.reveal.fired .tile, .fired > .tile { filter: saturate(1) contrast(1); }
.reveal.fired .tile::after { transform: translateX(130%); transition: transform 1100ms var(--ease-soft); }

/* The signature, as an accent: a thin fired strip of every glaze. */
.strip { display: flex; height: 7px; border-radius: 2px; overflow: hidden; }
.strip .tile { flex: 1; border-radius: 0; }
.strip-wide { height: 12px; }

/* Section divider: a kiln shelf edge, not a hairline. */
.shelf {
  height: 8px; border: 0; margin: 0;
  background: repeating-linear-gradient(90deg,
    var(--rule) 0 3px, color-mix(in srgb, var(--rule) 88%, #000) 3px 4px), var(--rule);
}

/* ------------------------------------------------------------ reveal */
/* Scoped to .js, which an inline script in the head sets. Without it every
   .reveal stays plainly visible. Content that is invisible until JavaScript
   says otherwise is content that disappears when JavaScript fails. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.fired {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
[style*="--i"] { transition-delay: calc(var(--i, 0) * 80ms); }
.strip .tile, .strip .tile::after { transition-delay: calc(var(--i, 0) * 45ms); }

/* ------------------------------------------------------------------ header */
.site-head {
  position: sticky; top: 0; z-index: 40;
  /* the mobile panel hangs off this */
  --anchor: 1;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.head-in { display: flex; align-items: center; gap: .85rem; min-height: 86px;
  /* Padding rather than height alone, so the sign and the town scene get the
     same air above and below them as the plain wordmarks do. */
  padding-block: clamp(.7rem, 1.4vw, 1.15rem);
  /* And sit the brand where the hero copy starts, rather than where the 1240
     wrap would put it.
     The hero text is a 44rem block pushed to the right of a 1.02fr column, so
     its content begins at max(0, 51vw - 44rem) + gut. Rather than padding the
     wrap inwards, which cannot go below zero and so drifted a few pixels in
     the 1400 to 1700 band, the wrap's own auto-centring is replaced with that
     exact left margin. The gutter then lands the brand on the hero's edge at
     every width. */
  margin-left: max(0px, calc(51vw - 704px)); margin-right: auto;
  flex-wrap: wrap; position: relative; }
.mark { display: flex; align-items: center; gap: .6rem; text-decoration: none; padding: .2em 0; }
.mark-img {
  width: clamp(52px, 5.2vw, 68px); height: auto; flex: none;
  object-fit: contain;
}
.mark b { font-family: Fraunces, Georgia, serif; font-size: clamp(1.1rem, 1.3vw, 1.24rem); font-weight: 600; letter-spacing: -.012em; line-height: 1.1; }
/* The nav PUSHES ITSELF RIGHT. It used to be pushed there by a margin-right
   of auto on the "Change logo" button, which sat between the mark and the nav.
   That button was a build tool, and when it came off the public site on
   2026-09-28 the nav quietly slid left with it. Alignment should not depend on
   whether a dev affordance happens to be rendered. */
.nav {
  display: flex; gap: clamp(.6rem, 1.8vw, 1.6rem); flex-wrap: wrap;
  align-items: center; margin-left: auto;
}
.nav a {
  text-decoration: none; font-size: .93rem; color: var(--ink-soft);
  padding: .3em 0; position: relative; white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out);
}
.nav a::after {
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background: var(--accent); transition: right var(--t-mid) var(--ease-out);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav .btn { padding: .55em 1em; font-size: .88rem; }
.nav .btn::after { display: none; }

/* ------------------------------------------------------------ mobile nav */
/* A hamburger, always, below 860px. Six links wrapping onto two lines under
   the wordmark is the thing this replaces. Pure CSS: a hidden checkbox drives
   it, so it works with JavaScript off. */
/* Focusable, so the keyboard can reach it, but invisible and out of flow.
   The hidden attribute, or display:none, takes it out of the tab order and strands the
   entire navigation behind an unopenable button. */
.navtoggle {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  margin: 0; top: 24px; left: 12px;
}
.burger {
  display: none; width: 44px; height: 44px; margin-left: auto;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  cursor: pointer; border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
.burger span {
  display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.navtoggle:focus-visible + .burger { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 860px) {
  .burger { display: flex; }
  .head-in { flex-wrap: nowrap; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 16px 34px rgba(42,33,26,.14);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid);
  }
  .navtoggle:checked ~ .nav {
    max-height: 26rem; visibility: visible;
    transition: max-height var(--t-mid) var(--ease-out), visibility 0s;
  }
  /* 52px rows, comfortably over the 44px tap-target minimum. */
  .nav a {
    padding: 0 var(--gut); min-height: 52px; display: flex; align-items: center;
    border-top: 1px solid var(--rule); font-size: 1rem; white-space: normal;
  }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
  .navtoggle:checked + .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navtoggle:checked + .burger span:nth-child(2) { opacity: 0; }
  .navtoggle:checked + .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* -------------------------------------------------------------- split hero */
/* Their own draft is a split hero and it was the right instinct. Same bones,
   much bigger type, a real claim, and the photo bleeding full height. */
.hero { display: grid; align-items: stretch; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { .hero { grid-template-columns: 1.02fr .98fr; } }
.hero-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.6rem, 6vw, 6rem) var(--gut) clamp(2.6rem, 6vw, 5rem);
  max-width: 44rem; margin-left: auto; width: 100%;
}
@media (min-width: 900px) { .hero-text { padding-right: clamp(2rem, 4vw, 4rem); } }
/* A SHORTER HERO, for pages where the picture is decoration rather than the
   point. The contact hero measured 609px on a 1280x800 laptop and 788px on a
   390x844 phone, which is most of a screen spent on a stock photograph before
   a visitor reaches the form they came for. Driven by .hero-text's padding
   rather than the image, since .hero stretches the media to match the text. */
.hero-compact .hero-text { padding-block: clamp(1.3rem, 2.4vw, 2rem); }
/* align-items:center rather than the default stretch, so the picture is sized
   by this rule instead of being dragged to whatever height the text happens to
   be. Without it the media just mirrors the text column and the hero cannot
   get shorter however much the image rule says. */
.hero-compact { align-items: center; }
.hero-compact .hero-media { min-height: min(20vh, 200px); align-self: stretch; }
.hero-compact .hero-strip { margin-bottom: .8rem; max-width: 200px; }
.hero-compact h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.hero-compact .lede { font-size: clamp(1rem, 1.3vw, 1.1rem); max-width: 38ch; }
.hero-compact .eyebrow { margin-bottom: .7em; }

.hero h1 { margin-bottom: .34em; }
.hero .lede { margin-bottom: 0; }
.hero-strip { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); max-width: 260px; }
.hero-media { position: relative; background: var(--paper-warm); min-height: min(46vh, 420px); }
@media (min-width: 900px) { .hero-media { min-height: min(76vh, 760px); } }
/* The subject of the hero photograph is the hands, and they sit right of
   center. A plain cover on a tall half-width column crops them straight out
   and leaves a houseplant. Bias the crop toward them. */
.hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 62%;
}
/* Placeholder for a photograph that does not exist yet: the glaze strip,
   blown up to fill the frame. Reads as a deliberate panel, not a broken image. */
.ph {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  width: 100%; height: 100%; min-height: 200px; background: var(--paper-warm);
}
.ph .tile { border-radius: 0; height: 100%; }
.hero-media .ph { position: absolute; inset: 0; }
.card .ph { aspect-ratio: 4/3; min-height: 0; }
.split .ph { aspect-ratio: 4/3; border-radius: 4px; overflow: hidden; }

/* -------------------------------------------------------------- fact row */
.facts { display: grid; gap: clamp(1.2rem, 3vw, 2rem); }
@media (min-width: 620px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { border-top: 2px solid var(--ink); padding-top: .9rem; }
.fact b {
  display: block; font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1; letter-spacing: -.03em;
}
.fact b sup { font-size: .46em; vertical-align: super; font-weight: 400; margin-left: .05em; }
.fact span { display: block; font-size: .9rem; color: var(--ink-soft); margin-top: .5em; }

/* ------------------------------------------------------------------ bands */
.band { padding: clamp(3rem, 6.5vw, 6rem) 0; }
.band-warm { background: var(--paper-warm); }
.band-clay { background: var(--clay); }
.band-terracotta { background: var(--terracotta); }
.band-dark { background: var(--dark); color: var(--on-dark); }
.band-dark .lede, .band-dark p { color: var(--on-dark); }
.band-dark h2 { color: #fff; }
.band-dark .btn-ghost { color: var(--on-dark); border-color: #6d6055; }
.band-dark .btn-ghost:hover { background: rgba(255,255,255,.08); }
.head-block { margin-bottom: clamp(1.8rem, 3.4vw, 3rem); }

/* Alternating image + text. */
.split { display: grid; gap: clamp(1.8rem, 4vw, 3.6rem); align-items: center; }
.split-top { align-items: start; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .split.flip > :first-child { order: 2; } }
.split figure { margin: 0; }
.split img { width: 100%; border-radius: 4px; }

/* Full-bleed photograph band. */
.photo-band { position: relative; height: clamp(240px, 38vw, 420px); overflow: hidden; background: var(--paper-deep); }
.photo-band img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ cards */
.cards { display: grid; gap: clamp(1.2rem, 2.4vw, 1.8rem); }
.cards-1 { max-width: 640px; }
@media (min-width: 720px) { .cards-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .cards-3 { grid-template-columns: repeat(3,1fr); } }
.card {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(60,40,20,.13); }
.card > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.card .strip { border-radius: 0; }
.card-body { padding: clamp(1.2rem, 2.4vw, 1.7rem); display: flex; flex-direction: column; flex: 1; }
/* The call to action follows its own text. margin-top:auto was tried first,
   to pin it to the floor of the card, and measured: the button landed at the
   same 695px either way, because the body already fills the card. So the rule
   that did nothing is gone and only the spacing is left. Worth knowing if a
   future event has a much shorter description than the one beside it, which
   is the case where a pin would actually start to matter. */
.card-cta { padding-top: .5rem; }
.card h3 { margin-bottom: .45em; }
.meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1em; padding: 0; list-style: none; }
.meta li {
  font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-soft); background: var(--paper-warm);
  border: 1px solid var(--rule); border-radius: 2px; padding: .25em .6em;
}
.price { font-family: Fraunces, Georgia, serif; font-size: 1.75rem; font-weight: 600; margin: auto 0 .2em; letter-spacing: -.02em; }
.price small { font-size: .8rem; font-family: Inter, sans-serif; color: var(--ink-soft); font-weight: 400; letter-spacing: 0; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font: inherit; font-size: .96rem; font-weight: 500;
  padding: .85em 1.6em; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(60,40,20,.22); }
.btn:active { transform: translateY(0); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(1.4rem, 2.6vw, 2rem); }

/* ---------------------------------------------------- their open house band */
/* Peach on the left, pale blue on the right, and a white card floating across
   the seam. Lifted straight from their own draft, which is the one piece of real
   art direction in it. */
.ohband {
  background: linear-gradient(100deg,
    var(--terracotta) 0%, var(--terracotta) 46%, var(--clay) 46%, var(--clay) 100%);
  padding: clamp(2.6rem, 6vw, 5rem) 0;
}
@media (max-width: 640px) {
  .ohband {
    background: linear-gradient(172deg,
      var(--terracotta) 0%, var(--terracotta) 40%, var(--clay) 40%, var(--clay) 100%);
  }
}
.ohband .oh {
  max-width: 880px; margin-inline: auto;
  box-shadow: 0 18px 50px rgba(33,39,32,.16);
}

/* ------------------------------------------------------------- open house */
.oh {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 4px; overflow: hidden;
}
.oh-in { padding: clamp(1.5rem, 3.4vw, 2.6rem); }
.oh-dates { display: grid; gap: 1rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
@media (min-width: 620px) { .oh-dates { grid-template-columns: 1fr 1fr; } }
.oh-dates li { border-left: 3px solid var(--accent); padding: .35em 0 .35em .9em; }
.oh-dates b { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.15rem; }
.oh-dates span { color: var(--ink-soft); font-size: .95rem; }
/* Their own device: a dark inset box carrying the date, sitting under the
   heading rather than floating as loose text. */
.pill {
  display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-dark); background: var(--dark);
  border-radius: 999px; padding: .55em 1em; margin-bottom: 1.1em;
}
.pill-accent { background: var(--accent); }

/* -------------------------------------------------------------------- faq */
.faq { margin: 0; }
.faq > div { border-top: 1px solid var(--rule); padding: 1.4rem 0; }
.faq > div:last-child { border-bottom: 1px solid var(--rule); }
.faq h3 { font-size: 1.12rem; margin-bottom: .4em; }
.faq p { margin: 0; color: var(--ink-soft); }

/* ------------------------------------------------------------------- forms */
.form { display: grid; gap: 1.1rem; max-width: 34rem; }
label { display: grid; gap: .35em; font-size: .92rem; font-weight: 500; }
input, textarea, select {
  font: inherit; font-size: 1rem; padding: .75em .9em;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--white); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent);
}
/* One visible focus ring for everything that takes focus, on every ground.
   There was no author style at all, so every band fell back to the UA ring. */
a:focus-visible, .btn:focus-visible, button:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}
.band-dark a:focus-visible, .band-dark .btn:focus-visible,
.closer a:focus-visible, .closer .btn:focus-visible,
.site-foot a:focus-visible, .banner a:focus-visible {
  outline-color: var(--terracotta);
}
textarea { min-height: 7.5rem; resize: vertical; }
.note { font-size: .88rem; color: var(--ink-faint); }

/* ------------------------------------------------------------------- tbd */
.tbd {
  display: inline-block; font-size: .7rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  background: repeating-linear-gradient(45deg, #ffdca8 0 7px, #ffcd85 7px 14px);
  color: #5a3a10; border: 1px solid #c9954a; border-radius: 2px;
  padding: .12em .45em; vertical-align: middle;
}

/* ------------------------------------------------------------------ footer */
/* The previous one was 504px tall for a name, an address and one link, and it
   sat the full-color lockup in a white rounded card on the dark ground, which
   read as a sticker rather than branding. This does what the header already
   does and works: the pot mark plus the wordmark set in type, no card. Two
   columns bound by a hairline, then a real bottom bar. */
.site-foot {
  background: var(--dark); color: var(--on-dark);
  padding: clamp(2.4rem, 4vw, 3.2rem) 0 1.4rem;
  font-size: .95rem;
}
.foot-top {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 2rem 3rem;
}

.foot-brand {
  display: flex; align-items: stretch; gap: 1rem;
  text-decoration: none; color: inherit; padding: 0;
}
/* The mark is sized by the text beside it, not by a fixed pixel value.
   An <img> cannot do this alone: stretched, its own intrinsic height still
   sets the flex line, so it inflates to 320px and drags the text with it.
   An empty slot has no intrinsic height, so the TEXT sets the line, stretch
   gives the slot that height, aspect-ratio gives it the width, and the image
   fills it. */
/* The mark is exactly as tall as the text beside it.
   Flexbox cannot do this on its own: however the image is stretched, its own
   intrinsic height still sizes the flex line, so it inflates and drags the
   text with it. So the height is derived from the type instead:
       wordmark   1.3rem x 1.1 line-height x 2 lines = 2.860rem
       tagline    margin-top .35em of .86rem         = 0.301rem
                  .86rem x 1.65 line-height          = 1.419rem
                                                       -----------
                                                       4.580rem
   Measured against the rendered text block: 73px vs 73px.
   Change either type size and this number changes with it. */
.foot-brand { --foot-mark-h: 4.58rem; }
.foot-mark { flex: none; display: flex; align-items: center; }
/* The asset is trimmed to the pot's own bounds, so this height IS the visible
   pot rather than a padded box: the squared version was only 70% pot. */
.foot-mark img { height: var(--foot-mark-h); width: auto; }
.foot-brand > span { display: flex; flex-direction: column; justify-content: center; }
.foot-brand b {
  display: block; font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-size: 1.3rem; line-height: 1.1; letter-spacing: -.012em; color: #fff;
}
.foot-brand em {
  display: block; font-style: normal; margin-top: .35em;
  font-size: .86rem; color: color-mix(in srgb, var(--on-dark) 62%, transparent);
}

.foot-contact { text-align: right; line-height: 1.65; }
.foot-contact address { font-style: normal; margin: 0 0 .15em; }
.foot-hours { margin: .35em 0 0; opacity: .85; }
.foot-contact a { color: var(--on-dark); text-decoration: none; padding: .25em 0; display: inline-block; }
.foot-contact a:hover { color: #fff; text-decoration: underline; }

.foot-bar {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  margin-top: clamp(1.8rem, 3vw, 2.4rem); padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent);
  font-size: .8rem; color: color-mix(in srgb, var(--on-dark) 58%, transparent);
  text-align: center;
}
.foot-bar p { margin: 0; }
.foot-bar .foot-social { display: flex; gap: .6rem; margin: 0; }
/* Charmaine, 30 October: credit the site's maker. Quiet, the same muted gray
   as the copyright line above it. */
.foot-credit a { color: inherit; text-underline-offset: .2em; }
.foot-credit a:hover { color: var(--on-dark); }

/* THE FOOTER CENTERS ON MOBILE, AND ONLY ON MOBILE.
   .foot-top is a two-column row: brandmark hard left, address hard right. That
   is right on a wide screen and wrong on a 390px one, where it put the logo
   against the left edge and the address against the right with a gap between
   them, reading as broken rather than as a layout. The bottom bar was already
   centered, which is why only the middle looked off.
   Kept to 40rem so it never touches the desktop arrangement, and so it
   matches the Next Up band directly below it. */
@media (max-width: 40rem) {
  .foot-top {
    flex-direction: column; align-items: center; text-align: center;
    gap: 1.4rem;
  }
  .foot-contact { text-align: center; flex: 0 1 auto; }
  .foot-top .mark, .foot-brandmark { margin-left: auto; margin-right: auto; }
  .site-foot .foot-top a { justify-content: center; }
}
.foot-social a {
  color: color-mix(in srgb, var(--on-dark) 72%, transparent);
  text-decoration: none;
  /* 44px target around a 20px glyph, so the icon does not shrink the hit area. */
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -.5rem 0; border-radius: 999px;
}
.foot-social a svg { width: 20px; height: 20px; display: block; }
.foot-social a:hover { color: #fff; }

/* Mobile: the brand keeps the left gutter, the contact keeps the right, the
   same relationship the header has between the logo and the menu button. */
@media (max-width: 639px) {
  .foot-top { gap: 1.8rem; }
  /* Mobile only: the full tagline wrapped after "Shop". */
  .shop-local { display: none; }
  .foot-brand { flex: 1 1 100%; }
  .foot-contact { flex: 1 1 100%; }
}

/* =========================================================== components ===
   The vocabulary grandadventure08.com uses, in this studio's palette: eyebrow
   micro-labels, stat tiles with units, icon cards, a card navigator that
   routes people deeper, pull quotes, and a closing statement. */

/* One word of the headline in accent. Used once per page, never twice. */
.hi { color: var(--accent); font-style: italic; font-family: Fraunces, Georgia, serif; }
/* On the dark bands the terracotta accent drops to 2.39:1, which is below the
   3:1 large-text floor. Fired terracotta clears it at 4.98:1. */
.band-dark .hi, .closer .hi, .band-dark h1 em, .band-dark h2 em,
.closer h1 em, .closer h2 em { color: var(--terracotta); }

/* Fact strip: the dark bar of checked facts directly under the hero. */
.factstrip { background: var(--dark); color: var(--on-dark); padding: 1.1rem 0; }
.factstrip ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .7rem 2rem; font-size: .9rem;
}
@media (min-width: 720px) { .factstrip ul { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px) { .factstrip ul { grid-template-columns: repeat(4,1fr); } }
.factstrip li { display: flex; align-items: flex-start; gap: .55em; }
.factstrip svg { width: 15px; height: 15px; flex: none; margin-top: .35em; color: #d98a5c; }

/* Stat tiles: big number, unit, and the label that sources it.
   The unit ran INTO the number: "5courses", "3Wednesdays", "$25to $250", on
   the live home page. margin-left was .1em of the UNIT's own size, and the
   unit is .45em of the number, so .1em resolved to under 2px. Measured at
   1280: the digit ended at x=126 and the word began at x=128. The number's
   own letter-spacing of -.03em then ate most of even that.
   The fix is a real space character in the markup, in components.js, because
   a CSS margin is invisible to anybody copying the text, to a screen reader
   and to a search engine: all three still read "5courses", which is exactly
   what Ben pasted out of the live page. The margin here only trims what the
   big number's negative tracking eats off that space. letter-spacing is reset
   to normal on the unit so tracking meant for numerals does not follow the
   word along. Gap verified by measuring it, not by looking. */
.stats { display: grid; gap: clamp(.9rem, 1.8vw, 1.3rem); }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 960px) { .stats { grid-template-columns: repeat(4,1fr); } }
/* Brought into the card family the rest of the site now uses: 14px radius and
   the two-layer warm shadow, the same as .firing > li, .glazes > li and the
   Next Up card. These were left at a 4px radius with no shadow and had become
   the only flat boxes on the site. */
.stat {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 14px; padding: 1.3rem 1.35rem 1.4rem;
  box-shadow: 0 1px 2px rgba(60, 40, 20, .05),
              0 10px 24px rgba(60, 40, 20, .07);
}
.stat b {
  display: block; font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -.03em;
}
.stat b i {
  font-style: normal; font-size: .45em; color: var(--ink-soft);
  margin-left: .06em; letter-spacing: normal;
}
.stat span {
  display: block; font-size: .88rem; color: var(--ink-soft);
  margin-top: .75em; line-height: 1.5;
}

/* A BAND HOLDING ONE SHORT ROW DOES NOT NEED A FULL BAND'S PADDING. .band is
   clamp(3rem, 6.5vw, 6rem), which put 83px of empty page above and below a
   129px row of tiles, measured: a 295px section that was 56% air with nothing
   in it. These tiles are a caption on the hero above them, not a section of
   their own, so they sit closer to it. */
.band-tight { padding-block: clamp(1.6rem, 3vw, 2.6rem); }

/* Ways in: the card navigator. Thumbnail, title, one line, an arrow link. */
.waysin { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
/* Four cards, so the grid is 1, 2 or 4 and never leaves one stranded. */
@media (min-width: 560px)  { .waysin { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .waysin { grid-template-columns: repeat(4, 1fr); } }
.way {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 4px; overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.way:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(60,40,20,.14); }
.way img, .way .ph { aspect-ratio: 5/3; object-fit: cover; width: 100%; min-height: 0; }
.way-b { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.way h3 { font-size: 1.05rem; margin-bottom: .35em; }
.way p { font-size: .88rem; color: var(--ink-soft); margin: 0 0 1em; }
.way em {
  margin-top: auto; font-style: normal; font-size: .84rem; font-weight: 600;
  color: var(--accent); display: inline-flex; align-items: center; gap: .4em;
}
.way:hover em span { transform: translateX(3px); }
.way em span { transition: transform var(--t-fast) var(--ease-out); }

/* Icon cards: the "four things" pattern. */
.icons { display: grid; gap: clamp(1rem, 2vw, 1.4rem); align-items: stretch; }
@media (min-width: 620px) { .icons { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .icons { grid-template-columns: repeat(4,1fr); } }
.ic {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 4px; padding: 1.3rem 1.3rem 1.4rem;
}
.ic-mark {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--paper-warm); border: 1px solid var(--rule); color: var(--accent);
}
.ic-mark svg { width: 20px; height: 20px; }
.ic h3 { font-size: 1.05rem; margin-bottom: .45em; min-height: 2.44em; }
.ic p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.band-dark .ic { background: #3a3129; border-color: #4d4237; }
.band-dark .ic h3 { color: #fff; }
.band-dark .ic p { color: var(--on-dark); }
.band-dark .ic-mark { background: #201b16; border-color: #3a322a; color: #e8a77c; }

/* Pull quote. The studio's own words, never an invented testimonial. */
.quote { position: relative; padding-top: 2.2rem; }
.quote::before {
  content: "\201C"; position: absolute; top: -.35em; left: -.06em;
  font-family: Fraunces, Georgia, serif; font-size: 6rem; line-height: 1;
  color: var(--accent); opacity: .22;
}
.quote p {
  font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.4; color: var(--ink);
  max-width: none;
}
.quote cite {
  display: block; font-style: normal; font-size: .78rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 1em;
}

/* ============================================ THE FIRING PIPELINE =========
   The signature graphic. Six stages down a vertical track, and the node at
   each stage is a test tile that fires as you scroll past it. The clay goes
   from raw through bisque to finished glaze in the tiles themselves, so the
   motif IS the explanation. */
/* THE SIX STAGES, ACROSS RATHER THAN DOWN.
   auto-fit with a 15rem floor, so it lays out three across at the site's
   content width, two on a tablet and one on a phone, and the steps always read
   left to right before they read downwards. A flat six across was tried and
   rejected: it leaves about 160px a column, and the body copy is three
   sentences, which comes out roughly twenty characters a line. */
.firing {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.4rem, 3vw, 2.2rem);
  /* EXPLICIT COUNTS, NOT auto-fit. There are exactly six stages, and six
     divides evenly by one, two and three but never by four. auto-fit gave four
     across on a laptop, which left the last two stranded on a row of their
     own. These three breakpoints always produce full rows. */
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .firing { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .firing { grid-template-columns: repeat(3, 1fr); } }

/* Each step on its own card, in the same family as .doing li: white, a hairline
   rule, 14px radius. The shadow is two layers rather than one, a tight contact
   shadow plus a wide soft one, which is what stops it reading as a gray smudge
   under the box. Warm browns to match every other shadow on the site, never
   neutral black. */
.firing > li {
  display: flex; flex-direction: column; gap: .75rem;
  align-items: center; text-align: center;
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 14px; padding: 1.3rem 1.3rem 1.45rem;
  box-shadow: 0 1px 2px rgba(60, 40, 20, .05),
              0 10px 24px rgba(60, 40, 20, .07);
}
/* The body copy keeps a measure of its own. Centered text that runs the full
   width of the card gives every line a different start AND a different end,
   which is what makes centred paragraphs hard to read; holding it to about 34
   characters keeps the ragged edges close together. */
.firing-body p { max-width: 34ch; margin-inline: auto; }

/* MOBILE ONLY, below the two-column breakpoint. One card per row is wide and
   short, so the illustration moves beside the words instead of above them:
   less scrolling, and the number and title land on the same line as the icon.
   Desktop is untouched, which is the point. */
/* MOBILE MATCHES DESKTOP NOW. It used to put the illustration beside the words
   in a row, which saved scrolling on a phone. That cannot be centred: a row
   leaves the icon hard left while the text centers in whatever space is left,
   which reads as neither aligned nor centred. One column, centred, the same
   shape as every other width. */
@media (max-width: 33.999rem) {
  .firing-art { width: 96px; }
  .firing-body { min-width: 0; }
}

/* A LARGE ICON, not a photograph. At full column width these read as six big
   pictures and the section became a gallery; the point is the sequence, and
   the words carry that. Sized so the illustration is still legible at a
   glance and the six steps stay close enough together to scan as one run. */
.firing-art {
  position: relative; margin: 0; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--rule); background: var(--white);
  aspect-ratio: 1 / 1;
  width: clamp(88px, 11vw, 124px);
}
.firing-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The step number, over the corner of its own picture. */
.firing-n {
  position: absolute; top: .35rem; left: .35rem; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  font-size: .74rem; font-weight: 700; line-height: 1;
  box-shadow: 0 1px 6px rgba(42, 33, 26, .35);
}

.firing-body h3 { margin: 0 0 .15em; font-size: 1.08rem; }
.firing-when {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-deep, var(--accent));
  margin: 0 0 .5em;
}
.firing-body p:last-child {
  margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.6;
}

/* ------------------------------------------------------------ glaze library */
/* EIGHT GLAZES, FOUR ACROSS, TWO FULL ROWS. Same card family as .firing
   above it, on purpose: a reader who has just scrolled past six stages as
   cards reads a second grid of cards as the same kind of thing. Explicit
   counts again, never auto-fit. Eight divides by one, two and four and never
   by three, so these three breakpoints always produce full rows, and the 3
   that auto-fit would have chosen on a laptop would strand two on their own.
   The 34rem and 62rem breakpoints are the ones .firing already uses. */
.glazes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem);
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .glazes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .glazes { grid-template-columns: repeat(4, 1fr); } }

/* The "these are not ours" note that sits ABOVE the glaze tiles.
   Deliberately loud enough to be read by somebody skimming: a footnote under
   eight named glazes on a pottery studio's website does not get read, and the
   whole point of this line is that nobody mistakes the list for their stock. */
.standin {
  /* Was constrained by .wrap.narrow until the glaze wall went four across and
     the section moved to the full wrap. Prose needs a measure of its own. */
  max-width: 46rem;
  margin: 0 0 1.6rem; padding: .9em 1.1em;
  background: var(--paper-warm); border: 1px solid var(--rule);
  border-left: 3px solid var(--accent); border-radius: 10px;
  font-size: .94rem; line-height: 1.6; color: var(--ink-soft);
}
.standin strong { color: var(--ink); }

/* What is happening at the Open House. Same grid the glaze wall used, which is
   otherwise unused now that the invented glazes are gone. */
.doing {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.doing li {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 14px; padding: 1.1rem 1.2rem;
}
.doing h3 { margin: 0 0 .3em; font-size: 1.02rem; }
.doing p { margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.55; }
/* The card itself, matching .firing > li exactly: white on the warm page, a
   hairline rule, 14px radius, and the same two-layer warm-brown shadow. The
   hairline rules that used to separate stacked rows are gone with the stack,
   and so is the 720px override that silently kept the photograph at the old
   swatch's 92px. */
.glazes > li {
  display: flex; flex-direction: column; gap: .8rem;
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 14px; padding: 1rem 1.05rem 1.15rem;
  box-shadow: 0 1px 2px rgba(60, 40, 20, .05),
              0 10px 24px rgba(60, 40, 20, .07);
}

/* A PHOTOGRAPH OF A POT, NOT A RECTANGLE OF ONE HEX VALUE. The notes beside
   these describe behavior on a surface: celadon pooling in a throwing ring,
   tenmoku breaking rust on a rim, shino's carbon pinholes. A flat swatch shows
   none of that, so the .glazes .tile rules that used to size one are gone.
   .tile itself stays: components.js still uses it, and the header strip is
   built from them.
   Full card width here rather than .firing's fixed icon size, because on that
   section the drawing is a label for the words and here the photograph IS the
   content: it is the only thing on the page that shows what a glaze does. */
.glaze-art {
  margin: 0; overflow: hidden; border-radius: 10px;
  border: 1px solid var(--rule); background: var(--paper-warm);
  width: 100%; aspect-ratio: 1 / 1;
}
.glaze-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* MOBILE ONLY, below the two-column breakpoint, same move .firing makes: one
   card per row is wide and short, so the pot sits beside its description
   rather than above it. Eight full-width squares stacked would be most of a
   phone screen each. Desktop is untouched. */
@media (max-width: 33.999rem) {
  .glazes > li { flex-direction: row; align-items: flex-start; gap: .95rem; }
  .glaze-art { flex: none; width: 96px; }
  .glazes > li > div { min-width: 0; }
}

.glazes h3 { margin: 0 0 .3em; font-size: 1.02rem; }
.glazes p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }

/* ------------------------------------------------------------------ closer */
.closer { background: var(--dark); color: var(--on-dark); padding: clamp(3rem,7vw,6rem) 0; text-align: center; }
.closer h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.closer p { color: var(--on-dark); max-width: 52ch; margin-inline: auto; }
.closer .btns { justify-content: center; }
.closer .strip { max-width: 300px; margin: 0 auto clamp(1.6rem,3vw,2.2rem); }

/* Drop cap, once per long page. */
/* ============================================================== story ===
   THE ABOUT PAGE'S OPENING, which was a headless slab.
   Three things were wrong with it and only one was the paragraph length.

   1. THE MEASURE WAS SET IN THE WRONG FONT SIZE. It sat in .wrap.narrow,
      whose max-width is 68ch, and ch resolves against the element's OWN
      font-size. .narrow is on the wrap, which inherits the 17px body size, so
      68ch is about 578px. The paragraph inside is .lede at 21px, and 578px of
      21px text is about 45 characters a line, measured. Comfortable prose is
      60 to 75. Every paragraph on this page carried a measure a third too
      narrow for the type it was actually set in, which is what turned ninety
      words into ten stacked lines.

      The fix is to put max-width on the PARAGRAPH, where ch finally means the
      characters a reader sees.

   2. NO HIERARCHY. Both paragraphs were .lede, so nothing led anything.

   3. NOTHING TO LOOK AT. A headless block of prose directly under the hero,
      in a page whose every other section has an eyebrow and a heading. It now
      has a side rail carrying the label and the glaze strip, which is the
      page's own motif rather than a new invention. */
.story { display: grid; gap: clamp(1.4rem, 3.5vw, 2.2rem); align-items: start; }
@media (min-width: 62rem) {
  .story { grid-template-columns: 13rem 1fr; gap: clamp(2.5rem, 6vw, 5rem); }
}
/* NOT STICKY. It was, and it was measured drifting 457px down a section only
   613px tall, so a reader scrolling past watched the label slide away from the
   paragraph it labels. Sticky earns its keep beside a long article; beside
   three paragraphs it is just movement. */
.story-side .strip { max-width: 11rem; }
.story-side .eyebrow { margin-bottom: 1rem; }

/* THE MEASURE. One width for every paragraph, in rem rather than ch.
   ch is per-paragraph correct and was tried first, but it resolves against
   each paragraph's OWN font size, so the 21px lede got a 743px box and the
   16px body got 576px: a 167px step down the right-hand edge that read as a
   mistake rather than as emphasis. One rem measure puts every right edge on
   the same line, and larger type simply takes fewer characters in that width,
   which is what a lead paragraph wants anyway.
   44rem was picked by sweeping 38 to 48 and reading the result: it gives 56
   characters a line for the lede and 73 for the body, both inside the 55 to
   75 that reads comfortably. 38rem was tried and abandoned at 49 and 63, the
   lede being back near the 45 that made this section look bad in the first
   place. */
.story-main > p { max-width: 44rem; }
.story-main > p + p { margin-top: 1.05em; }
.story-main > .lede { margin-bottom: 1.05em; }
/* The body paragraphs step down from the lede so the opening actually leads. */
.story-main > p:not(.lede) { font-size: 1.02rem; line-height: 1.75; color: var(--ink-soft); }
/* Their closing sentence, given a little weight and a rule, because it is the
   sentence that says what the place is for. */
.story-end {
  border-left: 3px solid var(--accent);
  padding-left: clamp(.9rem, 2vw, 1.3rem);
  margin-top: 1.6rem !important;
  color: var(--ink) !important;
}
.story-main .btns { margin-top: clamp(1.6rem, 3vw, 2.2rem); }

.dropcap::first-letter {
  float: left; font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-size: 3.5em; line-height: .82; padding: .05em .09em 0 0; color: var(--accent);
}


/* ============================================================== booking === */
.slots { display: grid; gap: .6rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
@media (min-width: 640px) { .slots { grid-template-columns: 1fr 1fr; } }
.slot { display: block; position: relative; }
.slot input { position: absolute; opacity: 0; width: 0; height: 0; }
.slot span {
  display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--white); padding: .75em .9em; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.slot span b { font-weight: 600; }
.slot span i { font-style: normal; font-size: .84rem; color: var(--ink-soft); margin-left: auto; }
.slot input:checked + span {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.slot input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.slot input:disabled + span { opacity: .5; cursor: not-allowed; background: var(--paper); }
.slot .full { color: var(--accent); font-weight: 600; }

.bookbox {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 4px; overflow: hidden;
}
.bookbox-in { padding: clamp(1.3rem, 3vw, 2.2rem); }
.bookbox h3 { margin-bottom: .2em; }
.row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .row-2 { grid-template-columns: 1fr 1fr; } }
.err {
  background: #fbe9e2; border: 1px solid var(--accent); color: var(--accent-deep);
  border-radius: 10px; padding: .8em 1em; margin: 0 0 1.2rem; font-size: .95rem;
}
.ref {
  font-family: Fraunces, Georgia, serif; font-size: clamp(1.8rem,4vw,2.6rem);
  letter-spacing: .02em; color: var(--accent); margin: 0;
}

/* ------------------------------------------------------------ admin/review */
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th, .tbl td { text-align: left; padding: .65em .7em; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl th { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.tbl tr:last-child td { border-bottom: 0; }
.wrapx { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.rev { list-style: none; margin: 0; padding: 0; }
.rev > li { border-top: 1px solid var(--rule); padding: 1.3rem 0; }
.rev > li:last-child { border-bottom: 1px solid var(--rule); }
.rev h3 { font-size: 1.05rem; margin-bottom: .3em; }
.rev .area {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; display: block; margin-bottom: .35em;
}
.rev .chose { margin: 0 0 .5em; }
.rev .chose b { font-weight: 600; }
.rev .why { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.rev .gap { border-left: 3px solid var(--accent); padding-left: 1rem; }

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .reveal, .reveal { opacity: 1; transform: none; }
  .tile { filter: none; }
  .tile::after { display: none; }
}
/* ------------------------------------------------- the logo picker ------ */
/* Width-led, not height-led.
   Sizing them all to one HEIGHT sounds right and is wrong: these are not six
   wordmarks, they are six pieces of artwork with a wordmark somewhere inside.
   The hanging sign carries a bracket and an awning, the lamp-post one carries
   a lamp post, the town one carries a skyline. Squeeze the whole artwork into
   54px and the actual word Wellsburg ends up half the size it is on the plain
   ones, which is why four, five and six looked tiny.
   A common WIDTH makes the word itself read at about the same size across all
   six, and the taller pieces are simply taller, which is what they are. */
/* Fit inside a box rather than setting a width and capping the height.
   With a fixed width, max-height cannot shrink the mark: the box stays the
   full width and object-fit just letterboxes the artwork inside it, so the
   near-square v3 drove the header to 177px against 93px for the widest
   wordmark. Width and height both auto, bounded on both axes, makes the
   browser scale the image down to fit and shrink the box with it, which is
   what a cap is supposed to do.
   The height bound is deliberately loose. It is a ceiling, not a uniform:
   the short wordmarks still come in under it and leave the header at its
   86px minimum, and only the tall illustrated marks are held back. */
.head-brandmark { width: auto; height: auto;
  max-width: clamp(132px, 14.5vw, 194px);
  max-height: clamp(60px, 6.4vw, 84px);
  object-fit: contain; object-position: left center;
  display: block; }
.foot-brandmark { width: auto; height: auto;
  max-width: clamp(150px, 17vw, 214px);
  max-height: clamp(66px, 7vw, 92px);
  object-fit: contain; object-position: left center;
  display: block;
  /* A shadow that sits UNDER the mark, not a light halo around it.
     The two cream drop-shadows that used to be here were added when the
     knockout still left a cream fringe, and they made the same mistake the
     fringe did: a pale glow all the way round every stroke. Side by side on
     the brown band at 2x it reads as a milky haze, and on the town scene it
     turned ART STUDIO into a blur. With the knockout doing its job the halo
     has nothing left to hide, so this is a plain offset shadow for
     definition instead. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }

/* A CARD, NOT A FULL-BLEED BAR. It was a warm strip running edge to edge
   between the dark closer and the dark footer, which read as a third band
   rather than as one last thing worth noticing. As a card on the page
   background it is an object, and it is the same object as the firing stages
   and the glaze wall: same hairline rule, same radius. The fill stays
   --paper-warm, so nothing about the color changed, only its edges.
   The two-layer shadow is kept but no longer does any work: rgba(60,40,20) at
   7% over a #2a211a section is imperceptible, so the hairline rule is what
   separates the card from the dark now. It stays because it costs nothing and
   is correct again the moment this section is not dark.
   The section carries the breathing room; the card carries the surface.

   THE SECTION IS var(--dark), THE SAME FILL AS .site-foot BELOW IT, so the
   two meet with no seam and the card reads as floating in the dark block
   rather than sitting on a light strip wedged above it. Same token, not a
   matching hex: a literal here would drift the day --dark is retuned and
   leave a visible line across the bottom of every page. Nothing but the card
   sits in this section, so there is no text to check for contrast. */
.nextup { background: var(--dark); padding-block: clamp(1.8rem, 4vw, 3rem); }
.nextup-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap;
  background: var(--paper-warm);
  border: 1px solid var(--rule); border-radius: 16px;
  padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.3rem, 3.5vw, 2.4rem);
  box-shadow: 0 1px 2px rgba(60, 40, 20, .05),
              0 10px 24px rgba(60, 40, 20, .07);
}
.nextup-k {
  font-size: .72rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent-deep); margin: 0 0 .4em;
}
.nextup-t { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0; }
.nextup-s { color: var(--ink-soft); margin: .4em 0 0; }
.nextup-r { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.nextup-d { font-weight: 600; margin: 0; }
/* THE NEXT UP BAND CENTERS ON MOBILE TOO.
   It is a two-column strip: title and subtitle left, date and button right.
   Stacked on a phone it kept both halves left-aligned, so it read as two
   leftovers rather than one closing band, directly under a footer that is
   centered. Everything centers, and the button gets a real tap target instead
   of hugging its text. */
@media (max-width: 40rem) {
  .nextup-in {
    flex-direction: column; align-items: center; text-align: center;
    gap: 1.1rem;
  }
  .nextup-r {
    width: 100%; flex-direction: column; align-items: center; gap: .9rem;
  }
  .nextup-r .btn { width: 100%; max-width: 20rem; justify-content: center; } }

/* The extra bottom padding that used to be here is gone with the reason for
   it. While the band was the last thing on the document, its button had 25px
   to the bottom edge and read as cut off, so the padding was widened to 47px.
   The band sits above the footer now, so the dark block does that job and the
   widened padding would only be a gap between the two. Symmetric padding-block
   again. */

/* The class inquiry form. Replaced the booking form when the studio said
   they were not ready to take payment. */
.askform { display:grid; gap:.15rem; text-align:left; }
.askform label { font-weight:600; font-size:.93rem; margin-top:1rem; }
.askform input[type=text], .askform input[type=email], .askform input[type=tel],
.askform input:not([type]), .askform select, .askform textarea {
  width:100%; padding:.7em .85em; font:inherit; color:inherit; line-height:1.5;
  background:#fff; border:1px solid var(--rule); border-radius:10px;
}
.askform textarea { resize:vertical; }
.askform .two { display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
.askform .check {
  display:flex; gap:.7rem; align-items:flex-start; margin-top:1.3rem;
  font-weight:400; font-size:.92rem; color:var(--ink-soft); line-height:1.5;
}
.askform .check input { margin-top:.25em; flex:none; width:18px; height:18px; }
.askform button { margin-top:1.3rem; justify-self:start; }
.askform .note { font-size:.86rem; color:var(--ink-faint); margin-top:.7rem; }
.formerr {
  background:#fdf1ee; border:1px solid #e6bdb4; color:#a3301f;
  border-radius:10px; padding:.8em 1em; margin:0 0 1rem;
}
/* ================================================== contact panes ===
   THE PAGE'S REAL PROBLEM WAS NOT THE HEADER, IT WAS THE EMPTY HALF.
   A .split put the form in one column and three lines of address in the other,
   both on the page background with no container. The form runs about 560px
   tall and the address about 150px, so the right half of the page was roughly
   500px of nothing, and because neither side had edges that gap read as
   something broken rather than as deliberate space.

   Two panes with their own surface fix it: unequal heights look intentional
   when each side is visibly a thing. Same card language as the firing stages,
   the glaze wall and the Next Up band. The columns are 1.45fr to 1fr rather
   than even, because a form needs the room and an address does not. */
.contact-grid { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); }
@media (min-width: 60rem) {
  .contact-grid { grid-template-columns: 1.45fr 1fr; align-items: start; }
}
.pane {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 14px; padding: clamp(1.3rem, 2.6vw, 2rem);
  box-shadow: 0 1px 2px rgba(60, 40, 20, .05),
              0 10px 24px rgba(60, 40, 20, .07);
}
/* Was an h2 at full display size over a form, which made "Send a message"
   louder than the page's own title. */
.pane-h { font-size: clamp(1.15rem, 1.9vw, 1.45rem); margin: 0 0 1.1rem; }
.pane-aside { background: var(--paper-warm); }
.pane-line { margin: 0 0 .7em; line-height: 1.6; }
.pane-note {
  margin: 1.3rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: .92rem; line-height: 1.6; color: var(--ink-soft);
}

/* The receipt after a send: its own band under the header, not a banner buried
   below the form and not folded into the header. */
.receipt {
  background: #eff7f2; border: 1px solid #bcd9c9;
  border-left: 4px solid #5e9c78; border-radius: 14px;
  padding: clamp(1.2rem, 2.4vw, 1.7rem) clamp(1.3rem, 2.6vw, 1.9rem);
}
.receipt h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 0 0 .4em; }
.receipt .lede { margin: 0; font-size: clamp(1rem, 1.3vw, 1.08rem); }
.receipt .eyebrow { margin-bottom: .8em; }
/* In the same band as the panes rather than a band of its own, because two
   bands stacked their paddings and left 113px of nothing between the receipt
   and the form. One band, one gap. */
.receipt { margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }

.sentbox {
  background:#eff7f2; border:1px solid #bcd9c9; border-radius:14px;
  padding:1.5rem 1.6rem; text-align:left;
}
.sentbox h3 { margin:0 0 .5em; }
.sentbox p { margin:0 0 .6em; }
@media (max-width:34rem) { .askform .two { grid-template-columns:1fr; } }

.logo-edit { font: inherit; font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; margin-left: .85rem;
  color: var(--ink-faint); background: none; border: 1px solid var(--rule);
  border-radius: 999px; padding: .34em .8em; align-self: center;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out); }
.logo-edit:hover { color: var(--accent); border-color: var(--accent); }

.logo-modal { border: 0; border-radius: 16px; padding: clamp(1.2rem, 3vw, 2rem);
  width: min(880px, 94vw); background: var(--white); color: var(--ink);
  box-shadow: 0 24px 70px rgba(40, 26, 14, .28); }
.logo-modal::backdrop { background: rgba(42, 33, 26, .45); }
.logo-modal h2 { margin: 0 0 .3rem; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.logo-hint { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: .92rem; }
.logo-close-form { float: right; margin: -.4rem -.4rem 0 0; }
.logo-x { font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
  background: none; border: 0; color: var(--ink-faint); padding: .1em .3em; }
.logo-x:hover { color: var(--ink); }

.logo-grid { display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.logo-opt { display: block; cursor: pointer; border: 2px solid var(--rule);
  text-align: center;
  border-radius: 12px; padding: .7rem; background: var(--paper);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out); }
.logo-opt:hover { border-color: var(--terracotta); }
.logo-opt.on { border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.logo-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.logo-opt input:focus-visible ~ .logo-shot { outline: 2px solid var(--accent);
  outline-offset: 3px; }
/* Every choice sits centred in its card, caption included, so the tiles read
   as a set of equal options rather than a ragged column. */
.logo-shot { display: grid; place-items: center; min-height: 86px; }
.logo-shot img { max-width: 100%; width: auto; height: auto; max-height: 82px; }
.logo-name { display: block; margin-top: .55rem; text-align: center;
  font-size: .8rem; color: var(--ink-soft); }

/* Separates the first round of marks from the revisions that came back. */
.logo-divider { margin: 1.5rem 0 .8rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
  display: flex; align-items: center; gap: .8rem; }
.logo-divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.logo-actions { display: flex; align-items: center; gap: .6rem;
  margin-top: 1.2rem; flex-wrap: wrap; }
.logo-msg { font-size: .85rem; color: var(--ink-soft); }

@media (max-width: 560px) {
  .logo-edit { display: none; }   /* the footer one is enough on a phone */
}