/* Pinnace. Palette Depot Amber, archetype the ledger with a margin rail.

   Every page is ruled like a ledger: a wide reading column, and to its right a narrow margin column
   that carries short stamped notes opposite the section they belong to. On a narrow screen the notes
   fall inline under their heading rather than disappearing.

   A margin rail is free in this workspace on purpose: rowanlogbook and thelanternatlas both state in
   their own specs that they have no rail and no marginalia.

   Two faces, both from this domain. Gantari labels, Arvo is read. Nothing is fetched from anybody
   else's machine and no measurement code exists on any page. */

@font-face {
  font-family: "Gantari";
  src: url("/assets/nb-face-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gantari";
  src: url("/assets/nb-face-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arvo";
  src: url("/assets/nb-text-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arvo";
  src: url("/assets/nb-text-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --nb-board: #cdc7bb;
  --nb-shade: #bcb5a7;
  --nb-sheet: #f2efe8;
  --nb-ink: #191b1a;
  --nb-night: #0d1113;
  --nb-quiet: #494e4d;
  --nb-amber: #b5771c;
  --nb-petrol: #1f4650;
  --nb-ox: #8a2f2a;
  --nb-rule: #a8a196;
  --nb-sage: #4a6b53;

  --nb-face: "Gantari", "Helvetica Neue", Arial, sans-serif;
  --nb-text: "Arvo", Georgia, "Times New Roman", serif;

  --nb-lead: 1.49;
  --nb-read: 40rem;
  --nb-rail: 15rem;
  --nb-gap: 2.4rem;
  --nb-wide: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--nb-board); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nb-board);
  color: var(--nb-ink);
  font: 400 1rem/var(--nb-lead) var(--nb-text);
  text-underline-offset: 0.15em;
}

h1, h2, h3 {
  font-family: var(--nb-face);
  font-weight: 700;
  line-height: 1.13;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--nb-petrol); }
a:hover { color: var(--nb-ox); }

:focus-visible { outline: 3px solid var(--nb-ox); outline-offset: 2px; }

img { max-width: 100%; height: auto; display: block; }

code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--nb-shade);
  padding: 0.05em 0.3em;
}

blockquote {
  margin: 0 0 1em;
  padding-left: 1rem;
  border-left: 3px solid var(--nb-rule);
  color: var(--nb-quiet);
}

/* ------------------------------------------------------------------ skip */

.nb-skip {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--nb-night); color: var(--nb-sheet);
  padding: 0.7rem 1.1rem; font-family: var(--nb-face);
}
.nb-skip:focus { left: 0.5rem; top: 0.5rem; }

/* ------------------------------------------------------------------ masthead */

.nb-top { background: var(--nb-night); color: var(--nb-sheet); }

.nb-top-in {
  max-width: var(--nb-wide); margin: 0 auto;
  padding: 1.3rem 1.25rem 1rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.4rem;
}

.nb-name {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--nb-face); font-weight: 700; font-size: 1.6rem;
  letter-spacing: 0.01em; color: var(--nb-sheet); text-decoration: none;
}
a.nb-name:hover { color: var(--nb-amber); }

.nb-mark { width: 30px; height: 20px; flex: none; fill: var(--nb-amber); }

.nb-strap {
  margin: 0; font-family: var(--nb-face); font-size: 0.85rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--nb-board);
}

.nb-line {
  margin: 0 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--nb-face); font-size: 0.85rem;
}
.nb-line a {
  color: var(--nb-amber); font-size: 1.14rem; font-weight: 700; text-decoration: none;
  letter-spacing: 0.01em;
}
.nb-line a:hover { text-decoration: underline; }
.nb-line span { color: var(--nb-board); letter-spacing: 0.05em; }

.nb-nav { background: var(--nb-ink); border-top: 1px solid var(--nb-quiet); }
.nb-nav ul {
  max-width: var(--nb-wide); margin: 0 auto; padding: 0 1.25rem;
  list-style: none; display: flex; flex-wrap: wrap;
}
.nb-nav a {
  display: block; padding: 0.6rem 0.85rem;
  font-family: var(--nb-face); font-size: 0.94rem; letter-spacing: 0.04em;
  color: var(--nb-sheet); text-decoration: none; border-bottom: 3px solid transparent;
}
.nb-nav a:hover { color: var(--nb-amber); }
.nb-nav a[aria-current="page"] { color: var(--nb-amber); border-bottom-color: var(--nb-amber); }

/* ------------------------------------------------------------------ the ledger */

.nb-page { max-width: var(--nb-wide); margin: 0 auto; padding: 2.3rem 1.25rem 3rem; }

.nb-head {
  border-bottom: 3px solid var(--nb-ink);
  padding-bottom: 1.2rem; margin-bottom: 1.9rem;
}
.nb-brow {
  margin: 0 0 0.45rem; font-family: var(--nb-face); font-size: 0.82rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--nb-ox);
}
.nb-head h1 { font-size: clamp(1.95rem, 5vw, 2.9rem); max-width: 22ch; }
.nb-stand {
  margin: 0.9rem 0 0; font-size: 1.09rem; color: var(--nb-quiet); max-width: 58ch;
}

/* a section is a ruled row: reading column, then the margin column */
.nb-sec {
  display: grid;
  gap: 0.6rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--nb-rule);
}
.nb-sec:last-of-type { border-bottom: 0; }
.nb-sec h2 {
  font-size: 1.36rem;
  grid-column: 1;
}
.nb-sec h3 {
  font-size: 1.06rem; margin: 1.2rem 0 0.4rem; color: var(--nb-petrol);
  font-family: var(--nb-face);
}
.nb-sec > p, .nb-sec > ul, .nb-sec > ol, .nb-sec > blockquote { grid-column: 1; max-width: 58ch; }
.nb-sec > ul, .nb-sec > ol { margin: 0 0 1em; padding-left: 1.25rem; }
.nb-sec li { margin-bottom: 0.35em; }

.nb-rail {
  grid-column: 1;
  font-family: var(--nb-face);
  font-size: 0.87rem;
  line-height: 1.42;
  color: var(--nb-quiet);
  border-left: 3px solid var(--nb-amber);
  padding: 0.15rem 0 0.15rem 0.8rem;
  margin: 0.2rem 0 1em;
}

@media (min-width: 62rem) {
  .nb-sec { grid-template-columns: minmax(0, 1fr) var(--nb-rail); column-gap: var(--nb-gap); }

  /* Everything sits in the reading column unless it says otherwise. Stating it once here, rather
     than listing the elements that belong in column 1, is what keeps a block with no rule of its
     own from being auto-placed into the margin and squeezed to a word per line. */
  .nb-sec > * { grid-column: 1; }

  /* The note sits beside the heading, in row 1, and occupies one row and no more. An earlier
     version spanned forty rows to hold the column open; the forty row gaps were the empty space
     that appeared under every section. */
  .nb-rail {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin: 0.35rem 0 0;
    border-left-width: 3px;
  }

  /* the blocks that are laid across both columns rather than down the reading one */
  .nb-sec > .nb-stack,
  .nb-sec > .nb-moments,
  .nb-sec > .nb-grid,
  .nb-sec > .nb-frame,
  .nb-sec > .nb-form,
  .nb-sec > .nb-on { grid-column: 1 / -1; }
}

.nb-back {
  margin: 2.2rem 0 0; padding-top: 1rem; border-top: 3px solid var(--nb-ink);
  font-family: var(--nb-face); font-size: 0.95rem; color: var(--nb-quiet);
}

/* ------------------------------------------------------------------ the three cells */

.nb-cells {
  margin: 0 0 2rem;
  background: var(--nb-sheet);
  border: 1px solid var(--nb-rule);
  border-top: 5px solid var(--nb-petrol);
  padding: 1.1rem 1.2rem 1.2rem;
  display: grid; gap: 0.1rem;
}
.nb-cells dt {
  font-family: var(--nb-face); font-size: 0.79rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--nb-ox); padding-top: 0.85rem;
}
.nb-cells dt:first-child { padding-top: 0; }
.nb-cells dd { margin: 0.2rem 0 0; }

@media (min-width: 52rem) {
  .nb-cells { grid-template-columns: 1fr 1fr 1fr; gap: 0 1.5rem; }
  .nb-cells dt { padding-top: 0; }
  .nb-cells dd { border-top: 1px solid var(--nb-rule); padding-top: 0.5rem; margin-top: 0.4rem; }
}

/* ------------------------------------------------------------------ the stack */

.nb-stack { list-style: none; margin: 0 0 1.5rem; padding: 0; grid-column: 1 / -1; }
.nb-stack a {
  display: grid; gap: 0.15rem;
  padding: 0.95rem 0.6rem 0.95rem 0;
  border-bottom: 1px solid var(--nb-rule);
  text-decoration: none; color: var(--nb-ink);
}
.nb-stack li:first-child a { border-top: 1px solid var(--nb-rule); }
.nb-stack a:hover { background: var(--nb-sheet); }
.nb-stack-when {
  font-family: var(--nb-face); font-size: 0.76rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--nb-ox);
}
.nb-stack-name { font-family: var(--nb-face); font-weight: 700; font-size: 1.12rem; }
.nb-stack-said { color: var(--nb-quiet); font-size: 0.96rem; }

@media (min-width: 52rem) {
  .nb-stack a { grid-template-columns: 13rem 1fr; align-items: baseline; column-gap: 1.4rem; }
  .nb-stack-when { grid-row: 1; grid-column: 1; }
  .nb-stack-name { grid-row: 1; grid-column: 2; }
  .nb-stack-said { grid-row: 2; grid-column: 2; }
}

/* ------------------------------------------------------------------ the three moments */

.nb-moments { display: grid; gap: 0.5rem; margin: 0 0 1.6rem; grid-column: 1 / -1; }
.nb-moments a {
  display: block; padding: 1rem 1.1rem;
  background: var(--nb-sheet); border-left: 5px solid var(--nb-amber);
  text-decoration: none; color: var(--nb-ink);
}
.nb-moments a:hover { background: var(--nb-shade); }
.nb-moments-name { display: block; font-family: var(--nb-face); font-weight: 700; font-size: 1.1rem; }
.nb-moments-said { display: block; color: var(--nb-quiet); font-size: 0.95rem; margin: 0.25rem 0; }
.nb-moments-n {
  display: block; font-family: var(--nb-face); font-size: 0.79rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-ox);
}

@media (min-width: 58rem) { .nb-moments { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------ grids */

.nb-grid {
  margin: 0 0 1.5rem; overflow-x: auto;
  border: 1px solid var(--nb-rule); background: var(--nb-sheet);
  grid-column: 1 / -1;
}
.nb-grid table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: 0.95rem; }
.nb-grid th, .nb-grid td {
  text-align: left; padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--nb-rule); vertical-align: top;
}
.nb-grid thead th {
  font-family: var(--nb-face); font-size: 0.79rem; letter-spacing: 0.12em;
  text-transform: uppercase; background: var(--nb-night); color: var(--nb-sheet);
  border-bottom-color: var(--nb-night);
}
.nb-grid tbody th {
  font-family: var(--nb-face); font-weight: 700; font-size: 0.93rem; white-space: nowrap;
}
.nb-grid tbody tr:last-child td, .nb-grid tbody tr:last-child th { border-bottom: 0; }
.nb-claims .is-yes { color: var(--nb-sage); font-weight: 700; }
.nb-claims .is-no { color: var(--nb-quiet); }

/* ------------------------------------------------------------------ steps, frames, onward */

.nb-steps { counter-reset: step; list-style: none; padding-left: 0; }
.nb-steps li {
  counter-increment: step; position: relative; padding-left: 2.6rem; margin-bottom: 0.7em;
}
.nb-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0.05em;
  font-family: var(--nb-face); font-weight: 700; font-size: 0.85rem;
  color: var(--nb-sheet); background: var(--nb-petrol);
  width: 1.8rem; height: 1.8rem; display: grid; place-items: center;
}

.nb-frame { margin: 0 0 1.5rem; grid-column: 1 / -1; }
.nb-frame img { width: 100%; border: 1px solid var(--nb-rule); }
.nb-frame figcaption {
  margin-top: 0.6rem; font-size: 0.92rem; color: var(--nb-quiet); max-width: 58ch;
}

.nb-on {
  margin: 2.2rem 0 0; border-top: 3px solid var(--nb-ink); padding-top: 1.2rem;
}
.nb-on ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.nb-on a {
  display: block; padding: 0.85rem 1rem; background: var(--nb-shade);
  text-decoration: none; color: var(--nb-ink);
}
.nb-on a:hover { background: var(--nb-sheet); }
.nb-on-name { display: block; font-family: var(--nb-face); font-weight: 700; }
.nb-on-said { display: block; font-size: 0.93rem; color: var(--nb-quiet); }

@media (min-width: 46rem) { .nb-on ul { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------------ the form */

.nb-form {
  margin: 0 0 1.6rem; grid-column: 1 / -1;
  background: var(--nb-sheet); border: 1px solid var(--nb-rule);
  border-top: 5px solid var(--nb-amber); padding: 1.3rem 1.25rem 1.4rem;
}
.nb-fields { display: grid; gap: 0.9rem; margin: 1.1rem 0; }
@media (min-width: 46rem) {
  .nb-fields { grid-template-columns: repeat(2, 1fr); }
  .nb-field:last-of-type { grid-column: 1 / -1; }
}
.nb-field label {
  display: block; font-family: var(--nb-face); font-size: 0.81rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--nb-quiet);
  margin-bottom: 0.3rem;
}
.nb-field input, .nb-field select, .nb-field textarea {
  width: 100%; font: 400 1rem/1.4 var(--nb-text); color: var(--nb-ink);
  background: #fff; border: 1px solid var(--nb-quiet); padding: 0.55rem 0.65rem; border-radius: 0;
}
.nb-field textarea { resize: vertical; }
.nb-field.is-off input, .nb-field.is-off select, .nb-field.is-off textarea {
  border-color: var(--nb-ox); border-width: 2px;
}
.nb-wrong { margin: 0.3rem 0 0; font-size: 0.92rem; color: var(--nb-ox); }
.nb-small { font-size: 0.93rem; color: var(--nb-quiet); max-width: 62ch; }
.nb-broke { margin: 0.6rem 0 0; font-size: 0.93rem; color: var(--nb-ox); }

.nb-send { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin: 1.1rem 0 0.9rem; }
.nb-send button {
  font: 700 1rem/1 var(--nb-face); letter-spacing: 0.06em;
  color: var(--nb-sheet); background: var(--nb-petrol);
  border: 2px solid var(--nb-petrol); padding: 0.8rem 1.5rem; cursor: pointer;
}
.nb-send button:hover { background: var(--nb-ox); border-color: var(--nb-ox); }
.nb-send button[disabled] { background: var(--nb-quiet); border-color: var(--nb-quiet); cursor: default; }

.nb-gate { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ storage card */

.nb-card {
  max-width: var(--nb-wide); margin: 0 auto 2.2rem;
  padding: 1.05rem 1.2rem 1.15rem;
  background: var(--nb-sheet); border: 1px solid var(--nb-petrol); border-left: 5px solid var(--nb-petrol);
}
.nb-card p { font-size: 0.95rem; }
.nb-card-go { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }
.nb-card-go button {
  font: 700 0.9rem/1 var(--nb-face); letter-spacing: 0.06em;
  padding: 0.62rem 1rem; cursor: pointer; border: 2px solid var(--nb-night);
}
.nb-card-go button[data-nb-yes] { background: var(--nb-night); color: var(--nb-sheet); }
.nb-card-go button[data-nb-no] { background: transparent; color: var(--nb-night); }
.nb-card-go button:hover { border-color: var(--nb-ox); color: var(--nb-ox); background: var(--nb-shade); }

/* ------------------------------------------------------------------ footer */

.nb-foot {
  background: var(--nb-night); color: var(--nb-board);
  border-top: 5px solid var(--nb-amber); padding: 2.2rem 1.25rem 2.4rem;
}
.nb-foot-cols { max-width: var(--nb-wide); margin: 0 auto 1.8rem; display: grid; gap: 1.5rem; }
.nb-foot h2 {
  font-size: 0.81rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--nb-amber); margin-bottom: 0.55rem;
}
.nb-foot ul { list-style: none; margin: 0; padding: 0; }
.nb-foot li { margin-bottom: 0.3rem; }
.nb-foot a { color: var(--nb-sheet); text-decoration: none; font-size: 0.95rem; }
.nb-foot a:hover { color: var(--nb-amber); text-decoration: underline; }

.nb-imprint {
  max-width: var(--nb-wide); margin: 0 auto; padding-top: 1.4rem;
  border-top: 1px solid var(--nb-quiet);
  font-size: 0.89rem; line-height: 1.55; color: var(--nb-board);
}
.nb-imprint strong { color: var(--nb-sheet); }
.nb-imprint a { color: var(--nb-sheet); }
.nb-imprint p { margin-bottom: 0.6em; }

@media (min-width: 46rem) { .nb-foot-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .nb-foot-cols { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------------------ reveal */

.nb-js .nb-rise { opacity: 0; transform: translateY(7px); }
.nb-js .nb-rise.is-filed {
  opacity: 1; transform: none;
  transition: opacity 280ms linear, transform 280ms ease-out;
}
.nb-nojs .nb-rise { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .nb-js .nb-rise, .nb-js .nb-rise.is-filed { opacity: 1; transform: none; transition: none; }
}

@media print {
  .nb-nav, .nb-card, .nb-on, .nb-form { display: none; }
  body, .nb-top, .nb-foot { background: #fff; color: #000; }
}

/* ------------------------------------------------ the opening screen on a phone

   Module 2.2 wants the availability widget on the first screen, and on a 375px
   phone the masthead alone was taking 314px of it: the name, the strap and the
   telephone each claimed a row of their own. Tightening the three of them plus
   the page head brings the form above the fold at 360px and up. Desktop already
   passed and is deliberately left alone. */
@media (max-width: 32rem) {
  .nb-top-in { padding: 0.85rem 1.1rem 0.7rem; gap: 0.3rem 1rem; }
  .nb-name { font-size: 1.35rem; }
  .nb-mark { width: 26px; height: 17px; }
  .nb-strap { font-size: 0.76rem; letter-spacing: 0.11em; }
  .nb-line { margin-left: 0; flex-direction: row; align-items: baseline; gap: 0.5rem; }
  .nb-nav a { padding: 0.5rem 0.7rem; font-size: 0.88rem; white-space: nowrap; }
  /* one scrolling row instead of three wrapped ones: the three rows cost 121px of a
     667px screen, which is an iPhone SE, and the last item is left part cut on
     purpose so the row reads as something that moves. Every link stays reachable. */
  .nb-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nb-nav ul::-webkit-scrollbar { display: none; }
  .nb-nav li { flex: none; }
  .nb-page { padding-top: 1.35rem; }
  .nb-head { padding-bottom: 0.8rem; margin-bottom: 1rem; }
  .nb-head h1 { font-size: 1.62rem; }
  .nb-stand { margin-top: 0.65rem; font-size: 1rem; }
  .nb-sec:first-of-type { padding-top: 0.9rem; }
}


/* ---------------------------------------------- the opening screen check

   Two fields and a button, and they have to clear the fold on a 667px phone, so this block is as
   short as a usable control can be. It hands what it collects to the long form on /booking/. */
.nb-check {
  margin: 1.15rem 0 0; padding: 1rem 1.05rem 1.1rem;
  background: var(--nb-shade); border: 1px solid var(--nb-rule);
  border-left: 4px solid var(--nb-amber);
}
.nb-check-say { margin: 0 0 0.75rem; font-size: 0.94rem; color: var(--nb-ink); max-width: 62ch; }
.nb-check-row { display: grid; gap: 0.7rem; }
.nb-check-cell label {
  display: block; margin-bottom: 0.25rem;
  font-family: var(--nb-face); font-size: 0.83rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--nb-ox);
}
.nb-check-cell input {
  width: 100%; padding: 0.55rem 0.65rem; font: inherit; font-size: 1rem;
  color: var(--nb-ink); background: var(--nb-sheet);
  border: 1px solid var(--nb-quiet); border-radius: 0;
}
.nb-check-cell input:focus-visible { outline: 3px solid var(--nb-ink); outline-offset: 1px; }
.nb-check-go { align-self: end; }
.nb-check button {
  width: 100%; padding: 0.62rem 1.1rem; font-family: var(--nb-face); font-size: 0.98rem;
  font-weight: 700; letter-spacing: 0.03em; color: var(--nb-sheet);
  background: var(--nb-ink); border: 1px solid var(--nb-ink); cursor: pointer;
}
.nb-check button:hover { background: var(--nb-ox); border-color: var(--nb-ox); }
.nb-check button:focus-visible { outline: 3px solid var(--nb-amber); outline-offset: 2px; }

@media (min-width: 46rem) {
  .nb-check-row { grid-template-columns: 1.5fr 1fr auto; gap: 0.85rem; align-items: end; }
  .nb-check button { width: auto; }
}
@media (max-width: 32rem) {
  .nb-check { margin-top: 0.9rem; padding: 0.8rem 0.85rem 0.9rem; }
  .nb-check-say { font-size: 0.89rem; margin-bottom: 0.6rem; }
  /* the two fields share a row on a phone. Stacked, the button landed 77px below a 667px fold and
     module 2.2 wants it above. Both labels are short enough to sit in half a 375px screen. */
  .nb-check-row { gap: 0.5rem 0.55rem; grid-template-columns: 1fr 1fr; }
  .nb-check-go { grid-column: 1 / -1; }
  .nb-check-cell label { font-size: 0.78rem; letter-spacing: 0.04em; }
  .nb-check-cell input { padding: 0.48rem 0.55rem; }
}

/* the masthead number was breaking at the hyphen into "+1 (817) 297-" and "4460" on every phone */
.nb-line a { white-space: nowrap; }

/* A short phone, not a narrow one: the iPhone SE 2 and 3 are 375 wide but only 667 tall, and the
   check button landed 55px under that fold while the same width at 812 passed comfortably. Only the
   short case is tightened, so tall phones keep the roomier hero. */
@media (max-width: 32rem) and (max-height: 700px) {
  .nb-page { padding-top: 1.05rem; }
  .nb-head { padding-bottom: 0.6rem; margin-bottom: 0.8rem; }
  .nb-head h1 { font-size: 1.46rem; }
  .nb-stand { margin-top: 0.5rem; font-size: 0.95rem; }
  .nb-brow { margin-bottom: 0.3rem; font-size: 0.78rem; }
  .nb-check { margin-top: 0.7rem; padding: 0.65rem 0.8rem 0.75rem; }
  .nb-check-say { font-size: 0.86rem; margin-bottom: 0.45rem; }
  .nb-check-cell input { padding: 0.42rem 0.5rem; }
  .nb-check button { padding: 0.55rem 1rem; }
}

/* Below about 660px of height the hero has to give up a little more. 360x640 is a low end Android
   and missed by twelve pixels. 320x568 cannot be made to fit and is recorded as the stated limit. */
@media (max-width: 32rem) and (max-height: 660px) {
  .nb-page { padding-top: 0.85rem; }
  .nb-head { padding-bottom: 0.5rem; margin-bottom: 0.65rem; }
  .nb-head h1 { font-size: 1.36rem; }
  .nb-stand { font-size: 0.92rem; margin-top: 0.42rem; }
  .nb-check-say { font-size: 0.84rem; margin-bottom: 0.4rem; }
}


/* The read-next caption sat at 4.16:1 on the shade ground, under the 4.5:1 the site's own
   accessibility page promises. Measured pair was #494e4d on #bcb5a7; this is the darker tone that
   clears it, and inline code on the same ground gets it too. */
.nb-on-said, .nb-on code, .nb-on a code { color: #33403e; }