/* Gage. inner pages: a scrolling phone screen with a menu list, anchored left like a
   message thread. Every size is a whole number of LCD pixels (--u).
   Alignment rule: text, headings, photos and row ICONS all start on the same left edge;
   a row's highlight spills into the gutter so its contents stay on that edge. */

.screen-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.screen-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.screen-body::-webkit-scrollbar { display: none; }
.screen-body:focus { outline: none; }
.screen {
  box-sizing: border-box; margin: 0;  /* full width: text flows across the screen */
  padding-block: calc(var(--u) * 12) calc(var(--u) * 20);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), calc(var(--u) * 8), env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: calc(var(--u) * 16);
}
@media (min-width: 760px) { .screen { padding-right: calc(var(--gutter) + var(--u) * 4); } }
/* wide screens: the photo sits on the right and the text wraps beside it, so the page fills the width */
@media (min-width: 1000px) {
  .screen { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(var(--u) * 12); row-gap: calc(var(--u) * 12); align-items: start; }
  .screen > * { grid-column: 1; }
  .screen > .page-head { grid-column: 1 / -1; }
  .screen > .photo { grid-column: 2; grid-row: 2 / span 20; }
}

/* Nokia-style scroll indicator on the right: a dotted track and a solid block */
.scrollind {
  position: absolute; top: calc(var(--u) * 6); bottom: calc(var(--u) * 6); right: max(calc(var(--u) * 3), env(safe-area-inset-right, 0px));
  width: calc(var(--u) * 4); pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--lcd-ghost) 0 var(--u), transparent var(--u) calc(var(--u) * 3)) center / var(--u) 100% no-repeat;
}
.scrollind[hidden] { display: none; }
.scrollind i { position: absolute; left: 0; width: calc(var(--u) * 4); height: calc(var(--u) * 12); background: var(--lcd-pixel); }

/* ---------- page head ---------- */
.page-head { display: flex; flex-direction: column; gap: calc(var(--u) * 5); }
.page-head h1 { margin: 0; font: 400 var(--t2)/var(--lh2) var(--font-display); }
.lede a { white-space: nowrap; color: inherit; text-decoration-thickness: var(--u); text-underline-offset: calc(var(--u) * 2); }
.lede { margin: 0; font: 400 var(--t1)/var(--lh1-body) var(--font-body); max-width: 90ch; }
.copy { margin: 0; font: 400 var(--t1)/var(--lh1-body) var(--font-body); color: var(--ink-700); max-width: 100ch; }
.copy a { color: var(--lcd-pixel); text-decoration-thickness: var(--u); text-underline-offset: calc(var(--u) * 2); }

/* photos are drawn at a whole number of LCD pixels per photo pixel */
.photo { margin: 0; }
.photo img { display: block; width: calc(var(--u) * 176 * var(--photo-k)); max-width: 100%; height: auto; aspect-ratio: 176 / 118; image-rendering: pixelated; }

/* ---------- section header, like a submenu title ---------- */
.sec { margin: 0; display: flex; align-items: center; gap: calc(var(--u) * 4); font: 400 var(--t1)/var(--lh1) var(--font-display); text-transform: uppercase; letter-spacing: 1px; }
.sec::after { content: ""; flex: 1; height: var(--u); background: repeating-linear-gradient(to right, var(--lcd-ghost) 0 var(--u), transparent var(--u) calc(var(--u) * 3)); }
.group { display: flex; flex-direction: column; gap: calc(var(--u) * 7); }

/* ---------- menu rows ---------- */
.rows { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.row {
  position: relative; display: grid; grid-template-columns: calc(var(--u) * 16) minmax(0, 1fr) auto; align-items: start; gap: calc(var(--u) * 4);
  margin-left: calc(var(--u) * -4); margin-right: calc(var(--u) * -4);
  padding: calc(var(--u) * 4) calc(var(--u) * 4);
  color: var(--lcd-pixel); text-decoration: none; cursor: pointer; list-style: none;
}
.row::-webkit-details-marker { display: none; }
.row .cur { position: absolute; left: var(--u); top: calc(var(--u) * 4); width: var(--u); height: calc(var(--u) * 16); }
.row .ico svg { display: block; width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.row-main { display: flex; flex-direction: column; min-width: 0; }
.row-title { font: 400 var(--t1)/var(--lh1) var(--font-display); }
.row-sub { font: 400 var(--t1)/var(--lh1) var(--font-body); color: var(--ink-600); overflow-wrap: break-word; }
.row .arrow { font: 400 var(--t1)/var(--lh1) var(--font-display); color: var(--lcd-dim); }
.row.is-sel { background: var(--lcd-inverse-bg); color: var(--lcd-inverse-text); }
.row.is-sel .cur { background: var(--accent); }
.row.is-sel .row-sub { color: var(--ink-300); }
.row.is-sel .arrow { color: var(--accent); }

/* expandable rows: a phone submenu that opens in place, text lined up under the row title */
details > .row .arrow::before { content: "+"; }
details[open] > .row .arrow::before { content: "-"; }
.detail { padding: calc(var(--u) * 4) 0 calc(var(--u) * 8) calc(var(--u) * 20); display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.detail p { margin: 0; font: 400 var(--t1)/var(--lh1-body) var(--font-body); max-width: 90ch; }
.spec { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.spec li { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; column-gap: calc(var(--u) * 4); align-items: start; font: 400 var(--t1)/var(--lh1) var(--font-body); max-width: 80ch; }
.spec li::before { content: ""; width: 4px; height: 4px; margin-top: 6px; background: var(--lcd-pixel); }
.spec .val { white-space: nowrap; }

/* price, the one number that matters on the websites page */
.price { display: flex; align-items: flex-end; gap: calc(var(--u) * 6); flex-wrap: wrap; }
.price b { font: 400 var(--t2)/var(--lh2) var(--font-display); }
.price span { font: 400 var(--t1)/18px var(--font-body); max-width: 40ch; padding-bottom: 2px; }  /* shares the price's baseline, on the grid */

/* ---------- contact form: an SMS compose screen ---------- */
.compose { box-sizing: border-box; max-width: calc(var(--u) * 360); border: var(--u) solid var(--lcd-pixel); padding: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 8); display: flex; flex-direction: column; gap: calc(var(--u) * 7); }
.field {
  display: grid; grid-template-columns: calc(var(--u) * 48) minmax(0, 1fr); align-items: baseline; gap: calc(var(--u) * 4);
  padding-bottom: calc(var(--u) * 2);
  background: repeating-linear-gradient(to right, var(--lcd-ghost) 0 var(--u), transparent var(--u) calc(var(--u) * 3)) bottom left / 100% var(--u) no-repeat;
}
.field:focus-within { background: linear-gradient(var(--lcd-pixel), var(--lcd-pixel)) bottom left / 100% var(--u) no-repeat; }
.field label { font: 400 var(--t1)/var(--lh1) var(--font-display); color: var(--ink-600); }
.field input, .field textarea {
  min-width: 0; border: 0; background: transparent; color: var(--lcd-pixel); padding: 0;
  font: 400 var(--t1)/var(--lh1-body) var(--font-body); caret-color: var(--accent); resize: vertical;
}
.field textarea { min-height: calc(var(--u) * 64); }
.field input::placeholder, .field textarea::placeholder { color: var(--lcd-dim); }
.field input:focus, .field textarea:focus { outline: none; }
.field-msg { grid-template-columns: 1fr; }
.send {
  justify-self: start; align-self: flex-start; display: inline-flex; align-items: center; gap: calc(var(--u) * 4); cursor: pointer;
  border: 0; padding: calc(var(--u) * 3) calc(var(--u) * 6) calc(var(--u) * 3) calc(var(--u) * 3);
  background: var(--lcd-inverse-bg); color: var(--lcd-inverse-text);
  font: 400 var(--t1)/var(--lh1) var(--font-display); text-transform: uppercase; letter-spacing: 1px;
}
.send::before { content: ""; width: calc(var(--u) * 2); height: 10px; background: var(--accent); }
.note { margin: 0; font: 400 var(--t1)/var(--lh1-body) var(--font-body); color: var(--ink-600); }
.note a { color: var(--lcd-pixel); text-decoration-thickness: var(--u); text-underline-offset: calc(var(--u) * 2); }
.status-msg { margin: 0; font: 400 var(--t1)/var(--lh1-body) var(--font-body); }

/* ---------- opening a screen: blocks draw in, top to bottom ---------- */
@media (prefers-reduced-motion: no-preference) {
  .screen > * { animation: open-row .22s steps(5) backwards; }
  .screen > *:nth-child(2) { animation-delay: .06s; }
  .screen > *:nth-child(3) { animation-delay: .12s; }
  .screen > *:nth-child(4) { animation-delay: .18s; }
  .screen > *:nth-child(5) { animation-delay: .24s; }
  .screen > *:nth-child(n+6) { animation-delay: .3s; }
}
@keyframes open-row { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

@media (max-width: 520px) {
  .field { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Messenger (Let's chat): a buddy list beside a chat window ---------- */
.msn { display: grid; gap: calc(var(--u) * 10); align-items: start; }
.msn { max-width: calc(var(--u) * 420); }
.msn .win-bar svg { display: block; width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
.me-card { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 5); padding: calc(var(--u) * 6); border-bottom: var(--u) solid var(--lcd-ghost); }
.avatar { width: calc(var(--u) * 24); height: calc(var(--u) * 24); background: var(--lcd-screen); box-shadow: inset 0 0 0 var(--u) var(--lcd-pixel); display: grid; place-items: center; }
.avatar svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); display: block; }
.me-main { display: flex; flex-direction: column; font: 400 var(--t1)/var(--lh1-body) var(--font-body); min-width: 0; }
.me-main b { font-weight: 400; font-family: var(--font-display); }
.me-main .dot { width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
.me-says { color: var(--ink-600); }
.bgroup { padding: calc(var(--u) * 3) 0; }
.bgroup summary { list-style: none; cursor: pointer; padding: calc(var(--u) * 2) calc(var(--u) * 6); display: flex; gap: calc(var(--u) * 3); align-items: center; color: var(--ink-700); }
.bgroup summary::-webkit-details-marker { display: none; }
.bgroup summary::before { content: ""; border: calc(var(--u) * 3) solid transparent; border-left-color: currentColor; border-right-width: 0; }
.bgroup[open] summary::before { border: calc(var(--u) * 3) solid transparent; border-top-color: currentColor; border-bottom-width: 0; }
.bgroup summary span { color: var(--lcd-dim); }
.bgroup ul { list-style: none; margin: 0; padding: 0; }
.buddy { box-sizing: border-box; width: 100%; display: grid; grid-template-columns: calc(var(--u) * 8) auto 1fr; align-items: center; column-gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 2) calc(var(--u) * 6) calc(var(--u) * 2) calc(var(--u) * 10); border: 0; background: none; color: var(--lcd-pixel); text-decoration: none; text-align: left; cursor: pointer;
  font: 400 var(--t1)/var(--lh1-body) var(--font-body); }
.buddy .dot { width: calc(var(--u) * 4); height: calc(var(--u) * 4); }
.b-ico svg { display: block; width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
.b-name { font-family: var(--font-display); white-space: nowrap; }
.b-says { color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.b-says::before { content: "- "; }
.buddy:hover, .buddy:focus-visible, .buddy.is-on { background: var(--lcd-inverse-bg); color: var(--lcd-inverse-text); outline: none; }
.buddy:hover .b-says, .buddy:focus-visible .b-says, .buddy.is-on .b-says { color: var(--ink-300); }

.convo { min-height: calc(var(--u) * 200); }
@media (max-width: 899px) { .convo { order: -1; min-height: 0; } }   /* phones: the chat first, the list below */
.cv-state { color: var(--ink-300); }
.log { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 6); padding: calc(var(--u) * 6); max-height: max(calc(var(--u) * 110), min(calc(100vh - var(--u) * 260), calc(var(--u) * 260))); min-height: calc(var(--u) * 110); overflow-y: auto; }
.msg { display: flex; flex-direction: column; gap: var(--u); font: 400 var(--t1)/var(--lh1-body) var(--font-body); max-width: 70ch; }
.msg .who { font-family: var(--font-display); color: var(--ink-600); }
.msg.me .who { color: var(--accent); }
.msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.sys { color: var(--ink-600); }
.msg.sys p::before { content: "* "; }
.msg.err p { color: var(--ink-700); }
.typing { margin: 0; padding: 0 calc(var(--u) * 6) calc(var(--u) * 3); font: 400 var(--t1)/var(--lh1) var(--font-body); color: var(--ink-600); }
.quick { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 4); padding: 0 calc(var(--u) * 6) calc(var(--u) * 5); }
.quick[hidden], .typing[hidden] { display: none; }
.im-compose { border-top: var(--u) solid var(--lcd-pixel); display: flex; flex-direction: column; }
.im-compose textarea { box-sizing: border-box; width: 100%; resize: none; border: 0; background: var(--ink-50); color: var(--lcd-pixel); padding: calc(var(--u) * 4) calc(var(--u) * 6);
  font: 400 var(--t1)/var(--lh1-body) var(--font-body); min-height: calc(var(--u) * 26); }
.im-compose textarea:focus { outline: none; box-shadow: inset 0 calc(var(--u) * -1) 0 var(--accent); }
.im-compose textarea::placeholder { color: var(--lcd-dim); }
.im-tools { display: flex; justify-content: flex-end; gap: calc(var(--u) * 4); padding: calc(var(--u) * 4) calc(var(--u) * 6); background: var(--ink-200); }
.im-meta { margin: 0; padding: 0 calc(var(--u) * 6) calc(var(--u) * 4); background: var(--ink-200); font: 400 var(--t1)/var(--lh1) var(--font-body); color: var(--ink-600); }
.im-meta:empty { display: none; }

/* ---------- windows: every section, photo and closing chat link, like the Messenger page ---------- */
.group.win { gap: 0; }
.sec.win-bar { font: 400 var(--t1)/var(--lh1) var(--font-display); }
.sec.win-bar::after { display: none; }
.win-body { display: flex; flex-direction: column; gap: calc(var(--u) * 7); padding: calc(var(--u) * 8); }
.win-body .rows { margin-inline: calc(var(--u) * -4); }   /* row highlights run to the window edge */
.win-body .row { margin-inline: 0; padding-inline: calc(var(--u) * 4); }
.photo.win { width: fit-content; max-width: 100%; box-sizing: border-box; }
.photo.win img { width: calc(var(--u) * 176 * var(--photo-k)); max-width: 100%; }
.win.cta .win-body { padding-block: calc(var(--u) * 4); }

/* ---------- the fax: a yellowed 90s cover sheet. VT323 is a pixel typewriter face (OFL). ---------- */
@font-face { font-family: "VT323"; src: url("../fonts/vt323.woff2") format("woff2"); font-display: swap; }
.fax { --toner: #1f2124; --paper: #ebe2c3; }
.fax-paper {
  position: relative; box-sizing: border-box; padding: calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 12);
  color: var(--toner); font: 400 24px/28px "VT323", var(--font-body);
  background:
    repeating-linear-gradient(to bottom, transparent 0 37px, rgba(60, 50, 20, .05) 37px 38px),          /* faint transfer streaks */
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(150, 120, 50, .22) 100%),                /* yellowed edges */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--paper);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), calc(var(--u) * 3) calc(var(--u) * 4) 0 color-mix(in srgb, var(--ink-900) 22%, transparent);
}
.fax-paper * { text-shadow: 0 0 .6px rgba(0, 0, 0, .55); }   /* toner bleed */
.fax-header { margin: 0 0 calc(var(--u) * 8); font-size: 18px; line-height: 20px; letter-spacing: 1px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.fax-top { display: flex; align-items: center; gap: calc(var(--u) * 8); flex-wrap: wrap; padding-bottom: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 8); border-bottom: calc(var(--u) * 2) solid var(--toner); }

.fax-form { display: flex; flex-direction: column; gap: calc(var(--u) * 5); }
.fax-row { display: grid; grid-template-columns: calc(var(--u) * 56) minmax(0, 1fr); align-items: end; column-gap: calc(var(--u) * 4); }
.fax-label { text-transform: uppercase; letter-spacing: 1px; padding: 0; }
.fax-fixed { padding: 0 calc(var(--u) * 2) 2px; border-bottom: 2px solid var(--toner); }
.fax-line, .fax-lines {
  width: 100%; box-sizing: border-box; border: 0; border-radius: 0; background: transparent; color: var(--toner); caret-color: var(--accent);
  font: inherit; padding: 0 calc(var(--u) * 2) 2px; text-shadow: 0 0 .6px rgba(0, 0, 0, .6);
}
.fax-line { border-bottom: 2px solid var(--toner); }
.fax-lines { resize: vertical; min-height: calc(28px * 6); line-height: 28px;   /* typed onto ruled lines */
  background: repeating-linear-gradient(to bottom, transparent 0 26px, var(--toner) 26px 28px); background-attachment: local; }
.fax-line::placeholder, .fax-lines::placeholder { color: rgba(31, 33, 36, .35); }
.fax-line:focus, .fax-lines:focus { outline: none; background-color: rgba(255, 70, 31, .07); }
.fax-re { border: 0; margin: calc(var(--u) * 2) 0 0; padding: 0; min-width: 0; }
.fax-opts { overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 3) calc(var(--u) * 10); }
.fax-re legend { float: left; width: calc(var(--u) * 56); margin-right: calc(var(--u) * 4); }
.fax-re label { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); cursor: pointer; }
.fax-re input { appearance: none; -webkit-appearance: none; margin: 0; width: 20px; height: 20px; border: 2px solid var(--toner); display: grid; place-items: center; cursor: pointer; flex: none; }
.fax-re input::after { content: "X"; font: 400 24px/1 "VT323", monospace; transform: translateY(-1px); opacity: 0; }
.fax-re input:checked::after { opacity: 1; }
.fax-re input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fax-msg { display: flex; flex-direction: column; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 2); }
.fax-fine { margin: calc(var(--u) * 2) 0 0; font-size: 18px; line-height: 20px; opacity: .8; }
.fax-fine a { color: inherit; }
.fax-send {
  align-self: flex-start; display: inline-flex; align-items: center; gap: calc(var(--u) * 5); cursor: pointer;
  padding: calc(var(--u) * 4) calc(var(--u) * 10); border: 2px solid var(--ink-900); border-radius: 10px;
  background: linear-gradient(var(--ink-100), var(--ink-300)); color: var(--ink-900); box-shadow: 0 4px 0 var(--ink-600);
  font: 400 26px/24px "VT323", var(--font-display); text-transform: uppercase; letter-spacing: 2px; text-shadow: none;
}
.fax-send:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink-600); }
.fax-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fax-led { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-500); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); }
.fax.is-sending .fax-led { background: var(--accent); animation: led .4s steps(2) infinite; }
@keyframes led { 50% { background: var(--ink-500); } }
.fax-send:disabled { cursor: progress; }
/* sending: a scan line reads the page top to bottom */
.fax.is-sending .fax-paper::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px; top: 0; pointer-events: none;
  background: linear-gradient(transparent, rgba(255, 70, 31, .55), transparent); box-shadow: 0 0 12px rgba(255, 70, 31, .4);
  animation: scan 4.1s steps(64) forwards;
}
@keyframes scan { to { top: 100%; } }
.fax.is-sent .fax-form { opacity: .55; }
.fax-report { margin-top: calc(var(--u) * 10); padding-top: calc(var(--u) * 8); border-top: 2px dashed var(--toner); display: flex; flex-direction: column; gap: 2px; max-width: 520px; }
.fax-report[hidden] { display: none; }
.fax-report p { margin: 0; display: grid; grid-template-columns: 120px 1fr; text-transform: uppercase; }
.fax-report .fax-report-title { display: block; font-size: 32px; line-height: 36px; margin-bottom: calc(var(--u) * 3); }
.fax-report .fax-note { display: block; margin-top: calc(var(--u) * 3); }
.fax-report .btn { align-self: flex-start; margin-top: calc(var(--u) * 6); text-shadow: none; }
@media (max-width: 600px) {
  .fax-paper { padding: calc(var(--u) * 6) calc(var(--u) * 8) calc(var(--u) * 8); }
  .fax-row { grid-template-columns: 1fr; }
  .fax-re legend { float: none; width: auto; }
  .fax-band { font-size: 56px; line-height: 52px; letter-spacing: 4px; }
  .fax-title { font-size: 32px; line-height: 32px; }
}


/* docked along the bottom of the screen: only the top shows until it's opened */
.fax { position: fixed; z-index: 5; left: 0; right: 0; bottom: var(--keys-h, 36px);
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
  transform: translateY(calc(100% - var(--peek, 150px))); transition: transform .35s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.fax-paper { pointer-events: auto; max-height: calc(100vh - var(--bars-h, 80px) - var(--u) * 12); max-height: calc(100dvh - var(--bars-h, 80px) - var(--u) * 12);
  overflow-y: auto; overscroll-behavior: contain; cursor: pointer;
  box-shadow: 0 calc(var(--u) * -2) 0 color-mix(in srgb, var(--ink-900) 12%, transparent), 0 calc(var(--u) * -6) calc(var(--u) * 10) color-mix(in srgb, var(--ink-900) 18%, transparent); }
.fax:not(.is-open):hover, .fax:not(.is-open):focus-within { transform: translateY(calc(100% - var(--peek, 150px) - var(--u) * 8)); }
.fax.is-open { transform: translateY(0); }
.fax.is-open .fax-paper { cursor: auto; }
.fax-dim { position: fixed; inset: 0; z-index: 4; background: color-mix(in srgb, var(--ink-950, #0b1017) 40%, transparent); opacity: 0; pointer-events: none; transition: opacity .3s; }
.fax-dim.on { opacity: 1; pointer-events: auto; }
.fax-form, .fax-report { max-width: 980px; }
.fax-band { padding: 0 calc(var(--u) * 6); background: var(--toner); color: var(--paper); font: 400 80px/72px "VT323", var(--font-display); letter-spacing: 8px; text-transform: uppercase; text-shadow: none; }
.fax-head { display: flex; flex-direction: column; gap: calc(var(--u) * 2); min-width: 0; }
.fax-title { margin: 0; font: 400 44px/44px "VT323", var(--font-display); letter-spacing: 3px; text-transform: uppercase; }
.fax-sub { margin: 0; font-size: 22px; line-height: 26px; }
.fax-toggle { margin-left: calc(var(--u) * 2); border: 0; padding: 0; background: none; color: var(--toner); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fax-toggle::after { content: " \25B2"; font-size: .8em; }
.fax.is-open .fax-toggle::after { content: " \25BC"; }
.fax-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fax-toggle .t-close, .fax.is-open .fax-toggle .t-open { display: none; }
.fax.is-open .fax-toggle .t-close { display: inline; }
@media (prefers-reduced-motion: reduce) { .fax, .fax-dim { transition: none; } }
@media (max-width: 600px) {
  .fax-band { font-size: 56px; line-height: 52px; letter-spacing: 4px; }
  .fax-title { font-size: 32px; line-height: 32px; }
  .fax-sub { font-size: 20px; line-height: 22px; }
  .fax-top { gap: calc(var(--u) * 5); }
}
@media (max-width: 600px) {   /* a slimmer top strip on phones so the chat keeps the screen */
  .fax-paper { padding: calc(var(--u) * 4) calc(var(--u) * 7) calc(var(--u) * 8); }
  .fax-header { font-size: 14px; line-height: 16px; margin-bottom: calc(var(--u) * 4); }
  .fax-top { flex-wrap: nowrap; align-items: center; gap: calc(var(--u) * 5); padding-bottom: calc(var(--u) * 4); margin-bottom: calc(var(--u) * 6); }
  .fax-band { font-size: 44px; line-height: 40px; letter-spacing: 3px; padding: 0 calc(var(--u) * 4); }
  .fax-title { font-size: 26px; line-height: 26px; letter-spacing: 2px; }
  .fax-sub { font-size: 18px; line-height: 20px; }
}