/* =========================================================================
   The Cusanos — family lifestyle creator brand
   Design system: creator-family rule, palette customised per BRAND-STRATEGY.md §7
   Built by Next Wave Digital Consulting · Signature package
   ========================================================================= */

:root{
  /* ---- palette (terracotta signature; blush deliberately rejected — see strategy §7)
     2026-08-06 — THE EMBLEM DECISION. The owner supplied and chose the circular
     family-portrait emblem as THE mark, plus its theme sheet: deep pine green, antique
     gold, a deeper terracotta, lotus pink, cream. This is an ACCENT shift, not a repaint:
     the ivory base and espresso ink stay; the dark bands move espresso→pine, the working
     accent moves soft-terracotta→emblem terracotta, and gold does the work on pine.
     Theme hexes are read from the owner-supplied artwork by eye and are flagged in the
     brand book to be confirmed against the file. Record:
     brand-book/NWDC-Cusanos-Emblem-Decision.html */
  --ivory:#FAF7F2;          /* warm base, not flat beige */
  --paper:#FFFFFF;
  --espresso:#3D3532;       /* grounded ink — reads unisex */
  --terracotta:#D98E73;     /* the old soft accent — decorative uses only since 08-06 */
  --clay:#AD3E29;           /* CTA/link ink — the emblem's terracotta deepened ONE step so
                               it clears 4.5:1 on the sand band as well as ivory. The
                               previous #C2664A sat at 3.71:1 under links and 3.97:1 under
                               white button text; both pairs now pass AA. */
  --emblem-terracotta:#B5442E; /* the artwork's own red-clay — icon fills + reference */
  --pine:#1F4038;           /* emblem deep green — the dark surface colour */
  --gold:#C9A85C;           /* emblem antique gold — text/numbers on pine, hairlines.
                               NEVER body text on ivory (2.1:1) — pine surfaces only. */
  --cream:#F3EDDC;          /* emblem cream — heritage band tint */
  --lotus:#F2B9C4;          /* emblem lotus pink — icon fill only, never text */
  --mist:#C4CCC2;           /* muted ink on pine (green-cast; the warm grey clashed) */
  --sage:#7A9E9F;           /* ocean-sage balance, South Florida nod */
  --sand:#EFE7DE;           /* section tint */
  --line:#E3D9CF;
  --line-gold:#DFD3B4;      /* gold hairline — scrolled header rule, quartet rings */

  --text:var(--espresso);
  --text-2:#6B605B;
  --text-3:#95877F;

  /* ---- type */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* the emblem's script, live (2026-08-06): Pacifico — picked by eye against the artwork
     over Kaushan Script (too slanted/rough) and Dancing Script 700 (far too light). Used
     for the masthead name ONLY — script is a mark voice here, never body or heading type. */
  --script:"Pacifico","Brush Script MT",cursive;

  /* ---- rhythm */
  --sp-1:.35rem; --sp-2:.7rem; --sp-3:1.1rem; --sp-4:1.6rem;
  --sp-5:2.4rem; --sp-6:3.6rem; --sp-7:5.4rem; --sp-8:7.5rem;
  --wrap:1180px; --narrow:760px;
  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-arch:120px 120px 14px 14px;

  --shadow-1:0 1px 2px rgba(61,53,50,.05), 0 8px 24px rgba(61,53,50,.06);
  --shadow-2:0 18px 50px rgba(61,53,50,.13);
  --t:280ms cubic-bezier(.22,.61,.36,1);

  /* ---- masthead
     --mh    scroll progress, 0 (hero) → 1 (compact). Written by main.js, one property.
     --mh-k0 the hero magnification. Solved per breakpoint against the narrowest space the
             lockup has to live in, which at 375px is the wrap minus the menu button —
             this is the number that keeps horizontal overflow at zero.
     --mh-mark the compact MARK height the bar reserves — unchanged by the script swap.
     --mh-script the script mark's em size. Pacifico's caps sit at ~.7em, and "Cusanos"
             has no descenders, so 1.3 × --mh-mark puts the rendered ink at ≈ the same
             visual height the 30px drawn SVG had. The bar does NOT size from this — the
             lockup is out of flow — so bar height is untouched. */
  --mh:0;
  --mh-k0:1.05;    /* base rule, <374px — solved at 320, the narrowest supported width */
  --mh-mark:30px;
  --mh-script:calc(var(--mh-mark) * 1.3);
}
/* The magnification is not a taste value — it is solved, per breakpoint, against the space
   the lockup actually has beside whatever else lives in the bar:

     below 940px   available = wrap - menu button (44) - 16 clearance
     940px and up  available = wrap - primary nav (measured 669) - 28 clearance

   RE-SOLVED 2026-08-06 for the Pacifico script mark. The script "Cusanos" is WIDER than
   the drawn SVG it replaced, so the whole ladder was measured again in the browser at
   every boundary (the method that caught an earlier flat 2.7 putting the lockup 230px
   THROUGH the nav at 960px). Measured unscaled hero lockup widths, fonts loaded:
     207px  below 940   (mark 30px → script 39px)
     188px  940–1039    (mark 26px → script 33.8px — see the squeeze note)
     216px  1040 and up (mark 32px → script 41.6px)
   k0 = available / lockup, rounded DOWN to .05. Solved at the BOTTOM of each range (the
   tightest point), against MEASURED space — the desktop scrollbar (~15px) makes the true
   layout width clientWidth, not the media-query width, which estimation gets wrong:
   320→1.055 · 374→1.316 · 440→1.635 · 500→1.925 · 1040→1.325 · 1120→1.696 ·
   1240+ (wrap caps at 1180)→2.236.

   THE 940 SQUEEZE ZONE: when the seven-item nav arrives it takes 669px of a 898px wrap.
   The script mark is ~30px wider than the drawn one, so at 32px the COMPACT lockup
   (avatar 40 + "The" + mark) measured 224px against 214px of space — 10px THROUGH the
   nav at rest, which no k0 can fix. The band therefore drops --mh-mark to 26px (compact
   lockup 196px, 17px clear) and pins k0 to 1: between 940 and 1039 the masthead does not
   magnify at all (it was a token 1.1 before) — the transition there is the avatar fade
   and the word swap. Scale 1 clears the nav by ~26px at 940.
   (CSS cannot divide a length by a length, so this cannot be one fluid clamp.) */
@media (min-width:374px){:root{--mh-k0:1.3}}
@media (min-width:440px){:root{--mh-k0:1.6}}
@media (min-width:500px){:root{--mh-k0:1.9}}
@media (min-width:940px){:root{--mh-k0:1;--mh-mark:26px}}
@media (min-width:1040px){:root{--mh-k0:1.3;--mh-mark:32px}}
@media (min-width:1120px){:root{--mh-k0:1.65}}
@media (min-width:1240px){:root{--mh-k0:2.2}}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--ivory);color:var(--text);
  font-family:var(--body);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block;height:auto}
a{color:var(--clay);text-underline-offset:3px}

.wrap{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}
.narrow{width:min(100% - 2.6rem,var(--narrow));margin-inline:auto}
section{padding-block:var(--sp-7)}
@media (min-width:900px){section{padding-block:var(--sp-8)}}

/* ---------- type scale ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.015em}
h1{font-size:clamp(2.5rem,6.2vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.9vw,2.9rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.25}
.eyebrow{
  font-family:var(--body);font-size:.7rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--clay);
}
.lede{font-size:clamp(1.08rem,1.6vw,1.28rem);color:var(--text-2);line-height:1.72}
em.accent{font-style:italic;color:var(--clay)}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;background:var(--espresso);color:var(--ivory);
  padding:.8rem 1.2rem;z-index:200;border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(250,247,242,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color var(--t),box-shadow var(--t);
  /* the hero lockup deliberately hangs below the bar at the top of the page */
  overflow:visible;
}
.site-header[data-scrolled="true"]{border-bottom-color:var(--line-gold);box-shadow:var(--shadow-1)}
.bar{
  position:relative;display:flex;align-items:center;gap:var(--sp-4);
  padding-block:var(--sp-3);
  /* the lockup is out of flow, so the bar has to reserve its own height explicitly.
     This value never changes with scroll — that is what keeps CLS at zero. */
  min-height:calc(var(--mh-mark) + var(--sp-3) * 2);
}
.nav{margin-left:auto;display:none;gap:var(--sp-4);align-items:center}
@media (min-width:940px){.nav{display:flex}}
.nav a{
  font-size:.92rem;font-weight:500;color:var(--text-2);text-decoration:none;
  padding-block:.4rem;border-bottom:1.5px solid transparent;transition:color var(--t),border-color var(--t);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--gold)}
/* `.nav a` (0,1,1) out-specifies `.btn--primary` (0,1,0), so the Contact button in the nav was
   inheriting the muted link colour and rendering #6B605B on #C2664A — 1.53:1, an outright
   defect rather than a palette question. The button keeps its own colour and its own underline
   behaviour. (The remaining 3.97:1 of white-on-clay is a property of the locked button colour
   and is reported to the owner, not changed here.) */
.nav a.btn{color:#fff;border-bottom-color:transparent}
.nav a.btn--primary:hover{color:#fff;border-bottom-color:transparent}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-size:.95rem;font-weight:600;
  padding:.85rem 1.6rem;border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform var(--t),background var(--t),color var(--t),box-shadow var(--t);
}
.btn--primary{background:var(--clay);color:#fff}
.btn--primary:hover{background:#9C3922;transform:translateY(-2px);box-shadow:var(--shadow-1)}
.btn--ghost{border-color:var(--espresso);color:var(--text);background:transparent}
.btn--ghost:hover{background:var(--espresso);color:var(--ivory);transform:translateY(-2px)}
.btn--light{background:var(--paper);color:var(--text)}
.btn--light:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.btn--sm{padding:.6rem 1.2rem;font-size:.88rem}

.nav-toggle{
  margin-left:auto;display:grid;place-items:center;width:44px;height:44px;
  background:none;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
}
@media (min-width:940px){.nav-toggle{display:none}}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:19px;height:1.5px;background:var(--text);transition:transform var(--t),opacity var(--t);
}
.nav-toggle span::before{transform:translateY(-6px)}
.nav-toggle span::after{transform:translateY(4.5px)}
.drawer{
  display:none;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-4) 0 var(--sp-5);border-top:1px solid var(--line);
}
.drawer[data-open="true"]{display:flex}
.drawer a{font-size:1.05rem;color:var(--text);text-decoration:none;padding-block:.45rem}

/* ---------- masthead lockup -----------------------------------------------------------
   The whole lockup scales from --mh-k0 down to 1 as --mh runs 0 → 1. transform-origin is
   the top-left corner, so it grows DOWN and RIGHT out of its resting place in the bar and
   never moves the thing it is anchored to. Only `transform`, `opacity` and the width of an
   out-of-flow box change, so this is compositor work and contributes nothing to CLS.       */
.mh{
  position:absolute;left:0;top:var(--sp-3);z-index:2;
  display:flex;align-items:center;gap:.34em;
  text-decoration:none;color:var(--espresso);
  font-family:var(--body);font-size:.94rem;font-weight:600;line-height:1;
  letter-spacing:.01em;white-space:nowrap;
  transform-origin:left top;
  transform:scale(calc(1 + (var(--mh-k0) - 1) * (1 - var(--mh))));
  will-change:transform;
}
/* The mark is Pacifico TEXT since 2026-08-06 (the drawn SVG is retired — history in
   index.html). line-height:1 keeps the line box at the em size; "Cusanos" has no
   descenders, so nothing clips and flex centring holds against the 40px avatar. */
.mh__mark{
  display:block;color:var(--espresso);
  font-family:var(--script);font-weight:400;
  font-size:var(--mh-script);line-height:1;letter-spacing:.01em;
}

/* ---- the emblem avatar (2026-08-06) --------------------------------------------------
   The chosen mark is an illustrated portrait emblem; below ~40px the faces mush, so the
   header carries it as a 40px avatar PAIRED with the drawn wordmark — never alone.
   It lives INSIDE the scaling lockup but contributes ZERO width at the hero state:
   width and opacity both ride --mh (0 hero → 1 compact), and the negative margin exactly
   cancels the flex gap while it is empty. So the magnified hero lockup stays 182px
   unscaled and the solved --mh-k0 ladder above remains valid to the pixel — the avatar
   only exists in the compact bar, where the hero's large emblem has scrolled away and
   something has to carry the mark. If /assets/img/cusanos-emblem-96.png is not on disk
   yet (owner drop pending — see scripts/prep-cusanos-assets.py) the img errors, the slot
   collapses, and the masthead is exactly what it was before the emblem existed.        */
.mh__av{
  position:relative;flex:none;height:40px;
  width:calc(var(--mh) * 40px);
  margin-right:calc(-.34em * (1 - var(--mh)));
  opacity:var(--mh);overflow:hidden;border-radius:50%;
}
.mh__av img{
  width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;
  background:var(--cream);box-shadow:0 0 0 1.5px var(--line-gold);
}
.mh__av[data-missing="true"]{display:none}

/* The two supporting words share one cell and cross-fade; the cell's width is interpolated
   between them so the wordmark slides across rather than jumping when the word changes.
   The em values are a deliberate fallback — if JS never runs, the lockup still lays out. */
.mh__pre{
  position:relative;display:block;height:1em;flex:none;
  width:calc(var(--mh-pw1,2.3em) + (var(--mh-pw0,5.1em) - var(--mh-pw1,2.3em)) * (1 - var(--mh)));
  color:var(--text-2);
}
.mh__w{position:absolute;left:0;top:0;line-height:1}
.mh__w--hero{opacity:calc(1 - var(--mh))}
.mh__w--mini{opacity:var(--mh)}
.mh:hover .mh__mark,.mh:focus-visible .mh__mark{color:var(--clay)}
.mh:focus-visible{outline:2.5px solid var(--clay);outline-offset:6px;border-radius:6px}

/* Reduced motion: no scroll-linked scaling at all. main.js pins --mh to 1 and never binds a
   scroll listener, so the compact lockup is simply what the page has, from the first paint. */
@media (prefers-reduced-motion:reduce){
  .mh{transform:none;will-change:auto}
}

/* ---------- hero ---------- */
/* The extra top padding is the room the enlarged lockup hangs into. It is a constant per
   breakpoint — it does NOT change as you scroll — so the page never reflows underneath it.
   Sized from --mh-script since the script swap: the hanging thing is the script's line box,
   which is 1.3 × the old SVG height, so the allowance scales with it. */
.hero{
  position:relative;overflow:hidden;
  padding-block:calc(var(--sp-6) + (var(--mh-k0) - 1) * var(--mh-script) * .7) var(--sp-7);
}
@media (min-width:900px){
  .hero{padding-block:calc(var(--sp-7) + (var(--mh-k0) - 1) * var(--mh-script) * .7) var(--sp-8)}
}
.hero__grid{display:grid;gap:var(--sp-6);align-items:center}
@media (min-width:960px){.hero__grid{grid-template-columns:1.05fr .95fr;gap:var(--sp-7)}}
.hero h1{margin-block:var(--sp-3) var(--sp-4)}
.hero .lede{max-width:34ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}

/* arch frame — the signature device, carried over from the family brand system */
.arch{
  position:relative;border-radius:var(--r-arch);overflow:hidden;
  background:var(--sand);box-shadow:var(--shadow-2);aspect-ratio:4/5;
}
.arch img,.arch video{width:100%;height:100%;object-fit:cover}
.arch--sm{aspect-ratio:1/1;border-radius:90px 90px 12px 12px}
.arch--wide{aspect-ratio:5/4}
.arch::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(61,53,50,.07);border-radius:inherit;
}
/* ---- the emblem hero (2026-08-06, restructure) ---------------------------------------
   Owner, later the same day as the corner seal: "make The Cusanos emblem the focal point
   and use the other picture in other areas of the website (so only the emblem, nice and
   big)." The photo stack this column held moved to the MOMENTS strip below the heritage
   quartet, and the corner SEAL that stamped those photos is retired with it — this block
   replaces .hero__stack and .emblem-seal both (.kit-emblem on the media kit remains the
   badge-in-flow treatment for inner pages).
   Presentation is the seal's own language scaled up — cream ground, gold hairline,
   shadow-2 — but drawn on the FIGURE as a disc BEHIND the artwork, not as a crop of it:
   the badge overflows its painted circle (the banner's swallow-tails, the lotus), and at
   this size the seal's border-radius:50% crop would amputate the tails. The derivatives
   ship ground-cut to alpha (scripts/prep-cusanos-assets.py) so the figure's cream reads
   as the mat and the tails ride out over the hairline the way the artwork intends.
   Sizing: the grid column measures ~520px at the full 1180 wrap and ~404px at 960, so
   width:min(100%,520px) fills what the solved hero grid actually gives it — the owner's
   "nice and big" lands at 440-520px from ~1040 up without ever overflowing the column.
   One-column widths centre it under the copy at min(70vw,360px).
   The figcaption is the no-file fallback only (same contract as the old seal): the
   artwork already carries the name and tagline, so showing them twice would stutter.  */
/* INTEGRATED INTO THE PAGE (owner, 2026-08-06, third emblem decision of the day: "can you
   make it integrated into the background of the page?"). The mat, gold ring and drop shadow
   made the emblem read as a sticker placed ON the page; all three are gone. The derivatives
   ship with their ground cut to alpha, so the artwork now sits directly in the ivory — and a
   soft radial cream wash BEHIND it (the ::before) grounds it into the page the way a printed
   emblem sinks into paper stock. At desktop it grows and pulls toward the right edge of the
   wrap, a background presence rather than a framed object; .hero{overflow:hidden} (already
   set) keeps the pull from ever causing horizontal scroll. */
.hero__emblem{
  justify-self:center;align-self:center;margin:0;position:relative;
  width:min(78vw,380px);
  padding:0;background:transparent;border-radius:0;box-shadow:none;
}
.hero__emblem::before{
  content:"";position:absolute;inset:-9%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, var(--cream) 0%, rgba(243,237,220,.5) 55%, transparent 74%);
}
.hero__emblem img{display:block;width:100%;height:auto}
.hero__emblem figcaption{display:none}
@media (min-width:960px){
  .hero__emblem{
    width:min(46vw,620px);
    margin-right:clamp(-90px,-6vw,-24px);   /* bleeds toward the page edge — into, not on */
  }
}
/* file absent → the presentation strips itself and the text chip carries the brand */
.hero__emblem[data-missing="true"]{
  width:auto;max-width:34ch;padding:0;background:transparent;
  border-radius:0;box-shadow:none;text-align:center;
}
.hero__emblem[data-missing="true"] img{display:none}
.hero__emblem[data-missing="true"] figcaption{
  display:inline-grid;gap:.15rem;padding:.55rem 1.2rem;
  background:var(--cream);border:1px solid var(--line-gold);border-radius:22px;
}
.hero__emblem-name{font-family:var(--display);font-size:1.15rem;color:var(--text);line-height:1.2}
.hero__emblem-tag{
  font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text);
}

/* placeholder styling — every one is visible on purpose until real assets land */
.ph{
  display:grid;place-items:center;text-align:center;height:100%;
  background:repeating-linear-gradient(45deg,var(--sand),var(--sand) 12px,#E7DCD1 12px,#E7DCD1 24px);
  color:var(--text-3);font-size:.78rem;letter-spacing:.06em;padding:1rem;
}

/* ---------- proof bar ---------- */
/* Dark bands are PINE since the emblem decision (08-06); gold carries the numbers.
   Gold on pine measures 4.99:1 — passes AA for normal text, comfortably for these. */
.proof{background:var(--pine);color:var(--ivory);padding-block:var(--sp-5)}
.proof__row{display:grid;gap:var(--sp-4);text-align:center}
@media (min-width:760px){.proof__row{grid-template-columns:repeat(3,1fr)}}
.stat{display:grid;gap:.2rem}
.stat b{font-family:var(--display);font-size:clamp(2rem,4vw,2.8rem);font-weight:600;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.stat span{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}

/* ---------- pillars ---------- */
.pillars{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
@media (min-width:700px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.pillars{grid-template-columns:repeat(3,1fr)}}
@media (min-width:700px){.pillars--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.pillars--4{grid-template-columns:repeat(2,1fr)}}
.pillar{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-5);transition:transform var(--t),box-shadow var(--t);
}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow-1)}
.pillar__n{
  /* was soft terracotta at 2.32:1 on the white card — pine reads 11.3:1 and ties the
     cards to the emblem's ground colour */
  font-family:var(--display);font-size:.95rem;color:var(--pine);
  display:block;margin-bottom:var(--sp-2);
}
.pillar h3{margin-bottom:var(--sp-2)}
.pillar p{font-size:.97rem;color:var(--text-2)}
.pillar--feature{background:var(--sage);border-color:var(--sage);color:#fff}
.pillar--feature h3,.pillar--feature .pillar__n{color:#fff}
.pillar--feature p{color:rgba(255,255,255,.9)}

/* ---------- band ---------- */
.band{background:var(--sand)}
.band--paper{background:var(--paper)}

/* ---------- heritage quartet (2026-08-06) ---------------------------------------------
   Was a triad — shamrock, Colosseum, lotus — until later the same day, when the owner
   asked for the American identity woven in ("Ultimately we are American and love
   America"). A fourth drawn icon joined: a five-pointed star in the theme terracotta
   with a gold inline. Same rules as ever: emblem spirit and palette, flat vector drawn
   fresh (generic national symbols, no licence surface), restrained — four drawings and
   four words, NO flag print; the star carries it. The icons are decorative
   (aria-hidden): the LABELS carry the information.
   Layout: 1 col → 2×2 at 640 (four thirds would orphan one) → one row of four at 1000. */
.band--cream{background:var(--cream)}
.quartet{
  display:grid;gap:var(--sp-4);margin-top:var(--sp-6);
  grid-template-columns:1fr;justify-items:center;text-align:center;
}
@media (min-width:640px){.quartet{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.quartet{grid-template-columns:repeat(4,1fr)}}
.quartet__item{display:grid;gap:var(--sp-2);justify-items:center;max-width:26ch}
.quartet__icon{
  width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--line-gold);box-shadow:var(--shadow-1);
}
.quartet__icon svg{display:block;width:68px;height:68px}
.quartet__item b{
  font-family:var(--display);font-size:1.12rem;font-weight:600;color:var(--text);
  margin-top:var(--sp-1);
}
.quartet__item span{font-size:.9rem;color:var(--text-2)}

/* ---------- moments strip (2026-08-06) ------------------------------------------------
   The hero's three photographs, rehomed by the emblem-hero restructure — same arch
   frames, same alt text. Three across from 700; the middle frame drops a spacing step so
   the row reads as a composed strip rather than a grid of thumbnails. Ivory ground on
   purpose: the section sits between the cream quartet band and the sand pillars band.
   No new colour pairs — eyebrow/heading/lede are the measured inks on ivory. */
.moments{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
@media (min-width:700px){
  .moments{grid-template-columns:repeat(3,1fr)}
  .moments .arch:nth-child(2){margin-top:var(--sp-5)}
}

/* ---------- categories ---------- */
.cats{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--sp-5)}
.cat{
  font-size:.88rem;padding:.5rem 1rem;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);color:var(--text-2);
}

/* ---------- split feature ---------- */
.split{display:grid;gap:var(--sp-6);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--sp-7)}}
.split--flip .split__media{order:-1}
@media (max-width:899px){.split--flip .split__media{order:0}}

/* ---------- CTA band ---------- */
.cta-band{background:var(--pine);color:var(--ivory);text-align:center}
.cta-band h2{color:var(--ivory)}
.cta-band p{color:var(--mist);margin-top:var(--sp-3)}
.cta-band .hero__cta{justify-content:center}

/* ---------- email capture ---------- */
.capture{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5);text-align:center;box-shadow:var(--shadow-1);
}
.capture form{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:var(--sp-4)}
.capture input[type=email]{
  flex:1 1 260px;max-width:340px;padding:.85rem 1.1rem;font-family:var(--body);font-size:1rem;
  border:1.5px solid var(--line);border-radius:999px;background:var(--ivory);color:var(--text);
}
/* focus ring was soft terracotta at 2.44:1 against ivory — below the 3:1 non-text floor.
   The clay ink measures 5.6:1 and matches every other focus ring on the page. */
.capture input[type=email]:focus{outline:2px solid var(--clay);outline-offset:1px;border-color:transparent}
.capture .fineprint{font-size:.82rem;color:var(--text-3);margin-top:var(--sp-3)}

/* ---------- footer ---------- */
/* Pine ground per the emblem theme. Soft terracotta links measured 4.36:1 on pine — a
   new failure the swap would have introduced — so links are GOLD here (4.99:1). */
.site-footer{background:var(--pine);color:var(--mist);padding-block:var(--sp-6) var(--sp-5);font-size:.92rem}
.site-footer a{color:var(--gold);text-decoration:none}
/* Privacy and Terms sit inside a sentence, so colour alone cannot mark them as links
   (WCAG 1.4.1, flagged by axe 2026-09-17). Underlining them fixes it on every page. */
.foot__base a{text-decoration:underline;text-underline-offset:.18em}
.site-footer a:hover{text-decoration:underline}
.foot__grid{display:grid;gap:var(--sp-5)}
@media (min-width:760px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot__brand{font-family:var(--display);font-size:1.3rem;color:var(--ivory)}
.foot__tag{
  display:block;margin-top:.35rem;font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.foot h4,.foot h3{font-family:var(--body);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory);margin-bottom:var(--sp-2);font-weight:600}
.foot ul{list-style:none;padding:0;display:grid;gap:.4rem}
.foot__base{
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid rgba(196,204,194,.22);
  display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;font-size:.82rem;
}
.credit a{color:var(--mist)}
/* Mobile: a short last screen, not a second sitemap. The drawer already holds Explore
   and Partners; the footer keeps the mark, legal line, credit, and the #ad note. */
@media (max-width:759px){
  .site-footer{
    padding-block:var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    font-size:.86rem;
  }
  .foot__grid{gap:var(--sp-3)}
  .foot__grid > .foot{display:none}
  .foot__grid > div > p{display:none}
  .foot__brand{font-size:1.15rem}
  .foot__base{
    flex-direction:column;
    align-items:flex-start;
    gap:.65rem;
    margin-top:var(--sp-3);
    padding-top:var(--sp-3);
  }
  .site-footer .wrap > p{
    margin-top:var(--sp-2) !important;
    font-size:.72rem !important;
    max-width:none !important;
    line-height:1.4;
  }
}

/* ---------- scroll reveal ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

:focus-visible{outline:2.5px solid var(--clay);outline-offset:2px;border-radius:4px}

@media print{
  .site-header,.nav-toggle,.capture,.cta-band{display:none}
  body{background:#fff}
}


/* ---------- client media ---------- */
/* Arch figures previously held a placeholder div; real media has to fill the same box
   without distorting. object-fit does the work; the arch clip-path already exists. */
.arch picture, .arch img, .arch .clip{
  display:block; width:100%; height:100%; object-fit:cover;
}
.arch img, .arch .clip{ border-radius:inherit; }

/* Clips are decorative motion, not content. They carry a poster so the story survives
   with video disabled, and they never autoplay for a visitor who asked for less motion. */
.clip{ background:var(--sand); }
/* A vertical phone reel in a square arch shows only the middle 56% of its height, and a
   centred crop takes the esthetician clip's face off at the crown (owner, 2026-08-03).
   Biasing the window toward the top of the source keeps the face whole; the towel below
   is what gives. Applies to the poster frame too, which inherits object-position. */
.clip--face-up{ object-position:center 15%; }
@media (prefers-reduced-motion: no-preference){
  .clip{ /* autoplay is attached in main.js only under this query */ }
}

/* =========================================================================
   INTERIOR PAGES (2026-08-06) — the seven inner pages share these components.
   Ground rules: no new colour pairs. Every ink/ground combination below is one
   the homepage already ships measured (espresso/text-2 on ivory·paper·sand·cream,
   clay on ivory·sand·paper, pine on paper/cream, gold+mist on pine). The masthead,
   its solved --mh-k0 ladder and the bar are untouched — inner pages reuse .hero
   for the lead section so the enlarged lockup's hanging allowance comes from the
   same single source instead of being re-derived.
   ========================================================================= */

/* ---------- page lead ---------- */
/* Same .hero shell (same top allowance for the magnified lockup, same overflow
   clip); the modifier only tames the depth and the display size for inner pages.
   Appended last, so the longhand padding-bottom wins over .hero's shorthand at
   every breakpoint without touching the solved top calc. */
.hero--page{padding-bottom:var(--sp-6)}
.hero--page h1{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-block:var(--sp-3) var(--sp-4)}
.hero--page .lede{max-width:58ch}

/* ---------- pine feature card ---------- */
/* The homepage's .pillar--feature (white on sage) measures 2.91:1 — an accepted
   legacy pair reported to the owner, but not one the new pages propagate. Inner
   pages emphasise with the emblem's pine instead: ivory headings (10.9:1), gold
   labels (5.0:1) and mist body (6.9:1) — the same measured trio the proof band,
   CTA band and footer already ship. */
.pillar--pine{background:var(--pine);border-color:var(--pine)}
.pillar--pine h3{color:var(--ivory)}
.pillar--pine .pillar__n{color:var(--gold)}
.pillar--pine p{color:var(--mist)}

/* ---------- status chip (favorites shelves, journal teases) ---------- */
/* pine on cream — pine measures 11.3:1 on white (see .pillar__n), and cream is
   within a few points of white; verified 9.7:1 in the build's AA pass. */
.chip{
  display:inline-block;justify-self:start;
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pine);background:var(--cream);
  border:1px solid var(--line-gold);border-radius:999px;padding:.28rem .75rem;
}

/* ---------- FTC disclosure block ---------- */
/* The plain-English affiliate line, styled to be read rather than skimmed past:
   the emblem's cream with the gold hairline, body ink at full strength. */
.disclosure{
  background:var(--cream);border:1px solid var(--line-gold);border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);font-size:.95rem;color:var(--text-2);
  max-width:72ch;line-height:1.65;
}
.disclosure b{color:var(--text)}

/* ---------- owner-input slot ---------- */
/* Facts we do not have on record (engagement rate, demographics) are structured
   and labelled, never invented — the dashed border is the same visible-on-purpose
   language the homepage uses for its placeholder pillar card. */
.slot{
  border:1.5px dashed var(--line);border-radius:var(--r-md);background:transparent;
  padding:var(--sp-4) var(--sp-5);color:var(--text-2);font-size:.95rem;
}
.slot b{color:var(--text)}

/* ---------- four-step process (work-with-us) ---------- */
/* .pillar cards in a 1 → 2 → 4 ladder; the homepage's 3-up .pillars grid would
   orphan the fourth step the same way the quartet solved it. */
.steps{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}

/* ---------- contact form ---------- */
/* .capture's visual recipe, left-aligned and stacked; .capture itself centres and
   flexes any form inside it, so the contact card is its own component. Field
   chrome matches .capture input[type=email]: ivory ground, line border, clay
   focus ring (the measured pair every other focus ring on the site uses). */
.form-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5);box-shadow:var(--shadow-1);
}
@media (min-width:700px){.form-card{padding:var(--sp-6)}}
.cform{display:grid;gap:var(--sp-4)}
.cform .field{display:grid;gap:.45rem}
.cform label{font-size:.88rem;font-weight:600;color:var(--text)}
.cform input,.cform select,.cform textarea{
  width:100%;padding:.85rem 1.1rem;font-family:var(--body);font-size:1rem;
  border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--ivory);color:var(--text);
}
.cform select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.cform textarea{min-height:160px;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:2px solid var(--clay);outline-offset:1px;border-color:transparent;
}
.cform button{justify-self:start}
.cform .fineprint{font-size:.82rem;color:var(--text-3)}

/* ---------- legal prose ---------- */
.prose{margin-top:var(--sp-5)}
.prose h2{font-size:clamp(1.25rem,2.2vw,1.6rem);margin-top:var(--sp-6);margin-bottom:var(--sp-2)}
.prose h2:first-of-type{margin-top:var(--sp-5)}
.prose p{color:var(--text-2);margin-top:var(--sp-3)}
.prose ul{color:var(--text-2);margin-top:var(--sp-3);padding-left:1.2rem;display:grid;gap:.45rem}
.prose strong{color:var(--text)}

/* ---------- media-kit emblem display ---------- */
/* .emblem-seal is position:absolute at ≥960px by design (it stamps the home hero's
   photo stack) — inner pages need the same badge treatment in normal flow. */
.kit-emblem{width:min(220px,55vw);margin-inline:auto;text-align:center}
.kit-emblem img{
  width:100%;height:auto;border-radius:50%;display:block;
  background:var(--cream);box-shadow:var(--shadow-2),0 0 0 1.5px var(--line-gold);
}
.kit-emblem figcaption{
  margin-top:var(--sp-3);font-size:.72rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text);
}

/* ---------- drawer current page ---------- */
.drawer a[aria-current="page"]{color:var(--clay);font-weight:600}

/* ---------- destination drill-ins (2026-08-13) --------------------------------
   Travel hub cards become links into Amalfi and South Florida. Same measured
   pairs as .pillar — clay focus, pine labels, espresso body. Video frames are
   9:16 (the Reels they actually shot) sitting in the arch language, not a
   YouTube 16:9 that would crop the footage. Viator cards are affiliate; the
   disclosure block already exists. */
a.pillar{
  color:inherit;text-decoration:none;display:block;
  outline-offset:3px;
}
a.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow-1)}
a.pillar:focus-visible{outline:2.5px solid var(--clay)}
.pillar__go{
  display:inline-block;margin-top:var(--sp-3);
  font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--clay);
}
.crumb{
  display:flex;flex-wrap:wrap;gap:.45rem .7rem;align-items:center;
  font-size:.82rem;color:var(--text-3);margin-bottom:var(--sp-4);
}
.crumb a{color:var(--clay);font-weight:600;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span[aria-hidden="true"]{color:var(--line-gold)}

.places{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
@media (min-width:720px){.places{grid-template-columns:repeat(2,1fr)}}
.place{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);
}
.place h3{margin:0}
.place p{font-size:.97rem;color:var(--text-2);margin:0}
.place__k{
  font-family:var(--display);font-size:.95rem;color:var(--pine);
}

/* Destination lookbook — 12-col editorial grid. Each photograph has one home on the site.
   Amalfi never includes positano-couple. Vietnam and Thailand use their own slugs. */
.lookbook{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--sp-3);
  margin-top:var(--sp-6);
}
.lookbook figure{margin:0;display:flex;flex-direction:column;min-width:0}
.lookbook__shot{
  position:relative;overflow:hidden;flex:1;
  border-radius:var(--r-arch);background:var(--sand);box-shadow:var(--shadow-1);
}
.lookbook__shot picture{display:block;width:100%;height:100%}
.lookbook__shot img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.lookbook figcaption{
  margin:.55rem .15rem 0;
  font-size:.8rem;color:var(--text-3);line-height:1.35;
}
.lookbook .span-8{grid-column:span 8}
.lookbook .span-6{grid-column:span 6}
.lookbook .span-4{grid-column:span 4}
.lookbook .span-8 .lookbook__shot{aspect-ratio:16/10}
.lookbook .span-6 .lookbook__shot{aspect-ratio:4/5}
.lookbook .span-4 .lookbook__shot{aspect-ratio:4/5}
@media (max-width:720px){
  .lookbook{gap:var(--sp-4)}
  .lookbook .span-8,
  .lookbook .span-6,
  .lookbook .span-4{grid-column:span 12}
  .lookbook .span-8 .lookbook__shot{aspect-ratio:16/10}
  .lookbook .span-6 .lookbook__shot,
  .lookbook .span-4 .lookbook__shot{aspect-ratio:5/4}
  .lookbook__shot{border-radius:48px 48px 12px 12px}
}

.watch-grid{display:grid;gap:var(--sp-5);margin-top:var(--sp-6)}
@media (min-width:860px){.watch-grid{grid-template-columns:repeat(2,1fr);align-items:start}}
@media (max-width:859px){
  .watch__frame{max-width:min(280px,72vw);aspect-ratio:3/4}
}
.watch h3{margin:var(--sp-3) 0 var(--sp-2)}
.watch p{color:var(--text-2);font-size:.97rem}
.watch__frame{
  position:relative;display:block;border-radius:var(--r-arch);overflow:hidden;
  aspect-ratio:9/16;max-width:420px;margin-inline:auto;background:var(--sand);
  box-shadow:var(--shadow-2);
}
.watch__frame img,.watch__frame iframe,.watch__frame video{
  width:100%;height:100%;object-fit:cover;border:0;display:block;
}
.watch__frame--plain{
  background:var(--pine);
  display:flex;align-items:flex-end;justify-content:flex-start;
}
.watch__play{
  position:absolute;inset:auto auto 1.1rem 1.1rem;
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--pine);color:var(--ivory);font-weight:700;font-size:.82rem;
  letter-spacing:.04em;padding:.55rem .9rem;border-radius:999px;
}
.watch__play::before{
  content:"";width:0;height:0;
  border-style:solid;border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent var(--gold);
}
.watch__frame:hover .watch__play{background:var(--clay)}
.ig-embed{
  max-width:420px;margin-inline:auto;
  min-height:540px;
}

.exp-grid{display:grid;gap:var(--sp-3);margin-top:var(--sp-5)}
@media (min-width:720px){.exp-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.exp-grid{grid-template-columns:repeat(3,1fr)}}
.exp{
  display:flex;flex-direction:column;gap:.35rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-4);color:inherit;text-decoration:none;
  transition:transform var(--t),box-shadow var(--t);
}
.exp:hover{transform:translateY(-3px);box-shadow:var(--shadow-1)}
.exp:focus-visible{outline:2.5px solid var(--clay);outline-offset:2px}
.exp__src{
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pine);
}
.exp h3{font-size:1.05rem;margin:0}
.exp p{font-size:.9rem;color:var(--text-2);margin:0}
.exp__go{margin-top:auto;padding-top:var(--sp-2);font-size:.82rem;font-weight:700;color:var(--clay)}


/* ══════════════════════════════════════════════════════════════════════════════════════
   FAMILY FAVORITES — partner offers (2026-09-17)
   The favorites page moved from "seven shelves, filling" to the hub the family sends
   followers to when they mention a code. Everything below is used only on /favorites.html.
   Every class name was grepped against this whole sheet before it was written.
   Tokens only — no new colours: cream/sand grounds, clay for the deal and the copy button,
   pine for the code and the active filter, line-gold hairlines. Editorial, not a coupon site.
   ═════════════════════════════════════════════════════════════════════════════════════ */

/* the hero's "check here first" note */
.firstlook{
  margin-top:var(--sp-4);max-width:64ch;
  background:var(--cream);border:1px solid var(--line-gold);border-left:4px solid var(--clay);
  border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);
}
.firstlook b{display:block;font-family:var(--display);font-size:1.06rem;color:var(--pine);margin-bottom:.3rem}
.firstlook p{font-size:.95rem;color:var(--text-2);line-height:1.62;margin:0}

/* filter row — built by main.js from the cards on the page, so it can never list an
   empty category. It stays hidden with one category and without JS. */
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.filter{
  font:600 .84rem/1 var(--body);letter-spacing:.03em;color:var(--text-2);
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:.72rem 1.15rem;min-height:44px;cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.filter:hover{border-color:var(--clay);color:var(--text)}
.filter[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:var(--ivory)}

/* the offer grid */
.offers{display:grid;gap:var(--sp-4);margin-top:var(--sp-5)}
@media (min-width:720px){.offers{grid-template-columns:repeat(2,minmax(min(300px,100%),1fr))}}
@media (min-width:1080px){.offers{grid-template-columns:repeat(3,minmax(min(300px,100%),1fr))}}

.offer{
  display:flex;flex-direction:column;gap:var(--sp-3);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-5);box-shadow:var(--shadow-1);
}
/* one attribute retires a partner without deleting the block */
.offer[data-status="inactive"]{display:none}
.offer[hidden]{display:none}

/* The mark row. A partner logo sits ON the card like a masthead — no box around it,
   because a grid of boxed logos is what a coupon site looks like. One cap does the
   sizing for every shape the brands send: a wide wordmark meets the width limit first,
   a round or square mark meets the height limit first, so nothing has to be measured
   by hand when a partner is added. min-height keeps every brand name on the same line
   across the row whatever the mark's shape. */
.offer__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:64px}
.offer__logo{max-height:52px;max-width:170px;width:auto;height:auto;object-fit:contain;display:block}
/* the fallback when a brand has no usable logo: their initial on a cream tile */
.offer__mark{
  width:56px;height:56px;flex:none;border-radius:var(--r-sm);overflow:hidden;
  display:grid;place-items:center;background:var(--cream);border:1px solid var(--line-gold);
  font-family:var(--display);font-size:1.5rem;color:var(--pine);line-height:1;
}
.offer__mark img{width:100%;height:100%;object-fit:contain;display:block}

.badge{
  display:inline-block;font:700 .64rem/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--clay);border-radius:999px;padding:.4rem .78rem;text-align:center;
}
.badge--soon{background:var(--pine);color:var(--ivory)}
.badge--ended{background:var(--sand);color:var(--text-2);border:1px solid var(--line)}

.offer__brand{font-family:var(--display);font-size:1.45rem;line-height:1.15;margin:0}
.offer__deal{
  font-family:var(--display);font-size:1.7rem;line-height:1.12;color:var(--clay);margin:0;
}
.offer__deal small{
  display:block;font-family:var(--body);font-size:.92rem;font-weight:500;
  color:var(--text-2);margin-top:.35rem;letter-spacing:0;
}

/* the code itself: a field you can see, select and copy */
/* the code gets its own line: inline with the button, even a 10-character code broke
   across two lines in a 300px card (measured at 390px, 2026-09-17). */
.codebox{
  display:grid;gap:var(--sp-2);
  background:var(--sand);border:1px dashed var(--line-gold);border-radius:var(--r-sm);
  padding:var(--sp-3);
}
.codebox__label{
  width:100%;font:700 .62rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-2);   /* measured: --text-3 on sand is 2.84:1, fails AA at this size */
}
.codebox__code{
  font:700 1.16rem/1.3 var(--body);letter-spacing:.05em;color:var(--pine);
  overflow-wrap:anywhere;
}
.copy{min-height:44px;width:100%;justify-content:center}
/* with JS off the button could not copy anything, so it does not appear at all —
   the code itself stays visible and selectable (main.js sets html.js on load). */
html:not(.js) .copy{display:none}
.copy.is-copied{background:var(--pine);border-color:var(--pine);color:var(--ivory)}
.offer__shop{justify-content:center}
.offer__note{font-size:.95rem;color:var(--text-2);line-height:1.62;margin:0}
.offer__meta{font-size:.82rem;color:var(--text-2);margin:0}  /* --text-3 measured 3.47:1 on paper */
.offer__reel{
  font:700 .88rem/1 var(--body);color:var(--clay);text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
}
.offer__reel:hover{text-decoration:underline}

/* an expired offer says so rather than handing over a dead code */
.offer.is-expired .codebox{opacity:.72}
.offer.is-expired .codebox__code{text-decoration:line-through;color:var(--text-3)}

/* the coming-soon card is the same object with the working parts switched off */
.offer--soon{background:var(--cream);border-style:dashed}
.offer--soon .offer__mark{background:var(--paper)}

/* "ask us" and the partner invitation share a quiet two-up at the foot of the page */
.asks{display:grid;gap:var(--sp-4);margin-top:var(--sp-5)}
@media (min-width:860px){.asks{grid-template-columns:1fr 1fr}}
.ask{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start;
}
.ask h3{font-size:1.25rem;margin:0}
.ask p{color:var(--text-2);line-height:1.62;margin:0}
.ask .btn{margin-top:auto}

/* screen-reader-only text — the offers grid announces copy and filter results here */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}