/* sammyzukor.com — one stylesheet, no framework, no external assets except fonts.
   Palette: red and Zukor blue. Black is reserved for reading text. */

:root {
  --paper:     #FFFFFF;
  --ink:       #000000;   /* prose only */
  --red:       #C8102E;
  --blue:      #1560BD;   /* Zukor blue */
  --blue-deep: #0A2A5E;
  --rule:      #C7D3E4;   /* hairline, biased toward the blue */
  --wash:      #EEF3FA;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --prose:   "Newsreader", Georgia, "Times New Roman", serif;
  --util:    "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--prose);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--ink); }

.shell {
  max-width: 46rem;
  margin: 0 auto;
  padding-inline: 20px;
  padding-block: 0 80px;
}

/* ---------- masthead ---------- */
.masthead { padding-block: 44px 0; }
.masthead a.home { text-decoration: none; color: inherit; display: block; }

.kicker {
  font-family: var(--util);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--red);
  margin: 0 0 8px;
}

.masthead h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.2rem, 9.6vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.032em;
  color: var(--blue);
  margin: 0;
}
.masthead h1 em { font-style: normal; color: var(--red); }

.rulebar { display: flex; margin-top: 20px; height: 7px; }
.rulebar i { display: block; }
.rulebar i:nth-child(1) { background: var(--red);  flex: 3; }
.rulebar i:nth-child(2) { background: var(--blue); flex: 5; }

.standfirst {
  font-family: var(--util);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin: 14px 0 0;
}

/* ---------- home page: Latest and Featured ---------- */
.heroes {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 38px;
}

.hero-label {
  display: inline-block;
  font-family: var(--util);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 5px 12px;
  margin: 0 0 16px;
}
.hero-label-latest   { background: var(--red); }
.hero-label-featured { background: var(--blue); }

.hero-split { display: flex; gap: 26px; align-items: flex-start; }
.hero-split:not(.has-art) { display: block; }
.hero-copy { flex: 1 1 auto; min-width: 0; }

.hero-art { flex: 0 0 190px; max-width: 190px; }
.hero-art img { display: block; width: 100%; border: 2px solid var(--blue); }

@media (max-width: 620px) {
  .hero-split { flex-direction: column; gap: 20px; }
  .hero-art { flex: 0 0 auto; max-width: 240px; }
}

.hero-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.7rem, 6.4vw, 2.45rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0 0 14px;
}
.hero-title a { text-decoration: none; color: var(--ink); }
.hero-title a:hover { color: var(--red); }

.hero-excerpt {
  font-size: 1.1rem;
  line-height: 1.66;
  margin: 0 0 18px;
  max-width: 34em;
}

.hero-cta {
  display: inline-block;
  font-family: var(--util);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blue);
  border: 2px solid var(--blue);
  padding: 9px 16px;
}
.hero-cta:hover { background: var(--blue); color: var(--paper); }
.hero-cta:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.archive-head {
  margin-top: 54px;
  padding-top: 22px;
  border-top: 7px solid var(--blue);
}
.archive-head h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  color: var(--blue);
  margin: 0;
}

/* ---------- section nav ---------- */
nav.sections {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--blue);
}
.chip {
  font-family: var(--util);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 13px;
  border: 2px solid var(--blue);
  background: var(--paper);
  color: var(--blue);
  cursor: pointer;
  line-height: 1;
}
.chip[aria-pressed="true"] { background: var(--blue); color: var(--paper); }
.chip[data-sect="rants"][aria-pressed="true"] {
  background: var(--red); border-color: var(--red);
}
.chip[data-sect="ai"][aria-pressed="true"] {
  background: var(--blue-deep); border-color: var(--blue-deep);
}
.chip:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---------- index ---------- */
.index-list { list-style: none; margin: 0; padding: 0; }
.index-list > li { border-bottom: 1px solid var(--rule); }

.row {
  display: block;
  width: 100%;
  text-decoration: none;
  color: var(--ink);
  border-left: 6px solid transparent;
  padding: 22px 0;
  transition: border-color 0.12s, padding-left 0.12s;
}
.row:hover, .row:focus-visible { border-left-color: var(--red); padding-left: 14px; }
.row:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .row { transition: none; } }

.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.sect-tag {
  font-family: var(--util);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 3px 7px;
  line-height: 1.3;
  border: 2px solid transparent;
}
.sect-rants       { background: var(--red); }
.sect-reflections { background: var(--blue); }
.sect-ai          { background: var(--blue-deep); }
/* Papers is outlined rather than filled: it marks work published elsewhere,
   which is a different kind of thing, not just a different subject. */
.sect-papers {
  background: var(--paper);
  color: var(--blue);
  border-color: var(--blue);
}

.stamp {
  font-family: var(--util);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.row-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.35rem, 5.2vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
.row-note {
  font-family: var(--util);
  font-size: 0.7rem;
  line-height: 1.55;
  margin: 8px 0 0;
}
.ext::after { content: " \2197"; font-family: var(--util); }

.empty { font-family: var(--util); font-size: 0.78rem; padding: 40px 0; }

/* ---------- reading view ---------- */
.piece { padding-top: 34px; }
.piece .eyebrow { margin-bottom: 16px; }
.piece h2.title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 8.5vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0 0 22px;
}
.piece .rulebar { margin: 0 0 30px; height: 5px; }

.piece-subtitle {
  font-family: var(--util);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.6;
  margin: -10px 0 22px;
  max-width: 34em;
}

.piece-hero { margin: 0 0 36px; }
.piece-hero img { display: block; width: 100%; border: 2px solid var(--blue); }
.piece-hero figcaption {
  font-family: var(--util);
  font-size: 0.68rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin-top: 8px;
}

.body p {
  font-size: 1.15rem;
  line-height: 1.72;
  margin: 0 0 1.2em;
  max-width: 34em;
}
.body h2, .body h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--blue);
  margin: 2em 0 0.7em;
  max-width: 34em;
  text-wrap: balance;
}
.body h2 { font-size: 1.4rem; }
.body h3 { font-size: 1.1rem; }
.body ul, .body ol { max-width: 34em; padding-left: 1.2em; margin: 0 0 1.2em; }
.body li { font-size: 1.08rem; line-height: 1.68; margin-bottom: 0.45em; }
.body blockquote {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 4.4vw, 1.5rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  border-left: 6px solid var(--red);
  padding: 4px 0 4px 20px;
  margin: 32px 0;
  max-width: 30em;
}
.body blockquote p { font-family: inherit; font-size: inherit; line-height: inherit; margin: 0; }
.body hr { border: 0; border-top: 2px solid var(--blue); max-width: 34em; margin: 34px 0; }
.body code { font-family: var(--util); font-size: 0.9em; background: var(--wash); padding: 1px 5px; }
.body pre {
  font-family: var(--util);
  font-size: 0.85rem;
  background: var(--wash);
  border-left: 6px solid var(--blue);
  padding: 16px 18px;
  overflow-x: auto;
  max-width: 40em;
}
.body pre code { background: none; padding: 0; }
.body em { font-style: italic; }
.body strong { font-weight: 600; }
.body table { border-collapse: collapse; width: 100%; }
.table-scroll { overflow-x: auto; margin: 0 0 1.2em; }
.body th, .body td { border: 1px solid var(--rule); padding: 8px 10px; text-align: left; font-size: 0.98rem; }
.body th { font-family: var(--util); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- note box ---------- */
.postbox {
  margin-top: 52px;
  border: 2px solid var(--blue);
  border-top: 10px solid var(--red);
  padding: 24px 22px 26px;
  background: var(--wash);
}
.postbox h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--blue);
  margin: 0 0 10px;
}
.privacy {
  font-family: var(--util);
  font-size: 0.72rem;
  line-height: 1.65;
  margin: 0 0 20px;
  max-width: 36em;
}
.privacy strong { font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label {
  font-family: var(--util);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.field input, .field textarea {
  font-family: var(--prose);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--blue);
  padding: 10px 12px;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--red); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.send {
  font-family: var(--util);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--paper);
  border: 2px solid var(--red);
  padding: 12px 22px;
  cursor: pointer;
}
.send:hover { background: var(--blue); border-color: var(--blue); }
.send:disabled { background: var(--blue); border-color: var(--blue); cursor: default; }
.send:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }

.result {
  font-family: var(--util);
  font-size: 0.8rem;
  line-height: 1.7;
  border-left: 6px solid var(--red);
  padding-left: 16px;
  margin-top: 16px;
}

.backbar { margin-top: 46px; padding-top: 18px; border-top: 2px solid var(--blue); }
.backbar a {
  font-family: var(--util);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blue);
}
.backbar a:hover { color: var(--red); }

footer {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--util);
  font-size: 0.66rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

/* ---------- notes inbox (private) ---------- */
.inbox-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--blue);
}
.inbox-head h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.8rem;
  letter-spacing: -0.03em;
  color: var(--blue);
  margin: 0;
  text-transform: uppercase;
}
.counter {
  font-family: var(--util);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.note-card {
  border-bottom: 1px solid var(--rule);
  padding: 22px 0 22px 14px;
  border-left: 6px solid var(--red);
}
.note-card.is-read { border-left-color: var(--rule); }
.note-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--util);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.note-meta .who { font-weight: 600; text-transform: uppercase; }
.note-body { font-size: 1.08rem; line-height: 1.7; white-space: pre-wrap; margin: 0 0 12px; max-width: 34em; }
.note-act {
  font-family: var(--util);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: 2px solid var(--blue);
  padding: 5px 10px;
  cursor: pointer;
  color: var(--blue);
}
.note-act:hover { background: var(--blue); color: var(--paper); }

/* ---------- responsive hardening ----------
   Added after a pass over the site at phone, tablet and desktop widths.
   Everything below is additive: no existing rule is changed. */

/* A long pasted URL or an unbreakable word can otherwise widen the column
   and set the whole page scrolling sideways on a narrow screen. */
.masthead h1,
.standfirst,
.hero-title,
.hero-excerpt,
.row-title,
.row-note,
.piece-subtitle,
.body p,
.body li,
.body h2,
.body h3,
.note-body {
  overflow-wrap: break-word;
}

/* Form controls never exceed their container. */
.field input,
.field textarea,
input[type="text"],
input[type="email"],
textarea {
  max-width: 100%;
}

/* The Featured hero was stacking only below 620px, which left the cover and
   the copy fighting for room on small tablets and landscape phones. */
@media (max-width: 700px) {
  .hero-split { flex-direction: column; gap: 20px; }
  .hero-art { flex: 0 0 auto; max-width: 240px; }
}

/* Touch devices get targets sized for a thumb rather than a cursor.
   Pointer-based devices are untouched, so the desktop layout does not loosen. */
@media (pointer: coarse) {
  nav.sections { gap: 10px; }
  .chip { padding: 12px 16px; font-size: 0.74rem; }
  .row { padding: 26px 0; }
  .hero-cta, .send { padding: 14px 22px; }
}

/* Small phones: reclaim a little of the gutter for the text. */
@media (max-width: 380px) {
  .shell { padding-inline: 16px; }
  .chip { letter-spacing: 0.06em; padding-inline: 12px; }
}

/* ---------- masthead on phones ----------
   The kicker was set at caption size, which read as a label rather than as
   part of the title. On a phone it carries more weight, and the name drops to
   a viewport-scaled size so "Samuel Turcotte (Davis)" holds one line at any
   phone width. The hard break is suppressed here only; desktop keeps it. */
@media (max-width: 700px) {
  .kicker {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
  }
  .masthead h1 br { display: none; }
  .masthead h1 {
    font-size: 6vw;
    white-space: nowrap;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }
}

/* ---------- standfirst and the Latest marker ----------
   The standfirst sits under the rule as part of the title block, so it takes
   the same weight as the name rather than reading as fine print.
   The Latest marker is centered at every width. */
.standfirst {
  font-weight: 700;
}
.hero-label-latest {
  display: block;
  width: fit-content;
  margin-inline: auto;
}

/* Essays: outlined in red, the counterpart to Papers outlined in blue.
   Rants keep the solid red, so the two never read as the same thing. */
.sect-essays {
  background: var(--paper);
  color: var(--red);
  border-color: var(--red);
}

/* The copyright line carries the name, so it is set apart from the
   site-status line above it: bold, centered, at every width. */
footer .copyright {
  display: block;
  text-align: center;
  font-weight: 700;
  margin-top: 4px;
}

/* "Read" closes the summary rather than sitting in a button below it.
   Set in the display face so it carries weight inside the prose line. */
.readmore {
  display: block;
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.readmore:hover { color: var(--red); text-decoration: none; }
.readmore:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* Papers now carries the same solid treatment as the other section tags,
   since the large badge above the cover is gone. */
.sect-papers {
  background: var(--blue);
  color: var(--paper);
  border-color: var(--blue);
}

/* Reflections and Papers both take the outlined treatment: white field,
   blue rule, blue letters. This supersedes the solid fill set above. */
.sect-reflections,
.sect-papers {
  background: var(--paper);
  color: var(--blue);
  border-color: var(--blue);
}