/* Blankspace guides and calculators: static reading pages generated by tools/seo/guides.mjs.
   The masthead and footer follow the app's (assets/js/ui.js shellHTML). Drenched fields of dark
   green, lemon and black, one Pollock pour per page, cut paper kept to reserved corners and never
   over words. Cobalt is a small accent only. Nothing that carries text is ever rotated. */

:root {
  --emerald: #134e3a; --emerald-deep: #0d3a2b; --lemon: #f6c928; --black: #121212; --white: #ffffff;
  --cobalt: #1e3fa6; --paper: #f7f3ea; --paper-deep: #eee7d8; --rule: #d9d1bf; --meta: #5d584f;
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --read: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --ui: 'Inter', system-ui, sans-serif;
  --wrap: 1320px; --pad: clamp(16px, 4vw, 56px);
  --head: 122px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
html.s-lock { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--black); font: 400 19px/1.65 var(--read); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.sheet-emerald :focus-visible, .sheet-black :focus-visible { outline-color: var(--lemon); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); position: relative; }
.g-skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--black); color: var(--white); padding: 10px 16px; font: 500 14px var(--ui); }
.g-skip:focus { left: 8px; }

/* ---------- gouache sheets ---------- */
.sheet-emerald { background: var(--emerald) url(/assets/seo/sheet-emerald.webp) center / cover; color: var(--white); }
.sheet-lemon, .sheet-lemon-soft { background: var(--lemon) url(/assets/seo/sheet-lemon.webp) center / cover; color: var(--black); }
.sheet-black { background: var(--black) url(/assets/seo/sheet-black.webp) center / cover; color: var(--white); }
.cut { position: absolute; pointer-events: none; user-select: none; height: auto; }

/* ---------- small labels: always one line ---------- */
.g-label, .g-kicker, .g-crumbs, .g-meta, .g-eyebrow, .g-card-go {
  font: 600 11.5px/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase; margin: 0;
}
.g-eyebrow { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =================================================================== masthead (as the app) */
.s-head { position: relative; z-index: 20; background: var(--white); color: var(--black); border-bottom: 1px solid rgba(20, 20, 20, .08); }
.s-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px; padding: 0 clamp(16px, 2.4vw, 34px); }
.s-left { display: flex; align-items: center; gap: 8px; }
.s-houses { display: flex; gap: 22px; }
.s-houses a, .s-rooms a { font: 600 11.5px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 8px 0; border-bottom: 1.5px solid transparent; }
.s-houses a:hover, .s-rooms a:hover, .s-rooms a[aria-current] { border-bottom-color: var(--emerald); }
.s-logo { justify-self: center; font: 400 30px/1 var(--display); letter-spacing: .02em; color: var(--emerald); text-decoration: none; padding: 7px 0; }
.s-icons { justify-self: end; display: flex; align-items: center; gap: 2px; }
.s-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--black); text-decoration: none; }
.s-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.s-icon:hover { color: var(--emerald); }
.s-burger { display: none; margin-left: -10px; }
.s-rooms { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px clamp(18px, 2.4vw, 34px); padding: 4px var(--pad) 12px; }
.s-rooms a[aria-current] { border-bottom-width: 2px; }

.s-menu { position: fixed; inset: 0; z-index: 60; background: var(--white); color: var(--black); overflow-y: auto; padding: 0 20px 40px; }
.s-menu-head { display: flex; justify-content: space-between; align-items: center; min-height: 64px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; }
.s-menu-head .s-logo { font-size: 24px; }
.s-close { margin-right: -10px; }
.s-menu-body { display: flex; flex-direction: column; }
.s-m-big { font: 400 30px/1.15 var(--display); text-decoration: none; padding: 8px 0; color: var(--emerald); }
.s-m-label { font: 600 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--meta); margin: 26px 0 6px; }
.s-m-link { font: 500 17px/1.2 var(--ui); text-decoration: none; padding: 12px 0; border-bottom: 1px solid #eee7d8; }
.s-m-link[aria-current] { color: var(--emerald); font-weight: 600; }
.s-m-sub { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; font: 500 14px var(--ui); }
.s-m-sub a { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 980px) {
  .s-top { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 60px; padding: 0 10px; }
  .s-houses, .s-rooms, .s-wide { display: none; }
  .s-burger { display: inline-grid; margin-left: 0; }
  .s-logo { font-size: 24px; }
}

/* =================================================================== hero */
.g-hero { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 76px) 0 clamp(44px, 5.5vw, 84px); isolation: isolate; }
.g-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.g-hero-copy { position: relative; z-index: 2; min-width: 0; }
.g-crumbs { display: flex; gap: 10px; opacity: .85; margin-bottom: 24px; }
.g-crumbs a { text-decoration: none; }
.g-crumbs a:hover { text-decoration: underline; }
.g-kicker { margin-bottom: 16px; }
.g-hero h1 { font: 500 clamp(40px, 5.2vw, 78px)/1.02 var(--display); letter-spacing: -.025em; margin: 0 0 24px; text-wrap: balance; }
.g-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; opacity: .88; letter-spacing: .1em; font-size: 11px; }
.g-hub-dek { font: 400 clamp(19px, 1.6vw, 23px)/1.5 var(--read); max-width: 600px; margin: 0; }
/* the photograph's cut window; cut paper only sits on its corners, never over words */
.g-hero-art { position: relative; z-index: 1; }
.g-hero-win { margin: 0; aspect-ratio: 4 / 3.3; -webkit-mask: var(--win) center / 100% 100% no-repeat; mask: var(--win) center / 100% 100% no-repeat; background: var(--paper-deep); }
.g-hero-win img { width: 100%; height: 100%; object-fit: cover; }
.g-art-a { width: 21%; right: -3%; top: 3%; z-index: 2; }
.g-art-b { width: 17%; left: 4%; bottom: -5%; z-index: 2; }

.g-pour { height: clamp(52px, 7vw, 108px); background: #cfc2a6 url(/assets/seo/pour-band.webp) center / cover; border-top: 3px solid var(--black); border-bottom: 3px solid var(--black); }

/* =================================================================== short answer */
.g-short { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); margin-top: clamp(40px, 5vw, 72px); margin-bottom: clamp(48px, 6vw, 88px); align-items: stretch; }
.g-answer { background: var(--white); border: 3px solid var(--black); padding: clamp(22px, 3vw, 40px); box-shadow: 8px 8px 0 var(--emerald); }
.g-answer .g-label { color: var(--emerald); margin-bottom: 14px; }
.g-answer-text { font: 400 clamp(20px, 1.8vw, 25px)/1.5 var(--read); margin: 0; }
.g-takeaways { padding: clamp(22px, 2.6vw, 34px); border: 3px solid var(--black); }
.g-takeaways .g-label { margin-bottom: 14px; }
.g-takeaways ol { margin: 0; padding: 0; list-style: none; counter-reset: k; }
.g-takeaways li { counter-increment: k; position: relative; padding: 10px 0 10px 40px; border-top: 2px solid var(--black); font: 500 16px/1.45 var(--ui); }
.g-takeaways li::before { content: counter(k); position: absolute; left: 0; top: 8px; font: 600 22px/1 var(--display); }
.g-takeaways p { font: 400 16px/1.55 var(--ui); margin: 0 0 12px; }
.g-takeaways p:last-child { margin-bottom: 0; }

/* =================================================================== body + contents */
.g-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); padding-bottom: clamp(56px, 7vw, 104px); align-items: start; }
.g-toc { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; min-width: 0; }
.g-toc > summary { display: none; }
.g-toc .g-label { color: var(--emerald); margin-bottom: 12px; }
.g-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); }
.g-toc li a { display: block; margin-left: -2px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font: 400 14.5px/1.4 var(--ui); text-decoration: none; color: var(--meta); transition: color .2s, border-color .2s; }
.g-toc li a:hover { color: var(--black); }
.g-toc li a[aria-current] { color: var(--black); font-weight: 600; border-left-color: var(--emerald); background: linear-gradient(90deg, rgba(246, 201, 40, .38), transparent 80%); }

.g-prose { max-width: 740px; min-width: 0; }
.g-prose > section { scroll-margin-top: 24px; }
.g-prose > section + section { margin-top: clamp(40px, 4vw, 60px); }
.g-prose h2 { font: 500 clamp(28px, 2.8vw, 40px)/1.1 var(--display); letter-spacing: -.02em; margin: 0 0 18px; text-wrap: balance; }
.g-numbered { counter-reset: sec; }
.g-numbered > section { counter-increment: sec; }
.g-numbered h2::before { content: counter(sec); display: block; font: 600 12px/1 var(--ui); letter-spacing: .14em; color: var(--cobalt); margin-bottom: 12px; }
.g-prose h3 { font: 600 22px/1.25 var(--display); margin: 30px 0 8px; }
.g-prose p { margin: 0 0 18px; }
.g-prose ul, .g-prose ol { padding-left: 1.2em; margin: 0 0 20px; }
ul { list-style: none; }
ul li::marker { content: none; }
.g-prose ul { padding-left: 0; }
.g-prose ul > li { padding: 9px 0; border-top: 1px solid rgba(18, 18, 18, .18); }
.g-prose ul > li:last-child { border-bottom: 1px solid rgba(18, 18, 18, .18); }
.g-prose li { margin: 6px 0; }
.g-prose li::marker { color: var(--emerald); font-weight: 600; }
.g-prose strong { font-weight: 600; }
.g-prose a { color: var(--emerald); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.g-prose a:hover { color: var(--black); }

/* tables scroll sideways on a phone, with a fade that says so */
.g-tablewrap { position: relative; margin: 6px 0 26px; }
.g-table { overflow-x: auto; border: 3px solid var(--black); background: var(--white); -webkit-overflow-scrolling: touch; }
.g-table table { width: 100%; border-collapse: collapse; font: 400 15px/1.45 var(--ui); min-width: 520px; }
.g-table th { background: var(--emerald); color: var(--white); text-align: left; padding: 12px 14px; font-weight: 600; font-size: 13px; letter-spacing: .04em; }
.g-table td { padding: 11px 14px; border-top: 1px solid var(--rule); vertical-align: top; }
.g-table tr:nth-child(even) td { background: #faf7f0; }
.g-tablewrap::after { content: ''; position: absolute; top: 3px; right: 3px; bottom: 3px; width: 56px; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 85%); opacity: 0; transition: opacity .25s; }
.g-tablewrap.g-scrolls:not(.at-end)::after { opacity: 1; bottom: 33px; }
.g-table-hint { display: none; font: 500 12px/1 var(--ui) !important; letter-spacing: .08em; color: var(--meta); margin: 10px 0 0 !important; }
.g-scrolls .g-table-hint { display: block; }

/* figures inside the reading column */
.g-fig { margin: 30px 0 8px; }
.g-fig figcaption { font: 400 14px/1.5 var(--ui); color: var(--meta); margin-top: 10px; max-width: 62ch; }
.g-fig figcaption a { color: var(--black); }
.g-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-deep); }
.g-dia svg { display: block; width: 100%; height: auto; background: var(--white); border: 3px solid var(--black); }
.g-dia .d-floor { stroke: var(--black); stroke-width: 3; }
.g-dia .d-piece { fill: var(--emerald); }
.g-dia .d-accent { fill: var(--lemon); stroke: var(--black); stroke-width: 2; }
.g-dia .d-leg { fill: var(--black); }
.g-dia .d-line { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.g-dia .d-room { fill: #fbf8f1; stroke: var(--black); stroke-width: 4; }
.g-dia .d-rug { fill: var(--lemon); }
.g-dia .d-chair { fill: var(--black); }
.g-dia .d-clear { fill: rgba(30, 63, 166, .06); stroke: var(--cobalt); stroke-width: 2; stroke-dasharray: 8 6; }
.g-dia .d-walk { stroke: var(--cobalt); stroke-width: 2; stroke-dasharray: 8 6; }
.g-dia .d-dim { fill: none; stroke: var(--cobalt); stroke-width: 2; }
.g-dia text { font-family: var(--ui); }
.g-dia .d-lab { font-size: 14px; font-weight: 600; fill: var(--black); }
.g-dia .d-val { font-size: 14px; fill: var(--cobalt); font-weight: 500; }
.g-dia .d-tag { font-size: 14px; font-weight: 600; fill: var(--white); letter-spacing: .06em; }
.g-dia .d-accent + .d-tag { fill: var(--black); }

/* =================================================================== FAQ */
.g-faq { padding: clamp(56px, 7vw, 104px) 0; }
.g-faq-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(24px, 5vw, 88px); align-items: start; }
.g-faq h2 { font: 500 clamp(34px, 4vw, 58px)/1.02 var(--display); letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.g-faq details { border-top: 2px solid currentColor; }
.g-faq details:last-of-type { border-bottom: 2px solid currentColor; }
.g-faq summary { list-style: none; cursor: pointer; padding: 20px 52px 20px 0; position: relative; font: 500 clamp(19px, 1.7vw, 23px)/1.3 var(--display); }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: '+'; position: absolute; right: 6px; top: 14px; font: 300 34px/1 var(--ui); transition: transform .3s; }
.g-faq details[open] summary::after { transform: rotate(45deg); }
.g-faq details p { margin: 0 0 24px; max-width: 760px; font-size: 18px; }

/* =================================================================== sections, cards */
.g-section { padding-top: clamp(52px, 6.5vw, 96px); padding-bottom: clamp(8px, 2vw, 24px); }
.g-section:last-of-type { padding-bottom: clamp(56px, 7vw, 104px); }
.g-h2-big { font: 500 clamp(32px, 3.6vw, 52px)/1.04 var(--display); letter-spacing: -.025em; margin: 0 0 26px; text-wrap: balance; }

/* six-column grid; the generator gives each card a span so every row fills */
.g-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.c-w2 { grid-column: span 2; } .c-w3 { grid-column: span 3; } .c-w6 { grid-column: 1 / -1; }
.g-card > a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 0 24px 22px; background: var(--white); border: 1px solid var(--rule); text-decoration: none; transition: border-color .2s, transform .3s; }
.g-card > a:hover { border-color: var(--black); }
.g-card-bar { display: block; height: 6px; margin: 0 -24px 14px; }
.bar-emerald { background: var(--emerald); } .bar-lemon { background: var(--lemon); } .bar-cobalt { background: var(--cobalt); } .bar-black { background: var(--black); }
.g-card .g-eyebrow { color: var(--emerald); }
.g-card-title { font: 500 clamp(19px, 1.5vw, 22px)/1.22 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.g-card-dek { font: 400 15.5px/1.5 var(--read); color: #3b3832; }
.g-card-go { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 10px; }
.g-arrow { width: 20px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s; flex: none; }
a:hover > .g-card-go .g-arrow, a:hover .g-card-go .g-arrow { transform: translateX(4px); }
.c-w6 .g-card-dek, .c-w3 .g-card-dek { max-width: 60ch; }

.g-card-tool > a { padding-top: 0; }
.g-card-art { display: block; margin: 0 -24px 6px; padding: 18px 24px; }
.g-toolart { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
.g-toolart .a-wall { fill: rgba(255, 255, 255, .14); }
.g-toolart .a-door { fill: var(--white); stroke: var(--black); stroke-width: 3; }
.g-toolart .a-sofa { fill: var(--lemon); stroke: var(--black); stroke-width: 2; }
.g-toolart .a-dim, .g-toolart .a-floor { fill: none; stroke: currentColor; stroke-width: 2; }
.g-toolart .a-room { fill: var(--white); stroke: var(--black); stroke-width: 3; }
.g-toolart .a-rug { fill: var(--lemon); stroke: var(--black); stroke-width: 2; }
.g-toolart .a-table { fill: var(--emerald); stroke: var(--black); stroke-width: 2; }
.g-toolart .a-chair { fill: var(--black); }
.g-toolart .a-clear { fill: rgba(255, 255, 255, .9); stroke: var(--cobalt); stroke-width: 2; stroke-dasharray: 6 4; }
.sheet-lemon .g-toolart .a-sofa, .sheet-lemon .g-toolart .a-rug { fill: var(--white); }

/* the lead guide of each section: a full row, photograph in a cut window */
.g-lead { grid-column: 1 / -1; }
.g-lead > a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(24px, 3.4vw, 48px); text-decoration: none; min-height: 100%; }
.g-lead-copy { display: flex; flex-direction: column; gap: 14px; }
.g-lead-title { font: 500 clamp(28px, 2.8vw, 40px)/1.08 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.g-lead-dek { font: 400 18px/1.55 var(--read); max-width: 52ch; }
.g-lead .g-card-go { border-top-color: currentColor; margin-top: 8px; max-width: 280px; }
.g-lead-win { display: block; aspect-ratio: 4 / 3; -webkit-mask: var(--win) center / 100% 100% no-repeat; mask: var(--win) center / 100% 100% no-repeat; background: rgba(255, 255, 255, .12); }
.g-lead-win img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.25, .8, .25, 1); }
.g-lead > a:hover img { transform: scale(1.04); }

/* products */
.g-prods { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.g-n1 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.g-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-prod a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; height: 100%; }
.g-prod-win { display: block; position: relative; aspect-ratio: 1; margin-bottom: 10px; overflow: hidden; }
.g-prod-win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.25, .8, .25, 1); }
.g-prod a:hover img { transform: scale(1.05); }
.g-prod .g-eyebrow { color: var(--meta); }
.g-prod-name { font: 500 26px/1.05 var(--display); letter-spacing: -.02em; }
.g-prod-price { font: 500 15px var(--ui); }

/* =================================================================== call to action, inside the gutter */
.g-cta-wrap { margin-top: clamp(48px, 6vw, 88px); }
.g-cta { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(28px, 3.4vw, 48px); }
.g-cta-art { position: relative; display: block; width: 96px; height: 96px; }
.g-cta-cut { position: static; width: 100%; }
.g-cta h2 { font: 500 clamp(28px, 2.8vw, 40px)/1.08 var(--display); margin: 0 0 8px; }
.g-cta p { margin: 0; opacity: .9; max-width: 60ch; font-size: 18px; }
.g-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; background: var(--white); color: var(--black); font: 600 12.5px var(--ui); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border: 2px solid var(--white); transition: background .25s, color .25s; white-space: nowrap; }
.g-btn:hover { background: transparent; color: var(--white); }
.g-btn-dark { background: var(--black); color: var(--white); border-color: var(--black); align-self: flex-start; }
a:hover .g-btn-dark, .g-btn-dark:hover { background: var(--emerald); border-color: var(--emerald); color: var(--white); }

/* =================================================================== guides index */
.g-hub-hero h1 { font-size: clamp(48px, 6.6vw, 104px); max-width: 10ch; }
.g-finder { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px 28px; align-items: center; padding-top: clamp(28px, 3.4vw, 44px); padding-bottom: 4px; }
.g-search { position: relative; display: block; }
.g-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--black); stroke-width: 1.6; pointer-events: none; }
.g-search input { width: 100%; min-height: 48px; padding: 0 14px 0 42px; font: 400 16px var(--ui); color: var(--black); background: var(--white); border: 2px solid var(--black); border-radius: 0; }
.g-search input:focus { outline: 3px solid var(--cobalt); outline-offset: 0; }
.g-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.g-chip { min-height: 40px; padding: 0 16px; font: 500 13.5px var(--ui); background: var(--white); color: var(--black); border: 1.5px solid var(--black); cursor: pointer; white-space: nowrap; }
.g-chip:hover { background: var(--paper-deep); }
.g-chip[aria-pressed="true"] { background: var(--emerald); border-color: var(--emerald); color: var(--white); }
.g-hub-group { padding-top: clamp(44px, 5.5vw, 80px); }
.g-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--black); margin-bottom: 22px; }
.g-group-head .g-h2-big { margin-bottom: 14px; }
.g-group-head p { margin: 0; font: 500 13px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--meta); white-space: nowrap; }
.g-group-head a { color: var(--black); }
.g-none { font: 400 18px var(--ui); padding-top: 40px; }
main > .g-hub-group:last-of-type, .g-hub main { padding-bottom: clamp(56px, 7vw, 104px); }

/* =================================================================== calculators */
.g-tool-hero { padding: clamp(28px, 3.6vw, 52px) 0 clamp(32px, 4vw, 60px); }
.g-tool-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; align-items: center; }
.g-tool-hero h1 { font-size: clamp(36px, 4.6vw, 66px); max-width: 18ch; margin-bottom: 16px; }
.g-hero-mark { position: relative; }
.g-hero-mark .g-toolart { max-width: 240px; }
.g-mark-cut { position: static; width: 160px; margin-left: auto; }
.g-tool-hero.sheet-black .g-toolart .a-door, .g-tool-hero.sheet-emerald .g-toolart .a-door { stroke: var(--black); }

.t-app { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(18px, 3vw, 40px); align-items: start; padding-top: clamp(28px, 3.4vw, 48px); padding-bottom: clamp(32px, 4vw, 56px); }
.t-form { background: var(--white); border: 3px solid var(--black); padding: clamp(20px, 2.6vw, 34px); }
.t-form fieldset { border: 0; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; min-width: 0; }
.t-form fieldset:last-child { margin-bottom: 0; }
.t-form legend { grid-column: 1 / -1; font: 600 11.5px/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--emerald); margin-bottom: 10px; padding: 0; }
.t-field { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; font: 400 14px/1.35 var(--ui); color: var(--meta); min-width: 0; }
.t-input { position: relative; display: block; }
.t-field input, .t-field select { width: 100%; min-height: 48px; font: 500 19px/1.2 var(--ui); color: var(--black); background: var(--paper); border: 0; border-bottom: 2px solid var(--black); padding: 10px 12px 8px; border-radius: 0; }
.t-input input { padding-right: 44px; -moz-appearance: textfield; }
.t-input input::-webkit-outer-spin-button, .t-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.t-input em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 500 14px var(--ui); font-style: normal; color: var(--meta); pointer-events: none; }
.t-field select { font-size: 16px; }
.t-field input:focus, .t-field select:focus { outline: 3px solid var(--cobalt); outline-offset: 0; background: #fff; }
.t-seg { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.t-seg label { cursor: pointer; }
.t-seg input { position: absolute; opacity: 0; pointer-events: none; }
.t-seg span { display: inline-block; font: 500 14px var(--ui); padding: 11px 18px; border: 2px solid var(--black); background: var(--white); color: var(--black); }
.t-seg input:checked + span { background: var(--emerald); border-color: var(--emerald); color: var(--white); }
.t-seg input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.t-result { padding: clamp(20px, 2.6vw, 32px); border: 3px solid var(--black); background: var(--white); position: sticky; top: 20px; scroll-margin-top: 20px; box-shadow: 8px 8px 0 var(--lemon); }
.t-result .g-label { margin-bottom: 10px; color: var(--emerald); }
.t-verdict { font: 500 clamp(28px, 3vw, 40px)/1.08 var(--display); letter-spacing: -.02em; margin: 0 0 6px; }
.t-verdict span { font-size: .55em; font-family: var(--ui); letter-spacing: 0; }
.t-sub { font: 500 15px var(--ui); margin: 0 0 6px; }
.t-lines { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.t-lines li { font: 400 15.5px/1.5 var(--ui); padding-left: 26px; position: relative; }
.t-lines li::before { content: ""; position: absolute; left: 0; top: .42em; width: 13px; height: 13px; border-radius: 50%; background: var(--emerald); }
.t-lines li.warn::before { background: var(--lemon); border: 2px solid var(--black); border-radius: 0; }
.t-lines li.no::before { background: var(--black); border-radius: 0; }
.t-lines .no { font-weight: 600; } .t-lines .ok { color: inherit; }
.t-ok { color: var(--emerald); } .t-warn { color: var(--black); } .t-no { color: var(--black); }
.t-no::after { content: ''; display: block; width: 56px; height: 4px; background: var(--cobalt); margin-top: 10px; }
.t-note { font: 400 14px/1.5 var(--ui); color: var(--meta); margin: 14px 0 0; }

/* the live plan */
.t-plan { margin: 16px 0 4px; }
.t-plan svg { display: block; width: 100%; height: auto; max-height: 340px; background: #fbf8f1; border: 1px solid var(--rule); }
.t-plan svg * { vector-effect: non-scaling-stroke; }
.t-plan .p-room { fill: #fff; stroke: var(--black); stroke-width: 3; }
.t-plan .p-wall { fill: var(--paper-deep); }
.t-plan .p-door { fill: #fff; stroke: var(--black); stroke-width: 3; }
.t-plan .p-floor { stroke: var(--black); stroke-width: 3; }
.t-plan .p-rug { fill: var(--lemon); }
.t-plan .p-sofa { fill: var(--emerald); }
.t-plan .p-sofa.p-ok { fill: var(--emerald); }
.t-plan .p-sofa.p-warn { fill: var(--lemon); stroke: var(--black); stroke-width: 2; }
.t-plan .p-sofa.p-no { fill: var(--black); fill-opacity: .85; }
.t-plan .p-pillow { fill: #fff; }
.t-plan .p-table { fill: var(--emerald); stroke: var(--black); stroke-width: 1.5; }
.t-plan .p-chair { fill: var(--black); }
.t-plan .p-clear { fill: rgba(30, 63, 166, .07); stroke: var(--cobalt); stroke-width: 2; stroke-dasharray: 6 5; }
.t-plan .p-clear.p-bad { fill: rgba(18, 18, 18, .12); stroke: var(--black); }
.t-plan .p-dim { stroke: var(--cobalt); stroke-width: 2; }
.t-plan text { font-family: var(--ui); font-weight: 600; fill: var(--black); }
.t-plan .p-on { fill: #fff; }
.t-plan .p-lemon .p-on, .t-plan .p-warn + .p-on { fill: var(--black); }
.t-plan figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 10px; font: 400 13px/1.4 var(--ui); color: var(--meta); }
.t-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.k { display: inline-flex; align-items: center; gap: 6px; color: var(--black); }
.k::before { content: ''; width: 12px; height: 12px; flex: none; }
.k-table::before, .k-sofa::before { background: var(--emerald); }
.k-chair::before { background: var(--black); }
.k-rug::before { background: var(--lemon); }
.k-room::before, .k-door::before { background: #fff; border: 2px solid var(--black); }
.k-clear::before { border: 2px dashed var(--cobalt); background: rgba(30, 63, 166, .07); }

/* phone: the answer stays in sight while you type */
.t-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--black); color: var(--white); font: 600 16px/1.25 var(--ui); transform: translateY(110%); transition: transform .25s; }
.t-bar.on { transform: none; }
.t-bar a { flex: none; font: 600 12px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--lemon); }
#t-bar-v span { font-weight: 400; }

.t-share { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 88px); }
.t-share details { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.t-share summary { cursor: pointer; padding: 16px 0; font: 600 12px/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--meta); }
.t-share p { font: 400 15px/1.5 var(--ui); max-width: 62ch; margin: 0 0 12px; }
.t-code { margin: 0 0 18px; max-width: 760px; font: 400 13.5px/1.5 ui-monospace, Menlo, Consolas, monospace; padding: 14px 16px; border: 2px solid var(--black); background: var(--white); white-space: pre-wrap; word-break: break-all; overflow: auto; }

/* calculators index */
.g-toolrows { padding-top: clamp(32px, 4vw, 56px); }
.g-toolrows ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.g-toolrow > a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 280px; background: var(--white); border: 1px solid var(--rule); text-decoration: none; transition: border-color .2s; }
.g-toolrow > a:hover { border-color: var(--black); }
.g-toolrow-art { display: grid; place-items: center; padding: 28px; }
.g-toolrow-art .g-toolart { max-width: 300px; }
.g-toolrow-copy { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 44px); }
.g-toolrow-name { font: 500 clamp(26px, 2.5vw, 36px)/1.1 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.g-toolrow-dek { font: 400 17px/1.55 var(--read); max-width: 62ch; }
.g-toolrow-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.g-toolrow-checks span { font: 500 13px var(--ui); padding: 6px 12px; background: var(--paper); border: 1px solid var(--rule); }
.g-method ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: m; }
.g-method li { counter-increment: m; border-top: 3px solid var(--black); padding-top: 16px; }
.g-method li::before { content: counter(m); display: block; font: 600 12px var(--ui); letter-spacing: .14em; color: var(--cobalt); margin-bottom: 10px; }
.g-method h3 { font: 500 22px/1.2 var(--display); margin: 0 0 8px; }
.g-method p { font: 400 16px/1.55 var(--read); margin: 0; }

/* =================================================================== footer (as the app) */
.s-foot { margin-top: 0; }
.s-news { background: var(--emerald); color: var(--white); }
.s-news-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(40px, 5vw, 64px); }
.s-news h2 { font: 400 clamp(28px, 3vw, 38px)/1.12 var(--display); max-width: 16em; margin: 0; }
.s-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 24px; padding-top: 52px; padding-bottom: 40px; font: 400 14.5px/1.4 var(--ui); }
.s-cols h2 { font: 400 21px/1.15 var(--display); margin: 0 0 14px; }
.s-cols ul { margin: 0; padding: 0; }
.s-cols li { margin: 0; }
.s-cols a { display: inline-block; padding: 4px 0; text-decoration: none; }
.s-cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.s-mark { position: relative; height: clamp(120px, 17vw, 260px); background: #cfc2a6 url(/assets/seo/pour-foot.webp) center / cover; overflow: hidden; }
.s-mark::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 32%; background: var(--paper); }
.s-mark span { position: absolute; left: 50%; top: 2%; transform: translateX(-50%); font: 400 clamp(72px, 14vw, 210px)/1 var(--display); color: var(--emerald); letter-spacing: -.01em; white-space: nowrap; }
.s-base { background: var(--black); color: rgba(247, 243, 234, .78); font: 400 12.5px/1.6 var(--ui); }
.s-base-in { display: flex; align-items: center; gap: 24px; padding-top: 18px; padding-bottom: 22px; }
.s-hallmark { height: 34px; width: auto; filter: invert(1); opacity: .8; }
.s-backtop { margin-left: auto; color: var(--white); text-underline-offset: 4px; }

/* =================================================================== small screens */
@media (max-width: 1100px) {
  .s-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-method ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .g-hero-grid, .g-short, .g-body, .g-faq-in, .g-finder { grid-template-columns: minmax(0, 1fr); }
  .g-hero-art { max-width: 560px; }
  /* contents fold into a disclosure above the article */
  .g-toc { position: static; max-height: none; overflow: visible; border: 2px solid var(--black); background: var(--white); }
  .g-toc > summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px; cursor: pointer; list-style: none; font: 600 12px var(--ui); letter-spacing: .14em; text-transform: uppercase; }
  .g-toc > summary::-webkit-details-marker { display: none; }
  .g-toc > summary::after { content: '+'; font: 300 26px/1 var(--ui); }
  .g-toc[open] > summary::after { content: '\2212'; }
  .g-toc nav { padding: 0 16px 14px; }
  .g-toc nav > .g-label { display: none; }
  .g-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-w2, .c-w3 { grid-column: span 1; }
  /* an odd card out spans the row so the grid still fills */
  .g-cards > .g-card:nth-last-child(1):nth-child(odd):not(.g-lead ~ *) { grid-column: 1 / -1; }
  .g-lead ~ .g-card:nth-last-child(1):nth-child(even) { grid-column: 1 / -1; }
  .g-lead > a { grid-template-columns: minmax(0, 1fr); }
  .g-lead-win { order: -1; }
  .t-app { grid-template-columns: minmax(0, 1fr); }
  .t-result { position: static; }
  .g-tool-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .g-hero-mark { display: none; }
  .g-toolrow > a { grid-template-columns: minmax(0, 1fr); }
  .g-toolrow-art { padding: 22px; }
  .g-cta { grid-template-columns: 64px minmax(0, 1fr); }
  .g-cta-art { width: 64px; height: 64px; }
  .g-cta .g-btn { grid-column: 1 / -1; justify-self: start; }
  .s-news-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  body { font-size: 18px; }
  .g-cards, .g-n2, .g-n3, .g-n4 { grid-template-columns: minmax(0, 1fr); }
  .g-cards > .g-card { grid-column: 1 / -1 !important; }
  .g-method ol { grid-template-columns: minmax(0, 1fr); }
  .s-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .g-answer { box-shadow: 5px 5px 0 var(--emerald); }
  .t-result { box-shadow: 5px 5px 0 var(--lemon); }
  .t-form fieldset { grid-template-columns: minmax(0, 1fr); }
  .g-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 4px; scrollbar-width: none; }
  .g-chips::-webkit-scrollbar { display: none; }
  .g-group-head { flex-direction: column; gap: 0; }
  .g-group-head p { margin-bottom: 12px; }
  .s-base-in { flex-wrap: wrap; gap: 10px 18px; }
  .g-meta { flex-direction: column; gap: 4px; }
}
@media (min-width: 901px) { .t-bar { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
@media print {
  .s-head, .s-menu, .g-pour, .cut, .g-cta-wrap, .s-foot, .g-toc, .t-bar { display: none !important; }
  .sheet-emerald, .sheet-lemon, .sheet-black { background: none !important; color: #000 !important; }
}

/* calculators: answer first, reference table, measuring steps, share link */
.t-lead { max-width: 640px; }
.t-copy { margin-top: 16px; min-height: 44px; padding: 0 16px; background: none; border: 1.5px solid var(--black); font: 600 12px var(--ui); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.t-copy:hover { background: var(--paper); }
.t-ref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); padding-top: clamp(32px, 4vw, 56px); }
.t-ref .g-h2-big { font-size: clamp(28px, 2.6vw, 38px); margin-bottom: 18px; }
.t-ref .g-table table { min-width: 0; }
.t-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; }
.t-steps li { counter-increment: st; position: relative; padding: 12px 0 12px 42px; border-top: 1px solid var(--rule); font: 400 16px/1.5 var(--ui); }
.t-steps li::before { content: counter(st); position: absolute; left: 0; top: 10px; font: 600 22px/1 var(--display); color: var(--cobalt); }
@media (max-width: 980px) { .t-ref { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the guides index, hung like the service pages (art.css tokens) ----------
   The cream wall; the words and the finder on the larger side, one photograph in a mat with
   its wall label on the other, one yellow cut-out behind it. The guides hang as plain cards
   on mats: no painted sheets, no coloured bars, no cut windows. */
.g-index-hero { padding: clamp(32px, 4.4vw, 72px) 0 clamp(16px, 2vw, 32px); overflow-x: clip; }
.g-index-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.g-index-copy { min-width: 0; }
.g-index .g-crumbs { color: var(--meta); margin-bottom: 20px; gap: 8px; align-items: center; }
.g-index .g-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.g-index .g-kicker { color: var(--emerald); margin-bottom: 18px; letter-spacing: .16em; font-weight: 500; }
.g-index-hero h1 { font: 400 clamp(48px, 6.2vw, 96px)/1 var(--display); letter-spacing: -.03em; margin: 0 0 22px; font-variation-settings: 'opsz' 144; text-wrap: balance; }
.g-index .g-hub-dek { font: 400 clamp(17px, 1.3vw, 19px)/1.6 var(--ui); color: #4b4843; max-width: 54ch; }
.g-index .g-finder { display: block; padding: 0; margin: clamp(28px, 3vw, 40px) 0 0; max-width: 640px; }
.g-index .g-search input { min-height: 52px; border: 1.5px solid rgba(18, 18, 18, .4); background: #fff; }
.g-index .g-search input::placeholder { color: #6f6a62; }
.g-index .g-search input:focus { border-color: var(--black); outline: 3px solid var(--lemon); outline-offset: 1px; }
.g-index .g-chips { margin-top: 14px; gap: 8px; }
.g-index .g-chip { min-height: 44px; padding: 0 16px; background: transparent; border: 1px solid rgba(18, 18, 18, .3); font: 500 14px var(--ui); }
.g-index .g-chip:hover { background: transparent; border-color: var(--black); }
.g-index .g-chip[aria-pressed="true"] { background: var(--emerald); border-color: var(--emerald); color: var(--white); }
.g-index-work { position: relative; margin: 0; isolation: isolate; justify-self: end; width: min(100%, 520px); }
.g-index-mat { position: relative; z-index: 1; display: block; background: #fbf9f4; padding: clamp(12px, 1.3vw, 20px); box-shadow: 0 0 0 1px rgba(18, 18, 18, .06), 0 30px 60px -40px rgba(18, 18, 18, .35); }
.g-index-mat img { width: 100%; height: auto; aspect-ratio: 4 / 3.3; object-fit: cover; background: var(--paper-deep); }
.g-index-cap { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; margin: 18px 0 0; }
.g-index-cap::before { content: ""; width: 28px; height: 1px; background: var(--black); opacity: .55; margin-bottom: 10px; }
.g-index-cap span:first-child { font: 400 17px/1.3 var(--display); }
.g-index-cap span:last-child { font: 400 13.5px/1.45 var(--ui); color: #4b4843; }
.g-index-cut { position: absolute; z-index: 0; left: -17%; top: 16%; width: 30%; pointer-events: none; }
.g-index-cut svg { display: block; width: 100%; height: auto; overflow: visible; }

.g-index .g-hub-group { padding-top: clamp(64px, 7vw, 112px); }
.g-index .g-group-head { border-bottom: 0; border-top: 1px solid var(--black); padding-top: 22px; margin-bottom: clamp(24px, 3vw, 40px); }
.g-index .g-h2-big { font: 400 clamp(30px, 3.4vw, 52px)/1.06 var(--display); letter-spacing: -.022em; }
.g-index .g-group-head .g-h2-big { margin-bottom: 0; }
.g-index .g-group-head p { font: 500 11.5px/1.4 var(--ui); letter-spacing: .16em; color: var(--meta); }
.g-index .g-group-head a { display: inline-flex; align-items: center; min-height: 44px; color: var(--emerald); text-transform: none; letter-spacing: 0; font-size: 15px; }
.g-index .g-cards { gap: clamp(16px, 2vw, 28px); }
.g-index .g-card > a { background: #fbf9f4; border: 1px solid rgba(18, 18, 18, .14); padding: 26px 24px 22px; gap: 12px; }
.g-index .g-card > a:hover { border-color: var(--black); }
.g-index .g-card-bar { display: none; }
.g-index .g-card .g-eyebrow, .g-index .g-lead .g-eyebrow { color: var(--emerald); }
.g-index .g-card-title { font: 400 clamp(20px, 1.6vw, 23px)/1.22 var(--display); }
.g-index .g-card-dek { font: 400 15.5px/1.6 var(--ui); color: #4b4843; }
.g-index .g-card-go { border-top: 1px solid rgba(18, 18, 18, .14); min-height: 44px; padding-top: 12px; }
.g-index .g-lead { background: none; color: var(--black); }
.g-index .g-lead > a { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); background: #fbf9f4; border: 1px solid rgba(18, 18, 18, .14); color: var(--black); }
.g-index .g-lead > a:hover { border-color: var(--black); }
.g-index .g-lead-title { font: 400 clamp(28px, 2.8vw, 40px)/1.08 var(--display); }
.g-index .g-lead-dek { font: 400 17px/1.6 var(--ui); color: #4b4843; }
.g-index .g-lead .g-card-go { border-top-color: rgba(18, 18, 18, .14); }
.g-index .g-lead-win { -webkit-mask: none; mask: none; background: var(--paper-deep); }
.g-index .g-lead > a:hover img { transform: none; }
.g-index .g-card-art { background: var(--paper-deep); color: var(--black); }
.g-index .g-card-art .g-toolart .a-wall { fill: rgba(18, 18, 18, .05); }
.g-index .g-card-art .g-toolart .a-sofa, .g-index .g-card-art .g-toolart .a-rug { fill: var(--lemon); }
.g-index .g-none { font: 400 17px/1.6 var(--ui); }
.g-index .g-none a { color: var(--emerald); }

@media (max-width: 980px) {
  .g-index-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .g-index-work { justify-self: start; width: 84%; max-width: 520px; }
  .g-index-cut { left: auto; right: -18%; top: -10%; width: 28%; }
  .g-index .g-lead > a { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .g-index-hero h1 { font-size: clamp(44px, 12vw, 56px); }
  .g-index .g-finder { margin-top: 24px; }
}
.g-index .g-card-tool > a { padding-top: 0; }

/* images stay ours: no drag, no selection, no long-press save (assets/js/protect-static.js) */
html.img-protect :is(img, picture, canvas, video, svg) { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
html.img-protect body { -webkit-touch-callout: none; }