/* Rainbow Ceramic Studio — palette: clay, glaze, kiln */
:root {
  --c-cream: #F5EEE3;
  --c-paper: #FBF7F1;
  --c-ink: #2B211C;
  --c-terra: #B4502A;
  --c-terra-dark: #8F3B1C;
  --c-cobalt: #2A4D8F;
  --c-celadon: #8DB7A5;
  --c-ochre: #E3A73B;
  --c-plum: #6E3B5C;
  --c-muted: #5E5048;
  --c-line: rgba(43, 33, 28, .14);
  --c-on-ink: #F5EEE3;
  --c-on-ink-muted: #D9CCBD;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6rem;

  --r-sm: 6px; --r-md: 14px; --r-lg: 28px; --r-pill: 999px;
  --r-pot: 42% 42% 30% 30% / 18% 18% 50% 50%;

  --sh-soft: 0 10px 30px -14px rgba(43, 33, 28, .35);
  --sh-tile: inset 0 -6px 0 rgba(0, 0, 0, .12), 0 6px 14px -8px rgba(43, 33, 28, .5);

  --container: 1160px;
  --header-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.65;
  color: var(--c-ink); background: var(--c-paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-terra-dark); text-underline-offset: 3px; }
a:hover { color: var(--c-cobalt); }
:focus-visible { outline: 3px solid var(--c-cobalt); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; margin: 0 0 var(--s-4); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(2.3rem, 9vw, 4.6rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 6vw, 2.8rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 var(--s-4); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-4); }
.skip-link { position: absolute; left: var(--s-4); top: -60px; background: var(--c-ink); color: var(--c-cream); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); z-index: 100; }
.skip-link:focus { top: var(--s-2); }
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-terra-dark); margin-bottom: var(--s-3); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 247, 241, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--c-ink); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--c-terra), var(--c-ochre), var(--c-celadon), var(--c-cobalt), var(--c-plum), var(--c-terra));
  box-shadow: inset 0 0 0 9px var(--c-paper);
}
.brand-text { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1; display: flex; flex-direction: column; }
.brand-text em { font-style: normal; font-family: var(--font-body); font-weight: 500; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); margin-top: 3px; }

.burger { width: 44px; height: 44px; border: 1px solid var(--c-line); background: transparent; border-radius: var(--r-sm); display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; }
.burger span { width: 20px; height: 2px; background: var(--c-ink); transition: transform .25s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--c-paper); border-bottom: 1px solid var(--c-line); box-shadow: var(--sh-soft); transform: translateY(-110%); opacity: 0; visibility: hidden; transition: transform .3s var(--ease), opacity .3s, visibility 0s .3s; }
.site-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; transition: transform .3s var(--ease), opacity .3s; }
.site-nav ul { list-style: none; margin: 0; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); }
.site-nav a { display: block; padding: var(--s-3) var(--s-2); text-decoration: none; color: var(--c-ink); font-weight: 500; }
.site-nav a:hover { color: var(--c-terra-dark); }
.nav-cta { color: var(--c-terra-dark) !important; font-weight: 700 !important; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s-5); border-radius: var(--r-pill); font: 700 1rem/1 var(--font-body); text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform .2s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--c-terra-dark); color: #fff; }
.btn-primary:hover { color: #fff; }
.btn-ghost { border-color: var(--c-ink); color: var(--c-ink); }
.btn-ghost:hover { color: var(--c-ink); }

/* Hero */
.hero { padding: var(--s-7) 0 var(--s-6); background:
  radial-gradient(circle at 85% 20%, rgba(227, 167, 59, .22), transparent 45%),
  radial-gradient(circle at 10% 90%, rgba(141, 183, 165, .25), transparent 40%),
  var(--c-cream); overflow: hidden; }
.hero-grid { display: grid; gap: var(--s-6); align-items: center; }
.glaze-word { display: block; color: var(--c-terra); font-style: italic; font-weight: 600; }
.lead { font-size: 1.1rem; color: var(--c-muted); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

.hero-visual { display: flex; justify-content: center; }
.wheel { position: relative; width: min(78vw, 360px); aspect-ratio: 1 / 1; }
.wheel-disc {
  position: absolute; left: 4%; right: 4%; bottom: 4%; height: 26%; border-radius: 50%;
  background: repeating-radial-gradient(ellipse at center, #9a8c80 0 2px, #b5a798 2px 9px);
  box-shadow: 0 18px 30px -16px rgba(43, 33, 28, .6);
}
.pot {
  position: absolute; left: 22%; right: 22%; bottom: 15%; height: 66%;
  border-radius: var(--r-pot);
  background: linear-gradient(90deg, #8F3B1C 0%, #C4643A 35%, #D9825A 50%, #B4502A 75%, #7d3317 100%);
  overflow: hidden; box-shadow: var(--sh-soft);
}
.pot-rim { position: absolute; top: 0; left: 8%; right: 8%; height: 12%; border-radius: 50%; background: #5a2510; box-shadow: inset 0 3px 0 rgba(255,255,255,.18); }
.pot-band { position: absolute; left: -10%; width: 220%; height: 9%; animation: spin-band 6s linear infinite; }
.band-1 { top: 34%; background: repeating-linear-gradient(90deg, var(--c-cobalt) 0 18px, var(--c-celadon) 18px 36px); }
.band-2 { top: 52%; height: 5%; background: repeating-linear-gradient(90deg, var(--c-ochre) 0 10px, transparent 10px 22px); animation-duration: 4.5s; }
.band-3 { top: 66%; background: repeating-linear-gradient(90deg, var(--c-plum) 0 26px, var(--c-cream) 26px 30px); animation-duration: 7s; }
@keyframes spin-band { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Tiles strip */
.tiles { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.tile { aspect-ratio: 3 / 4; border-radius: var(--r-sm) var(--r-sm) var(--r-md) var(--r-md); box-shadow: var(--sh-tile); position: relative; display: flex; align-items: flex-end; padding: var(--s-2) var(--s-3); transition: transform .3s var(--ease); }
.tile:hover { transform: translateY(-6px) rotate(-1.5deg); }
.tile::before { content: ""; position: absolute; top: 12%; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--c-paper); transform: translateX(-50%); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.tile span { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.t-terra { background: linear-gradient(180deg, #C4643A 55%, #8F3B1C); color: #fff; }
.t-ochre { background: linear-gradient(180deg, #ECBD5F 55%, #C8891F); color: var(--c-ink); }
.t-celadon { background: linear-gradient(180deg, #A8CBBB 55%, #6E9C88); color: var(--c-ink); }
.t-cobalt { background: linear-gradient(180deg, #3C63A8 55%, #1E3A6E); color: #fff; }
.t-plum { background: linear-gradient(180deg, #84506F 55%, #522A43); color: #fff; }
.t-cream { background: linear-gradient(180deg, #EFE3D1 55%, #D5C2A8); color: var(--c-ink); }

/* Sections */
.section { padding: var(--s-8) 0; }
.section-head { max-width: 40rem; margin-bottom: var(--s-6); }
.section-head p:last-child { color: var(--c-muted); }
.section-clay { background: var(--c-cream); }
.section-ink { background: var(--c-ink); color: var(--c-on-ink); }
.section-ink .eyebrow { color: var(--c-ochre); }
.section-ink p, .section-ink dd { color: var(--c-on-ink-muted); }

.cards { display: grid; gap: var(--s-5); }
.card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-soft); }
.card p { color: var(--c-muted); margin: 0; }
.card-art { height: 150px; border-radius: var(--r-md); margin-bottom: var(--s-5); }
.art-vessel { background:
  radial-gradient(ellipse 22% 40% at 30% 60%, var(--c-terra) 98%, transparent),
  radial-gradient(ellipse 16% 30% at 58% 66%, var(--c-cobalt) 98%, transparent),
  radial-gradient(ellipse 12% 22% at 80% 72%, var(--c-ochre) 98%, transparent),
  var(--c-cream); }
.art-brush { background:
  repeating-linear-gradient(115deg, transparent 0 22px, rgba(42, 77, 143, .85) 22px 30px, transparent 30px 52px),
  repeating-linear-gradient(25deg, transparent 0 30px, rgba(227, 167, 59, .8) 30px 36px),
  #F1E6D6; }
.art-hands { background:
  repeating-radial-gradient(circle at 50% 120%, var(--c-celadon) 0 10px, #CFE0D7 10px 20px, var(--c-plum) 20px 23px, #CFE0D7 23px 34px); }

.process { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); counter-reset: step; }
.process li { background: var(--c-paper); border-radius: var(--r-md); padding: var(--s-5); border-left: 6px solid var(--c-terra); }
.process li:nth-child(2) { border-color: var(--c-ochre); }
.process li:nth-child(3) { border-color: var(--c-celadon); }
.process li:nth-child(4) { border-color: var(--c-cobalt); }
.process li:nth-child(5) { border-color: var(--c-plum); }
.process p { margin: 0; color: var(--c-muted); }
.step-no { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--c-terra-dark); line-height: 1; display: block; margin-bottom: var(--s-2); }

.classes-grid { display: grid; gap: var(--s-5); }
.class-list { display: grid; gap: var(--s-3); }
.class-item { padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff; }
.class-item p { margin: 0; color: var(--c-muted); }

.studio-grid { display: grid; gap: var(--s-6); align-items: center; }
.studio-photo { min-height: 260px; border-radius: var(--r-lg); background:
  conic-gradient(from 30deg at 50% 50%, var(--c-terra), var(--c-ochre), var(--c-celadon), var(--c-cobalt), var(--c-plum), var(--c-terra));
  -webkit-mask: repeating-radial-gradient(circle at 50% 50%, #000 0 14px, rgba(0,0,0,.55) 14px 18px);
          mask: repeating-radial-gradient(circle at 50% 50%, #000 0 14px, rgba(0,0,0,.55) 14px 18px); }
.facts { margin: var(--s-5) 0 0; display: grid; gap: var(--s-4); }
.facts dt { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ochre); }
.facts dd { margin: var(--s-1) 0 0; }

.contact-grid { display: grid; gap: var(--s-6); }
.contact-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.contact-list li { display: grid; gap: 2px; overflow-wrap: anywhere; }
.contact-list span { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }

.form { background: var(--c-cream); border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-1); }
.field label { font-weight: 700; font-size: .92rem; }
.field input, .field select, .field textarea { width: 100%; font: inherit; color: var(--c-ink); padding: .8rem var(--s-3); border: 1.5px solid rgba(43, 33, 28, .3); border-radius: var(--r-sm); background: var(--c-paper); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-cobalt); outline: none; box-shadow: 0 0 0 3px rgba(42, 77, 143, .2); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #A3261B; }
.error { margin: 0; min-height: 1.2em; font-size: .85rem; color: #A3261B; }
.form-success { margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: #E1EEE7; color: #1F4D3A; font-weight: 700; }

/* Footer */
.site-footer { background: var(--c-ink); color: var(--c-on-ink); padding: var(--s-7) 0 var(--s-5); }
.site-footer a { color: var(--c-on-ink); }
.site-footer a:hover { color: var(--c-ochre); }
.brand-footer { color: var(--c-on-ink); }
.brand-footer .brand-mark { box-shadow: inset 0 0 0 9px var(--c-ink); }
.brand-footer em { color: var(--c-on-ink-muted); }
.footer-grid { display: grid; gap: var(--s-5); padding-bottom: var(--s-5); }
.footer-grid p { color: var(--c-on-ink-muted); margin-top: var(--s-3); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.legal { border-top: 1px solid rgba(245, 238, 227, .2); padding-top: var(--s-5); font-size: .8125rem; line-height: 1.6; color: var(--c-on-ink-muted); }
.legal p { margin: 0 0 2px; overflow-wrap: anywhere; }
.legal strong { color: var(--c-on-ink); }

/* Legal pages */
.page-hero { background: var(--c-cream); padding: var(--s-7) 0 var(--s-6); }
.page-hero p { color: var(--c-muted); margin: 0; }
.prose { max-width: 46rem; padding-top: var(--s-7); padding-bottom: var(--s-8); }
.prose h2 { font-size: 1.5rem; margin-top: var(--s-6); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: var(--s-2); }

.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: var(--s-8) 0; background: var(--c-cream); }
.notfound .tile-broken { width: 120px; height: 160px; margin: 0 auto var(--s-5); border-radius: var(--r-sm); background: linear-gradient(180deg, #3C63A8 55%, #1E3A6E); clip-path: polygon(0 0, 100% 0, 100% 46%, 70% 52%, 82% 64%, 100% 60%, 100% 100%, 0 100%, 0 58%, 24% 50%, 0 42%); box-shadow: var(--sh-tile); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (min-width: 480px) {
  .container { padding: 0 var(--s-5); }
  .tiles { grid-template-columns: repeat(6, 1fr); }
  .tile:nth-child(even) { transform: translateY(14px); }
  .tile:nth-child(even):hover { transform: translateY(8px) rotate(1.5deg); }
}

@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .process { grid-template-columns: repeat(5, 1fr); }
  .class-list { grid-template-columns: 1fr 1fr; }
  .studio-grid { grid-template-columns: 1fr 1.1fr; }
  .studio-photo { min-height: 380px; }
  .contact-grid { grid-template-columns: 1fr 1.1fr; }
  .form { padding: var(--s-6); }
  .footer-grid { grid-template-columns: 2fr 1fr; }
}

@media (min-width: 1024px) {
  :root { --header-h: 76px; }
  .burger { display: none; }
  .site-nav { position: static; transform: none; opacity: 1; visibility: visible; background: none; border: 0; box-shadow: none; }
  .site-nav ul { flex-direction: row; align-items: center; padding: 0; gap: var(--s-4); }
  .nav-cta { border: 2px solid var(--c-terra-dark); border-radius: var(--r-pill); padding: var(--s-2) var(--s-4) !important; }
  .hero { padding: var(--s-9) 0 var(--s-7); }
  .hero-grid { grid-template-columns: 1.2fr 1fr; }
  .classes-grid { grid-template-columns: 1fr 1.4fr; align-items: start; }
  .section { padding: var(--s-9) 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}