/* strak — editorial grid, cool neutrals, tight sans, geometric rules */
:root {
  --color-bg: #f4f6f7;
  --color-ink: #12181a;
  --color-muted: #5a6569;
  --color-rule: #c5ced1;
  --color-accent: #1a3a42;
  --color-focus: var(--color-accent);
  --font-sans: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  --rail: 11.5rem;
}
html { background: var(--color-bg); }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.55;
  color: var(--color-ink); background: var(--color-bg); letter-spacing: -0.018em;
}
h1, h2, h3 { font-weight: 500; letter-spacing: -0.04em; line-height: 1.08; margin: 0 0 var(--space-md); }
h1 { font-size: var(--step-5); font-weight: 450; }
h2 { font-size: var(--step-2); }
a { color: var(--color-accent); text-underline-offset: 0.12em; }
a:hover { color: var(--color-ink); }
.banner-example {
  margin: 0; padding: 0.4rem var(--gutter); font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase; text-align: center;
  border-bottom: 1px solid var(--color-rule); background: #e8ecee;
}
.masthead {
  display: flex; align-items: baseline; gap: var(--space-lg);
  padding: var(--space-sm) var(--gutter); border-bottom: 1px solid var(--color-ink);
}
.masthead__brand {
  font-size: var(--step-1); font-weight: 500; letter-spacing: -0.04em;
  color: var(--color-ink); text-decoration: none; margin-right: auto;
}
.masthead__meta {
  margin: 0; font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-muted); display: flex; gap: var(--space-md);
}
.masthead__meta a { color: inherit; text-decoration: none; }
.nav-toggle {
  width: var(--tap); height: var(--tap); border: 0; background: transparent; cursor: pointer;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
}
.nav-toggle span { display: block; width: 1.1rem; height: 1px; background: var(--color-ink); }
.edition { display: grid; min-height: 70vh; }
.rail { display: none; padding: var(--space-xl) var(--gutter); border-bottom: 1px solid var(--color-rule); background: #eef1f2; }
.rail[data-open="true"] { display: block; }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail a {
  display: flex; align-items: baseline; gap: var(--space-sm); min-height: var(--tap);
  color: var(--color-ink); text-decoration: none; font-size: var(--step-0); letter-spacing: -0.02em;
}
.rail a span { color: var(--color-muted); font-size: var(--step--1); letter-spacing: 0.08em; }
.rail a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--color-ink); padding-left: var(--space-sm); }
.rail__cta { margin-top: var(--space-lg); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; }
main { padding: var(--space-2xl) var(--gutter) var(--space-3xl); }
.kicker { margin: 0 0 var(--space-sm); font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); }
.rule { border: 0; border-top: 1px solid var(--color-ink); margin: 0 0 var(--space-xl); }
.standfirst { font-size: var(--step-2); line-height: 1.3; letter-spacing: -0.03em; max-width: 28rem; margin: 0; }
.lead-grid { display: grid; gap: var(--space-xl); }
.facts { font-size: var(--step-0); color: var(--color-muted); max-width: 22rem; }
.facts__links { margin-top: var(--space-md); }
.edition-photo { margin: var(--space-2xl) 0; border-radius: 0; border: 1px solid var(--color-rule); background-color: #dfe5e7; color: var(--color-muted); }
.edition-photo .photo-ph__label { background: var(--color-bg); letter-spacing: 0.14em; }
.index-preview__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--color-ink); padding-bottom: var(--space-sm); }
.index-preview__head h2 { margin: 0; }
.index-table { list-style: none; margin: 0; padding: 0; }
.index-table li {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-xs) var(--space-md);
  padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule);
}
.index-table__num { font-size: var(--step--1); letter-spacing: 0.1em; color: var(--color-muted); }
.index-table__name { font-weight: 500; letter-spacing: -0.03em; }
.index-table__desc { grid-column: 2; color: var(--color-muted); font-size: var(--step--1); }
.index-table__price { grid-column: 2; font-size: var(--step--1); letter-spacing: 0.06em; }
.index-table--page li { padding: var(--space-lg) 0; }
.afterword { margin-top: var(--space-2xl); color: var(--color-muted); }
.article__body { display: grid; gap: var(--space-xl); }
.prose { max-width: 38rem; }
.prose p { margin: 0 0 var(--space-md); }
.drop p:first-child::first-letter { float: left; font-size: 3.4rem; line-height: 0.8; padding-right: 0.35rem; font-weight: 500; }
.facts-sheet { display: grid; gap: var(--space-2xl); }
.hours-table { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.hours-table th { text-align: left; font-weight: 500; padding: 0.55rem 0; border-bottom: 1px solid var(--color-rule); }
.hours-table td { text-align: right; padding: 0.55rem 0; border-bottom: 1px solid var(--color-rule); color: var(--color-muted); }
.muted { color: var(--color-muted); }
.nap { display: grid; gap: 0.15rem; font-size: var(--step-0); }
.nap__name { font-weight: 500; letter-spacing: -0.03em; }
.nap a { color: inherit; }
.colophon {
  border-top: 1px solid var(--color-ink); padding: var(--space-lg) var(--gutter);
  display: grid; gap: var(--space-md); font-size: var(--step--1); letter-spacing: 0.04em;
}
.colophon .nap { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.colophon .nap__name::after { content: " ·"; }
.colophon__nav { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.colophon__nav a { color: var(--color-muted); text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em; }
.colophon__legal { margin: 0; color: var(--color-muted); }
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .edition { grid-template-columns: var(--rail) 1fr; }
  .rail {
    display: block; border-bottom: 0; border-right: 1px solid var(--color-rule);
    background: transparent; position: sticky; top: 0; align-self: start; min-height: calc(100vh - 4rem);
  }
  .lead-grid { grid-template-columns: 1.4fr 0.8fr; }
  .index-table li { grid-template-columns: 3rem 14rem 1fr auto; align-items: baseline; }
  .index-table__desc, .index-table__price { grid-column: auto; }
  .article__body { grid-template-columns: 1.3fr 0.7fr; }
  .facts-sheet { grid-template-columns: 1fr 1fr; }
  .colophon { grid-template-columns: 1.4fr 1fr auto; align-items: start; }
}