/* Print Buddy: styles for the print materials pages. Split out of site.css on 19 Oct 2026 (speed: every shop page loaded all of it);
   linked right after site.css by material.html, materials.html. New rules that only these pages use go here; see docs/STYLE-GUIDE.md. */
/* ---------- PDP (approved business-cards layout, generalised) ---------- */
.g-tag{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);font-size:11px;font-weight:500;z-index:2}
/* ---- Print Materials hub (18 Oct 2026; materials.html, material.html, js/materials.js): our own guide to every paper, board,
   film and fabric we print on. Cards follow the journal card (.jn-card) and the fact-card pattern; pictures sit in #EBEDEF
   frames that matchFrame() tunes to each photo ---- */
.mat-page .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mat-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.mat-jump a{display:inline-flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;font-size:13px;text-decoration:none;transition:box-shadow .2s,border-color .15s}
.mat-jump a:hover{border-color:rgba(var(--prgb),.3);box-shadow:0 0 0 2px rgba(var(--prgb),.1)}
.mat-jump .mj-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--panel);color:var(--icon,var(--ink))}
.mat-jump .mj-ic svg{width:15px;height:15px}
.mat-jump i{font-style:normal;font-size:11px;font-weight:500;color:var(--muted);background:var(--panel);border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);padding:2px 7px}
.mat-group{margin-top:46px;scroll-margin-top:calc(var(--stick-h,0px) + 16px)}
.mat-gh{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.mat-gic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius);background:var(--panel);color:var(--icon,var(--ink))}
.mat-gic svg{width:20px;height:20px}
.mat-gh h2{margin:0 0 4px;font-size:22px;font-weight:500}
.mat-gh p{margin:0;max-width:70ch}
.mat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mat-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:8px}
@media (max-width:1100px){.mat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mat-card .mat-pic,.mat-cmp .mc-pics{display:block;aspect-ratio:4/3;background:#EBEDEF;overflow:hidden}
.mat-card .mat-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mat-card:hover .mat-pic img{transform:scale(1.03)}
.mat-body{display:flex;flex-direction:column;gap:5px;padding:14px 16px 16px;flex:1}
.mat-k{font-size:10.5px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--eyebrow-ink)}
.mat-body b{font-size:15px;font-weight:500;color:var(--ink);line-height:1.3}
.mat-short{font-size:12.5px;line-height:1.55;color:var(--muted)}
.mat-go{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--primary)}
.mat-go svg{width:14px;height:14px;transition:transform .2s}
.jn-card:hover .mat-go svg{transform:translateX(3px)}
.mat-cmp .mc-pics{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.mat-cmp .mc-pics>span:not(.mc-vs){height:100%;overflow:hidden;background:#EBEDEF}
.mat-cmp .mc-pics img{display:block;width:100%;height:100%;object-fit:cover}
.mc-vs,.mat-vs{display:grid;place-items:center;width:34px;height:34px;margin:0 -17px;position:relative;z-index:1;border-radius:50%;background:var(--primary);color:#fff;font-size:11px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;box-shadow:0 0 0 4px #fff}
.mat-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.mat-table th,.mat-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.mat-table thead th{font-size:10.5px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--eyebrow-ink);background:var(--panel)}
.mat-table tbody tr:last-child>*{border-bottom:0}
.mat-table a{color:var(--primary);font-weight:500;text-decoration:none}
.mat-table a:hover{text-decoration:underline}
@media (max-width:900px){.mat-table a{padding:6px 0}}   /* inline padding: a 28 px tap height on phones, the rows unchanged (audit, 24 Oct 2026) */
.mat-vs-table tbody th{font-size:12.5px;font-weight:500;color:var(--ink);width:24%}
.mat-help{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:46px}
.mat-hero{max-width:820px}
.mat-aka{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.mat-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start;margin:0 0 40px}
.mg-main{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:#EBEDEF}
.mg-main img{display:block;width:100%;height:100%}
.mg-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.mg-t{width:64px;height:64px;padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#EBEDEF;cursor:pointer}
.mg-t img{display:block;width:100%;height:100%}
.mg-t[aria-current="true"]{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--ink)}
.mat-side{display:flex;flex-direction:column;gap:18px}
.mat-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mat-shop{padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.mat-shop .mat-prods{grid-template-columns:1fr;gap:8px;margin:10px 0 0}
.mat-all{display:inline-flex;align-items:center;gap:4px;margin-top:12px;font-size:12.5px;font-weight:500;color:var(--primary);text-decoration:none}
.mat-all svg{width:14px;height:14px}
.doc .mat-cmp .mc-pics{aspect-ratio:2.2/1}
.mat-choose .helpcard{color:inherit;text-decoration:none}
.mat-facts>div{padding:16px}
.mat-facts>div>b{font-size:14.5px}
.mat-ticks{list-style:none;padding:0!important}
.mat-ticks li{display:flex;gap:10px;align-items:flex-start}
.mat-ticks li svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--primary)}
.mat-more{font-size:13px!important}
.mat-prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:12px 0 8px}
.mat-prod{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);text-decoration:none!important;transition:box-shadow .2s,transform .2s,border-color .15s}
.mat-prod:hover{border-color:rgba(var(--prgb),.22);box-shadow:0 0 0 2px rgba(var(--prgb),.1),0 14px 30px -16px rgba(20,24,28,.28);transform:translateY(-2px)}
.mp-im{flex:none;width:56px;height:56px;border-radius:var(--radius);overflow:hidden;background:#EBEDEF}
.mp-im img{display:block;width:100%;height:100%}
.mp-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mp-t b{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.3}
.mp-price{font-size:12px;color:var(--muted);font-weight:400}
.mp-price b{font-size:12.5px;color:var(--ink);font-weight:500}
.mat-prod>svg{flex:none;width:16px;height:16px;color:var(--muted)}
.mat-duo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;margin:0 0 6px}
.mat-duo .mat-vs{width:44px;height:44px;margin:0 -10px;font-size:12px}
.mat-choose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.mat-back{margin:40px 0 0}
.mat-back a{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--primary);text-decoration:none}
.mat-back svg{width:16px;height:16px}
.mat-rel{margin-top:56px}
@media (max-width:900px){.mat-top{grid-template-columns:1fr;gap:16px}
.mat-help{grid-template-columns:1fr}}
@media (max-width:640px){.mat-grid,.mat-grid.two{grid-template-columns:1fr 1fr;gap:10px}
.mat-body{padding:11px 12px 13px}
.mat-body b{font-size:14px}
.mat-short{font-size:12px}
.mat-duo{grid-template-columns:1fr;gap:0}
.mat-duo .mat-vs{margin:-14px auto;width:38px;height:38px}
.mat-choose{grid-template-columns:1fr}
.mat-jump{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px 8px;padding:0 14px 4px;scrollbar-width:none}
/* the phone gutter is 14 px: -16 made the page slide sideways */
.mat-jump a{flex:none}
.mat-gh h2{font-size:19px}
.mat-table th,.mat-table td{padding:9px 10px}}
@media (max-width:420px){.mat-grid,.mat-grid.two{grid-template-columns:1fr}
.mat-facts{grid-template-columns:1fr;gap:8px}
.mat-facts>div{padding:12px 14px}
.mat-facts .as-ic{width:38px;height:38px}}
/* ---- 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. */
/* comparison pages: How They Differ (a 820 px reading measure) and See the Difference (each material's own photos in one card) */
.mat-read-b{max-width:820px}
.mat-read-b h3{margin:18px 0 6px;font-size:16px;font-weight:500;color:var(--ink)}
.mat-read-b h3:first-child{margin-top:4px}
.mat-read-b p{margin:0 0 10px;font-size:13.5px;line-height:1.75;color:var(--ink)}
.mat-phs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.mat-ph{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:14px 14px 16px}
.mat-ph figure{margin:0}
.mat-ph .jn-im{aspect-ratio:4/3;border-radius:var(--radius)}
.mat-ph-h{display:flex;flex-direction:column;gap:2px;margin:0 0 12px;text-decoration:none;color:var(--ink)}
.mat-ph-h b{font-size:16px;font-weight:500}
.mat-ph-h:hover b{text-decoration:underline;text-underline-offset:3px}
.mat-ph-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.mat-ph-more figcaption{font-size:12px}
@media (max-width:860px){.mat-phs{grid-template-columns:minmax(0,1fr)}}