/* pages.css (Builder G, BRIEF-V7B section 3): the guides (gp-), the information pages (ip-), the 404 (nf-) and the footer's
   columns (ft-). Only tokens from tokens.css. The one light of the site is L's `.lit` (light.css): every stage, panel and tile
   here carries it, and every lit element clips (light.css lays its highlight 8 percent past the edge). The hero stage stands
   on L's shared .plinth (light.css), placed with --plinth-y. */

/* the tones: a ground and its type colour (the same pairs as the product pages) */
.gp-t-plaster{--g-bg:var(--plaster);--g-fg:var(--ink)}
.gp-t-plaster-2{--g-bg:var(--plaster-2);--g-fg:var(--ink)}
.gp-t-cream{--g-bg:var(--cream);--g-fg:var(--ink)}
.gp-t-steam{--g-bg:var(--steam);--g-fg:var(--ink)}
.gp-t-sage{--g-bg:var(--sage);--g-fg:var(--ink)}
.gp-t-amber{--g-bg:var(--amber);--g-fg:var(--ink)}
.gp-t-terracotta{--g-bg:var(--terracotta);--g-fg:var(--off)}
.gp-t-terracotta-2{--g-bg:var(--terracotta-2);--g-fg:var(--off)}
.gp-t-umber{--g-bg:var(--umber);--g-fg:var(--off)}
.gp-t-umber-2{--g-bg:var(--umber-2);--g-fg:var(--off)}
[class*="gp-t-"]{background-color:var(--g-bg);color:var(--g-fg)}
.gp-t-terracotta .label,.gp-t-terracotta-2 .label,.gp-t-umber .label,.gp-t-umber-2 .label{color:rgba(251,247,238,.78)}
.gp .sr,.ip .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.page-guide .preview-tag,.page-info .preview-tag{left:auto;right:12px}

/* ---------- the guide: the hero band ---------- */
.gp-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(28px,4vw,64px) 0 clamp(36px,5vw,80px)}
.gp-numeral{position:absolute;z-index:0;left:clamp(8px,2vw,32px);top:clamp(-30px,-1.5vw,-10px);font-family:var(--font-display);font-style:italic;font-weight:200;font-size:clamp(160px,24vw,380px);line-height:.8;letter-spacing:-.06em;color:currentColor;opacity:.08;pointer-events:none;font-variation-settings:"opsz" 144,"SOFT" 100}
.gp-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,72px);align-items:end}
.gp-hero-copy{padding-bottom:clamp(8px,2vw,32px)}
.gp-kicker{display:flex;gap:10px;align-items:center}
.gp-hero h1{margin-top:clamp(18px,2vw,28px);font-size:clamp(46px,6.2vw,104px);line-height:.94;letter-spacing:-.035em;text-wrap:balance;font-optical-sizing:auto}
.gp-hero h1 .accent{font-variation-settings:"opsz" 144,"SOFT" 100}
.gp-stand{margin-top:clamp(18px,2vw,28px);max-width:46ch;font-family:var(--font-display);font-size:clamp(20px,1.8vw,26px);line-height:1.35;font-weight:340;text-wrap:pretty;font-variation-settings:"opsz" 36,"SOFT" 50}
.gp-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:clamp(20px,2.4vw,32px);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;opacity:.82}
.gp-meta span+span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin:0 14px 2px 0;vertical-align:middle;opacity:.7}

/* the stage: an arched niche cut into the band, the product standing on its plinth (the same plinth as the product page) */
.gp-stage{position:relative;isolation:isolate;overflow:hidden;height:clamp(420px,58vh,620px);border-radius:50% 50% var(--r-lg) var(--r-lg) / 26% 26% var(--r-lg) var(--r-lg);
  box-shadow:inset 0 0 0 1px rgba(42,29,21,.10),inset 0 30px 60px -30px rgba(42,29,21,.35);
  --pv-top:14%;--pv-floor:78%;--pv-side:14%;--pv-cap-x:24px;--pv-cap-y:20px;--plinth-y:78%}
.gp-hero.gp-t-umber-2 .gp-stage,.gp-hero.gp-t-terracotta .gp-stage{--g-bg:var(--plaster-2);--g-fg:var(--ink);background-color:var(--plaster-2);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 40px 80px -30px rgba(42,29,21,.45)}
.gp-hero.gp-t-amber .gp-stage{--g-bg:var(--cream);--g-fg:var(--ink);background-color:var(--cream);color:var(--ink)}
.gp-hero.gp-t-steam .gp-stage{--g-bg:var(--plaster);--g-fg:var(--ink);background-color:var(--plaster);color:var(--ink)}
.gp-stage .pv{position:absolute;inset:0;z-index:2}
.gp-stage .pv-still{filter:drop-shadow(0 26px 30px rgba(42,29,21,.28)) drop-shadow(0 2px 4px rgba(42,29,21,.14))}

/* ---------- the guide: the body ---------- */
.gp-body{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:clamp(32px,6vw,110px);padding-block:clamp(48px,6vw,96px) clamp(40px,5vw,72px)}
.gp-toc{position:sticky;top:100px;align-self:start}
.gp-toc ol{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px;counter-reset:toc}
.gp-toc li{counter-increment:toc}
.gp-toc a{display:grid;grid-template-columns:30px 1fr;gap:8px;padding:9px 0;border-top:1px solid rgba(42,29,21,.12);font-size:15px;line-height:1.35;font-weight:500;color:var(--ink-2);transition:color .2s}
.gp-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-display);font-style:italic;color:var(--terracotta);font-size:16px}
.gp-toc a:hover{color:var(--ink)}
.gp-article{min-width:0;max-width:820px}
.gp-sec{padding-top:clamp(36px,4vw,56px);margin-top:clamp(36px,4vw,56px);border-top:1px solid rgba(42,29,21,.14);scroll-margin-top:90px}
.gp-sec:first-child{padding-top:0;margin-top:0;border-top:0}
.gp-sec h2{display:flex;align-items:baseline;gap:16px;font-size:clamp(30px,3.2vw,48px);text-wrap:balance;margin-bottom:clamp(16px,2vw,24px)}
.gp-sec-n{flex:none;font-family:var(--font-sans);font-size:12px;letter-spacing:.11em;font-weight:700;color:var(--terracotta-2);transform:translateY(-.6em)}
.gp-p{max-width:62ch;font-size:19px;line-height:1.65;text-wrap:pretty}
.gp-p+.gp-p{margin-top:1em}
.gp-sec>*+*{margin-top:clamp(18px,2vw,26px)}
.gp-sec>h2+*{margin-top:0}
.gp-inline{font-weight:600;border-bottom:1.5px solid var(--terracotta);padding-bottom:1px}

/* the pull quote: only the client's own lines, from the ritual card */
.gp-quote{margin:clamp(28px,3vw,44px) 0;padding:clamp(26px,3vw,40px) clamp(24px,3vw,44px);border-radius:var(--r-lg);background:var(--plaster-2);position:relative;box-shadow:inset 3px 0 0 var(--terracotta)}
.gp-quote blockquote{margin:0}
.gp-quote p{font-family:var(--font-display);font-style:italic;font-weight:320;font-size:clamp(26px,2.8vw,40px);line-height:1.15;letter-spacing:-.015em;text-wrap:balance;font-variation-settings:"opsz" 144,"SOFT" 100}
.gp-quote p::before{content:"\201C";display:block;font-size:2.2em;line-height:.5;height:.36em;color:var(--terracotta)}
.gp-quote figcaption{margin-top:16px;font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}

/* what you need: small cards */
.gp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.gp-list li{position:relative;padding:16px 18px 16px 40px;border-radius:var(--r);background:var(--cream);box-shadow:inset 0 0 0 1px rgba(42,29,21,.08);font-size:17px;line-height:1.4;font-weight:500}
.gp-list li::before{content:"";position:absolute;left:18px;top:1.35em;width:8px;height:8px;border-radius:50%;background:var(--terracotta)}

/* the ritual's steps, each on its own ground (BRIEF-V7 2.1) */
.gp-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gp-step{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,32px);padding:clamp(22px,2.6vw,34px);border-radius:var(--r-lg);position:relative;overflow:hidden}
.gp-step.gp-t-plaster-2{box-shadow:inset 0 0 0 2px var(--terracotta)}
.gp-step-n{font-family:var(--font-display);font-style:italic;font-weight:280;font-size:clamp(56px,6vw,92px);line-height:.8;letter-spacing:-.04em;font-variation-settings:"opsz" 144,"SOFT" 100;min-width:1.3em}
.gp-step h3{font-size:clamp(24px,2.2vw,32px)}
.gp-step-line{margin-top:8px;font-size:18px;line-height:1.5;max-width:52ch}
.gp-step-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 0}
.gp-step-meta div{padding:12px 14px;border-radius:var(--r);background:rgba(255,250,240,.38);color:var(--ink)}
.gp-t-umber-2 .gp-step-meta div,.gp-t-terracotta .gp-step-meta div{background:rgba(251,247,238,.10);color:var(--off)}
.gp-step-meta dt{font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;opacity:.8}
.gp-step-meta dd{margin:4px 0 0;font-size:16px;line-height:1.35}

/* the Nila mask: seven steps on one lit plaster panel */
.gp-mask{overflow:hidden;list-style:none;margin:0;padding:clamp(22px,2.6vw,34px);border-radius:var(--r-lg);background-color:var(--plaster-2);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px clamp(18px,2.4vw,32px)}
.gp-mask li{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:14px 0;border-top:1px solid rgba(42,29,21,.12)}
.gp-mask li:nth-child(-n+2){border-top:0}
.gp-mask-n{font-family:var(--font-display);font-style:italic;font-size:36px;line-height:.9;color:var(--terracotta);font-variation-settings:"opsz" 144,"SOFT" 100}
.gp-mask h3{font-size:22px}
.gp-mask p{margin-top:4px;font-size:16px;line-height:1.5}

/* how to use (one product) */
.gp-howto{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gp-howto li{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:baseline;padding:16px 20px;border-radius:var(--r);background:var(--cream);box-shadow:inset 0 0 0 1px rgba(42,29,21,.08)}
.gp-howto-n{font-family:var(--font-display);font-style:italic;font-size:34px;line-height:1;color:var(--terracotta)}
.gp-howto p{font-size:18px;line-height:1.5}

/* the stain card (BRIEF-V7 2.2 and 6.8), the same copy as the product pages */
.gp-stain{position:relative;overflow:hidden;padding:clamp(24px,3vw,38px);border-radius:var(--r-lg);background-color:var(--terracotta);color:var(--off)}
.gp-stain-turmeric{background-color:var(--amber);color:var(--ink)}
.gp-stain-dot{display:block;width:10px;height:10px;border-radius:50%;margin-bottom:16px;background:var(--off);box-shadow:0 0 0 6px rgba(251,247,238,.14)}
.gp-stain-nila .gp-stain-dot{background:var(--nila)} /* the Nila blue as an object colour: a 10 px swatch */
.gp-stain-h{font-family:var(--font-display);font-style:italic;font-weight:320;font-size:clamp(26px,2.6vw,36px);line-height:1.08;font-variation-settings:"opsz" 144,"SOFT" 100}
.gp-stain-lines{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;font-size:17px;line-height:1.5;max-width:56ch}

/* what the research measured: Measured, Not claimed, Sources */
.gp-res{overflow:hidden;display:grid;grid-template-columns:1.25fr 1fr;gap:18px clamp(20px,3vw,40px);padding:clamp(24px,3vw,40px);border-radius:var(--r-lg)}
.gp-res+.gp-res{margin-top:12px}
.gp-res-name{grid-column:1 / -1;font-size:13px;margin:0}
.gp-res .label{margin-bottom:8px}
.gp-res-measured{font-family:var(--font-display);font-size:clamp(20px,1.8vw,24px);line-height:1.32;font-weight:350;font-variation-settings:"opsz" 36,"SOFT" 50}
.gp-res-not p:last-child{font-size:16px;line-height:1.55}
.gp-res-not{padding-left:clamp(18px,2vw,28px);border-left:1px solid rgba(42,29,21,.2)}
.gp-t-umber-2 .gp-res-not{border-left-color:rgba(251,247,238,.24)}
.gp-res-src{grid-column:1 / -1;padding-top:14px;border-top:1px solid rgba(42,29,21,.18)}
.gp-t-umber-2 .gp-res-src{border-top-color:rgba(251,247,238,.22)}
.gp-res-src ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.gp-res-src a{font-size:14px;line-height:1.5;text-decoration:underline;text-underline-offset:3px;text-decoration-color:currentColor;text-decoration-thickness:1px}

/* ---------- the guide: related products and more guides ---------- */
.gp-related{padding:clamp(48px,6vw,96px) 0;background:var(--plaster-2)}
.gp-more{padding:clamp(48px,6vw,96px) 0 clamp(64px,8vw,120px)}
.gp-band-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px;margin-bottom:clamp(22px,3vw,36px)}
.gp-band-head .label{width:100%}
.gp-band-head h2{font-size:clamp(34px,4vw,60px);text-wrap:balance}
.gp-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gp-tile{position:relative;display:flex;flex-direction:column;height:100%;padding:18px 20px 20px;border-radius:var(--r-lg);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.gp-tile.gp-t-plaster{box-shadow:inset 0 0 0 1px rgba(42,29,21,.10)}
.gp-tile.gp-t-plaster-2{box-shadow:inset 0 0 0 1.5px var(--terracotta)}
@media (hover:hover) and (pointer:fine){.gp-tile:hover{transform:translateY(-4px);box-shadow:0 24px 40px -24px rgba(42,29,21,.55)}}
.gp-plate{position:relative;display:flex;align-items:flex-end;justify-content:center;height:210px;margin-bottom:16px}
.gp-plate::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:1.5px;background:currentColor;opacity:.2}
.gp-plate-cut{height:186px;width:auto;max-width:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 16px 18px rgba(42,29,21,.28)) drop-shadow(0 2px 3px rgba(42,29,21,.12))}
.gp-tile-name{font-weight:600;font-size:16px;line-height:1.3}
.gp-tile-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.gp-tile-price{font-family:var(--font-display);font-size:26px;line-height:1.1;font-weight:350;font-variation-settings:"opsz" 144,"SOFT" 40}
.gp-arr{flex:none;transition:transform .3s var(--ease)}
.gp-tile:hover .gp-arr,.gp-card:hover .gp-arr{transform:translateX(4px)}
.gp-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gp-card{position:relative;display:flex;flex-direction:column;gap:14px;height:100%;min-height:340px;padding:clamp(24px,2.6vw,34px);border-radius:var(--r-lg);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
@media (hover:hover) and (pointer:fine){.gp-card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -24px rgba(42,29,21,.55)}}
.gp-card-n{font-family:var(--font-display);font-style:italic;font-weight:240;font-size:72px;line-height:.8;letter-spacing:-.04em;opacity:.55;font-variation-settings:"opsz" 144,"SOFT" 100}
.gp-card-h{font-family:var(--font-display);font-size:clamp(28px,2.6vw,38px);line-height:1.02;letter-spacing:-.02em;font-weight:360;text-wrap:balance;font-variation-settings:"opsz" 144,"SOFT" 40}
.gp-card-s{font-size:16px;line-height:1.5;opacity:.9}
.gp-card-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-weight:600;border-bottom:1.5px solid currentColor;align-self:flex-start;padding-bottom:2px}

/* ---------- the information pages ---------- */
.ip-head{padding:clamp(36px,5vw,80px) 0 clamp(24px,3vw,40px)}
.ip-head h1{margin-top:14px;font-size:clamp(46px,6vw,96px);line-height:.95;letter-spacing:-.035em;text-wrap:balance}
.ip-head h1 .accent{font-variation-settings:"opsz" 144,"SOFT" 100}
.ip-intro{margin-top:18px;max-width:46ch;font-family:var(--font-display);font-size:clamp(20px,1.8vw,26px);line-height:1.35;font-weight:340;text-wrap:pretty}
.ip-draft{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:24px;max-width:62ch;padding:14px 18px;border-radius:var(--r);background:var(--cream);box-shadow:inset 3px 0 0 var(--amber),inset 0 0 0 1px rgba(42,29,21,.08);font-size:16px;line-height:1.45}
.ip-draft-k{font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;padding:4px 8px;border-radius:var(--r-sm);background:var(--ink);color:var(--off)}
.ip-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);grid-template-areas:"article side";gap:clamp(32px,6vw,96px);padding-bottom:clamp(64px,8vw,120px);align-items:start}
.ip-article{grid-area:article;max-width:62ch}
.ip-side{grid-area:side;position:sticky;top:100px;padding:clamp(24px,2.6vw,34px);border-radius:var(--r-lg);overflow:hidden}
.ip-facts{margin:10px 0 0;display:grid}
.ip-fact{padding:14px 0;border-top:1px solid rgba(42,29,21,.16)}
.gp-t-umber-2 .ip-fact,.gp-t-terracotta .ip-fact{border-top-color:rgba(251,247,238,.2)}
.ip-fact:first-child{border-top:0}
.ip-fact dt{font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;opacity:.82}
.ip-fact dd{margin:6px 0 0;font-family:var(--font-display);font-size:21px;line-height:1.25;font-weight:360;font-variation-settings:"opsz" 36,"SOFT" 50}
.ip-fact dd .tbc{font-family:var(--font-sans);font-size:14px}
.ip-more{margin-top:22px;padding-top:18px;border-top:1.5px solid currentColor}
.ip-more ul{list-style:none;margin:8px 0 0;padding:0;display:grid}
.ip-more a{display:block;padding:8px 0;font-weight:600;font-size:16px}
.ip-more a:hover{text-decoration:underline;text-underline-offset:4px}
.ip-sec+.ip-sec{margin-top:clamp(32px,3.6vw,48px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(42,29,21,.14)}
.ip-sec h2{font-size:clamp(28px,2.8vw,40px);margin-bottom:16px;text-wrap:balance}
.ip-sec p{font-size:18px;line-height:1.65;text-wrap:pretty}
.ip-sec p+p{margin-top:1em}
.ip-list{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.ip-list li{position:relative;padding-left:22px;font-size:18px;line-height:1.55}
.ip-list li::before{content:"";position:absolute;left:2px;top:.68em;width:8px;height:8px;border-radius:50%;background:var(--terracotta)}
.ip-inline{font-weight:600;border-bottom:1.5px solid var(--terracotta);padding-bottom:1px}
.gp-t-umber-2 .ip-inline,.gp-t-terracotta .ip-inline{border-bottom-color:currentColor}

/* the placeholder for a fact we do not hold yet: impossible to miss, impossible to mistake for copy */
.tbc{display:inline;padding:1px 7px;border-radius:var(--r-sm);font-size:.86em;font-style:normal;font-weight:600;letter-spacing:.01em;white-space:normal;
  background:rgba(208,138,46,.20);box-shadow:inset 0 0 0 1px rgba(158,82,50,.55);color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.gp-t-umber-2 .tbc,.gp-t-terracotta .tbc{background:rgba(251,247,238,.14);box-shadow:inset 0 0 0 1px rgba(251,247,238,.55)}

/* ---------- the 404 ---------- */
.page-404{background:var(--umber-2)}
.nf{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:grid;place-items:center;padding:48px 16px;color:var(--off);
  background:radial-gradient(90% 80% at 28% 18%,var(--umber) 0%,var(--umber-2) 52%,var(--ink) 100%)}
.nf-inner{position:relative;z-index:2;width:min(100%,880px);text-align:center;display:grid;justify-items:center}
.nf-home img{height:64px;width:auto}
.nf-label{margin-top:clamp(36px,6vh,64px);color:rgba(251,247,238,.78)}
.nf-h{margin-top:16px;font-size:clamp(44px,7.4vw,112px);line-height:.95;letter-spacing:-.035em;text-wrap:balance}
.nf-h .accent{font-variation-settings:"opsz" 144,"SOFT" 100}
.nf-sub{margin-top:20px;max-width:40ch;font-size:18px;line-height:1.5;color:rgba(251,247,238,.85)}
.nf-links{list-style:none;margin:clamp(28px,4vh,40px) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 28px}
.nf-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;border-bottom:1.5px solid var(--terracotta)}
.nf-btn{min-height:52px}
.nf-steam{position:absolute;inset:0;z-index:1;pointer-events:none}
.nf-steam span{position:absolute;bottom:-20%;width:42vw;height:60vh;border-radius:50%;background:radial-gradient(closest-side,rgba(251,247,238,.16),transparent);filter:blur(24px);opacity:.7}
.nf-steam span:nth-child(1){left:6%}
.nf-steam span:nth-child(2){left:32%;bottom:-30%;width:36vw}
.nf-steam span:nth-child(3){left:58%;bottom:-25%}
html.lx-live .nf-steam span{animation:nf-rise 14s linear infinite}
html.lx-live .nf-steam span:nth-child(2){animation-duration:17s;animation-delay:-6s}
html.lx-live .nf-steam span:nth-child(3){animation-duration:15s;animation-delay:-11s}
@keyframes nf-rise{0%{transform:translateY(20%) scale(.9);opacity:0}25%{opacity:.75}100%{transform:translateY(-70%) scale(1.25);opacity:0}}
.page-404 .preview-tag{left:auto;right:12px;bottom:12px}

/* ---------- the footer (markup in footer.mjs; the ground is base.css and L's light) ---------- */
.site-footer .ft-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;padding-bottom:clamp(28px,3vw,44px);margin-bottom:clamp(28px,3vw,44px);border-bottom:1px solid rgba(251,247,238,.18)}
.site-footer .ft-home{display:block;padding:0}
.site-footer .ft-top .mark{height:52px;margin:0}
.site-footer .ft-line{font-family:var(--font-display);font-size:clamp(24px,2.6vw,38px);line-height:1.1;font-weight:340;letter-spacing:-.015em;max-width:24ch;text-wrap:balance}
.site-footer .ft-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
.site-footer .ft-col ul{list-style:none;margin:0;padding:0}
.site-footer .ft-col a{display:inline-flex;align-items:center;min-height:36px;padding:2px 0;font-size:16px}
.site-footer .ft-col a:hover{text-decoration:underline;text-underline-offset:4px}
.site-footer .ft-handle{opacity:.72;margin-left:6px}
.site-footer .fine a{display:inline;padding:0;text-decoration:underline;text-underline-offset:3px}

/* ---------- tablets and phones ---------- */
@media (max-width:1100px){
  .gp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .gp-body{grid-template-columns:1fr;gap:28px}
  .gp-toc{position:relative;top:auto;padding:18px 20px;border-radius:var(--r-lg);background:var(--plaster-2)}
  .ip-grid{grid-template-columns:1fr;grid-template-areas:"side" "article"}
  .ip-side{position:relative;top:auto}
  .gp-cards{grid-template-columns:1fr}
  .gp-card{min-height:0}
}
@media (max-width:760px){
  .gp-hero{padding-top:20px}
  .gp-hero-grid{grid-template-columns:1fr;gap:24px}
  .gp-hero-copy{padding-bottom:0}
  .gp-hero h1{font-size:clamp(42px,12vw,60px)}
  .gp-stage{height:380px;--pv-top:16%;--pv-floor:80%;--pv-side:12%;--pv-cap-x:18px;--pv-cap-y:14px;--plinth-y:80%}
  .gp-numeral{font-size:46vw;top:-8px}
  .gp-p,.ip-sec p,.ip-list li{font-size:17px}
  .gp-step{grid-template-columns:1fr;gap:6px}
  .gp-step-n{font-size:56px}
  .gp-step-meta{grid-template-columns:1fr}
  .gp-mask{grid-template-columns:1fr}
  .gp-mask li:nth-child(2){border-top:1px solid rgba(42,29,21,.12)}
  .gp-res{grid-template-columns:1fr}
  .gp-res-not{padding-left:0;border-left:0;padding-top:14px;border-top:1px solid rgba(42,29,21,.2)}
  .gp-t-umber-2 .gp-res-not{border-top-color:rgba(251,247,238,.24)}
  .gp-tiles{grid-template-columns:1fr;gap:10px}
  .gp-tile{flex-direction:row;align-items:center;gap:16px;padding:12px 18px 12px 12px}
  .gp-plate{width:96px;height:96px;margin:0;flex:none}
  .gp-plate-cut{height:84px}
  .gp-tile-name{flex:1}
  .gp-tile-row{margin:0;padding:0}
  .gp-quote{padding:22px 20px}
  .site-footer .ft-cols{grid-template-columns:1fr 1fr;gap:28px 20px}
  .site-footer .ft-top .mark{height:44px}
  .page-guide .preview-tag,.page-info .preview-tag,.page-404 .preview-tag{right:10px}
  .page-404 .preview-tag{bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  .gp-tile,.gp-card,.gp-arr{transition:none}
  html.lx-live .nf-steam span{animation:none}
}
@media print{
  .gp-toc,.gp-related,.gp-more,.site-footer,.site-header,.phone-bar,.preview-tag{display:none}
}