:root{
  --paper:#fbfaf8; --wall:#ecebe7; --concrete:#d7d5d0; --stone:#8a8781;
  --ink:#1a1a22; --ink-2:#3c3b42; --lav:#b9a2e6; --lav-deep:#7b5cc4;
  --script:"Dancing Script","Brush Script MT",cursive;
  --sub:"Pacifico","Dancing Script",cursive;
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(1.25rem,5vw,4.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--lav);color:var(--ink)}
img{display:block;width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
h1{font-family:var(--script);font-weight:700;letter-spacing:0}
h2{font-family:var(--sub);font-size:clamp(1.85rem,4.4vw,2.9rem);line-height:1.35;color:var(--lav-deep);letter-spacing:0}
h3{font-family:var(--sans);font-weight:600;font-size:1.2rem;line-height:1.3;letter-spacing:-.005em}
p{margin:0 0 1rem}
figure{margin:0}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:20}
.label,.no,figcaption span,.steps li>span{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.label{margin:0 0 1.25rem;display:flex;align-items:center;gap:.75rem}
.label::before{content:"";width:28px;height:1px;background:var(--lav-deep)}
section{padding:clamp(4.5rem,10vw,8.5rem) var(--gut)}

/* links + button */
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:500;font-size:.95rem;letter-spacing:.02em;padding:1.05rem 1.75rem;border:1px solid var(--ink);transition:background .25s,color .25s}
.btn::after{content:"";display:inline-block;width:8px;height:8px;margin-left:.85rem;background:var(--lav);vertical-align:.08em}
.btn:hover{background:transparent;color:var(--ink)}
a:focus-visible{outline:2px solid var(--lav-deep);outline-offset:4px}
.text-link{font-size:.9rem;font-weight:500;text-decoration:none;border-bottom:1px solid var(--lav-deep);padding-bottom:2px}

/* bar */
.bar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:1rem var(--gut);background:rgba(251,250,248,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--concrete)}
.mark{font-family:var(--script);font-weight:700;font-size:1.7rem;line-height:1;text-decoration:none}
.bar nav{display:flex;gap:1.75rem;font-size:.85rem;font-weight:500}
.bar nav a{text-decoration:none}
.bar nav a:not(.book){display:none}
.book{border-bottom:1px solid var(--lav-deep);padding-bottom:2px}

/* hero */
.hero{display:grid;padding:0}
.hero-photo{order:-1;aspect-ratio:1/1;overflow:hidden;background:var(--wall)}
.hero-photo img{height:100%;object-fit:cover;object-position:50% 25%}
.hero-text{padding:2rem var(--gut) 3rem}
h1{font-size:clamp(3.5rem,12vw,7.25rem);line-height:1.02;margin-bottom:1.25rem}
.hero-line{font-size:1.15rem;max-width:30ch;color:var(--ink-2);margin-bottom:1.75rem}
.hero-note{font-size:.82rem;color:var(--stone);margin:1rem 0 0}

/* wall text */
.wall-text{max-width:820px;margin:0 auto}
.wall-text h2{margin-bottom:1.75rem}
.wall-text p:not(.label){font-size:1.1rem;color:var(--ink-2);max-width:58ch}

/* gallery wall */
.gallery{background:var(--wall);display:grid;gap:3.5rem 1.25rem;grid-template-columns:repeat(12,1fr)}
.piece{grid-column:1/-1}
.frame{background:#fff;padding:clamp(10px,2vw,22px);border:1px solid #cfccc6;box-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 34px -18px rgba(26,26,34,.28)}
.frame img{border:1px solid #e3e1dc}
figcaption{margin-top:1rem;font-size:.78rem;color:var(--stone);line-height:1.5;padding-left:.75rem;border-left:1px solid var(--lav-deep)}
figcaption span{display:block}
figcaption em{display:block;font-family:var(--sans);font-style:normal;font-weight:500;font-size:.95rem;color:var(--ink);margin:.1rem 0}
.p1,.p4,.p6{grid-column:1/11}
.p2,.p5,.p7{grid-column:3/13}

/* price list */
.prices{max-width:1080px;margin:0 auto;display:grid;gap:2.5rem}
.prices-head p:last-child{color:var(--stone);margin-top:1rem}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.list li{display:grid;grid-template-columns:1fr;gap:.5rem 1.5rem;padding:1.75rem 0;border-bottom:1px solid var(--concrete)}
.list .no{grid-column:1/-1}
.list h3{margin-bottom:.35rem;padding-top:.15rem}
.list p{color:var(--ink-2);margin:0 0 .6rem;max-width:46ch}
.cost{font-family:var(--sans);font-weight:500;font-size:1.15rem;white-space:nowrap;align-self:start}
.cost.accent{color:var(--lav-deep)}

/* about */
.about{display:grid;gap:3rem;border-top:1px solid var(--concrete);max-width:1180px;margin:0 auto}
.about-photo{max-width:340px}
.about-text h2{margin-bottom:1.5rem}
.about-text p:not(.label){color:var(--ink-2);max-width:52ch;font-size:1.05rem}

/* steps */
.steps{background:var(--wall)}
.steps>.label{margin-bottom:2.5rem}
.steps ol{list-style:none;margin:0;padding:0;display:grid;gap:2.5rem}
.steps li{border-top:1px solid var(--ink);padding-top:1.25rem}
.steps li>span{color:var(--lav-deep)}
.steps h3{margin:.6rem 0 .4rem;font-size:1.35rem}
.steps p{color:var(--ink-2);margin:0}

/* final */
.final{text-align:center}
.final h2{font-family:var(--script);font-weight:700;color:var(--ink);font-size:clamp(3rem,8.5vw,5.5rem);line-height:1.1;margin-bottom:2rem}

/* footer */
.foot{display:flex;flex-direction:column;flex-wrap:wrap;gap:.75rem 2rem;align-items:baseline;justify-content:space-between;padding:2rem var(--gut);border-top:1px solid var(--concrete);font-size:.85rem;color:var(--stone)}
.foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--concrete)}
.foot .mark{color:var(--ink);font-size:1.5rem}

/* reveal */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}}

@media (min-width:760px){
  .bar nav a:not(.book){display:inline}
  .steps ol{grid-template-columns:repeat(3,1fr)}
  .list li{grid-template-columns:7rem 1fr auto;align-items:start}
  .cost{padding-top:.15rem}
  .foot{flex-direction:row}
  .list .no{grid-column:auto;padding-top:.55rem}
  .about{grid-template-columns:minmax(240px,.8fr) 1.2fr;align-items:center;gap:5rem}
  .gallery{gap:5rem 2rem}
  .p1{grid-column:1/6}
  .p2{grid-column:7/13;align-self:end}
  .p3{grid-column:2/9}
  .p4{grid-column:10/13;align-self:center}
  .p5{grid-column:1/6}
  .p6{grid-column:7/12;align-self:end}
  .p7{grid-column:4/10}
}
@media (min-width:1000px){
  .hero{grid-template-columns:1fr 1fr;min-height:calc(100vh - 64px)}
  .hero-photo{order:2;aspect-ratio:auto;height:calc(100vh - 64px);max-height:900px}
  .hero-text{align-self:center;padding:3rem var(--gut)}
  .prices{grid-template-columns:1fr 2fr;gap:4rem}
}

/* ---------- workshop pages ---------- */
.ph{background:rgba(185,162,230,.28);padding:0 .25em;font-family:var(--sans);font-size:.85em;letter-spacing:.02em}
.h1-title{font-size:clamp(3.1rem,9vw,5.75rem);line-height:1.05;margin-bottom:.75rem}
.h1-sub{font-family:var(--sub);font-size:clamp(1.35rem,3vw,1.85rem);line-height:1.4;color:var(--lav-deep);margin-bottom:1.5rem}
.takeaways>.label{margin-bottom:2.5rem}
.teacher{border-top:1px solid var(--concrete)}
.fine{font-size:.85rem;color:var(--stone)}
.simple{max-width:860px;margin:0 auto;padding-top:clamp(4rem,10vw,7.5rem)}
.simple .lead{font-size:1.2rem;color:var(--ink-2);max-width:48ch;margin:1rem 0 2rem}
.simple p:not(.label):not(.lead){color:var(--ink-2)}
.cost s{font-size:.75em;color:var(--stone);margin-left:.35em}
.cost-link{justify-self:start;align-self:start;margin-top:.35rem}
.thanks-note{margin-top:2rem}
.prices-head .btn{margin-top:1.75rem}
@media (max-width:999px){.sub .hero-photo{aspect-ratio:auto;height:min(80vw,420px)}.sub .hero-text{padding-top:1.5rem}}
.final .fine{margin:1rem auto 0;max-width:52ch}
.final .thanks-note{margin-top:2rem}
.hero-note .text-link{font-size:.85rem;color:var(--ink)}
@media (min-width:760px){
  .cost-link{justify-self:end}
}
.prices-head h2{margin-bottom:.9rem}
.prices-head h2+p{margin-top:0!important}
.simple .lead{margin-top:1.4rem}