/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V5
 * Hallmark · genre: editorial · macrostructure: Letter · theme: Almanac
 * tone: intimate-utilitarian · anchor hue: 55 · enrichment: photos · nav: N6 · footer: Ft6
 */
@import url("tokens.css");
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;1,6..72,400&display=swap");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.62;
}
img { max-width: 100%; height: auto; display: block; object-fit: cover; }
a { color: var(--color-accent); text-underline-offset: 0.16em; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 var(--space-sm);
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-display); max-width: 18ch; }
h2 { font-size: var(--text-display-s); }
p { margin: 0 0 var(--space-md); max-width: 65ch; }
.ph-wrap { width: min(100% - 2.2rem, var(--wrap)); margin-inline: auto; }
.ph-skip { position: absolute; left: -999px; }
.ph-skip:focus { left: var(--space-sm); top: var(--space-sm); z-index: 40; background: var(--color-ink); color: var(--color-paper); padding: var(--space-sm); }

/* N6 masthead — not sticky, not blur */
.ph-mast {
  text-align: center;
  padding: var(--space-md) 0 var(--space-lg);
  border-bottom: 3px double var(--color-ink);
}
.ph-issue {
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 var(--space-sm);
}
.ph-word {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
  display: block;
  line-height: 1;
}
.ph-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ph-links a { color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.ph-links a:hover { text-decoration: underline; }
.ph-links a:focus-visible, .ph-chip:focus-visible, .ph-btn:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.ph-letter {
  padding: var(--space-3xl) 0 var(--space-2xl);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
  gap: var(--space-2xl);
  align-items: end;
}
.ph-greet { font-style: italic; font-size: 1.35rem; margin-bottom: var(--space-lg); }
.ph-letter img { width: 100%; aspect-ratio: 3/4; min-width: 0; filter: grayscale(0.25) contrast(1.05); border: var(--rule) solid var(--color-ink); }
.ph-sign { font-family: var(--font-display); margin-top: var(--space-xl); }

.ph-col { padding: var(--space-3xl) 0; border-top: var(--rule) solid var(--color-rule); }
.ph-kicker {
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 var(--space-sm);
  color: var(--color-ink-2);
}

.ph-topics {
  columns: 2;
  column-gap: var(--space-2xl);
  border-top: var(--rule) solid var(--color-ink);
  padding-top: var(--space-lg);
}
.ph-topics article {
  break-inside: avoid;
  padding: var(--space-md) 0;
  border-bottom: var(--rule) solid var(--color-rule);
}
.ph-topics img { width: 100%; aspect-ratio: 16/9; margin: 0 0 var(--space-sm); min-width: 0; }

.ph-desk { background: var(--color-paper-2); margin-top: var(--space-2xl); padding: var(--space-2xl) 0; }
.ph-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-lg); }
.ph-chip {
  font-family: var(--font-display);
  background: transparent;
  border: var(--rule) solid var(--color-ink);
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  color: var(--color-ink);
}
.ph-chip.is-on, .ph-chip:hover { background: var(--color-ink); color: var(--color-paper); }
.ph-qa details { border-top: var(--rule) solid var(--color-ink); padding: var(--space-md) 0; }
.ph-qa summary {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.ph-qa summary::-webkit-details-marker { display: none; }
.ph-qa p { margin-top: var(--space-sm); }

.ph-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-2xl);
  align-items: center;
}
.ph-split img { width: 100%; aspect-ratio: 4/5; min-width: 0; border: var(--rule) solid var(--color-ink); }

.ph-notes { display: grid; grid-template-columns: 1fr 1.2fr 0.9fr; gap: var(--space-xl); }
.ph-notes article { min-width: 0; border-top: 2px solid var(--color-ink); padding-top: var(--space-md); }

.ph-life { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.ph-life img { width: 100%; aspect-ratio: 16/10; margin-bottom: var(--space-sm); min-width: 0; }

.ph-gal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  background: var(--color-ink);
}
.ph-gal img { width: 100%; height: 8.5rem; min-width: 0; }

.ph-formbox, .ph-write {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
}
form { display: grid; gap: var(--space-sm); }
label { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; }
input, textarea {
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-bottom: 2px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  border-radius: 0;
}
.ph-btn {
  justify-self: start;
  font-family: var(--font-display);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-accent);
  padding: 0.4rem 0;
  cursor: pointer;
  font-size: 1.1rem;
}
.ph-btn:hover { color: var(--color-ink); border-color: var(--color-ink); }
.hp-field { position: absolute; left: -9999px; }
.ph-consent { text-transform: none; letter-spacing: 0; display: flex; gap: var(--space-xs); }
.ph-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }

.ph-close {
  padding: var(--space-3xl) 0 var(--space-xl);
  border-top: 3px double var(--color-ink);
}
.ph-close p.ph-bye {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 20ch;
}
.ph-close nav { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); font-size: var(--text-sm); }
.legal-page { width: min(100% - 2rem, 40rem); margin: var(--space-3xl) auto; }
.ph-letter p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.4rem;
  float: left;
  line-height: 0.8;
  padding-right: 0.08em;
  font-weight: 700;
}
.ph-mast .ph-word:hover { color: var(--color-accent); }
.ph-qa details + details { margin-top: 0; }
.ph-chip[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
.ph-notes article h3 { font-size: 1.2rem; }
.ph-life h3 { margin-bottom: var(--space-2xs); }
.ph-formbox h2 { max-width: 16ch; }
.ph-write h2 { max-width: 16ch; }
.ph-close small { color: var(--color-ink-2); }
.ph-topics h3 { font-size: 1.25rem; }
@media (min-width: 90rem) {
  .ph-wrap { width: min(100% - 4rem, 76rem); }
}
@media (max-width: 40rem) {
  h1 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .ph-links a { white-space: normal; }
  .ph-gal img { height: 7rem; }
}
.ph-cookie {
  position: fixed; inset: auto 0 0 0;
  background: var(--color-paper-2);
  border-top: var(--rule) solid var(--color-ink);
  padding: var(--space-md) var(--space-lg);
  display: flex; gap: var(--space-md); justify-content: space-between; flex-wrap: wrap; align-items: center;
  z-index: 30;
}

@media (max-width: 60rem) {
  .ph-letter, .ph-split, .ph-notes, .ph-life, .ph-formbox, .ph-write { grid-template-columns: 1fr; }
  .ph-topics { columns: 1; }
  .ph-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-pair { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}