:root {
    --paper: #F8F5E8; --panel: #E5DEBB; --panel-line: #D8CFA2; --ink: #30291D; --navy: #1F2A44;
    --muted: #7A7460; --lime: #D7E34B; --lime-dark: #7F8C1F; --seal: #262619;
    --serif: Georgia, 'Times New Roman', serif;
    --sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: var(--paper); color: var(--ink); font-family: var(--sans); min-height: 100vh; }

  /* ---------- header ---------- */
  header { display: flex; align-items: center; gap: 14px; padding: 16px 26px; background: var(--paper); flex-wrap: wrap; }
  .burger { width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
  .burger i { display: block; height: 2.6px; width: 22px; background: var(--ink); border-radius: 2px; }
  .brandrow { display: flex; align-items: center; gap: 9px; cursor: pointer; }
  .imago { width: 42px; height: 42px; flex: none; }
  .imago img { width: 100%; height: 100%; display: block; }
  .brand { font-family: var(--sans); font-weight: 800; font-size: 17px; letter-spacing: .01em; color: var(--ink); white-space: nowrap; }
  .brand .acc { color: var(--lime-dark); }
  .searchwrap { flex: 1; display: flex; justify-content: center; min-width: 200px; position: relative; }
  .search { width: min(420px, 100%); border: 1.4px solid var(--ink); border-radius: 999px; background: var(--paper); padding: 9px 40px 9px 18px; font: 500 13px var(--sans); color: var(--muted); cursor: text; }
  .search::after { content: "⌕"; position: absolute; right: calc(50% - min(210px, 50%) + 14px); font-size: 17px; color: var(--ink); }
  .pill { border: 1.2px solid var(--ink); background: var(--paper); border-radius: 999px; padding: 8px 14px; font: 700 12px var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap; }
  .pill.lang b { color: var(--lime-dark); }
  .pill.session { font-weight: 600; }
  .pill:hover { background: #fff; }

  /* ---------- breadcrumb — original chip format ---------- */
  .crumbbar { position: sticky; top: 0; z-index: 40; background: rgba(248,245,232,.95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--panel-line); }
  .crumbs { max-width: 1180px; margin: 0 auto; padding: 10px 26px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; }
  .crumb { color: var(--ink); background: #fff; border: 1px solid var(--panel-line); padding: 4px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: all .15s; }
  .crumb:hover { border-color: var(--ink); }
  .crumb.here { background: var(--ink); color: #F8F5E8; border-color: var(--ink); cursor: default; }
  .crumb-sep { color: #B9B29A; font-size: 11px; }

  main { max-width: 1180px; margin: 0 auto; padding: 20px 26px 70px; }
  .page { animation: rise .4s ease both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* ---------- original typography on Tierra canvas ---------- */
  .pagehead { text-align: center; margin: 16px 0 26px; }
  .pagehead .kicker { font: 800 11px var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
  .pagehead h1 { font-size: 42px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin-top: 8px; }
  .pagehead h1 sup { font-size: 16px; }
  .pagehead .ess { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 15.5px; margin-top: 8px; max-width: 640px; margin-left: auto; margin-right: auto; }

  .banner { max-width: 880px; margin: 0 auto 22px; text-align: center; font-family: var(--serif); font-size: 13px; color: var(--muted);
            background: rgba(255,255,255,.55); border: 1.3px solid var(--panel-line); border-radius: 999px; padding: 9px 22px; }
  .banner b { color: var(--ink); }
  .banner.gold { border-color: var(--lime-dark); background: #F4F6D8; color: #5C651B; }

  /* ---------- grid & cards ---------- */
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
  .grid.nine { grid-template-columns: repeat(3, 1fr); }
  .grid.eight { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 1020px) { .grid.eight { grid-template-columns: repeat(2, 1fr); } .grid.nine { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .grid.eight, .grid.nine { grid-template-columns: 1fr; } }

  .tcard { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 16px; cursor: pointer; padding: 14px 14px 16px;
           display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform .18s, box-shadow .18s; }
  .tcard:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(38,38,25,.16); }
  .tcard .art { width: 100%; aspect-ratio: 16/10; }
  .tcard .art.wide { aspect-ratio: 5/2; display: flex; align-items: center; justify-content: center; }
  .tcard .art.stamp { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
  .tcard .art svg { width: 100%; height: 100%; display: block; }
  .tcard .art img.photoplate { max-width: 100%; max-height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 5px 12px rgba(38,38,25,.18)); }
  .tcard .namepill { background: #fff; border: 1.3px solid var(--ink); border-radius: 999px; padding: 8px 20px; font: 800 13.5px var(--sans); color: var(--ink); max-width: 100%; text-align: center; }
  .tcard .ess { font-family: var(--serif); font-style: italic; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.45; min-height: 2.6em; }
  .tcard .meta { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; justify-content: center; }
  .mbadge { font: 800 10.5px var(--sans); letter-spacing: .06em; border-radius: 999px; padding: 4px 11px; border: 1.2px solid transparent; }
  .mbadge.live { background: var(--lime); color: #3C420E; }
  .mbadge.soon { background: transparent; border-color: var(--panel-line); color: var(--muted); }
  .mbadge.lh { background: #fff; border-color: var(--lime-dark); color: var(--lime-dark); }
  .tcard .latin { font: 800 10px var(--sans); letter-spacing: .34em; color: var(--muted); text-transform: uppercase; }

  /* central logo tile — horizontal lockup per brand manual */
  .sealtile { background: transparent; border: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 15px; cursor: default; flex-wrap: wrap; }
  .sealtile .ringimago { width: 104px; height: 104px; filter: drop-shadow(0 8px 18px rgba(38,38,25,.25)); }
  .sealtile .ringimago img { width: 100%; height: 100%; }
  .sealtile .wordmark { font-family: var(--sans); font-weight: 900; font-size: 27px; letter-spacing: -.015em; color: var(--ink); }
  .sealtile .wordmark sup { font-size: 12px; }
  .sealtile .lockupimg { height: 84px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(38,38,25,.2)); }

  /* ---------- mega-menu ---------- */
  .mega { position: fixed; inset: 0; z-index: 90; background: rgba(248,245,232,.97); backdrop-filter: blur(4px); overflow: auto; display: none; }
  .mega.open { display: block; animation: rise .25s ease both; }
  .mega .inner { max-width: none; margin: 0 auto; padding: 22px 60px 46px; min-height: 100vh; display: flex; flex-direction: column; box-sizing: border-box; }
  .mega .closerow { display: flex; margin-bottom: 2px; }
  .ringimago { display: inline-block; line-height: 0; }
  .mega .logorow { display: flex; align-items: center; justify-content: center; gap: 13px; padding: 10px 0 38px; height: 96px; box-sizing: content-box; }
  .mega .logorow .ringimago { width: 96px; height: 96px; }
  .mega .logorow .ringimago img { width: 100%; height: 100%; }
  .mega .logorow .tbname { font: 900 44px var(--sans); letter-spacing: -.02em; color: var(--ink); line-height: 1; }
  .mega .logorow .tbname sup { font-size: 18px; }
  .mega .logorow .lockupimg { height: 96px; max-width: 90vw; object-fit: contain; }
  .mega .x { font-size: 30px; font-weight: 800; background: none; border: 0; cursor: pointer; color: var(--ink); line-height: 1; }
  .megagrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 70px; flex: 1; align-content: space-evenly; justify-items: stretch; }
  @media (max-width: 900px) { .megagrid { grid-template-columns: repeat(2, 1fr); gap: 26px 30px; } }
  .megacol { text-align: center; }
  .megacol h4 { font-size: 23px; font-weight: 800; margin-bottom: 12px; cursor: pointer; }
  .megacol h4:hover { color: var(--lime-dark); }
  .megacol a { display: block; font-family: var(--serif); font-size: 15.5px; color: var(--muted); padding: 4.5px 0; cursor: pointer; }
  .megacol a:hover { color: var(--ink); }

  /* ---------- soon ---------- */
  .soonwrap { text-align: center; padding: 46px 20px 30px; }
  .soonwrap .emblem { width: 150px; height: 150px; margin: 0 auto 22px; }
  .soonwrap h2 { font-size: 28px; font-weight: 800; }
  .soonwrap p { font-family: var(--serif); font-style: italic; color: var(--muted); margin-top: 10px; }
  .soonwrap .path { font-family: var(--serif); margin-top: 24px; font-size: 13px; color: var(--muted); }
  .soonwrap .namepill { display: inline-block; background: #fff; border: 1.3px solid var(--ink); border-radius: 999px; padding: 8px 22px; font: 800 14px var(--sans); margin-top: 18px; }

  /* ---------- feed ---------- */
  .feed { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
  .fcard { background: #FFFEF7; border: 1px solid var(--panel-line); border-radius: 16px; overflow: hidden; transition: box-shadow .18s; }
  .fcard:hover { box-shadow: 0 12px 26px rgba(38,38,25,.12); }
  .fcard .fart { width: 100%; display: block; background: var(--panel); }
  .fcard .fart svg { width: 100%; display: block; }
  .fcard .fbody { padding: 15px 20px 17px; }
  .fcard h3 { font-size: 20px; font-weight: 800; line-height: 1.3; }
  .fcard p { font-family: var(--serif); font-size: 14px; color: #55523F; line-height: 1.6; margin-top: 7px; }
  .fcard .fmeta { display: flex; gap: 7px; align-items: center; margin-bottom: 9px; flex-wrap: wrap; }
  .chip { font: 800 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; border: 1.2px solid transparent; }
  .chip.article { background: var(--panel); color: #56522F; }
  .chip.reel { background: var(--seal); color: #EDEBDD; }
  .chip.link { background: #fff; border-color: var(--ink); color: var(--ink); }
  .chip.ad { background: #F4F6D8; border-color: var(--lime-dark); color: #5C651B; }
  .chip.pin { background: var(--lime); color: #3C420E; }
  .fsub { font-size: 11.5px; color: var(--muted); font-weight: 700; }
  .fcard.reel { background: #22211A; border-color: #22211A; }
  .fcard.reel h3 { color: #F4F2E4; }
  .fcard.reel p { color: #B9B5A0; }
  .fcard.ad { border: 1.5px solid var(--lime-dark); background: #FCFDF2; }
  .linkrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 800 12px var(--sans); color: var(--ink); }
  .linkrow .pillbtn { border: 1.2px solid var(--ink); border-radius: 999px; padding: 5px 14px; background: #fff; }

  footer { padding: 30px 20px 44px; text-align: center; color: var(--muted); font-family: var(--serif); font-size: 12.5px; }
  footer .dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
  footer .dots i { width: 9px; height: 9px; border-radius: 50%; background: #C9C2A2; }
  footer .dots i.on { background: var(--lime); outline: 1.4px solid var(--lime-dark); }

/* ---------- SSR adjustments (server-rendered links replace JS navigation) ---------- */
a { text-decoration: none; }
a.tcard, a.crumb { color: inherit; }
a.brandrow { color: inherit; }
.megacol h4 a { color: inherit; }
.pill.lang { display: inline-block; }

/* ============================================================
   Dark mode — the night reading room (Blueprint §7.5).
   The chrome goes dark; the cards remain paper, so the artist's
   plates and the Domain Motifs are untouched. Token values come
   from the database (settings.theme_dark) as --dk-* variables.
   ============================================================ */
html[data-theme="dark"] body { background: var(--dk-bg); color: var(--dk-text); }
html[data-theme="dark"] header { background: var(--dk-bg); }
html[data-theme="dark"] .burger i { background: var(--dk-text); }
html[data-theme="dark"] .brand { color: var(--dk-text); }
html[data-theme="dark"] .search { background: transparent; border-color: var(--dk-line); color: var(--dk-muted); }
html[data-theme="dark"] .searchwrap .search::after { color: var(--dk-muted); }
html[data-theme="dark"] .pill { background: transparent; border-color: var(--dk-line); color: var(--dk-text); }
html[data-theme="dark"] .pill:hover { background: var(--dk-chip); }
html[data-theme="dark"] .crumbbar { background: rgba(20,17,12,.95); border-bottom-color: var(--dk-line); }
html[data-theme="dark"] .crumb { background: var(--dk-chip); border-color: var(--dk-line); color: var(--dk-text); }
html[data-theme="dark"] .crumb:hover { border-color: var(--dk-muted); }
html[data-theme="dark"] .crumb.here { background: var(--dk-text); color: var(--dk-bg); border-color: var(--dk-text); }
html[data-theme="dark"] .crumb-sep { color: var(--dk-line); }
html[data-theme="dark"] .pagehead h1 { color: var(--dk-text); }
html[data-theme="dark"] .pagehead .kicker, html[data-theme="dark"] .pagehead .ess { color: var(--dk-muted); }
html[data-theme="dark"] .banner { background: var(--dk-chip); border-color: var(--dk-line); color: var(--dk-muted); }
html[data-theme="dark"] .banner b { color: var(--dk-text); }
html[data-theme="dark"] .banner.gold { background: #23240F; border-color: var(--lime-dark); color: var(--lime); }
html[data-theme="dark"] .soonwrap h2 { color: var(--dk-text); }
html[data-theme="dark"] .soonwrap p, html[data-theme="dark"] .soonwrap .path { color: var(--dk-muted); }
html[data-theme="dark"] footer { color: var(--dk-muted); }
html[data-theme="dark"] footer .dots i { background: var(--dk-line); }
html[data-theme="dark"] footer .dots i.on { background: var(--lime); outline-color: var(--lime-dark); }
html[data-theme="dark"] .mega { background: rgba(20,17,12,.97); }
html[data-theme="dark"] .mega .x { color: var(--dk-text); }
html[data-theme="dark"] .mega .logorow { background: var(--dk-plate); border-radius: 20px; padding: 12px 34px; margin: 0 auto 38px; width: max-content; max-width: 92vw; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
html[data-theme="dark"] .megacol h4 { color: var(--dk-text); }
html[data-theme="dark"] .megacol h4:hover { color: var(--lime); }
html[data-theme="dark"] .megacol a { color: var(--dk-muted); }
html[data-theme="dark"] .megacol a:hover { color: var(--dk-text); }

/* brand wordmark colors come from tokens (name = ink, TLD = gold) */
.brand .bname { color: var(--ink); }
.brand .btld { color: var(--gold); }
html[data-theme="dark"] .brand .bname { color: var(--dk-text); }
/* dark: the official lockups keep their paper behind them, like labels in the night room */
html[data-theme="dark"] .sealtile { background: var(--dk-plate); border-radius: 20px; padding: 20px 10px; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.fcard h3 { color: var(--ink); }
.fcard.reel h3 { color: #F4F2E4; }

/* ---------- search: the header form and the results page ---------- */
.searchform { position: relative; width: min(420px, 100%); }
.searchform .search { width: 100%; padding-right: 40px; }
.searchform input.search::placeholder { color: var(--muted); }
.searchform .mag { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0;
  font-size: 17px; color: var(--ink); cursor: pointer; padding: 4px 8px; }
html[data-theme="dark"] .searchform .mag { color: var(--dk-muted); }
html[data-theme="dark"] .searchform input.search::placeholder { color: var(--dk-muted); }

.ssection { max-width: 880px; margin: 0 auto 30px; }
.ssection h2 { font: 800 12px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 26px 4px 12px; }
html[data-theme="dark"] .ssection h2 { color: var(--dk-muted); }
.srow { display: flex; gap: 16px; align-items: center; background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: 14px; padding: 10px 16px 10px 10px; margin-bottom: 10px; transition: transform .15s, box-shadow .15s; }
.srow:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(38,38,25,.14); }
.srow .sthumb { width: 96px; flex: none; aspect-ratio: 4/3; border-radius: 9px; overflow: hidden; background: rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center; }
.srow .sthumb svg, .srow .sthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srow .sbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.srow .sbody b { font-size: 15px; color: var(--ink); }
.srow .spath { font-family: var(--serif); font-style: italic; font-size: 11.5px; color: var(--muted); }
.srow .sess { font-family: var(--serif); font-size: 12.5px; color: #55523F; }
.srow .ssub { font-size: 11px; font-weight: 700; color: var(--muted); }
.srow .mbadge, .srow .chip { flex: none; }