/* Kiln — a complete single-page site. Editorial type on paper, one dark slab for the
   studio, dark bands for process and booking. Everything reflows to one column under
   1180px; the hero slab keeps its height so the vessel stays the picture. */
:root{
  --paper:#F2EDE4; --paper-2:#FAF6EE; --ink:#221C18; --ink-2:#4A3F37; --ink-3:#6B5C50; --ink-4:#8A7868;
  --line:#D9CEBD; --terra:#A4482A; --terra-deep:#7B3418; --slab:#181110; --slab-ink:#C6B4A2;
  --dark:#1C1512; --dark-2:#2A211B; --dark-line:rgba(214,190,166,.18); --dark-ink:#E9DCCB; --dark-muted:#A79482;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:"DM Sans",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5}
.skip{position:absolute;left:-999px;top:8px;background:var(--terra);color:#fff;padding:8px 12px;border-radius:3px;z-index:50}
.skip:focus{left:12px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--terra);outline-offset:3px}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:22px 92px;background:rgba(242,237,228,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:inline-flex;align-items:center;gap:11px;font-family:"Fraunces",serif;font-size:23px;font-weight:500;color:var(--ink);text-decoration:none}
.logo svg{display:block;width:14px;height:20px;flex:none;fill:var(--terra)}
.menu{display:flex;align-items:center;gap:28px}
.menu a{font-size:14.5px;line-height:1;color:var(--ink-3);text-decoration:none;letter-spacing:.005em}
.menu a:hover{color:var(--ink)}
.menu .now{color:var(--terra-deep);border-bottom:1px solid var(--terra);padding-bottom:4px}

/* ---------- hero: editorial + studio ---------- */
.frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(500px,46%);min-height:calc(100vh - 70px)}
.column{display:flex;flex-direction:column;min-width:0;padding:54px 76px 60px 92px}
.editorial{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:680px;padding:30px 0}
.eyebrow{display:flex;align-items:center;gap:16px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra-deep)}
.eyebrow::before{content:"";width:48px;height:1px;background:currentColor;opacity:.5;flex:none}
h1{margin-top:26px;font-family:"Fraunces",serif;font-weight:300;font-size:clamp(40px,4.9vw,78px);line-height:1.0;letter-spacing:-.025em}
h1 em{font-style:italic;font-weight:300;color:var(--terra)}
.facts{margin-top:34px;border-top:1px solid var(--line)}
.facts .row,.details .row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
.facts dt,.details dt{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-4)}
.facts dd,.details dd{font-size:17px;line-height:1.45;color:var(--ink-2)}
.details dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.details dd a:hover{border-color:var(--terra)}
.cta{margin-top:32px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.book{display:inline-flex;align-items:center;gap:12px;font-family:inherit;font-size:15.5px;font-weight:500;color:#FBF4EA;background:var(--terra);border:0;border-radius:3px;padding:15px 26px;cursor:pointer;text-decoration:none}
.book svg{width:16px;height:16px;flex:none}
.book:hover{background:var(--terra-deep)}
.ghost{font-size:15.5px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--terra);padding-bottom:3px}
.ghost:hover{color:var(--terra-deep)}
.price{margin-top:30px;font-family:"Fraunces",serif;font-size:20px}
.price span{display:block;margin-top:9px;font-family:"DM Sans",sans-serif;font-size:10.5px;letter-spacing:.19em;color:var(--ink-4)}

.studio{position:relative;overflow:hidden;outline:0;min-height:560px;background:radial-gradient(115% 62% at 33% 24%,#3C2B21 0%,rgba(60,43,33,0) 64%),radial-gradient(80% 46% at 62% 96%,#241811 0%,rgba(36,24,17,0) 70%),linear-gradient(177deg,#211812 0%,var(--slab) 54%,#100B09 100%)}
.studio canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.studio:focus-visible{box-shadow:inset 0 0 0 2px var(--terra)}
.plate{position:absolute;left:52px;top:54px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8E7A68}
.forms{position:absolute;left:52px;right:52px;bottom:44px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.forms .lbl{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8E7A68;margin-right:10px}
.forms button{font-family:inherit;font-size:13.5px;line-height:1;color:var(--slab-ink);background:transparent;border:1px solid rgba(214,190,166,.26);border-radius:2px;padding:9px 15px;cursor:pointer}
.forms button:hover{border-color:rgba(214,190,166,.55);color:#EBDDCA}
.forms button[aria-pressed="true"]{color:#1B120E;background:#E4D6C2;border-color:#E4D6C2}
.forms button:focus-visible{outline:2px solid #E4D6C2;outline-offset:2px}

/* ---------- bands ---------- */
.band{padding:96px 92px;border-top:1px solid var(--line)}
.band-head{max-width:760px}
.band h2{margin-top:22px;font-family:"Fraunces",serif;font-weight:300;font-size:clamp(34px,4.2vw,64px);line-height:1.02;letter-spacing:-.025em}
.lead{margin-top:18px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:560px}
.band-dark{background:var(--dark);color:var(--dark-ink);border-top:0}
.band-dark .eyebrow{color:#D08B6C}
.band-dark .lead{color:var(--dark-muted)}
.band-paper{background:var(--paper-2)}

/* sessions: one row per offer, ruled, the price as the largest figure */
.sessions{margin-top:56px;border-top:1px solid var(--line)}
.session{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) auto auto;gap:24px 40px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line)}
.session:hover{background:linear-gradient(90deg,var(--paper-2),transparent 70%)}
.session h3{font-family:"Fraunces",serif;font-weight:400;font-size:clamp(24px,2.1vw,32px);letter-spacing:-.015em;line-height:1.1}
.session-when{margin-top:8px;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-4)}
.session-copy{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:52ch}
.session-price{font-family:"Fraunces",serif;font-weight:400;font-size:clamp(34px,3vw,46px);letter-spacing:-.02em;line-height:1;white-space:nowrap;text-align:right}
.session-price span{display:block;margin-top:8px;font-family:"DM Sans",sans-serif;font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-4)}
.session-book{font-size:15px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--terra);padding-bottom:3px;white-space:nowrap}
.session-book:hover{color:var(--terra-deep)}

/* process: the chosen form at each stage, one column per step */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 28px;margin-top:56px}
.step{border-top:1px solid var(--dark-line);padding-top:22px}
.step canvas{display:block;width:100%;aspect-ratio:4/5;margin-bottom:22px;border-radius:3px;background:radial-gradient(90% 60% at 40% 30%,#3C2B21 0%,rgba(60,43,33,0) 70%),linear-gradient(177deg,#211812 0%,var(--slab) 60%,#100B09 100%)}
.step-n{display:block;font-family:"Fraunces",serif;font-size:13px;letter-spacing:.18em;color:#D08B6C}
.step h3{margin-top:18px;font-family:"Fraunces",serif;font-weight:400;font-size:26px;letter-spacing:-.01em}
.step p{margin-top:12px;font-size:15px;line-height:1.6;color:var(--dark-muted)}
.step:not([data-stage]) .step-n{font-size:clamp(44px,4vw,64px);letter-spacing:-.02em;line-height:1;color:#D08B6C;opacity:.9}
.steps[data-count="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}

/* work: one large piece, one tall, the rest square; every piece opens its destination */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:22px;margin-top:56px}
.piece{margin:0;min-width:0}
.piece:first-child{grid-column:span 2;grid-row:span 2}
.gallery[data-count="4"] .piece:nth-child(2){grid-row:span 2}
.piece a{display:block;border-radius:3px;outline-offset:4px}
.piece canvas{display:block;width:100%;aspect-ratio:1;border-radius:3px;background:radial-gradient(90% 60% at 40% 30%,#3C2B21 0%,rgba(60,43,33,0) 70%),linear-gradient(177deg,#211812 0%,var(--slab) 60%,#100B09 100%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.piece:first-child canvas{aspect-ratio:4/5}
.gallery[data-count="4"] .piece:nth-child(2) canvas{aspect-ratio:2/5}
.piece a:hover canvas{transform:scale(1.015)}
.piece figcaption{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.piece figcaption b{display:block;font-family:"Fraunces",serif;font-weight:400;font-size:19px;color:var(--ink);margin-bottom:4px}
.piece:first-child figcaption b{font-size:26px}
.piece.is-open figcaption b{color:var(--terra-deep)}
.piece-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:64px;padding-top:56px;border-top:1px solid var(--line);outline:0;scroll-margin-top:86px}
.piece-detail[hidden]{display:none}
.piece-figure canvas{display:block;width:100%;aspect-ratio:4/5;border-radius:3px;background:radial-gradient(90% 60% at 40% 30%,#3C2B21 0%,rgba(60,43,33,0) 70%),linear-gradient(177deg,#211812 0%,var(--slab) 60%,#100B09 100%)}
.piece-text h3{margin-top:22px;font-family:"Fraunces",serif;font-weight:300;font-size:clamp(40px,4.6vw,72px);line-height:1;letter-spacing:-.025em}
.piece-lead{margin-top:22px;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:48ch}
.piece-facts{margin-top:30px;border-top:1px solid var(--line)}
.piece-facts .row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
.piece-facts dt{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-4)}
.piece-facts dd{font-size:16px;color:var(--ink-2)}
.piece-actions{margin-top:32px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.piece-nav{margin-top:34px;display:flex;justify-content:space-between;gap:20px;font-size:14px}
.piece-nav a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line)}
.piece-nav a:hover{color:var(--terra-deep);border-color:var(--terra)}
@media (prefers-reduced-motion:no-preference){.piece-detail.is-in{animation:rise .6s cubic-bezier(.2,.7,.2,1)}}

/* the room */
.room-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:start}
.shelf{margin:0}
.shelf canvas{display:block;width:100%;aspect-ratio:16/10;border-radius:3px;background:radial-gradient(80% 50% at 50% 20%,#3C2B21 0%,rgba(60,43,33,0) 70%),linear-gradient(177deg,#221912 0%,var(--slab) 60%,#100B09 100%)}
.shelf figcaption{margin-top:14px;font-size:14px;line-height:1.55;color:var(--ink-3);max-width:52ch}
.details{border-top:1px solid var(--line);margin-top:34px}
.details .row{padding:16px 0}

/* book */
.book-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start}
.demo-note{margin-top:22px;font-size:13.5px;line-height:1.6;color:#D08B6C;border-left:2px solid #D08B6C;padding-left:14px;max-width:420px}
.booking{display:grid;gap:18px;border:1px solid var(--dark-line);padding:30px;background:var(--dark-2)}
.booking label{display:grid;gap:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dark-muted)}
.booking input,.booking select,.booking textarea{width:100%;font:inherit;font-size:15.5px;letter-spacing:0;text-transform:none;color:var(--dark-ink);background:var(--dark);border:1px solid var(--dark-line);border-radius:3px;padding:13px 14px}
.booking textarea{resize:vertical}
.booking input::placeholder,.booking textarea::placeholder{color:#6F6156}
.booking input:focus-visible,.booking select:focus-visible,.booking textarea:focus-visible{outline:2px solid #D08B6C;outline-offset:2px}
.form-error{font-size:14px;color:#F0B39C}
.form-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form-demo{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dark-muted)}

/* colophon */
.colophon{padding:36px 92px 48px;border-top:1px solid var(--line);font-size:12.5px;letter-spacing:.04em;color:var(--ink-3)}
.colophon p{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.colophon a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line)}
.colophon .dot{width:4px;height:4px;border-radius:50%;background:var(--line);flex:none}
.colophon .small{margin-top:12px;font-size:11.5px;color:var(--ink-4);letter-spacing:.02em}

/* summary sheet */
.sheet{position:fixed;left:92px;bottom:44px;z-index:40;width:min(430px,calc(100vw - 40px));background:var(--paper-2);border:1px solid var(--line);padding:26px 28px 22px;box-shadow:0 22px 44px -30px rgba(52,34,20,.55);color:var(--ink)}
.sheet[hidden]{display:none}
.sheet h2{font-family:"Fraunces",serif;font-weight:400;font-size:22px;letter-spacing:-.01em;outline:0}
.sheet h2:focus-visible{box-shadow:0 2px 0 var(--terra)}
.sheet ul{list-style:none;margin-top:16px;border-top:1px solid var(--line)}
.sheet li{font-size:14.5px;line-height:1.45;color:var(--ink-2);padding:10px 0;border-bottom:1px solid var(--line)}
.sheet .note{margin-top:14px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.sheet .actions{margin-top:20px}
.sheet .close{font-family:inherit;font-size:13.5px;color:var(--ink-3);background:none;border:0;padding:0;cursor:pointer;border-bottom:1px solid var(--line)}
.sheet .close:hover{color:var(--ink)}

/* ---------- motion: an arrival, never a gate ---------- */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .r2{animation-delay:.06s}.r3{animation-delay:.12s}.r4{animation-delay:.18s}.r5{animation-delay:.24s}
  @keyframes rise{to{opacity:1;transform:none}}
  .js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .js-reveal .reveal.is-in{opacity:1;transform:none}
  .js-reveal .session:nth-child(2),.js-reveal .step:nth-child(2),.js-reveal .piece:nth-child(2){transition-delay:.07s}
  .js-reveal .session:nth-child(3),.js-reveal .step:nth-child(3),.js-reveal .piece:nth-child(3){transition-delay:.14s}
  .js-reveal .step:nth-child(4),.js-reveal .piece:nth-child(4){transition-delay:.21s}
}

/* ---------- widths ---------- */
@media (max-width:1179px){
  .masthead{padding:18px 40px}
  .frame{grid-template-columns:minmax(0,1fr);min-height:0}
  .column{padding:36px 40px 28px}
  .editorial{max-width:none;padding:22px 0 8px}
  .band{padding:72px 40px}
  .steps,.steps[data-count="5"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery[data-count="4"] .piece:nth-child(2){grid-row:auto}
  .gallery[data-count="4"] .piece:nth-child(2) canvas{aspect-ratio:1;height:auto}
  .session{grid-template-columns:minmax(0,1fr) auto;gap:14px 28px}
  .session-copy{grid-column:1/-1}
  .session-book{grid-column:1/-1;justify-self:start}
  .piece-detail{grid-template-columns:minmax(0,1fr);gap:32px}
  .room-grid,.book-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .colophon{padding:30px 40px 40px}
  .sheet{left:40px}
}
@media (max-width:720px){
  .masthead{padding:16px 22px;align-items:flex-start;flex-direction:column;gap:14px}
  .menu{gap:18px;flex-wrap:wrap}
  .column{padding:26px 22px 22px}
  h1{margin-top:20px;font-size:clamp(33px,9vw,46px)}
  .facts .row,.details .row{grid-template-columns:minmax(0,1fr);gap:5px;padding:12px 0}
  .facts dd,.details dd{font-size:16px}
  .cta{gap:20px}
  .book{width:100%;justify-content:space-between}
  .studio{min-height:500px}
  .plate{left:22px;top:24px}
  .forms{left:22px;right:22px;bottom:22px;gap:7px}
  .forms .lbl{width:100%;margin:0 0 4px}
  .band{padding:56px 22px}
  .gallery{grid-template-columns:minmax(0,1fr);gap:18px}
  .piece:first-child{grid-column:auto;grid-row:auto}
  .steps,.steps[data-count="5"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .step h3{font-size:22px}
  .session{grid-template-columns:minmax(0,1fr);gap:10px}
  .session-price{text-align:left}
  .booking{padding:22px}
  .colophon{padding:26px 22px 36px}
  .sheet{left:12px;right:12px;bottom:12px;width:auto;padding:20px 20px 18px}
}