:root { --paper:#155a66; --card:#0f4853; --ink:#f0f4f2; --muted:#c3d6d4; --soft:#9cbdba; --strip:#072a32;   /* teal (user, 29 Oct 2026) */
        --rule:rgba(255,255,255,.12); --gold:#c9a961; --gold-tint:rgba(201,169,97,.12); --link:#d9bc7a;
        color-scheme: dark; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--paper); color:var(--ink); font-family:'Titillium Web',system-ui,sans-serif;
       font-size:16px; line-height:1.55; }
a { color:var(--link); }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.topbar { background:var(--strip); border-bottom:2px solid var(--gold); }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; padding-top:14px; padding-bottom:14px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.brand svg { width:46px; height:46px; flex:none; }
.wordmark { display:flex; flex-direction:column; line-height:1; }
.wordmark b { font-family:'Cormorant Garamond',Georgia,serif; font-weight:700; font-size:30px; letter-spacing:.005em; }
.wordmark b span { color:var(--gold); }
.wordmark small { font-family:'Titillium Web',sans-serif; font-weight:600; font-size:11.5px; letter-spacing:.32em;
                  text-transform:uppercase; margin-top:3px; }
nav.main { display:flex; flex-wrap:wrap; gap:4px 20px; font-size:15px; }
nav.main a { color:var(--muted); text-decoration:none; padding:6px 0; }
nav.main a:hover, nav.main a[aria-current=page] { color:var(--ink); }
.eyebrow { font-family:'Geist Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.18em;
           text-transform:uppercase; color:var(--muted); }
h1 { font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:clamp(32px,4.4vw,48px);
     line-height:1.1; margin:6px 0 12px; }
h2 { font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:28px; margin:34px 0 10px; }
h2.imghead { margin:0 0 10px; font-size:24px; }
h2.design { font-size:36px; margin:56px 0 6px; padding-top:22px; border-top:1px solid var(--rule); }   /* a design within a set page */
h3 { font-size:18px; font-weight:600; margin:22px 0 6px; }
p { margin:0 0 12px; }
.lede { color:var(--muted); max-width:760px; font-size:17px; }
header.page { padding-top:30px; padding-bottom:6px; }
main { padding-top:12px; padding-bottom:64px; }
.prose { max-width:760px; }
.prose ul, .prose ol { margin:0 0 14px 22px; }
.prose li { margin-bottom:6px; }
.draft { border:1px dashed var(--gold); background:var(--gold-tint); padding:10px 14px; border-radius:6px; margin:0 0 20px; font-size:14px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; margin-top:18px; }
.card { background:var(--card); border:1px solid var(--rule); border-radius:8px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.35);
        text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.card:hover { border-color:var(--gold); }
.card img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#1a6370; }
.card .body { padding:12px 14px 14px; }
.card h3 { font-size:17px; font-weight:600; line-height:1.25; margin:0; }
.meta { font-family:'Geist Mono',ui-monospace,monospace; font-size:12px; color:var(--soft); margin-top:4px; }
.price { font-weight:600; color:var(--gold); margin-top:6px; font-size:15px; }
.tabs { display:flex; gap:8px; margin:22px 0 6px; border-bottom:1px solid var(--rule); }
.tab { background:none; border:1px solid transparent; border-bottom:none; color:var(--muted); font:inherit; font-size:17px;
       padding:10px 20px; min-height:44px; cursor:pointer; border-radius:8px 8px 0 0; }
.tab[aria-selected=true] { color:var(--ink); background:var(--card); border-color:var(--rule); border-bottom:1px solid var(--card); margin-bottom:-1px; }
.panel[hidden] { display:none; }
.product { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:28px; align-items:start; margin-top:8px; }
.product > figure { background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:10px; }
.buy { background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:20px; position:sticky; top:16px; }
.buy .amount { font-size:26px; font-weight:600; color:var(--gold); }
.buy button { width:100%; min-height:48px; margin:14px 0 10px; border-radius:8px; border:1px solid var(--gold); background:var(--gold);
              color:#072a32; font:inherit; font-weight:600; font-size:17px; cursor:pointer; }
.buy button[disabled] { background:transparent; color:var(--muted); border-color:var(--rule); cursor:not-allowed; }
.buy ul { margin:8px 0 12px 20px; font-size:14.5px; color:var(--muted); }
.buy .small { font-size:13px; color:var(--soft); }
.stats { display:flex; flex-wrap:wrap; gap:10px 28px; margin:14px 0 4px; }
.stat b { display:block; font-size:22px; font-weight:600; }
.stat span { font-size:12px; color:var(--soft); text-transform:uppercase; letter-spacing:.08em; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pair figure, .single figure { background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:10px; }
.pair figcaption { margin-top:8px; text-align:center; font-size:14px; color:var(--muted, #888); }   /* set pages: board and pieces under each photo */
.single figure + figure { margin-top:14px; }
.previews { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; max-width:66.6%; }
@media (max-width:820px) { .previews { max-width:none; } }
.previews figure { background:var(--card); border:1px solid var(--rule); border-radius:8px; padding:8px; }
figure img { width:100%; display:block; border-radius:4px; }
figcaption { font-size:13px; color:var(--muted); margin-top:6px; }
table { border-collapse:collapse; width:100%; background:var(--card); border:1px solid var(--rule);
        border-radius:8px; overflow:hidden; font-size:14px; }
.tablebox { overflow-x:auto; }
th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--rule); }
th { font-weight:600; background:#0d434d; }
.swatch { width:22px; height:22px; border-radius:3px; border:1px solid rgba(255,255,255,.2); display:inline-block; vertical-align:middle; }
.cta { display:inline-block; padding:11px 20px; border:1px solid var(--gold); border-radius:8px; text-decoration:none; color:var(--ink); }
.cta:hover { background:var(--gold-tint); }
.back { font-size:14px; margin-bottom:8px; }
footer { border-top:1px solid var(--rule); color:var(--soft); font-size:13px; }
footer .wrap { padding-top:22px; padding-bottom:40px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 28px; }
footer nav { display:flex; flex-wrap:wrap; gap:6px 18px; }
footer a { color:var(--muted); }
@media (max-width:820px) { .product { grid-template-columns:1fr; } .buy { position:static; } }
@media (max-width:700px) { .pair { grid-template-columns:1fr; } .wordmark b { font-size:26px; } }
.zoom { cursor:zoom-in; }
.lb { position:fixed; inset:0; background:rgba(0,0,0,.88); display:none; align-items:center; justify-content:center; z-index:50; }
.lb.open { display:flex; }
.lb img { max-width:96vw; max-height:94vh; border-radius:4px; cursor:zoom-out; box-shadow:0 8px 40px rgba(0,0,0,.6); }
.lb button { position:fixed; top:14px; right:18px; width:44px; height:44px; border-radius:22px; border:1px solid rgba(255,255,255,.35);
             background:rgba(7,42,50,.85); color:#fff; font-size:26px; line-height:40px; cursor:pointer; }

/* Colour options for the Mosaic Templates section (user, 29 Oct 2026: closer to the AllMosaics teal). Only colours change: layout,
   fonts and the MosAIc logo stay as on the MosAIc Templates site. build.py appends the chosen block to templates/style.css. */

/* A. Deep teal: the dark look kept, grey swapped for the deep teal of the curtain */
/* chosen (user, 29 Oct 2026); below the top strip a lighter teal, towards the curtain */
.theme-a { --paper:#155a66; --card:#0f4853; --ink:#f0f4f2; --muted:#c3d6d4; --soft:#9cbdba; --rule:rgba(255,255,255,.12);
           --gold:#c9a961; --gold-tint:rgba(201,169,97,.12); --link:#d9bc7a; }
.theme-a header.topbar { background:#072a32; border-bottom:2px solid var(--gold); }
.theme-a .card img { background:#1a6370; } .theme-a th { background:#0d434d; }

/* B. Curtain: the teal curtain behind the top of each page, deep teal below */
.theme-b { --paper:#0d4350; --card:#0a3742; --ink:#f1f4f2; --muted:#bfd3d1; --soft:#97b8b5; --rule:rgba(255,255,255,.12);
           --gold:#c9a961; --gold-tint:rgba(201,169,97,.14); --link:#dcc184; }
.theme-b header.topbar { background:rgba(4,30,36,.55); border-bottom:2px solid var(--gold); }
.theme-b body, body.theme-b { background:#0d4350 url('/assets/brand/TealCurtain1.webp') top center/100% auto no-repeat; }
.theme-b .card img { background:#0f4c59; } .theme-b th { background:#0b3c47; }
.theme-b .card, .theme-b .buy, .theme-b .tablebox { background:rgba(6,40,48,.72); }

/* C. Light: cream paper like the AllMosaics collection pages, teal top bar and gold */
.theme-c { --paper:#f6f1e7; --card:#ffffff; --ink:#1f2a30; --muted:#4f5d61; --soft:#6f7c80; --rule:rgba(10,63,74,.14);
           --gold:#a8843a; --gold-tint:rgba(168,132,58,.10); --link:#0e5f6e; color-scheme:light; }
.theme-c header.topbar { background:#0a3f4a; border-bottom:3px solid #c9a961; }
.theme-c header.topbar .wordmark, .theme-c header.topbar nav a { color:#f1f4f2; } .theme-c header.topbar .wordmark b span { color:#c9a961; }
.theme-c .card img { background:#e9e2d2; } .theme-c th { background:#efe7d6; }

.hb{display:flex;align-items:center;gap:18px}.home-btn{font-family:'Titillium Web',sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em;color:var(--gold);text-decoration:none;border:1px solid var(--gold);border-radius:6px;padding:6px 12px;white-space:nowrap}.home-btn:hover{background:var(--gold-tint)}