@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; }

/* Portsmouth: the house frame with a harbor-slate subject colour. The reading text is set
   in Portsmouth itself, so the page shows the spacing it describes. */

.house-frame:has(.pm-cover) {
  --cover-a: #24546a;
  --cover-b: #0d2233;
  --cover-glow: rgba(120, 200, 214, .28);
  --cover-warm: rgba(255, 207, 102, .16);
  --accent: #2b6276;
}

.pm-cover h1 { font-family: "Portsmouth", var(--h-serif); font-weight: 400; letter-spacing: 0; }

.pm-prose, .pm-prose :is(p, li) { font: 17.5px/1.62 "Portsmouth", var(--h-serif); }
.pm-prose > h2, .pm-body .house-section > h2 { font-family: var(--h-serif); }
.pm-body h3 { font-family: var(--h-serif); }

/* The live specimen: an instrument with a lit housing and a recessed writing well. */
.pm-specimen {
  padding: 18px 20px 20px;
  background: linear-gradient(#f7f9fc, #e8edf4);
  border: 1px solid #b8c4d6; border-radius: 5px;
  box-shadow: inset 0 1px #fff, 0 10px 26px rgba(22, 31, 52, .16);
}
.pm-specimen > h2 { margin-bottom: 12px; }
.pm-controls { display: grid; grid-template-columns: minmax(200px, 1.4fr) 1fr 1fr auto; gap: 12px 18px; align-items: end; font: 13px/1.4 var(--h-sans); }
.pm-controls label { display: grid; gap: 4px; font-weight: 700; }
.pm-controls output { font-weight: 400; color: var(--h-muted); font-variant-numeric: tabular-nums; }
.pm-controls select {
  min-height: 36px; padding: 6px 8px; font: 14px var(--h-sans); color: var(--h-ink); background: #fff;
  border: 1px solid var(--h-well-edge); border-radius: 3px; box-shadow: inset 0 1px 3px rgba(29, 45, 75, .14);
}
.pm-controls input[type="range"] { width: 100%; accent-color: var(--h-action-bottom); }
.pm-controls .house-btn[aria-pressed="true"] { color: var(--h-gold-ink); background: linear-gradient(var(--h-gold-top), var(--h-gold-bottom)); border-color: var(--h-gold-edge); }

.pm-sample {
  --specimen-size: 88px;
  --specimen-tracking: 0;
  min-height: 2.3em; margin: 16px 0 0; padding: 22px 26px;
  overflow-wrap: break-word; outline-offset: 4px;
  color: var(--h-ink); background: #fff;
  font: 400 min(var(--specimen-size), 13vw)/1.02 "Portsmouth", sans-serif;
  letter-spacing: var(--specimen-tracking);
  border: 1px solid var(--h-well-edge); border-radius: 3px;
  box-shadow: inset 0 2px 6px rgba(29, 45, 75, .16);
}
.pm-sample.is-inverted { color: #f4f1e2; background: #10243a; border-color: #0a1828; }
.pm-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pm-status { margin: 10px 0 0; color: var(--h-muted); font: 13px/1.4 var(--h-sans); }

.pm-rapids { display: grid; gap: 4px; margin-top: 16px; max-width: 960px; }
.pm-rapids-line { margin: 0; padding: 8px 0; font-size: clamp(24px, 3.6vw, 44px); line-height: 1.15; border-top: 1px solid var(--h-line); }
.pm-rapids-line span { display: block; color: var(--h-muted); font: 13px/1.4 var(--h-sans); }
.pm-face-portsmouth { font-family: "Portsmouth"; }
.pm-face-rapids { font-family: "Portsmouth Rapids"; }

.pm-faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: #fff; border: 1px solid var(--h-line); border-radius: 4px; overflow: hidden; }
.pm-face { padding: 14px 18px 18px; border-right: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); }
.pm-face:nth-child(3n) { border-right: 0; }
.pm-face:nth-last-child(-n+3) { border-bottom: 0; }
.pm-face h3 { margin: 0; color: var(--h-muted); font: 13px/1.4 var(--h-sans); }
.pm-face p { margin: 6px 0 0; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; overflow-wrap: anywhere; }
.pm-face-regular p { font-family: "Portsmouth"; }
.pm-face-light p { font-family: "Portsmouth Light"; }
.pm-face-italic p { font-family: "Portsmouth Italic"; }
.pm-face-bold p { font-family: "Portsmouth Bold"; }
.pm-face-bold-italic p { font-family: "Portsmouth Bold Italic"; }
.pm-face-mono p { font-family: "Portsmouth Mono"; font-size: clamp(20px, 2.4vw, 28px); }

.pm-letters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pm-letters article {
  padding: 14px 18px 18px; background: linear-gradient(#fff, #f6f8fb);
  border: 1px solid var(--h-line); border-top: 3px solid var(--accent); border-radius: 3px;
}
.pm-letters .pm-wide { grid-column: span 2; }
.pm-letters p { margin: 6px 0 0; font: 15.5px/1.55 "Portsmouth", var(--h-serif); }
.pm-body .pm-glyph { margin: 0; color: var(--accent); font: 400 64px/1.05 "Portsmouth", sans-serif; }
.pm-body .pm-glyph--row { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.3; letter-spacing: .04em; overflow-wrap: anywhere; }

.pm-plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pm-plates figure { margin: 0; }
.pm-plate { display: block; width: 100%; padding: 0; cursor: zoom-in; background: #fff; border: 1px solid var(--h-well-edge); border-radius: 3px; box-shadow: 0 4px 12px rgba(22, 31, 52, .14); }
.pm-plate:hover { border-color: var(--h-select-line); }
.pm-plate img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.pm-plates figcaption { margin-top: 6px; color: var(--h-muted); font: 14px/1.4 var(--h-serif); }

.pm-sources, .pm-downloads { padding-left: 1.1em; }
.pm-sources li + li, .pm-downloads li + li { margin-top: .35em; }
.pm-downloads a { font-weight: 700; }

.pm-dialog { max-width: min(1200px, 94vw); max-height: 92vh; padding: 12px; border: 1px solid #36455f; border-radius: 5px; box-shadow: 0 22px 60px rgba(22, 31, 52, .45); }
.pm-dialog::backdrop { background: rgba(13, 34, 51, .72); }
.pm-dialog img { display: block; max-width: 100%; max-height: calc(92vh - 76px); margin-top: 10px; object-fit: contain; }

@media (max-width: 900px) {
  .pm-controls { grid-template-columns: 1fr 1fr; }
  .pm-letters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pm-specimen { padding: 14px; }
  .pm-controls { grid-template-columns: 1fr; }
  .pm-sample { padding: 16px; }
  .pm-faces { grid-template-columns: 1fr; }
  .pm-face { border-right: 0; }
  .pm-face:nth-last-child(-n+3) { border-bottom: 1px solid var(--h-line); }
  .pm-face:last-child { border-bottom: 0; }
  .pm-letters { grid-template-columns: 1fr; }
  .pm-letters .pm-wide { grid-column: auto; }
  .pm-plates { grid-template-columns: 1fr; }
}