/* ============================================================
   Shane — a mini-blog
   Visual system inspired by the WMATA / DC Metro wayfinding language:
   Helvetica, the six line colors as categories, station dots,
   the boxed monogram, a six-color rule. Subtle, not literal.
   ============================================================ */

/* ---- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---- Tokens ----------------------------------------------- */
:root {
  /* Metro line colors — exact WMATA palette */
  --red:    #E31837;
  --orange: #F7941E;
  --yellow: #FFD200;
  --green:  #00A94F;
  --blue:   #0076C0;
  --silver: #A1A2A1;

  /* Type */
  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

  /* Light theme (clean neutral white) */
  --bg:       #F4F4F4;
  --surface:  #FFFFFF;
  --ink:      #1B1C1C;
  --ink-2:    #5B5D5D;
  --ink-3:    #8C8E8E;
  --hair:     #E3E3E3;
  --hair-2:   #ECECEC;
  --tint:     rgba(0,0,0,0.035);
  --tint-2:   rgba(0,0,0,0.05);
  --shadow:   0 1px 2px rgba(0,0,0,0.04);

  /* feel */
  --maxw: 720px;
  --pad: clamp(20px, 5vw, 44px);
}

html[data-theme="dark"] {
  /* Dark theme — built from the exact Black / Dark Gray / Light Gray / Silver values */
  --bg:       #000000;
  --surface:  #1B1C1C;
  --ink:      #FAFAFA;
  --ink-2:    #A1A2A1;
  --ink-3:    #6E7070;
  --hair:     #363636;
  --hair-2:   #1B1C1C;
  --tint:     rgba(255,255,255,0.05);
  --tint-2:   rgba(255,255,255,0.08);
  --shadow:   0 1px 2px rgba(0,0,0,0.4);
}

/* Sign-panel (directional sign) tokens */
:root { --sign: #1B1C1C; --sign-2: #2A2B2B; --sign-border: transparent; }
html[data-theme="dark"] { --sign-border: #363636; }

/* ---- Warm neutral scheme (line colors unchanged) ---- */
html[data-scheme="warm"][data-theme="light"] {
  --bg:      #FCF7F2;
  --surface: #FFFFFF;
  --ink:     #382D27;
  --ink-2:   #72675E;
  --ink-3:   #8B8076;
  --hair:    #E7DFD0;
  --hair-2:  #F0E9DD;
  --tint:    rgba(56,45,39,0.04);
  --tint-2:  rgba(56,45,39,0.07);
  --sign:    #382D27; --sign-2: #4A3B31; --sign-border: transparent;
}
html[data-scheme="warm"][data-theme="dark"] {
  --bg:      #382D27;
  --surface: #43362E;
  --ink:     #FCF7F2;
  --ink-2:   #DED4C5;
  --ink-3:   #A1907E;
  --hair:    #54453A;
  --hair-2:  #3F332B;
  --tint:    rgba(252,247,242,0.05);
  --tint-2:  rgba(252,247,242,0.08);
  --sign:    #2B221D; --sign-2: #372B23; --sign-border: #54453A;
}

/* density */
html[data-density="compact"] { --row-pad: 13px; --stack: 28px; }
html[data-density="regular"] { --row-pad: 18px; --stack: 40px; }
html[data-density="comfy"]   { --row-pad: 24px; --stack: 56px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.006em;
  transition: background 0.25s ease, color 0.25s ease;
}

::selection { background: var(--ink); color: var(--bg); }

/* ---- Shared atoms ----------------------------------------- */

/* the six-color rule — a quiet nod to the line legend */
.rule6 { display: flex; height: 3px; width: 100%; border-radius: 2px; overflow: hidden; }
.rule6 > i { flex: 1; }
.rule6 > i:nth-child(1) { background: var(--red); }
.rule6 > i:nth-child(2) { background: var(--orange); }
.rule6 > i:nth-child(3) { background: var(--yellow); }
.rule6 > i:nth-child(4) { background: var(--green); }
.rule6 > i:nth-child(5) { background: var(--blue); }
.rule6 > i:nth-child(6) { background: var(--silver); }

/* boxed monogram — echoes the "M" logo box */
.monogram {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 7px;
  background: var(--ink); color: var(--bg);
  font-weight: 700; font-size: 24px; letter-spacing: -0.04em;
  flex: none;
}

/* station dot */
.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--ink-3); }
.dot[data-cat="reviews"]  { background: var(--red); }
.dot[data-cat="thoughts"] { background: var(--green); }
.dot[data-cat="essays"]   { background: var(--blue); }
.dot[data-cat="projects"] { background: var(--orange); }
.dot[data-cat="links"]    { background: var(--silver); }
/* transfer-style ring for featured items */
.dot.transfer {
  background: var(--surface);
  box-shadow: 0 0 0 3px currentColor inset;
}

/* category label */
.cat {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.cat[data-cat="reviews"]  { color: var(--red); }
.cat[data-cat="thoughts"] { color: var(--green); }
.cat[data-cat="essays"]   { color: var(--blue); }
.cat[data-cat="projects"] { color: var(--orange); }
.cat[data-cat="links"]    { color: var(--silver); }
html[data-accent="bold"] .cat { font-weight: 700; }

.label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3);
}
.mono-num { font-variant-numeric: tabular-nums; }
html[data-dates="mono"] .date { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ============================================================
   LAYOUT SHELL
   .site grid is rearranged by [data-layout]
   ============================================================ */
.site {
  min-height: 100vh;
  display: grid;
}

.chrome { }
.masthead { display: flex; align-items: center; gap: 13px; }
.masthead .name { display: block; font-size: 25px; font-weight: 700; letter-spacing: -0.03em; }
.masthead .by { display: block; font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 3px; }

.nav { display: flex; }
.nav a {
  position: relative; color: var(--ink-2); font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.15s ease;
}
.nav a:hover { color: var(--ink); }
.nav a .tick { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex: none; transition: background 0.15s; }
.nav a.active { color: var(--ink); }

.theme-toggle {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 2px;
  background: var(--sign); color: #FFFFFF; border: 1px solid var(--sign-border);
  transition: background 0.15s ease;
}
.theme-toggle:hover { background: var(--sign-2); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .tt-sun, .theme-toggle .tt-moon { display: inline-flex; line-height: 0; }
/* show the target mode's icon (moon while light, sun while dark) */
html[data-theme="light"] .theme-toggle .tt-sun { display: none; }
html[data-theme="dark"] .theme-toggle .tt-moon { display: none; }

/* route motif — a few abstract line segments + stops */
.motif { display: none; }
.motif svg { display: block; width: 100%; height: auto; }

/* ---- main / views ----------------------------------------- */
main { width: 100%; }
.view { display: none; }
.view.is-active { display: block; }

.view-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.view-head h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; color: var(--ink); }
.view-head .count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* index list — the "departure board" */
.list { display: flex; flex-direction: column; }
.entry {
  display: grid; grid-template-columns: 16px auto 1fr auto; align-items: center;
  gap: 18px; padding: var(--row-pad) 0; border-top: 1px solid var(--hair);
  cursor: pointer; transition: background 0.14s ease;
}
.entry:last-child { border-bottom: 1px solid var(--hair); }
.entry .dot { justify-self: center; }
.entry .date { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.entry .etitle { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.entry .edesc { font-size: 14px; color: var(--ink-3); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry .etitle .excerpt { display: block; font-size: 14px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; margin-top: 3px; max-width: 52ch; }
.entry:hover { background: var(--tint); }
.entry:hover .etitle { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.entry .cat { justify-self: end; white-space: nowrap; }

/* ---- reading view ----------------------------------------- */
.article { max-width: 64ch; }
.back {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 9px; border-radius: 2px;
  background: var(--sign); color: #FFFFFF; border: 1px solid var(--sign-border);
  margin-bottom: 32px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease;
}
.back:hover { background: var(--sign-2); }
.back .sign-arrow { width: 21px; height: 21px; flex: none; color: #FFFFFF; transition: transform 0.15s ease; }
.back:hover .sign-arrow { transform: translateX(-2px); }
.back .back-label { font-size: 13.5px; font-weight: 700; letter-spacing: 0.005em; }
.article .meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.article .meta .date { font-size: 13px; color: var(--ink-3); }
.article h1 {
  /* never larger than the wordmark (.masthead .name = 25px) */
  font-size: clamp(20px, 2.4vw, 25px); line-height: 1.2; letter-spacing: -0.02em;
  font-weight: 700; margin: 0 0 20px; color: var(--ink); text-wrap: balance;
}
.article .body { font-size: 16px; line-height: 1.6; color: var(--ink); letter-spacing: -0.003em; }
.article .body p { margin: 0 0 1.15em; }
.article .body p:first-child::first-letter { /* understated, no drop cap by default */ }
.article .body h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); margin: 2em 0 0.7em; }
.article .body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.article .body blockquote {
  margin: 1.4em 0; padding-left: 18px; border-left: 2px solid var(--hair);
  color: var(--ink-2); font-style: normal;
}
.article .endrule { margin-top: 40px; max-width: 120px; }

/* prose section (about/links/projects intros) */
.prose { max-width: 60ch; font-size: 19px; line-height: 1.62; color: var(--ink); }
.prose p { margin: 0 0 1.1em; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.prose .lead { font-size: 21px; color: var(--ink); }

/* about — plain prose */

/* ===== Top color bar adopts the active section's line color =====
   Static rainbow segments stay put; a single solid overlay crossfades
   in via opacity (GPU-cheap) — no per-segment background repaints. */
.topbar-rule { position: relative; }
.rule6-fill {
  position: absolute; inset: 0; border-radius: inherit;
  opacity: 0; background: var(--ink-3);
  transition: opacity 0.38s ease;
  will-change: opacity; pointer-events: none;
}
html[data-bar="projects"] .rule6-fill { background: var(--orange); opacity: 1; }
html[data-bar="about"]    .rule6-fill { background: var(--blue);   opacity: 1; }
html[data-bar="links"]    .rule6-fill { background: var(--silver); opacity: 1; }
html[data-bar="reviews"]  .rule6-fill { background: var(--red);    opacity: 1; }
html[data-bar="thoughts"] .rule6-fill { background: var(--green);  opacity: 1; }
html[data-bar="essays"]   .rule6-fill { background: var(--blue);   opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rule6-fill { transition: none; }
}
.legrow { display: grid; grid-template-columns: 16px 1fr; gap: 16px; align-items: center;
  max-width: 60ch; padding: var(--row-pad) 0; border-top: 1px solid var(--hair); }
.legrow:last-child { border-bottom: 1px solid var(--hair); }
.legrow .dot { justify-self: center; }
.legrow .lmain { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.legrow .lt { font-size: 17px; font-weight: 600; color: var(--ink); flex: none; }
.legrow .ld { font-size: 13px; color: var(--ink-3); flex: 1; min-width: 0; }

/* link rows (links page) — like a connecting-systems list */
.links { display: flex; flex-direction: column; }
.linkrow {
  display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 16px;
  padding: var(--row-pad) 0; border-top: 1px solid var(--hair);
  transition: background 0.14s;
}
.linkrow:last-child { border-bottom: 1px solid var(--hair); }
.linkrow:hover { background: var(--tint); }
.linkrow .lmain { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.linkrow .lt { font-size: 17px; font-weight: 600; color: var(--ink); flex: none; }
.linkrow .ld { font-size: 13px; color: var(--ink-3); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.out {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 2px;
  background: var(--sign); color: #FFFFFF; border: 1px solid var(--sign-border);
  transition: background 0.15s ease;
}
.out svg { width: 18px; height: 18px; display: block; transition: transform 0.15s ease; }
.linkrow:hover .lt { text-decoration: underline; text-underline-offset: 3px; }
.linkrow:hover .out, .entry:hover .out { background: var(--sign-2); }
.linkrow:hover .out svg, .entry:hover .out svg { transform: translateX(2px); }

/* roster (about legend) */
.roster { display: flex; flex-direction: column; }

/* footer */
.foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em;
}
.foot .scale { text-transform: uppercase; letter-spacing: 0.1em; }
.foot .compass { display: inline-flex; align-items: center; gap: 7px; }

/* ============================================================
   LAYOUT A — "Departure Board" (single centered column)
   ============================================================ */
html[data-layout="board"] .site {
  grid-template-rows: auto 1fr auto;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
html[data-layout="board"] .chrome {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(28px, 5vw, 52px) 0 0;
}
html[data-layout="board"] .topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
html[data-layout="board"] .nav { gap: 26px; padding-top: 2px; }
html[data-layout="board"] .nav a .tick { display: none; }
html[data-layout="board"] .nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: var(--ink);
}
html[data-layout="board"] main { padding: clamp(30px, 5vw, 48px) 0; }
html[data-layout="board"] .foot { padding: 24px 0 40px; border-top: 1px solid var(--hair); }
html[data-layout="board"] .nav-spacer,
html[data-layout="board"] .motif { display: none; }

/* ============================================================
   LAYOUT B — "Platform" (fixed legend rail + content)
   ============================================================ */
html[data-layout="platform"] .site {
  grid-template-columns: 272px 1fr;
  grid-template-areas: "side main";
  align-items: start;
  max-width: 1160px;
  margin: 0 auto;
  min-height: 100vh;
}
html[data-layout="platform"] .chrome {
  grid-area: side;
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  display: flex; flex-direction: column; gap: 22px;
  padding: clamp(28px, 4vw, 44px) 30px clamp(24px, 4vw, 38px) var(--pad);
  border-right: 1px solid var(--hair);
}
html[data-layout="platform"] .topbar { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
/* in the platform rail, drop the theme toggle to the bottom of the sidebar
   (the sticky .chrome is its containing block) rather than beside the wordmark */
html[data-layout="platform"] .theme-toggle {
  position: absolute; left: var(--pad); bottom: clamp(24px, 4vw, 38px);
}
html[data-layout="platform"] .masthead .by { max-width: 160px; }
html[data-layout="platform"] .rule6 { max-width: 152px; }
html[data-layout="platform"] .nav { flex-direction: column; gap: 2px; }
html[data-layout="platform"] .nav a {
  padding: 9px 12px; border-radius: 8px; margin-left: -12px;
}
html[data-layout="platform"] .nav a:hover { background: var(--tint); }
html[data-layout="platform"] .nav a.active { background: var(--tint-2); }
html[data-layout="platform"] .nav a .tick { background: var(--hair); }
html[data-layout="platform"] .nav a[data-line="latest"]   .tick { background: var(--ink-3); }
html[data-layout="platform"] .nav a[data-line="projects"] .tick { background: var(--orange); }
html[data-layout="platform"] .nav a[data-line="about"]    .tick { background: var(--blue); }
html[data-layout="platform"] .nav a[data-line="links"]    .tick { background: var(--silver); }
html[data-layout="platform"] .nav-spacer { flex: 1; min-height: 18px; }
html[data-layout="platform"] .motif { display: block; opacity: 0.95; }
html[data-layout="platform"] main {
  grid-area: main;
  padding: clamp(30px, 5vw, 60px) var(--pad) clamp(40px, 6vw, 80px);
  max-width: 760px;
}
html[data-layout="platform"] .foot { padding: 30px 0 0; margin-top: 30px; border-top: 1px solid var(--hair); }
html[data-layout="platform"] .entry .etitle { font-size: 19px; }

/* ---- Responsive: platform collapses to stacked top ------- */
@media (max-width: 760px) {
  html[data-layout="platform"] .site {
    grid-template-columns: 1fr; grid-template-areas: "side" "main"; max-width: var(--maxw); padding: 0 var(--pad);
  }
  html[data-layout="platform"] .chrome {
    grid-area: side; position: static; height: auto; flex-direction: column; gap: 16px;
    padding: 30px 0 18px; border-right: 0; border-bottom: 1px solid var(--hair);
  }
  html[data-layout="platform"] .nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  html[data-layout="platform"] .nav a { margin-left: 0; }
  html[data-layout="platform"] .motif { display: none; }
  html[data-layout="platform"] main { padding: 30px 0 50px; max-width: none; }
  html[data-layout="platform"] .nav-spacer { display: none; }
  /* sidebar collapses (no-JS small screens): return the toggle to normal flow */
  html[data-layout="platform"] .theme-toggle { position: static; }
}

@media (max-width: 540px) {
  .entry { grid-template-columns: 16px auto 1fr auto; gap: 12px; }
  .entry .date { font-size: 12px; }
}

/* ---- Tweak utilities ---- */
html.no-cats .dot[data-cat] { background: var(--ink-3) !important; }
html.no-cats .cat[data-cat] { color: var(--ink-3) !important; }
html.no-cats .linkrow .dot { background: var(--ink-3) !important; }
html.no-cats[data-layout="platform"] .nav a[data-line] .tick { background: var(--hair) !important; }
html.no-motif .motif { display: none !important; }