/* styles.css — look & feel. Colours, fonts and widths are the tokens at the top;
   change those and the whole site follows. */

/* ---------- TOKENS ---------- */
:root {
  --bg: #f1f4f8;          /* drafting-paper grey-blue */
  --surface: #fbfcfe;
  --ink: #0d1f35;         /* navy ink, carried over from the résumé */
  --ink-2: #465972;
  --line: #cad3de;
  --grid: #dde5ee;
  --accent: #b93b06;      /* aerospace orange — used sparingly */
  --on-accent: #ffffff;
  --focus: #1e5fd8;

  --f-display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --f-serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;   /* the typed lines */

  --size-tagline: clamp(1.5rem, 3.2vw, 2.25rem);   /* shared by the tagline and the typed lines, so they always match */

  --max: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09131f; --surface: #0f1d31; --ink: #e8eef6; --ink-2: #9db0c6;
    --line: #23374f; --grid: #12233a; --accent: #ff7f42; --on-accent: #0a1420; --focus: #7aa7ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #09131f; --surface: #0f1d31; --ink: #e8eef6; --ink-2: #9db0c6;
  --line: #23374f; --grid: #12233a; --accent: #ff7f42; --on-accent: #0a1420; --focus: #7aa7ff;
  color-scheme: dark;
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bg); padding: .6rem 1rem; z-index: 20; }
.skip:focus { left: 8px; top: 8px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- TOP BAR ---------- */
.bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
@supports (background: color-mix(in srgb, red, blue)) {
  .bar { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.bar-in { display: flex; align-items: center; gap: 1.5rem; min-height: 56px; }
.brand {
  margin-right: auto; text-decoration: none;
  font: 800 1.15rem var(--f-display); letter-spacing: .14em; text-transform: uppercase;
}
#nav { display: flex; gap: 1.5rem; }
#nav a {
  padding-block: .4rem; border-bottom: 2px solid transparent; text-decoration: none; color: var(--ink-2);
  font: 500 .76rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  transition: color .15s, border-color .15s;
}
#nav a:hover { color: var(--ink); border-color: var(--accent); }
.icon-btn {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--line);
  transition: border-color .15s, color .15s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn svg { width: 18px; height: 18px; }
@media (max-width: 640px) { #nav a:not(:last-child) { display: none; } }

/* ---------- HERO ---------- */
.hero { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
}
/* Desktop: name and text on the left, the headshot on the right spanning both rows.
   If the numbers box is switched on (stats in content.js) the headshot sits above it instead,
   exactly as wide as the box.
   Phone: name and headshot share the top row, with the headshot still pinned to the right edge. */
.hero-in {
  position: relative; display: grid; align-items: end; gap: 1.25rem clamp(28px, 5vw, 72px);
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-areas: "name photo" "text photo";
  padding-block: clamp(40px, 7vw, 88px) clamp(36px, 5vw, 64px);
}
.hero-in.has-spec { grid-template-areas: "name photo" "text spec"; }
.hero-name { grid-area: name; }
.hero-text { grid-area: text; }
.hero-in > .spec { grid-area: spec; }
@media (max-width: 860px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name photo" "text text"; }
  .hero-in.has-spec { grid-template-areas: "name photo" "text text" "spec spec"; }
  .hero-in > .spec { margin-top: .75rem; }
}
.eyebrow { font: 500 .74rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.hero h1 { display: flex; flex-direction: column; }
.avatar {
  grid-area: photo; align-self: center; width: 100%; aspect-ratio: 1; overflow: hidden;
  border-radius: 50%; border: 2px solid var(--ink); background: var(--surface);
}
.hero-in.has-spec .avatar { align-self: start; }
@media (max-width: 860px) {
  /* as large as fits beside the name, still at the right edge */
  .avatar, .hero-in.has-spec .avatar { justify-self: end; align-self: center; width: clamp(96px, 38vw, 240px); }
  .hero-name { align-self: center; }
}
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nm {
  font: 800 clamp(4.2rem, 14vw, 9.5rem)/.86 var(--f-display); text-transform: uppercase; letter-spacing: -.005em;
}
.tagline { font: 700 var(--size-tagline)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; max-width: 22ch; text-wrap: balance; }
.intro { margin-top: 1.25rem; max-width: 58ch; color: var(--ink-2); font-size: 1.05rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.btn {
  display: inline-flex; align-items: center; padding: .72rem 1.1rem; text-decoration: none; cursor: pointer;
  font: 600 .78rem var(--f-mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); background: transparent; border: 1px solid var(--ink);
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary { background: var(--ink); color: var(--bg); }

/* the numbers box, styled like a drawing's data table */
.spec { background: var(--surface); border: 1px solid var(--ink); }
.spec-head {
  display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; border-bottom: 1px solid var(--ink);
  font: 500 .7rem var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2);
}
.spec .row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .8rem .9rem; border-bottom: 1px solid var(--line); }
.spec .row:last-child { border-bottom: 0; }
.spec dt { font: 500 .72rem/1.35 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.spec dd { display: flex; align-items: baseline; gap: .4rem; white-space: nowrap; }
.spec .v { font: 800 clamp(2rem, 4.4vw, 2.9rem)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.spec .u { font: 500 .72rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

/* ---------- TYPING LINE ---------- */
.typer { padding-block: clamp(36px, 5.5vw, 64px); border-bottom: 1px solid var(--line); text-align: center; }
.typer-line {
  min-height: 1.25em; color: var(--ink);
  font: 600 var(--size-tagline)/1.25 var(--f-serif);   /* the same size as the tagline above */
}
/* each phrase is centered as a whole: the invisible "sizer" holds its full width, so the letters
   can appear left to right without the whole line wobbling from side to side */
.typer-slot { position: relative; display: inline-block; max-width: 100%; white-space: nowrap; }
.typer-sizer { visibility: hidden; }
.typer-live { position: absolute; left: 0; top: 0; }
/* the insertion point: blinks when idle, stays solid while letters are moving */
.typer-caret {
  display: inline-block; width: .055em; min-width: 3px; height: .9em; margin-left: .07em; vertical-align: -.06em;
  background: var(--accent); animation: typer-blink 1.05s steps(1) infinite;
}
.typer.typing .typer-caret { animation: none; }
@keyframes typer-blink { 50% { opacity: 0; } }
.typer-static { display: block; }
.typer-static + .typer-static { margin-top: .2em; }
@media (prefers-reduced-motion: reduce) { .typer-caret { animation: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- SECTIONS ---------- */
.sec { padding-block: clamp(48px, 7vw, 88px); scroll-margin-top: 56px; }
.sec.alt { background: var(--surface); border-block: 1px solid var(--line); }
.sec-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem;
  padding-bottom: .55rem; margin-bottom: clamp(24px, 4vw, 40px); border-bottom: 2px solid var(--ink);
}
.sec-head h2 { font: 800 clamp(2rem, 4.6vw, 3rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.sec-head p { margin-left: auto; font: 500 .74rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

.kicker { font: 500 .72rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.lede { font-size: 1.12rem; max-width: 62ch; }
.dates { font: 500 .78rem var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }

/* list with short drafting-line markers */
.dash li { position: relative; padding-left: 1.5rem; }
.dash li + li { margin-top: .5rem; }
.dash li::before { content: ""; position: absolute; left: 0; top: .82em; width: .9rem; height: 1px; background: var(--accent); }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag { padding: .18rem .55rem; border: 1px solid var(--line); font: 500 .72rem var(--f-mono); color: var(--ink-2); }

/* ---------- WORK ---------- */
.feature {
  display: grid; gap: clamp(20px, 4vw, 48px); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  padding: clamp(20px, 3.5vw, 40px); margin-bottom: clamp(14px, 2vw, 20px);
  background: var(--surface); border: 1px solid var(--ink);
}
.feature.has-side-media { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 800px) { .feature, .feature.has-side-media { grid-template-columns: minmax(0, 1fr); } }
.feature-media { grid-column: 1 / -1; }
.feature-main { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.feature-main > .facts { align-self: stretch; margin-top: auto; }
.feature h3 { font: 800 clamp(2.8rem, 7vw, 5rem)/.9 var(--f-display); text-transform: uppercase; }
.feature-side { display: flex; flex-direction: column; gap: 1.25rem; }
.facts { border-top: 1px solid var(--ink); }
.facts > div { display: grid; gap: .1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 500 .7rem var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.facts dd { font: 700 1.3rem/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
/* a fact that opens something (the PDF reader, or a link): underlined, with a small tag saying what it does */
.fact-link {
  padding: 0; margin: 0; cursor: pointer; text-align: left; color: inherit; background: none; border: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .2em;
  transition: color .15s;
}
.fact-link::after {
  content: "Preview"; display: inline-block; margin-left: .7em; padding: .12em .5em; vertical-align: .22em;
  font: 500 .62rem/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--accent); border: 1px solid var(--accent);
}
a.fact-link::after { content: "Open"; }
.fact-link:hover { color: var(--accent); }

.grid { display: grid; gap: clamp(12px, 2vw, 20px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid + .feature, .feature + .feature { margin-top: clamp(14px, 2vw, 20px); }
.card { display: flex; flex-direction: column; gap: .7rem; padding: clamp(18px, 2.4vw, 26px); background: var(--surface); border: 1px solid var(--line); }
.card h3 { font: 700 clamp(1.6rem, 2.6vw, 2rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.card .tags { margin-top: auto; padding-top: .6rem; }
.media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--line); }

/* ---------- VIDEO + PHOTO CAROUSEL (featured project) ---------- */
.vid { display: grid; gap: .5rem; margin: 0; max-width: 100%; align-self: flex-end; }
.vid video { display: block; max-width: 100%; background: #000; border: 1px solid var(--line); }
.vid.portrait video { height: min(70vh, 620px); width: auto; }
.vid.landscape video { width: 100%; height: auto; }
.vid figcaption, .g-item figcaption {
  font: 500 .72rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
@media (max-width: 800px) { .vid { align-self: center; } }

.g-bar {
  display: flex; align-items: center; gap: 1rem; padding-bottom: .6rem; margin-bottom: 1rem; border-bottom: 1px solid var(--ink);
  font: 500 .72rem var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2);
}
.g-count { font-variant-numeric: tabular-nums; color: var(--ink); }
.g-nav { display: flex; gap: .4rem; margin-left: auto; }
.g-btn {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; cursor: pointer;
  font: 500 1.05rem var(--f-mono); color: var(--ink); background: transparent; border: 1px solid var(--line);
  transition: border-color .15s, color .15s;
}
.g-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.g-btn:disabled { opacity: .35; cursor: default; }
/* one scrolling strip: swipe, scroll, arrow keys and the buttons all move the same thing */
.g-track {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; container-type: inline-size;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.g-item { flex: none; margin: 0; scroll-snap-align: start; }
.g-item img {
  display: block; width: auto; aspect-ratio: auto 4 / 3; object-fit: cover; border: 1px solid var(--line); background: var(--grid);
  height: clamp(200px, 36vw, 420px); max-width: calc(100vw - 2 * var(--gutter) - 42px);
  /* newer browsers: size to the strip itself, so a wide photo always fits whole on a phone */
  height: min(clamp(200px, 36vw, 420px), 66cqw); max-width: 100cqw;
}
.g-item figcaption { margin-top: .5rem; }
@media (prefers-reduced-motion: reduce) { .g-track { scroll-behavior: auto; } }

/* ---------- ABOUT ---------- */
.about { max-width: 860px; }
.prose { display: grid; gap: 1.1rem; font-size: 1.12rem; max-width: 64ch; }

/* ---------- EXPERIENCE ---------- */
.job {
  display: grid; gap: .6rem clamp(20px, 4vw, 56px); grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  padding-block: 1.75rem; border-top: 1px solid var(--line);
}
.job:first-child { border-top: 0; padding-top: 0; }
.job-meta { display: grid; align-content: start; gap: .15rem; }
.job-meta .place { color: var(--ink-2); font-size: .92rem; }
.job h3 { font: 600 1.28rem/1.3 var(--f-body); margin-bottom: .8rem; }
.job .org { font-weight: 400; color: var(--ink-2); }
@media (max-width: 700px) { .job { grid-template-columns: minmax(0, 1fr); } }

/* ---------- SKILLS + EDUCATION ---------- */
.split { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.skillrow { display: grid; gap: .5rem 1.2rem; grid-template-columns: 120px minmax(0, 1fr); padding-block: .9rem; border-top: 1px solid var(--line); }
.skillrow:first-child { border-top: 0; padding-top: 0; }
.skillrow dt { padding-top: .3rem; font: 500 .72rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { padding: .25rem .6rem; border: 1px solid var(--line); background: var(--bg); font: 500 .82rem var(--f-mono); }
@media (max-width: 520px) { .skillrow { grid-template-columns: minmax(0, 1fr); } }
.edu { display: grid; gap: 1.5rem; }
.edu article { display: grid; gap: .2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.edu article:last-child { border-bottom: 0; padding-bottom: 0; }
.edu h3 { font: 700 1.55rem/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.edu .dates { color: var(--accent); margin-top: .3rem; }
.edu .note { font-weight: 600; }

/* ---------- CONTACT ---------- */
.contact { display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 800px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.contact-list { border-top: 1px solid var(--ink); }
.contact-list a {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: color .15s;
}
.contact-list a:hover { color: var(--accent); }
.contact-list .lbl { font: 500 .72rem var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.contact-list .val { font: 700 clamp(1.15rem, 2.6vw, 1.55rem)/1.1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }

/* ---------- FOOTER / TITLE BLOCK ---------- */
.foot { padding-block: 0 clamp(28px, 4vw, 44px); }
.tb { display: grid; grid-template-columns: 2.2fr 1.2fr .8fr .8fr .9fr; border: 1px solid var(--ink); background: var(--surface); }
.cell { display: grid; gap: .1rem; padding: .55rem .85rem; border-left: 1px solid var(--ink); min-width: 0; }
.cell:first-child { border-left: 0; }
.cl { font: 500 .62rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.cv { font: 600 .9rem var(--f-mono); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .tb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell.wide { grid-column: 1 / -1; }
  .cell { border-top: 1px solid var(--ink); }
  .cell:nth-child(-n+1) { border-top: 0; }
  .cell:nth-child(2n) { border-left: 0; }
  .cell.wide + .cell { border-left: 0; }
}
.legal { margin-top: 1rem; font: 400 .78rem var(--f-mono); color: var(--ink-2); }

/* ---------- ERROR BANNER ---------- */
.err { margin-block: 3rem; padding: 1.25rem 1.5rem; border: 2px solid var(--accent); background: var(--surface); display: grid; gap: .6rem; }
.err code { font: 500 .85rem var(--f-mono); color: var(--accent); overflow-wrap: anywhere; }
.noscript { max-width: 60ch; margin: 3rem auto; padding-inline: var(--gutter); }

/* ---------- CONTACT POP-UP ---------- */
.dlg {
  width: min(520px, calc(100% - 2 * var(--gutter))); max-width: none; margin: auto; padding: 0;
  color: var(--ink); background: var(--surface); border: 1px solid var(--ink);
}
.dlg::backdrop { background: rgba(5, 12, 22, .66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dlg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .9rem;
  border-bottom: 1px solid var(--ink); font: 500 .7rem var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2);
}
.dlg-close {
  padding: .25rem .65rem; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--ink); background: transparent; border: 1px solid var(--line); transition: border-color .15s, color .15s;
}
.dlg-close:hover { border-color: var(--accent); color: var(--accent); }
.dlg-body { display: grid; justify-items: start; gap: 1.1rem; padding: clamp(18px, 4vw, 28px); }
.dlg-body h2 { font: 800 clamp(2.2rem, 7vw, 3rem)/1 var(--f-display); text-transform: uppercase; }
.dlg-body .contact-list { width: 100%; }
html.dlg-open { overflow: hidden; }

/* ---------- PDF READER (the preview window) ---------- */
.pdf-dlg { width: min(1040px, calc(100% - 2 * var(--gutter))); height: 92vh; height: min(92dvh, 1100px); max-height: none; }
.pdf-dlg[open] { display: flex; flex-direction: column; }
.pdf-head { flex-wrap: wrap; row-gap: .5rem; }
.pdf-title { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.pdf-controls { display: flex; align-items: center; gap: .5rem; }
/* desktop, one row: title | page controls | Open | Close.   phone, two rows: title + Close, then controls + Open */
.pdf-head > .pdf-title { order: 1; }
.pdf-head > .pdf-controls { order: 2; }
.pdf-head > .pdf-open { order: 3; }
.pdf-head > .dlg-close { order: 4; }
@media (max-width: 640px) {
  .pdf-head > .dlg-close { order: 2; }
  .pdf-head > .pdf-controls { order: 3; }
  .pdf-head > .pdf-open { order: 4; }
}
.pdf-page-box { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.pdf-input {
  width: 4.4em; height: 38px; padding: 0 .3em; text-align: center; -moz-appearance: textfield; appearance: textfield;
  font: 500 .9rem var(--f-mono); color: var(--ink); background: var(--surface); border: 1px solid var(--line);
}
.pdf-input::-webkit-outer-spin-button, .pdf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdf-total { font-variant-numeric: tabular-nums; }
.pdf-open {
  color: var(--ink); text-decoration: none; white-space: nowrap; padding-bottom: .1rem;
  border-bottom: 1px solid var(--accent); transition: color .15s;
}
.pdf-open:hover { color: var(--accent); }
.pdf-scroll {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 14px 12px 28px; background: var(--bg);
}
.pdf-page {
  width: min(100%, 900px); margin: 0 auto 14px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 10px rgba(0, 0, 0, .28);
}
.pdf-page canvas { display: block; width: 100%; height: 100%; }
.pdf-status { padding: 3rem 1rem; text-align: center; font: 500 .8rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.pdf-status a { color: var(--accent); }
@media (max-width: 640px) {
  .pdf-dlg { width: 100%; max-width: none; height: 100vh; height: 100dvh; margin: 0; border: 0; }
  .pdf-scroll { padding-inline: 6px; }
}