/* ========== TOKENS ========== */
:root{
  --thames:#1A2735;
  --bone:#F3EBDD;
  --rust:#A14D3A;
  --sea:#4E6F6C;
  --iron:#222222;
  --slate:#6B7C8F;
  --maxw:1080px;
  --readw:760px;
  --radius:4px;

  /* default accent */
  --accent: var(--sea);
  
  --link: #1F4D7A;
  --link-hover: #0E2E4A;
  
  --stroke: rgba(0,0,0,.08);
  --stroke-hover: rgba(0,0,0,.14);
  --stroke-strong: rgba(0,0,0,.22);
  
  --shadow-1: 0 1px 0 rgba(0,0,0,.04);
  --shadow-2: 0 6px 18px rgba(0,0,0,.06);
  --shadow-3: var(--shadow-2);
  
  --space-1: 10px;
  --space-2: 18px;
  --space-3: 28px;
  --space-4: 40px;

  --section-py: var(--space-3);
  --section-px: 22px;
  
  --hero-grad-top: color-mix(in srgb, var(--thames) 80%, black);
  --hero-grad-bottom: var(--thames);

}

/* Per-issue accent mapping */
body{ --accent: var(--sea); }
body[data-issue="crime"]{ --accent: var(--rust); }
body[data-issue="industry"]{ --accent: var(--sea); }
body[data-issue="parks"]{ --accent: var(--sea); }
body[data-issue="shopping"]{ --accent: var(--iron); }
body[data-issue="maps"]{ --accent: var(--slate); }

*{
  box-sizing:border-box;
}

body{
  margin:0;
  background:var(--bone);
  color:var(--iron);
  font-family:"Georgia","Times New Roman",serif;
  line-height:1.7;
  text-rendering:optimizeLegibility;
  font-size:1.05rem;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:var(--link);
  text-decoration:none;
}

a:hover{
  color:var(--link-hover);
}

/* Underline links in main story text and marginalia for legibility */
.story-body a,
.marginalia a{
  text-decoration:underline;
  text-decoration-thickness:1px;
}

:where(a, button, [role="button"], input, select, textarea):focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, white);
  outline-offset: 3px;
}

/* ========== HEADER ========== */

.hero{
  /* transparent masthead */
  background: transparent;
  color: var(--thames);
  text-align: center;

  /* compact + iOS safe-area */
  padding: calc(10px + env(safe-area-inset-top)) 20px 10px;
}

.hero-inner{
  max-width: 900px;
  margin: 0 auto;
}

.logo{
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: .04em;

  text-transform: lowercase;
  text-decoration: none;
  color: var(--thames);

  font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 850;
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: .92;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
}

.logo .emoji{
  display: inline-block;
  font-size: .76em;
  line-height: 1;
  transform: translateY(.03em);
  opacity: .9;
}

.logo .emoji::before{
  content: attr(data-emoji);
}

/* Disable any hover colour changes for the logo everywhere */
a.logo,
a.logo:link,
a.logo:visited,
a.logo:hover,
a.logo:active,
a.logo:focus{
  color: inherit;
  text-decoration: none;
}

.hero a.logo:hover,
.scrolly-intro a.logo:hover,
body.theme-dark-hero a.logo:hover{
  color: inherit;
}

/* accessible focus */
.logo:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, white);
  outline-offset: 6px;
  border-radius: 10px;
}

.subtitle{
  margin-top: .10rem;
  line-height: 1.05;

  font-family:
    ui-serif,
    "Iowan Old Style",
    "Palatino Linotype",
    Palatino,
    "Source Serif 4",
    Georgia,
    serif;

  font-style: italic;
  font-size: clamp(14px, 1.9vw, 18px);
  letter-spacing: .02em;

  color: color-mix(in srgb, var(--thames) 55%, var(--bone));
  opacity: 1;
}


/* ========== HEADLINES (GLOBAL) ========== */
h1, h2, h3, h4 {
  font-family: Georgia, serif;
  color: var(--thames);
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 .6rem;
}

/* ========== GENERIC LAYOUT HELPERS ========== */

.section{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-py) var(--section-px) 0;
}

.section:first-of-type{
  padding-bottom:14px;     /* was 28px */
}

.kicker{
  margin: 0 0 10px;

  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
  line-height: 1.15;

  font-family: Inter, "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;

  color: var(--thames);
  font-size: .86rem;
  opacity: .92;
}

/* Add breathing room when a kicker follows content (e.g., after a grid/cards) */
.section * + .kicker{
  margin-top: 18px;
}
/* If a kicker comes after a grid/cards block, give it breathing room */
.section .grid + .kicker{
  margin-top: 22px;
}

/* Used on index intro + headings */
.title{
  margin:.4rem 0 1rem;
  font-size:clamp(28px,4vw,40px);
}

.intro{
  margin: 0 0 18px;
  max-width: 70ch;

  font-family: Inter, "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;

  font-size: 1.02rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--iron);
  opacity: .92;
}

/* ========== FOOTER ========== */

footer{
  background: transparent;
  color: var(--iron);
  border-top: 1px solid var(--stroke);
  padding: var(--space-2) var(--section-px);
}

.foot-wrap{
  max-width:var(--maxw);
  margin:0 auto;
  text-align:center;
  font-family: Inter, "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
  font-size:.9rem;
}

.foot-wrap small{
  opacity:.95;
}

.foot-wrap a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.foot-wrap a:hover{
  color: inherit;
  text-decoration-thickness: 2px;
}

.foot-wrap .emoji{
  font-size:1em;
  transform:translateY(.06em);
}