/* Southerly art theme layer v2 (7 Oct 2026). Skins the existing pages; content, layout and photos are untouched.
   html[data-art="O"] = the live site. A "Field journal" (etched), B "Gallery" (impasto), C "Scrapbook" (collage).
   theme.js tags roles on the page: [data-f=d|b] original Jost/Inter, [data-role=label|btn], .th-tex .th-card .th-photo .th-band */

/* ================= palettes (re-point the site's own tokens) ================= */
html[data-art="A"]{--forest:#15130f;--forest-mid:#1c1914;--forest-light:#26221b;--cream:#f1ead9;--cream-dim:#aba28e;--cream-faint:#2f2a22;--gold:#d9a35b;--gold-dim:#9a7238;--gold-faint:#3a2c18;--sage:#aba28e;--sage-dim:#5c5446;--th-veil:rgba(21,19,15,.87);--th-cveil:rgba(21,19,15,.9);--th-ink:#15130f}
html[data-art="B"]{--forest:#1d1712;--forest-mid:#251d16;--forest-light:#30261d;--cream:#f2e8d8;--cream-dim:#b3a58f;--cream-faint:#3a2e24;--gold:#d0874f;--gold-dim:#8f5a33;--gold-faint:#3b2516;--sage:#a3a982;--sage-dim:#5d6146;--th-veil:rgba(29,23,18,.78);--th-cveil:rgba(29,23,18,.8);--th-ink:#1d1712}
html[data-art="C"]{--forest:#1e2218;--forest-mid:#262b1f;--forest-light:#313728;--cream:#f3ebdc;--cream-dim:#aeaa94;--cream-faint:#353a2b;--gold:#d97a50;--gold-dim:#94492c;--gold-faint:#3d2318;--sage:#a8b288;--sage-dim:#5e6748;--th-veil:rgba(30,34,24,.8);--th-cveil:rgba(30,34,24,.84);--th-ink:#1e2218}

/* ================= type: "Matched" = each style's own pairing ================= */
html[data-art="A"][data-type="matched"]{--th-d:"Libre Caslon Display",Georgia,serif;--th-b:"Libre Caslon Text",Georgia,serif}
html[data-art="B"][data-type="matched"]{--th-d:"Fraunces",Georgia,serif;--th-b:"Instrument Sans",system-ui,sans-serif}
html[data-art="C"][data-type="matched"]{--th-d:"Young Serif",Georgia,serif;--th-b:"Karla",system-ui,sans-serif}
html[data-art="O"][data-type="matched"]{--th-d:"Jost",sans-serif;--th-b:"Inter",sans-serif}
html[data-type="caslon"]{--th-d:"Libre Caslon Display",Georgia,serif;--th-b:"Libre Caslon Text",Georgia,serif}
html[data-type="fraunces"]{--th-d:"Fraunces",Georgia,serif;--th-b:"Source Serif 4",Georgia,serif}
html[data-type="instrument"]{--th-d:"Instrument Serif",Georgia,serif;--th-b:"Instrument Sans",system-ui,sans-serif}
html[data-type="young"]{--th-d:"Young Serif",Georgia,serif;--th-b:"Work Sans",system-ui,sans-serif}
html[data-type="gloock"]{--th-d:"Gloock",Georgia,serif;--th-b:"Karla",system-ui,sans-serif}
html[data-type="newsreader"]{--th-d:"Newsreader",Georgia,serif;--th-b:"Newsreader",Georgia,serif}
html[data-type="bodoni"]{--th-d:"Bodoni Moda",Georgia,serif;--th-b:"Lato",system-ui,sans-serif}
html[data-type="dmserif"]{--th-d:"DM Serif Display",Georgia,serif;--th-b:"DM Sans",system-ui,sans-serif}
html:not([data-type="original"]) [data-f="d"]{font-family:var(--th-d)!important}
html:not([data-type="original"]) [data-f="b"]{font-family:var(--th-b)!important}
/* serif display faces read better without Jost's wide tracking and light weight */
html:not([data-type="original"]):not([data-art="O"]) [data-role="title"]{letter-spacing:-.005em!important;font-weight:400!important}
html[data-art="B"][data-type="matched"] [data-role="title"]{font-variation-settings:"SOFT" 100,"opsz" 144;font-weight:350!important}

/* ================= grounds: a different artwork behind each section ================= */
html:not([data-art="O"]) body{background-color:var(--forest)}
html:not([data-art="O"]) .th-tex{background-image:linear-gradient(var(--th-veil),var(--th-veil)),var(--th-bg)!important;background-size:cover!important;background-repeat:no-repeat!important}
html:not([data-art="O"]) .th-card{background-image:linear-gradient(var(--th-cveil),var(--th-cveil)),var(--th-p)!important;background-size:cover!important;background-position:center!important}
html:not([data-art="O"]) body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2147482000;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ================= bands between sections (each a different artwork) ================= */
.th-band{display:none}
html:not([data-art="O"]) .th-band{display:block;height:clamp(54px,9vw,120px);background:var(--th-bandimg) center/cover no-repeat}
html[data-art="A"] .th-band{height:clamp(40px,6vw,80px);border-block:1px solid rgba(241,234,217,.16)}
html[data-art="B"] .th-band{height:clamp(70px,11vw,150px);box-shadow:inset 0 10px 18px -10px rgba(0,0,0,.6),inset 0 -10px 18px -10px rgba(0,0,0,.6)}
html[data-art="C"] .th-band{height:clamp(46px,7vw,90px);clip-path:polygon(0 12%,6% 2%,14% 10%,23% 0,33% 9%,44% 3%,55% 11%,66% 1%,77% 9%,88% 2%,100% 10%,100% 90%,92% 98%,81% 90%,70% 99%,59% 91%,48% 98%,37% 89%,26% 97%,15% 90%,7% 99%,0 91%)}

/* ================= A · Field journal: etched plates, hairlines, italic labels ================= */
html[data-art="A"] [data-role="label"]{font-family:"Libre Caslon Text",Georgia,serif!important;font-style:italic;text-transform:none!important;letter-spacing:.01em!important;font-size:1.12em!important}
html[data-art="A"] [data-role="btn"]{background:transparent!important;color:var(--cream)!important;border:1px solid rgba(241,234,217,.7)!important;border-radius:0!important;letter-spacing:.18em!important;box-shadow:none!important;transition:background .25s,color .25s}
html[data-art="A"] [data-role="btn"]:hover{background:var(--cream)!important;color:var(--th-ink)!important}
html[data-art="A"] .th-photo{outline:1px solid rgba(241,234,217,.24);outline-offset:6px}
html[data-art="A"] .th-card{outline:1px solid rgba(241,234,217,.14);outline-offset:-1px}
html[data-art="A"] h2[data-role="title"]::after{content:"";display:block;width:56px;height:1px;background:var(--gold);margin-top:.5em;opacity:.8}

/* ================= B · Gallery: painted buttons, swatch underlines, deep shadows ================= */
html[data-art="B"] [data-role="label"]{color:var(--gold)!important;letter-spacing:.16em!important}
html[data-art="B"] [data-role="btn"]{background:#b8683a!important;color:#fff8ee!important;-webkit-text-fill-color:#fff8ee!important;border:0!important;border-radius:3px!important;box-shadow:0 10px 24px -12px rgba(0,0,0,.7)!important}
html[data-art="B"] [data-role="btn"]:hover{background:#c97a48!important}
html[data-art="B"] .th-photo{border-radius:3px;box-shadow:0 22px 46px -24px rgba(0,0,0,.8)}
html[data-art="B"] .th-card{box-shadow:0 20px 44px -26px rgba(0,0,0,.75);border-radius:3px}
html[data-art="B"] h2[data-role="title"]::after{content:"";display:block;width:110px;height:12px;margin-top:.45em;background:var(--th-swatch) center/cover;border-radius:2px;opacity:.95}

/* ================= C · Scrapbook: tape labels, cut-paper buttons, pinned photos ================= */
html[data-art="C"] [data-role="label"]{display:inline-block;background:#e9dfc8!important;color:#2a2a1e!important;padding:3px 8px 2px!important;transform:rotate(-1.2deg);letter-spacing:.12em!important;box-shadow:0 1px 0 rgba(0,0,0,.25)}
html[data-art="C"] [data-role="btn"]{background:#f3ebdc!important;color:#1e2218!important;border:0!important;border-radius:0!important;box-shadow:4px 4px 0 var(--gold)!important;transition:transform .15s,box-shadow .15s}
html[data-art="C"] [data-role="btn"]:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--gold)!important}
html[data-art="C"] .th-photo{outline:6px solid #f3ebdc;outline-offset:-6px;box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}
html[data-art="C"] .th-photo.th-tilt-l{transform:rotate(-.8deg)}
html[data-art="C"] .th-photo.th-tilt-r{transform:rotate(.8deg)}
html[data-art="C"] h2[data-role="title"]::after{content:"";display:block;width:120px;height:14px;margin-top:.4em;background:var(--th-swatch) center/cover;clip-path:polygon(0 30%,8% 0,20% 25%,35% 5%,50% 28%,66% 2%,80% 22%,100% 8%,100% 72%,90% 100%,74% 76%,58% 98%,42% 74%,26% 100%,12% 78%,0 96%)}

html:not([data-art="O"]) p a:not([data-role="btn"]){color:var(--gold);text-underline-offset:3px}

/* ================= the switch panel ================= */
#th-panel{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:2147483000;font:13px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;color:#f3ece0}
#th-panel button{font:inherit;color:inherit;cursor:pointer}
#th-panel .th-toggle{background:rgba(14,12,9,.92);border:1px solid rgba(243,236,224,.3);border-radius:999px;padding:9px 14px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
#th-panel .th-box{display:none;margin-bottom:8px;background:rgba(14,12,9,.96);border:1px solid rgba(243,236,224,.22);border-radius:10px;padding:12px;width:min(320px,calc(100vw - 24px));max-height:70vh;overflow:auto;box-shadow:0 10px 30px rgba(0,0,0,.45)}
#th-panel.open .th-box{display:block}
#th-panel .th-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin:2px 0 6px}
#th-panel .th-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
#th-panel .th-row button{background:transparent;border:1px solid rgba(243,236,224,.3);border-radius:6px;padding:6px 9px}
#th-panel .th-row button[aria-pressed="true"]{background:#f3ece0;color:#14130f;border-color:#f3ece0}
#th-panel .th-desc{font-size:12px;opacity:.75;margin:-4px 0 12px;line-height:1.45}
#th-panel .th-note{font-size:11.5px;opacity:.6;margin:0}
#th-panel button:focus-visible{outline:2px solid #d9a35b;outline-offset:2px}
@media (prefers-reduced-motion:reduce){html[data-art="C"] [data-role="btn"]{transition:none}}

/* filled chips and in-card buttons (small capitals on a solid fill): keep them legible in every style */
html:not([data-art="O"]) [data-role="chip"]{color:var(--th-ink)!important;-webkit-text-fill-color:var(--th-ink)!important}
html[data-art="B"] [data-role="chip"]{background:#b8683a!important;color:#fff8ee!important;-webkit-text-fill-color:#fff8ee!important}

/* text the live site set nearly invisible (dark on dark): readable, still quiet */
html:not([data-art="O"]) [data-faint]{color:var(--cream-dim)!important;opacity:.75}

/* ================= quiet type pairings (David, 7 Oct: "thinking quieter") ================= */
html[data-type="q-garamond"]{--th-d:"EB Garamond",Georgia,serif;--th-b:"Source Sans 3",system-ui,sans-serif;--th-dw:400}
html[data-type="q-spectral"]{--th-d:"Spectral",Georgia,serif;--th-b:"Work Sans",system-ui,sans-serif;--th-dw:300}
html[data-type="q-crimson"]{--th-d:"Crimson Pro",Georgia,serif;--th-b:"Karla",system-ui,sans-serif;--th-dw:300}
html[data-type="q-literata"]{--th-d:"Literata",Georgia,serif;--th-b:"Literata",system-ui,sans-serif;--th-dw:300}
html[data-type="q-alegreya"]{--th-d:"Alegreya",Georgia,serif;--th-b:"Alegreya Sans",system-ui,sans-serif;--th-dw:400}
html[data-type="q-marcellus"]{--th-d:"Marcellus",Georgia,serif;--th-b:"Lato",system-ui,sans-serif;--th-dw:400}
html[data-type="q-gilda"]{--th-d:"Gilda Display",Georgia,serif;--th-b:"Mulish",system-ui,sans-serif;--th-dw:400}
html[data-type="q-italiana"]{--th-d:"Italiana",Georgia,serif;--th-b:"Nunito Sans",system-ui,sans-serif;--th-dw:400}
html[data-type="q-gowun"]{--th-d:"Gowun Batang",Georgia,serif;--th-b:"Gowun Dodum",system-ui,sans-serif;--th-dw:400}
html[data-type="q-bellefair"]{--th-d:"Bellefair",Georgia,serif;--th-b:"Source Sans 3",system-ui,sans-serif;--th-dw:400}
html[data-type="q-petrona"]{--th-d:"Petrona",Georgia,serif;--th-b:"Albert Sans",system-ui,sans-serif;--th-dw:300}
html[data-type="q-lustria"]{--th-d:"Lustria",Georgia,serif;--th-b:"Figtree",system-ui,sans-serif;--th-dw:400}
html[data-type="q-manrope"]{--th-d:"Manrope",Georgia,serif;--th-b:"Manrope",system-ui,sans-serif;--th-dw:300}
html[data-type^="q-"]:not([data-art="O"]) [data-role="title"]{font-weight:var(--th-dw,400)!important;letter-spacing:.01em!important}
html[data-type="q-italiana"] [data-role="title"],html[data-type="q-bellefair"] [data-role="title"],html[data-type="q-marcellus"] [data-role="title"]{letter-spacing:.04em!important}

/* ================= Gallery palettes (David, 7 Oct: away from ochre) ================= */
html[data-art="B"][data-pal="neutral"]{--forest:#1b1c17;--forest-mid:#22231d;--forest-light:#2c2d25;--cream:#f1ece0;--cream-dim:#b3ad9b;--cream-faint:#35362d;--gold:#c9b98f;--gold-dim:#8f845f;--gold-faint:#38341f;--sage:#a8ab8c;--sage-dim:#5e6048;--th-veil:rgba(27,28,23,.8);--th-cveil:rgba(27,28,23,.82);--th-ink:#1b1c17;--th-btn:#6f7752;--th-btnh:#7e8760}
html[data-art="B"][data-pal="cool"]{--forest:#15191b;--forest-mid:#1b2023;--forest-light:#252b2e;--cream:#eef0ea;--cream-dim:#aab2ae;--cream-faint:#2d3437;--gold:#a9bdb0;--gold-dim:#6f8378;--gold-faint:#24302b;--sage:#a9bdb0;--sage-dim:#55665d;--th-veil:rgba(21,25,27,.8);--th-cveil:rgba(21,25,27,.82);--th-ink:#15191b;--th-btn:#5d776d;--th-btnh:#6b877c}
html[data-art="B"][data-pal="neutral"] [data-role="btn"],html[data-art="B"][data-pal="cool"] [data-role="btn"],html[data-art="B"][data-pal="neutral"] [data-role="chip"],html[data-art="B"][data-pal="cool"] [data-role="chip"]{background:var(--th-btn)!important}
html[data-art="B"][data-pal="neutral"] [data-role="btn"]:hover,html[data-art="B"][data-pal="cool"] [data-role="btn"]:hover{background:var(--th-btnh)!important}
html[data-art="B"][data-pal="neutral"] .th-band,html[data-art="B"][data-pal="cool"] .th-band{height:clamp(60px,8vw,110px);box-shadow:inset 0 8px 14px -10px rgba(0,0,0,.45),inset 0 -8px 14px -10px rgba(0,0,0,.45)}

/* ================= real-skyline bands (David, 7 Oct: mirror the hills and the Pinnacle) ================= */
html[data-art="B"] .th-band.th-band-sky{background-position:center bottom!important;background-size:cover!important;height:clamp(90px,13vw,170px);box-shadow:none}
html[data-art="B"] .th-band.th-band-sig{height:clamp(150px,24vw,320px)}

html[data-art="B"][data-sky="on"] h2[data-role="title"]::after{width:64px!important;height:1px!important;background:var(--gold)!important;clip-path:none!important;border-radius:0!important;opacity:.85}

/* draggable panel (7 Oct) */
#th-panel{display:flex;flex-direction:column;align-items:flex-start}
#th-panel .th-toggle,#th-panel .th-grip{cursor:grab;touch-action:none;user-select:none}
#th-panel .th-toggle::before{content:"⠿ ";opacity:.7}
#th-panel .th-grip{height:16px;margin:-8px -6px 6px;background:radial-gradient(circle,rgba(243,236,224,.5) 1.3px,transparent 1.7px) center/8px 8px repeat-x;mask:linear-gradient(90deg,transparent 40%,#000 40%,#000 60%,transparent 60%);-webkit-mask:linear-gradient(90deg,transparent 40%,#000 40%,#000 60%,transparent 60%)}

/* text colour options (David, 7 Oct) */
/* Colour options (7 Oct 2026): global rows (data-hcol, data-bcol, data-acol on html) and per-section overrides (data-sh, data-sb, data-sa on a section).
   Buttons and chips are never recoloured here. */
html:not([data-hcol="d"]) :is(h1,h2,h3,[data-role="title"]),html [data-sh] :is(h1,h2,h3,[data-role="title"]){color:var(--th-hc)!important;-webkit-text-fill-color:var(--th-hc)!important}
html:not([data-hcol="d"]) :is(h1,h2) em,html [data-sh] :is(h1,h2) em{color:var(--th-hc)!important;-webkit-text-fill-color:var(--th-hc)!important;opacity:.85}
html:not([data-bcol="d"]) :is(p,li,[data-f="b"]):not([data-role]):not(button):not(a):not([data-role="btn"] *):not([data-role="chip"] *),html [data-sb] :is(p,li,[data-f="b"]):not([data-role]):not(button):not(a):not([data-role="btn"] *):not([data-role="chip"] *){color:var(--th-bc)!important;-webkit-text-fill-color:var(--th-bc)!important;opacity:1!important}
html:not([data-acol="d"]) [data-role="label"],html [data-sa] [data-role="label"]{color:var(--th-ac)!important;-webkit-text-fill-color:var(--th-ac)!important;opacity:1}
.th-flash{outline:2px solid rgba(217,226,223,.7)!important;outline-offset:-6px!important}
/* panel: the open box is fixed to the viewport (placed by theme.js), tabbed, and scrolls inside itself */
#th-panel .th-box{position:fixed;display:none;flex-direction:column;margin:0;padding:0;overflow:hidden;box-sizing:border-box;max-height:70vh}
#th-panel.open .th-box{display:flex}
#th-panel .th-grip{flex:none;margin:0;padding:0;height:16px}
#th-panel .th-tabs{flex:none;display:flex;gap:4px;padding:0 10px 8px;border-bottom:1px solid rgba(243,236,224,.14)}
#th-panel .th-tabs button{flex:1;background:transparent;border:1px solid rgba(243,236,224,.25);border-radius:6px;padding:7px 4px}
#th-panel .th-tabs button[aria-selected="true"]{background:#f3ece0;color:#14130f;border-color:#f3ece0}
#th-panel .th-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px}
#th-panel .th-tab{display:none}
#th-panel[data-tab="look"] .th-tab-look,#th-panel[data-tab="type"] .th-tab-type,#th-panel[data-tab="colour"] .th-tab-colour{display:block}
#th-panel .th-sel{width:100%;box-sizing:border-box;margin:0 0 12px;padding:8px;font:inherit;color:#f3ece0;background:#1d1b16;border:1px solid rgba(243,236,224,.3);border-radius:6px}
#th-panel .th-hint{font-size:11.5px;opacity:.65;margin:-4px 0 10px}
#th-panel .th-row button:disabled{opacity:.35;cursor:default}
#th-panel .th-sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px;border:1px solid rgba(255,255,255,.35)}

/* visible-screen sizing + "more below" hint (7 Oct) */
#th-panel .th-box{max-height:82vh;max-height:82dvh}
#th-panel .th-scroll{padding-bottom:28px}
#th-panel .th-box::after{content:"More below ↓";position:absolute;left:0;right:0;bottom:0;padding:16px 12px 8px;font-size:11px;letter-spacing:.08em;text-align:center;color:#f3ece0;background:linear-gradient(transparent,rgba(14,12,9,.98) 55%);pointer-events:none;opacity:0;transition:opacity .2s}
#th-panel .th-box.th-more::after{opacity:1}

/* ================= text on light sections (8 Oct): never use the light picks on cream ================= */
html [data-onlight]:is(h1,h2,h3,h4,[data-role="title"]),html [data-onlight]:is(h1,h2,h3,h4) em{color:#2b2620!important;-webkit-text-fill-color:#2b2620!important}
html [data-onlight]:is(p,li,[data-f="b"]):not([data-role="btn"]):not([data-role="chip"]){color:#4a443b!important;-webkit-text-fill-color:#4a443b!important}
html [data-onlight][data-role="label"]{color:#7a5428!important;-webkit-text-fill-color:#7a5428!important}
html [data-num][data-role="title"]{line-height:1!important;margin-bottom:.25em!important;display:block}
html [data-center][data-role="title"]::after{margin-left:auto!important;margin-right:auto!important}