/* ============================================================
   Homer — design system: "KERAMEIKOS"
   ------------------------------------------------------------
   Named for the potters' quarter of Athens, findspot of the
   Dipylon oinochoe (~740 BCE) — the oldest substantial Greek
   inscription and one of this site's dating anchors.
   Light = black-figure: dark glaze on pale fired clay.
   Dark  = red-figure: the ground fired black, the letterforms
   keep the reserved clay color. The theme pair IS the
   historical technique pair.
   House rules that survive any redesign:
   - tokens on :root, dark variant re-declares them under .dark
   - reading surface never pure white, ink never pure black
   - one strong accent; further accents carry meaning
   ============================================================ */

:root{
  --bg:#F0E6D2;          /* pale fired Attic clay */
  --surface:#E8DCC0;     /* raised slip band */
  --surface-2:#E1D2B0;   /* deeper band (tables, code) */
  --ink:#211A12;         /* black glaze */
  --muted:#635340;       /* worn glaze (nudged darker in loop round 2: AA on surface-2) */
  --rule:#CDBB97;        /* incised line */
  --accent:#B5502A;      /* terracotta — the clay itself: links, sigils, the living thread */
  --accent-ink:#8F3D1F;  /* terracotta darkened for small text on light ground */
  --legend:#7A3B52;      /* wine-dark — the Legend badge: myth, tradition, the ancient Lives */
  --disputed:#715413;    /* ochre — the Disputed badge (nudged darker in loop round 2: AA on claim-card surface) */
  --evidence:#44634F;    /* verdigris — the Evidence badge: excavated bronze, datable ink */
  --measure:35rem;       /* judge round 2 carried: land mid-band (60–75ch) with EB Garamond */
}
html.dark{
  --bg:#141009;          /* glaze fired black */
  --surface:#1E1810;
  --surface-2:#251E13;
  --ink:#E9DBBC;         /* the reserved clay color */
  --muted:#9A8A6C;
  --rule:#3A311F;
  --accent:#D9754A;
  --accent-ink:#D9754A;
  --legend:#C77E97;
  --disputed:#CBA24C;
  --evidence:#7FA891;
}

/* template component aliases + type roles */
:root, html.dark {
  --c-bg: var(--bg);
  --c-surface: var(--surface);
  --c-ink: var(--ink);
  --c-muted: var(--muted);
  --c-rule: var(--rule);
  --c-accent: var(--accent-ink);
  --c-accent-soft: var(--accent);
  --font-display: Cinzel, Georgia, serif;
  --font-body: "EB Garamond", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-ui: "JetBrains Mono", ui-monospace, monospace; /* Kerameikos chrome is mono */
  --page: 72rem;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-ink); text-decoration-thickness: 2px; } /* AA-safe hover: darken + thicken, never the bare accent */

code, pre, .data { font-family: var(--font-mono); font-size: 0.9em; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--c-accent); color: var(--c-bg); padding: 0.5rem 1rem;
}
.skip-link:focus { left: 0; z-index: 10; }

/* ---------- masthead ---------- */

.masthead { border-bottom: 1px solid var(--c-rule); }

.masthead__inner {
  max-width: var(--page); margin: 0 auto; padding: 0.9rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.brand { text-decoration: none; color: var(--c-ink); }
.brand__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }

.masthead__links { display: flex; align-items: center; gap: 1.1rem; }

.navlink {
  font-family: var(--font-ui); font-size: 0.95rem;
  color: var(--c-ink); text-decoration: none;
}
.navlink:hover { color: var(--c-accent); }

.masthead__burger { display: none; }

.theme-toggle {
  background: none; border: 1px solid var(--c-rule); border-radius: 999px;
  width: 2.1rem; height: 2.1rem; padding: 0.35rem; cursor: pointer; color: var(--c-ink);
}
.theme-toggle svg { width: 100%; height: 100%; }
.theme-toggle__moon { display: none; }
html.dark .theme-toggle__sun { display: none; }
html.dark .theme-toggle__moon { display: block; }

@media (max-width: 40rem) {
  .masthead__burger {
    display: flex; flex-direction: column; gap: 4px;
    background: none; border: none; padding: 0.4rem; cursor: pointer;
  }
  .masthead__burger span { width: 20px; height: 2px; background: var(--c-ink); }
  .masthead__links {
    display: none; position: absolute; right: 1rem; top: 3.4rem;
    flex-direction: column; align-items: flex-end; gap: 0.8rem;
    background: var(--c-surface); border: 1px solid var(--c-rule);
    border-radius: 6px; padding: 1rem 1.25rem; z-index: 20;
  }
  .masthead__links.is-open { display: flex; }
}

/* ---------- content ---------- */

.hero { max-width: var(--measure); margin: 3.5rem auto 1rem; padding: 0 1.25rem; }
.hero__title { font-size: clamp(2rem, 6vw, 3.2rem); margin: 0 0 0.5rem; }
.hero__dek { color: var(--c-muted); font-size: 1.15rem; margin: 0; }

.prose { max-width: var(--measure); margin: 2rem auto 4rem; padding: 0 1.25rem; }
.prose h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.prose img { max-width: 100%; height: auto; }
.prose blockquote {
  margin: 1.5rem 0; padding: 0.25rem 0 0.25rem 1.1rem;
  border-left: 3px solid var(--c-accent); color: var(--c-muted); font-style: italic;
}
.prose table { border-collapse: collapse; width: 100%; }
.prose th, .prose td { border-bottom: 1px solid var(--c-rule); padding: 0.4rem 0.6rem; text-align: left; }
.prose th { font-family: var(--font-ui); font-size: 0.85rem; }

/* ---------- colophon ---------- */

.colophon { border-top: 1px solid var(--c-rule); margin-top: 2rem; }
.colophon__inner {
  max-width: var(--page); margin: 0 auto; padding: 2rem 1.25rem 2.5rem;
  font-family: var(--font-ui); font-size: 0.9rem; color: var(--c-muted);
}
.colophon__title { font-family: var(--font-display); color: var(--c-ink); margin: 0 0 0.5rem; }
.colophon__links { display: flex; flex-wrap: wrap; gap: 1rem; }
.colophon__links a { color: var(--c-muted); }
.colophon__foot { margin-top: 1.25rem; }

/* ---------- Kerameikos apparatus ---------- */

body {
  /* clay grain — tiled feTurbulence, opacity baked into the SVG rect */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.05'/></svg>");
  font-size: 1.155rem;
  line-height: 1.62;
}

[lang="grc"] { font-family: "GFS Didot", serif; }

/* the meander: one SVG tile, recolored per theme via mask */
.meander{
  height:13px;border:none;margin:2.6rem auto;max-width:9rem;background-color:var(--accent);
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M1 15V1h14v9H7V7h4v4' fill='none' stroke='black' stroke-width='2'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M1 15V1h14v9H7V7h4v4' fill='none' stroke='black' stroke-width='2'/></svg>");
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:auto 100%;mask-size:auto 100%;
}
.meander--wide{max-width:100%;opacity:.85}

.kicker{
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 1rem;
}

/* badges: the epistemic triad (brief voice rule 1) + copyright badges */
.badge{
  display:inline-block;font-family:var(--font-mono);font-size:.6rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:.18em .55em .14em;border-radius:2px;
  border:1px solid currentColor;vertical-align:middle;
}
.badge--legend{color:var(--legend)}
.badge--disputed{color:var(--disputed)}
.badge--evidence{color:var(--evidence)}
.badge--pd{color:var(--evidence)}
.badge--c{color:var(--muted)}

/* claim cards: the who-was-homer / troy apparatus */
.claim{
  background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--claim-c,var(--rule));
  padding:.9rem 1.1rem;margin:1.1rem 0;border-radius:0 3px 3px 0;
}
.claim--legend{--claim-c:var(--legend)}
.claim--disputed{--claim-c:var(--disputed)}
.claim--evidence{--claim-c:var(--evidence)}
.claim p{margin:.35rem 0 0}

/* chrome: Kerameikos nav is mono small-caps; dark masthead takes a surface
   step so the register reads at the top of the dark page (judge carry) */
.navlink{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.brand__title{letter-spacing:.16em;font-weight:700}
html.dark .masthead{background:var(--surface)}

/* home hero */
.home-hero{padding:4.5rem 1.25rem 2.5rem;text-align:center}
.home-hero h1{
  font-size:clamp(3rem,9vw,5.5rem);font-weight:700;letter-spacing:.12em;margin:0;
  padding-left:.12em; /* optically recenter the letterspaced capitals */
}
.home-hero .greek{
  font-family:"GFS Didot",serif;font-size:clamp(1.1rem,2.6vw,1.45rem);color:var(--muted);
  letter-spacing:.3em;margin:.4rem 0 0;padding-left:.3em;
}
.home-hero .lede{max-width:38rem;margin:1.6rem auto 0;font-size:1.22rem;line-height:1.55}
.badge-strip{
  display:flex;gap:1.2rem 1.6rem;justify-content:center;flex-wrap:wrap;margin:2rem auto 0;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.05em;color:var(--muted);
  padding:0;list-style:none;
}
.badge-strip li{white-space:nowrap}
.badge-strip--compact{justify-content:flex-start;margin:0 0 1.6rem}

/* the Nolan stat band */
.nolan{background:var(--surface-2);border-block:1px solid var(--rule);padding:1.4rem 0;margin:2.5rem 0}
.nolan__inner{max-width:var(--page);margin:0 auto;padding:0 1.25rem;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 2.2rem;justify-content:center}
.nolan .film{font-family:var(--font-display);font-size:1.05rem;font-weight:600}
.nolan .film a{color:inherit;text-decoration-color:var(--accent)}
.nolan .stat{font-family:var(--font-mono);font-size:.78rem;font-feature-settings:"tnum";color:var(--ink)}
.nolan .stat b{color:var(--accent-ink);font-weight:700}
.nolan .asof{font-family:var(--font-mono);font-size:.62rem;color:var(--muted);letter-spacing:.06em}

/* section cards: the register of the vase */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15.5rem,100%),1fr));
  gap:1rem;padding:0 1.25rem;margin:2.5rem auto 4rem;list-style:none;max-width:var(--page);
}
.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:3px;
  padding:1.15rem 1.2rem 1.05rem;position:relative;transition:border-color .2s,transform .2s;
}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card .sigil{font-family:"GFS Didot",serif;font-size:.85rem;color:var(--accent-ink);display:block;margin-bottom:.45rem}
.card h2{font-family:var(--font-display);font-size:1.02rem;letter-spacing:.03em;margin:0 0 .35rem}
.card h2 a{color:inherit;text-decoration:none}
.card h2 a::after{content:"";position:absolute;inset:0}
.card p{font-size:.95rem;color:var(--muted);margin:0;line-height:1.45}

/* long-form apparatus */
.prose p.drop::first-letter{
  font-family:var(--font-display);font-size:3.3em;float:left;line-height:.82;
  padding:.04em .14em 0 0;color:var(--accent-ink);
}
.prose blockquote{
  margin:2rem 0;padding:.4rem 0 .4rem 1.4rem;border-left:3px solid var(--accent);
  font-style:italic;font-size:1.24rem;line-height:1.5;color:var(--ink);
}
blockquote .cite{
  display:block;margin-top:.6rem;font-style:normal;font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.08em;color:var(--muted);
}
.term{border-bottom:1px dotted var(--accent)}

/* wide data band: tables escape the measure */
.band{max-width:var(--page);margin:0 auto;padding:0 1.25rem}
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:3px;background:var(--surface)}
.tablewrap table{border-collapse:collapse;width:100%;font-size:.92rem;font-family:var(--font-body)}
.tablewrap th{
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;text-align:left;color:var(--muted);
  padding:.7rem .9rem;border-bottom:1px solid var(--rule);background:var(--surface-2);
}
.tablewrap td{padding:.65rem .9rem;border-bottom:1px solid var(--rule);vertical-align:top}
.tablewrap tr:last-child td{border-bottom:none}
.tablewrap td .yr{font-family:var(--font-mono);font-size:.78rem;font-feature-settings:"tnum";color:var(--muted);white-space:nowrap}
.tablewrap td.who{font-weight:600;white-space:nowrap}
.tablenote{font-size:.95rem;color:var(--muted);margin-top:.9rem}
/* below the breakpoint the table collapses to stacked record cards —
   archetype #3's signature — so the status badge never leaves the screen */
@media (max-width:640px){
  .tablewrap{overflow-x:visible;border:none;border-radius:0;background:none}
  .tablewrap table,.tablewrap tbody,.tablewrap tr,.tablewrap td{display:block}
  .tablewrap thead{display:none}
  .tablewrap tr{background:var(--surface);border:1px solid var(--rule);border-radius:3px;
     margin:0 0 .9rem;padding:.85rem 1.05rem .95rem}
  .tablewrap td{border:none;padding:.12rem 0}
  .tablewrap td.who{font-size:1.08rem;padding-bottom:.05rem}
  .tablewrap td.form{font-style:italic;color:var(--muted)}
  .tablewrap td:last-child{padding-top:.45rem}
}

.movements td.data{white-space:nowrap}

/* plates — intrinsically-lit artifacts, identical in both themes */
.plate{margin:1.8rem 0}
.plate img{width:100%;height:auto;aspect-ratio:16/9;display:block;
  border:1px solid var(--rule);border-radius:3px}
.plate figcaption{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;
  color:var(--muted);margin-top:.5rem}

/* dated runs (timeline.yml) */
.timeline{list-style:none;padding:0;margin:1.6rem 0}
.timeline li{
  display:grid;grid-template-columns:9.5rem 1fr;gap:.4rem 1rem;align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid var(--rule);
}
.timeline .date{font-family:var(--font-mono);font-size:.74rem;font-feature-settings:"tnum";color:var(--accent-ink);white-space:nowrap}
.timeline .what{font-size:1rem;line-height:1.5}
.timeline .what .badge{margin-left:.45rem}
@media (max-width:640px){
  .timeline li{grid-template-columns:1fr}
}

/* screen catalogue */
.filmlist{list-style:none;padding:0;margin:1.6rem 0}
.filmlist li{padding:.85rem 0;border-bottom:1px solid var(--rule)}
.filmlist .film-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .8rem}
.filmlist .film-title{font-family:var(--font-display);font-size:1.02rem;font-weight:600}
.filmlist .film-meta{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);letter-spacing:.05em}
.filmlist .film-note{margin:.3rem 0 0;font-size:.98rem;color:var(--ink);line-height:1.5}

/* the wide meander closes every page above the colophon */
.colophon{position:relative}
.colophon::before{
  content:"";display:block;height:13px;background-color:var(--accent);opacity:.85;
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M1 15V1h14v9H7V7h4v4' fill='none' stroke='black' stroke-width='2'/></svg>");
          mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M1 15V1h14v9H7V7h4v4' fill='none' stroke='black' stroke-width='2'/></svg>");
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:auto 100%;mask-size:auto 100%;
}
.colophon__disclosure{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em}

/* ---------- motion & print floor (non-negotiable) ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .masthead, .colophon, .theme-toggle, .skip-link { display: none; }
  body { background: #fff; color: #000; }
}