@font-face { font-family: "Portsmouth"; src: url("./assets/fonts/Portsmouth.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Portsmouth Light"; src: url("./assets/fonts/Portsmouth-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Portsmouth Italic"; src: url("./assets/fonts/Portsmouth-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Portsmouth Bold"; src: url("./assets/fonts/Portsmouth-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Portsmouth Bold Italic"; src: url("./assets/fonts/Portsmouth-BoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Portsmouth Mono"; src: url("./assets/fonts/PortsmouthMono.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Portsmouth Rapids"; src: url("./assets/fonts/PortsmouthRapids.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Portsmouth Rapids Light"; src: url("./assets/fonts/PortsmouthRapids-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Portsmouth Rapids Italic"; src: url("./assets/fonts/PortsmouthRapids-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Portsmouth Rapids Bold"; src: url("./assets/fonts/PortsmouthRapids-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Portsmouth Rapids Bold Italic"; src: url("./assets/fonts/PortsmouthRapids-BoldItalic.ttf") format("truetype"); font-display: swap; }

:root {
  --paper: #f2eee2;
  --paper-deep: #e2dccb;
  --ink: #14211f;
  --navy: #1d3557;
  --navy-deep: #10243c;
  --teal: #207d7a;
  --teal-soft: #d8ece7;
  --gold: #d7b55c;
  --coral: #b95747;
  --line: rgba(20, 33, 31, .3);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #14233a; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px),
    #2b4058;
  background-size: 24px 24px;
  font-family: "Courier New", Courier, monospace;
}

a { color: inherit; text-underline-offset: .2em; }
button, select, input { font: inherit; }
.skip-link { position: fixed; z-index: 30; top: 8px; left: 8px; padding: 10px; color: #fff; background: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.masthead,
main {
  width: min(1220px, calc(100% - 32px));
  margin-inline: auto;
  background: var(--paper);
}

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 24px;
  padding: 16px 24px;
  border: 1px solid var(--ink);
  border-bottom: 0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
}
.masthead .hierarchy-nav.hierarchy-nav { margin: 0; }
.masthead > nav:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; }
.masthead > nav:last-child a { display: inline-flex; min-height: 44px; align-items: center; }

main { overflow: hidden; border: 1px solid var(--ink); border-top: 0; box-shadow: 16px 18px 0 #0b1424aa; }
section { padding-inline: clamp(24px, 6vw, 76px); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: clamp(34px, 6vw, 80px);
  align-items: end;
  min-height: 0;
  padding-top: clamp(62px, 9vw, 112px);
  padding-bottom: clamp(48px, 7vw, 82px);
  background:
    radial-gradient(circle at 88% 18%, rgba(32, 125, 122, .17), transparent 24rem),
    linear-gradient(155deg, #f7f3e9, var(--paper));
}
.issue,
.section-heading > p { margin: 0 0 12px; font-size: .71rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.hero .issue { grid-column: 1 / -1; color: var(--teal); }
h1 {
  max-width: 800px;
  margin: 0;
  font: 400 clamp(4.6rem, 9vw, 8.4rem)/.82 "Portsmouth Bold", sans-serif;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.lede {
  position: static;
  z-index: auto;
  max-width: 520px;
  margin: 0;
  padding: 26px 0 4px;
  border-top: 3px solid var(--gold);
  font: 400 clamp(1.25rem, 2.2vw, 1.8rem)/1.24 "Portsmouth", sans-serif;
}
.hero-word {
  position: static;
  z-index: auto;
  grid-column: 1 / -1;
  max-width: 100%;
  margin-top: 4px;
  overflow: hidden;
  color: rgba(29, 53, 87, .095);
  font: 400 clamp(7rem, 18vw, 14rem)/.72 "Portsmouth Italic", sans-serif;
  text-align: right;
  white-space: nowrap;
  transform: none;
}
.hero-facts {
  position: static;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  border-top: 2px solid var(--ink);
}
.hero-facts div { min-width: 0; padding: 14px 18px 0 0; }
.hero-facts dt { font-size: .65rem; line-height: 1.35; text-transform: uppercase; }
.hero-facts dd { margin: 6px 0 0; font: 400 1.2rem/1.1 "Portsmouth Bold", sans-serif; }

section:not(.hero) { margin: 0; padding-top: clamp(70px, 9vw, 112px); padding-bottom: clamp(70px, 9vw, 112px); }
section:nth-of-type(2n+1):not(.hero) { background: #e8e3d6; }
.section-heading {
  display: grid;
  grid-template-columns: minmax(150px, .38fr) minmax(0, 1.62fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--ink);
}
.section-heading > p { color: var(--teal); }
.section-heading h2 {
  max-width: 900px;
  margin: 0 0 20px;
  font: 400 clamp(2.5rem, 5.6vw, 4.8rem)/.9 "Portsmouth Bold", sans-serif;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.type-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) 1fr 1fr auto;
  gap: 14px;
  padding: 18px;
  color: #f4f7f3;
  background: var(--navy-deep);
  border: 1px solid var(--ink);
}
.type-controls label { display: grid; min-width: 0; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.type-controls select,
.type-controls input { grid-column: 1 / -1; width: 100%; min-width: 0; }
.type-controls select { min-height: 44px; padding: 8px; color: var(--ink); border: 1px solid #aeb9c2; background: #f7f3e9; }
.type-controls input { accent-color: var(--gold); }
.type-controls button,
.preset-shelf button { min-height: 44px; padding: 9px 13px; border: 1px solid currentColor; cursor: pointer; }
.type-controls button { color: #fff; background: transparent; }
.type-controls button:hover,
.type-controls button:focus-visible { color: var(--navy-deep); background: var(--gold); }
.preset-shelf button { color: var(--ink); background: transparent; }
.preset-shelf button:hover,
.preset-shelf button:focus-visible { color: #fff; background: var(--navy); }
.font-status { margin: 10px 0; color: #435450; font-size: .68rem; text-align: right; }
.type-sample {
  --specimen-size: 88px;
  --specimen-tracking: 0;
  min-height: 390px;
  margin-right: 12px;
  margin-bottom: 12px;
  padding: clamp(24px, 5vw, 58px);
  overflow-wrap: anywhere;
  border: 2px solid var(--ink);
  outline: 0;
  color: var(--ink);
  background: #e7d76b;
  font: 400 var(--specimen-size)/.98 "Portsmouth", sans-serif;
  letter-spacing: var(--specimen-tracking);
  box-shadow: 12px 12px 0 var(--navy);
  transition: color 150ms, background 150ms, box-shadow 150ms;
}
.type-sample:focus { box-shadow: 12px 12px 0 var(--coral); }
.type-sample.is-inverted { color: #f6e67b; background: var(--ink); }
.preset-shelf { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

.face-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.face-card { min-width: 0; padding: 20px 20px 26px; border: 1px solid var(--ink); background: #faf7ee; }
.face-card:nth-child(3n+2) { background: var(--teal-soft); }
.face-card span,
.rapids-comparison span { font: 700 .66rem/1 "Courier New", monospace; letter-spacing: .12em; text-transform: uppercase; }
.face-card p { min-height: 1em; margin: 32px 0 0; overflow-wrap: anywhere; outline: 0; font-size: clamp(2.2rem, 4.8vw, 4.6rem); line-height: .92; }
.face-card p:focus { background: #e7d76b; }
.face-regular p { font-family: "Portsmouth"; }
.face-light p { font-family: "Portsmouth Light"; }
.face-italic p { font-family: "Portsmouth Italic"; }
.face-bold p { font-family: "Portsmouth Bold"; }
.face-bold-italic p { font-family: "Portsmouth Bold Italic"; }
.face-mono p { font-family: "Portsmouth Mono"; }
.rapids-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  margin-top: 14px;
  padding: clamp(24px, 5vw, 52px);
  color: #fff;
  background: var(--navy);
}
.rapids-comparison > div { min-width: 0; border-bottom: 1px solid rgba(255, 255, 255, .45); }
.rapids-comparison p { white-space: normal; overflow-wrap: anywhere; }
.portsmouth-line,
.rapids-line { margin: 14px 0 22px; font-size: clamp(1.8rem, 4vw, 3.8rem); line-height: .95; }
.portsmouth-line { font-family: "Portsmouth"; }
.rapids-line { font-family: "Portsmouth Rapids"; }
.rapids-comparison > p { grid-column: 1 / -1; max-width: 760px; margin: 10px 0 0 auto; line-height: 1.6; }

.process-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--ink);
  list-style: none;
}
.process-flow li { min-width: 0; min-height: 210px; padding: 24px; color: var(--ink); background: var(--paper); }
.process-flow li::after { content: none; }
.process-flow b { display: block; color: var(--teal); font-size: .7rem; }
.process-flow strong { display: block; margin-top: 38px; font: 400 1.75rem/1 "Portsmouth Bold", sans-serif; }
.process-flow span { display: block; max-width: 46ch; margin-top: 14px; font-size: .78rem; line-height: 1.52; }
.process-flow .rejected { color: #fff; background: var(--coral); }
.process-flow .rejected b { color: #ffe594; }
.method-note { width: fit-content; max-width: 100%; margin: 22px 0 0 auto; padding: 10px 14px; border: 1px dashed var(--ink); font-weight: 700; line-height: 1.45; }

.glyph-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.glyph-grid article { min-width: 0; overflow: hidden; padding: 22px; border: 1px solid var(--ink); background: #faf7ee; }
.glyph-grid article:nth-child(3n+2) { background: var(--teal-soft); }
.glyph-grid article.wide { grid-column: span 2; }
.glyph { display: grid; min-height: 180px; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); font: 400 clamp(7rem, 14vw, 10rem)/.8 "Portsmouth", sans-serif; }
.glyph.disambiguation { font-family: "Portsmouth Mono"; font-size: clamp(3rem, 6vw, 5.4rem); white-space: normal; text-align: center; }
.glyph.navigation { font-size: clamp(2.2rem, 4.5vw, 4rem); text-align: center; }
.glyph.punctuation { font-size: clamp(2.7rem, 6vw, 5.6rem); white-space: normal; text-align: center; overflow-wrap: anywhere; }
.glyph-grid h3 { margin: 22px 0 9px; font: 400 1.45rem/1 "Portsmouth Bold", sans-serif; }
.glyph-grid p { margin: 0; font-size: .8rem; line-height: 1.6; }

.plate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.plate-grid figure { min-width: 0; margin: 0; border: 1px solid var(--ink); background: #fff; }
.plate-button { display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in; }
.plate-button img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.plate-grid figcaption { padding: 11px 13px; border-top: 1px solid var(--line); font-size: .68rem; font-weight: 800; text-transform: uppercase; }

.source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 1px; background: var(--ink); }
.source-grid div { min-width: 0; min-height: 150px; padding: 18px; background: var(--paper); }
.source-grid strong { display: block; font: 400 1.45rem/1 "Portsmouth Bold"; }
.source-grid span { display: block; margin-top: 44px; font-size: .7rem; line-height: 1.45; }
.attribution { max-width: 780px; margin: 26px 0 0 auto; font-size: .78rem; line-height: 1.6; }

.download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.download-grid a {
  display: flex;
  min-width: 0;
  min-height: 220px;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  color: #fff;
  background: var(--navy);
  border: 2px solid var(--ink);
  box-shadow: 7px 7px 0 var(--teal);
  text-decoration: none;
}
.download-grid a:nth-child(2) { color: var(--ink); background: #e7d76b; box-shadow-color: var(--coral); }
.download-grid a:nth-child(3) { background: var(--teal); box-shadow-color: var(--ink); }
.download-grid a:hover,
.download-grid a:focus-visible { transform: translate(3px, 3px); box-shadow: 4px 4px 0 var(--coral); }
.download-grid strong { font: 400 2rem/.95 "Portsmouth Bold"; }
.download-grid span { font-size: .72rem; line-height: 1.5; overflow-wrap: anywhere; }

dialog { width: min(1100px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 46px 14px 14px; border: 2px solid var(--ink); background: var(--paper); }
dialog::backdrop { background: rgba(9, 14, 14, .84); }
dialog img { display: block; max-width: 100%; max-height: calc(100vh - 104px); margin: auto; }
dialog button { position: absolute; top: 8px; right: 8px; min-height: 40px; padding: 7px 10px; border: 1px solid var(--ink); background: #e7d76b; cursor: pointer; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero .issue,
  .hero-word,
  .hero-facts { grid-column: 1; }
  .type-controls { grid-template-columns: 1fr 1fr; }
  .face-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate-grid,
  .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .masthead,
  main { width: 100%; margin: 0; border-right: 0; border-left: 0; box-shadow: none; }
  .masthead { grid-template-columns: 1fr; align-items: start; padding: 12px 18px; }
  .masthead > nav:last-child { justify-content: flex-start; }
  section { padding-inline: 20px; }
  h1 { font-size: clamp(4rem, 22vw, 6.2rem); }
  .hero-word { font-size: clamp(5.6rem, 28vw, 8.5rem); text-align: left; }
  .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading { grid-template-columns: 1fr; gap: 2px; }
  .type-controls,
  .face-grid,
  .rapids-comparison,
  .process-flow,
  .glyph-grid,
  .plate-grid,
  .source-grid,
  .download-grid { grid-template-columns: 1fr; }
  .rapids-comparison > p,
  .glyph-grid article.wide { grid-column: 1; }
  .type-controls button { min-height: 50px; }
  .type-sample { min-height: 340px; margin-right: 7px; padding: 22px 16px; box-shadow: 7px 7px 0 var(--navy); }
  .glyph { min-height: 150px; }
  .source-grid div { min-height: 118px; }
  .source-grid span { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }