/* ============================================================
   PURPLE CO. — ROSIN PAGE (test build, round 5 "plain & calm")
   Photo-less. Clean editorial: hero → six plainly-worded steps →
   why it costs more (itemized) → custom wash form → CTA.
   No pins, no fixed overlays, no background type, no transforms —
   the site's standard gentle reveals are the only motion, so
   overlap is structurally impossible. Mobile-first spacing.
   ============================================================ */

/* ---------- Page-scoped chrome fix: the site's stuck nav is 72% opaque and
   bright copy ghosts through it while scrolling ("overlapping" text in the bar).
   .97 alpha wasn't enough — at 4x you can still read a headline sliding under the
   bar, and backdrop-filter:blur smears it into a legible shadow. On this
   text-heavy page the bar is FULLY opaque with no backdrop blur. ---------- */
.nav.is-stuck{
  background:linear-gradient(180deg,#150c1f,#100818);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

/* ---------- 🔴 SITE-WIDE CSS BUG, fixed here page-scoped ----------
   style.css writes  .h-display{font-size:clamp(2.5rem,1.4rem+5vw,6rem)}  and
   .phero__title{font-size:clamp(3rem,1.6rem+8vw,7rem)} — CSS math REQUIRES
   whitespace around + and - inside clamp()/calc(), so both declarations are
   INVALID and silently dropped. Result on every page of the site: section
   headings render at the browser default 24px and page titles at 32px —
   SMALLER than .step__name (36.8px). The hierarchy is inverted.
   Restored below at a calmer scale than the original (3.4rem / 4.6rem caps,
   not 6rem / 7rem). 9 unspaced clamps exist in style.css; fixing it there
   would resize every heading across all 13 pages = a separate decision. ---- */
.rohero .phero__title{font-size:clamp(2.5rem,1.9rem + 3vw,4.6rem)}
main .h-display{font-size:clamp(2rem,1.55rem + 1.9vw,3.4rem)}

/* ---------- Buttons: one rule for every CTA pair on the page ----------
   Stacked buttons were coming out ragged — different widths, and in the wash
   form left-aligned so the right edge stepped in and out. Any pair that stacks
   now fills the column edge to edge, so they line up with each other and with
   the tile button (which was already full-width). Labels are centred by .btn. */
@media (max-width:640px){
  .rohero .phero__cta,
  .roform .roform__actions,
  .medcard .medcard__ctas{
    display:grid;grid-template-columns:1fr;gap:.7rem;justify-content:stretch;
  }
  .rohero .phero__cta .btn,
  .roform .roform__actions .btn,
  .medcard .medcard__ctas .btn{width:100%}
}
/* Above the stack point the pairs sit side by side — equal columns sized to the
   wider label, so the pair reads as one unit instead of two odd-sized pills. */
@media (min-width:641px){
  .rohero .phero__cta,
  .medcard .medcard__ctas{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    width:max-content;margin-inline:auto;
  }
  .roform .roform__actions .btn{min-width:13.5rem}
}

/* short centred copy shouldn't strand a single word on its own line
   ("…washed into hash, then / pressed.") */
.rogem__lead,.rohero .phero__sub,.medcard__lead{text-wrap:balance}

/* screen-reader-only (real labels behind the form's placeholder styling) */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Hero ---------- */
.rohero{padding-bottom:clamp(3rem,8vh,5.5rem)}
/* the back link is a 19px-tall mono line — give it a real thumb target */
.rohero .jp-back{padding:.7rem 1rem;margin-bottom:.7rem}
.rohero__recipe{
  margin-top:clamp(1.8rem,4vh,2.8rem);
  font-family:var(--mono);font-size:clamp(.66rem,.6rem + .3vw,.8rem);
  letter-spacing:.42em;color:var(--gold);opacity:.9;
  padding-left:.42em; /* balance the trailing tracking */
}

/* ---------- How it's made ---------- */
.prosteps{
  padding-block:clamp(4rem,10vh,7rem);
  background:radial-gradient(70% 55% at 78% 0%,rgba(110,37,133,.14),transparent 70%);
}
.prosteps__lead{margin-top:1.3rem;color:var(--muted);max-width:44rem}
/* the run is indented off a hairline rail that shifts cold violet -> warm gold as
   the six steps descend (the palette carries the "frozen then pressed" story;
   1px of chrome, no motion, nothing that can overlap copy) */
.steps{position:relative;margin-top:clamp(2.4rem,6vh,4rem);border-top:1px solid var(--line);padding-left:clamp(1.35rem,2.4vw,1.9rem)}
.steps::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,
    rgba(161,63,206,0) 0%,rgba(161,63,206,.55) 8%,
    rgba(150,90,160,.5) 42%,rgba(198,161,91,.78) 82%,rgba(198,161,91,0) 100%);
}
.step{
  position:relative;
  display:grid;grid-template-columns:minmax(13rem,17rem) 1fr;
  gap:1rem clamp(2rem,6vw,5rem);align-items:start;
  padding:clamp(1.8rem,4vh,2.6rem) 0;
  border-bottom:1px solid var(--line-soft);
}
.step__no{position:relative;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--gold)}
/* node on the rail, level with the step number */
.step__no::before{
  content:"";position:absolute;top:.34em;left:calc(-1 * clamp(1.35rem,2.4vw,1.9rem) - 3px);
  width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.85;
}
.step:first-child .step__no::before{background:#a13fce;opacity:.7}
.step:nth-child(2) .step__no::before{background:#8f52c4;opacity:.72}
.step:nth-child(3) .step__no::before{background:#7d67b4;opacity:.74}
.step__name{font-family:var(--serif);font-weight:700;line-height:1.05;letter-spacing:-.01em;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);margin-top:.45rem}
.step__time{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-top:.7rem}
.step__p{color:var(--muted);max-width:36rem;font-size:clamp(1rem,.98rem + .3vw,1.14rem);align-self:center}

/* ---------- Process photos — drop-in slot (waiting on the real stage shots) ----------
   A step with a photo just gets the extra class + one <figure> as its third child:

     <li class="step step--photo reveal">
       <div class="step__side">…</div>
       <p class="step__p">…</p>
       <figure class="step__media"><img src="assets/rosin/step-01.jpg" alt="…" loading="lazy" />
         <figcaption>Day one in the room</figcaption></figure>
     </li>

   Desktop: photo takes the dead right-hand column beside the copy.
   Mobile:  photo sits between the step heading and the copy.
   Steps without a figure render exactly as they do now — mix freely. */
.step--photo{grid-template-columns:minmax(11rem,15rem) minmax(0,1fr) minmax(0,19rem);align-items:center}
.step--photo .step__side{align-self:center}
.step__media{
  margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-2);
  border:1px solid var(--line-soft);box-shadow:0 30px 70px -44px #000;
}
.step__media img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover}
.step__media figcaption{
  padding:.7rem .9rem .8rem;font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);opacity:.8;
  border-top:1px solid var(--line-soft);background:rgba(14,7,18,.5);
}
@media (max-width:900px){
  .step--photo{grid-template-columns:1fr}
  .step--photo .step__side{order:1}
  .step--photo .step__media{order:2;margin-block:.35rem .2rem}
  .step--photo .step__p{order:3}
  .step__media img{aspect-ratio:4/3}
}

/* ---------- Why it costs more ---------- */
.roworth{
  padding-block:clamp(4.5rem,11vh,8rem);
  background:radial-gradient(60% 70% at 22% 100%,rgba(198,161,91,.1),transparent 70%);
}
/* every editorial block on this page hangs off the SAME left edge as the steps —
   the measure is set per-element, not by shrinking + centering the wrap
   (that was making the left margin wander section to section on desktop) */
.roworth__lead{margin-top:1.3rem;color:var(--muted);max-width:44rem}
.roledger{max-width:44rem;margin-top:2.4rem}
/* the eyebrow was sitting straight on top of the display headline (no margin
   anywhere in the base stylesheet) — these two sections needed the same
   breathing room the hero and the wash section already scope for themselves */
.prosteps .eyebrow,.roworth .eyebrow{display:inline-block;margin-bottom:.85rem}
.prosteps h2,.roworth h2{line-height:1.06}

/* Desktop: argument on the left, the itemised jar on the right. A single 44rem
   column hugging the left edge read as "left-leaning" against the full-width
   steps grid above it — two columns keep the same left edge AND fill the row. */
@media (min-width:1000px){
  .roworth__inner{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);
    column-gap:clamp(2.5rem,5vw,5rem);align-items:start;
  }
  .roworth__inner > *{grid-column:1;max-width:38rem}
  .roworth__inner > .roworth__lead,.roworth__inner > .roworth__close{max-width:38rem}
  .roworth__inner > .roledger{grid-column:2;grid-row:1 / span 6;max-width:none;margin-top:.4rem}
}
.roledger__t{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);padding-bottom:.85rem;border-bottom:1px solid var(--line);
}
.roledger__row{display:flex;align-items:baseline;gap:.9rem;padding:.8rem 0;border-bottom:1px solid var(--line-soft)}
.roledger__row > span:first-child{font-family:var(--serif);font-size:clamp(1.02rem,1rem + .3vw,1.18rem);color:var(--cream)}
.roledger__row i{flex:1;border-bottom:1px dotted rgba(245,238,250,.2);transform:translateY(-.3em)}
.roledger__row > span:last-child{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--gold-2);text-align:right}
.roledger__row--sum{border-top:1px solid var(--line);border-bottom:0;margin-top:.35rem;padding-top:1.05rem}
.roledger__row--sum > span:first-child{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.roledger__row--sum > span:last-child{font-family:var(--serif);font-style:italic;font-size:1.05rem;letter-spacing:0;color:var(--cream)}
.roworth__close{margin-top:2.2rem;max-width:44rem;color:var(--muted);font-size:clamp(1.02rem,1rem + .35vw,1.2rem)}
.roworth__close em{font-family:var(--serif);font-style:italic;color:var(--gold-2)}

/* ---------- Custom wash & press ---------- */
.ropress{padding-block:clamp(4.5rem,11vh,8rem);background:linear-gradient(180deg,var(--ink),var(--ink-1) 50%,var(--ink))}
.ropress__inner{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:start}
/* long tracked-out eyebrow was dropping a lone "GROWERS" onto line 2 on phones */
.ropress__copy .eyebrow{display:inline-block;margin-bottom:1rem;text-wrap:balance}
/* NOTE: the "Prefer to talk? Call ..." line was removed on purpose (07-24) —
   every rosin inquiry routes to the form or @purplecobrand on Instagram, never the phone. */
.ropress__lead{margin:1.4rem 0 2rem;color:var(--muted);font-size:clamp(1.02rem,1rem + .4vw,1.2rem)}
.roform{
  padding:clamp(1.6rem,3.4vw,2.4rem);
  background:linear-gradient(180deg,var(--ink-2),var(--ink-1));
  border:1px solid var(--line);border-radius:var(--r);
}
.roform .eyebrow{display:inline-block;margin-bottom:1.1rem}
.roform__row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem}
.roform input,.roform textarea{
  width:100%;background:rgba(14,7,18,.6);border:1px solid var(--line-soft);
  border-radius:12px;padding:.82rem 1rem;color:var(--cream);font:inherit;resize:vertical;
}
.roform input::placeholder,.roform textarea::placeholder{color:var(--muted-2)}
.roform input:focus,.roform textarea:focus{border-color:var(--gold);outline:none}
.roform textarea{margin-bottom:1rem}
.roform__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.roform__actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.roform .btn[disabled]{opacity:.55;pointer-events:none}
.roform__status{margin-top:1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;line-height:1.6;color:var(--gold-2)}
.roform__status.is-err{color:#e0a1a1}
@media (max-width:1000px){.ropress__inner{grid-template-columns:1fr}}
@media (max-width:640px){
  .roform__row{grid-template-columns:1fr}
  .roform textarea{resize:none}          /* no stray drag-grip on touch */
}
/* stack the spec rows on phones so long values get their own line (no crowding) */
@media (max-width:560px){
  .ropress .device__specs li{flex-direction:column;align-items:flex-start;gap:.3rem;padding:.95rem 0}
  .ropress .device__specs .spec__v{text-align:left;font-size:1.05rem}
}

/* ---------- Mobile ---------- */
@media (max-width:720px){
  .rohero__recipe{letter-spacing:.24em;font-size:.66rem;padding-left:.24em}
  .step{grid-template-columns:1fr;gap:.9rem;padding:1.7rem 0}
  .step__name{margin-top:.35rem}
  .step__time{margin-top:.5rem}
  .roledger__row{gap:.6rem}
  .roledger__row > span:last-child{font-size:.7rem}
}

/* ---------- Landing-page teaser: slim band (keeps the home page uncluttered) ---------- */
.rosinband{padding-block:clamp(2rem,5vh,3rem);padding-inline:var(--pad)}
.rosinband__inner{
  max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(1rem,4vw,3rem);flex-wrap:wrap;
  padding:clamp(1.5rem,3.5vw,2.4rem) clamp(1.4rem,4vw,2.8rem);
  border:1px solid var(--line);border-radius:var(--r);
  background:
    radial-gradient(90% 200% at 88% 50%,rgba(198,161,91,.12),transparent 60%),
    linear-gradient(180deg,var(--ink-1),var(--ink-2));
}
.rosinband__text{flex:1 1 22rem;min-width:0}
.rosinband__k{font-family:var(--mono);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.rosinband__h{font-family:var(--serif);font-weight:700;font-size:clamp(1.35rem,1rem + 1.4vw,2rem);line-height:1.12;margin-top:.55rem;letter-spacing:-.01em}
.rosinband__h em{font-style:italic;color:var(--gold-2)}
.rosinband__p{margin-top:.5rem;color:var(--muted);font-size:.98rem;max-width:42rem}
.rosinband .btn{flex:0 0 auto}
@media (max-width:640px){.rosinband__inner{padding:1.5rem}.rosinband .btn{width:100%;justify-content:center}}

/* ---------- LIVE ROSIN — gem stage (macro-filled type, faceted gem, shine sweep) ---------- */
.rogem{position:relative;overflow:clip;padding-block:clamp(3.5rem,7vh,5.5rem);text-align:center}
.rogem__aura{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 60% at 50% 38%,rgba(110,37,133,.34),transparent 70%),
    radial-gradient(34% 44% at 50% 62%,rgba(198,161,91,.16),transparent 72%)}
.rogem__inner{position:relative;z-index:1}
.rogem .eyebrow{display:inline-block}
/* Sized by HEIGHT as well as width: the third word ("HASH") took the artwork from
   1000x760 to 1000x1042, so a width-only cap pushed the stage to 1.38 screens and
   cut "ROSIN" off below the fold. The 66vh term keeps the whole term + its caption
   in one view on any desktop (incl. short 1536x864 laptops); on phones 80vw is
   still the smaller value, so the mobile stage is unchanged. */
.rogem-stage{position:relative;z-index:1;display:block;margin:0 auto clamp(1.4rem,4vh,2.6rem);max-width:min(80vw,940px,66vh)}  /* the 'The rosin' kicker above it was removed — no top gap to compensate for now */
.rogem-svg{display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(110,37,133,.3))}
.rogem-svg image{will-change:transform}
.gem__caustic{position:absolute;z-index:-1;left:50%;top:87%;width:30%;height:25%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(231,200,121,.42),rgba(161,63,206,.18) 48%,transparent 72%);
  filter:blur(24px);opacity:.85;pointer-events:none}
.rogem__lead{margin:0 auto;max-width:34rem;color:var(--muted);font-size:clamp(1.02rem,1rem + .35vw,1.2rem)}
@media (max-width:720px){
}

/* ---------- Plain terms — the tile that replaces the on-page glossary.
   The five definitions now live in the Journal (journal-rosin-words.html):
   the page stays short for the ~90% on phones, the vocabulary still gets
   taught, the article earns its own search traffic, and the mid-page slot
   is free for a product band when there's one to show. ---------- */
.roterms{padding-block:0}  /* spacing comes from the neighbouring sections' own padding */
.roterms .rosinband__h{margin-top:.5rem}

/* ---------- (legacy) full glossary styles — kept for the Journal article
   and in case the five terms ever come back onto the page ---------- */
.rogloss{
  padding-block:clamp(4rem,10vh,7rem);
  background:radial-gradient(64% 58% at 50% 0%,rgba(110,37,133,.12),transparent 70%);
}
.rogloss__lead{margin-top:1.2rem;color:var(--muted);max-width:40rem;font-size:clamp(1.02rem,1rem + .35vw,1.18rem)}
/* reference, not narrative — a compact two-up glossary so it can't be mistaken
   for a second run of numbered chapters */
.rogloss__list{
  margin-top:clamp(2.2rem,6vh,3.4rem);max-width:64rem;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,4.5vw,4rem);
  border-top:1px solid var(--line);
}
.rogloss__item{
  padding:clamp(1.35rem,3.2vh,1.8rem) 0;
  border-bottom:1px solid var(--line-soft);
}
.rogloss__term{
  display:block;font-family:var(--serif);font-weight:700;line-height:1.06;letter-spacing:-.01em;
  font-size:clamp(1.28rem,1.08rem + .7vw,1.6rem);color:var(--cream);
}
.rogloss__say{
  display:block;margin-top:.42rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);opacity:.82;
}
.rogloss__def{margin:.75rem 0 0;color:var(--muted);font-size:clamp(.98rem,.96rem + .25vw,1.06rem);line-height:1.7;max-width:32rem}
.rogloss__def b{color:var(--cream);font-weight:500}
@media (max-width:820px){
  .rogloss__list{grid-template-columns:1fr}
  .rogloss__item{padding:1.4rem 0}
}