/* ═══════════════════════════════════════════════════════════════════════════
   A Pumpkin Story — DESIGN PREVIEW SKIN v2 (2026-10-06), the live theme since 2026-10-06 (was the /preview/ skin).

   Loaded AFTER /assets/v3/style.css (and product.css) and overrides it. v2 brings
   the site much closer to mansagers5.com: paper everywhere (no dark washes, no
   linen bands), EB Garamond for the words with real small caps, Source Sans 3 only
   for buttons, nav and form controls, hairline rules and the Selbu star as the only
   ornament, bookplate cards, eggplant buttons, the family's engraving, and the
   hills watercolour above a linen footer. The pumpkin business keeps its
   photographs, and ember for one line: the scarcity line.

   Built by scripts/build-preview.py; the five hero options live in the pages.
   Rules kept: no inline styles (CSP), fonts self-hosted, no external calls.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/v4/eb-garamond-roman.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 800;font-display:swap;src:url('/assets/v4/eb-garamond-italic.woff2') format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url('/assets/v4/source-sans-3-roman.woff2') format('woff2')}

:root{
  --paper:#f4eee2; --paper-2:#f4eee2; --paper-3:#ebe3d3; --card:#fbf8f2; --linen:#ede5d5;
  --ink:#2b2520; --ink-2:#5b5046; --ink-3:#6f6357;
  --line:#cfc2ab; --line-2:#bfae92;
  --eggplant:#5b2f50; --eggplant-deep:#47233e;
  --pumpkin:#5b2f50; --pumpkin-soft:#47233e; --pumpkin-text:#97401f;
  --ember:#97401f;
  --pine:#4f6b60; --pine-deep:#3d5449; --gold:#8A5A00; --gold-bright:#C98A16;
  --dusk:#2b2520; --on-accent:#fbf8f2;
  --serif:'EB Garamond',Garamond,'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:'Source Sans 3','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --sh-1:0 1px 2px rgba(43,37,32,.04),0 8px 24px -12px rgba(43,37,32,.12);
  --sh-2:0 1px 2px rgba(91,47,80,.06),0 14px 32px -14px rgba(91,47,80,.28);
  --sh-3:0 2px 6px rgba(91,47,80,.08),0 24px 48px -20px rgba(91,47,80,.34);
  --r:6px;
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%235b2f50' d='M50 46.11 40.86 24.05 50 2 59.14 24.05ZM52.75 47.25 61.89 25.19 83.94 16.06 74.81 38.11ZM53.89 50 75.95 40.86 98 50 75.95 59.14ZM52.75 52.75 74.81 61.89 83.94 83.94 61.89 74.81ZM50 53.89 59.14 75.95 50 98 40.86 75.95ZM47.25 52.75 38.11 74.81 16.06 83.94 25.19 61.89ZM46.11 50 24.05 59.14 2 50 24.05 40.86ZM47.25 47.25 25.19 38.11 16.06 16.06 38.11 25.19Z'/%3E%3Ccircle fill='%235b2f50' cx='50' cy='50' r='1.5'/%3E%3C/svg%3E");
  --star-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23f4eee2' d='M50 46.11 40.86 24.05 50 2 59.14 24.05ZM52.75 47.25 61.89 25.19 83.94 16.06 74.81 38.11ZM53.89 50 75.95 40.86 98 50 75.95 59.14ZM52.75 52.75 74.81 61.89 83.94 83.94 61.89 74.81ZM50 53.89 59.14 75.95 50 98 40.86 75.95ZM47.25 52.75 38.11 74.81 16.06 83.94 25.19 61.89ZM46.11 50 24.05 59.14 2 50 24.05 40.86ZM47.25 47.25 25.19 38.11 16.06 16.06 38.11 25.19Z'/%3E%3C/svg%3E");
}

/* ── ground and type: the family's book ──────────────────────────────────── */
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18.5px;line-height:1.55;
  font-variant-numeric:oldstyle-nums proportional-nums;padding-bottom:48px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:0;line-height:1.08}
h2{font-size:clamp(32px,4.4vw,56px)}
a{color:var(--eggplant);text-decoration-thickness:1px;text-underline-offset:5px}
a:hover{color:var(--eggplant-deep)}
::selection{background:var(--ember);color:var(--paper)}
:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:2px}
.decor{display:none}                      /* the floating leaves: off, for the family's calm */
section{border:0}

/* Letterspaced real small caps, the family site's running heads. */
.kicker,.intro,.scard-no,.pp .kicker,.stage-policy-k,.mh-kicker{
  font-family:var(--serif);font-weight:500;font-size:17px;letter-spacing:.1em;text-transform:none;
  font-variant-caps:all-small-caps;color:var(--eggplant)}
.kicker.light{color:#f4eee2}

/* The hairline rule with the Selbu star: the only ornament on the page. */
.orn{display:flex;align-items:center;gap:1rem;color:var(--line);max-width:28rem;margin:22px auto 0}
.orn::before,.orn::after{content:"";flex:1;border-top:1px solid currentColor}
.orn>span{width:18px;height:18px;background:var(--star) center/contain no-repeat}
.orn.left{margin-inline:0}
.orn.paper{color:rgba(244,238,226,.45)}
.orn.paper>span{background-image:var(--star-paper)}
.star{display:inline-block;width:22px;height:22px;background:var(--star) center/contain no-repeat}

.filltext{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink);-webkit-text-fill-color:var(--ink)}

/* ── buttons: the business page's plain eggplant buttons ─────────────────── */
.btn{font-family:var(--sans);font-weight:600;letter-spacing:.01em;border-radius:var(--r);border:1px solid transparent;
  transition:background .25s,color .25s,border-color .25s}
.btn-pumpkin{background:var(--eggplant);color:var(--card);box-shadow:none}
.btn-pumpkin:hover{background:var(--eggplant-deep);transform:none;box-shadow:none}
.btn-clear,.btn-outline{background:transparent;color:var(--eggplant);border-color:var(--eggplant);backdrop-filter:none}
.btn-clear:hover,.btn-outline:hover{background:rgba(91,47,80,.07);transform:none;color:var(--eggplant-deep)}

/* ── sticky paper header, from the first pixel ───────────────────────────── */
/* Opaque, and NO backdrop-filter (2026-10-12): a blur behind a sticky bar is recomputed on
   every scroll frame, and at 95% opacity nobody could see it. Measured with the grain below:
   long frames on a scroll of the homepage fell by a third to a half. Keep it solid. */
.topbar,.topbar.solid{position:sticky;top:0;background:rgb(244,238,226);backdrop-filter:none;border-bottom:1px solid rgba(207,194,171,.7)}
.topbar-in{padding:12px 0}
.brand,.topbar .brand,.topbar.solid .brand{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:.01em;color:var(--ink);text-shadow:none}
.brand .mark{display:inline-block;width:36px;height:27px;color:transparent;overflow:hidden;
  background:url('/assets/v4/engraving-eggplant.png') center/contain no-repeat}
.topnav a,.topbar.solid .topnav a{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-2);text-shadow:none}
.topnav a:hover,.topbar.solid .topnav a:hover{color:var(--eggplant)}
.topbar .btn-sm{font-size:14.5px}
.mnav summary{color:var(--ink)}
.mnav[open]>nav{border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-1)}
.mnav nav a{border-radius:var(--r);font-family:var(--sans);font-weight:500}
.ribbon{display:none}                     /* the orange marquee */

/* ── the five hero options share these pieces ────────────────────────────── */
.mh{position:relative;overflow:hidden;background:var(--paper)}
.mh .wrap{position:relative;z-index:1}
.mh h1{font-size:clamp(36px,4.6vw,66px);line-height:1.05;text-wrap:balance;margin:14px 0 0}
.mh-lead{margin-top:18px;max-width:56ch;font-size:clamp(19px,1.6vw,23px);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.mh-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.mh-status{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-family:var(--sans);font-size:15px;color:var(--ink-2)}
.mh-status .dot{width:8px;height:8px;border-radius:50%;background:var(--pine);flex:none}
.mh-status b{font-weight:600;color:var(--ember)}
.mh-engraving{display:block;width:100%;height:auto}
.mh-title{font-family:var(--serif);font-weight:500;font-size:clamp(44px,6.6vw,92px);line-height:1;letter-spacing:-.005em;margin:0;text-wrap:balance}
.mh-plate{margin:0;border:1px solid var(--line);padding:10px;background:var(--card);box-shadow:var(--sh-1)}
.mh-plate img{display:block;width:100%;height:100%;object-fit:cover}

/* A · the business page: words left, the engraving right */
.mh-a{padding:clamp(40px,6vw,88px) 0 clamp(48px,6vw,80px)}
.mh-a .mh-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:860px){.mh-a .mh-grid{grid-template-columns:1fr}.mh-a .mh-engraving{max-width:420px;margin:0 auto;order:-1}}

/* B · the family masthead, then the photograph as a plate */
.mh-b{padding:clamp(44px,6vw,80px) 0 clamp(40px,5vw,64px);text-align:center}
.mh-b .orn{margin-top:18px}
.mh-b .mh-lead{margin-inline:auto;margin-top:26px}
.mh-b .mh-cta{justify-content:center}
.mh-b .mh-plate{margin:clamp(30px,4vw,48px) auto 0;max-width:1100px;aspect-ratio:21/9}
.mh-b .mh-plate img{aspect-ratio:21/9}
.mh-b .mh-status{margin-top:22px}

/* C · a tipped-in plate beside the engraving and the words */
.mh-c{padding:clamp(36px,5vw,72px) 0 clamp(44px,6vw,80px)}
.mh-c .mh-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:center}
.mh-c .mh-plate{aspect-ratio:4/5}
.mh-c .mh-plate img{aspect-ratio:4/5}
.mh-c .mh-engraving{width:min(300px,70%);margin-bottom:6px}
@media (max-width:860px){.mh-c .mh-grid{grid-template-columns:1fr}.mh-c .mh-plate{aspect-ratio:3/2;order:1}.mh-c .mh-plate img{aspect-ratio:3/2}}

/* D · the sign itself, as a bookplate on linen, the photograph beneath */
.mh-d{background:var(--linen) url('/assets/v4/linen.jpg');padding:clamp(28px,4vw,56px) 0 clamp(40px,5vw,64px)}
.mh-d .plate{background:var(--paper);border:3px double rgba(91,47,80,.55);outline:1px solid rgba(91,47,80,.18);outline-offset:5px;
  padding:clamp(26px,4vw,52px) clamp(22px,4vw,56px);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(22px,4vw,56px);align-items:center}
.mh-d .mh-engraving{max-width:420px;margin:0 auto}
.mh-d .mh-photo{margin:clamp(26px,4vw,44px) 0 0;aspect-ratio:21/8;overflow:hidden;border:1px solid var(--line)}
.mh-d .mh-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
@media (max-width:860px){.mh-d .plate{grid-template-columns:1fr;text-align:center}.mh-d .mh-cta{justify-content:center}.mh-d .mh-photo{aspect-ratio:3/2}}

/* E · the family's hills, the masthead over the sky */
.mh-e{text-align:center;padding:clamp(40px,6vw,76px) 0 0;min-height:clamp(560px,62vw,820px);display:flex;flex-direction:column}
.mh-e .wrap{flex:none}
.mh-e .mh-lead{margin-inline:auto;margin-top:24px}
.mh-e .mh-cta{justify-content:center}
.mh-e .mh-engraving{width:min(360px,70%);margin:26px auto 0}
.mh-e .mh-hills{flex:1 1 auto;position:relative;min-height:280px;margin-top:-40px}
.mh-e .mh-hills img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%);mask-image:linear-gradient(to bottom,transparent 0,#000 34%)}
.mh-e .mh-status{margin-top:22px}

/* ── sections: paper, hairlines, the star ────────────────────────────────── */
.stage,.statement,.gal3,.faq3,.how3,.addons-sec,.story3,.rev3{background:var(--paper);border:0}
.stage,.gal3,.faq3,.how3,.story3{border-top:1px solid var(--line)}
.stage-scarce{color:var(--ember);font-weight:500;font-style:italic}
.stage-policy{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.stage-policy-k{font-size:16px;margin-bottom:8px}
.stage-policy p{font-size:17px}
.stage-tax,.stage-varieties{color:var(--ink-2);font-size:16.5px}
.stage-varieties b{color:var(--ink)}

/* package cards: the business page's cards, the middle one in eggplant */
.scard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.scard:hover{box-shadow:var(--sh-1)}
.scard.feat{border:2px solid var(--eggplant);box-shadow:var(--sh-2)}
.scard.feat:hover{box-shadow:var(--sh-2)}
.pop{background:var(--eggplant);color:var(--card);border-radius:999px;font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 12px}
.scard-shot{border-radius:0;background:var(--paper-3)}
.scard-body h3{font-size:clamp(26px,2.6vw,32px);font-weight:500}
.scard-tag{color:var(--ink-3);font-size:16px}
.scard-rating{color:var(--gold);font-weight:600;font-family:var(--sans);font-size:13px}
.price{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;color:var(--eggplant);font-variant-numeric:lining-nums;font-size:clamp(40px,4.4vw,54px)}
.price span{color:var(--ink-3);font-size:.5em;vertical-align:super}
.intro{font-size:15px;margin-top:6px;color:var(--ink-3)}
.count{color:var(--ink-2);font-size:17px}
.count b{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:24px;font-variant-numeric:lining-nums}
.ticks,.ticks li{border-color:var(--line)}
.ticks li{color:var(--ink-2);padding-left:22px;font-size:16.5px}
.ticks li::before{border:0;width:.3rem;height:.3rem;left:4px;top:.8em;background:rgba(91,47,80,.7);transform:rotate(45deg)}
.pp-visual .ticks li::before{top:.75em}
.scard .btn-block{font-size:15.5px}

.addon-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.addon-card h4{font-size:24px}
.addon-card p{font-size:16.5px}
.addon-card b{color:var(--ink)}
.addon-note,.pay-note{font-size:16px}

.statement{padding:clamp(48px,8vw,110px) 0}
.statement-line{font-family:var(--serif);font-weight:500;font-style:italic;letter-spacing:0;line-height:1.2;color:var(--ink);font-size:clamp(26px,4vw,54px)}

/* how it works: hairline columns, the number in eggplant */
.tilts{perspective:none;gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.tilt{background:transparent;border:0;border-radius:0;box-shadow:none;transform:none !important;padding:clamp(22px,3vw,36px)}
.tilt+.tilt{border-left:1px solid var(--line)}
.tilt::before{display:none}
.tilt:hover{box-shadow:none}
.tnum{font-family:var(--serif);font-weight:500;font-size:44px;color:var(--eggplant);opacity:1;font-variant-numeric:lining-nums}
.tilt h3{font-size:24px}
.tilt p{font-size:16.5px;color:var(--ink-2)}
@media (max-width:760px){.tilt+.tilt{border-left:0;border-top:1px solid var(--line)}}

.gal3-track figure{border-radius:var(--r);border:1px solid var(--line);box-shadow:none;padding:6px;background:var(--card)}
.gal3-track img{border-radius:2px}
.story3-pull{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.3vw,28px);color:var(--eggplant);border-left:0;padding-left:0}
.story3-text p{color:var(--ink-2);font-size:18px}
.story3-shot,.story3 figure,.story3 img{border-radius:var(--r)}
.rev3-card{background:var(--paper);border:3px double rgba(91,47,80,.55);outline:1px solid rgba(91,47,80,.18);outline-offset:5px;border-radius:0}
.rev3-card h3{font-weight:500}
.quote3,.quote3 p,blockquote{font-family:var(--serif);font-style:italic;font-size:1.05em;color:var(--ink)}
.faq3 details{border-color:var(--line)}
.faq3 summary{font-family:var(--serif);font-weight:500;font-size:1.15em}
.faq3 p{font-size:17px}

/* ── the enquiry band: the business page's eggplant band ─────────────────── */
.order3{background:var(--eggplant);color:var(--paper)}
.order3 h2{color:var(--paper);font-weight:500}
.order3-sub{color:rgba(244,238,226,.85)}
.order3 .kicker{color:#e3c9dc}
.field label{color:var(--ink-2);font-family:var(--sans);font-weight:600;font-size:13.5px}
.field input,.field select,.field textarea{border-radius:var(--r);border-color:var(--line-2);background:var(--paper);color:var(--ink);font-family:var(--sans)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--eggplant);box-shadow:0 0 0 3px rgba(91,47,80,.18)}
.form-note,.form-alt{color:rgba(244,238,226,.8)}
.form-status{border-radius:var(--r)}
.order3 .btn-pumpkin{background:var(--card);color:var(--eggplant)}
.order3 .btn-pumpkin:hover{background:#fff}
.order3 form,.order3 .order3-form,.order3 .form{border-radius:var(--r)}

/* ── the family footer: the hills, then linen ────────────────────────────── */
.mf{margin-top:0}
.mf-hills{position:relative;aspect-ratio:1800/764;max-height:520px;overflow:hidden;background:var(--paper)}
.mf-hills img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%);mask-image:linear-gradient(to bottom,transparent 0,#000 26%)}
.mf-body{background:var(--linen) url('/assets/v4/linen.jpg');text-align:center;padding:clamp(40px,5vw,64px) 24px clamp(36px,4vw,56px);
  display:flex;flex-direction:column;align-items:center;gap:14px}
.mf-name{margin:0;font-variant-caps:all-small-caps;letter-spacing:.14em;font-size:19px;font-weight:500;color:var(--ink)}
.mf-links{margin:4px 0 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;font-size:17px}
.mf-links a{color:var(--eggplant);text-decoration:none}
.mf-links a:hover{text-decoration:underline}
.mf-links i{width:.3rem;height:.3rem;background:var(--ember);transform:rotate(45deg);display:inline-block}
.mf-copy{margin:6px 0 0;font-style:italic;color:var(--ink-3);font-size:15px}

/* ── the package page (product.css) ──────────────────────────────────────── */
.pp-main{background:var(--paper)}
.pp h1{font-weight:500;font-size:clamp(32px,3.2vw,46px)}
.pp-shot{border-radius:var(--r);border:1px solid var(--line)}
.pp-opts{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.pp-opts h2{font-weight:500;font-size:clamp(22px,2vw,26px)}
.pp .price{font-weight:500}
.pp h2.count{font-family:var(--serif);color:var(--ink-2);font-size:17px}
.pp-adds .opt small,.pp-varieties{color:var(--ink-3)}
.pp-adds .opt span{font-size:16px}
.pp-varieties b{color:var(--ink-2)}
.pp-total{font-family:var(--serif);font-weight:500;font-variant-numeric:lining-nums}
.crumbs a{color:var(--eggplant)}

/* ── the preview's own strip and chooser ─────────────────────────────────── */
.preview-strip{position:fixed;left:0;right:0;bottom:0;z-index:400;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;
  padding:8px 16px;background:var(--eggplant-deep);color:var(--paper);font-family:var(--serif);font-variant-caps:all-small-caps;
  letter-spacing:.1em;font-size:16px;line-height:1.3;border-top:1px solid rgba(244,238,226,.25)}
.preview-strip a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.preview-strip a:hover{color:#fff}
.preview-strip .cur{color:#e3c9dc}
@media (max-width:640px){.preview-strip{font-size:14px;gap:8px 12px}}

.chooser{max-width:1100px;margin:0 auto;padding:clamp(40px,6vw,80px) 24px 80px;text-align:center}
.chooser h1{font-size:clamp(36px,5vw,60px)}
.chooser>p{max-width:60ch;margin:18px auto 0;color:var(--ink-2)}
.chooser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:28px;margin-top:40px;text-align:left}
.chooser-grid a{display:block;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.chooser-grid a:hover{box-shadow:var(--sh-2);border-color:var(--eggplant)}
.chooser-grid img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:1px solid var(--line);background:var(--paper-3)}
.chooser-grid .t{padding:18px 20px 22px}
.chooser-grid .k{font-variant-caps:all-small-caps;letter-spacing:.12em;color:var(--eggplant);font-size:17px}
.chooser-grid h2{font-size:26px;margin-top:4px}
.chooser-grid p{margin-top:8px;color:var(--ink-2);font-size:16.5px;line-height:1.45}
.chooser-foot{margin-top:40px;font-size:16px;color:var(--ink-2)}
.chooser-foot a{margin:0 6px}

/* the live hero's rules, switched off for the five options (they keep .hero3 for app.js) */
.mh.hero3{min-height:0;height:auto;display:block;align-items:initial;color:var(--ink);background:var(--paper)}
.mh-e.hero3{display:flex;flex-direction:column}
.mh-d.hero3{background:var(--linen) url('/assets/v4/linen.jpg')}

/* fixes after the first look */
.mh h1.mh-lead{font-size:clamp(20px,1.8vw,25px);font-weight:400;line-height:1.5;color:var(--ink-2);margin-top:26px;max-width:58ch}
.mh-e .mh-lead,.mh-b .mh-lead{max-width:52ch}
.topbar::before,.topbar::after{display:none}
.topbar{background-image:none;box-shadow:none}
.pp-main{padding-top:12px;min-height:0}
.chooser-grid{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.chooser-grid img{height:auto;aspect-ratio:auto;object-fit:fill}
.mh-e{padding-top:clamp(32px,4vw,56px)}
.mh-e .mh-hills{min-height:300px;margin-top:-20px}
.pp-main::before,.pp-main::after,.pp-body::before,.pp-body::after{display:none}
body.pp-body,.pp-body{background:var(--paper)}
.pp-foot{border-top:1px solid var(--line)}

/* ── round 2: C, made bolder (F, G, H) ───────────────────────────────────── */
.btn-ember{background:var(--ember);color:var(--card)}
.btn-ember:hover{background:#A83A0A;color:var(--card)}
.mh-tag{display:inline-block;font-family:var(--serif);font-variant-caps:all-small-caps;letter-spacing:.12em;font-size:17px;font-weight:500;
  color:var(--eggplant);border:1px solid rgba(91,47,80,.45);border-radius:999px;padding:6px 16px;margin-bottom:16px;background:rgba(251,248,242,.7)}
.mh-year{font-family:var(--serif);font-weight:500;font-size:clamp(72px,9.5vw,160px);line-height:.88;letter-spacing:-.02em;color:var(--eggplant);margin:0;text-wrap:balance}
.mh-open{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(24px,2.8vw,42px);line-height:1.1;color:var(--ember);margin:10px 0 0}
.mh h1.mh-lead{margin-top:20px}
.mh-f .decor,.mh-h .decor{display:block;z-index:0}
.mh-f .decor .d,.mh-h .decor .d{color:var(--eggplant) !important;opacity:.14 !important}
.mh-mark{display:block;width:150px;height:auto;margin-bottom:10px}

/* F · the plate, larger: the photograph runs to the left edge */
.mh-f{padding:clamp(20px,3vw,40px) 0 clamp(44px,6vw,80px)}
.mh-f .mh-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center;
  padding-right:var(--gut)}
.mh-f .mh-plate{aspect-ratio:4/5;border-left:0;padding-left:0;max-height:min(84vh,760px)}
.mh-f .mh-plate img{aspect-ratio:4/5;max-height:min(84vh,740px)}
.mh-f .mh-text{max-width:620px}
.mh-f .mh-engraving{width:min(260px,60%);margin-bottom:8px}
.mh-f h1{font-size:clamp(40px,5.4vw,78px)}
@media (max-width:860px){.mh-f .mh-grid{grid-template-columns:1fr;padding-right:0}.mh-f .mh-plate{aspect-ratio:3/2;max-height:none;border-left:1px solid var(--line);padding-left:10px}
  .mh-f .mh-plate img{aspect-ratio:3/2;max-height:none}.mh-f .mh-text{padding:0 var(--gut)}}

/* G · the framed photograph, a card over it */
.mh-g{padding:0 0 clamp(40px,6vw,72px)}
.mh-g .mh-photo{position:relative;height:clamp(420px,72vh,700px);margin:14px 14px 0;overflow:hidden;background:var(--paper-3)}
.mh-g .mh-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.mh-g .mh-photo::after{content:"";position:absolute;inset:16px;border:1px solid rgba(244,238,226,.75);pointer-events:none}
.mh-g .card{position:relative;z-index:2;margin:clamp(-140px,-14vw,-90px) auto 0;max-width:1040px;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--sh-2);padding:clamp(24px,3.5vw,48px) clamp(22px,4vw,56px);display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(20px,4vw,56px);align-items:center}
.mh-g .mh-engraving{max-width:360px;margin:0 auto}
.mh-g .mh-year{font-size:clamp(64px,7.5vw,120px)}
@media (max-width:860px){.mh-g .mh-photo{height:clamp(300px,52vh,460px)}.mh-g .card{grid-template-columns:1fr;margin-top:-60px}.mh-g .mh-engraving{max-width:240px}}

/* H · the open book: words left, the photograph filling the right page */
.mh-h.hero3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(540px,86vh,820px)}
.mh-h .mh-text{position:relative;z-index:1;align-self:center;justify-self:end;width:min(100%,640px);box-sizing:border-box;
  padding:clamp(36px,6vw,80px) clamp(28px,4vw,64px) clamp(36px,6vw,80px) var(--gut)}
.mh-h .mh-photo{position:relative;overflow:hidden;background:var(--paper-3);margin:14px 14px 14px 0}
.mh-h .mh-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.mh-h .mh-photo::after{content:"";position:absolute;inset:16px;border:1px solid rgba(244,238,226,.75);pointer-events:none}
@media (max-width:860px){.mh-h.hero3{grid-template-columns:1fr;min-height:0}.mh-h .mh-photo{order:-1;aspect-ratio:3/2;margin:14px}.mh-h .mh-photo img{position:static;aspect-ratio:3/2}
  .mh-h .mh-text{justify-self:stretch;width:100%;padding:28px var(--gut) 40px}}

.chooser-h2{margin-top:64px;font-size:30px}
.chooser-grid--small{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:18px}
.chooser-grid--small h2{font-size:21px}
.chooser-grid--small p{font-size:15px}
.chooser-grid--small .t{padding:14px 16px 16px}
.mh-year,.mh-year *{line-height:.9}
.mh-open,.mh-open *{line-height:1.1}
.mh-year{font-variant-numeric:lining-nums}

/* H: the words start where every section's content column starts, whatever the screen width */
.mh-h .mh-text{justify-self:start;width:100%;max-width:none;
  padding-left:max(var(--gut),calc((100vw - var(--maxw)) / 2));padding-right:clamp(28px,4vw,64px)}
.mh-h .mh-text>*{max-width:600px}

/* Wider than the content column: the hero becomes a centred spread the width of the page column,
   the photograph ending where every section's right edge ends, instead of bleeding off the screen. */
@media (min-width:1400px){
  .mh-h.hero3{max-width:calc(var(--maxw) + var(--gut) * 2);margin-inline:auto}
  .mh-h .mh-text{padding-left:var(--gut)}
  .mh-h .mh-photo{margin-right:var(--gut)}
}
/* the story portrait: keep the head, lose the pavement */
.curtain img{object-position:50% 0}
/* The story photo is a landscape group portrait (2026-10-09): the frame follows it instead of the 3/4 curtain. */
.curtain.curtain-wide{aspect-ratio:3/2}
.curtain.curtain-wide img{object-position:50% 50%}


/* ═══ design J, scoped by html[data-design="j"] (the live site carries that attribute) ═══ */
/* ═══════════════════════════════════════════════════════════════════════════
   Round 3 (2026-10-06): three WHOLE-SITE designs on H's hero, scoped by
   html[data-design]. Loaded after preview.css. Each is one system carried
   through every section, not a hero variant.

     I  The Ledger    quiet, ruled, bookish; hairline columns, no boxes
     J  The Plates    a storybook: every photograph a tipped-in plate, drop caps
     K  The Almanac   bold: masthead rules, an inverted eggplant card, a band

   Shared: H's opening without the leaves, EB Garamond, eggplant, the star, the
   hills above the footer. Ember: the hero's order button, the scarcity line,
   and in K the "most popular" pill and the band's star.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── shared by the three ─────────────────────────────────────────────────── */
html[data-design] .decor{display:none !important}
html[data-design] .mh-h .mh-photo{margin:0 0 0 0}
html[data-design] .mh-h .mh-photo::after{inset:18px}
html[data-design] .mh-h .mh-text{padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(40px,7vw,96px)}
html[data-design] .orn{max-width:22rem}
html[data-design] .story3-pull+p::first-letter{float:left;font-family:var(--serif);font-weight:500;font-size:3.4em;line-height:.82;padding:.08em .12em 0 0;color:var(--eggplant)}
html[data-design] .quote3-stars{color:var(--ember)}
html[data-design] .pay-note{font-size:16px;color:var(--ink-3)}
html[data-design] .faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:0 clamp(28px,4vw,64px)}
html[data-design] .faq-item{border-top:1px solid var(--line);padding:18px 0 20px}
html[data-design] .faq-item h3{font-size:22px;font-weight:500;margin-bottom:6px}
html[data-design] .faq-item p{font-size:17px;color:var(--ink-2)}
html[data-design] .form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
html[data-design] .stage-head{max-width:none}

/* ── I · The Ledger ──────────────────────────────────────────────────────── */
html[data-design="i"] .mh-h .mh-text{padding-left:var(--gut)}
html[data-design="i"] .stage-head,html[data-design="i"] .gal3-head,html[data-design="i"] .faq3 .wrap>.kicker,html[data-design="i"] .h3head{text-align:left}
html[data-design="i"] .h3head{margin-inline:0}
html[data-design="i"] .orn{margin-inline:0}
html[data-design="i"] .stage-policy{border:0;border-block:1px solid var(--line);border-radius:0;background:transparent;padding:18px 0}
html[data-design="i"] .stage-row{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
html[data-design="i"] .scard,html[data-design="i"] .scard.feat{background:transparent;border:0;border-radius:0;box-shadow:none;padding:clamp(22px,3vw,40px) clamp(18px,2.4vw,32px);text-align:center}
html[data-design="i"] .scard+.scard{border-left:1px solid var(--line)}
html[data-design="i"] .scard-shot{border:1px solid var(--line);padding:6px;background:var(--card);aspect-ratio:auto}
html[data-design="i"] .scard-shot img{aspect-ratio:2/1}
html[data-design="i"] .scard-body{padding:22px 0 0}
html[data-design="i"] .pop{position:static;display:block;background:none;color:var(--ember);border-radius:0;padding:0 0 10px;
  font-family:var(--serif);font-size:17px;font-weight:500;letter-spacing:.12em;text-transform:none;font-variant-caps:all-small-caps}
html[data-design="i"] .ticks{text-align:left;display:inline-block;max-width:30ch}
html[data-design="i"] .price{font-size:clamp(44px,4.6vw,60px)}
html[data-design="i"] .scard .btn-block{width:auto;min-width:220px}
html[data-design="i"] .addons{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
html[data-design="i"] .addon-card{background:transparent;border:0;border-radius:0;padding:26px clamp(18px,2.4vw,32px)}
html[data-design="i"] .addon-card+.addon-card{border-left:1px solid var(--line)}
html[data-design="i"] .statement{padding:clamp(40px,6vw,80px) 0}
html[data-design="i"] .statement .wrap{border-block:1px solid var(--line);padding:clamp(26px,4vw,48px) 0;text-align:center}
html[data-design="i"] .statement-line{font-size:clamp(24px,3.2vw,42px);max-width:30ch;margin-inline:auto}
html[data-design="i"] .tilts{display:block;border:0;border-radius:0;background:transparent}
html[data-design="i"] .tilt{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 24px;align-items:start;border-top:1px solid var(--line);padding:24px 0}
html[data-design="i"] .tilt:last-child{border-bottom:1px solid var(--line)}
html[data-design="i"] .tilt+.tilt{border-left:0}
html[data-design="i"] .tnum{font-size:40px;grid-row:1/3}
html[data-design="i"] .tilt h3{grid-column:2}
html[data-design="i"] .tilt p{grid-column:2;max-width:64ch}
html[data-design="i"] .gal3-track figure{padding:8px;border-radius:0}
html[data-design="i"] .gal3-track img{border-radius:0}
html[data-design="i"] .story3-grid figure{border:1px solid var(--line);padding:8px;background:var(--card)}
html[data-design="i"] .story3-grid img{border-radius:0}
html[data-design="i"] .rev3-card{border:0;outline:0;border-block:1px solid var(--line);background:transparent}
html[data-design="i"] .order3{background:var(--paper);color:var(--ink);border-top:1px solid var(--line)}
html[data-design="i"] .order3 h2{color:var(--ink)}
html[data-design="i"] .order3-sub,html[data-design="i"] .form-note,html[data-design="i"] .form-alt{color:var(--ink-2)}
html[data-design="i"] .order3 .kicker{color:var(--eggplant)}
html[data-design="i"] .orn.paper{color:var(--line)}
html[data-design="i"] .orn.paper>span{background-image:var(--star)}
html[data-design="i"] .order3 .btn-pumpkin{background:var(--eggplant);color:var(--card)}
html[data-design="i"] .order3 .btn-pumpkin:hover{background:var(--eggplant-deep)}
@media (max-width:860px){html[data-design="i"] .scard+.scard{border-left:0;border-top:1px solid var(--line)}
  html[data-design="i"] .addon-card+.addon-card{border-left:0;border-top:1px solid var(--line)}}

/* ── J · The Plates ──────────────────────────────────────────────────────── */
html[data-design="j"] body{background:var(--paper) url('/assets/v4/linen.jpg')}
html[data-design="j"] .mh.hero3,html[data-design="j"] .stage,html[data-design="j"] .how3,html[data-design="j"] .gal3,html[data-design="j"] .story3,
html[data-design="j"] .rev3,html[data-design="j"] .faq3,html[data-design="j"] .addons-sec,html[data-design="j"] .statement{background:transparent}
html[data-design="j"] .mh-h .mh-photo{margin:22px 22px 22px 0;border:1px solid var(--line);padding:10px;background:var(--card);box-shadow:var(--sh-2)}
html[data-design="j"] .mh-h .mh-photo img{position:static;width:100%;height:100%}
html[data-design="j"] .mh-h .mh-photo::after{display:none}
html[data-design="j"] .stage-head,html[data-design="j"] .gal3-head,html[data-design="j"] .h3head,html[data-design="j"] .faq3 .wrap>.kicker,html[data-design="j"] .faq3 h2{text-align:center;margin-inline:auto}
html[data-design="j"] .faq3 .orn,html[data-design="j"] .how3 .orn{margin-inline:auto}
html[data-design="j"] .stage-policy{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);max-width:70ch;margin-inline:auto;text-align:left}
html[data-design="j"] .stage-tax,html[data-design="j"] .stage-varieties{text-align:center;max-width:70ch;margin-inline:auto}
html[data-design="j"] .scard{background:transparent;border:0;border-radius:0;box-shadow:none;text-align:center;overflow:visible}
html[data-design="j"] .scard.feat{border:3px double rgba(91,47,80,.55);outline:1px solid rgba(91,47,80,.18);outline-offset:5px;background:rgba(251,248,242,.6);padding:14px}
html[data-design="j"] .scard-shot{aspect-ratio:auto;border:1px solid var(--line);padding:9px;background:var(--card);box-shadow:var(--sh-2);transform:rotate(-1.2deg)}
html[data-design="j"] .scard.feat .scard-shot{transform:rotate(1deg)}
html[data-design="j"] .scard:nth-child(3) .scard-shot{transform:rotate(1.4deg)}
html[data-design="j"] .scard-shot img{aspect-ratio:2/1;transition:none}
html[data-design="j"] .scard:hover .scard-shot img{transform:none}
html[data-design="j"] .scard-body{padding:26px 8px 8px}
html[data-design="j"] .pop{top:-14px;right:auto;left:50%;transform:translateX(-50%)}
html[data-design="j"] .ticks{text-align:left;display:inline-block;max-width:30ch}
html[data-design="j"] .scard .btn-block{width:auto;min-width:220px}
html[data-design="j"] .addon-card{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);text-align:center}
html[data-design="j"] .statement{position:relative;padding:clamp(56px,9vw,140px) 0;text-align:center;overflow:hidden}
html[data-design="j"] .statement::before{content:"";position:absolute;left:50%;top:50%;width:min(720px,90vw);aspect-ratio:4/3;transform:translate(-50%,-50%);
  background:url('/assets/v4/engraving-eggplant-2x.png') center/contain no-repeat;opacity:.07;pointer-events:none}
html[data-design="j"] .statement-line{position:relative;max-width:26ch;margin-inline:auto;font-size:clamp(28px,4.4vw,60px)}
html[data-design="j"] .tilts{border:0;background:transparent;gap:clamp(20px,3vw,40px);overflow:visible}
html[data-design="j"] .tilt{text-align:center;padding:0}
html[data-design="j"] .tilt+.tilt{border-left:0}
html[data-design="j"] .tnum{font-size:56px;display:block;margin-bottom:6px}
html[data-design="j"] .tilt p{max-width:34ch;margin-inline:auto}
html[data-design="j"] .gal3-track figure{padding:9px;border-radius:0;box-shadow:var(--sh-2);transform:rotate(-1deg)}
html[data-design="j"] .gal3-track figure:nth-child(even){transform:rotate(1.1deg)}
html[data-design="j"] .gal3-track img{border-radius:0}
html[data-design="j"] .story3-grid figure{border:1px solid var(--line);padding:10px;background:var(--card);box-shadow:var(--sh-2);transform:rotate(-1.5deg)}
html[data-design="j"] .story3-grid img{border-radius:0}
html[data-design="j"] .rev3-card{background:rgba(251,248,242,.7)}
html[data-design="j"] .faq-item{text-align:left}
html[data-design="j"] .order3{background:var(--eggplant)}
html[data-design="j"] .mf-hills{margin-top:clamp(20px,4vw,48px)}

/* ── K · The Almanac ─────────────────────────────────────────────────────── */
html[data-design="k"] h2{font-size:clamp(36px,5.2vw,68px)}
html[data-design="k"] .mh-h .mh-text{padding-left:var(--gut)}
html[data-design="k"] .mh-year{font-size:clamp(84px,11vw,184px)}
html[data-design="k"] .mh-h .mh-photo{margin:0}
html[data-design="k"] .mh-h .mh-photo::after{display:none}
html[data-design="k"] .stage-head,html[data-design="k"] .gal3-head,html[data-design="k"] .h3head,html[data-design="k"] .faq3 .wrap>.kicker,html[data-design="k"] .faq3 h2,
html[data-design="k"] .how3 .h3head{text-align:center;margin-inline:auto}
html[data-design="k"] .kicker{color:var(--ember)}
html[data-design="k"] .stage-head h2,html[data-design="k"] .gal3-head h2,html[data-design="k"] .how3 h2,html[data-design="k"] .faq3 h2,html[data-design="k"] .rev3 h2{
  border-block:1px solid var(--line);padding:18px 0;display:inline-block;margin-inline:auto}
html[data-design="k"] .orn{display:none}
html[data-design="k"] .story3-text h2{border:0;padding:0;display:block}
html[data-design="k"] .story3 .orn,html[data-design="k"] .order3 .orn{display:flex}
html[data-design="k"] .stage-scarce{text-align:center;font-size:19px}
html[data-design="k"] .stage-policy{background:var(--card);border:1px solid var(--line);max-width:70ch;margin-inline:auto;text-align:left}
html[data-design="k"] .stage-tax,html[data-design="k"] .stage-varieties{text-align:center;max-width:70ch;margin-inline:auto}
html[data-design="k"] .scard{border:1px solid var(--line);background:var(--card);box-shadow:none;border-radius:0}
html[data-design="k"] .scard.feat{background:var(--eggplant);border-color:var(--eggplant);color:var(--paper);box-shadow:var(--sh-3)}
html[data-design="k"] .scard.feat h3,html[data-design="k"] .scard.feat .price,html[data-design="k"] .scard.feat .count b{color:var(--paper)}
html[data-design="k"] .scard.feat .scard-tag,html[data-design="k"] .scard.feat .count,html[data-design="k"] .scard.feat .ticks li,html[data-design="k"] .scard.feat .intro{color:rgba(244,238,226,.82)}
html[data-design="k"] .scard.feat .price span{color:rgba(244,238,226,.7)}
html[data-design="k"] .scard.feat .ticks,html[data-design="k"] .scard.feat .ticks li{border-color:rgba(244,238,226,.28)}
html[data-design="k"] .scard.feat .ticks li::before{background:rgba(244,238,226,.75)}
html[data-design="k"] .scard.feat .btn-pumpkin{background:var(--paper);color:var(--eggplant)}
html[data-design="k"] .scard.feat .btn-pumpkin:hover{background:#fff}
html[data-design="k"] .pop{background:var(--ember);color:var(--card)}
html[data-design="k"] .price{font-size:clamp(48px,5vw,66px)}
html[data-design="k"] .addon-card{border-radius:0}
html[data-design="k"] .statement{background:var(--eggplant);color:var(--paper);padding:clamp(56px,8vw,120px) 0;text-align:center}
html[data-design="k"] .statement::before{content:"";display:block;width:26px;height:26px;margin:0 auto 22px;background:var(--star-paper) center/contain no-repeat}
html[data-design="k"] .statement-line{color:var(--paper);max-width:24ch;margin-inline:auto;font-size:clamp(30px,4.8vw,66px)}
html[data-design="k"] .tilts{border:0;background:transparent;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0}
html[data-design="k"] .tilt{padding:clamp(26px,3vw,44px) clamp(18px,2.6vw,36px);text-align:center}
html[data-design="k"] .tnum{font-size:clamp(56px,6vw,84px);display:block;margin-bottom:8px;color:var(--ember)}
html[data-design="k"] .tilt h3{font-size:26px}
html[data-design="k"] .tilt p{max-width:34ch;margin-inline:auto}
html[data-design="k"] .gal3-track{gap:6px;width:100%}
html[data-design="k"] .gal3-track figure{border:0;padding:0;border-radius:0;box-shadow:none;background:transparent}
html[data-design="k"] .gal3-track img{border-radius:0}
html[data-design="k"] .story3-pull{color:var(--ember)}
html[data-design="k"] .story3-grid figure{border:0}
html[data-design="k"] .story3-grid img{border-radius:0}
html[data-design="k"] .rev3-card{border:1px solid var(--line);outline:0;background:var(--card);padding:clamp(28px,4vw,56px)}
html[data-design="k"] .faq-item h3{font-size:24px}
html[data-design="k"] .order3{background:var(--paper);color:var(--ink);border-top:1px solid var(--line)}
html[data-design="k"] .order3 h2{color:var(--ink)}
html[data-design="k"] .order3-sub,html[data-design="k"] .form-note,html[data-design="k"] .form-alt{color:var(--ink-2)}
html[data-design="k"] .order3 .kicker{color:var(--ember)}
html[data-design="k"] .orn.paper{color:var(--line)}
html[data-design="k"] .orn.paper>span{background-image:var(--star)}
html[data-design="k"] .form-card{border:1px solid var(--eggplant);border-radius:0}
html[data-design="k"] .order3 .btn-pumpkin{background:var(--ember);color:var(--card)}
html[data-design="k"] .order3 .btn-pumpkin:hover{background:#A83A0A}
html[data-design="k"] .btn{border-radius:0}
html[data-design="k"] .mf-links i{background:var(--ember)}

/* fixes after the first look */
html[data-design="k"] .faq3 .wrap,html[data-design="j"] .faq3 .wrap{text-align:center}
html[data-design="k"] .faq-grid,html[data-design="j"] .faq-grid{text-align:left}
html[data-design="k"] .faq3 .wrap>.kicker{margin-inline:auto}
html[data-design] .lightwash{display:none}
/* The old theme's film grain: a fixed, full-screen layer the browser re-blends over the whole
   page on every scroll frame, for a 4% noise the linen already supplies. Off (2026-10-12). */
html[data-design] .grain{display:none}
html[data-design] #pglow{display:none}
html[data-design] .mh-h .mh-text,html[data-design="i"] .mh-h .mh-text,html[data-design="k"] .mh-h .mh-text{justify-self:start;width:100%;max-width:none;
  padding-left:max(var(--gut),calc((100vw - var(--maxw)) / 2));padding-right:clamp(28px,4vw,64px)}
@media (min-width:1400px){
  html[data-design] .mh-h.hero3{max-width:calc(var(--maxw) + var(--gut) * 2);margin-inline:auto}
  html[data-design] .mh-h .mh-text,html[data-design="i"] .mh-h .mh-text,html[data-design="k"] .mh-h .mh-text{padding-left:var(--gut)}
  html[data-design] .mh-h .mh-photo{margin-right:var(--gut)}
  html[data-design="j"] .mh-h .mh-photo{margin:22px var(--gut) 22px 0}
}

/* ── J, the owner's edits (2026-10-06) ───────────────────────────────────── */
/* the gallery: every photograph on the page as a plate, no pinned pan */
html[data-design="j"].js .gal3,html[data-design="j"] .gal3{height:auto;padding:clamp(56px,8vw,96px) 0;border-block:0}
html[data-design="j"].js .gal3-sticky,html[data-design="j"] .gal3-sticky{position:static;height:auto;display:block;overflow:visible;background:transparent;border:0;padding:0}
html[data-design="j"].js .gal3-track,html[data-design="j"] .gal3-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
  gap:clamp(22px,3vw,40px);width:min(100% - (var(--gut) * 2),var(--maxw));margin-inline:auto;padding:0;transform:none !important;will-change:auto}
html[data-design="j"].js .gal3-track figure,html[data-design="j"] .gal3-track figure{width:auto;height:auto;aspect-ratio:4/3;flex:none;margin:0}
html[data-design="j"] .gal3-track figure{transform:rotate(-1deg)}
html[data-design="j"] .gal3-track figure:nth-child(3n){transform:rotate(1.2deg)}
html[data-design="j"] .gal3-track figure:nth-child(3n+2){transform:rotate(.6deg)}
html[data-design="j"] .gal3-track img{transform:none !important}
/* less air between the varieties line and the two add-on cards */
html[data-design="j"] .stage-sticky{padding-bottom:22px}
html[data-design="j"] .addons-sec{padding-top:10px}
/* no watercolour at the foot */
html[data-design="j"] .mf-hills{display:none}
html[data-design="j"] .mf-body{border-top:1px solid var(--line);margin-top:clamp(28px,5vw,64px)}

/* ── J, the owner's edits, round 2 (2026-10-06) ──────────────────────────── */
/* the footer flows out of the enquiry band: no rule, no gap, the engraving small above the star */
html[data-design="j"] .mf-body{border-top:0;margin-top:0;padding-top:clamp(36px,5vw,56px)}
html[data-design="j"] .mf-body::before{content:"";display:block;width:130px;height:98px;margin-bottom:4px;
  background:url('/assets/v4/engraving-eggplant.png') center/contain no-repeat}
html[data-design="j"] .mf-links{font-size:17.5px}
html[data-design="j"] .mf-copy{margin-top:10px}
/* the name line: "A Pumpkin Story" · hairline–star–hairline · the family link (2026-10-09) */
html[data-design="j"] .mf-name{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 16px}
html[data-design="j"] .mf-name a{color:var(--eggplant);text-decoration:none}
html[data-design="j"] .mf-name a:hover{text-decoration:underline;text-underline-offset:3px}
html[data-design="j"] .mf-div{display:inline-flex;justify-content:space-between;align-items:center;width:88px;height:16px;
  background:var(--star) center/16px 16px no-repeat}
html[data-design="j"] .mf-div::before,html[data-design="j"] .mf-div::after{content:"";width:28px;height:1px;background:var(--line-2)}
@media (max-width:560px){
  html[data-design="j"] .mf-name{flex-direction:column;gap:6px}
  html[data-design="j"] .mf-div{margin:2px 0}
}
/* a little air back above the two add-on cards */
html[data-design="j"] .stage-sticky{padding-bottom:30px}
html[data-design="j"] .addons-sec{padding-top:30px}
/* the hero fits the first screen: everything sized to the viewport's height, not the width */
html[data-design="j"] .mh-h.hero3{min-height:0}
html[data-design="j"] .mh-h .mh-text{padding-top:clamp(18px,3vh,36px);padding-bottom:clamp(18px,3vh,36px)}
html[data-design="j"] .mh-mark{width:clamp(84px,12vh,130px);margin-bottom:6px}
html[data-design="j"] .mh-tag{margin-bottom:10px;font-size:16px;padding:5px 14px}
html[data-design="j"] .mh-year{font-size:clamp(60px,min(9.5vw,17vh),150px)}
html[data-design="j"] .mh-open{font-size:clamp(22px,min(2.8vw,4.6vh),38px);margin-top:6px}
html[data-design="j"] .mh h1.mh-lead{margin-top:14px;font-size:clamp(18px,min(1.6vw,2.6vh),22px);line-height:1.45;max-width:52ch}
html[data-design="j"] .mh-cta{margin-top:20px}
html[data-design="j"] .mh-cta .btn-lg{padding:14px 26px;min-height:50px}
html[data-design="j"] .mh-status{margin-top:16px}
html[data-design="j"] .mh-h .mh-photo{margin:16px 16px 16px 0}
@media (min-width:1400px){html[data-design="j"] .mh-h .mh-photo{margin:16px var(--gut) 16px 0}}
/* the gallery lightbox */
html[data-design="j"] .gal3-track figure{cursor:zoom-in;transition:transform .35s ease,box-shadow .35s ease}
html[data-design="j"] .gal3-track figure:hover,html[data-design="j"] .gal3-track figure:focus-visible{transform:rotate(0) scale(1.03);box-shadow:var(--sh-3);z-index:2}
.lightbox{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(43,37,32,.76);cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox-plate{margin:0;background:var(--card);border:1px solid var(--line);padding:12px 12px 10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  max-width:min(1100px,94vw);max-height:92vh;display:flex;flex-direction:column;gap:8px}
.lightbox-plate img{display:block;max-width:100%;max-height:calc(92vh - 70px);width:auto;height:auto;object-fit:contain}
.lightbox-plate figcaption{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-2);text-align:center;padding:0 8px}
.lightbox-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border:1px solid rgba(244,238,226,.5);border-radius:999px;
  background:rgba(43,37,32,.5);color:var(--paper);font-size:28px;line-height:1;cursor:pointer;font-family:var(--serif)}
.lightbox-close:hover{background:var(--eggplant)}
html.lightbox-open{overflow:hidden}
/* short laptop screens: the opening must end above the fold */
html[data-design="j"] .mh-year{font-size:clamp(56px,min(9.5vw,15.5vh),150px)}
@media (max-height:840px){
  html[data-design="j"] .mh-mark{display:none}
  html[data-design="j"] .mh-h .mh-text{padding-top:2vh;padding-bottom:2vh}
  html[data-design="j"] .mh-tag{margin-bottom:8px}
  html[data-design="j"] .mh h1.mh-lead{margin-top:10px;max-width:46ch}
  html[data-design="j"] .mh-cta{margin-top:14px}
  html[data-design="j"] .mh-status{margin-top:12px}
}
@media (max-height:700px){html[data-design="j"] .mh-year{font-size:clamp(52px,min(9.5vw,13.5vh),150px)}html[data-design="j"] .mh-h .mh-text{padding-top:1vh;padding-bottom:1vh}}