/* ==========================================================================
   Yair Walton, personal site

   Editorial layout: section labels sit in the left margin, the reading
   column stays narrow. Palette and type follow Yair's personal visual
   system, slate register. To move to the gold (Jewish communal) register,
   swap the two accent values under :root.

   Fonts are self-hosted from assets/fonts, so the site keeps its
   typography with no third-party request and no tracking.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */

@font-face {
  font-family: 'Newsreader';
  src: url('assets/fonts/newsreader-var.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('assets/fonts/newsreader-italic-var.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/figtree-var.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/space-grotesk-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */

:root {
  --porcelain: #F6F7F8;
  --card: #FFFFFF;
  --line: #DFE3E9;

  --ink: #101823;
  --ink-2: #4C5563;
  /* #66707F, not a lighter grey: labels and the footer disclaimer are small
     text and need 4.5:1. This clears it on both white and porcelain. */
  --ink-3: #66707F;

  /* Accent, slate register */
  --accent: #3D6480;
  --accent-deep: #2B4A61;

  /* Gold register, for an easy switch:
     --accent: #A2761C; --accent-deep: #7D5A12; */

  --measure: 60ch;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --rail: 9rem;   /* width of the left label column */
}

/* Evening palette. Same system, reversed, per the brand's dark treatment. */
@media (prefers-color-scheme: dark) {
  :root {
    --porcelain: #16202C;
    --card: #101823;
    --line: rgba(255, 255, 255, 0.14);

    --ink: #FFFFFF;
    --ink-2: rgba(255, 255, 255, 0.72);
    --ink-3: rgba(255, 255, 255, 0.55);

    --accent: #8EB6D0;
    --accent-deep: #8EB6D0;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--card);
  color: var(--ink);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--card); padding: 0.75rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

.wrap { max-width: 1080px; margin: 0 auto; }

/* ---------------------------------------------------------------- labels */

/* Section labels are real headings, so screen readers and search engines
   can see the document structure. They are styled down, not sized up. */
.kicker {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

/* ------------------------------------------------------------------ head */

.site-head {
  padding: 1.75rem var(--pad);
  border-bottom: 1px solid var(--line);
}

.head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
}
.mark svg { width: 40px; height: 22px; }
.mark line { stroke: var(--ink); stroke-width: 1.5; }
.mark .point-solid { fill: var(--ink); }
.mark .point-open { fill: none; stroke: var(--accent); stroke-width: 2; }

.site-head nav { display: flex; gap: 1.75rem; font-size: 0.875rem; }
.site-head nav a { text-decoration: none; color: var(--ink-2); padding: 0.25rem 0; }
.site-head nav a:hover { color: var(--ink); }

/* --------------------------------------------------------------- opening */

.open { padding: clamp(3rem, 8vw, 6.5rem) var(--pad) clamp(2.5rem, 6vw, 4.5rem); }

.open-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.open h1 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3.125rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 1.5rem 0 1.75rem;
  text-wrap: pretty;
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--ink-2);
  max-width: 44ch;
  margin: 0 0 2rem;
}

.open-cta { margin: 0; font-size: 1.0625rem; }
.open-cta a {
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
  color: var(--ink);
}
.open-cta a:hover { border-bottom-color: var(--ink); }

/* The portrait sits slightly low, so it reads as placed rather than slotted. */
.portrait { margin: 0; padding-top: 1.75rem; }
.portrait img { width: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

/* -------------------------------------------------------------- sections */

.section {
  padding: clamp(2.75rem, 6vw, 4.75rem) var(--pad);
  border-top: 1px solid var(--line);
}

.section-grid {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* Labels hang in the margin, aligned to the first line of text. */
.section-grid > .kicker { padding-top: 0.55rem; }

.prose { max-width: var(--measure); }
.prose > p { margin: 0 0 1.5rem; color: var(--ink-2); }
.prose > p:last-child { margin-bottom: 0; }

.prose > p:first-child {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.1875rem, 2.1vw, 1.4375rem);
  line-height: 1.52;
  color: var(--ink);
}

blockquote {
  margin: 2.25rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
}
blockquote p {
  margin: 0;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3125rem, 2.6vw, 1.75rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 24ch;
}

/* ------------------------------------------------------------- reach me */

.reach { background: var(--porcelain); }

.prose > p.big {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 1.5rem;
}

.links {
  list-style: none;
  padding: 0;
  margin: 0 0 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 2.25rem;
  font-size: 1.0625rem;
}
.links a { display: inline-block; padding: 0.25rem 0; }

.routing {
  color: var(--ink-3);
  font-size: 0.9375rem;
  max-width: 48ch;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.prose > .routing { margin-bottom: 0; }

/* ------------------------------------------------------------------ foot */

.site-foot {
  padding: 2.25rem var(--pad) 3.25rem;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.8125rem;
}
.site-foot p { margin: 0 0 0.4rem; max-width: 62ch; }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 860px) {
  .open-grid { grid-template-columns: 1fr; }

  /* Headline first, portrait after. To lead with the photo on phones
     instead, add: .portrait { order: -1; } */
  .portrait { padding-top: 0; margin-top: 2rem; max-width: 300px; }

  /* Labels move above the text instead of into the margin. */
  .section-grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .section-grid > .kicker { padding-top: 0; }
}

/* ==========================================================================
   Additional pages: press, subscribe, splash
   ========================================================================== */

/* Keeps the same left edge as every other page; only the text column narrows. */
.wrap.narrow { max-width: 1080px; }
.wrap.narrow > * { max-width: 640px; }

.page-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.875rem, 4vw, 2.875rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 1.25rem 0 1.5rem;
  max-width: 26ch;
  text-wrap: pretty;
}

/* Topic lists on the press page. Markers, not bullets. */
ul.plain {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.plain li {
  color: var(--ink-2);
  padding: 0.85rem 0 0.85rem 1.5rem;
  border-top: 1px solid var(--line);
  position: relative;
}
ul.plain li:last-child { border-bottom: 1px solid var(--line); }
ul.plain li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.shot {
  margin: 0 0 1.5rem;
  max-width: 260px;
  border: 1px solid var(--line);
  padding: 0.5rem;
}
.shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ------------------------------------------------------------------ form */

.signup { margin: 2.5rem 0 1.75rem; }

.signup label {
  display: block;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.6rem;
}

.signup-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.signup input {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-bottom-color: var(--ink-3);
  padding: 0.85rem 1rem;
  border-radius: 0;
}
.signup input::placeholder { color: var(--ink-3); }
.signup input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.signup button {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--card);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  border-radius: 0;
  transition: background 160ms ease, color 160ms ease;
}
.signup button:hover { background: transparent; color: var(--ink); }

/* ---------------------------------------------------------------- splash */

.splash {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 10vh, 7rem) var(--pad);
}
.mark-lg { margin-bottom: 2.5rem; }
.mark-lg svg { width: 64px; height: 35px; }
.mark-lg line { stroke: var(--ink); stroke-width: 1.5; }
.mark-lg .point-solid { fill: var(--ink); }
.mark-lg .point-open { fill: none; stroke: var(--accent); stroke-width: 2; }
.splash .page-title { margin-top: 1rem; }
.splash .routing { margin-top: 2.5rem; }

/* ------------------------------------------------------------ foot links */

.foot-links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 0.75rem; }
.foot-links a { color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); }

/* ------------------------------------------------------------------- bio */

.bio-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 230px);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
.bio-body .prose { max-width: 54ch; }

.bio-shot { margin: 0.4rem 0 0; }
.bio-shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

@media (max-width: 860px) {
  .bio-body { grid-template-columns: 1fr; }
  .bio-shot { max-width: 230px; margin-top: 0.5rem; }
}