/*
Theme Name: The Kiln Room
Theme URI: https://wpbuild-test-17.dh.87-106-40-45.plesk.page
Author: Dusk Host
Description: Bespoke classic theme for The Kiln Room, an independent pottery studio and cafe in York. Glaze palette, rounded display type, wheel-ring motif. Every front-page string and colour is editable under Appearance → Customize.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kiln-room
*/

/* ── Palette. The six glaze colours are injected from the Customizer. ─── */
:root{
  --kiln-cobalt:#2f5bd8;
  --kiln-celadon:#93d3b8;
  --kiln-yolk:#f7c948;
  --kiln-blush:#ef8aa8;
  --kiln-ink:#2b1f3d;
  --kiln-bg:#f3f1f7;

  --kiln-surface:#fff;
  --kiln-dim:color-mix(in srgb,var(--kiln-ink) 62%,var(--kiln-bg));
  --kiln-rule:color-mix(in srgb,var(--kiln-ink) 14%,transparent);
  --kiln-shadow:color-mix(in srgb,var(--kiln-ink) 22%,transparent);

  --display:ui-rounded,"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --body:"Avenir Next","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --wrap:1120px;
  --r-lg:34px;
  --r-md:22px;
  --r-pill:999px;
}

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

html{background:var(--kiln-bg);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--kiln-bg);
  color:var(--kiln-ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.02;margin:0}
h1{font-size:clamp(2.7rem,7vw,4.5rem)}
h2{font-size:clamp(2rem,4.4vw,3rem);line-height:1.05}
h3{font-size:1.3rem;line-height:1.15}
p{margin:0}
a{color:var(--kiln-cobalt)}
img{max-width:100%}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:clamp(3.5rem,8vw,6rem) 0}
.stack>*+*{margin-top:1rem}

.eyebrow{
  font-family:var(--display);
  font-weight:800;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--kiln-cobalt);
  margin:0 0 .9rem;
}
.lede{font-size:1.15rem;color:var(--kiln-dim);max-width:60ch}
.section-intro{color:var(--kiln-dim);max-width:62ch;margin-top:1rem}

/* A marker-pen highlight, for the accented words in headings. */
.marker{
  background:linear-gradient(var(--kiln-yolk),var(--kiln-yolk)) 0 88%/100% .34em no-repeat;
  padding:0 .08em;
}
.tint{color:var(--kiln-cobalt)}

/* Coil rule — a row of dots, the way a coil pot is built up. */
.coil{
  height:14px;
  margin:0 auto;
  max-width:var(--wrap);
  background-image:radial-gradient(circle at 7px 7px,var(--kiln-rule) 3.5px,transparent 4px);
  background-size:22px 14px;
  background-repeat:repeat-x;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--display);
  font-weight:800;
  font-size:1rem;
  letter-spacing:-.01em;
  padding:.85rem 1.6rem;
  border:2px solid var(--kiln-rule);
  border-radius:var(--r-pill);
  background:var(--kiln-surface);
  color:var(--kiln-ink);
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}
.btn.primary{
  background:var(--kiln-cobalt);
  border-color:var(--kiln-cobalt);
  color:#fff;
  box-shadow:0 16px 30px -16px var(--kiln-cobalt);
}
.btn.primary:hover,.btn.primary:focus-visible{box-shadow:0 20px 34px -14px var(--kiln-cobalt)}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--kiln-cobalt);
  outline-offset:3px;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.site-head{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb,var(--kiln-bg) 86%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--kiln-rule);
}
.nav{
  max-width:var(--wrap);
  margin:0 auto;
  padding:.85rem 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.nav-brand{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  text-decoration:none;
  color:var(--kiln-ink);
}
.mini-mark{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  background:var(--kiln-cobalt);
  color:#fff;
  font-family:var(--display);
  font-weight:800;
  font-size:1.2rem;
  /* Asymmetric radius: pinched by hand, not drawn with a compass. */
  border-radius:58% 42% 47% 53%/47% 55% 45% 53%;
}
.brand-text{font-family:var(--display);font-weight:800;font-size:1.22rem;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.nav-links a{
  color:var(--kiln-ink);
  text-decoration:none;
  font-size:.97rem;
  padding:.5rem .8rem;
  border-radius:var(--r-pill);
  transition:background .18s ease;
}
.nav-links a:hover{background:color-mix(in srgb,var(--kiln-ink) 7%,transparent)}
.nav-links .cta{
  background:var(--kiln-ink);
  color:var(--kiln-bg);
  font-family:var(--display);
  font-weight:800;
  padding:.55rem 1.15rem;
}
.nav-links .cta:hover{background:var(--kiln-cobalt);color:#fff}
.nav-menu{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,5vw,3.5rem);overflow:hidden}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.hero h1{margin-bottom:1.2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.8rem;padding:0;list-style:none}
.chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  background:var(--kiln-surface);
  border:1px solid var(--kiln-rule);
  border-radius:var(--r-pill);
  padding:.4rem 1rem;
  font-size:.92rem;
}
.chip::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--kiln-celadon);
}
.chip:nth-child(2)::before{background:var(--kiln-yolk)}
.chip:nth-child(3)::before{background:var(--kiln-blush)}

/* Signature element: the wheel. */
.wheel-stage{position:relative;display:grid;place-items:center;padding:1.5rem}
.wheel{
  position:relative;
  width:min(100%,430px);
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 34px 60px -30px var(--kiln-shadow),inset 0 0 0 14px var(--kiln-surface);
}
.wheel-glaze{
  position:absolute;
  inset:0;
  background:conic-gradient(from 210deg,
    var(--kiln-celadon),
    var(--kiln-cobalt),
    var(--kiln-blush),
    var(--kiln-yolk),
    var(--kiln-celadon));
  animation:kiln-spin 44s linear infinite;
}
.wheel-rings{
  position:absolute;
  inset:0;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.42) 0 2px,
    transparent 2px 13px);
}
.wheel-shine{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 34% 27%,rgba(255,255,255,.8),rgba(255,255,255,0) 44%),
    radial-gradient(circle at 50% 50%,var(--kiln-ink) 0 5.5%,transparent 6.5%);
}
@keyframes kiln-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.wheel-glaze{animation:none}}

.pebble{position:absolute;border-radius:58% 42% 47% 53%/47% 55% 45% 53%;opacity:.9}
.pebble-1{width:74px;height:74px;background:var(--kiln-yolk);top:2%;right:6%}
.pebble-2{width:52px;height:52px;background:var(--kiln-celadon);bottom:8%;left:1%}
.pebble-3{width:34px;height:34px;background:var(--kiln-blush);bottom:26%;right:2%}

/* ── Facts strip ──────────────────────────────────────────────────────── */
.strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:clamp(2rem,4vw,3rem);
}
.tile{
  background:var(--kiln-surface);
  border-radius:var(--r-md);
  padding:1.35rem 1.5rem;
  box-shadow:0 18px 34px -28px var(--kiln-shadow);
}
.tile b{display:block;font-family:var(--display);font-weight:800;font-size:1.45rem;letter-spacing:-.02em}
.tile span{display:block;color:var(--kiln-dim);font-size:.96rem;margin-top:.2rem}

/* ── What's on ────────────────────────────────────────────────────────── */
.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.25rem;
  margin-top:2.5rem;
}
.card{
  position:relative;
  background:var(--kiln-surface);
  border-radius:var(--r-lg);
  padding:0 1.5rem 1.6rem;
  overflow:hidden;
  box-shadow:0 26px 44px -34px var(--kiln-shadow);
  transition:transform .2s ease;
  --glaze:var(--kiln-celadon);
}
.card:nth-child(2){--glaze:var(--kiln-cobalt)}
.card:nth-child(3){--glaze:var(--kiln-yolk)}
.card:nth-child(4){--glaze:var(--kiln-blush)}
.card:hover{transform:translateY(-4px)}
/* The glaze dip: dipped in the bucket, hung up to dry. */
.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:132px;
  background:var(--glaze);
  border-radius:0 0 50% 50%/0 0 34px 34px;
}
.card .ring{
  position:relative;
  z-index:1;
  width:66px;
  height:66px;
  margin:44px 0 1.1rem;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,var(--kiln-ink) 0 7%,transparent 8%),
    repeating-radial-gradient(circle at 50% 50%,var(--kiln-rule) 0 1.5px,transparent 1.5px 8px),
    var(--kiln-surface);
  box-shadow:0 8px 18px -10px var(--kiln-shadow);
}
.card h3{position:relative;z-index:1;margin-bottom:.55rem}
.card p{color:var(--kiln-dim);font-size:1rem}
.card-meta{
  display:inline-block;
  margin-top:1rem;
  font-family:var(--display);
  font-weight:800;
  font-size:.86rem;
  letter-spacing:.02em;
  background:color-mix(in srgb,var(--glaze) 34%,var(--kiln-surface));
  border-radius:var(--r-pill);
  padding:.35rem .9rem;
}

/* ── Cafe ─────────────────────────────────────────────────────────────── */
.cafe{
  position:relative;
  border-radius:48px;
  overflow:hidden;
  background:color-mix(in srgb,var(--kiln-celadon) 30%,var(--kiln-bg));
  padding:clamp(2.2rem,5vw,3.6rem);
}
/* Ceramic tile checkerboard — the diner half of the collision, in glaze. */
.cafe::before{
  content:"";
  position:absolute;
  inset:0;
  background:conic-gradient(
    color-mix(in srgb,var(--kiln-surface) 78%,transparent) 0 25%,
    transparent 0 50%,
    color-mix(in srgb,var(--kiln-surface) 78%,transparent) 0 75%,
    transparent 0);
  background-size:66px 66px;
  opacity:.5;
}
.cafe>*{position:relative}
.cafe-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.counter{
  list-style:none;
  margin:0;
  padding:1.6rem;
  background:var(--kiln-surface);
  border-radius:var(--r-lg);
  box-shadow:0 26px 44px -34px var(--kiln-shadow);
}
.counter li{display:flex;gap:.75rem;padding:.6rem 0}
.counter li+li{border-top:1px solid var(--kiln-rule)}
.counter li::before{
  content:"";
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:.35rem;
  border-radius:58% 42% 47% 53%/47% 55% 45% 53%;
  background:var(--kiln-yolk);
}
.badge{
  position:absolute;
  top:22px;
  right:26px;
  transform:rotate(-7deg);
  background:var(--kiln-yolk);
  color:var(--kiln-ink);
  font-family:var(--display);
  font-weight:800;
  padding:.6rem 1.15rem;
  border-radius:var(--r-pill);
  box-shadow:0 14px 26px -14px var(--kiln-shadow);
}

/* ── Steps ────────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.step{
  background:var(--kiln-surface);
  border-radius:var(--r-lg);
  padding:1.7rem;
  box-shadow:0 26px 44px -34px var(--kiln-shadow);
}
.step .num{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  margin-bottom:1.1rem;
  background:var(--kiln-cobalt);
  color:#fff;
  font-family:var(--display);
  font-weight:800;
  font-size:1.35rem;
  border-radius:58% 42% 47% 53%/47% 55% 45% 53%;
}
.step:nth-child(2) .num{background:var(--kiln-blush);color:var(--kiln-ink)}
.step:nth-child(3) .num{background:var(--kiln-yolk);color:var(--kiln-ink)}
.step h3{margin-bottom:.5rem}
.step p{color:var(--kiln-dim)}

/* ── Quote band ───────────────────────────────────────────────────────── */
.quote{
  background:var(--kiln-cobalt);
  color:#fff;
  border-radius:48px;
  padding:clamp(2.4rem,6vw,4rem);
  text-align:center;
}
.quote blockquote{
  margin:0;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.6rem,3.6vw,2.5rem);
  line-height:1.12;
  letter-spacing:-.02em;
}
.quote cite{
  display:block;
  margin-top:1.2rem;
  font-style:normal;
  font-size:.95rem;
  opacity:.85;
}

/* ── Visit & contact ──────────────────────────────────────────────────── */
.visit-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.5rem;margin-top:2.5rem}
.panel{
  background:var(--kiln-surface);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2rem);
  box-shadow:0 26px 44px -34px var(--kiln-shadow);
}
.panel dl{margin:0}
.panel dt{
  font-family:var(--display);
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--kiln-cobalt);
  margin-top:1.3rem;
}
.panel dt:first-child{margin-top:0}
.panel dd{margin:.25rem 0 0;font-size:1.05rem}
.panel dd a{text-decoration:none}
.panel dd a:hover{text-decoration:underline}

.field{display:block;margin-top:1rem}
.field:first-of-type{margin-top:0}
.field label{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-size:.86rem;
  margin-bottom:.35rem;
}
.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--body);
  font-size:1rem;
  color:var(--kiln-ink);
  background:var(--kiln-bg);
  border:2px solid var(--kiln-rule);
  border-radius:18px;
  padding:.75rem 1rem;
}
.field textarea{min-height:130px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-row .field{margin-top:1rem}
.form-note{margin-top:1rem;color:var(--kiln-dim);font-size:.93rem}
.honeypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.notice{
  border-radius:var(--r-md);
  padding:.85rem 1.15rem;
  margin-bottom:1.2rem;
  font-size:.97rem;
  background:color-mix(in srgb,var(--kiln-celadon) 45%,var(--kiln-surface));
}
.notice.bad{background:color-mix(in srgb,var(--kiln-blush) 45%,var(--kiln-surface))}
.form-actions{margin-top:1.4rem}

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-foot{
  background:var(--kiln-ink);
  color:color-mix(in srgb,var(--kiln-bg) 88%,var(--kiln-ink));
  margin-top:clamp(3rem,7vw,5rem);
  padding:clamp(2.5rem,6vw,4rem) 0 2rem;
}
.site-foot a{color:inherit;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2rem}
.foot-brand h2{font-size:1.6rem;color:var(--kiln-bg);margin-bottom:.7rem}
.foot-brand p{max-width:42ch;opacity:.82}
.foot-col h3{
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--kiln-yolk);
  margin-bottom:.9rem;
}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{padding:.22rem 0;opacity:.86}
.foot-base{
  margin-top:2.5rem;
  padding-top:1.4rem;
  border-top:1px solid color-mix(in srgb,var(--kiln-bg) 22%,transparent);
  font-size:.9rem;
  opacity:.72;
}

/* ── Interior pages ───────────────────────────────────────────────────── */
.prose{padding:clamp(2.5rem,6vw,4.5rem) 0}
.prose .wrap{max-width:760px}
.prose h1{margin-bottom:1.2rem}
.prose h2{font-size:1.9rem;margin:2.4rem 0 .8rem}
.prose h3{margin:1.8rem 0 .5rem}
.prose p,.prose ul,.prose ol{margin:1rem 0;color:var(--kiln-dim)}
.prose li{margin:.35rem 0}
.prose ul{padding-left:1.2rem}
.prose article{margin-bottom:2.5rem}
.prose .meta{font-size:.9rem;color:var(--kiln-dim);margin:.3rem 0 .6rem}
.prose blockquote{
  margin:1.6rem 0;
  padding:1.2rem 1.5rem;
  background:var(--kiln-surface);
  border-radius:var(--r-md);
  border-left:6px solid var(--kiln-celadon);
}

/* ── Reveal on scroll (only once JS has confirmed it can undo it) ─────── */
.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease;
}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .hero-grid,.cafe-grid,.visit-grid{grid-template-columns:1fr}
  .wheel-stage{order:-1}
  .wheel{width:min(100%,330px)}
  .steps{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .nav{justify-content:center;text-align:center}
  .cards{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .badge{position:static;display:inline-block;transform:none;margin-bottom:1rem}
  .quote,.cafe{border-radius:32px}
}