/* The static project pages (haruspex., sleuthly., clue.). Same design system as the WordPress theme: tokens.css is
   a copy of design/tokens/, the rules below are a small subset of the theme's style.css. */
@import url("tokens.css");

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/newsreader-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("fonts/newsreader-latin-opsz-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--surface-page); color: var(--text-body); font: var(--type-body); -webkit-font-smoothing: antialiased; }
a { color: var(--moss-600); text-decoration-color: var(--moss-200); text-underline-offset: 4px; transition: text-decoration-color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--moss-700); text-decoration-color: var(--moss-500); }
:focus-visible { outline: 1px solid var(--focus-ring-color); box-shadow: 0 0 0 3px var(--focus-ring); border-radius: var(--r-xs); }
p, li { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }

.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--s-7); }
@media (max-width: 720px) { .wrap { padding: 0 var(--s-4); } }

.top { border-bottom: 1px solid var(--border-subtle); }
.top .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding-block: var(--s-4); }
.brand { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-serif); font-size: var(--t-md); color: var(--text-heading); text-decoration: none; letter-spacing: var(--tr-snug); }
.brand em, h1 em, h2 em { font-style: italic; color: var(--text-brand); }
.stamp { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--border-strong); color: var(--moss-700); font-family: var(--font-serif); font-style: italic; font-size: 14px; flex: none; }
.back { font-size: var(--t-sm); }

.hero { background: linear-gradient(180deg, var(--paper-100), var(--paper-50)); padding: var(--s-8) 0 var(--s-7); }
.hero .wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s-7); align-items: center; }
@media (max-width: 800px) { .hero .wrap { grid-template-columns: 1fr; } }
.eyebrow { font: var(--type-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--text-accent); }
h1 { font-family: var(--font-serif); font-weight: var(--w-light); font-size: clamp(var(--t-3xl), 6vw, var(--t-4xl)); line-height: .98; letter-spacing: var(--tr-display); color: var(--text-heading); margin: var(--s-4) 0 var(--s-5); }
.lede { font: var(--type-lede); color: var(--text-subhead); max-width: 40ch; margin: 0 0 var(--s-6); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.btn { display: inline-flex; align-items: center; min-height: var(--control-h-lg); padding: 14px 24px; border-radius: var(--r-sm); background: var(--action-accent); color: var(--action-accent-text); font-family: var(--font-sans); font-weight: var(--w-medium); text-decoration: none; transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.btn:hover { background: var(--action-accent-hover); color: var(--action-accent-text); }
.btn:active { transform: translateY(1px); }
.slot { aspect-ratio: 4 / 3; border-radius: var(--r-md); display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--paper-100) 0 10px, var(--paper-200) 10px 11px); }
.slot span { font: var(--type-mono); font-size: var(--t-xs); color: var(--text-muted); background: var(--paper-50); padding: 4px 10px; border-radius: var(--r-pill); }

.section { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s-7); align-items: baseline; padding: var(--s-7) 0; border-top: 1px solid var(--border-subtle); margin-top: var(--s-9); }
.section + .section { margin-top: 0; }
@media (max-width: 800px) { .section { grid-template-columns: 1fr; gap: var(--s-4); } }
.section .eyebrow { color: var(--text-muted); }
h2 { font-family: var(--font-serif); font-weight: var(--w-regular); font-size: var(--t-2xl); line-height: 1.1; letter-spacing: var(--tr-heading); color: var(--text-heading); margin: 0 0 var(--s-3); }
.measure { max-width: var(--content-measure); color: var(--text-subhead); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-5); margin: var(--s-5) 0 0; }
.facts dt { font: var(--type-mono); font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
.facts dd { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: var(--t-lg); color: var(--moss-700); }
pre { font-family: var(--font-mono); font-size: var(--t-sm); background: var(--surface-sunken); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); overflow-x: auto; }

footer { background: var(--surface-inverse); color: var(--moss-100); margin-top: var(--s-9); padding: var(--s-6) 0; font: var(--type-mono); font-size: var(--t-xs); }
footer .wrap { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
footer a { color: var(--moss-100); text-decoration-color: var(--moss-400); }