/* Example A: dark stage. A club at night: warm near-black, stage-lit photographs, and the tobacco
   sunburst of Jure's guitar as the one accent. Serif display (Iowan Old Style, Palatino) over a
   humanist sans (Seravek). The prototype's direction, refined: no cards, no pills, no tracked caps. */
:root{
  --stage:#12100e;     /* page */
  --stage-2:#1b1815;   /* the watch and pricing bands and the form; nothing else */
  --line:#3a3129;      /* hairlines */
  --text:#f1e9dc;      /* body and headings, 15.8:1 */
  --text-2:#c4b8a5;    /* secondary text, 9.7:1 */
  --text-3:#958a78;    /* captions and fine print only, 5.6:1 */
  --amber:#e8a04a;     /* the sunburst: CTA, labels, step numerals, focus. Never a band */
  --amber-ink:#1a1206; /* text on amber */
  --ph:#ffe14d;        /* placeholder marks only */
  --display:"Iowan Old Style","Palatino Linotype",Palatino,P052,"Book Antiqua",Georgia,serif;
  --body:Seravek,"Gill Sans Nova","Ubuntu Sans",Ubuntu,"Segoe UI",Candara,"Noto Sans",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--stage);color:var(--text);font:18px/1.6 var(--body)}
img{display:block;max-width:100%;height:auto}
a{color:var(--amber)}
a:hover{color:var(--text)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0;text-wrap:balance}
h2{font-size:clamp(2rem,3.8vw,3rem);letter-spacing:-.005em}
h3{font-size:1.3rem;line-height:1.2}
p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.label{font-family:var(--display);font-style:italic;font-size:1.15rem;color:var(--amber);margin-bottom:.7rem}
.intro{color:var(--text-2);max-width:40rem;margin-top:1rem}
.sec-head{max-width:46rem}

/* example switcher, not part of the design */
.examples{background:#000;color:var(--text-3);font-size:13px;line-height:1.4;padding:7px 20px;text-align:center}
.examples a{color:var(--text-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1.3rem;border-radius:3px;border:1px solid var(--amber);font:600 1rem/1.2 var(--body);text-decoration:none;cursor:pointer;transition:background .15s ease-out,color .15s ease-out,border-color .15s ease-out}
.btn.primary{background:var(--amber);color:var(--amber-ink)}
.btn.primary:hover{background:#f3b866;color:var(--amber-ink)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--text-3)}
.btn.ghost:hover{border-color:var(--amber);color:var(--text)}

/* nav */
.nav{position:sticky;top:0;z-index:10;background:var(--stage);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;height:66px}
.brand{font-family:var(--display);font-size:1.35rem;color:var(--text);text-decoration:none;white-space:nowrap}
.nav ul{display:flex;gap:1.75rem}
.nav ul a{color:var(--text-2);text-decoration:none;font-size:.95rem}
.nav ul a:hover{color:var(--text)}
.nav .btn{min-height:42px;padding:.5rem 1rem;font-size:.92rem}
@media (max-width:860px){.nav nav{display:none}}

/* hero */
.hero{padding-block:clamp(1.5rem,5vw,4.5rem)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.kicker{font-family:var(--display);font-style:italic;font-size:1.15rem;color:var(--amber)}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.75rem);line-height:1.03;letter-spacing:-.01em;margin-top:1rem}
.hero h1 em{font-style:italic}
.lede{font-size:1.2rem;color:var(--text-2);max-width:34rem;margin-top:1.5rem}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.fine{margin-top:1rem;font-size:.9rem;color:var(--text-3)}
.hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:2px}
.hero-photo figcaption,.story-photo figcaption,.gallery figcaption{font-size:.8rem;color:var(--text-3);margin-top:.5rem}
@media (max-width:760px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-photo{order:-1}
  .hero-photo img{aspect-ratio:5/4}
}

/* proof */
.proof{padding-block:1.4rem;border-block:1px solid var(--line)}
.proof ul{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem 2rem;font-size:.92rem;color:var(--text-2)}
.proof b{font-family:var(--display);font-weight:400;font-size:1.05rem;color:var(--text)}
@media (max-width:960px){.proof ul{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.proof ul{grid-template-columns:1fr 1fr}}

/* who */
.profiles{margin-top:2.75rem;border-bottom:1px solid var(--line)}
.profile{display:grid;grid-template-columns:5fr 7fr;gap:1rem 3rem;padding-block:1.75rem;border-top:1px solid var(--line)}
.profile h3{font-size:1.55rem}
.profile p{color:var(--text-2);max-width:38rem}
@media (max-width:760px){.profile{grid-template-columns:1fr}}

/* how */
.how{padding-top:0}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:2.75rem}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:block;font-family:var(--display);font-size:3.6rem;line-height:1;color:var(--amber);margin-bottom:.9rem}
.steps h3{margin-bottom:.6rem}
.steps p{color:var(--text-2)}
.includes{display:grid;grid-template-columns:repeat(3,1fr);gap:.2rem 2.5rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);color:var(--text-2);font-size:.98rem}
.includes li{padding:.35rem 0 .35rem 1.4rem;position:relative}
.includes li::before{content:"–";position:absolute;left:0;color:var(--amber)}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:2rem}.includes{grid-template-columns:1fr}}

/* watch */
.watch{background:var(--stage-2);border-block:1px solid var(--line)}
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 1.5rem;margin-top:2.75rem}
.v.lead{grid-column:1/-1}
.frame{position:relative;display:block;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:2px}
.frame img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:opacity .2s ease-out}
.frame:hover img{opacity:1}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--amber)}
.play::after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent var(--amber-ink)}
.v:not(.lead) .play{transform:scale(.8)}
.v figcaption{margin-top:.8rem}
.v figcaption b{display:block;font-family:var(--display);font-weight:400;font-size:1.2rem;line-height:1.25}
.v.lead figcaption b{font-size:1.5rem}
.v figcaption span{font-size:.9rem;color:var(--text-3)}
@media (max-width:760px){.vids{grid-template-columns:1fr}}

/* story */
.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.story-photo{position:sticky;top:96px}
.story-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:34% 50%;border-radius:2px}
.story-text h2{margin-bottom:1.6rem}
.story-text>p+p{margin-top:1.1rem}
.story-text>p{max-width:38rem}
.pull{margin:2rem 0;padding-left:1.1rem;border-left:2px solid var(--amber)}
.pull blockquote p{font-family:var(--display);font-style:italic;font-size:1.5rem;line-height:1.35;color:var(--text)}
.pull figcaption{margin-top:.7rem;font-size:.85rem;color:var(--text-3)}
.names{margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.names p:last-child{color:var(--text-2)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:clamp(3rem,6vw,4.5rem)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
@media (max-width:760px){
  .story-grid{grid-template-columns:1fr}
  .story-photo{position:static}
  .story-photo img{aspect-ratio:3/2;object-position:50% 50%}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery figure:last-child{grid-column:1/-1}
}

/* pricing */
.pricing{background:var(--stage-2);border-block:1px solid var(--line)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);margin-top:2.75rem;border-top:1px solid var(--line)}
.tier{display:flex;flex-direction:column;gap:.9rem;padding:2rem clamp(1.25rem,2.5vw,2.25rem) 0;border-left:1px solid var(--line)}
.tier:first-child{border-left:0;padding-left:0}
.tier.best{box-shadow:inset 0 3px 0 var(--amber)}
.badge{font-family:var(--display);font-style:italic;color:var(--amber);margin-bottom:-.4rem}
.tier h3{font-size:1.45rem}
.price{font-family:var(--display);font-size:2.9rem;line-height:1.1;font-variant-numeric:tabular-nums lining-nums;display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem}
.price small{font-family:var(--body);font-size:.95rem;color:var(--text-2);white-space:nowrap}
.tier ul{color:var(--text-2);font-size:.98rem}
.tier li{padding-left:1.2rem;position:relative}
.tier li+li{margin-top:.35rem}
.tier li::before{content:"–";position:absolute;left:0;color:var(--amber)}
.tier .btn{margin-top:auto;align-self:flex-start}
.guarantee{margin-top:2.5rem;color:var(--text-2);max-width:44rem}
@media (max-width:760px){
  .tiers{grid-template-columns:1fr}
  .tier,.tier:first-child{border-left:0;padding:1.75rem 0 2rem;border-bottom:1px solid var(--line)}
}

/* students */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.75rem}
.quote blockquote p{font-family:var(--display);font-style:italic;font-size:1.2rem;line-height:1.45;color:var(--text-2)}
.quote figcaption{margin-top:1rem;font-size:.9rem;color:var(--text-3)}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}

/* faq */
.faq{padding-top:0}
.faq .list{margin-top:2.25rem;max-width:50rem;border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 0;cursor:pointer;list-style:none;font-family:var(--display);font-size:1.25rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--amber);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--text-2);padding-bottom:1.25rem;max-width:44rem}

/* book */
.book{border-top:1px solid var(--line)}
.book .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contact h2{margin-bottom:.2rem}
.mail{margin-top:1.75rem;font-family:var(--display);font-size:1.4rem;overflow-wrap:anywhere}
.mail a{color:var(--text);text-decoration-color:var(--amber);text-underline-offset:.2em}
.socials{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}
.socials a{display:inline-block;padding:.55rem 1rem;border:1px solid var(--line);border-radius:3px;color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem}
.socials a:hover{border-color:var(--amber)}
.form{display:grid;gap:1.1rem;padding:clamp(1.25rem,3vw,2rem);background:var(--stage-2);border:1px solid var(--line);border-radius:3px}
.form label{display:grid;gap:.4rem;font-size:.92rem;font-weight:600;color:var(--text-2)}
.form input,.form select,.form textarea{width:100%;min-width:0;padding:.7rem .8rem;background:var(--stage);color:var(--text);border:1px solid var(--line);border-radius:3px;font:400 1rem/1.4 var(--body)}
.form input::placeholder,.form textarea::placeholder{color:var(--text-3)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form .note{font-size:.88rem;color:var(--text-3)}
.form .btn{justify-self:start}
.form .ok{padding:1rem;border:1px solid var(--amber);border-radius:3px}
@media (max-width:760px){.book .wrap{grid-template-columns:1fr}}
@media (max-width:480px){.form .row{grid-template-columns:1fr}}

/* footer */
footer.site{border-top:1px solid var(--line);padding-block:2.25rem 3rem;font-size:.85rem;color:var(--text-3)}
footer.site .wrap{display:grid;gap:.5rem}
footer.site .proto{margin-top:.75rem;padding:.85rem 1rem;border:1px solid var(--line);color:var(--text-2);max-width:52rem}

/* placeholders: the same yellow marks in all three examples */
.ph-block{outline:1.5px dashed var(--ph);outline-offset:0;padding:1.25rem 1.4rem}
.ph-tag{display:inline-block;margin-bottom:.9rem;padding:.2rem .5rem;background:var(--ph);color:#121110;font:600 .78rem/1.35 var(--body)}
.ph{outline:1.5px dashed var(--ph);outline-offset:.12em}
.ph::after{content:"placeholder";display:inline-block;vertical-align:.9em;margin-left:.4rem;padding:.1rem .35rem;background:var(--ph);color:#121110;font:600 .7rem/1.3 var(--body)}

@media print{.examples,.nav,.btn,.form,.play{display:none}body{background:#fff;color:#000}}