/* Print Buddy: styles for the free print guides. Split out of site.css on 19 Oct 2026 (speed: every shop page loaded all of it);
   linked right after site.css by guides.html, guide.html and the home page panel. New rules that only these pages use go here; see docs/STYLE-GUIDE.md. */
/* ==== PRINT GUIDES (Junaid, 17 Oct 2026): guides.html (library), guide.html?g= (one guide), covers drawn in CSS + SVG
   from js/guides.js. Each guide brings its own colours (--gbg, --gink, --ghl, --gkick on the cover; --gacc and --gtint
   on its page). The site theme still owns buttons, type and cards. ==== */
.gcover{position:relative;aspect-ratio:210/297;background:var(--gbg);color:var(--gink);container-type:inline-size;overflow:hidden
  }
.gcover .gc-in{position:absolute;inset:0;padding:8cqw 8cqw 7cqw;display:flex;flex-direction:column}
.gcover .gc-lvl{display:inline-flex;align-items:center;align-self:flex-start;margin-top:4.5cqw;padding:1.6cqw 3.4cqw;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);font-size:4cqw;font-weight:500;letter-spacing:.06em;text-transform:uppercase;background:color-mix(in srgb,var(--gink) 14%,transparent)}
.gcover .gc-t{font-size:10.4cqw;font-weight:500;line-height:1.08;margin-top:7cqw;letter-spacing:-.01em}
.gcover .gc-art{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.gcover .gc-art svg{width:100%;height:auto;max-height:100%}
.gcover .gc-foot{font-size:3.8cqw;font-weight:500;opacity:.85;border-top:1px solid color-mix(in srgb,var(--gink) 28%,transparent);padding-top:3cqw}
.g-dots{display:inline-flex;gap:3px;margin-right:7px;vertical-align:middle}
.g-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.28}
.g-dots i.on{opacity:1}
.gcover .g-dots{gap:1cqw;margin-right:2cqw}
.gcover .g-dots i{width:1.9cqw;height:1.9cqw}
/* library */
.gl-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:end;margin:6px 0 26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.gl-hero h1{font-size:38px;line-height:1.12;font-weight:500;margin:10px 0 12px}
.gl-hero .lead{font-size:14px;line-height:1.7;color:var(--muted);margin:0;max-width:620px}
.gl-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gl-facts li{border:1px solid var(--line);border-radius:var(--radius);padding:14px 14px 12px;background:#fff}
.gl-facts b{display:block;font-size:24px;font-weight:500;line-height:1.1}
.gl-facts span{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4}
.gl-levels{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.gl-levels button{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;font:inherit;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer}
.gl-levels button i{font-style:normal;font-size:11px;color:var(--muted)}
.gl-levels button:hover{background:var(--panel)}
.gl-levels button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:500}
.gl-levels button[aria-pressed="true"] i{color:rgba(255,255,255,.7)}
.gl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 24px}
.gcard{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.gcard .gcover{transition:transform .2s ease,box-shadow .2s ease}
.gcard .gk{display:flex;align-items:center;gap:0;margin-top:18px;font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow-ink)}
.gcard .gk i{font-style:normal;font-weight:500;letter-spacing:.02em;text-transform:none;margin-left:auto;color:var(--muted);font-size:11.5px}
.gcard b{display:block;font-size:14.5px;font-weight:500;line-height:1.4;margin-top:6px}
.gcard p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gcard .go{font-size:12.5px;font-weight:500}
.gcard .go svg{width:14px;height:14px}
.gl-news{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;margin:56px 0 10px;padding:30px 32px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}
.gl-news h2{font-size:24px;font-weight:500;margin:8px 0 6px}
.gn-form{display:grid;grid-template-columns:1fr auto;gap:10px}
.gn-form input[type=email]{height:44px;border:1px solid var(--line);border-radius:var(--radius);padding:0 14px;font:inherit;font-size:13px;background:#fff;min-width:0}
.gn-form .btn{height:44px}
.gn-form .gg-c,.gn-form .gg-err{grid-column:1/-1}
.gn-done{margin:0;font-size:13.5px}
/* the guide page */
.guide-page{--gacc:var(--primary);--gtint:var(--panel)}
.g-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.95fr);gap:48px;align-items:start;margin:8px 0 10px}
.g-lvl{display:inline-flex;align-items:center;font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gacc)}
.g-hero h1{font-size:34px;line-height:1.15;font-weight:500;margin:12px 0 14px}
.g-lead{font-size:14.5px;line-height:1.7;color:var(--muted);margin:0 0 16px}
.g-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--muted);margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.g-meta span{display:inline-flex;align-items:center;gap:6px}
.g-meta span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line);margin-right:12px}
.g-learn b{display:block;font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow-ink);margin-bottom:10px}
.g-learn ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.g-learn li{position:relative;padding-left:26px;font-size:13.5px;line-height:1.55}
.g-learn li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--gtint)}
.g-learn li::after{content:"";position:absolute;left:5px;top:6px;width:6px;height:3.5px;border-left:1.6px solid var(--gacc);border-bottom:1.6px solid var(--gacc);transform:rotate(-45deg)}
.g-for{font-size:13px;color:var(--muted);margin:18px 0 0}
.g-for b{color:var(--ink);font-weight:500}
.g-get{position:sticky;top:96px;display:grid;gap:18px}
.g-get .gcover.big{width:62%;justify-self:center;margin-top:4px}
.g-gate{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:20px 20px 18px;box-shadow:0 14px 30px -22px rgba(20,24,28,.35)}
.gg-h{display:block;font-size:16px;font-weight:500}
.gg-sub{font-size:12.5px;line-height:1.6;color:var(--muted);margin:6px 0 14px}
.gg-l{display:block;font-size:12px;font-weight:500;margin-bottom:10px}
.gg-l i{font-style:normal;font-weight:500;color:var(--muted)}
.gg-l input{display:block;width:100%;box-sizing:border-box;height:40px;margin-top:5px;border:1px solid var(--line);border-radius:var(--radius);padding:0 12px;font:inherit;font-size:13px;font-weight:400;background:#fff}
.gg-l input:focus,.gn-form input:focus{outline:none;border-color:var(--field-line);box-shadow:var(--field-ring)}
.gg-c{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.5;color:var(--ink);margin:4px 0 12px;cursor:pointer}
.gg-c input{flex:none;width:16px;height:16px;margin:1px 0 0;accent-color:var(--ink)}
.gg-err{margin:0 0 10px;font-size:12px;color:var(--danger)}
.g-gate .btn,.gg-done .btn,.gg-back .btn{width:100%;justify-content:center;display:inline-flex;align-items:center;gap:8px}
.g-gate .btn svg{width:16px;height:16px}
.gg-fine{display:block;margin-top:10px;font-size:11px;line-height:1.5;color:var(--muted)}
.gg-done,.gg-back{text-align:center}
.gg-done b,.gg-back b{display:block;font-size:15px;font-weight:500}
.gg-ok{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 10px;border-radius:var(--radius);background:var(--gtint);color:var(--gacc)}
.gg-ok svg{width:22px;height:22px}
.gg-not{margin-top:8px;border:0;background:none;font:inherit;font-size:11.5px;color:var(--muted);text-decoration:underline;cursor:pointer}
.g-sec{margin:48px 0 0}
.g-sec h2{font-size:22px;font-weight:500;margin:0 0 16px}
.g-chaps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.g-chaps li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.g-chaps b{display:block;font-size:15px;font-weight:500}
.g-pts{display:flex;flex-wrap:wrap;gap:6px}
.g-pts i{font-style:normal;font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--gtint);color:var(--ink)}
.g-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.g-check{list-style:none;margin:0;padding:0}
.g-check li{position:relative;padding:10px 0 10px 30px;border-bottom:1px solid var(--line);font-size:13.5px}
.g-check li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:16px;border:1.5px solid var(--gacc);border-radius:var(--radius-sm);box-sizing:border-box}
.g-cnote{font-size:12.5px;line-height:1.6;color:var(--muted);margin:14px 0 0;text-align:left}
.g-faqs .faq:last-child{margin-bottom:0}
.g-prods{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.g-prods a{display:block;text-decoration:none;border:1px solid var(--line);border-radius:var(--radius);padding:8px 8px 12px;background:#fff;transition:box-shadow .2s,transform .2s}
.g-prods a:hover{box-shadow:0 0 0 2px rgba(var(--prgb),.1),0 14px 30px -16px rgba(20,24,28,.28);transform:translateY(-2px)}
.g-prods .im{display:block;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:#EBEDEF}
.g-prods img{width:100%;height:100%;object-fit:cover;display:block}
.g-prods b{display:block;font-size:13px;font-weight:500;margin:10px 4px 0;line-height:1.35}
.g-rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start}
.gcard.sm b{font-size:13.5px}
.g-all{align-self:center;justify-self:start;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--primary);text-decoration:none}
.g-all svg{width:16px;height:16px}
@media (max-width:1100px){.gl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-prods{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.gl-hero,.g-hero,.g-two,.gl-news{grid-template-columns:1fr}
.g-hero{gap:28px}
.g-get{position:static}
.g-get .gcover.big{width:46%}
.gl-hero h1{font-size:30px}
.g-hero h1{font-size:28px}
.gl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
.g-rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.gl-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gl-facts li{padding:10px}
.gl-facts b{font-size:19px}
.gn-form{grid-template-columns:1fr}
.g-prods{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-chaps li{grid-template-columns:40px minmax(0,1fr);gap:10px}
.gl-news{padding:22px 18px}}
/* guides on phones: the read time under the level on narrow cards; a jump to the download form near the top */
.g-jump{display:none}
@media (max-width:900px){.g-jump{display:inline-flex;margin:-6px 0 22px}
.g-gate{scroll-margin-top:80px}}
@media (max-width:520px){.gcard .gk{flex-wrap:wrap;row-gap:2px}
.gcard .gk i{margin-left:0;width:100%}}
/* guide covers carry the logo itself (Junaid): the real logo on dark covers, one colour on light ones (a mask of logo.svg) */
.gcover .gc-logo{display:block;height:7.2cqw;width:auto;flex:none;align-self:flex-start}
.gcover .gc-logo.mono{-webkit-mask:url("../assets/logo.svg") no-repeat left center/contain;mask:url("../assets/logo.svg") no-repeat left center/contain}
/* ==== Home free guides panel (Junaid, 17 Oct 2026: "make them smaller so they don't take more space, squeeze a few more in,
   design this panel better"): a tinted panel, the intro with three small facts and a button on the left, every guide as a
   small cover in a strip that scrolls with arrows (about five in view on a laptop) ==== */
/* guide covers look like a real booklet (Junaid, 17 Oct 2026: the white offset "page" behind each cover looked broken): pages
   show only along the right edge, a soft spine fold runs down the left, a natural drop shadow; hover lifts it a little */
.gcover{border-radius:var(--radius-sm) var(--radius) var(--radius) var(--radius-sm);box-shadow:1px 0 0 rgba(20,24,28,.14),4px 0 0 -1px #FBFAF7,5px 0 0 -1px rgba(20,24,28,.16),8px 0 0 -2.5px #F2F0EA,9px 0 0 -2.5px rgba(20,24,28,.14),0 16px 26px -14px rgba(20,24,28,.42),0 2px 4px rgba(20,24,28,.08)}
.gcover::before{content:"";position:absolute;top:0;bottom:0;left:0;z-index:2;width:9%;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.24) 0,rgba(255,255,255,.2) 16%,rgba(0,0,0,.09) 32%,rgba(0,0,0,0) 100%)}
.gcard:hover .gcover{transform:translateY(-4px);box-shadow:1px 0 0 rgba(20,24,28,.14),4px 0 0 -1px #FBFAF7,5px 0 0 -1px rgba(20,24,28,.16),8px 0 0 -2.5px #F2F0EA,9px 0 0 -2.5px rgba(20,24,28,.14),0 26px 32px -16px rgba(20,24,28,.5),0 2px 4px rgba(20,24,28,.08)}
/* ---- Gazebo plan (18 Oct 2026, pdp.js gzRefresh): the gazebo from above with a wall on each side, side tabs and one row of
   wall tiles with what each adds. The four wall fields stay hidden underneath. */
/* quick choices, the walls in words, the half-wall support bar (19 Oct 2026) */
/* a guide read in full on its page (19 Oct 2026, the gazebo guide): linked contents, then each chapter as words beside
   its diagram, tip and the mistake to avoid */
.g-toc li>a{display:contents;color:inherit;text-decoration:none}
.g-toc li:hover b{color:var(--gacc,var(--primary))}
.g-ch{scroll-margin-top:96px}
.g-ch>header{display:flex;gap:14px;align-items:flex-start;margin:0 0 14px}
.g-ch>header .g-n{flex:none;font-size:13px;background:var(--gtint,var(--panel));border-radius:var(--radius);padding:6px 9px;line-height:1}
.g-ch>header h2{margin:0 0 4px}
.g-chl{margin:0;color:var(--muted);font-size:14px}
.g-chb{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:26px;align-items:start}
.g-chp{margin:14px 0 0;display:grid;gap:8px}
.g-chp div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.g-chp dt{font-weight:500;font-size:13px;color:var(--ink)}
.g-chp dd{margin:0;font-size:13px;line-height:1.6;color:var(--ink)}
.g-chs{display:grid;gap:12px}
.g-fig{margin:0;background:var(--gtint,var(--panel));border-radius:var(--radius);padding:12px}
.g-fig svg{display:block;width:100%;height:auto}
/* a drawing with its own caption (the spot UV and foil guide, 23 Oct 2026) */
.g-fig figcaption{margin:8px 2px 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
@media (max-width:860px){.g-chb{grid-template-columns:minmax(0,1fr)}
.g-chp div{grid-template-columns:minmax(0,1fr);gap:2px}}
.g-start{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 22px}
.g-start .g-pdf{font-size:13px;font-weight:500;color:var(--gacc,var(--primary))}
/* the free guide card (19 Oct 2026, Junaid: the cover and the form were not aligned or balanced): one card, the cover on
   the guide's tint at the top, the form underneath; at the foot of a full guide the same card lies on its side */
.g-getcard{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;box-shadow:0 14px 30px -22px rgba(20,24,28,.35)}
.g-getart{display:grid;place-items:center;padding:24px 20px 22px;background:var(--gtint,var(--panel))}
.g-get .g-getart .gcover.big,.g-getart .gcover.big{width:50%;margin:0;justify-self:center}
.g-getcard .g-gate{border:0;border-radius:0;box-shadow:none;padding:20px 22px 22px}
.g-getcard .gg-h{font-size:16px}
.g-getcard .gg-sub{font-size:12.5px;line-height:1.6;color:var(--muted);margin:6px 0 16px}
.g-getcard.wide{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:stretch}
.g-getcard.wide .g-getart{padding:30px 24px}
.g-getcard.wide .g-getart .gcover.big{width:70%}
.g-keepb{padding:26px 30px 24px;align-self:center}
.g-keepk{display:block;font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gacc,var(--eyebrow-ink))}
.g-keepb h2{margin:6px 0 6px}
.g-keepp{margin:0;max-width:60ch;font-size:13.5px;line-height:1.65;color:var(--muted)}
.g-keepb .g-gate{padding:16px 0 0;max-width:460px;scroll-margin-top:96px}
.g-keepb .gg-h{display:none}
.g-keepb .gg-sub{margin-top:0}
@media (max-width:900px){.g-get .g-getart .gcover.big{width:38%}}
@media (max-width:860px){.g-get-full{display:none}
.g-getcard.wide{grid-template-columns:minmax(0,1fr)}
.g-getcard.wide .g-getart{padding:22px}
.g-getcard.wide .g-getart .gcover.big{width:40%}
.g-keepb{padding:20px 20px 22px}}
/* ---- Print Journal, Print Materials and Free Print Guides on real photos (Junaid, 19 Oct 2026: "everything has to be built from
   the real illustrations... the more text we say, it just sounds better"). Photos sit whole (contain) on the frame matchFrame
   gives them (the photo's own grey); captions 12.5 px muted; the house list dots and details.faq. */
/* free guides: each chapter row in Inside This Guide carries its photo on the right; full guides show it under the diagram */
.g-chaps li:has(.g-chph){grid-template-columns:56px minmax(0,1fr) 176px}
.g-chph{display:block;align-self:start;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:#EBEDEF}
.g-chph img{display:block;width:100%;height:100%;object-fit:contain}
.g-ph{margin:0}
.g-phim{display:block;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:#EBEDEF}
.g-phim img{display:block;width:100%;height:100%;object-fit:contain}
.g-ph figcaption{margin:8px 2px 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
@media (max-width:860px){.g-chaps li:has(.g-chph){grid-template-columns:40px minmax(0,1fr)}
.g-chph{grid-column:2;max-width:260px}}

/* no jump while the guides arrive (7 Nov 2026, big text audit: layout shift 0.35 on the library, 0.8 on a guide): the space is held until they draw */
.gl-grid:empty{min-height:100vh}
#gPage{min-height:100vh}
/* THE DESIGNER GUIDE banner on guides.html (8 Nov 2026): a link to designer-guide.html above the level filter */
.gl-dguide{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:center;margin:0 0 26px;padding:20px 24px;border-radius:var(--radius);background:var(--panel);color:var(--ink);text-decoration:none}
.gl-dguide b{grid-column:1;font-size:19px;font-weight:500;line-height:1.3}
.gl-dguide>span:not(.eyebrow){grid-column:1;font-size:13.5px;line-height:1.6;color:var(--muted)}
.gl-dguide i{grid-column:2;grid-row:1/span 3;font-style:normal;display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-size:14px;font-weight:500}
@media (max-width:640px){.gl-dguide{grid-template-columns:minmax(0,1fr)}.gl-dguide i{grid-column:1;grid-row:auto;justify-content:center;margin-top:10px}}