/* ===================================================================== PLOTNUA · PREMIUM DISCOVERY SYSTEM · v1 (Stage 2c) --------------------------------------------------------------------- First page: discovery-a-home-for-art.html. Founder approval of the direction and of the seven components as a FLEXIBLE TOOLKIT (no Discovery is required to use every component): 23 Oct 2026. Anthracite closing panel and the raised surface #2E3033 approved the same day. Every rule is scoped to body.pn-id.pn-pd, so the file is inert anywhere else. Loaded after pn-identity.css and pn-identity-discovery.css; uses their --p4 tokens and never redefines them. Seven components (spec: claude/premium-discovery-a-home-for-art-final-2026-10-23): 1 .pd-media large editorial image card 2 .pd-card floating information card (+ --raised, --quiet, --note) 3 .pd-grid asymmetric 12-column grid (.pd-s-* spans) 4 .pd-detail expandable detail card (native
) 5 .pd-feature image-and-text feature panel (text card overlaps image) 6 .pd-fact practical information card 7 .pd-close concluding action panel (.pd-choice cards inside) Supporting: .pd-statement, .pd-head, .pd-num, .pd-kicker, .pd-ladder, .pd-trio, .pd-qual, .pd-bridge, .pd-nav (restyles the in-page nav). Motion: one hover lift (3px) on interactive cards only, fine pointers only, none under prefers-reduced-motion. No other animation is added. ===================================================================== */ body.pn-id.pn-pd{ --pd-canvas:var(--p4-anth); /* #1B1C1E page canvas */ --pd-band:var(--p4-earth); /* #27282A alternate band */ --pd-card:var(--p4-deep); /* #2C2E30 card surface */ --pd-raised:#2E3033; /* one step up: a card inside a card (AA for bronze kickers); approved 23 Oct 2026 */ --pd-r:24px; --pd-r-sm:16px; --pd-r-img:18px; --pd-pad:clamp(26px,3.2vw,48px); --pd-gap:clamp(14px,1.8vw,24px); --pd-max:1240px; --pd-edge:1px solid rgba(194,189,181,.06); --pd-shadow:0 1px 2px rgba(0,0,0,.18),0 30px 60px -34px rgba(0,0,0,.7); --pd-shadow-hi:0 1px 2px rgba(0,0,0,.2),0 40px 80px -36px rgba(0,0,0,.8); background:var(--pd-canvas); } /* ---- canvas, rhythm ------------------------------------------------------ */ body.pn-id.pn-pd main#pn-main{ background:var(--pd-canvas); padding:0 0 clamp(40px,6vw,96px); } body.pn-id.pn-pd .pd-wrap{ max-width:var(--pd-max); margin:0 auto; padding:0 clamp(16px,3vw,40px); box-sizing:border-box; } body.pn-id.pn-pd .pd-section{ padding:clamp(56px,8vw,128px) 0 0; scroll-margin-top:96px; } body.pn-id.pn-pd .pd-band{ background:var(--pd-band); margin-top:clamp(56px,8vw,128px); padding:clamp(56px,7vw,112px) 0; } body.pn-id.pn-pd .pd-band > .pd-section{ padding-top:0; } body.pn-id.pn-pd .pd-band .pd-card{ background:#2E3033; } body.pn-id.pn-pd .pd-stack > * + *{ margin-top:var(--pd-gap); } body.pn-id.pn-pd .pd-gapL{ margin-top:clamp(40px,5vw,80px); } /* ---- type ---------------------------------------------------------------- */ body.pn-id.pn-pd :is(.pd-h2,.pd-h3,.pd-statement p,.pd-num,.pd-big,.pd-q){ font-family:var(--p4-serif); font-weight:400; color:var(--p4-ivory); letter-spacing:-.015em; margin:0; } body.pn-id.pn-pd .pd-h2{ font-size:clamp(36px,4.4vw,64px); line-height:1.02; text-wrap:balance; } body.pn-id.pn-pd .pd-h2.is-xl{ font-size:clamp(40px,5.4vw,80px); line-height:.98; } body.pn-id.pn-pd .pd-h3{ font-size:clamp(25px,2.2vw,32px); line-height:1.12; text-wrap:balance; } body.pn-id.pn-pd .pd-h4{ font-family:var(--p4-sans); font-weight:600; font-size:18px; line-height:1.35; color:var(--p4-ivory); margin:0; } body.pn-id.pn-pd .pd-kicker{ display:block; font-family:var(--p4-sans); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--p4-bronze-text); margin:0 0 18px; } body.pn-id.pn-pd :where(.pd-card,.pd-section,.pd-detail,.pd-close) p{ font-family:var(--p4-sans); font-size:17px; line-height:1.65; color:var(--p4-lime); margin:0; } body.pn-id.pn-pd :where(.pd-card,.pd-section,.pd-detail,.pd-close) p + p{ margin-top:14px; } body.pn-id.pn-pd .pd-lede{ font-size:clamp(19px,1.45vw,22px) !important; line-height:1.55 !important; color:var(--p4-ivory) !important; } body.pn-id.pn-pd .pd-small{ font-size:15px !important; line-height:1.6 !important; color:var(--p4-stone) !important; } body.pn-id.pn-pd :where(.pd-card,.pd-section,.pd-detail,.pd-close) strong{ color:var(--p4-ivory); font-weight:600; } body.pn-id.pn-pd .pd-num{ display:block; font-size:clamp(72px,9vw,140px); line-height:.8; color:var(--p4-terra-text); margin:0 0 22px; font-variant-numeric:lining-nums; } body.pn-id.pn-pd .pd-big{ display:block; font-size:clamp(56px,6vw,92px); line-height:1.02; margin:2px 0 14px; } body.pn-id.pn-pd .pd-head{ max-width:780px; margin:0 0 clamp(28px,3.5vw,48px); } body.pn-id.pn-pd .pd-head .pd-h2 + p{ margin-top:18px; } body.pn-id.pn-pd .pd-section a:not(.pd-btn):not(.pd-choice a){ color:var(--p4-terra-text); text-decoration:none; border-bottom:1px solid rgba(207,133,102,.55); } body.pn-id.pn-pd .pd-section a:not(.pd-btn):hover{ color:var(--p4-ivory); border-bottom-color:var(--p4-ivory); } body.pn-id.pn-pd :is(a,summary,button):focus-visible{ outline:2px solid var(--p4-terra-text); outline-offset:3px; border-radius:6px; } body.pn-id.pn-pd ul.pd-list{ list-style:none; margin:0; padding:0; } body.pn-id.pn-pd ul.pd-list > li{ font-family:var(--p4-sans); font-size:17px; line-height:1.6; color:var(--p4-lime); padding:16px 0; border-top:1px solid var(--p4-line); } body.pn-id.pn-pd ul.pd-list > li:first-child{ border-top:0; padding-top:0; } body.pn-id.pn-pd ul.pd-list > li:last-child{ padding-bottom:0; } /* ---- possibility statement (replaces the spark line's treatment) --------- */ body.pn-id.pn-pd .spark.pd-statement{ background:var(--pd-canvas); padding:clamp(72px,10vw,160px) clamp(16px,3vw,40px) 0; margin:0; border:0; text-align:center; } body.pn-id.pn-pd .pd-statement p{ max-width:980px; margin:0 auto; font-size:clamp(34px,4.6vw,68px); line-height:1.06; font-style:italic; text-wrap:balance; } /* ---- 3 · asymmetric grid --------------------------------------------------- */ body.pn-id.pn-pd .pd-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--pd-gap); align-items:start; } body.pn-id.pn-pd .pd-grid.is-stretch{ align-items:stretch; } body.pn-id.pn-pd .pd-s-4{ grid-column:span 4; } body.pn-id.pn-pd .pd-s-5{ grid-column:span 5; } body.pn-id.pn-pd .pd-s-6{ grid-column:span 6; } body.pn-id.pn-pd .pd-s-7{ grid-column:span 7; } body.pn-id.pn-pd .pd-s-8{ grid-column:span 8; } body.pn-id.pn-pd .pd-s-12{ grid-column:1 / -1; } body.pn-id.pn-pd aside.pd-card{ margin:0 !important; } body.pn-id.pn-pd .pd-col{ display:flex; flex-direction:column; gap:var(--pd-gap); } body.pn-id.pn-pd .pd-card.is-flex{ display:flex; flex-direction:column; } body.pn-id.pn-pd .pd-card.is-flex > .pd-foot{ margin-top:auto !important; padding-top:24px; border-top:1px solid var(--p4-line); } body.pn-id.pn-pd .pd-sticky{ position:sticky; top:104px; } /* ---- 2 · floating information card ---------------------------------------- */ body.pn-id.pn-pd .pd-card{ background:var(--pd-card); border:var(--pd-edge); border-radius:var(--pd-r); padding:var(--pd-pad); box-shadow:var(--pd-shadow); box-sizing:border-box; min-width:0; } body.pn-id.pn-pd .pd-card--raised{ background:var(--pd-raised) !important; box-shadow:var(--pd-shadow-hi); } body.pn-id.pn-pd .pd-card--quiet{ background:transparent !important; box-shadow:none; border:1px solid var(--p4-line2); } body.pn-id.pn-pd .pd-card--note{ position:relative; } body.pn-id.pn-pd .pd-card--note::before{ content:""; position:absolute; left:var(--pd-pad); top:0; width:56px; height:3px; border-radius:0 0 3px 3px; background:var(--p4-terra); } body.pn-id.pn-pd .pd-card--space .pd-big{ color:var(--p4-ivory); } body.pn-id.pn-pd .pd-card--space.is-them .pd-big{ color:var(--p4-terra-text); } body.pn-id.pn-pd .pd-card .pd-h2 + p, body.pn-id.pn-pd .pd-card .pd-h3 + p{ margin-top:18px; } body.pn-id.pn-pd .pd-card .pd-h2{ font-size:clamp(34px,3.4vw,52px); } /* ---- 1 · large editorial image card --------------------------------------- */ body.pn-id.pn-pd .pd-media{ margin:0; position:relative; border-radius:var(--pd-r); overflow:hidden; background:var(--pd-card); box-shadow:var(--pd-shadow); min-width:0; } body.pn-id.pn-pd .pd-media img{ display:block; width:100%; height:auto; } body.pn-id.pn-pd .pd-media.is-fill{ height:100%; } body.pn-id.pn-pd .pd-media.is-fill img{ height:100%; object-fit:cover; } body.pn-id.pn-pd .pd-media figcaption{ padding:16px 22px 18px; font-family:var(--p4-serif); font-style:italic; font-size:clamp(18px,1.5vw,22px); line-height:1.3; color:var(--p4-ivory); background:var(--pd-card); } body.pn-id.pn-pd .pd-media figcaption p{ margin:0; font:inherit; color:inherit; } body.pn-id.pn-pd .pd-media.is-overlay figcaption{ position:absolute; left:0; right:0; bottom:0; padding:64px 28px 24px; background:linear-gradient(0deg,rgba(18,19,20,.78),rgba(18,19,20,0)); } /* ---- 5 · image-and-text feature panel --------------------------------------- */ body.pn-id.pn-pd .pd-feature{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:center; } body.pn-id.pn-pd .pd-feature > .pd-media{ grid-column:1 / span 8; grid-row:1; } body.pn-id.pn-pd .pd-feature > .pd-card{ grid-column:8 / -1; grid-row:1; position:relative; z-index:1; } body.pn-id.pn-pd .pd-feature.is-mirror > .pd-media{ grid-column:5 / -1; } body.pn-id.pn-pd .pd-feature.is-mirror > .pd-card{ grid-column:1 / span 5; } body.pn-id.pn-pd .pd-feature.is-wide > .pd-media{ grid-column:1 / span 9; } body.pn-id.pn-pd .pd-feature.is-wide > .pd-card{ grid-column:9 / -1; } /* ---- the four-rung ladder (hosting) -------------------------------------- */ body.pn-id.pn-pd .pd-ladder{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; } body.pn-id.pn-pd .pd-ladder li{ padding:0 clamp(16px,1.8vw,28px); border-left:1px solid var(--p4-line); display:flex; flex-direction:column; } body.pn-id.pn-pd .pd-ladder li:first-child{ border-left:0; padding-left:0; } body.pn-id.pn-pd .pd-ladder li:last-child{ padding-right:0; } body.pn-id.pn-pd .pd-rung{ display:flex; align-items:flex-end; gap:4px; height:30px; margin:0 0 20px; } body.pn-id.pn-pd .pd-rung i{ display:block; width:8px; border-radius:2px; background:var(--p4-line2); } body.pn-id.pn-pd .pd-rung i:nth-child(1){ height:9px; } body.pn-id.pn-pd .pd-rung i:nth-child(2){ height:16px; } body.pn-id.pn-pd .pd-rung i:nth-child(3){ height:23px; } body.pn-id.pn-pd .pd-rung i:nth-child(4){ height:30px; } body.pn-id.pn-pd .pd-rung i.on{ background:var(--p4-terra-text); } body.pn-id.pn-pd .pd-ladder .pd-label{ font-family:var(--p4-serif) !important; font-size:clamp(30px,2.6vw,40px) !important; line-height:1 !important; color:var(--p4-ivory) !important; margin:0 0 12px !important; } body.pn-id.pn-pd .pd-ladder .pd-h4{ margin:0 0 10px !important; font-size:17px !important; color:var(--p4-ivory) !important; } body.pn-id.pn-pd .pd-ladder p + p{ margin-top:0; } body.pn-id.pn-pd .pd-ladder p:not(.pd-label):not(.pd-h4){ font-size:15px !important; color:var(--p4-stone) !important; } body.pn-id.pn-pd .pd-scale{ display:flex; justify-content:space-between; gap:12px; margin:28px 0 0; padding-top:14px; border-top:1px solid var(--p4-line); font-family:var(--p4-sans); font-size:13px; letter-spacing:.06em; color:var(--p4-stone); } /* ---- three columns inside one card (Live with art) ----------------------- */ body.pn-id.pn-pd .pd-trio{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.4vw,40px); } body.pn-id.pn-pd .pd-trio.pd-gapL{ margin-top:clamp(36px,4vw,56px); } body.pn-id.pn-pd .pd-trio li{ border-top:1px solid var(--p4-line2); padding-top:20px; } body.pn-id.pn-pd .pd-trio .pd-h4{ margin:8px 0 10px; } body.pn-id.pn-pd .pd-trio p{ font-size:15px !important; color:var(--p4-stone) !important; } body.pn-id.pn-pd .pd-tag{ display:inline-block; font-family:var(--p4-sans); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--p4-terra-text); } /* ---- qualification: never decorative, always on view ---------------------- */ body.pn-id.pn-pd .pd-qual{ border:1px solid var(--p4-line2); border-radius:var(--pd-r-sm); padding:clamp(22px,2.4vw,32px); background:rgba(242,235,224,.025); } body.pn-id.pn-pd .pd-qual p{ font-size:16px !important; } body.pn-id.pn-pd .pd-qual .pd-strong{ color:var(--p4-ivory) !important; font-size:17px !important; } /* ---- the wall <-> the work bridge ----------------------------------------- */ body.pn-id.pn-pd .pd-bridge{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:stretch; margin-top:32px; } body.pn-id.pn-pd .pd-bridge > div{ border:1px solid var(--p4-line2); border-radius:var(--pd-r-sm); padding:20px 22px; } body.pn-id.pn-pd .pd-bridge .pd-arrow{ align-self:center; font-family:var(--p4-serif); font-size:30px; color:var(--p4-terra-text); } body.pn-id.pn-pd .pd-bridge .pd-q{ font-size:22px; line-height:1.2; margin-top:4px; } /* ---- route cards (Discover & own): a staggered 7/5 · 5/7 pattern ---------- */ body.pn-id.pn-pd .pd-route .pd-h3{ margin:0 0 14px; } body.pn-id.pn-pd .pd-route .pd-idx{ display:block; font-family:var(--p4-sans); font-weight:600; font-size:13px; letter-spacing:.12em; color:var(--p4-terra-text); margin:0 0 30px; } /* ---- 6 · practical information card ----------------------------------------- */ body.pn-id.pn-pd .pd-fact .pd-h3{ margin:0 0 14px; } body.pn-id.pn-pd .pd-fact.is-lead .pd-h3{ font-size:clamp(30px,3vw,44px); } body.pn-id.pn-pd .pd-fact .pd-kicker{ color:var(--p4-terra-text); } body.pn-id.pn-pd .pd-fact ul.pd-inv{ list-style:none; margin:26px 0 24px; padding:0; counter-reset:inv; } body.pn-id.pn-pd .pd-fact ul.pd-inv li{ counter-increment:inv; display:flex; align-items:baseline; gap:18px; padding:14px 0; border-top:1px solid var(--p4-line); font-family:var(--p4-serif); font-size:clamp(22px,2vw,28px); line-height:1.15; color:var(--p4-ivory); } body.pn-id.pn-pd .pd-fact ul.pd-inv li::before{ content:counter(inv,decimal-leading-zero); font-family:var(--p4-sans); font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--p4-terra-text); min-width:22px; } body.pn-id.pn-pd .pd-fact ul.pd-inv li:last-child{ border-bottom:1px solid var(--p4-line); } /* ---- 4 · expandable detail card ---------------------------------------------- */ body.pn-id.pn-pd details.pd-detail{ background:var(--pd-card); border:var(--pd-edge); border-radius:var(--pd-r-sm); box-shadow:var(--pd-shadow); transition:border-color .2s ease, transform .25s ease; min-width:0; } body.pn-id.pn-pd .pd-band details.pd-detail{ background:#2E3033; } body.pn-id.pn-pd details.pd-detail > summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; padding:24px clamp(20px,2.2vw,30px); min-height:44px; } body.pn-id.pn-pd details.pd-detail > summary::-webkit-details-marker{ display:none; } body.pn-id.pn-pd details.pd-detail > summary .pd-kicker{ margin:0 0 8px; } body.pn-id.pn-pd details.pd-detail > summary .pd-h4{ font-size:19px; } body.pn-id.pn-pd details.pd-detail > summary .pd-sumh{ margin:0; font:inherit; } body.pn-id.pn-pd .pd-plus{ position:relative; width:36px; height:36px; border-radius:50%; border:1px solid var(--p4-line2); flex:none; } body.pn-id.pn-pd .pd-plus::before, body.pn-id.pn-pd .pd-plus::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; margin:-.75px 0 0 -6px; background:var(--p4-terra-text); transition:transform .2s ease; } body.pn-id.pn-pd .pd-plus::after{ transform:rotate(90deg); } body.pn-id.pn-pd details.pd-detail[open] .pd-plus::after{ transform:rotate(0deg); } body.pn-id.pn-pd details.pd-detail[open]{ border-color:rgba(194,189,181,.14); } body.pn-id.pn-pd .pd-detail-body{ padding:0 clamp(20px,2.2vw,30px) 28px; } body.pn-id.pn-pd .pd-detail-body > * + *{ margin-top:14px; } body.pn-id.pn-pd .pd-detail-body p{ font-size:16px !important; } body.pn-id.pn-pd .pd-detail-body ul.pd-list > li{ font-size:16px; } body.pn-id.pn-pd .pd-detail-body .pd-mini{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } body.pn-id.pn-pd .pd-detail-body .pd-mini > div{ border-top:1px solid var(--p4-line2); padding-top:14px; } body.pn-id.pn-pd .pd-detail-body .pd-mini p{ font-size:15px !important; color:var(--p4-stone) !important; margin-top:6px; } body.pn-id.pn-pd dl.pd-terms{ margin:0; display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:0; } body.pn-id.pn-pd dl.pd-terms > dt, body.pn-id.pn-pd dl.pd-terms > dd{ margin:0; padding:14px 0; border-top:1px solid var(--p4-line); font-family:var(--p4-sans); font-size:16px; line-height:1.6; } body.pn-id.pn-pd dl.pd-terms > dt{ color:var(--p4-ivory); font-weight:600; padding-right:20px; } body.pn-id.pn-pd dl.pd-terms > dd{ color:var(--p4-lime); } body.pn-id.pn-pd dl.pd-terms > :is(dt,dd):nth-child(-n+2){ border-top:0; padding-top:0; } body.pn-id.pn-pd .pd-detail-group{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pd-gap); align-items:start; } body.pn-id.pn-pd .pd-detail-stack{ display:flex; flex-direction:column; gap:12px; } /* ---- buttons -------------------------------------------------------------- */ body.pn-id.pn-pd .pd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px; border-radius:999px; font-family:var(--p4-sans); font-weight:600; font-size:15px; letter-spacing:.02em; text-decoration:none; background:var(--p4-ivory); color:var(--p4-anth); border:1px solid var(--p4-ivory); transition:background .2s ease, color .2s ease; box-sizing:border-box; } body.pn-id.pn-pd .pd-btn:hover{ background:var(--p4-terra-hover); border-color:var(--p4-terra-hover); color:var(--p4-anth); } body.pn-id.pn-pd .pd-btn.is-ghost{ background:transparent; color:var(--p4-ivory); border-color:var(--p4-stone); } body.pn-id.pn-pd .pd-btn.is-ghost:hover{ background:var(--p4-ivory); color:var(--p4-anth); border-color:var(--p4-ivory); } body.pn-id.pn-pd .pd-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 0; } /* ---- 7 · concluding action panel + choice cards ------------------------- */ body.pn-id.pn-pd .pd-choice{ display:flex; flex-direction:column; background:var(--pd-raised); border:var(--pd-edge); border-radius:var(--pd-r-sm); padding:clamp(22px,2.4vw,32px); box-shadow:var(--pd-shadow-hi); transition:transform .25s ease, border-color .25s ease; min-width:0; } body.pn-id.pn-pd .pd-choice .pd-h3{ margin:0 0 12px; } body.pn-id.pn-pd .pd-choice p{ font-size:16px !important; } body.pn-id.pn-pd .pd-choice .pd-btn{ margin-top:auto; align-self:flex-start; } body.pn-id.pn-pd .pd-choice .pd-btn-row{ margin-top:auto; padding-top:24px; } body.pn-id.pn-pd .pd-checks{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pd-gap); } body.pn-id.pn-pd .pd-assess .pd-h2{ font-size:clamp(32px,3.2vw,48px); } body.pn-id.pn-pd section.pd-close{ background:var(--pd-canvas) !important; padding:0 clamp(16px,3vw,40px) clamp(56px,7vw,112px) !important; margin:0 !important; text-align:left !important; border:0 !important; } body.pn-id.pn-pd section.pd-close::before, body.pn-id.pn-pd section.pd-close::after{ display:none !important; } body.pn-id.pn-pd .pd-close-card{ max-width:var(--pd-max); margin:0 auto; box-sizing:border-box; background:var(--pd-card); border:var(--pd-edge); border-radius:calc(var(--pd-r) + 4px); padding:clamp(28px,5vw,72px); box-shadow:var(--pd-shadow-hi); position:relative; overflow:hidden; } body.pn-id.pn-pd .pd-close-card::before{ content:""; position:absolute; left:clamp(28px,5vw,72px); top:0; width:72px; height:3px; border-radius:0 0 3px 3px; background:var(--p4-terra); } body.pn-id.pn-pd .pd-close .pn-wordmark{ font-family:var(--p4-sans) !important; font-weight:700; font-size:12px !important; letter-spacing:.18em; text-transform:uppercase; color:var(--p4-bronze-text) !important; margin:0 0 18px !important; text-align:left !important; } body.pn-id.pn-pd .pd-close .pd-close-head{ display:grid; grid-template-columns:7fr 5fr; gap:var(--pd-gap); align-items:end; margin:0 0 clamp(28px,3.5vw,48px); } body.pn-id.pn-pd .pd-close .pd-close-head p{ color:var(--p4-stone); } body.pn-id.pn-pd .pd-exits{ display:flex; flex-wrap:wrap; gap:10px 28px; margin:clamp(28px,3.5vw,44px) 0 0; padding-top:24px; border-top:1px solid var(--p4-line); } body.pn-id.pn-pd .pd-exits a{ display:inline-flex; align-items:center; min-height:44px; font-family:var(--p4-sans); font-weight:600; font-size:15px; color:var(--p4-ivory); text-decoration:none; border-bottom:0; } body.pn-id.pn-pd .pd-exits a:hover{ color:var(--p4-terra-text); } body.pn-id.pn-pd .pd-exits a.is-home{ color:var(--p4-stone); font-weight:500; } /* ---- in-page navigation pill (markup, ids and script unchanged) ---------- */ body.pn-id.pn-pd .hfa-nav-wrap{ top:16px; margin:clamp(40px,5vw,72px) 0 0; padding:0 16px; } body.pn-id.pn-pd .hfa-nav{ background:rgba(44,46,48,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(194,189,181,.1); border-radius:999px; box-shadow:0 12px 30px -16px rgba(0,0,0,.7); } body.pn-id.pn-pd .hfa-nav a{ font-family:var(--p4-sans); font-weight:600; font-size:14px; color:var(--p4-lime); border-radius:999px; } body.pn-id.pn-pd .hfa-nav a:hover{ background:rgba(242,235,224,.06); color:var(--p4-ivory); } body.pn-id.pn-pd .hfa-nav a[aria-current]{ background:rgba(242,235,224,.1); color:var(--p4-ivory); box-shadow:inset 0 -2px 0 var(--p4-terra-text); } body.pn-id.pn-pd .hfa-nav a[aria-current] .hfa-nav-n{ color:var(--p4-ivory); } body.pn-id.pn-pd .hfa-nav-n{ font-family:var(--p4-serif); font-weight:400; font-size:16px; color:var(--p4-terra-text); } /* ---- the hero: one cinematic frame, copy anchored low -------------------- */ body.pn-id.pn-pd .d-hero-copy .intro{ opacity:.92; } /* ---- hover: interactive cards only, fine pointers only ------------------- */ @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ body.pn-id.pn-pd details.pd-detail:not([open]):hover{ transform:translateY(-3px); border-color:rgba(194,189,181,.14); } body.pn-id.pn-pd .pd-choice:hover{ transform:translateY(-3px); border-color:rgba(194,189,181,.16); } body.pn-id.pn-pd details.pd-detail > summary:hover .pd-h4{ color:var(--p4-terra-text); } } @media (prefers-reduced-motion:reduce){ body.pn-id.pn-pd :is(.pd-detail,.pd-choice,.pd-plus::before,.pd-plus::after,.pd-btn){ transition:none !important; } } /* ---- tablet ----------------------------------------------------------------- */ @media (max-width:1080px){ body.pn-id.pn-pd .pd-feature > .pd-media, body.pn-id.pn-pd .pd-feature.is-mirror > .pd-media, body.pn-id.pn-pd .pd-feature.is-wide > .pd-media{ grid-column:1 / -1; grid-row:1; } body.pn-id.pn-pd .pd-feature > .pd-card, body.pn-id.pn-pd .pd-feature.is-mirror > .pd-card, body.pn-id.pn-pd .pd-feature.is-wide > .pd-card{ grid-column:1 / -1; grid-row:2; margin-top:var(--pd-gap); } body.pn-id.pn-pd .pd-ladder{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:32px; } body.pn-id.pn-pd .pd-ladder li:nth-child(3){ border-left:0; padding-left:0; } body.pn-id.pn-pd .pd-ladder li:nth-child(2){ padding-right:0; } body.pn-id.pn-pd .pd-s-4, body.pn-id.pn-pd .pd-s-5, body.pn-id.pn-pd .pd-s-7, body.pn-id.pn-pd .pd-s-8{ grid-column:1 / -1; } body.pn-id.pn-pd .pd-s-6{ grid-column:span 6; } body.pn-id.pn-pd .pd-sticky{ position:static; } } /* ---- phone ------------------------------------------------------------------ */ @media (max-width:720px){ body.pn-id.pn-pd{ --pd-r:18px; --pd-r-sm:14px; --pd-pad:24px; --pd-gap:12px; } body.pn-id.pn-pd .pd-wrap{ padding:0 12px; } body.pn-id.pn-pd .pd-section{ padding-top:64px; scroll-margin-top:84px; } body.pn-id.pn-pd .pd-head{ padding:0 4px; } body.pn-id.pn-pd .pd-grid{ grid-template-columns:1fr; } body.pn-id.pn-pd .pd-grid > *{ grid-column:1 / -1 !important; } body.pn-id.pn-pd .pd-feature > .pd-card, body.pn-id.pn-pd .pd-feature.is-mirror > .pd-card, body.pn-id.pn-pd .pd-feature.is-wide > .pd-card{ grid-column:1 / -1; margin:var(--pd-gap) 0 0; } body.pn-id.pn-pd .pd-ladder{ grid-template-columns:1fr; row-gap:0; } body.pn-id.pn-pd .pd-ladder li{ border-left:0; padding:22px 0 !important; border-top:1px solid var(--p4-line); display:grid; grid-template-columns:auto 1fr; column-gap:18px; } body.pn-id.pn-pd .pd-ladder li:first-child{ border-top:0; padding-top:4px !important; } body.pn-id.pn-pd .pd-ladder li > .pd-rung{ grid-row:1 / span 3; margin:4px 0 0; } body.pn-id.pn-pd .pd-ladder .pd-label{ font-size:30px; margin-bottom:8px; } body.pn-id.pn-pd .pd-scale{ display:none; } body.pn-id.pn-pd .pd-trio{ grid-template-columns:1fr; gap:22px; } body.pn-id.pn-pd .pd-bridge{ grid-template-columns:1fr; } body.pn-id.pn-pd .pd-bridge .pd-arrow{ justify-self:center; transform:rotate(90deg); line-height:1; } body.pn-id.pn-pd .pd-detail-group, body.pn-id.pn-pd .pd-checks{ grid-template-columns:1fr; } body.pn-id.pn-pd .pd-detail-body .pd-mini{ grid-template-columns:1fr; } body.pn-id.pn-pd dl.pd-terms{ grid-template-columns:1fr; } body.pn-id.pn-pd dl.pd-terms > dd{ border-top:0; padding-top:2px; } body.pn-id.pn-pd dl.pd-terms > dt:not(:first-child){ padding-top:16px; } body.pn-id.pn-pd details.pd-detail > summary{ padding:20px; } body.pn-id.pn-pd .pd-detail-body{ padding:0 20px 24px; } body.pn-id.pn-pd .pd-close .pd-close-head{ grid-template-columns:1fr; } body.pn-id.pn-pd section.pd-close{ padding:0 12px 56px !important; } body.pn-id.pn-pd .pd-btn{ width:100%; } body.pn-id.pn-pd .pd-choice .pd-btn{ align-self:stretch; } body.pn-id.pn-pd .pd-media figcaption{ padding:14px 18px 16px; } body.pn-id.pn-pd .pd-media.is-overlay figcaption{ position:static; background:var(--pd-card); padding:14px 18px 16px; } body.pn-id.pn-pd .hfa-nav-wrap{ top:10px; padding:0 10px; } } /* ===================================================================== PREMIUM TOOLKIT · v2 · Batch 1 (founder approval 23 Oct 2026) --------------------------------------------------------------------- Built with Garden Room Prices Ireland; made to be reused by the garden-room family (Living in the Garden, Garden Retreat, TRIQ QUBE) and every later Premium page. Same tokens, same restraint as v1. .pr-hero guide hero: words only, faint architectural grid .pd-lift a card that rises over the hero's lower edge .pd-answer the short answer: question left, the figure answer right .pd-nav the in-page navigation pill (markup .hfa-nav-*, script assets/identity/pn-premium.js) .pd-pricecards a price table read as cards (rows become cards, the table stays a table for assistive technology) .pd-cols2 a statement card whose paragraphs run in two columns .pd-figs figure strip: large serif figures with their labels .pd-tiles a list read as a grid of short cards .pd-paper Warm Ivory reading surface (approved for checklists and longer reading), with .pd-checklist (numbered, printable) .pd-faqgrid question cards in two columns, answers always visible .pd-aside a quiet two-part aside .pd-wa the approved WhatsApp control as a secondary action ===================================================================== */ /* ---- reveal (same values as A Home for Art's) ------------------------- */ body.pn-id.pn-pd .reveal{ opacity:0; transform:translateY(6px); transition:opacity 1.1s ease, transform 1.1s ease; } body.pn-id.pn-pd .reveal.in{ opacity:1; transform:none; } /* ---- guide hero: words only ------------------------------------------- */ body.pn-id.pn-pd .pr-hero{ position:relative; overflow:hidden; text-align:left; background:linear-gradient(180deg,#1B1C1E 0%,#202123 100%); padding:clamp(56px,8vw,128px) max(clamp(16px,3vw,40px), calc((100% - var(--pd-max)) / 2 + clamp(16px,3vw,40px))) clamp(150px,15vw,230px); } body.pn-id.pn-pd .pr-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(194,189,181,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(194,189,181,.055) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:radial-gradient(120% 90% at 85% 0%,#000 0%,transparent 70%); mask-image:radial-gradient(120% 90% at 85% 0%,#000 0%,transparent 70%); } body.pn-id.pn-pd .pr-hero > *{ position:relative; } body.pn-id.pn-pd .pr-hero .pr-parent{ display:inline-flex; align-items:center; min-height:44px; padding:0 20px; margin:0 0 clamp(36px,4vw,56px); border:1px solid var(--p4-line2); border-radius:999px; font-family:var(--p4-sans); font-weight:600; font-size:14.5px; color:var(--p4-ivory); text-decoration:none; transition:background .2s ease, border-color .2s ease; } body.pn-id.pn-pd .pr-hero .pr-parent:hover{ background:rgba(242,235,224,.06); border-color:var(--p4-stone); } body.pn-id.pn-pd .pr-hero .eyebrow{ font-family:var(--p4-sans); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--p4-bronze-text); margin:0 0 22px; } body.pn-id.pn-pd .pr-hero h1{ font-family:var(--p4-serif); font-weight:400; font-size:clamp(52px,8vw,124px); line-height:.94; letter-spacing:-.02em; color:var(--p4-ivory); margin:0; max-width:15ch; text-wrap:balance; } body.pn-id.pn-pd .pr-hero p{ font-family:var(--p4-serif); font-style:italic; font-size:clamp(21px,2.1vw,30px); line-height:1.3; color:var(--p4-lime); max-width:30ch; margin:clamp(24px,2.6vw,36px) 0 0; } body.pn-id.pn-pd .pr-hero .pr-asof{ font-family:var(--p4-sans); font-style:normal; font-size:14px; line-height:1.6; letter-spacing:.01em; color:var(--p4-stone); max-width:62ch; margin-top:clamp(28px,3vw,44px); padding-top:18px; border-top:1px solid var(--p4-line); } /* ---- a card that rises over the hero ---------------------------------- */ body.pn-id.pn-pd .pd-lift{ padding-top:0 !important; margin-top:calc(-1 * clamp(96px,11vw,170px)); position:relative; z-index:2; } /* ---- the short answer -------------------------------------------------- */ body.pn-id.pn-pd .pd-answer{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(28px,4vw,72px); align-items:start; } body.pn-id.pn-pd .pd-answer .pd-h2{ font-size:clamp(34px,3.4vw,52px); } body.pn-id.pn-pd .pd-answer .pr-answer{ font-family:var(--p4-serif) !important; font-size:clamp(28px,2.7vw,42px) !important; line-height:1.18 !important; color:var(--p4-ivory) !important; letter-spacing:-.01em; } body.pn-id.pn-pd .pd-answer .pr-answer strong{ font-weight:400; color:var(--p4-ivory); } body.pn-id.pn-pd .pd-answer .pr-answer strong + strong{ color:var(--p4-terra-text); } body.pn-id.pn-pd .pd-answer .pr-answer-note{ margin-top:20px; } body.pn-id.pn-pd .pd-answer .pr-specialised{ margin-top:20px; padding:16px 20px; border:1px solid var(--p4-line2); border-radius:var(--pd-r-sm); font-size:15.5px !important; color:var(--p4-stone) !important; background:rgba(242,235,224,.025); } /* ---- the in-page navigation pill (generic; header offsets come from pn-header.css) */ body.pn-id.pn-pd .hfa-nav-wrap.pd-nav{ position:sticky; z-index:45; display:flex; justify-content:center; pointer-events:none; margin:clamp(40px,5vw,72px) 0 0; padding:0 16px; } body.pn-id.pn-pd .pd-nav .hfa-nav{ pointer-events:auto; max-width:100%; overflow:hidden; } body.pn-id.pn-pd .pd-nav .hfa-nav-list{ list-style:none; margin:0; padding:0 5px; display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } body.pn-id.pn-pd .pd-nav .hfa-nav-list::-webkit-scrollbar{ display:none; } body.pn-id.pn-pd .pd-nav .hfa-nav-list li{ flex:0 0 auto; display:flex; } body.pn-id.pn-pd .pd-nav .hfa-nav a{ display:flex; align-items:center; min-height:44px; padding:0 16px; white-space:nowrap; text-decoration:none; transition:background .2s ease, box-shadow .2s ease; } body.pn-id.pn-pd .pd-nav .hfa-nav a:focus-visible{ outline-offset:-4px; } /* ---- a price table read as cards ------------------------------------------- */ body.pn-id.pn-pd .pd-pricecards .pr-table{ width:100%; border-collapse:separate; border-spacing:0 var(--pd-gap); margin:calc(-1 * var(--pd-gap)) 0 0; } body.pn-id.pn-pd .pd-pricecards caption{ caption-side:bottom; text-align:left; padding-top:6px; font-family:var(--p4-sans); font-size:14px; line-height:1.55; color:var(--p4-stone); } body.pn-id.pn-pd .pd-pricecards thead th{ font-family:var(--p4-sans); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--p4-bronze-text); text-align:left; padding:0 clamp(16px,2vw,28px) 4px; } body.pn-id.pn-pd .pd-pricecards tbody :is(th,td){ background:var(--pd-card); padding:clamp(22px,2.4vw,34px) clamp(16px,2vw,28px); vertical-align:middle; text-align:left; border-top:1px solid rgba(194,189,181,.06); border-bottom:1px solid rgba(194,189,181,.06); font-family:var(--p4-sans); font-size:16px; line-height:1.45; color:var(--p4-lime); font-weight:400; } body.pn-id.pn-pd .pd-pricecards tbody th{ border-left:1px solid rgba(194,189,181,.06); border-radius:var(--pd-r-sm) 0 0 var(--pd-r-sm); width:38%; } body.pn-id.pn-pd .pd-pricecards tbody td:last-child{ border-right:1px solid rgba(194,189,181,.06); border-radius:0 var(--pd-r-sm) var(--pd-r-sm) 0; } body.pn-id.pn-pd .pd-pricecards tbody tr:first-child :is(th,td){ background:var(--pd-raised); } body.pn-id.pn-pd .pd-pricecards .pr-basis{ display:block; font-weight:600; font-size:18px; color:var(--p4-ivory); } body.pn-id.pn-pd .pd-pricecards .pr-basis-note{ display:block; margin-top:6px; font-size:15px; color:var(--p4-stone); } body.pn-id.pn-pd .pd-pricecards .pr-range{ font-family:var(--p4-serif) !important; font-size:clamp(26px,2.5vw,38px) !important; line-height:1.05 !important; color:var(--p4-ivory) !important; white-space:nowrap; letter-spacing:-.01em; } body.pn-id.pn-pd .pd-pricecards tbody tr:first-child .pr-range{ color:var(--p4-terra-text) !important; } body.pn-id.pn-pd .pd-pricecards .pr-sub{ color:var(--p4-stone); font-size:15px; } body.pn-id.pn-pd .pd-pricecards .pr-makers-link{ margin-top:22px; } body.pn-id.pn-pd .pd-held{ margin-top:var(--pd-gap); } body.pn-id.pn-pd .pd-held p{ font-size:15.5px !important; color:var(--p4-stone) !important; } body.pn-id.pn-pd .pd-held ul{ margin:10px 0 0; padding:0 0 0 18px; } body.pn-id.pn-pd .pd-held li{ font-family:var(--p4-sans); font-size:15.5px; line-height:1.6; color:var(--p4-lime); } body.pn-id.pn-pd .pd-held ul + p{ margin-top:14px; } /* ---- statement card in two columns ------------------------------------------- */ body.pn-id.pn-pd .pd-cols2{ columns:2; column-gap:clamp(28px,4vw,64px); } body.pn-id.pn-pd .pd-cols2 > :is(.pd-kicker,h2){ column-span:all; } body.pn-id.pn-pd .pd-cols2 > h2{ font-family:var(--p4-serif); font-weight:400; font-size:clamp(32px,3.2vw,48px); line-height:1.05; color:var(--p4-ivory); margin:0 0 clamp(22px,2.4vw,32px); max-width:22ch; text-wrap:balance; letter-spacing:-.015em; } body.pn-id.pn-pd .pd-cols2 > p{ break-inside:avoid; } body.pn-id.pn-pd .pd-cols2 > p + p{ margin-top:0; } /* ---- figure strip ---------------------------------------------------------------- */ body.pn-id.pn-pd .pd-figs > div{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--pd-gap); } body.pn-id.pn-pd .pd-figs > div > p{ margin:0; background:#2E3033; border:var(--pd-edge); border-radius:var(--pd-r); padding:clamp(24px,2.6vw,40px); box-shadow:var(--pd-shadow); } body.pn-id.pn-pd .pd-figs > div > p > span:first-child{ display:block; font-family:var(--p4-serif); font-size:clamp(72px,8.5vw,132px); line-height:.85; color:var(--p4-terra-text); font-variant-numeric:lining-nums; margin:0 0 18px; } body.pn-id.pn-pd .pd-figs > div > p > span + span{ display:block; font-family:var(--p4-sans); font-size:16.5px; line-height:1.5; color:var(--p4-lime); } body.pn-id.pn-pd .pd-figs > div + p{ margin-top:16px; font-size:14.5px !important; color:var(--p4-stone) !important; } body.pn-id.pn-pd .pd-figs-note{ margin-top:var(--pd-gap); } /* Stage 3D-C2 (7 Nov 2026): the approved explanation that replaced the retired statistic. */ body.pn-id.pn-pd .pd-figs > p.pr-stats-intro{ margin:0 0 var(--pd-gap); max-width:68ch; } /* ---- a list read as short cards ----------------------------------------------- */ body.pn-id.pn-pd ul.pd-tiles{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--pd-gap); } body.pn-id.pn-pd ul.pd-tiles > li{ background:var(--pd-card); border:var(--pd-edge); border-radius:var(--pd-r-sm); padding:clamp(22px,2.2vw,30px); box-shadow:var(--pd-shadow); font-family:var(--p4-sans); font-size:16px; line-height:1.6; color:var(--p4-lime); } body.pn-id.pn-pd ul.pd-tiles > li > b{ display:block; font-family:var(--p4-serif); font-weight:400; font-size:clamp(24px,2vw,28px); line-height:1.1; color:var(--p4-ivory); margin:0 0 12px; } body.pn-id.pn-pd ul.pd-tiles > li > b::before{ content:""; display:block; width:28px; height:2px; border-radius:2px; background:var(--p4-terra); margin:0 0 18px; } /* ---- Warm Ivory reading surface + checklist --------------------------------------- */ body.pn-id.pn-pd .pd-paper{ background:var(--pn-paper-bg); color:var(--pn-paper-body); border-radius:var(--pd-r); padding:clamp(28px,5vw,72px); box-shadow:var(--pd-shadow-hi); } body.pn-id.pn-pd .pd-paper .pd-kicker{ color:var(--pn-paper-eyebrow); } body.pn-id.pn-pd .pd-paper :is(.pd-h2,.pd-h3,h2,h3){ color:var(--pn-paper-ink); } body.pn-id.pn-pd .pd-paper p{ color:var(--pn-paper-body) !important; } body.pn-id.pn-pd .pd-paper strong{ color:var(--pn-paper-ink); } body.pn-id.pn-pd .pd-paper a{ color:var(--pn-paper-link); border-bottom-color:var(--pn-paper-link); } body.pn-id.pn-pd .pd-paper :focus-visible{ outline-color:var(--pn-paper-link); } body.pn-id.pn-pd .pd-checkcard{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(28px,4vw,72px); align-items:start; } body.pn-id.pn-pd .pd-checkcard-head{ position:sticky; top:calc(var(--pn-hdr-h, 68px) + 90px); } body.pn-id.pn-pd .pd-checkcard-head .pd-h2 + p{ margin-top:18px; } body.pn-id.pn-pd .pd-checkcard > p{ grid-column:2; margin-top:-8px !important; font-family:var(--p4-serif) !important; font-style:italic; font-size:clamp(20px,1.7vw,24px) !important; line-height:1.35 !important; color:var(--pn-paper-ink) !important; } body.pn-id.pn-pd ol.pd-checklist{ list-style:none; margin:0; padding:0; counter-reset:chk; } body.pn-id.pn-pd ol.pd-checklist > li{ counter-increment:chk; display:grid; grid-template-columns:44px 1fr; gap:6px; align-items:baseline; padding:16px 0; border-top:1px solid var(--pn-paper-rule); font-family:var(--p4-sans); font-size:17px; line-height:1.55; color:var(--pn-paper-ink); } body.pn-id.pn-pd ol.pd-checklist > li:last-child{ border-bottom:1px solid var(--pn-paper-rule); } body.pn-id.pn-pd ol.pd-checklist > li::before{ content:counter(chk,decimal-leading-zero); font-family:var(--p4-serif); font-size:22px; line-height:1; color:var(--pn-paper-link); } /* ---- question cards ------------------------------------------------------------- */ body.pn-id.pn-pd .pd-faqgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pd-gap); align-items:stretch; } body.pn-id.pn-pd .pd-faqgrid > div{ background:var(--pd-card); border:var(--pd-edge); border-radius:var(--pd-r-sm); padding:clamp(22px,2.4vw,34px); box-shadow:var(--pd-shadow); min-width:0; } body.pn-id.pn-pd .pd-faqgrid h3{ font-family:var(--p4-serif); font-weight:400; font-size:clamp(23px,2vw,28px); line-height:1.15; color:var(--p4-ivory); margin:0 0 14px; text-wrap:balance; } body.pn-id.pn-pd .pd-faqgrid p{ font-family:var(--p4-sans); font-size:16px; line-height:1.65; color:var(--p4-lime); margin:0; } body.pn-id.pn-pd .pd-faqgrid a{ color:var(--p4-terra-text); text-decoration:none; border-bottom:1px solid rgba(207,133,102,.55); } body.pn-id.pn-pd .pd-faqgrid a:hover{ color:var(--p4-ivory); border-bottom-color:var(--p4-ivory); } /* ---- quiet two-part aside --------------------------------------------------------- */ body.pn-id.pn-pd .pd-aside{ display:grid; grid-template-columns:5fr 7fr; column-gap:clamp(28px,4vw,72px); } body.pn-id.pn-pd .pd-aside > .pd-kicker{ grid-column:1; } body.pn-id.pn-pd .pd-aside > .pd-h3{ grid-column:1; } body.pn-id.pn-pd .pd-aside > .pd-aside-body{ grid-column:2; grid-row:1 / span 2; } body.pn-id.pn-pd .pd-method .pr-method{ margin-top:18px; columns:2; column-gap:clamp(28px,4vw,64px); } body.pn-id.pn-pd .pd-method .pr-method p{ font-size:15.5px; color:var(--p4-stone); break-inside:avoid; margin:0 0 14px; } body.pn-id.pn-pd .pd-method .pr-method p + p{ margin-top:0; } /* ---- closing panel (guide pages) + WhatsApp as a secondary action -------------- */ body.pn-id.pn-pd .pd-close.pr-invite{ padding-top:clamp(56px,8vw,128px) !important; } body.pn-id.pn-pd .pd-close.pr-invite .pd-close-head .pd-h2{ font-size:clamp(34px,3.6vw,54px); } body.pn-id.pn-pd .pd-close.pr-invite .pd-actions{ margin-top:0; } body.pn-id.pn-pd .pd-close.pr-invite + .pd-section{ padding-top:0; } body.pn-id.pn-pd .pd-wa{ gap:10px; padding-left:8px; border-color:rgba(179,146,114,.7); } body.pn-id.pn-pd .pd-wa-ico{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#1F3B2E; border:1.5px solid #B39272; flex:none; } body.pn-id.pn-pd .pd-wa-ico img{ width:20px; height:20px; display:block; } @media (max-width:1080px){ body.pn-id.pn-pd .pd-answer, body.pn-id.pn-pd .pd-checkcard, body.pn-id.pn-pd .pd-aside{ grid-template-columns:1fr; } body.pn-id.pn-pd .pd-aside > .pd-aside-body{ grid-column:1; grid-row:auto; margin-top:18px; } body.pn-id.pn-pd .pd-checkcard > p{ grid-column:1; } body.pn-id.pn-pd .pd-checkcard-head{ position:static; } body.pn-id.pn-pd ul.pd-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:720px){ body.pn-id.pn-pd .pr-hero{ padding:40px 20px 120px; } body.pn-id.pn-pd .pr-hero h1{ font-size:clamp(46px,13vw,64px); } body.pn-id.pn-pd .pr-hero .pr-parent{ margin-bottom:28px; } body.pn-id.pn-pd .pd-lift{ margin-top:-88px; } body.pn-id.pn-pd .hfa-nav-wrap.pd-nav{ padding:0 10px; } body.pn-id.pn-pd .pd-cols2, body.pn-id.pn-pd .pd-method .pr-method{ columns:1; } body.pn-id.pn-pd .pd-cols2 > p + p{ margin-top:14px; } body.pn-id.pn-pd .pd-figs > div, body.pn-id.pn-pd ul.pd-tiles, body.pn-id.pn-pd .pd-faqgrid{ grid-template-columns:1fr; } /* the price table on a phone: each row stacks; the column names stay in the header row for assistive technology */ body.pn-id.pn-pd .pd-pricecards thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } body.pn-id.pn-pd .pd-pricecards .pr-table, body.pn-id.pn-pd .pd-pricecards tbody{ display:block; margin:0; } body.pn-id.pn-pd .pd-pricecards tbody tr{ display:grid; grid-template-columns:1fr 1fr; margin:0 0 var(--pd-gap); background:var(--pd-card); border:var(--pd-edge); border-radius:var(--pd-r-sm); overflow:hidden; box-shadow:var(--pd-shadow); } body.pn-id.pn-pd .pd-pricecards tbody tr:first-child{ background:var(--pd-raised); } body.pn-id.pn-pd .pd-pricecards tbody :is(th,td){ display:block; background:transparent !important; border:0 !important; border-radius:0 !important; width:auto; padding:6px 20px; } body.pn-id.pn-pd .pd-pricecards tbody th{ grid-column:1 / -1; padding-top:22px; } body.pn-id.pn-pd .pd-pricecards tbody td.pr-range{ grid-column:1 / -1; padding:10px 20px 8px; white-space:normal; } body.pn-id.pn-pd .pd-pricecards tbody td:not(.pr-range){ font-size:15px; color:var(--p4-stone); padding-bottom:22px; } body.pn-id.pn-pd .pd-pricecards tbody td:not(.pr-range)::before{ display:block; font-family:var(--p4-sans); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--p4-bronze-text); margin:0 0 4px; } body.pn-id.pn-pd .pd-pricecards tbody td:nth-of-type(2)::before{ content:"Based on"; } body.pn-id.pn-pd .pd-pricecards tbody td:nth-of-type(3)::before{ content:"VAT included, as stated by the supplier"; } body.pn-id.pn-pd .pd-pricecards caption{ display:block; } body.pn-id.pn-pd .pd-paper{ padding:28px 20px; } body.pn-id.pn-pd ol.pd-checklist > li{ grid-template-columns:36px 1fr; font-size:16px; } } @media (prefers-reduced-motion:reduce){ body.pn-id.pn-pd .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } body.pn-id.pn-pd .pr-hero .pr-parent{ transition:none; } } @media print{ body.pn-id.pn-pd .pd-paper{ box-shadow:none; background:#fff; color:#000; } body.pn-id.pn-pd .pd-checkcard-head{ position:static; } } /* ---- guide hero with a picture (.pr-hero-media; founder approval of the layout, 23 Oct 2026) ---- The picture: PlotNua's own original AI-generated illustration of a generic architectural garden pavilion (founder, 23 Oct 2026), pinned in HERO_ILLUSTRATION in atlas-tools/build-garden-room-prices.py. One , framed by object-fit; the image files are never cropped or altered. */ body.pn-id.pn-pd .pr-hero{ --hero-bg:#1E1F21; --hero-focus:86% 58%; } body.pn-id.pn-pd .pr-hero:has(.pr-hero-media){ background:var(--hero-bg); } body.pn-id.pn-pd .pr-hero:has(.pr-hero-media)::before{ display:none; } body.pn-id.pn-pd .pr-hero-media{ position:absolute; top:0; right:0; bottom:0; width:54%; margin:0; overflow:hidden; z-index:0; } body.pn-id.pn-pd .pr-hero-media::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg, var(--hero-bg) 0%, rgba(30,31,33,.9) 10%, rgba(30,31,33,.55) 26%, rgba(30,31,33,.18) 42%, rgba(30,31,33,0) 56%), linear-gradient(0deg, var(--hero-bg) 0%, rgba(30,31,33,.55) 18%, rgba(30,31,33,0) 42%), linear-gradient(180deg, rgba(30,31,33,.35) 0%, rgba(30,31,33,0) 16%); } body.pn-id.pn-pd .pr-hero-media picture{ position:absolute; inset:0; z-index:1; display:block; } body.pn-id.pn-pd .pr-hero-img{ display:block; width:100%; height:100%; object-fit:cover; object-position:var(--hero-focus); filter:saturate(.94); } body.pn-id.pn-pd .pr-hero-media figcaption{ position:absolute; right:clamp(16px,2vw,28px); bottom:clamp(150px,15vw,230px); z-index:3; font-family:var(--p4-sans) !important; font-size:12px !important; letter-spacing:.06em; color:var(--p4-ivory) !important; background:rgba(27,28,30,.62); padding:6px 10px; border-radius:999px; margin:0 !important; max-width:none !important; font-style:normal !important; } body.pn-id.pn-pd .pr-hero:has(.pr-hero-media) > :not(.pr-hero-media){ position:relative; z-index:3; } body.pn-id.pn-pd .pr-hero:has(.pr-hero-media) h1{ text-shadow:0 2px 24px rgba(20,21,22,.55); } @media (max-width:1080px){ body.pn-id.pn-pd .pr-hero-media{ width:62%; } } @media (max-width:900px){ body.pn-id.pn-pd .pr-hero{ --hero-focus:64% 55%; } body.pn-id.pn-pd .pr-hero-media{ position:relative; top:auto; right:auto; bottom:auto; width:auto; height:auto; aspect-ratio:16 / 10; margin:32px calc(-1 * clamp(16px,3vw,40px)) 0; } body.pn-id.pn-pd .pr-hero-media::before{ background:linear-gradient(180deg, var(--hero-bg) 0%, rgba(30,31,33,0) 24%), linear-gradient(0deg, var(--hero-bg) 0%, rgba(30,31,33,0) 32%); } body.pn-id.pn-pd .pr-hero-media figcaption{ bottom:auto; top:40px; right:14px; } body.pn-id.pn-pd .pr-hero:has(.pr-hero-media){ padding-bottom:120px; } } @media (max-width:720px){ body.pn-id.pn-pd .pr-hero{ --hero-focus:70% 55%; } body.pn-id.pn-pd .pr-hero-media{ aspect-ratio:4 / 3; margin:30px -20px 0; } body.pn-id.pn-pd .pr-hero-media::before{ background:linear-gradient(180deg, var(--hero-bg) 0%, rgba(30,31,33,0) 26%), linear-gradient(0deg, var(--hero-bg) 0%, rgba(30,31,33,0) 34%); } body.pn-id.pn-pd .pr-hero-media figcaption{ bottom:auto; top:44px; right:14px; } body.pn-id.pn-pd .pr-hero:has(.pr-hero-media){ padding-bottom:110px; } } /* ====================================================================== BATCH 1 · GARDEN LIVING (founder direction, 23 Oct 2026) The Premium look applied to EXISTING page markup, so every builder, data region and content guard on these pages keeps working unchanged. Values are the toolkit's own (--pd-*, --p4-*): no new design language. D = standard Discovery markup (.article-section): Living in the Garden, Garden Retreat. A Home for Art has no .article-section. T = maker product page markup (header.masthead): TRIQ QUBE. ====================================================================== */ /* ---- D · hero: the guide-hero composition (left-aligned serif over the photograph) */ body.pn-id.pn-pd:has(.article-section) .d-hero{ height:92vh; height:92svh; min-height:600px; } body.pn-id.pn-pd:has(.article-section) .d-hero-scrim{ background: linear-gradient(90deg, rgba(27,28,30,.86) 0%, rgba(27,28,30,.55) 34%, rgba(27,28,30,0) 64%), linear-gradient(0deg, var(--pd-canvas) 0%, rgba(27,28,30,.35) 22%, rgba(27,28,30,0) 46%); pointer-events:none; } body.pn-id.pn-pd:has(.article-section) .d-hero-copy{ text-align:left; max-width:var(--pd-max); margin:0 auto; left:0; right:0; padding:0 clamp(16px,3vw,40px) clamp(120px,15vh,180px); box-sizing:border-box; pointer-events:none; } body.pn-id.pn-pd:has(.article-section) .d-hero-copy a{ pointer-events:auto; } body.pn-id.pn-pd:has(.article-section) .d-hero-copy .eyebrow{ font-size:12px; letter-spacing:.18em; color:var(--p4-bronze-text); margin-bottom:22px; } body.pn-id.pn-pd:has(.article-section) .d-hero-copy h1{ font-size:clamp(52px,7vw,112px); line-height:.94; max-width:11ch; margin:0; text-shadow:0 2px 28px rgba(20,21,22,.5); } body.pn-id.pn-pd:has(.article-section) .d-hero-copy h1 .d-h1-sub{ display:block; margin-top:22px; font-size:12px; letter-spacing:.18em; color:var(--p4-stone); text-shadow:none; max-width:none; } body.pn-id.pn-pd:has(.article-section) .d-hero-copy .subtitle{ max-width:30ch; margin:26px 0 0; } body.pn-id.pn-pd:has(.article-section) .d-hero-copy .intro{ max-width:46ch; margin:14px 0 0; color:var(--p4-stone); } body.pn-id.pn-pd:has(.article-section) .gr-hero-actions{ justify-content:flex-start; margin:30px 0 0; gap:12px; } body.pn-id.pn-pd:has(.article-section) .gr-hero-actions a{ display:inline-flex; align-items:center; min-height:48px; padding:0 24px; border-radius:999px; font-family:var(--p4-sans); font-weight:600; font-size:15px; letter-spacing:.01em; text-transform:none; text-decoration:none; transition:background .2s ease, color .2s ease, border-color .2s ease; } body.pn-id.pn-pd:has(.article-section) .gr-hero-actions a.is-primary{ background:var(--p4-ivory); color:var(--p4-anth); border:1px solid var(--p4-ivory); } body.pn-id.pn-pd:has(.article-section) .gr-hero-actions a.is-primary:hover{ background:var(--p4-lime); border-color:var(--p4-lime); } body.pn-id.pn-pd:has(.article-section) .gr-hero-actions a.is-secondary{ background:rgba(27,28,30,.35); color:var(--p4-ivory); border:1px solid rgba(242,235,224,.45); } body.pn-id.pn-pd:has(.article-section) .gr-hero-actions a.is-secondary:hover{ background:var(--p4-ivory); color:var(--p4-anth); } body.pn-id.pn-pd:has(.article-section) .gr-hero-cap{ max-width:var(--pd-max); margin:14px auto 0; padding:0 clamp(16px,3vw,40px); box-sizing:border-box; text-align:left; font-family:var(--p4-serif); font-style:italic; font-size:17px; color:var(--p4-stone); background:none; } /* ---- D · the reading column becomes the Premium width; sections get Premium rhythm */ /* Batch 2: on some Discoveries
itself is the .article container (the Premium base rule zeroes main's padding, so the reading column is restored here) */ body.pn-id.pn-pd:has(.article-section) main#pn-main.article{ max-width:var(--pd-max); margin:0 auto; padding:0 clamp(16px,3vw,40px) clamp(40px,6vw,96px); box-sizing:border-box; } body.pn-id.pn-pd:has(.article-section) #pn-main > .article{ max-width:var(--pd-max); padding:0 clamp(16px,3vw,40px); box-sizing:border-box; } body.pn-id.pn-pd:has(.article-section) .article-section{ padding:clamp(56px,8vw,120px) 0 0; border-bottom:0; scroll-margin-top:96px; } body.pn-id.pn-pd:has(.article-section) .article-section > :is(p, ul:not([class]), ol:not([class])){ max-width:68ch; } body.pn-id.pn-pd:has(.article-section) .article-section > .kicker, body.pn-id.pn-pd:has(.article-section) .article-section .kicker{ font-family:var(--p4-sans); font-weight:700; font-size:12px; letter-spacing:.18em; color:var(--p4-bronze-text); margin-bottom:18px; } body.pn-id.pn-pd:has(.article-section) .article-section h2{ font-family:var(--p4-serif); font-weight:400; font-size:clamp(38px,4.6vw,64px); line-height:1.02; letter-spacing:-.015em; max-width:18ch; color:var(--p4-ivory); margin-bottom:28px; } body.pn-id.pn-pd:has(.article-section) .article-section h3{ font-family:var(--p4-serif); font-weight:400; letter-spacing:-.01em; color:var(--p4-ivory); } /* ---- D · "In brief" becomes the rising answer card */ body.pn-id.pn-pd:has(.article-section) .article-section.pn-brief{ position:relative; z-index:3; margin-top:clamp(40px,5vw,64px); background:var(--pd-raised); border:var(--pd-edge); border-radius:var(--pd-r); box-shadow:var(--pd-shadow-hi); padding:var(--pd-pad) !important; } body.pn-id.pn-pd:has(.article-section) .article-section.pn-brief > p{ font-size:clamp(17px,1.35vw,19px); line-height:1.65; color:var(--p4-lime); } body.pn-id.pn-pd:has(.article-section) .gr-hero-cap + #pn-main .article-section.pn-brief, body.pn-id.pn-pd:has(.gr-hero-cap) .article-section.pn-brief{ margin-top:clamp(40px,5vw,64px); } /* Living in the Garden's hero is the interactive before/after slider: nothing may cover it */ body.pn-id.pn-pd:has(#gardenCompare) .article-section.pn-brief{ margin-top:clamp(40px,5vw,64px); } body.pn-id.pn-pd:has(#gardenCompare) .d-hero-copy{ padding-bottom:clamp(72px,10vh,120px); } /* ---- D · tables, notes and the property-check panel take the card surfaces */ body.pn-id.pn-pd:has(.article-section) .article-section table{ background:var(--pd-card); border-radius:var(--pd-r-sm); box-shadow:var(--pd-shadow); overflow:hidden; } body.pn-id.pn-pd:has(.article-section) :is(.pb-preview, .pb-early){ max-width:var(--pd-max); margin:clamp(64px,8vw,120px) auto 0; width:calc(100% - 2 * clamp(16px,3vw,40px)); box-sizing:border-box; border-radius:var(--pd-r); border:var(--pd-edge); box-shadow:var(--pd-shadow-hi); background:var(--pd-raised); } body.pn-id.pn-pd:has(.article-section) .related{ background:var(--pd-band); margin-top:clamp(64px,8vw,120px); } /* ---- D · phones: copy stays on the photograph, the card rises less */ @media (max-width:720px){ body.pn-id.pn-pd:has(.article-section) .d-hero{ height:86vh; height:86svh; min-height:560px; } body.pn-id.pn-pd:has(.article-section) .d-hero-scrim{ background:linear-gradient(0deg, var(--pd-canvas) 0%, rgba(27,28,30,.72) 34%, rgba(27,28,30,.1) 70%, rgba(27,28,30,.25) 100%); } body.pn-id.pn-pd:has(.article-section) .d-hero-copy{ padding-bottom:96px; } body.pn-id.pn-pd:has(.article-section) .d-hero-copy h1{ font-size:clamp(46px,13vw,64px); } body.pn-id.pn-pd:has(.article-section) .article-section.pn-brief{ margin-top:32px; } body.pn-id.pn-pd:has(:is(#gardenCompare, .gr-hero-cap)) .article-section.pn-brief{ margin-top:32px; } } /* ---- T · product page: its own colour variables mapped onto the anthracite palette */ body.pn-id.pn-pd:has(header.masthead){ --pn-ground:var(--pd-canvas); --pn-voice:var(--p4-ivory); --pn-body:var(--p4-lime); --pn-fact:var(--p4-ivory); --pn-stone:var(--p4-stone); --pn-meta:var(--p4-stone); --pn-hair:var(--p4-line); --pn-edge:var(--p4-line2); --pn-surface:var(--pd-card); --pn-panel:var(--pd-card); --pn-wash:rgba(242,235,224,.03); --pn-wild:var(--p4-bronze-text); --pn-on-dark:var(--p4-ivory); } body.pn-id.pn-pd:has(header.masthead) .eyebrow{ font-family:var(--p4-sans); font-weight:700; letter-spacing:.18em; color:var(--p4-bronze-text); } body.pn-id.pn-pd:has(header.masthead) header.masthead h1{ font-size:clamp(46px,6vw,88px); line-height:.98; letter-spacing:-.02em; max-width:14ch; } body.pn-id.pn-pd:has(header.masthead) :is(h2, .build-step h3):not(footer *){ font-size:clamp(32px,3.6vw,52px); line-height:1.04; letter-spacing:-.015em; } body.pn-id.pn-pd:has(header.masthead) figure img{ border-radius:var(--pd-r-img); } body.pn-id.pn-pd:has(header.masthead) .card{ background:var(--pd-card); border:var(--pd-edge); border-radius:var(--pd-r); box-shadow:var(--pd-shadow); padding:var(--pd-pad); } body.pn-id.pn-pd:has(header.masthead) .open-panel{ background:var(--pd-card); border:var(--pd-edge); border-radius:var(--pd-r-sm); box-shadow:var(--pd-shadow); padding:var(--pd-pad); } body.pn-id.pn-pd:has(header.masthead) .price{ font-family:var(--p4-serif); font-size:clamp(40px,4.4vw,60px); line-height:1; color:var(--p4-ivory); } body.pn-id.pn-pd:has(header.masthead) :is(.chips li, .rail li, .built-keys li){ border-radius:999px; padding:6px 14px; } body.pn-id.pn-pd:has(header.masthead) .build-no{ color:var(--p4-bronze-text); } /* the hand-off to the maker becomes the closing panel */ body.pn-id.pn-pd:has(header.masthead) .handoff{ background:var(--pd-raised); border:var(--pd-edge); border-radius:var(--pd-r); box-shadow:var(--pd-shadow-hi); padding:clamp(32px,4vw,56px); position:relative; overflow:hidden; } body.pn-id.pn-pd:has(header.masthead) .handoff::before{ content:""; position:absolute; left:clamp(32px,4vw,56px); top:0; width:56px; height:3px; border-radius:0 0 3px 3px; background:var(--p4-terra); } body.pn-id.pn-pd:has(header.masthead) .handoff p{ color:var(--p4-lime); } body.pn-id.pn-pd:has(header.masthead) .handoff-btn{ display:inline-flex; align-items:center; min-height:48px; padding:0 24px; border-radius:999px; background:var(--p4-ivory); color:var(--p4-anth); border-color:var(--p4-ivory); font-family:var(--p4-sans); font-weight:600; } body.pn-id.pn-pd:has(header.masthead) .handoff-btn:hover{ background:var(--p4-lime); color:var(--p4-anth); border-color:var(--p4-lime); } body.pn-id.pn-pd:has(header.masthead) :is(.handoff-note, .demo-label){ color:var(--p4-stone); } body.pn-id.pn-pd:has(header.masthead) footer.page-notes{ color:var(--p4-stone); } body.pn-id.pn-pd:has(header.masthead) footer.page-notes a{ color:var(--p4-terra-text); } /* image disclosure chips on Discovery cards ("Illustrative image") read like the hero's "AI-generated illustration" label: ivory on a dark glass chip */ body.pn-id.pn-pd:has(.article-section) .gr-card-label{ font-family:var(--p4-sans); font-weight:600; font-size:11px; letter-spacing:.08em; color:var(--p4-ivory); background:rgba(27,28,30,.72); padding:6px 10px; border-radius:999px; } /* ====================================================================== BATCH 3 · BRAND AND CONVERSION PAGES (founder direction, 24 Oct 2026) About, Contact, Artist Register: the same toolkit values on their existing markup. Forms, endpoints and field names are untouched. ====================================================================== */ /* About: the guide-hero composition */ body.pn-id.pn-pd .about-hero-scrim{ background: linear-gradient(90deg, rgba(27,28,30,.82) 0%, rgba(27,28,30,.5) 36%, rgba(27,28,30,0) 66%), linear-gradient(0deg, var(--pd-canvas) 0%, rgba(27,28,30,.3) 24%, rgba(27,28,30,0) 48%) !important; } body.pn-id.pn-pd .about-hero-copy{ text-align:left !important; left:0; right:0; max-width:var(--pd-max); margin:0 auto; padding-left:clamp(16px,3vw,40px) !important; padding-right:clamp(16px,3vw,40px) !important; box-sizing:border-box; } body.pn-id.pn-pd .about-hero-copy .eyebrow{ font-family:var(--p4-sans); font-weight:700; font-size:12px; letter-spacing:.18em; color:var(--p4-bronze-text); } body.pn-id.pn-pd .about-hero-copy h1{ font-family:var(--p4-serif); font-weight:400; font-size:clamp(52px,7vw,112px); line-height:.94; letter-spacing:-.02em; margin-left:0; max-width:11ch; text-shadow:0 2px 28px rgba(20,21,22,.5); } body.pn-id.pn-pd .about-hero-copy p{ margin-left:0; max-width:34ch; } /* Contact and Artist Register: intro headings at the Premium scale */ body.pn-id.pn-pd :is(.contact-intro, .privacy-intro) h1{ font-family:var(--p4-serif); font-weight:400; font-size:clamp(52px,6.4vw,104px); line-height:.95; letter-spacing:-.02em; color:var(--p4-ivory); } body.pn-id.pn-pd :is(.contact-intro, .privacy-intro) :is(.eyebrow, .kicker){ font-family:var(--p4-sans); font-weight:700; letter-spacing:.18em; color:var(--p4-bronze-text); } /* Forms: a card surface, rounded fields, pill buttons (same controls, same names, same endpoints) */ body.pn-id.pn-pd :is(.contact-form, .ar-form){ background:var(--pd-card); border:var(--pd-edge); border-radius:var(--pd-r); box-shadow:var(--pd-shadow); padding:var(--pd-pad); box-sizing:border-box; } body.pn-id.pn-pd :is(.contact-form, .ar-form) :is(input[type="text"], input[type="email"], input[type="url"], select, textarea){ background:var(--pd-raised); border:1px solid var(--p4-line2); border-radius:12px; color:var(--p4-ivory); min-height:48px; padding:10px 14px; box-sizing:border-box; } body.pn-id.pn-pd :is(.contact-form, .ar-form) :is(input, select, textarea):focus-visible{ outline:2px solid var(--p4-terra-text); outline-offset:2px; } body.pn-id.pn-pd :is(.contact-form .btn-primary, .ar-form button[type="submit"], .ar-cta){ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 26px; border-radius:999px; font-family:var(--p4-sans); font-weight:600; } /* ====================================================================== BATCH 4 CORRECTION · signature Discoveries (founder review, 24 Oct 2026) House as a Power Station (#look-again) and Above and Beyond (#look-up): the toolkit's editorial composition on their EXISTING markup. Desktop: kicker and heading in a left column, body text in a wide right column at reading size; card grids, diagrams, figures and tables span the full width. Phones: one column. Content, diagrams and scripts unchanged. ====================================================================== */ body.pn-id.pn-pd:is(:has(#look-again), :has(#look-up)) .article-section > :is(p, h3, h4, ol, ul, blockquote, details){ font-size:18px; line-height:1.7; } body.pn-id.pn-pd:is(:has(#look-again), :has(#look-up)) .article-section > p{ max-width:68ch; color:var(--p4-lime); } body.pn-id.pn-pd:is(:has(#look-again), :has(#look-up)) .article-section > h3{ font-family:var(--p4-serif); font-weight:400; font-size:clamp(24px,2vw,30px); line-height:1.15; color:var(--p4-ivory); margin-top:34px; } body.pn-id.pn-pd:is(:has(#look-again), :has(#look-up)) .article-section > :is(div, figure, table):not(.kicker){ max-width:none; } @media (min-width:1024px){ body.pn-id.pn-pd:is(:has(#look-again), :has(#look-up)) .article-section{ display:flow-root; } /* left column: kicker and heading */ body.pn-id.pn-pd:is(:has(#look-again), :has(#look-up)) .article-section > :is(.kicker, h2){ float:left; clear:left; width:34%; box-sizing:border-box; padding-right:clamp(24px,3vw,56px); } body.pn-id.pn-pd:is(:has(#look-again), :has(#look-up)) .article-section > h2{ font-size:clamp(40px,3.6vw,60px); line-height:1.02; max-width:none; } /* right column: the reading text */ body.pn-id.pn-pd:is(:has(#look-again), :has(#look-up)) .article-section > :is(p, h3, h4, ol, ul, blockquote, details){ margin-left:34%; max-width:720px; } /* full width: components (cards, diagrams, figures, tables, explorers) */ body.pn-id.pn-pd:is(:has(#look-again), :has(#look-up)) .article-section > :is(div, figure, table, section, aside):not(.kicker){ clear:both; margin-left:0; margin-right:0; width:auto; } body.pn-id.pn-pd:is(:has(#look-again), :has(#look-up)) .article-section > :is(div, figure, table, section, aside):not(.kicker) + :is(p, h3, ol, ul, details){ clear:both; } } /* Power Station: the "honest part" band and other --ink surfaces stay dark, like the opening */ body.pn-id.pn-pd:has(#look-again) .seam{ background:var(--pd-band); color:var(--p4-lime); } body.pn-id.pn-pd:has(#look-again) .seam-inner{ max-width:var(--pd-max); padding:0 clamp(16px,3vw,40px); box-sizing:border-box; } body.pn-id.pn-pd:has(#look-again) .seam .kicker{ font-family:var(--p4-sans); font-weight:700; font-size:12px; letter-spacing:.18em; color:var(--p4-bronze-text); } body.pn-id.pn-pd:has(#look-again) .seam h2{ font-family:var(--p4-serif); font-size:clamp(40px,4.4vw,64px); line-height:1.02; color:var(--p4-ivory); max-width:20ch; } body.pn-id.pn-pd:has(#look-again) .seam p{ font-family:var(--p4-sans); font-size:18px; color:var(--p4-lime); max-width:68ch; } body.pn-id.pn-pd:has(#look-again) .seam blockquote{ font-family:var(--p4-serif); font-size:clamp(20px,1.6vw,24px); color:var(--p4-ivory); background:var(--pd-card); border-left:3px solid var(--p4-terra); border-radius:0 var(--pd-r-sm) var(--pd-r-sm) 0; max-width:900px; } /* Above and Beyond: the garden-brief quiz on the card surfaces (its hard-coded white made pale text unreadable) */ body.pn-id.pn-pd:has(#look-up) .gb{ background:var(--pd-card); border:var(--pd-edge); border-radius:var(--pd-r); box-shadow:var(--pd-shadow); padding:var(--pd-pad); } body.pn-id.pn-pd:has(#look-up) .jq-opt{ background:var(--pd-raised); border:1px solid var(--p4-line2); border-radius:12px; } body.pn-id.pn-pd:has(#look-up) .jq-opt span{ color:var(--p4-ivory); font-size:16px; } body.pn-id.pn-pd:has(#look-up) .jq-opt:hover{ border-color:var(--p4-stone); } body.pn-id.pn-pd:has(#look-up) .jq-opt:has(input:checked){ background:#36383B; border-color:var(--p4-bronze-text); } body.pn-id.pn-pd:has(#look-up) .jq-opt input, body.pn-id.pn-pd:has(#look-up) .gb-opt input{ accent-color:var(--p4-terra); } body.pn-id.pn-pd:has(#look-up) :is(.gb-n, .gb-t, .gb-out){ background:var(--pd-raised); color:var(--p4-ivory); border:1px solid var(--p4-line2); border-radius:12px; } body.pn-id.pn-pd:has(#look-up) :is(.gb-state, .gb-next){ background:var(--pd-raised); } body.pn-id.pn-pd:has(#look-up) :is(.gb h3, .gb h4, .gb-q, .gb-opt label, .gb-state-label){ color:var(--p4-ivory); } body.pn-id.pn-pd:has(#look-up) .gb-btn{ border-radius:999px; min-height:48px; } /* lists of options (.practical-group) become a grid of cards */ body.pn-id.pn-pd:is(:has(#look-again), :has(#look-up)) .practical-group{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--pd-gap); margin:32px 0 8px; } body.pn-id.pn-pd:is(:has(#look-again), :has(#look-up)) .practical-item{ background:var(--pd-card); border:var(--pd-edge); border-radius:var(--pd-r-sm); box-shadow:var(--pd-shadow); padding:26px 26px 22px; margin:0; } body.pn-id.pn-pd:is(:has(#look-again), :has(#look-up)) .practical-item h3{ font-family:var(--p4-serif); font-weight:400; font-size:clamp(24px,1.9vw,28px); line-height:1.1; color:var(--p4-ivory); margin:0 0 12px; } body.pn-id.pn-pd:is(:has(#look-again), :has(#look-up)) .practical-item p{ font-size:16px; line-height:1.65; color:var(--p4-lime); margin:0; max-width:none; } /* Statistics and diagram type scale: the identity layer's dark-prose rule set every paragraph to 18px, flattening each page's own figure hierarchy (e.g. the 3 m height figure). Restore it. */ body.pn-id.pn-pd:has(#look-up) .article-section .pn-hero-fig .pn-fig-n{ font-family:var(--p4-serif); font-weight:400; font-size:clamp(72px,9vw,128px); line-height:.9; color:var(--p4-ivory); margin:0 0 10px; } body.pn-id.pn-pd:has(#look-up) .article-section :is(.pn-stack, .pn-exception) .pn-fig-n{ font-family:var(--p4-serif); font-size:clamp(28px,2.8vw,38px); line-height:1.05; color:var(--p4-ivory); margin:0 0 4px; } body.pn-id.pn-pd:has(#look-up) .article-section .pn-exception .pn-fig-n{ color:var(--p4-stone); } body.pn-id.pn-pd:has(#look-up) .article-section .pn-fig-l{ font-size:14px; line-height:1.55; color:var(--p4-stone); margin:0; } body.pn-id.pn-pd:has(#look-up) .article-section .pn-hero-fig .pn-fig-l{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--p4-terra-text); max-width:34ch; } body.pn-id.pn-pd:has(#look-up) .article-section :is(.pn-op, .pn-aop){ font-family:var(--p4-serif); font-size:26px; line-height:1; color:var(--p4-terra-text); margin:10px 0 2px; } body.pn-id.pn-pd:has(#look-up) .article-section .pn-op-l{ font-size:15px; line-height:1.6; color:var(--p4-lime); margin:0 0 4px; } body.pn-id.pn-pd:has(#look-up) .article-section .pn-afig-n{ font-family:var(--p4-serif); font-size:clamp(30px,3vw,42px); line-height:1.05; color:var(--p4-ivory); margin:0 0 6px; } body.pn-id.pn-pd:has(#look-up) .article-section .pn-afig-l{ font-size:14px; line-height:1.6; color:var(--p4-stone); } body.pn-id.pn-pd:has(#look-up) .article-section :is(.pn-conclusion, .pn-thesis){ font-family:var(--p4-serif); font-size:clamp(26px,2.4vw,34px); line-height:1.2; color:var(--p4-ivory); } body.pn-id.pn-pd:has(#look-up) .article-section :is(.pn-dia-c, .pn-dia p, .pn-stand, .step, .ev-bul, .ev-limits, .pn-p-key), body.pn-id.pn-pd:has(#look-up) .article-section :is(.pn-p-key, .ev-bul, .ev-limits) :is(p, li){ font-size:15px; line-height:1.7; } body.pn-id.pn-pd:has(#look-up) .article-section :is(.jr, .jr-label, .jr-visit, .jr-check, .jr-check-after, .jr-back), body.pn-id.pn-pd:has(#look-up) .article-section :is(.jr, .jr-check) :is(p, li){ font-size:15px; line-height:1.6; } body.pn-id.pn-pd:has(#look-up) .article-section :is(.pn-attrib, .pn-area-l){ font-size:13.5px; line-height:1.65; color:var(--p4-stone); } body.pn-id.pn-pd:has(#look-again) .article-section :is(.mx-legend, .mx-foot), body.pn-id.pn-pd:has(#look-again) .article-section :is(.mx-legend, .mx-foot) :is(p, li){ font-size:13px; line-height:1.6; color:var(--p4-stone); } body.pn-id.pn-pd:has(#look-again) .article-section :is(.pos, .handoff, .chain, .dq-figs, .dq-rows, .mx-grid, .dq-adv-cols) :is(p, li){ font-size:16px; line-height:1.65; } /* Power Station diagrams on dark (founder note 24 Oct): the heat-path strip and the development-scale energy-centre section were drawn in deep green for a cream page. Recolour their existing strokes, fills and labels to a brighter desaturated sage and lift faint lines. Drawing, layout and animation unchanged. */ body.pn-id.pn-pd:has(#look-again) :is(.fig-strip svg, svg[viewBox="0 0 900 420"]){ --ps-line:#A9C2A1; --ps-label:#D3DECC; --ps-sub:#9DB894; } body.pn-id.pn-pd:has(#look-again) :is(.fig-strip svg, svg[viewBox="0 0 900 420"]) [stroke="#1F3B2E"]{ stroke:var(--ps-line); } body.pn-id.pn-pd:has(#look-again) :is(.fig-strip svg, svg[viewBox="0 0 900 420"]) [stroke="#4F6B4A"]{ stroke:var(--ps-sub); } body.pn-id.pn-pd:has(#look-again) :is(.fig-strip svg, svg[viewBox="0 0 900 420"]) [fill="#1F3B2E"]{ fill:var(--ps-label); } body.pn-id.pn-pd:has(#look-again) :is(.fig-strip svg, svg[viewBox="0 0 900 420"]) [fill="#4F6B4A"]{ fill:var(--ps-sub); } body.pn-id.pn-pd:has(#look-again) :is(.fig-strip svg, svg[viewBox="0 0 900 420"]) [fill="#8FAF8A"]{ fill:var(--ps-line); } body.pn-id.pn-pd:has(#look-again) :is(.fig-strip svg, svg[viewBox="0 0 900 420"]) [opacity=".22"]{ opacity:.36; } body.pn-id.pn-pd:has(#look-again) :is(.fig-strip svg, svg[viewBox="0 0 900 420"]) [opacity=".30"]{ opacity:.55; } body.pn-id.pn-pd:has(#look-again) :is(.fig-strip svg, svg[viewBox="0 0 900 420"]) :is([opacity=".4"], [opacity=".45"], [opacity=".5"]){ opacity:.75; } body.pn-id.pn-pd:has(#look-again) :is(.fig-strip svg, svg[viewBox="0 0 900 420"]) :is([opacity=".55"], [opacity=".6"], [opacity=".65"]){ opacity:.85; }