/* Inter — the official tierraalavista® typeface (variable: weight 100–900, oblique) */
  @font-face {
    font-family: "Inter";
    src: url("/public/fonts/Inter-Variable.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-style: oblique 0deg 10deg;
    font-display: swap;
  }
  :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: 'Inter', -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: 900; font-size: 20px; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
  .brand sup { font-size: 10.5px; margin-left: 1px; }
  .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(--gold); }
  .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; }
  /* ---------- the home mosaic — the original tierraalavista® quilt (Carlos, F pura) ---------- */
  .grid.nine { grid-template-columns: repeat(24, 1fr); gap: 18px; }
  .grid.nine > .tcard:nth-child(1) { grid-column: span 6; }
  .grid.nine > .tcard:nth-child(2) { grid-column: span 11; }
  .grid.nine > .tcard:nth-child(3) { grid-column: span 7; }
  .grid.nine > .tcard:nth-child(4) { grid-column: span 8; }
  .grid.nine > .tcard:nth-child(5) { grid-column: span 8; }
  .grid.nine > .tcard:nth-child(6) { grid-column: span 8; }
  .grid.nine > .tcard:nth-child(7) { grid-column: span 6; }
  .grid.nine > .tcard:nth-child(8) { grid-column: span 10; }
  .grid.nine > .tcard:nth-child(9) { grid-column: span 8; }
  .grid.nine .tcard { border-radius: 26px; padding: 10px 8px 14px; justify-content: center; gap: 8px; position: relative; overflow: hidden; }
  /* la película de ocho — the rolling film window on the realm tiles
     (art-side pivot, Aug 14 2026; replaces the eight-plate carousel).
     The film layer covers the full card inside the 1px border; the strip is
     two copies of the closed-loop film drifting right-to-left; translateX(-50%)
     equals exactly one film width, so the splice is seamless at any height.
     The art span below remains the invisible height spacer; the name pill
     floats on the lower hem above the film. */
  .grid.nine .tcard .film { position: absolute; inset: 0; z-index: 0; overflow: hidden; display: block; }
  .grid.nine .tcard .filmstrip { position: absolute; top: 0; bottom: 0; left: 0; display: flex; width: max-content; height: 100%; animation: filmroll var(--dur, 170s) linear infinite; will-change: transform; }
  .grid.nine .tcard .filmstrip picture { display: block; height: 100%; flex: none; }
  .grid.nine .tcard .filmimg { display: block; height: 100%; width: auto; }
  @keyframes filmroll { to { transform: translateX(-50%); } }
  .grid.nine .tcard .film.idle .filmstrip { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) { .grid.nine .tcard .filmstrip { animation: none; } }
  .grid.nine .tcard .namepill { position: relative; z-index: 2; }
  .grid.nine .tcard .art { aspect-ratio: auto; height: 244px; width: 100%; display: flex; align-items: center; justify-content: center; }
  .grid.nine .tcard .art img.photoplate { max-height: 244px; max-width: 99%; }
  .grid.nine .tcard .ess, .grid.nine .tcard .meta, .grid.nine .tcard .latin { display: none; }
  .grid.nine .sealtile { padding: 0; gap: 14px; flex-direction: column; }
  .grid.nine .sealtile .ringimago { width: 128px; height: 128px; }
  .grid.nine .sealtile .wordmark { font-size: 46px; }
  .grid.nine .sealtile .wordmark sup { font-size: 18px; }
  .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: 1fr; gap: 14px; }
    /* :nth-child(n) matches all with the same specificity as the desktop span
       rules, so the single column truly wins on the phone (fix, Aug 2026) */
    .grid.nine > .tcard:nth-child(n) { grid-column: 1 / -1; }
    /* the phone hole is exactly 2:1 — one clean number for the plate atelier */
    .grid.nine .tcard:not(.sealtile) { aspect-ratio: 2 / 1; justify-content: flex-end; }
    .grid.nine .tcard:not(.sealtile) .art { display: none; }
    .grid.nine .sealtile .ringimago { width: 92px; height: 92px; }
    .grid.nine .sealtile .wordmark { font-size: 32px; }
  }
  @media (max-width: 480px) { .grid.eight { 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; }
  /* la acuarela de dominio — the level-2 hole is 16:9 (art side, Aug 16 2026):
     each domain plate is its eight sub-domains in a row, so a 4:3 hole would
     either lose two of the eight or leave a quarter of the card empty. The
     440×248 tier serves 1×, the 880×495 tier 2× via srcset; the wash sails
     when the plate is not on disk. Domain Motifs v1 retired the same day. */
  .tcard .art.stamp { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px; }
  .tcard .art.stamp img.aqua { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tcard .art.stamp img.aqua.encajada { object-fit: contain; }
  .tcard .art.stamp .wash { display: block; width: 100%; height: 100%; }
  .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; }
  /* the name and its essence ride a touch lower on grid cards (Carlos, Aug 2026) */
  .grid:not(.nine) .tcard .namepill { margin-top: 8px; }
  /* la acuarela a los bordes — the domain card (.dom), Carlos's "C" of Aug 16 2026:
     the watercolour touches the top and both sides of the card (the card's own
     radius clips its upper corners, the lower edge stays straight), and the name
     pill rides the lower hem, half on the art and half on the paper, like a seal;
     the essence keeps the card's side margins below. */
  .grid:not(.nine) .tcard.dom { padding: 0 0 16px; overflow: hidden; }
  .grid:not(.nine) .tcard.dom .art.stamp { border-radius: 0; }
  .grid:not(.nine) .tcard.dom .namepill { margin-top: -19px; position: relative; z-index: 2; box-shadow: 0 4px 10px rgba(38,38,25,.14); }
  .grid:not(.nine) .tcard.dom .ess, .grid:not(.nine) .tcard.dom .meta, .grid:not(.nine) .tcard.dom .latin { margin-left: 14px; margin-right: 14px; }
  .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: 84px; height: 84px; 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: 30px; letter-spacing: -.015em; color: var(--ink); }
  .sealtile .wordmark sup { font-size: 13px; }
  .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.just { height: auto; padding: 3px 0 57px; }
  .mega .meganame { text-align: center; width: 100%; font: 900 46px var(--sans); letter-spacing: -.01em; color: var(--ink); line-height: 1; white-space: nowrap; }
  .mega .meganame .reg { font-size: 17px; vertical-align: super; }
  .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; }

  /* ---------- LA GALERÍA · El Muestrario (view switch on feeds) ----------
     River is the default; the gallery is art + chip + title only.
     One remembered preference for the whole Guide (guide-feedview). */
  .viewswitch { display: inline-flex; margin-top: 14px; border: 1.2px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--paper); }
  .vs-opt { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 8px 15px; font: 700 12.5px var(--sans); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
  .vs-opt:hover { color: var(--ink); }
  .vs-opt.on { background: var(--ink); color: var(--paper); }
  html.feedview-gallery .feed { max-width: 1200px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
  html.feedview-gallery .fcard h3 { font-size: 16.5px; }
  html.feedview-gallery .fcard p,
  html.feedview-gallery .fcard .fsub,
  html.feedview-gallery .fcard .linkrow { display: none; }
  html.feedview-gallery .fcard .fbody { padding: 12px 15px 14px; }
  html.feedview-gallery .fcard .fmeta { margin-bottom: 7px; }
  @media (max-width: 1020px) { html.feedview-gallery .feed { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 680px) { html.feedview-gallery .feed { grid-template-columns: 1fr; } }

  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; font-family: var(--sans); }
.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"] .viewswitch { background: transparent; border-color: var(--dk-line); }
html[data-theme="dark"] .vs-opt { color: var(--dk-muted); }
html[data-theme="dark"] .vs-opt:hover { color: var(--dk-text); }
html[data-theme="dark"] .vs-opt.on { background: var(--dk-text); color: var(--dk-bg); }
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"] .mega .logorow.just { background: transparent; border-radius: 0; padding: 3px 0 57px; margin: 0; width: 100%; max-width: none; box-shadow: none; }
html[data-theme="dark"] .mega .meganame { color: var(--dk-text); }
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); font-style: oblique 7.5deg; font-variation-settings: "slnt" -7.5; padding-right: 1px; }
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: transparent; border-radius: 0; padding: 0; box-shadow: none; }
/* night goldwork: by night the golden elements borrow the emblem ring's own gold (#FAE18E) —
   the seal's name, the masthead .guide, and the active language letter. Day keeps the working gold. */
html[data-theme="dark"] .sealtile .wordmark { color: #FAE18E; }
html[data-theme="dark"] .brand .btld { color: #FAE18E; }
html[data-theme="dark"] .pill.lang b { color: #FAE18E; }
.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; }
/* a domain row's thumb is 16:9 like its card, so the eight sub-domains all fit (Aug 16 2026) */
.srow .sthumb.wide { aspect-ratio: 16/9; width: 112px; }
.srow .sthumb .wash { display: block; width: 100%; height: 100%; }
.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; }


/* ============================================================
   EL EXPEDIENTE — dossier styles (Dossier v2, approved).
   Panels stay paper in the dark; chrome follows the night. 
   ============================================================ */
.dsr-doc { max-width: 1240px; margin: 0 auto 60px; padding: 0 26px; }
.dsr-cover { padding-top: 6px; }
.dsr-folioline { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.dsr-title { font-size: 36px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 2px; }
.dsr-locline { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--muted); }
.dsr-stamps { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.dsr-foliostamp { display: flex; align-items: center; gap: 10px; border: 1.4px solid var(--gold); border-radius: 12px; padding: 7px 14px; background: #FFFEF7; color: var(--ink); }
.dsr-foliostamp b { font-size: 12px; letter-spacing: .04em; display: block; }
.dsr-foliostamp em { font-style: normal; font-size: 10.5px; color: var(--muted); display: block; }
.dsr-seal { width: 28px; height: 28px; border-radius: 50%; background: center/cover no-repeat url("/public/brand/sivinm.png?v=2"); flex: none; border: 2px solid var(--gold); }
.dsr-seal.big { width: 34px; height: 34px; }
.dsr-vstamp { font: 800 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #3C420E; background: var(--lime); border-radius: 999px; padding: 5px 12px; }
.dsr-statband { display: flex; gap: 10px; margin: 16px 0 0; flex-wrap: wrap; }
.dsr-stat { flex: 1; min-width: 100px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px; padding: 10px 8px; text-align: center; color: var(--ink); }
.dsr-stat b { display: block; font-size: 16px; }
.dsr-stat span { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6F6A4E; }
.dsr-heroband { display: grid; grid-template-columns: 1fr 300px; gap: 14px; margin-top: 16px; }
.dsr-heroplate { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--panel-line); cursor: pointer; }
.dsr-heroplate svg, .dsr-sideplate svg, .dsr-roomplate svg { display: block; width: 100%; height: 100%; }
.dsr-heroside { display: flex; flex-direction: column; gap: 12px; }
.dsr-sideplate { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--panel-line); cursor: pointer; flex: 1; min-height: 92px; }
.dsr-lbl { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: #FFFEF7; border: 1.2px solid var(--ink); border-radius: 999px; padding: 4px 12px; font: 800 11px var(--sans); color: var(--ink); white-space: nowrap; }
.dsr-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-58%); width: 46px; height: 46px; border-radius: 50%; background: rgba(248,245,232,.88); display: flex; align-items: center; justify-content: center; font-size: 17px; color: #30291D; padding-left: 3px; }
.dsr-play.big { width: 66px; height: 66px; font-size: 22px; }

.dsr-chapnav { position: sticky; top: 0; z-index: 30; background: var(--paper); border-top: 1px solid var(--panel-line); border-bottom: 1px solid var(--panel-line); margin: 22px -26px 0; }
.dsr-chapnav .inner { max-width: 1240px; margin: 0 auto; padding: 9px 26px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dsr-chapnav a { font: 800 12px var(--sans); padding: 6px 11px; border-radius: 999px; color: var(--muted); text-decoration: none; }
.dsr-chapnav a:hover { color: var(--ink); }
.dsr-chapnav a.on { background: var(--ink); color: var(--paper); }
.dsr-actmini { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.dsr-actmini .p { font-weight: 800; font-size: 13px; }
.dsr-neg { background: var(--lime); color: #3C420E; border: 1.3px solid var(--lime-dark); border-radius: 999px; padding: 7px 18px; font: 800 12.5px var(--sans); cursor: pointer; }
.dsr-mini { border: 1.2px solid var(--panel-line); background: #FFFEF7; border-radius: 999px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; color: var(--ink); }
.dsr-mini.saved { color: #B0483A; }

.dsr-chapter { padding-top: 34px; scroll-margin-top: 118px; }
.dsr-chaphead { display: flex; align-items: baseline; gap: 14px; border-bottom: 1.5px solid var(--panel-line); padding-bottom: 10px; margin-bottom: 20px; scroll-margin-top: 76px; }
.dsr-chaphead .num { font-family: var(--serif); font-size: 26px; color: var(--gold); }
.dsr-chaphead h2 { font-size: 22px; font-weight: 800; }
.dsr-chaphead .sub { margin-left: auto; font: italic 12.5px var(--serif); color: var(--muted); }
.dsr-grid2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.dsr-grid2r { display: grid; grid-template-columns: 1fr 1.5fr; gap: 18px; align-items: start; }
.dsr-colgap { display: flex; flex-direction: column; gap: 14px; }
.dsr-panel { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 16px; padding: 18px 20px; color: var(--ink); }
.dsr-panel h3 { font-size: 15px; margin-bottom: 10px; }
.dsr-panel h3.c { text-align: center; }
.dsr-prose { font-family: var(--serif); font-size: 14.5px; line-height: 1.75; color: #55523F; }
.dsr-prose + .dsr-prose { margin-top: 12px; }
.dsr-prose.sm { font-size: 13.5px; } .dsr-prose.xs { font-size: 12.5px; margin-bottom: 6px; } .dsr-prose.it { font-style: italic; }
html[data-theme="dark"] .dsr-doc > * > .dsr-prose, html[data-theme="dark"] .dsr-grid2 > div > .dsr-prose { color: var(--dk-muted); }
.dsr-curator { border: 1.4px solid var(--gold); background: #FFFEF7; border-radius: 16px; padding: 18px 22px; margin-top: 18px; color: var(--ink); }
.dsr-curator .k { font: 800 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.dsr-curator p { font-family: var(--serif); font-style: italic; font-size: 14.5px; line-height: 1.7; }
.dsr-curator .sig { text-align: right; font: 800 12px var(--sans); margin-top: 10px; color: var(--muted); }
.dsr-icons { display: flex; justify-content: space-around; gap: 6px; flex-wrap: wrap; }
.dsr-ic { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; text-align: center; min-width: 58px; color: var(--ink); }
.dsr-ic svg { width: 26px; height: 26px; }
.dsr-infogrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px 6px; }

.dsr-roomchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.dsr-rchip { background: #FFFEF7; border: 1.2px solid var(--panel-line); border-radius: 999px; padding: 7px 16px; font: 800 12.5px var(--sans); cursor: pointer; color: var(--ink); }
.dsr-rchip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dsr-roomview { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: stretch; }
.dsr-roomplate { border-radius: 16px; overflow: hidden; border: 1px solid var(--panel-line); cursor: pointer; min-height: 240px; }
.dsr-roomdesc { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 16px; padding: 18px 20px; color: var(--ink); }
.dsr-roomdesc h3 { font-size: 17px; margin-bottom: 8px; }
.dsr-roomdesc p { font-family: var(--serif); font-size: 14px; line-height: 1.7; color: #55523F; }
.dsr-roomdesc ul { margin-top: 10px; list-style: none; }
.dsr-roomdesc li { font-size: 12.5px; font-weight: 700; padding: 3px 0 3px 16px; position: relative; }
.dsr-roomdesc li::before { content: "✦"; position: absolute; left: 0; color: var(--lime-dark); font-size: 10px; }

.dsr-distlist { list-style: none; }
.dsr-distlist li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 7px 0; border-bottom: 1px dashed var(--panel-line); }
.dsr-distlist li:last-child { border-bottom: none; }
.dsr-distlist b { font-weight: 800; } .dsr-distlist span { color: #6F6A4E; font-weight: 700; }
.dsr-climate { display: flex; gap: 10px; flex-wrap: wrap; }
.dsr-clim { flex: 1; min-width: 96px; background: #FFFEF7; border: 1px solid var(--panel-line); border-radius: 12px; padding: 10px; text-align: center; }
.dsr-clim b { display: block; font-size: 15.5px; }
.dsr-clim span { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6F6A4E; }
.dsr-crossrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dsr-cross { font-size: 11.5px; }

.dsr-bigprice { text-align: center; padding: 20px 16px 16px; }
.dsr-bigprice .k { font: 800 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #6F6A4E; }
.dsr-bigprice .v { font-size: 31px; font-weight: 800; letter-spacing: -.02em; }
.dsr-bigprice .per { font-family: var(--serif); font-style: italic; font-size: 13px; color: #6F6A4E; margin-top: 4px; }
.dsr-zonebar { margin-top: 14px; }
.dsr-zonebar .row { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.dsr-zonebar .lbl2 { width: 108px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #6F6A4E; text-align: right; }
.dsr-zonebar .track { flex: 1; height: 16px; border-radius: 8px; background: #FFFEF7; border: 1px solid var(--panel-line); overflow: hidden; display: block; }
.dsr-zonebar .fill { height: 100%; border-radius: 8px; display: block; }
.dsr-zonebar .f1 { background: var(--lime); border-right: 2px solid var(--lime-dark); }
.dsr-zonebar .f2 { background: var(--gold); opacity: .75; }
.dsr-zonebar .val { width: 72px; font-size: 11px; font-weight: 800; }
.dsr-zonenote { font: italic 12px var(--serif); color: var(--muted); margin-top: 8px; text-align: center; }
.dsr-costrows { list-style: none; }
.dsr-costrows li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 7px 0; border-bottom: 1px dashed var(--panel-line); }
.dsr-costrows li:last-child { border-bottom: none; }
.dsr-costrows b { font-weight: 800; text-align: right; }
.dsr-disc { font: italic 11.5px var(--serif); color: var(--muted); margin-top: 10px; text-align: center; }
.dsr-sim label { display: block; font: 800 11px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #6F6A4E; margin: 12px 0 4px; }
.dsr-sim input[type=range] { width: 100%; accent-color: var(--lime-dark); }
.dsr-sim select { width: 100%; font: 700 13px var(--sans); padding: 8px 12px; border-radius: 10px; border: 1.2px solid var(--panel-line); background: #FFFEF7; color: var(--ink); }
.dsr-rate { font: 800 14px var(--sans); }
.dsr-rate em { font-style: normal; font-weight: 600; color: var(--muted); font-size: 11px; }
.dsr-simout { margin-top: 14px; background: #FFFEF7; border: 1.4px solid var(--lime-dark); border-radius: 14px; text-align: center; padding: 14px; }
.dsr-simout b { display: block; font-size: 23px; }
.dsr-simout span { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6F6A4E; }

.dsr-verifband { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.dsr-verifband .orb { width: 48px; height: 48px; border-radius: 50%; background: center/cover no-repeat url("/public/brand/sivinm.png?v=2"); border: 2.5px solid var(--gold); flex: none; }
.dsr-verifband b { font-size: 15px; display: block; }
.dsr-verifband em { font-style: normal; font-size: 11.5px; color: #6F6A4E; font-weight: 700; }
.dsr-checklist { list-style: none; }
.dsr-checklist li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; padding: 8px 0; border-bottom: 1px dashed var(--panel-line); }
.dsr-checklist li:last-child { border-bottom: none; }
.dsr-checklist em { font-style: normal; font-weight: 600; color: var(--muted); font-size: 11px; }
.dsr-check { width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: #3C420E; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; flex: none; border: 1.2px solid var(--lime-dark); }
.dsr-check.pend { background: #FFFEF7; color: var(--muted); border: 1.2px solid var(--panel-line); }
.dsr-honesty { border-left: 4px solid var(--gold); padding-left: 14px; }
.dsr-honesty p { font-family: var(--serif); font-size: 13.5px; line-height: 1.7; color: #55523F; }
.dsr-tagrow { display: flex; gap: 8px; flex-wrap: wrap; }
.dsr-tago { font: 800 11px var(--sans); border: 1.2px solid var(--lime-dark); color: #5C651B; background: rgba(215,227,75,.18); border-radius: 999px; padding: 5px 12px; }
.dsr-tagx { font: 800 11px var(--sans); border: 1.2px solid var(--panel-line); color: var(--muted); border-radius: 999px; padding: 5px 12px; }

.dsr-closing { margin-top: 38px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 18px; padding: 24px; text-align: center; color: var(--ink); }
.dsr-closing h2 { font-size: 20px; margin-bottom: 14px; }
.dsr-closing .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dsr-cbtn { border: 1.4px solid var(--ink); background: #FFFEF7; border-radius: 999px; padding: 11px 24px; font: 800 13.5px var(--sans); cursor: pointer; color: var(--ink); }
.dsr-cbtn.solid { background: var(--lime); color: #3C420E; border-color: var(--lime-dark); font-size: 15px; }
.dsr-similar { margin-top: 26px; }
.dsr-similar h2 { text-align: center; font-size: 19px; margin-bottom: 14px; }
.dsr-simcards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.dsr-scard { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; overflow: hidden; color: var(--ink); }
.dsr-scart svg { display: block; width: 100%; height: 110px; }
.dsr-scard .cap { padding: 10px 14px; }
.dsr-scard b { font-size: 13.5px; display: block; }
.dsr-scard span { font: italic 12px var(--serif); color: #6F6A4E; }
.dsr-foliofoot { text-align: center; margin-top: 34px; }
.dsr-foliofoot .stampline { display: inline-flex; align-items: center; gap: 10px; border: 1.4px solid var(--gold); border-radius: 14px; padding: 10px 20px; background: #FFFEF7; color: var(--ink); text-align: left; }
.dsr-foliofoot b { font-size: 12px; letter-spacing: .04em; display: block; }
.dsr-foliofoot em { font-style: normal; font-size: 10.5px; color: var(--muted); display: block; }
.dsr-foliofoot p { font: italic 11.5px var(--serif); color: var(--muted); margin-top: 10px; }

.dsr-overlay { position: fixed; inset: 0; background: rgba(26,22,14,.55); display: none; align-items: center; justify-content: center; z-index: 60; padding: 24px; }
.dsr-overlay.open { display: flex; }
.dsr-modal { background: var(--paper); border-radius: 20px; max-width: 880px; width: 100%; padding: 30px 34px 34px; position: relative; box-shadow: 0 30px 80px rgba(0,0,0,.35); color: var(--ink); }
.dsr-modal.narrow { max-width: 540px; }
.dsr-modal .close { position: absolute; top: 16px; right: 20px; font-size: 21px; cursor: pointer; background: none; border: none; color: var(--ink); }
.dsr-modal h2 { text-align: center; font-size: 23px; margin-bottom: 16px; }
.dsr-modal .bigframe { border-radius: 14px; overflow: hidden; border: 1px solid var(--panel-line); position: relative; }
.dsr-modal .bigframe svg { display: block; width: 100%; }
.dsr-caption { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(248,245,232,.92); font: 600 12.5px var(--sans); color: var(--ink); padding: 10px 16px; }
.dsr-strip { display: flex; gap: 8px; margin-top: 10px; }
.dsr-strip .thumb { flex: 1; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; }
.dsr-strip .thumb.on { border-color: var(--lime-dark); }
.dsr-strip .thumb svg { display: block; width: 100%; height: 62px; }
.dsr-maplegend { text-align: center; font: italic 12.5px var(--serif); color: var(--muted); margin-top: 10px; }
.dsr-gate { text-align: center; padding: 6px 14px 2px; }
.dsr-gate .gseal { display: block; width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px; background: center/cover no-repeat url("/public/brand/imagotype.png"); }
.dsr-gate h2 { margin-bottom: 8px; }
.dsr-gate p { font-family: var(--serif); color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.dsr-gate .row { display: flex; gap: 12px; justify-content: center; }
.dsr-gate .pillbtn { cursor: pointer; }
.dsr-gate .pillbtn.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.dossier { background: var(--gold); color: #3B2F14; }
.pillbtn.gold { border-color: var(--gold); background: #FFF9E8; }

/* dossier · the night reading room */
html[data-theme="dark"] .dsr-title { color: var(--dk-text); }
html[data-theme="dark"] .dsr-locline, html[data-theme="dark"] .dsr-foliofoot p, html[data-theme="dark"] .dsr-zonenote { color: var(--dk-muted); }
html[data-theme="dark"] .dsr-chapnav { background: var(--dk-bg); border-color: var(--dk-line); }
html[data-theme="dark"] .dsr-chapnav a { color: var(--dk-muted); }
html[data-theme="dark"] .dsr-chapnav a:hover { color: var(--dk-text); }
html[data-theme="dark"] .dsr-chapnav a.on { background: var(--lime); color: #3C420E; }
html[data-theme="dark"] .dsr-actmini .p { color: var(--dk-text); }
html[data-theme="dark"] .dsr-mini { background: var(--dk-chip); border-color: var(--dk-line); color: var(--dk-text); }
html[data-theme="dark"] .dsr-chaphead { border-color: var(--dk-line); }
html[data-theme="dark"] .dsr-chaphead h2 { color: var(--dk-text); }
html[data-theme="dark"] .dsr-chaphead .sub { color: var(--dk-muted); }
html[data-theme="dark"] .dsr-grid2 > div > .dsr-prose, html[data-theme="dark"] .dsr-doc > .dsr-chapter > .dsr-grid2 > div .dsr-prose:not(.dsr-panel .dsr-prose) { color: var(--dk-muted); }
html[data-theme="dark"] .dsr-rchip { background: var(--dk-chip); border-color: var(--dk-line); color: var(--dk-text); }
html[data-theme="dark"] .dsr-rchip.on { background: var(--lime); color: #3C420E; border-color: var(--lime); }
html[data-theme="dark"] .dsr-similar h2, html[data-theme="dark"] .dsr-closing h2 { color: inherit; }
html[data-theme="dark"] .dsr-similar > h2 { color: var(--dk-text); }
@media (max-width: 980px) {
  .dsr-heroband, .dsr-grid2, .dsr-grid2r, .dsr-roomview, .dsr-simcards { grid-template-columns: 1fr; }
  .dsr-chaphead .sub { display: none; }
}

/* ============================================================
   EL DESPERTAR — la postal de ciudad (model C, approved Aug 2026).
   Hero engraving + when/crossings at a glance, the portrait in
   three paragraphs beside a hand-drawn map, the eight sleeping
   doors. One click on the map → full screen. Chrome follows the
   theme; the maps stay parchment by night, like every plate in
   the night reading room.
   ============================================================ */
.postal .po-top { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: stretch; }
.po-hero { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 22px; overflow: hidden; min-height: 300px; }
.po-hero svg { width: 100%; height: 100%; display: block; }
.po-side { display: flex; flex-direction: column; gap: 14px; }
.po-card { background: rgba(255,255,255,.55); border: 1px solid var(--panel-line); border-radius: 16px; padding: 15px 18px; flex: 1; }
.po-cardhead { font: 800 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.po-when { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 10px; }
.po-cell b { font-size: 15px; display: block; color: var(--ink); }
.po-cell span { font-size: 12px; color: var(--muted); }
.po-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.po-chip { border: 1px solid var(--panel-line); border-radius: 999px; padding: 5px 12px; font: 700 12px var(--sans); background: #FFFEF7; color: var(--ink); }
.po-chip:hover { border-color: var(--ink); }
.postal .po-main { display: grid; grid-template-columns: 1.1fr .95fr; gap: 30px; align-items: start; margin-top: 30px; }
.po-grafs p { font-family: var(--serif); font-size: 15.5px; line-height: 1.75; color: #3A3428; }
.po-grafs p + p { margin-top: 14px; }
.po-mapcard { background: #FFFEF7; border: 1px solid var(--panel-line); border-radius: 22px; overflow: hidden; box-shadow: 0 10px 24px rgba(38,38,25,.08); }
.po-maphead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 10px; border-bottom: 1px solid #EDE7CC; }
.po-maphead span { font: 800 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #7A7460; }
.po-open { border: 1px solid #D8CFA2; border-radius: 999px; padding: 4px 11px; font: 700 11px var(--sans); background: #FFFEF7; color: #7A7460; cursor: pointer; }
.po-open:hover { color: #30291D; border-color: #30291D; }
.po-mapsvg { cursor: zoom-in; }
.po-mapsvg svg { width: 100%; display: block; }
.po-legend { padding: 12px 16px; border-top: 1px solid #EDE7CC; font-family: var(--serif); font-size: 13px; line-height: 1.9; color: #3A3428; }
.po-doorstitle { text-align: center; font: 800 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 32px 0 14px; }
.po-doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.po-door { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px; padding: 11px 10px; text-align: center; }
.po-door b { font: 800 12.5px var(--sans); color: var(--ink); display: block; }
.po-door span { font: 700 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; display: block; }
/* the lightbox — ink scrim, parchment chart */
.po-light { position: fixed; inset: 0; z-index: 70; background: rgba(26,22,16,.88); display: none; align-items: center; justify-content: center; padding: 26px; }
.po-light.open { display: flex; animation: rise .22s ease both; }
body.po-noscroll { overflow: hidden; }
.po-lightcard { background: #F8F5E8; border-radius: 20px; max-width: 1050px; width: 100%; max-height: 92vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.po-lighthead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 20px 12px; border-bottom: 1px solid #E5DEBB; }
.po-lighthead b { font: 800 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #30291D; }
.po-lightsub { font: italic 12.5px var(--serif); color: #7A7460; margin-top: 3px; }
.po-close { background: none; border: 0; font-size: 21px; cursor: pointer; color: #30291D; line-height: 1; }
.po-lightart svg { width: 100%; display: block; max-height: 76vh; }
.po-lightfoot { padding: 12px 20px 14px; border-top: 1px solid #E5DEBB; font-family: var(--serif); font-size: 13px; line-height: 1.8; color: #3A3428; }
/* el cinematógrafo — the hero engraving is the film frame */
.po-cine { position: relative; cursor: pointer; }
.po-cine:focus-visible { outline: 2.5px solid var(--lime-dark); outline-offset: 2px; }
.po-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%;
  background: rgba(248,245,232,.9); border: 1.6px solid #30291D; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #30291D; padding-left: 5px; box-shadow: 0 10px 26px rgba(38,38,25,.28); transition: transform .18s; }
.po-cine:hover .po-play { transform: translate(-50%, -50%) scale(1.07); }
.po-cinechip { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: #FFFEF7; border: 1.2px solid #30291D;
  border-radius: 999px; padding: 4px 13px; font: 800 11px var(--sans); color: #30291D; white-space: nowrap; }
.po-cinelight { background: rgba(14,11,7,.94); }
.po-cinecard { max-width: 1100px; }
.po-screen { background: #0E0B07; }
.po-screen video { width: 100%; max-height: 76vh; display: block; }
.po-screen.curtain { background: #E5DEBB; }
.po-screen.curtain svg { width: 100%; max-height: 62vh; display: block; }
.po-premiere { background: #F8F5E8; border-top: 1px solid #E5DEBB; text-align: center; padding: 14px 20px 16px; }
.po-premiere b { display: block; font: 800 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #7A7460; }
.po-premiere span { display: block; font: italic 13px var(--serif); color: #55523F; margin-top: 4px; }

/* night — the chrome follows, the plates stay paper */
html[data-theme="dark"] .po-card { background: var(--dk-chip); border-color: var(--dk-line); }
html[data-theme="dark"] .po-cell b { color: var(--dk-text); }
html[data-theme="dark"] .po-cell span, html[data-theme="dark"] .po-cardhead { color: var(--dk-muted); }
html[data-theme="dark"] .po-chip { background: var(--dk-chip); border-color: var(--dk-line); color: var(--dk-text); }
html[data-theme="dark"] .po-chip:hover { border-color: var(--dk-muted); }
html[data-theme="dark"] .po-grafs p { color: var(--dk-muted); }
html[data-theme="dark"] .po-doorstitle { color: var(--dk-muted); }
html[data-theme="dark"] .po-door { background: var(--dk-chip); border-color: var(--dk-line); }
html[data-theme="dark"] .po-door b { color: var(--dk-text); }
html[data-theme="dark"] .po-door span { color: var(--dk-muted); }
@media (max-width: 1020px) {
  .postal .po-top, .postal .po-main { grid-template-columns: 1fr; }
  .po-hero { min-height: 0; }
  .po-hero svg { aspect-ratio: 16/10; height: auto; }
  .po-doors { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) { .po-doors { grid-template-columns: 1fr; } }

/* dark · the paper keeps its cream, but the seals go night — per the approved v2 */
html[data-theme="dark"] .dsr-foliostamp { background: #221F18; color: var(--dk-text); }
html[data-theme="dark"] .dsr-foliostamp em { color: var(--dk-muted); }
html[data-theme="dark"] .dsr-foliofoot .stampline { background: #221F18; color: var(--dk-text); }
html[data-theme="dark"] .dsr-foliofoot .stampline em { color: var(--dk-muted); }
html[data-theme="dark"] .dsr-curator { background: #221F18; color: var(--dk-text); }
html[data-theme="dark"] .dsr-curator p { color: var(--dk-text); }
html[data-theme="dark"] .dsr-curator .sig { color: var(--dk-muted); }