/* The shared design system for every tenant site. A look is tokens plus a layout; content and record structure never change. */
:root { color-scheme: light dark; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--text-font); }
a { color: inherit; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

html[data-theme="paper"] {
  --bg: #f6f1e7; --panel: #fbf8f1; --ink: #27211a; --muted: #6a5f50; --line: #d9cfbd; --accent: #8c3b1e; --accent-ink: #fff8f0;
  --good: #1f6a45; --warn: #8a5a00; --bad: #a32a1c;
  --text-font: 400 18px/1.6 "Libre Caslon Text", Georgia, serif;
  --display-font: 400 1em/1.08 "Libre Caslon Display", Georgia, serif;
  --ui-font: 400 15px/1.45 "Libre Caslon Text", Georgia, serif;
  --mono-font: 12px/1.4 ui-monospace, Menlo, monospace;
  --radius: 2px; --border: 1px solid var(--line); --art-pad: clamp(14px, 4vw, 44px); --art-bg: #fff; --art-shadow: 0 1px 2px rgb(60 40 20 / .25), 0 18px 40px rgb(60 40 20 / .12);
  --max: 860px;
}
html[data-theme="plinth"] {
  --bg: #e8e8e5; --panel: #f2f2ef; --ink: #161616; --muted: #5e5e5b; --line: #cbcbc7; --accent: #161616; --accent-ink: #f5f5f2;
  --good: #16643f; --warn: #7d5300; --bad: #a12414;
  --text-font: 400 16px/1.55 "Instrument Sans", system-ui, sans-serif;
  --display-font: 500 1em/1.1 "Instrument Sans", system-ui, sans-serif;
  --ui-font: 500 14px/1.4 "Instrument Sans", system-ui, sans-serif;
  --mono-font: 12px/1.4 ui-monospace, Menlo, monospace;
  --radius: 0; --border: 1px solid var(--line); --art-pad: 0; --art-bg: transparent; --art-shadow: 0 30px 60px rgb(0 0 0 / .22);
  --max: 1120px;
}
html[data-theme="riso"] {
  --bg: #fff8e8; --panel: #fffdf6; --ink: #141c55; --muted: #4d5589; --line: #141c55; --accent: #d21f5b; --accent-ink: #fff8e8;
  --good: #06664f; --warn: #7d5000; --bad: #b4123f;
  --text-font: 400 16px/1.55 Archivo, system-ui, sans-serif;
  --display-font: 800 1em/1 Archivo, system-ui, sans-serif;
  --ui-font: 600 14px/1.4 Archivo, system-ui, sans-serif;
  --mono-font: 12px/1.4 "Space Mono", ui-monospace, monospace;
  --radius: 0; --border: 2px solid var(--line); --art-pad: 0; --art-bg: transparent; --art-shadow: 10px 10px 0 var(--accent);
  --max: 1080px;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="paper"] { --bg: #181512; --panel: #211d18; --ink: #f0e8da; --muted: #b1a693; --line: #3b342a; --accent: #e8966d; --accent-ink: #1d1712; --good: #8fd6ad; --warn: #e6bd6b; --bad: #ff9f8f; --art-bg: #2a2520; --art-shadow: 0 18px 40px rgb(0 0 0 / .5); }
  html[data-theme="plinth"] { --bg: #111111; --panel: #1a1a1a; --ink: #efefeb; --muted: #a5a5a0; --line: #30302e; --accent: #efefeb; --accent-ink: #111111; --good: #84d2a5; --warn: #e1b865; --bad: #ff9a88; --art-shadow: 0 30px 60px rgb(0 0 0 / .7); }
  html[data-theme="riso"] { --bg: #0d1136; --panel: #151a4a; --ink: #fff4dc; --muted: #bcc0e6; --line: #fff4dc; --accent: #ff5f93; --accent-ink: #0d1136; --good: #6fe0bd; --warn: #f3c871; --bad: #ff9dbb; }
}

.demo-bar { margin: 0; padding: 8px 16px; font: var(--ui-font); font-size: 13px; text-align: center; background: var(--ink); color: var(--bg); }
.demo-bar strong { font-weight: 700; }
.site-head { max-width: var(--max); margin: 0 auto; padding: 22px 16px 10px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.site-name { font: var(--display-font); font-size: 25px; text-decoration: none; }
.site-kind { color: var(--muted); font: var(--ui-font); }
.site-foot { max-width: var(--max); margin: 30px auto 0; padding: 22px 16px 44px; border-top: var(--border); color: var(--muted); font: var(--ui-font); font-weight: 400; }
.site-foot p { margin: 0 0 8px; }

.home { max-width: var(--max); margin: 0 auto; padding: 14px 16px; }
.statement { font-size: 1.15em; max-width: 36em; margin: 8px 0 32px; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.card { display: grid; gap: 4px; text-decoration: none; }
.card img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; background: var(--art-bg); box-shadow: var(--art-shadow); margin-bottom: 14px; }
.card-title { font: var(--display-font); font-size: 21px; }
.card-meta { color: var(--muted); font: var(--ui-font); font-weight: 400; }

.work { max-width: var(--max); margin: 0 auto; padding: 8px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.work > * { min-width: 0; }
.look-note { margin: 0; color: var(--muted); font: var(--ui-font); font-weight: 400; }
.work-image { margin: 0; }
.work-image img { width: 100%; background: var(--art-bg); padding: var(--art-pad); box-shadow: var(--art-shadow); }
.work-image figcaption { margin-top: 12px; color: var(--muted); font: var(--ui-font); font-weight: 400; font-size: 13px; }
.work-title { font: var(--display-font); font-size: clamp(36px, 7vw, 58px); margin: 14px 0 6px; overflow-wrap: anywhere; }
.work-artist { margin: 0 0 18px; color: var(--muted); }
.description { margin: 18px 0 0; font-size: 1.08em; }
.sandbox-note { margin: 12px 0 0; font: var(--ui-font); color: var(--accent); }

.tap { display: grid; gap: 4px; padding: 13px 15px; border: var(--border); border-left-width: 5px; background: var(--panel); border-radius: var(--radius); font: var(--ui-font); font-weight: 400; }
.tap strong { font-weight: 700; font-size: 1.1em; }
.tap-good { border-left-color: var(--good); } .tap-good strong { color: var(--good); }
.tap-warn { border-left-color: var(--warn); } .tap-warn strong { color: var(--warn); }
.tap-bad { border-left-color: var(--bad); } .tap-bad strong { color: var(--bad); }

.facts { margin: 0; display: grid; gap: 0; border-top: var(--border); }
.facts div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: var(--border); }
.facts dt { color: var(--muted); font: var(--ui-font); font-weight: 400; }
.facts dd { margin: 0; overflow-wrap: anywhere; }

.panel { background: var(--panel); border: var(--border); border-radius: var(--radius); padding: clamp(16px, 3.4vw, 26px); }
.panel h2 { font: var(--display-font); font-size: 29px; margin: 0 0 8px; }
.panel-note { color: var(--muted); margin: 0 0 18px; max-width: 42em; }

.history { list-style: none; margin: 0 0 18px; padding: 0 0 0 20px; border-left: 2px solid var(--line); display: grid; gap: 22px; }
.event { position: relative; min-width: 0; }
.event::before { content: ""; position: absolute; left: -27px; top: .42em; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 2px solid var(--muted); }
.event-transfer::before { background: var(--accent); border-color: var(--accent); }
.event time { color: var(--muted); font: var(--ui-font); font-weight: 400; }
.event h3 { font-size: 1.04em; font-weight: 600; margin: 2px 0 2px; }
.event p { margin: 0 0 4px; }
.event-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font: var(--ui-font); font-weight: 400; color: var(--muted); }
.event-meta .by { color: var(--ink); font-weight: 600; }
.hash { font: var(--mono-font); color: var(--muted); overflow-wrap: anywhere; }
.event-check { margin-left: 10px; font: var(--ui-font); font-size: 13px; color: var(--good); }
.event.is-broken .event-check { color: var(--bad); font-weight: 700; }
.event.is-broken h3 { color: var(--bad); }

.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-block; font: var(--ui-font); font-weight: 600; padding: 11px 15px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--radius); cursor: pointer; text-decoration: none; text-align: left; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--muted); }
.result-line { margin: 14px 0 0; font: var(--ui-font); font-weight: 500; min-height: 1.4em; overflow-wrap: anywhere; }
.result-line[data-tone="good"] { color: var(--good); }
.result-line[data-tone="bad"] { color: var(--bad); }

.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.side { border: var(--border); border-radius: var(--radius); padding: 14px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.side h3 { margin: 0; font: var(--display-font); font-size: 20px; }
.side p { margin: 0; }
.side label { display: grid; gap: 5px; font: var(--ui-font); }
.side input, .side select { width: 100%; font: inherit; font-weight: 400; color: inherit; background: var(--bg); border: var(--border); border-radius: var(--radius); padding: 10px; }
.code-box { display: grid; gap: 2px; font: var(--ui-font); font-weight: 400; }
.code-box output { font: var(--mono-font); font-size: 26px; letter-spacing: .08em; color: var(--accent); }
.code-box small { color: var(--muted); }
#listing-output { width: 100%; margin-top: 14px; font: var(--mono-font); color: inherit; background: var(--bg); border: var(--border); border-radius: var(--radius); padding: 12px; }

@media (min-width: 900px) {
  html[data-theme="plinth"] .work, html[data-theme="riso"] .work { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 44px; }
  html[data-theme="plinth"] .look-note, html[data-theme="riso"] .look-note,
  html[data-theme="plinth"] .panel, html[data-theme="riso"] .panel { grid-column: 1 / -1; }
  html[data-theme="paper"] .work-image { padding: 8px 40px 0; }
}
html[data-theme="riso"] .work-title { text-transform: uppercase; font-stretch: 125%; font-size: clamp(32px, 6vw, 54px); }
html[data-theme="riso"] .site-name { text-transform: uppercase; font-stretch: 125%; }
html[data-theme="riso"] .card-title { text-transform: uppercase; font-size: 18px; }
html[data-theme="riso"] .panel h2 { text-transform: uppercase; font-size: 25px; }

@media (max-width: 720px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .sides { grid-template-columns: minmax(0, 1fr); }
  html[data-theme="riso"] { --art-shadow: 6px 6px 0 var(--accent); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }