/* ============================================================
   Roselia Nails
   Palette sampled with palettegen from the brand's own photography.
   The hero footage is pale, so the legibility system LIGHTENS
   behind text rather than darkening.
   ============================================================ */

:root{
  --canvas:#F6EEEA;
  --canvas-2:#F1E4DE;
  --canvas-deep:#241713;
  --panel:#FCF7F4;
  --rose:#D99485;
  --rose-deep:#BC7466;
  --accent:#A8323F;
  --accent-hover:#8A2734;
  --accent-muted:#E7C4C0;
  --gold:#B8934F;
  --gold-soft:#D9BE8C;
  --text-secondary:#6A534B;
  --text-primary:#2A1A16;
  --on-deep:#F3E4DC;
  --on-deep-2:#C4A99E;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* light halo, because hero type is dark over pale footage */
  --tshadow:0 1px 2px rgba(252,247,244,.95),0 2px 10px rgba(252,247,244,.9),0 8px 40px rgba(252,247,244,.75);

  --display:"Playfair Display",Georgia,serif;
  --body:"Jost",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;

  --hero-vh:600;
  --gut:clamp(1.15rem,4vw,4.5rem);
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
  margin:0;padding:0;
}

body{
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(15.5px,1.02vw,17.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.06;margin:0;letter-spacing:-.012em}
h2{font-size:clamp(2.05rem,4.4vw,3.9rem)}
h2 em{font-style:italic;color:var(--accent)}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--panel);
  padding:.7rem 1.1rem;border-radius:0 0 8px 0;font-size:.9rem;text-decoration:none}
.skip:focus{left:0}

.kicker{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.15rem;
}
.kicker.gold{color:var(--gold-soft)}

.lede{color:var(--text-secondary);max-width:56ch;margin-top:1.1rem;font-size:1.03rem}
.lede.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------------- environment layer ---------------- */

.env{position:fixed;inset:0;z-index:0;pointer-events:none}

.env-glow{
  position:absolute;inset:-25%;
  background:
    radial-gradient(ellipse 55% 45% at 20% 16%, rgba(217,148,133,.20), transparent 62%),
    radial-gradient(ellipse 50% 42% at 84% 74%, rgba(231,196,192,.26), transparent 60%);
  animation:envdrift 96s var(--ease-soft) -24s infinite alternate;
  will-change:transform;
}
@keyframes envdrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(2.6%,-2.2%,0) scale(1.08)}
}

.env-petals{
  position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(ellipse 7px 4px at 12% 18%, rgba(188,116,102,.30), transparent 70%),
    radial-gradient(ellipse 5px 3px at 74% 32%, rgba(217,148,133,.26), transparent 70%),
    radial-gradient(ellipse 8px 5px at 36% 68%, rgba(231,196,192,.34), transparent 70%),
    radial-gradient(ellipse 6px 3px at 88% 82%, rgba(188,116,102,.22), transparent 70%),
    radial-gradient(ellipse 5px 3px at 56% 8%,  rgba(217,148,133,.22), transparent 70%);
  animation:petalfall 90s linear -30s infinite;
  will-change:transform;
}
@keyframes petalfall{
  0%{transform:translate3d(0,-6%,0)}
  100%{transform:translate3d(-2%,106%,0)}
}

.env-grain{
  position:absolute;inset:0;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- nav ---------------- */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;gap:1.5rem;
  padding:.8rem var(--gut);
  background:linear-gradient(to bottom,rgba(246,238,234,.94),rgba(246,238,234,.6) 62%,rgba(246,238,234,0));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .5s var(--ease);
}
.nav-mark{display:flex;align-items:center;gap:.5rem;text-decoration:none;margin-right:auto}
.nav-rose{width:25px;height:25px;fill:none;stroke:var(--accent);stroke-width:1.5}
.nav-word{font-family:var(--display);font-weight:600;font-size:1.32rem;letter-spacing:.05em}
.nav-links{display:flex;gap:1.55rem;font-size:.85rem;font-weight:500;letter-spacing:.03em}
.nav-links a{text-decoration:none;color:var(--text-secondary);position:relative;transition:color .35s var(--ease)}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after{transform:scaleX(1)}
@media (max-width:860px){.nav-links{display:none}}

/* ---------------- buttons ---------------- */

.btn{
  display:inline-block;background:var(--accent);color:#FFF7F4;text-decoration:none;
  font-family:var(--body);font-weight:500;font-size:.93rem;letter-spacing:.055em;
  padding:.88rem 1.85rem;border:0;border-radius:2px;cursor:pointer;text-shadow:none;
  transition:background .38s var(--ease),transform .38s var(--ease),box-shadow .38s var(--ease);
  box-shadow:0 1px 0 rgba(42,26,22,.06);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 26px rgba(168,50,63,.22)}
.btn-sm{padding:.6rem 1.15rem;font-size:.83rem}
.btn-lg{padding:1.05rem 2.6rem;font-size:1rem}
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ---------------- hero ---------------- */

.hero{position:relative;height:calc(var(--hero-vh) * 1vh);z-index:1}

@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:100vh}
  
  
  
  /* the composed resting frame, fetched only on the screens that actually show it */
  
  .scrim{
    background:
      radial-gradient(ellipse 96% 52% at 50% 40%, rgba(252,247,244,.80) 0%, rgba(252,247,244,.46) 55%, rgba(252,247,244,.10) 100%),
      linear-gradient(to bottom, rgba(252,247,244,.30) 0%, rgba(252,247,244,0) 42%);
  }
}

/* ---------------- the size strip signature ---------------- */

.sizestrip-rule{
  position:relative;z-index:2;
  display:flex;justify-content:center;
  padding:clamp(2.6rem,6vw,4.4rem) var(--gut);
  background:var(--canvas);
}
.sizestrip-rule .sr{width:min(280px,60vw);height:auto;overflow:visible}
.sr-line{stroke:var(--gold);stroke-width:1;opacity:.5;
  stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.6s var(--ease)}
.sr-box{fill:none;stroke:var(--gold);stroke-width:1.4;opacity:0;transition:opacity .5s var(--ease)}
.sizestrip-rule.in .sr-line{stroke-dashoffset:0}
.sizestrip-rule.in .sr-box{opacity:.85}
.sizestrip-rule.in .sr-box:nth-of-type(1){transition-delay:.55s}
.sizestrip-rule.in .sr-box:nth-of-type(2){transition-delay:.7s}
.sizestrip-rule.in .sr-box:nth-of-type(3){transition-delay:.85s}
.sizestrip-rule.in .sr-box:nth-of-type(4){transition-delay:1s}

/* ---------------- generic section + entrances ---------------- */

.sec{position:relative;z-index:2;padding:clamp(3.6rem,8vw,7.5rem) var(--gut)}
.sec-head{text-align:center;max-width:60ch;margin:0 auto clamp(2.4rem,5vw,4rem)}

.reveal .part{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in .part{opacity:1;transform:none}
.reveal.in .part:nth-child(1){transition-delay:0s}
.reveal.in .part:nth-child(2){transition-delay:.09s}
.reveal.in .part:nth-child(3){transition-delay:.18s}
.reveal.in .part:nth-child(4){transition-delay:.27s}
/* retire the stagger so later hovers never lag; matches the nth-child specificity */
.reveal.in.done .part:nth-child(1),
.reveal.in.done .part:nth-child(2),
.reveal.in.done .part:nth-child(3),
.reveal.in.done .part:nth-child(4){transition-delay:0s}

/* ---------------- the trade ---------------- */

.trade{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;max-width:1240px;margin:0 auto}
.swaps{margin-top:2.4rem;display:flex;flex-direction:column;gap:.1rem}
.swap{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.6rem 1.4rem;
  padding:1rem 0;border-top:1px solid rgba(184,147,79,.28)}
.swap:last-child{border-bottom:1px solid rgba(184,147,79,.28)}
.swap .from{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-secondary);text-decoration:line-through;text-decoration-color:rgba(168,50,63,.6);
  line-height:1.5}
.swap .to{font-family:var(--display);font-size:clamp(1.02rem,1.6vw,1.35rem);text-align:right;white-space:nowrap}
@media (max-width:560px){
  .swap{grid-template-columns:1fr}
  .swap .to{text-align:left;white-space:normal}
}
.trade-fig img{border-radius:2px;box-shadow:0 24px 60px rgba(42,26,22,.13)}
@media (max-width:880px){.trade{grid-template-columns:1fr}.trade-fig{order:-1}}

/* ---------------- collection ---------------- */

.collection{max-width:1240px;margin:0 auto}
.coll-grid{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:clamp(.9rem,1.8vw,1.5rem)}
.coll-a{grid-row:span 2}
.coll-grid figure{margin:0;position:relative;overflow:hidden;border-radius:2px}
.coll-grid img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.coll-grid figure:hover img{transform:scale(1.035)}
.coll-a img{aspect-ratio:4/5}
.coll-b img,.coll-c img{aspect-ratio:16/11}
.coll-grid figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.3rem .95rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#FFF7F4;
  background:linear-gradient(to top,rgba(36,23,19,.62),transparent);
}
.coll-cta{text-align:center;margin-top:clamp(2rem,4vw,3rem)}
@media (max-width:820px){
  .coll-grid{grid-template-columns:1fr}
  .coll-a{grid-row:auto}
  .coll-a img{aspect-ratio:4/3}
}

/* ---------------- the detail (deep register) ---------------- */

.detail{background:var(--canvas-deep);color:var(--on-deep);overflow:hidden}
.detail::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 78% 20%, rgba(188,116,102,.22), transparent 62%);
}
.detail-inner{position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;max-width:1240px;margin:0 auto}
.detail h2{color:var(--on-deep)}
.detail .lede{color:var(--on-deep-2);max-width:44ch}
.detail-fig img{border-radius:2px;box-shadow:0 30px 70px rgba(0,0,0,.42)}
.rose-draw{width:96px;height:auto;margin-top:2.6rem;overflow:visible}
.rd{fill:none;stroke:var(--gold-soft);stroke-width:1.3;stroke-linecap:round;
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
  transition:stroke-dashoffset 2.2s var(--ease)}
.detail.in .rd{stroke-dashoffset:0}
.detail.in .rd:nth-of-type(2){transition-delay:.3s}
.detail.in .rd:nth-of-type(3){transition-delay:.5s}
.detail.in .rd:nth-of-type(4){transition-delay:.7s}
.detail.in .rd:nth-of-type(5){transition-delay:.85s}
.detail.in .rd:nth-of-type(6){transition-delay:1s}
@media (max-width:880px){.detail-inner{grid-template-columns:1fr}}

/* ---------------- the press moment ---------------- */

.press{max-width:1080px;margin:0 auto;text-align:center}
.press-stage{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;justify-items:start;max-width:820px;margin:0 auto;text-align:left}

.press-pad{position:relative;width:270px;display:flex;flex-direction:column;align-items:center}
.pad-bed{
  position:absolute;top:74px;left:50%;transform:translateX(-50%);
  width:104px;height:158px;border-radius:52px 52px 46px 46px;
  background:rgba(184,147,79,.10);border:1px dashed rgba(184,147,79,.5);
}
.pad-nail{
  position:absolute;top:74px;left:50%;width:96px;
  transform:translateX(-50%) translateY(calc(-46px + 46px * var(--p,0))) scale(calc(1.12 - .12*var(--p,0)));
  filter:drop-shadow(0 calc(20px - 16px * var(--p,0)) calc(24px - 18px * var(--p,0)) rgba(42,26,22,calc(.32 - .18*var(--p,0))));
}
.nail-svg{width:100%;height:auto}
.pad-ring{
  position:absolute;top:52px;left:50%;transform:translateX(-50%) rotate(-90deg);
  width:206px;height:206px;
}
.pad-ring .pr-arc,.pad-ring circle{stroke-dasharray:339}
.press-btn{
  margin-top:272px;background:transparent;border:1px solid rgba(168,50,63,.42);
  color:var(--accent);border-radius:2px;padding:.78rem 1.5rem;cursor:pointer;
  font-size:.88rem;letter-spacing:.055em;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.press-btn:hover{background:rgba(168,50,63,.07)}
.press.done .press-btn{background:var(--accent);color:#FFF7F4;border-color:var(--accent)}
.press-help{margin-top:.85rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary);text-align:center}

.press-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.15rem}
.ps{display:flex;gap:1rem;align-items:baseline;opacity:.32;
  transition:opacity .7s var(--ease),transform .7s var(--ease);transform:translateX(-6px)}
.ps.lit{opacity:1;transform:none}
.ps-n{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--gold);flex:0 0 auto}
.ps-t{font-family:var(--display);font-size:clamp(1rem,1.7vw,1.32rem);line-height:1.3}

.press-done{
  margin-top:clamp(2.2rem,4vw,3.2rem);
  font-family:var(--display);font-size:clamp(1.3rem,2.6vw,2rem);color:var(--accent);
  opacity:0;transform:translateY(12px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.press.done .press-done{opacity:1;transform:none}

@media (max-width:760px){
  .press-stage{grid-template-columns:1fr;justify-items:center;text-align:center}
  .press-steps{align-items:center}
  .ps{justify-content:center}
}

/* ---------------- fit ---------------- */

.fit-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;max-width:1240px;margin:0 auto}
.sizes{display:flex;gap:.55rem;margin-top:2.2rem;flex-wrap:wrap}
.size{
  display:flex;align-items:center;gap:.5rem;background:transparent;
  border:1px solid rgba(184,147,79,.45);border-radius:2px;
  padding:.62rem 1rem;cursor:pointer;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.size:hover{border-color:var(--gold)}
.sz-box{width:11px;height:11px;border:1.4px solid var(--gold);display:inline-block;position:relative}
.sz-box::after{
  content:"";position:absolute;inset:1.5px;background:var(--accent);
  transform:scale(0);transition:transform .3s var(--ease);
}
.size.on{border-color:var(--accent);background:rgba(168,50,63,.05)}
.size.on .sz-box{border-color:var(--accent)}
.size.on .sz-box::after{transform:scale(1)}
.sz-l{font-family:var(--mono);font-size:.82rem;letter-spacing:.1em}
.size-note{margin-top:1.1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary)}
.fit-fig img{border-radius:2px;box-shadow:0 24px 60px rgba(42,26,22,.13)}
@media (max-width:880px){.fit-inner{grid-template-columns:1fr}}

/* ---------------- wear ---------------- */

.wear{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;max-width:1240px;margin:0 auto}
.wear-fig img{border-radius:2px;box-shadow:0 24px 60px rgba(42,26,22,.15)}
.wear-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.2rem}
.wc{background:var(--panel);border:1px solid rgba(184,147,79,.22);border-radius:2px;padding:1.35rem 1.25rem}
.wc-h{font-family:var(--display);font-size:1.25rem;margin-bottom:.4rem}
.wc-b{font-size:.92rem;color:var(--text-secondary)}
@media (max-width:880px){.wear{grid-template-columns:1fr}.wear-fig{order:-1}}
@media (max-width:520px){.wear-cards{grid-template-columns:1fr}}

/* ---------------- proof ---------------- */

.proof{max-width:1240px;margin:0 auto;padding-bottom:clamp(2.4rem,5vw,4rem)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.4vw,1.1rem)}
.pf{margin:0;overflow:hidden;border-radius:2px}
.pf img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s var(--ease)}
.pf:hover img{transform:scale(1.04)}
@media (max-width:880px){.proof-grid{grid-template-columns:1fr 1fr}}

/* ---------------- questions ---------------- */

.questions{max-width:820px;margin:0 auto}
.faq{border-top:1px solid rgba(184,147,79,.3)}
.q{border-bottom:1px solid rgba(184,147,79,.3)}
.q summary{
  list-style:none;cursor:pointer;padding:1.35rem 2.4rem 1.35rem 0;position:relative;
  font-family:var(--display);font-size:clamp(1.05rem,1.9vw,1.4rem);
  transition:color .35s var(--ease);
}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--accent)}
.q summary::after{
  content:"";position:absolute;right:.3rem;top:50%;width:11px;height:11px;
  border-right:1.4px solid var(--gold);border-bottom:1.4px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease);
}
.q[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.q p{padding:0 1rem 1.6rem 0;color:var(--text-secondary);max-width:62ch}

/* ---------------- shop ---------------- */

.shop{position:relative;overflow:hidden;text-align:center;isolation:isolate}
.shop-bg{position:absolute;inset:0;margin:0;z-index:-1}
.shop{padding-top:clamp(5rem,10vw,9rem);padding-bottom:clamp(5rem,10vw,9rem)}
.shop-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;opacity:.9}
.shop::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 62% 58% at 50% 50%, rgba(250,244,241,.93) 0%, rgba(250,244,241,.74) 52%, rgba(250,244,241,.30) 100%),
    linear-gradient(to bottom, var(--canvas) 0%, rgba(246,238,234,.35) 22%, rgba(246,238,234,.35) 78%, var(--canvas) 100%);
}
.shop-inner{max-width:60ch;margin:0 auto;padding:clamp(1rem,3vw,2.5rem) 0}
.shop .btn{margin-top:2.3rem}
.shop-note{margin-top:1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-secondary)}

/* ---------------- footer ---------------- */

.foot{position:relative;z-index:2;background:var(--canvas-deep);color:var(--on-deep-2);
  padding:clamp(3rem,6vw,4.5rem) var(--gut)}
.foot-inner{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;
  align-items:center;gap:1.6rem;text-align:center}
.foot .nav-rose{stroke:var(--gold-soft)}
.foot .nav-word{color:var(--on-deep)}
.foot-links{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;font-size:.86rem}
.foot-links a{text-decoration:none;color:var(--on-deep-2);transition:color .35s var(--ease)}
.foot-links a:hover{color:var(--on-deep)}
.foot-fine{font-size:.8rem;color:rgba(196,169,158,.72);max-width:52ch}

/* ---------------- short screens ---------------- */

@media (max-height:560px){}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
  .reveal .part{opacity:1;transform:none}
  .sr-line{stroke-dashoffset:0}
  .sr-box{opacity:.85}
  .rd{stroke-dashoffset:0}
  .ps{opacity:1;transform:none}
  .press-done{opacity:1;transform:none}
  .env-glow,.env-petals{animation:none}
  .trade-fig,.fit-fig,.wear-fig,.detail-fig{transform:none}
}

/* pause every loop when the tab is hidden or the element is off-screen */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------------- the set grid ---------------- */

.setgrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2.2vw,1.9rem) clamp(.9rem,1.8vw,1.4rem);
}

.setcard{margin:0}

.setcard-img{
  position:relative;overflow:hidden;border-radius:2px;
  background:var(--panel);
  box-shadow:0 10px 26px rgba(42,26,22,.09);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease);
}
.setcard-img img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  transition:transform 1.05s var(--ease)}
.setcard:hover .setcard-img{transform:translateY(-3px);box-shadow:0 20px 40px rgba(42,26,22,.16)}
.setcard:hover .setcard-img img{transform:scale(1.045)}

.setcard-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;
  margin-top:.75rem;padding-bottom:.55rem;
  border-bottom:1px solid rgba(184,147,79,.3);
}
.setcard-name{font-weight:600;
  font-family:var(--display);font-size:clamp(.98rem,1.25vw,1.14rem);
  
}
.setcard-price{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.05em;
  color:var(--accent);flex:0 0 auto;
}

.coll-note{
  margin-top:clamp(2rem,4vw,3rem);text-align:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);
}
.coll-cta{text-align:center;margin-top:1.6rem}

@media (max-width:980px){ .setgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:660px){ .setgrid{grid-template-columns:repeat(2,1fr)} }

.shop-price{
  margin-top:1.4rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary);
}

/* ---------------- bolder type pass ---------------- */

h1,h2,h3{font-weight:600}

.swap .to,
.ps-t,
.wc-h,
.q summary,
.setcard-name{font-weight:600}

.lede{font-weight:400;color:var(--text-secondary)}

.kicker,
.size-note,
.press-help,
.shop-note,
.shop-price,
.coll-note,
.setcard-price{font-weight:400}

.sz-l{font-weight:400}
.foot-links{font-weight:500}
.foot-fine{font-weight:400}

/* the display face gets slightly tighter tracking as it gets heavier */
h1,h2{letter-spacing:-.018em}

/* ---------------- why: three minimal feature rows ---------------- */

.why{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
  max-width:1240px;margin:0 auto;
}
.why-fig img{border-radius:2px;box-shadow:0 24px 60px rgba(42,26,22,.13)}
@media (max-width:880px){ .why{grid-template-columns:1fr} .why-fig{order:-1} }

.feats{list-style:none;margin:2.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:1.5rem}

.feat{display:flex;align-items:flex-start;gap:1rem}

.feat-ico{
  flex:0 0 auto;width:40px;height:40px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(231,196,192,.34);
  border:1px solid rgba(184,147,79,.34);
}
.feat-ico svg{
  width:20px;height:20px;fill:none;
  stroke:var(--accent);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}

.feat-t{display:flex;flex-direction:column;gap:.16rem}
.feat-t strong{
  font-family:var(--body);font-weight:600;font-size:1.02rem;
  color:var(--text-primary);letter-spacing:.005em;
}
.feat-t span{color:var(--text-secondary);font-size:.95rem;line-height:1.5}

/* ---------------- the rose illustration ---------------- */

.rose-art{
  width:clamp(150px,17vw,210px);
  height:auto;
  margin-top:2.4rem;
  opacity:.92;
}

/* ---------------- Playfair sits differently to Bodoni ---------------- */

h1,h2{letter-spacing:-.014em}

.nav-word{letter-spacing:.01em}

/* the rose sits as a corner flourish, not a floating object in the text column */
.detail{overflow:hidden}
.detail-copy{position:relative}
.rose-art{
  position:absolute;
  right:clamp(-2.5rem,-2vw,0rem);
  bottom:clamp(-5.5rem,-6vw,-3rem);
  width:clamp(180px,20vw,290px);
  margin-top:0;
  opacity:.9;
  pointer-events:none;
  z-index:0;
}
.detail-copy .kicker,
.detail-copy h2,
.detail-copy .lede{position:relative;z-index:1}

@media (max-width:880px){
  .rose-art{
    position:static;
    display:block;
    margin:2.2rem auto 0;
    width:clamp(150px,42vw,210px);
  }
}
@media (max-height:640px) and (min-width:881px){
  .rose-art{display:none}
}

/* ---------------- about: the story ---------------- */

.about{background:var(--panel);position:relative;z-index:2}

.about-inner{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
  max-width:1180px;margin:0 auto;
}

.about-fig{margin:0;position:sticky;top:6.5rem}
.about-fig img{
  border-radius:2px;
  box-shadow:0 26px 60px rgba(42,26,22,.16);
}

.about-copy h2{margin-bottom:.4rem}
.about-copy .lede{max-width:52ch;margin-top:1.25rem}
.about-copy .lede em{
  font-style:normal;
  font-family:var(--display);
  font-weight:600;
  color:var(--text-primary);
}

.about-sign{
  margin-top:2.4rem;
  font-family:var(--display);
  font-weight:600;
  font-style:italic;
  font-size:clamp(1.3rem,2.4vw,1.9rem);
  color:var(--accent);
}
.about-by{
  margin-top:.5rem;
  font-family:var(--mono);
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);
}
.about-by::before{content:"— "}

@media (max-width:900px){
  .about-inner{grid-template-columns:1fr}
  .about-fig{position:static}
  .about-fig img{max-height:56vh;width:100%;object-fit:cover}
}

/* keep the detail copy clear of the rose flourish */
.detail-copy .lede{max-width:30ch}
@media (max-width:880px){ .detail-copy .lede{max-width:52ch} }

/* ================= nav: the About dropdown ================= */

.nav-links{align-items:center}

.nav-drop{position:relative}

.nav-drop-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:transparent;border:0;padding:.35rem 0;cursor:pointer;
  font-family:var(--body);font-size:.85rem;font-weight:500;letter-spacing:.03em;
  color:var(--text-secondary);
  transition:color .35s var(--ease);
}
.nav-drop-btn:hover,
.nav-drop.open .nav-drop-btn{color:var(--text-primary)}

.caret{
  width:10px;height:7px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--ease);
}
.nav-drop.open .caret{transform:rotate(180deg)}

.nav-menu{
  position:absolute;top:calc(100% + .75rem);left:50%;
  transform:translateX(-50%) translateY(-6px);
  margin:0;padding:.5rem 0;list-style:none;
  min-width:230px;
  background:var(--panel);
  border:1px solid rgba(184,147,79,.28);
  border-radius:3px;
  box-shadow:0 18px 44px rgba(42,26,22,.16);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.nav-drop.open .nav-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-menu li{margin:0}
.nav-menu a{
  display:block;padding:.6rem 1.25rem;
  font-size:.86rem;color:var(--text-secondary);text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.nav-menu a::after{display:none}
.nav-menu a:hover{background:rgba(231,196,192,.3);color:var(--text-primary)}

/* ================= burger + mobile menu ================= */

.burger{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;
  background:transparent;border:0;cursor:pointer;
}
.burger-bar{
  display:block;height:1.5px;width:100%;background:var(--text-primary);
  transition:transform .35s var(--ease),opacity .25s var(--ease);
}
.burger[aria-expanded="true"] .burger-bar:nth-child(2){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-bar:nth-child(3){opacity:0}
.burger[aria-expanded="true"] .burger-bar:nth-child(4){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;top:0;left:0;right:0;z-index:110;
  padding:5.2rem var(--gut) 2rem;
  background:var(--panel);
  border-bottom:1px solid rgba(184,147,79,.3);
  box-shadow:0 20px 50px rgba(42,26,22,.16);
  display:flex;flex-direction:column;gap:.15rem;
  transform:translateY(-8px);opacity:0;
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.mobile-menu[hidden]{display:none}
.mobile-menu.open{transform:none;opacity:1}
.mobile-menu a{
  padding:.72rem 0;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:1.18rem;
  color:var(--text-primary);
  border-bottom:1px solid rgba(184,147,79,.18);
}
.mobile-menu a:last-of-type{border-bottom:0}
.mm-head{
  margin-top:1.1rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
}
.mobile-menu .mm-cta{
  margin-top:1.4rem;text-align:center;color:#FFF7F4;border-bottom:0;
  font-family:var(--body);font-size:.93rem;font-weight:500;
}

@media (max-width:860px){
  .burger{display:flex}
  .nav-cta{display:none}
}
@media (min-width:861px){
  .mobile-menu{display:none!important}
}

/* ================= sizing ================= */

.sizing{max-width:1080px;margin:0 auto}

.size-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

.size-table{
  width:100%;border-collapse:collapse;
  min-width:520px;
  background:var(--panel);
  border:1px solid rgba(184,147,79,.3);
}
.size-table th,
.size-table td{
  padding:.85rem .7rem;text-align:center;
  border-bottom:1px solid rgba(184,147,79,.22);
  font-size:.95rem;
}
.size-table thead th{
  font-family:var(--mono);font-weight:400;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);
  background:rgba(231,196,192,.34);
  border-bottom:1px solid rgba(184,147,79,.34);
}
.size-table tbody th{
  font-family:var(--display);font-weight:600;font-size:1.08rem;
  color:var(--accent);
  background:rgba(231,196,192,.16);
}
.size-table tbody tr:last-child th,
.size-table tbody tr:last-child td{border-bottom:0}
.size-table tbody tr:hover td,
.size-table tbody tr:hover th{background:rgba(231,196,192,.22)}

.methods{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(.9rem,2vw,1.4rem);
  margin-top:clamp(1.6rem,3vw,2.4rem);
}
.method{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--panel);
  border:1px solid rgba(184,147,79,.24);
  border-radius:2px;padding:1.3rem 1.25rem;
}
.method-n{
  flex:0 0 auto;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(231,196,192,.5);
  font-family:var(--mono);font-size:.82rem;color:var(--accent);
}
.method h3{font-family:var(--display);font-size:1.1rem;font-weight:600;margin-bottom:.3rem}
.method p{color:var(--text-secondary);font-size:.93rem}

.sizing-fig{margin:clamp(2rem,4vw,3rem) 0 0}
.sizing-fig img{width:100%;border-radius:2px;box-shadow:0 22px 54px rgba(42,26,22,.13)}

@media (max-width:640px){ .methods{grid-template-columns:1fr} }

/* ================= application and removal ================= */

.apply{max-width:1080px;margin:0 auto}

.apply-grid{
  display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(1rem,2.4vw,1.8rem);
}
.apply-col{
  background:var(--panel);
  border:1px solid rgba(184,147,79,.24);
  border-radius:2px;
  padding:clamp(1.3rem,2.4vw,2rem);
}
.apply-h,.rem-h{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
  margin-bottom:1rem;font-weight:400;
}

.need-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.need-list li{
  position:relative;padding-left:1.35rem;
  color:var(--text-secondary);font-size:.96rem;
}
.need-list li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:7px;height:7px;border:1px solid var(--gold);
}

.step-list{
  margin:0;padding:0;list-style:none;counter-reset:step;
  display:flex;flex-direction:column;gap:.85rem;
}
.step-list li{
  counter-increment:step;
  position:relative;padding-left:2.2rem;
  color:var(--text-secondary);font-size:.96rem;line-height:1.55;
}
.step-list li::before{
  content:counter(step);
  position:absolute;left:0;top:-.05em;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(231,196,192,.5);
  font-family:var(--mono);font-size:.72rem;color:var(--accent);
}

.removal-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.4vw,1.8rem);
  margin-top:clamp(1rem,2.4vw,1.8rem);
}
.rem{
  background:var(--panel);
  border:1px solid rgba(184,147,79,.24);
  border-radius:2px;
  padding:clamp(1.3rem,2.4vw,1.8rem);
}
.rem ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.rem li{
  position:relative;padding-left:1.1rem;
  color:var(--text-secondary);font-size:.93rem;line-height:1.5;
}
.rem li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:5px;height:5px;border-radius:50%;background:var(--gold);
}

@media (max-width:820px){
  .apply-grid{grid-template-columns:1fr}
  .removal-grid{grid-template-columns:1fr}
}

/* ================= contact ================= */

.contact{text-align:center}
.contact-inner{max-width:56ch;margin:0 auto}
.contact-links{margin-top:2rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

.contact-mail{
  margin-top:1.6rem;
  font-family:var(--mono);font-size:.95rem;letter-spacing:.02em;
}
.contact-mail a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(168,50,63,.32);padding-bottom:2px;transition:border-color .3s var(--ease)}
.contact-mail a:hover{border-color:var(--accent)}

.btn-ghost{
  background:transparent;color:var(--accent);
  border:1px solid rgba(168,50,63,.45);box-shadow:none;
}
.btn-ghost:hover{background:rgba(168,50,63,.07);color:var(--accent);box-shadow:none}

/* ================= the detail, rebuilt ================= */

.detail{
  position:relative;overflow:hidden;
  padding-top:clamp(4.5rem,9vw,8rem);
  padding-bottom:clamp(4.5rem,9vw,8rem);
}

/* the rose is now an atmospheric wash behind everything, not a sticker */
.detail .rose-art{
  position:absolute;
  right:-6%;
  top:50%;
  transform:translateY(-50%);
  width:clamp(260px,34vw,520px);
  height:auto;
  opacity:.12;
  margin:0;
  pointer-events:none;
  z-index:0;
  filter:saturate(.5);
}

.detail-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(2.2rem,5.5vw,5.5rem);
  align-items:center;
  max-width:1180px;margin:0 auto;
}

.detail-fig{margin:0}
.detail-fig img{
  width:100%;
  border-radius:2px;
  box-shadow:0 34px 80px rgba(0,0,0,.5);
}

.detail-copy h2{margin-bottom:.6rem}
.detail-copy .lede{color:var(--on-deep-2);max-width:34ch}

/* the three craft marks, divided by gold hairlines */
.marks{margin:clamp(2rem,4vw,3rem) 0 0;padding:0;max-width:40ch}
.mark{
  padding:1.15rem 0;
  border-top:1px solid rgba(217,190,140,.24);
}
.mark:last-child{border-bottom:1px solid rgba(217,190,140,.24)}
.mark dt{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,1.7vw,1.32rem);
  color:var(--on-deep);
  margin-bottom:.22rem;
}
.mark dd{
  margin:0;
  color:var(--on-deep-2);
  font-size:.95rem;line-height:1.55;
}

@media (max-width:900px){
  .detail-inner{grid-template-columns:1fr}
  .detail .rose-art{
    right:-18%;top:auto;bottom:-6%;transform:none;
    width:clamp(220px,58vw,380px);opacity:.09;
  }
}
@media (max-height:640px) and (min-width:901px){
  .detail .rose-art{opacity:.08}
}

/* the nav reads as a deliberate bar once scrolled, not a haze over dark sections */
.nav.stuck{
  background:var(--canvas);
  border-bottom:1px solid rgba(184,147,79,.22);
  box-shadow:0 6px 24px rgba(42,26,22,.06);
}

/* ================================================================
   HERO, rebuilt: the brand's own photograph on its own backdrop,
   with rose petals falling across it. No video, so nothing to seek.
   ================================================================ */

:root{
  --hero-top:#97625A;    /* sampled from the photograph's own sweep */
  --hero-bot:#7E4C43;
  --hero-ink:#FBF2EE;
}

/* the field extends the photo's backdrop across the whole viewport */
.hero-field{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 68% 22%, rgba(196,140,127,.55), transparent 62%),
    linear-gradient(to bottom, var(--hero-top) 0%, #8E5A51 46%, var(--hero-bot) 100%);
}

/* the photograph, blended in at its left edge so it reads as one scene */
.hero-shot{
  position:absolute;
  top:0;bottom:0;right:-2%;
  width:min(52%,780px);
  margin:0;
  display:flex;align-items:flex-end;justify-content:center;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 20%, #000 100%);
          mask-image:linear-gradient(to right, transparent 0%, #000 20%, #000 100%);
}
.hero-shot img{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 22%;
}

/* the petals */
.petals{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.petal{
  position:absolute;top:0;left:0;
  width:var(--w,26px);height:var(--h,18px);
  /* asymmetric, wider at one end, with a soft crease of light */
  border-radius:68% 32% 58% 42% / 72% 66% 34% 28%;
  background:
    radial-gradient(ellipse 52% 34% at 30% 22%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 92% 100% at 26% 20%, var(--c1,#FBE3DA) 0%, var(--c2,#E4A18B) 56%, var(--c3,#B96B54) 100%);
  box-shadow:0 1px 3px rgba(88,40,32,.16);
  opacity:var(--o,.85);
  filter:blur(var(--bl,0px));
  will-change:transform;
  transform:translate3d(var(--x,0px), var(--y,0px), 0) rotate(var(--r,0deg));
}

/* hero type sits light on the dusty rose */
:root{
  --tshadow:0 1px 2px rgba(58,28,22,.55),0 3px 14px rgba(58,28,22,.45),0 10px 44px rgba(58,28,22,.4);
}

/* the scrim now darkens behind type instead of lightening */
.scrim{
  background:
    linear-gradient(to right, rgba(88,48,42,.62) 0%, rgba(88,48,42,.34) 42%, rgba(88,48,42,0) 72%),
    radial-gradient(ellipse 120% 90% at 50% 50%, rgba(88,48,42,0) 40%, rgba(88,48,42,.34) 100%);
}

/* text sits in the left half, clear of the photograph */

@media (max-width:1100px){
  .hero-shot{width:46%;right:-4%}
  
}

/* ---- the single-screen hero: phones, portrait tablets, reduced motion ---- */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero-shot{
    width:100%;right:0;
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
            mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
  }
  .hero-shot img{object-position:50% 16%}
  .scrim{
    background:linear-gradient(to bottom, rgba(88,48,42,.22) 0%, rgba(88,48,42,.30) 46%, rgba(96,54,47,.86) 82%, var(--hero-bot) 100%);
  }
  
}

@media (prefers-reduced-motion:reduce){
  .petal{transition:none!important}
}

/* ---- the nav sits light over the hero, and only goes solid once scrolled ---- */
.nav:not(.stuck){
  background:linear-gradient(to bottom, rgba(74,38,33,.42), rgba(74,38,33,.12) 62%, transparent);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.nav:not(.stuck) .nav-word{color:var(--hero-ink)}
.nav:not(.stuck) .nav-links a,
.nav:not(.stuck) .nav-drop-btn{color:rgba(251,242,238,.86)}
.nav:not(.stuck) .nav-links a:hover,
.nav:not(.stuck) .nav-drop-btn:hover{color:var(--hero-ink)}
.nav:not(.stuck) .burger-bar{background:var(--hero-ink)}

/* the dropdown panel stays a light card, so its own text stays dark */
.nav:not(.stuck) .nav-menu a{color:var(--text-secondary)}
.nav:not(.stuck) .nav-menu a:hover{color:var(--text-primary)}

/* on the single-screen hero the photo fills the top, so keep the nav readable there too */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse){
  .nav:not(.stuck){background:linear-gradient(to bottom, rgba(74,38,33,.5), rgba(74,38,33,.16) 62%, transparent)}
}

/* ---- legibility: the type lane is deepened so a pale petal drifting behind
        the words can never take the contrast below the floor ---- */
.scrim{
  background:
    linear-gradient(to right,
      rgba(64,31,26,.80) 0%,
      rgba(64,31,26,.72) 34%,
      rgba(64,31,26,.44) 54%,
      rgba(64,31,26,.10) 70%,
      rgba(64,31,26,0) 82%),
    linear-gradient(to bottom, rgba(64,31,26,.30) 0%, rgba(64,31,26,0) 26%),
    radial-gradient(ellipse 120% 92% at 50% 50%, rgba(64,31,26,0) 44%, rgba(64,31,26,.34) 100%);
}

@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .scrim{
    background:linear-gradient(to bottom,
      rgba(64,31,26,.30) 0%, rgba(64,31,26,.26) 40%,
      rgba(70,36,30,.82) 72%, rgba(74,42,36,.94) 88%, var(--hero-bot) 100%);
  }
}

/* ================================================================
   HERO, final: one screen. The photograph, petals drifting over it,
   the name and the button. Nothing to scroll through to reach it.
   ================================================================ */

.hero{
  position:relative;
  height:100svh;
  min-height:560px;
  max-height:1100px;
  overflow:hidden;
  z-index:1;
  background:var(--hero-bot);
  isolation:isolate;
}

.hero-copy{
  position:absolute;
  left:clamp(1.15rem,6vw,6rem);
  top:50%;transform:translateY(-50%);
  z-index:3;
  max-width:min(46%,32rem);
  text-shadow:var(--tshadow);
}

.hero-name{
  font-family:var(--display);font-weight:700;
  font-size:clamp(3rem,7.2vw,6rem);
  line-height:.98;letter-spacing:-.02em;
  color:var(--hero-ink);
}
.hero-head{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.3rem,2.9vw,2.35rem);
  line-height:1.12;margin-top:.5rem;
  color:var(--hero-ink);
}
.hero-sub{
  margin-top:1.1rem;
  font-size:clamp(.95rem,1.3vw,1.06rem);
  color:rgba(251,242,238,.86);
  max-width:26ch;
}
.hero-cta{margin-top:2.1rem;text-shadow:none}

/* one quiet entrance on load, then it rests */
.hero-copy > *{
  opacity:0;transform:translateY(16px);
  animation:heroIn .95s var(--ease) forwards;
}
.hero-copy > *:nth-child(1){animation-delay:.10s}
.hero-copy > *:nth-child(2){animation-delay:.22s}
.hero-copy > *:nth-child(3){animation-delay:.34s}
.hero-copy > *:nth-child(4){animation-delay:.46s}
@keyframes heroIn{to{opacity:1;transform:none}}

.hero-cue{
  position:absolute;left:50%;bottom:1.6rem;z-index:3;
  transform:translateX(-50%);
  width:34px;height:40px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(251,242,238,.62);
  transition:color .35s var(--ease);
}
.hero-cue svg{
  width:18px;height:26px;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  animation:cueNudge 2.8s var(--ease-soft) -.6s infinite;
}
.hero-cue:hover{color:var(--hero-ink)}
@keyframes cueNudge{
  0%,100%{transform:translateY(0);opacity:.7}
  50%{transform:translateY(5px);opacity:1}
}

/* the photograph fills the right, blended into the field */
.hero-shot{
  position:absolute;top:0;bottom:0;right:-2%;
  width:min(54%,820px);
  margin:0;z-index:1;
  display:block;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
          mask-image:linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
}
.hero-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}

.hero-field{z-index:0}
.petals{z-index:2}
.scrim{z-index:2}

/* ---- one screen on phones too, photo above, words beneath ---- */
@media (max-width:820px), (orientation:portrait) and (max-width:1024px){
  .hero-copy{
    position:absolute;left:0;right:0;bottom:0;top:auto;transform:none;
    max-width:none;
    padding:0 clamp(1.15rem,6vw,3rem) clamp(3rem,9vw,4.5rem);
    text-align:center;
  }
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-shot{
    width:100%;right:0;bottom:auto;height:72%;
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 56%, transparent 97%);
            mask-image:linear-gradient(to bottom, #000 0%, #000 56%, transparent 97%);
  }
  .hero-shot img{object-position:50% 14%}
  .scrim{
    background:linear-gradient(to bottom,
      rgba(64,31,26,.34) 0%, rgba(64,31,26,.20) 34%,
      rgba(70,36,30,.74) 62%, rgba(74,42,36,.93) 84%, var(--hero-bot) 100%);
  }
  .hero-cue{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hero-copy > *{opacity:1;transform:none;animation:none}
  .hero-cue svg{animation:none}
}

/* the detail lead line, bold as marked */
.detail-lead{
  margin-top:1rem;
  max-width:32ch;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.02rem,1.55vw,1.24rem);
  line-height:1.42;
  color:var(--on-deep);
}

/* the story sign-off */
.about-by{font-weight:500;color:var(--text-primary)}
.about-copy .lede strong{
  font-family:var(--display);
  font-weight:600;
  font-size:1.06em;
  color:var(--text-primary);
}
.hrt{color:var(--accent);font-style:normal}

.hero-head{text-wrap:balance}
.hero-name{text-wrap:nowrap}

/* petals scale with the screen so they never look oversized on a phone */
@media (max-width:820px){
  .petal{
    width:calc(var(--w,26px) * .68);
    height:calc(var(--h,18px) * .68);
  }
  .hero-sub{max-width:32ch}
}

/* short screens: a phone held sideways must still show the button */
@media (max-height:560px){
  .hero{min-height:0;height:100svh}
  .hero-copy{
    position:absolute;left:clamp(1rem,4vw,2.5rem);right:auto;bottom:auto;
    top:50%;transform:translateY(-50%);
    text-align:left;max-width:min(52%,26rem);padding:0;
  }
  .hero-name{font-size:clamp(2rem,7vh,2.9rem)}
  .hero-head{font-size:clamp(.95rem,3vh,1.2rem);margin-top:.3rem}
  .hero-sub{display:none}
  .hero-cta{margin-top:1.1rem;padding:.6rem 1.3rem;font-size:.85rem}
  .hero-cue{display:none}
  .hero-shot{
    width:min(50%,520px);right:-2%;height:100%;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
            mask-image:linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
  }
  .hero-shot img{object-position:50% 18%}
  .scrim{
    background:linear-gradient(to right, rgba(64,31,26,.78) 0%, rgba(64,31,26,.56) 42%, rgba(64,31,26,.10) 68%, rgba(64,31,26,0) 82%);
  }
}

/* ---- heading measure, corrected for Playfair ----
   Playfair is a wider face than the Bodoni it replaced, so the old cap made
   every centred heading wrap. Containers cap in px (a ch here resolves against
   the body font, not the display face inside it), and the top size comes down. */
h2{
  font-size:clamp(2rem,3.6vw,3.35rem);
  text-wrap:balance;
}
.sec-head{max-width:min(48rem,92vw)}
.sec-head .lede.center{max-width:52ch}

/* the trade heading is two full sentences in a narrow column, so it takes a
   slightly smaller size to sit on the two lines it was written for */
.why h2{font-size:clamp(1.8rem,2.9vw,2.75rem)}
.why{grid-template-columns:1.12fr .88fr}
@media (max-width:880px){ .why{grid-template-columns:1fr} }

/* visually hidden, still read aloud. Used by the size-table caption and the
   burger's label. */
.vh{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---- final polish pass ---- */

/* the trade heading carries the whole argument, so give it more presence */
.why h2{font-size:clamp(1.95rem,3.35vw,3.1rem)}

/* the detail lead was competing with its own headline */
.detail-lead{
  font-size:clamp(.98rem,1.32vw,1.1rem);
  max-width:36ch;
}

/* the story's closing block: even rhythm instead of one big gap and one tight one */
.about-sign{margin-top:2.2rem}
.about-copy .about-sign + .lede{margin-top:.9rem}
.about-by{margin-top:1.5rem}

/* the trade heading is two long sentences, so its column gets the room to
   hold each on one line now that the type is larger */
.why{max-width:1340px;grid-template-columns:1.22fr .78fr}
@media (max-width:880px){ .why{grid-template-columns:1fr} }