/* hannahjanevokal.com — matches the original Squarespace look.
   Colors sampled from the original site. Single dark theme by design. */
:root{
  --teal:#184048;
  --teal-deep:#123239;
  --cream:#fff0f5;
  --mist:#bfd5d5;
  --mist-dim:#8fb0b1;
  --sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --serif:"Cormorant Garamond",Garamond,Georgia,serif;
  --script:"Monsieur La Doulaise","Snell Roundhand",cursive;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--teal)}
body{background:var(--teal);color:var(--cream);font-family:var(--sans);font-weight:300;margin:0;line-height:1.55}
img{max-width:100%}
a{color:inherit}
main a:not(.btn){color:var(--mist);text-decoration-thickness:1px;text-underline-offset:.2em}
main a:not(.btn):hover{color:var(--cream)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--mist);outline-offset:3px}
.wrap{max-width:1320px;margin:0 auto;padding-inline:clamp(16px,3vw,40px)}
.narrow{max-width:960px;margin:0 auto}
.note{background:var(--teal-deep);color:var(--mist);font-size:.78rem;text-align:center;padding:.5rem 16px}
h1,h2,h3{font-weight:400;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.h1{font-size:clamp(2.4rem,6vw,5.2rem);margin:0 0 2rem;text-align:center}
.h2{font-size:clamp(2rem,4.6vw,4.2rem);margin:0 0 2rem;text-align:center}

/* header */
header.site{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem;padding-block:2rem}
.brand{display:flex;align-items:center;gap:1rem;text-decoration:none}
.brand img{width:96px;height:auto;display:block}
.brand .name{display:flex;flex-direction:column;align-items:center}
.brand .sig{font-family:var(--script);font-size:clamp(2.4rem,4.2vw,3.3rem);line-height:1;white-space:nowrap}
.brand .tag{font-family:var(--serif);font-size:.95rem;letter-spacing:.06em;margin-top:.2rem}
nav.main>ul{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;list-style:none;margin:0;padding:0;font-size:1.05rem}
nav.main a{text-decoration:none}
nav.main a:hover,nav.main a[aria-current]{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px}
nav.main li{position:relative}
nav.main .sub{display:none;position:absolute;left:0;top:100%;padding:.6rem 0 0;list-style:none;margin:0;z-index:5;min-width:11rem}
nav.main .sub li{padding:.15rem 0}
nav.main li:hover>.sub,nav.main li:focus-within>.sub{display:block}
.right{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:center}
.icons{display:flex;gap:.9rem;align-items:center}
.icons a{display:block;width:18px;height:18px}
.icons a:hover{opacity:.7}
.icons svg{width:100%;height:100%;fill:var(--cream);display:block}
@media (max-width:1100px){header.site{justify-content:center;text-align:center}nav.main>ul{justify-content:center}nav.main .sub{left:50%;transform:translateX(-50%);background:var(--teal);padding:.6rem 1rem;text-align:center}}

.btn{display:inline-block;border:2px solid var(--mist);color:var(--mist);border-radius:6px;padding:.75rem 1.9rem;text-decoration:none;font:inherit;font-size:1rem;background:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--mist);color:var(--teal)}
.center{text-align:center}

/* video (thumbnail linking out; real site swaps in the YouTube player) */
.video{display:block;position:relative;border-radius:2px;overflow:hidden;max-width:100%;text-decoration:none}
.video img{display:block;width:100%;height:auto}
.video .play{position:absolute;inset:0;display:grid;place-items:center}
.video .play span{width:84px;height:84px;border-radius:50%;background:rgba(18,50,57,.7);border:2px solid var(--cream);display:grid;place-items:center;transition:transform .2s}
.video:hover .play span{transform:scale(1.06)}
.video .play svg{width:30px;height:30px;fill:var(--cream);margin-left:5px}
.video .cap{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.25rem;font-size:.9rem;color:var(--cream);background:linear-gradient(transparent,rgba(18,50,57,.85))}
.videos{display:grid;gap:2.5rem}
.video-frame{position:relative;aspect-ratio:16/9;max-width:100%}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* home */
.hero{text-align:center;padding-block:clamp(3rem,8vw,6rem) 2.5rem}
.releases{padding-block:4rem 3rem}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem 1rem}
@media (max-width:820px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid3{grid-template-columns:minmax(0,1fr)}}
.rel{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.rel img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.rel h3{font-size:clamp(1.3rem,2vw,1.75rem);letter-spacing:-.01em;margin:1.25rem 0 .35rem}
.rel p{font-size:.95rem;margin:0 0 1.25rem;max-width:34ch;opacity:.92}
.rel .btn{margin-top:auto;padding:.65rem 1.6rem;font-size:.95rem}

/* about */
.page-top{padding-block:clamp(2.5rem,6vw,5rem) 0}
.photo-wide{display:block;width:100%;height:auto;border-radius:2px;margin-bottom:4rem}
.bio p{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.75;margin:0 0 1.4rem}
.press{padding-block:4rem 2rem}
.press .credit{text-align:center;font-size:.95rem}
.press-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1rem;margin-top:2rem}
.press-grid div{aspect-ratio:4/5;border:1px dashed var(--mist-dim);border-radius:2px;display:grid;place-items:center;color:var(--mist-dim);font-size:.85rem;text-align:center;padding:1rem}

/* services */
.banner{position:relative;background-size:cover;background-position:center;padding-block:clamp(5rem,12vw,9rem) clamp(6rem,14vw,11rem);clip-path:polygon(0 0,100% 0,100% 72%,50% 92%,0 100%);margin-bottom:2rem}
.banner::before{content:"";position:absolute;inset:0;background:rgba(18,50,57,.35)}
.banner .inner{position:relative;max-width:920px;margin:0 auto;padding-inline:clamp(16px,3vw,40px)}
.banner h1{font-size:clamp(2.6rem,6.5vw,5.4rem);margin:0 0 1.5rem}
.banner p{font-size:clamp(1.15rem,2vw,1.6rem);margin:0;max-width:34ch}
.split{display:flex;flex-wrap:wrap;gap:2rem 4rem;align-items:center;justify-content:center;padding-block:2rem 4rem}
.split ul{font-size:clamp(1.1rem,1.8vw,1.45rem);margin:0;padding-left:1.2rem;display:grid;gap:.9rem}
.reviews{padding-block:2rem 4rem}
.review{display:flex;flex-direction:column;gap:1.25rem;align-items:center;text-align:center;min-width:0}
.review img{width:100%;max-width:460px;border-radius:24px;display:block}
.review p{margin:0;font-size:1.02rem;line-height:1.65}
.session{position:relative;background-size:cover;background-position:center;padding-block:clamp(6rem,12vw,9rem) clamp(4rem,8vw,6rem);clip-path:polygon(0 8%,50% 3%,100% 0,100% 100%,0 100%)}
.session::before{content:"";position:absolute;inset:0;background:rgba(18,50,57,.4)}
.session .inner{position:relative;max-width:1000px;margin:0 auto;padding-inline:clamp(16px,3vw,40px)}
.session h2{font-size:clamp(2.4rem,6vw,5rem);margin:0 0 1.5rem;text-align:center}
.session .lead{font-weight:500;font-size:1.3rem;text-align:center;margin:0 0 1.5rem}
.session ul{font-size:clamp(1.05rem,1.7vw,1.4rem);display:grid;gap:.9rem;padding-left:1.2rem;margin:0 0 3rem}

/* feels like honey */
.arch{display:block;width:min(100%,1500px);margin:0 auto 2.5rem;border-radius:50%/50%;aspect-ratio:1.75;object-fit:cover}
.prose{font-size:1.1rem;line-height:1.75;max-width:1700px;margin:0 auto 2.5rem}
.stack{display:grid;gap:2.5rem;justify-items:center;padding-block:1rem 3rem}

/* works */
.works-intro{font-size:1.1rem;margin:0 0 4rem}
.works-list{list-style:none;margin:0 0 4rem;padding:0;display:grid;gap:1.4rem}
.work{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.4rem 1rem;font-size:1.1rem;line-height:1.55}
.work .yr{font-weight:500}
.work .t{font-weight:600}
.work .t a{font-weight:600}
.work .note{grid-column:2;list-style:disc;margin:.2rem 0 0;padding-left:1.2rem}
@media (max-width:560px){.work{grid-template-columns:minmax(0,1fr)}.work .note{grid-column:1}}
.disco{list-style:none;margin:0 0 4rem;padding:0;display:grid;gap:.9rem}
.disco li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;font-size:1.1rem}
.disco b{font-weight:600}

/* contact */
.signup{text-align:center;padding-block:clamp(3rem,8vw,6rem)}
.signup h1{font-size:clamp(2.2rem,5vw,4rem);margin:0 0 1.2rem}
.signup p{max-width:44ch;margin:0 auto 2rem;font-size:1.1rem}
.signup form{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.signup input{flex:0 1 20rem;min-width:0;font:inherit;padding:1rem 1.4rem;border:0;background:#fff;color:#222}
.contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem 4rem;padding-block:2rem 5rem}
@media (max-width:820px){.contact{grid-template-columns:minmax(0,1fr)}}
.contact h1{font-size:clamp(3rem,7vw,5.6rem);margin:0 0 1.5rem}
.contact .lede{font-size:1.1rem;line-height:1.7;margin:0 0 2rem}
.contact .em b{display:block;font-weight:600}
.contact img{width:100%;margin-top:2rem;display:block}
.form{display:grid;gap:1.4rem;align-content:start}
.form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:520px){.form .row{grid-template-columns:minmax(0,1fr)}}
.form label{display:grid;gap:.45rem;font-size:1rem}
.form label small{color:var(--mist-dim);font-size:.9rem;margin-left:.4rem}
.form input,.form textarea{font:inherit;color:var(--cream);background:transparent;border:1px solid var(--mist);border-radius:4px;padding:.85rem;min-width:0;width:100%}
.form textarea{min-height:8rem;resize:vertical}
.form .ok{color:var(--mist);margin:0}

footer{padding-block:4rem 5rem;display:flex;flex-direction:column;align-items:center;gap:1.25rem}
footer .icons{gap:1.4rem}
footer .icons a{width:26px;height:26px}
footer small{color:var(--mist-dim);font-size:.8rem}
@media (max-width:520px){.brand{gap:.6rem}.brand img{width:64px}.brand .sig{font-size:clamp(1.6rem,8.5vw,2.4rem);white-space:normal;text-align:center}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* portfolio home (restructure) */
.intro{text-align:center;padding-block:clamp(2.5rem,6vw,4.5rem) 1rem}
.intro p{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.35;max-width:38ch;margin:0 auto}
.eyebrow{font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);margin:0 0 .6rem}
.btns{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.5rem 0 0}
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem 3.5rem;align-items:center;padding-block:3rem 5rem}
.feature .h1{text-align:left;margin-bottom:1rem}
.feature .ftext>p:not(.eyebrow):not(.btns){font-size:1.15rem;line-height:1.65;margin:0}
@media (max-width:900px){.feature{grid-template-columns:minmax(0,1fr)}}
.doors-wrap,.projects-wrap{padding-block:2rem 4rem}
.doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
@media (max-width:1000px){.doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.doors{grid-template-columns:minmax(0,1fr)}}
.door{display:flex;flex-direction:column;text-decoration:none;border:1px solid rgba(191,213,213,.35);border-radius:6px;overflow:hidden;background:var(--teal-deep);transition:border-color .2s}
.door:hover{border-color:var(--mist)}
.door img,.door .ph{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.door .ph{display:grid;place-items:center;color:var(--mist-dim);font-size:.85rem;border-bottom:1px dashed var(--mist-dim)}
.door .dt{font-size:1.7rem;letter-spacing:-.02em;padding:1.1rem 1.2rem .3rem}
.door .dd{padding:0 1.2rem;font-size:.98rem;line-height:1.55;opacity:.92}
.door .dc{padding:1rem 1.2rem 1.2rem;margin-top:auto;color:var(--mist);font-size:.95rem}
.projects{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.25rem}
@media (max-width:820px){.projects{grid-template-columns:minmax(0,1fr)}}
.project{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:22rem;border-radius:6px;overflow:hidden;text-decoration:none;padding:1.4rem}
.project img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.project::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(18,50,57,.92))}
.project:hover img{transform:scale(1.03)}
.project span{position:relative;z-index:1}
.project .pt{font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.03em;line-height:1.1}
.project.main .pt{font-size:clamp(2.2rem,4.4vw,3.6rem)}
.project .pr{font-size:.95rem;opacity:.9;margin-top:.3rem}
.project .pc{color:var(--mist);font-size:.95rem;margin-top:.8rem}
.proof{border-block:1px solid rgba(191,213,213,.3);padding-block:2.5rem;margin-block:2rem}
.proof ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem 2rem;text-align:center;font-size:1rem;line-height:1.5;color:var(--mist)}
.cta-band{text-align:center;padding-block:4rem 2rem}
.cta-band p{font-size:1.15rem;max-width:46ch;margin:0 auto}
.cta-band .btns{justify-content:center}

/* music */
.disco-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 3rem;margin-bottom:3rem}
@media (max-width:900px){.disco-cols{grid-template-columns:minmax(0,1fr)}}
.disco-cols h3{font-size:1.8rem;margin:0 0 1.2rem}
.disco-cols .disco li{grid-template-columns:3.5rem minmax(0,1fr);font-size:1.02rem}

/* about + services additions */
.fullbio{margin:1rem 0 2rem}
.fullbio summary{cursor:pointer;color:var(--mist);font-size:1.1rem;margin-bottom:1.5rem}
.steps{padding-block:1rem 4rem}
.steps ol{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
@media (max-width:820px){.steps ol{grid-template-columns:minmax(0,1fr)}}
.steps li{counter-increment:s;border:1px solid rgba(191,213,213,.35);border-radius:6px;padding:1.5rem;display:grid;gap:.4rem}
.steps li::before{content:counter(s);font-family:var(--serif);font-size:2.4rem;color:var(--mist);line-height:1}
.steps b{font-weight:500;font-size:1.25rem}
.signup h2{font-size:clamp(2.2rem,5vw,4rem);margin:0 0 1.2rem}
.form select{font:inherit;color:var(--cream);background:var(--teal);border:1px solid var(--mist);border-radius:4px;padding:.85rem;width:100%}
@media (max-width:1000px){.proof ul{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:520px){.proof ul{grid-template-columns:minmax(0,1fr)}}
.videos.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.videos.two .video img{aspect-ratio:16/9;object-fit:cover}@media (max-width:700px){.videos.two{grid-template-columns:minmax(0,1fr)}}
.intro p{text-transform:none}.intro .introsub{font-family:var(--sans);font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);margin-top:.8rem}

/* concise home (oct 13) */
.hero2{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:2rem 4rem;align-items:center;padding-block:clamp(2rem,6vw,5rem) clamp(3rem,7vw,6rem)}
.hero2 h1{font-size:clamp(2.6rem,6vw,5.4rem);margin:0 0 1.4rem;letter-spacing:-.04em}
.hero2 .lede{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.6;max-width:36ch;margin:0}
.archimg{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:62% 50%;border-radius:999px 999px 6px 6px;display:block}
@media (max-width:820px){.hero2{grid-template-columns:minmax(0,1fr)}.archimg{max-width:420px;margin:0 auto;aspect-ratio:1}}
.num{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--mist);line-height:1}
.now,.worklist,.inq{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:1rem 2rem;border-top:1px solid rgba(191,213,213,.3);padding-block:clamp(2.5rem,5vw,4rem)}
.now{grid-template-columns:4rem minmax(0,5fr) minmax(0,7fr);align-items:center}
.now h2,.inq h2{font-size:clamp(2.4rem,5vw,4.4rem);margin:0 0 1rem}
.now .ftext>p:not(.eyebrow):not(.btns),.inq p{font-size:1.1rem;line-height:1.6;margin:0}
@media (max-width:900px){.now{grid-template-columns:minmax(0,1fr)}.now .num{display:none}}
@media (max-width:600px){.worklist,.inq{grid-template-columns:minmax(0,1fr)}.worklist .num,.inq .num{display:none}}
.worklist ul{list-style:none;margin:0;padding:0}
.worklist li a{display:grid;grid-template-columns:minmax(8rem,14rem) minmax(0,1fr) 2rem;gap:.4rem 2rem;align-items:baseline;padding-block:1.3rem;border-bottom:1px solid rgba(191,213,213,.18);text-decoration:none;color:var(--cream)}
.worklist li:last-child a{border-bottom:0}
.worklist .wt{font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.03em;line-height:1.1}
.worklist .wd{font-size:1.05rem;opacity:.85}
.worklist .wa{color:var(--mist);font-size:1.4rem;transition:transform .2s}
.worklist li a:hover .wt{color:var(--mist)}
.worklist li a:hover .wa{transform:translateX(6px)}
@media (max-width:600px){.worklist li a{grid-template-columns:minmax(0,1fr) 2rem}.worklist .wd{grid-column:1}.worklist .wa{grid-row:1;grid-column:2}}
.inq .btns{margin-top:1.4rem}
.now .num{align-self:start;padding-top:.2rem}
/* oct 13: original-site voice, no numbered sections */
.kicker{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--mist);margin:0 0 .8rem}
.now,.worklist,.inq{grid-template-columns:minmax(0,1fr);text-align:left}
.now{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:900px){.now{grid-template-columns:minmax(0,1fr)}}
.worklist h2{font-size:clamp(2rem,4vw,3.4rem);margin:0 0 1rem}
.hero2 h1{font-size:clamp(2.6rem,6vw,5.4rem)}
.inq{text-align:center}.inq .btns{justify-content:center}.inq p{max-width:44ch;margin-inline:auto}
/* oct 13: release-led home */
.rel .meta{font-size:.95rem;margin:0 0 .3rem;opacity:.92}
.rel .credit{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--mist);margin:0 0 1.25rem;max-width:30ch}
nav.more{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.2rem;border-top:1px solid rgba(191,213,213,.3);padding-block:2.5rem 0;margin-top:2rem}
nav.more a{color:var(--mist);text-decoration:none;font-size:1.05rem}
nav.more a:hover{color:var(--cream);text-decoration:underline;text-underline-offset:.3em}
.hero-cover{display:block;width:min(100%,560px);margin:0 auto 2rem}.hero-cover img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.video img{aspect-ratio:16/9;object-fit:cover}
/* clickable covers */
.rel .cover{position:relative;display:block;width:100%;overflow:hidden}
.rel .cover img{transition:transform .4s}
.rel .cover .hover{position:absolute;inset:0;display:grid;place-items:center;background:rgba(18,50,57,.55);color:var(--cream);font-family:var(--serif);font-style:italic;font-size:1.6rem;opacity:0;transition:opacity .25s}
.rel .cover:hover img,.rel .cover:focus-visible img{transform:scale(1.04)}
.rel .cover:hover .hover,.rel .cover:focus-visible .hover{opacity:1}
button.video{border:0;padding:0;background:none;cursor:pointer;width:100%}
/* listen + follow, per project: one quiet row */
.follow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem 3rem;padding-block:4rem 1rem}
.follow .fg{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.follow .fl{font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--mist)}
.follow .icons{gap:1.1rem}
.follow .icons a{width:22px;height:22px}
.follow .fdiv{width:1px;height:3.2rem;background:rgba(191,213,213,.3)}
@media (max-width:600px){.follow .fdiv{display:none}}

/* ===== combined design (approved oct 13): gallery layout + honey accent + paper grain ===== */
:root{--honey:#f9bdbe;--honey-dim:rgba(249,189,190,.4)}
html,body{background:var(--teal-deep) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .85  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.005em}
/* header */
.brand img{width:72px}
.brand .name{align-items:flex-start}
.brand .tag{font-family:var(--sans);font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--honey);margin-top:.35rem}
nav.main>ul{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;gap:.5rem 1.8rem}
nav.main .sub{background:var(--teal-deep);padding:.8rem 1rem;border:1px solid var(--honey-dim)}
.right .btn{border:1px solid var(--honey);color:var(--honey);border-radius:999px;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;padding:.55rem 1.2rem}
.right .btn:hover{background:var(--honey);color:var(--teal-deep)}
/* buttons everywhere: quieter */
.btn{border-width:1px;border-radius:999px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;padding:.75rem 1.7rem}
/* no italics outside cover hovers */
.kicker,.num,.follow .fl{font-style:normal}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--honey-dim),transparent)}
/* home hero */
.hx{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:2rem 3.5rem;align-items:center;padding-block:clamp(2rem,5vw,4rem)}
@media (max-width:820px){.hx{grid-template-columns:minmax(0,1fr)}}
.kick{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--honey);margin:0 0 1rem}
.hx h1{font-size:clamp(2.8rem,6vw,5.2rem);line-height:.98;margin:0 0 1.6rem}
.lk{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--honey);border-bottom:1px solid var(--honey);padding-bottom:3px}
.lk:hover{color:var(--cream);border-color:var(--cream)}
.vframe{border:1px solid var(--honey);padding:6px;min-width:0}
.vframe .video img{aspect-ratio:16/9;object-fit:cover}
.orn{display:flex;align-items:center;gap:1.2rem;justify-content:center;padding-block:1.5rem .5rem}
.orn::before,.orn::after{content:"";height:1px;flex:1;max-width:320px;background:linear-gradient(90deg,transparent,var(--honey))}
.orn::after{background:linear-gradient(90deg,var(--honey),transparent)}
.orn img{width:36px;opacity:.9}
.sec{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;padding-block:1.4rem 1.4rem}
.sec h2{font-size:clamp(1.8rem,3vw,2.4rem);margin:0}
.sec span{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--honey)}
/* edge-to-edge cover grid, titles on hover (always shown on touch screens) */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
@media (max-width:640px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tiles.bleed{margin-inline:calc(-1 * clamp(16px,3vw,40px))}
.tile{position:relative;display:block;overflow:hidden;text-decoration:none;color:var(--cream)}
main a.tile{color:var(--cream)}
.tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .5s}
.tile .hv{position:absolute;inset:0;display:grid;align-content:end;padding:1.1rem 1.2rem;background:linear-gradient(transparent 45%,rgba(14,41,47,.9));opacity:0;transition:opacity .25s;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--honey)}
.tile .hv b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.15rem,1.8vw,1.5rem);letter-spacing:0;text-transform:none;color:var(--cream);margin-bottom:.3rem;line-height:1.15}
.tile:hover img,.tile:focus-visible img{transform:scale(1.04)}
.tile:hover .hv,.tile:focus-visible .hv{opacity:1}
@media (hover:none){.tile .hv{opacity:1}}
/* project links row */
.follow .fl{font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--honey)}
nav.more{border-top:0;position:relative}
nav.more::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--honey-dim),transparent)}
nav.more a{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase}
/* thin gold hairlines between release tiles */
.tiles{gap:15px;overflow:hidden}
.tile{outline:1px solid rgba(249,189,190,.55);outline-offset:7px}
@media (max-width:640px){.tiles>.tile:last-child:nth-child(odd){grid-column:span 2}.tiles>.tile:last-child:nth-child(odd){width:50%;justify-self:center}}
/* floating blossoms */
.blooms{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.blooms span{position:absolute;display:block;opacity:0;animation:bloom 14s ease-in-out infinite}
.blooms svg{display:block;width:100%;height:auto;fill:none;stroke:var(--honey);stroke-width:.7px;stroke-linecap:round;stroke-linejoin:round}
.blooms svg *{vector-effect:non-scaling-stroke}
.blooms svg .d{fill:var(--honey);stroke:none}
@keyframes bloom{0%{opacity:0;transform:translateY(12px) rotate(-12deg) scale(.7)}45%,55%{opacity:.4}100%{opacity:0;transform:translateY(-22px) rotate(14deg) scale(1)}}
.note,.wrap,main{position:relative;z-index:1}
/* hero title on one line, tighter first section */
.hx{padding-block:clamp(1.5rem,3.5vw,2.75rem)}
.hx h1{white-space:nowrap;font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:1.05;margin:0 0 1.1rem}
.blooms img{display:block;width:100%;height:auto}
.wrap.hwrap{z-index:10}


/* ===== combined design on every page ===== */
.hx h1{white-space:normal;text-wrap:balance}
.hx.home h1{white-space:nowrap}
.hx.even{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:820px){.hx.even{grid-template-columns:minmax(0,1fr)}}
.hx .lede,.svc .lede{font-size:1.02rem;line-height:1.75;max-width:52ch;margin:0 0 1.6rem;color:var(--cream)}
.lks{display:flex;flex-wrap:wrap;gap:1rem 1.8rem;margin:0}
.lks.center{justify-content:center;margin-block:2rem 3rem}
.hx-media{min-width:0}
.fimg{display:block;width:100%;height:auto;object-fit:cover}
.vframe .video-frame{margin:0}
.tiles.tri{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles.tri .tile img{aspect-ratio:3/4}
.tile.show .hv{opacity:1;background:linear-gradient(transparent 35%,rgba(14,41,47,.92))}
@media (max-width:640px){.tiles.tri{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.tiles.tri .tile{outline-offset:4px}.tiles.tri .hv{padding:.6rem;font-size:0}.tiles.tri .hv b{font-size:.95rem}}
/* hairline rows: discography and works */
.rows{list-style:none;margin:0 0 2.5rem;padding:0}
.rows li{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:1rem;padding-block:.8rem;border-bottom:1px solid rgba(249,189,190,.18);font-size:1rem;line-height:1.55}
.rows .yr{font-size:.7rem;letter-spacing:.2em;color:var(--honey);padding-top:.25rem;font-variant-numeric:tabular-nums}
.rows a{color:var(--cream)}
.rows.works .t{font-family:var(--serif);font-size:1.3rem}
.rows .wn{display:block;color:var(--mist);font-size:.85rem;margin-top:.3rem}
.disco-cols h3{margin:0 0 .6rem}
.disco-cols h3 .lk{font-family:var(--sans);font-size:.72rem}
@media (max-width:820px){.disco-cols{grid-template-columns:minmax(0,1fr)}}
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;margin-bottom:3rem}
.vgrid.lead>:first-child:nth-last-child(odd){grid-column:1/-1}
@media (max-width:700px){.vgrid{grid-template-columns:minmax(0,1fr)}}
/* about */
.prose-col{max-width:68ch}
.credit{font-size:.9rem;color:var(--mist);margin:0 0 1.5rem}
.tiles.press .ph{aspect-ratio:4/5;display:grid;place-items:center;color:var(--mist);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;outline:1px solid rgba(249,189,190,.55);outline-offset:7px}
@media (max-width:640px){.tiles.press{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles.press .ph{font-size:.55rem;text-align:center;padding:.4rem}}
/* gold-lined grids for steps and reviews: lines sit centered in the gaps */
.lined{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:31px;overflow:hidden;list-style:none;padding:8px 0;margin:0 0 3rem}
.lined>*{outline:1px solid rgba(249,189,190,.55);outline-offset:15px;margin:0;min-width:0}
@media (max-width:760px){.lined{grid-template-columns:minmax(0,1fr)}}
.steps3 li{display:grid;gap:.4rem;padding:.6rem 0}
.steps3 b{font-family:var(--serif);font-weight:400;font-size:1.5rem}
.steps3 span:last-child{color:var(--mist)}
.steps3 .kick{margin:0}
.reviews3 .review{display:flex;flex-direction:column;gap:1rem;text-align:left;align-items:stretch}
.reviews3 .review img{border-radius:0;max-width:none}
.reviews3 .review p{font-size:.95rem;line-height:1.7}
.reviews3 figcaption{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--honey)}
.reviews3 figcaption a{color:var(--honey)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;font-size:1.05rem}
.ticks li{display:grid;grid-template-columns:1.4rem minmax(0,1fr)}
.ticks li::before{content:"";width:.7rem;height:1px;background:var(--honey);margin-top:.8em}
.svc{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.5rem 3rem;margin-bottom:3rem}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 3.5rem;align-items:center;margin-bottom:3rem}
.pair .ticks{margin-bottom:1.6rem}
@media (max-width:820px){.pair{grid-template-columns:minmax(0,1fr)}}
/* contact */
.contact{padding-block:clamp(1.5rem,3.5vw,2.75rem) 2rem}
.contact h1{font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:1.05;margin:0 0 1.1rem}
.contact .em{margin:0 0 2rem}.contact .em .kick{display:block;margin:0 0 .3rem}
.contact .vframe img{margin:0}
.form label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.form label small{letter-spacing:.1em;text-transform:none;font-size:.8rem}
.form input,.form textarea,.form select{border:1px solid var(--honey-dim);border-radius:0;background:transparent;letter-spacing:0;text-transform:none}
.form select{background:var(--teal-deep)}
.form input:focus,.form textarea:focus,.form select:focus{outline:1px solid var(--honey);outline-offset:2px}
.signup{padding-block:1rem 4rem}
.signup .kick{margin-bottom:.6rem}
.signup h2{font-size:clamp(1.8rem,3vw,2.4rem);margin:0 0 .8rem}
.signup input{background:transparent;border:1px solid var(--honey-dim);color:var(--cream)}
.fullbio summary{list-style:none;margin:0;color:inherit;font-size:inherit}
.fullbio summary::-webkit-details-marker{display:none}
.fullbio summary .sec span::after{content:" +";}
.fullbio[open] summary .sec span::after{content:" −"}
.tiles.press .ph{aspect-ratio:3/2}
.signup .kick{font-size:.68rem;letter-spacing:.3em;max-width:none}
.tiles.tri>.tile:last-child{grid-column:auto;width:auto}
.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:640px){.tiles.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.brand .sig{word-spacing:.12em}
.tile:focus .hv{opacity:1}
.vframe .tile{outline:none}
.brand .name{align-items:center}.brand .tag{margin-top:.9rem;text-align:center}

nav.main a{color:var(--mist)}nav.main a:hover,nav.main a:focus-visible{color:var(--honey)}
/* self-drawing line art */
.blooms span{animation-name:bloomhold;animation-timing-function:linear;animation-fill-mode:backwards}
@keyframes bloomhold{0%{opacity:0;transform:translateY(0)}3%{opacity:.22}80%{opacity:.22}100%{opacity:0;transform:translateY(-14px)}}
.blooms svg{display:block;width:100%;height:auto;overflow:visible}
.blooms svg path{fill:none;stroke:var(--honey);stroke-width:.7px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:linedraw 2.4s ease-out forwards}
@keyframes linedraw{to{stroke-dashoffset:0}}
.rows.works .t,.rows.works .t a{font-style:italic}
.blooms span{position:absolute}
.blooms span svg,.blooms span img{animation:linesout 18s linear infinite backwards}
.blooms span img{position:absolute;inset:0;width:100%;height:auto;animation-name:artin}
@keyframes linesout{0%,56%{opacity:1}64%,100%{opacity:0}}
@keyframes artin{0%,54%{opacity:0}64%,100%{opacity:1}}
.contact .kick.one{font-size:clamp(.5rem,1.1vw,.62rem);letter-spacing:.16em;white-space:nowrap}
@media (max-width:520px){.contact .kick.one{white-space:normal}}
.tiles + .lks{margin-top:2.2rem}

/* client reviews: reviewer up top, quote below */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin:0 0 3rem}
@media (max-width:1000px){.reviews{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.reviews{grid-template-columns:minmax(0,1fr)}}
.reviews .review{margin:0;min-width:0;display:flex;flex-direction:column;gap:1.3rem;padding:1.6rem 1.5rem 1.8rem;background:var(--teal-deep);border-top:2px solid var(--honey);position:relative}
.reviews .review{text-align:center}
.reviews .review figcaption{display:flex;flex-direction:column;align-items:center;gap:.9rem;padding-bottom:1.2rem;border-bottom:1px solid rgba(249,189,190,.25)}
.reviews .review figcaption img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;max-width:none;box-shadow:0 0 0 1px var(--teal-deep),0 0 0 2px rgba(249,189,190,.6)}
.reviews .review figcaption span{display:grid;gap:.3rem;min-width:0}
.reviews .review figcaption b{font-weight:500;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--honey)}
.reviews .review figcaption a{font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.25;color:var(--mist)}
.reviews .review blockquote{margin:0;font-size:.95rem;line-height:1.7;color:var(--cream)}
.reviews .review blockquote::before,.reviews .review blockquote::after{font-family:var(--serif);font-size:1.9em;line-height:0;vertical-align:-.32em;color:var(--honey)}
.reviews .review blockquote::before{content:"“";margin-right:.08em}
.reviews .review blockquote::after{content:"”";margin-left:.05em}

/* about: press photos with a small download arrow in the corner */
.ptiles .ptile{margin:0;position:relative;min-width:0}
.ptiles .ptile .dl{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(14,41,47,.6);border:1px solid rgba(249,189,190,.6);color:var(--cream);opacity:.75;transition:opacity .2s,background .2s,color .2s;backdrop-filter:blur(2px)}
.ptiles .ptile .dl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ptiles .ptile:hover .dl,.ptiles .ptile .dl:focus-visible{opacity:1}
.ptiles .ptile .dl:hover{background:var(--honey);color:var(--teal)}
/* tiles with a linked collaborator: stretched cover link, name link sits above it */
.tile .cover{position:absolute;inset:0;z-index:1}
.tile .hv{z-index:2;pointer-events:none}
.tile .hv .pl{pointer-events:auto;color:inherit;text-decoration:underline;text-decoration-color:rgba(249,189,190,.6);text-underline-offset:3px}
.tile .hv .pl:hover{color:var(--cream)}
.tile:focus-within .hv{opacity:1}
.tile:focus-within img{transform:scale(1.04)}
/* contact: split hero like about, then direct details beside a framed form */
.reach{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:2.5rem clamp(2rem,5vw,4.5rem);align-items:start;padding-block:1rem clamp(3rem,6vw,4.5rem)}
@media (max-width:820px){.reach{grid-template-columns:minmax(0,1fr)}}
.reach h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:0 0 1.4rem;line-height:1.1}
.direct dl{margin:0;display:grid}
.direct dl>div{padding-block:1.1rem;border-top:1px solid rgba(249,189,190,.35);display:grid;gap:.35rem;min-width:0}
.direct dl>div:last-child{border-bottom:1px solid rgba(249,189,190,.35)}
.direct dt{margin:0}
.direct dd{margin:0;font-size:1rem;line-height:1.7;overflow-wrap:anywhere}
.direct dd .icons{justify-content:flex-start;gap:1.1rem}
.panel{border:1px solid rgba(249,189,190,.55);padding:clamp(1.25rem,3vw,2.25rem);min-width:0}
.panel .form{gap:1.2rem}
/* signup: small serif line above a large pink spaced-caps heading */
.signup .sg-top{font-family:var(--serif);font-size:1.3rem;color:var(--cream);margin:0 auto .6rem}
.signup h2.sg-h{font-family:var(--sans);font-weight:400;font-size:clamp(1.5rem,3.4vw,2.5rem);letter-spacing:.2em;text-transform:uppercase;color:var(--honey);line-height:1.2;margin:0 0 1.2rem;text-wrap:balance}
/* hexagons carried through: honeycomb cells, flat-top like the logo frame */
:root{--hex:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.ticks li::before{width:.62rem;height:.54rem;background:var(--honey);clip-path:var(--hex);margin-top:.5em}
/* review photos: a pink cell with the photo inset 2px */
.reviews .review figcaption .hexav{display:block;width:104px;height:90px;padding:2px;background:rgba(249,189,190,.7);clip-path:var(--hex);flex:none}
.reviews .review figcaption .hexav img{width:100%;height:100%;border-radius:0;box-shadow:none;clip-path:var(--hex)}
/* press photo download + video play buttons: outlined cells */
.ptiles .ptile .dl{width:40px;height:35px;border-radius:0;border:0;background:rgba(249,189,190,.7);clip-path:var(--hex);backdrop-filter:none}
.ptiles .ptile .dl::before{content:"";position:absolute;inset:1px;background:rgba(14,41,47,.78);clip-path:var(--hex);transition:background .2s}
.ptiles .ptile .dl svg{position:relative}
.ptiles .ptile .dl:hover::before,.ptiles .ptile .dl:focus-visible::before{background:var(--honey)}
.ptiles .ptile .dl:hover,.ptiles .ptile .dl:focus-visible{color:var(--teal-deep)}
/* contact without the form: everything in the hero, email first */
.ci .ci-label{margin:.4rem 0 .5rem}
.ci .ci-email{display:inline-block;font-family:var(--serif);font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.2;color:var(--cream);text-decoration:underline;text-decoration-color:rgba(249,189,190,.6);text-underline-offset:6px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.ci .ci-email:hover{text-decoration-color:var(--honey)}
.ci-list{margin:2.2rem 0 0;display:grid;max-width:30rem}
.ci-list>div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;align-items:center;padding-block:.85rem;border-top:1px solid rgba(249,189,190,.3)}
.ci-list>div:last-child{border-bottom:1px solid rgba(249,189,190,.3)}
.ci-list dt{margin:0}
.ci-list dd{margin:0;font-size:.95rem;line-height:1.6}
.ci-list dd .icons{gap:1.1rem}
.contact-hx.ci{padding-block:clamp(2rem,5vw,4rem) clamp(3rem,7vw,5.5rem)}
/* contact form under the hero */
.msg{padding-block:1rem clamp(3rem,6vw,4.5rem)}
.msg .panel{max-width:46rem;margin-inline:auto}
.msg h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:0 0 1.4rem;line-height:1.1}
.form .err{color:var(--honey);margin:0}
.form button:disabled{opacity:.5}
.form [hidden]{display:none!important}
.signup form [hidden]{display:none!important}