/* Longeron. Palette Ramp and Dusk, archetype the shelf.

   Every block that is not prose is a full width shelf: a thick rule along the top, the content
   under it, and a small tag pushed to the right end of that rule. The nine facts are shelves too,
   and each carries a bar down its left edge whose LENGTH is the shelf life: a third for an answer
   that expires in hours, two thirds for one that holds for the trip, the full height for one that
   never changes. The words say the same thing beside the bar, so nothing depends on seeing it.

   Two faces from this domain: Geologica labels, Solway is read. Nothing loads from anywhere else
   and no page carries measurement code of any kind. */

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

:root {
  --lg-floor: #d9dad4;
  --lg-band: #c4c6bf;
  --lg-card: #f4f5f1;
  --lg-ink: #16191c;
  --lg-deep: #080b0e;
  --lg-quiet: #4d5359;
  --lg-signal: #8e3920;
  --lg-cold: #2b5566;
  --lg-brass: #a3873d;
  --lg-hair: #b0b3ab;
  --lg-good: #3d6b57;

  --lg-face: "Geologica", "Helvetica Neue", Arial, sans-serif;
  --lg-text: "Solway", Georgia, "Times New Roman", serif;

  --lg-lead: 1.43;
  --lg-measure: 60ch;
  --lg-wide: 70rem;
  --lg-rule: 5px;
}

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

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

body {
  margin: 0;
  background: var(--lg-floor);
  color: var(--lg-ink);
  font: 400 1.0625rem/var(--lg-lead) var(--lg-text);
  text-underline-offset: 0.16em;
}

h1, h2, h3 {
  font-family: var(--lg-face);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; max-width: var(--lg-measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--lg-cold); }
a:hover { color: var(--lg-signal); }

:focus-visible { outline: 3px solid var(--lg-signal); 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(--lg-band);
  padding: 0.05em 0.32em;
}

blockquote {
  margin: 0 0 1em; padding-left: 1rem;
  border-left: 3px solid var(--lg-hair); color: var(--lg-quiet);
  max-width: var(--lg-measure);
}

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

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

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

.lg-top { background: var(--lg-deep); color: var(--lg-card); }
.lg-top-in {
  max-width: var(--lg-wide); margin: 0 auto; padding: 1.35rem 1.25rem 1rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.4rem;
}
.lg-name {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--lg-face); font-weight: 700; font-size: 1.55rem;
  color: var(--lg-card); text-decoration: none; letter-spacing: -0.01em;
}
a.lg-name:hover { color: var(--lg-brass); }
.lg-mark { width: 32px; height: 18px; flex: none; fill: var(--lg-brass); }
.lg-strap {
  margin: 0; font-family: var(--lg-face); font-size: 0.84rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--lg-floor); max-width: none;
}
.lg-line {
  margin: 0 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--lg-face); font-size: 0.84rem; max-width: none;
}
.lg-line a {
  color: var(--lg-brass); font-size: 1.12rem; font-weight: 700; text-decoration: none;
}
.lg-line a:hover { text-decoration: underline; }
.lg-line span { color: var(--lg-floor); letter-spacing: 0.05em; }

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

/* ------------------------------------------------------------------ page */

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

.lg-head { border-bottom: var(--lg-rule) solid var(--lg-ink); padding-bottom: 1.3rem; margin-bottom: 2rem; }
.lg-brow {
  margin: 0 0 0.5rem; font-family: var(--lg-face); font-size: 0.8rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--lg-signal); max-width: none;
}
.lg-head h1 { font-size: clamp(1.9rem, 4.6vw, 2.75rem); max-width: 24ch; }
.lg-stand { margin: 0.9rem 0 0; font-size: 1.08rem; color: var(--lg-quiet); }

.lg-sec { margin: 0 0 2rem; }
.lg-sec h2 {
  font-size: 1.32rem; padding-top: 0.7rem;
  border-top: 2px solid var(--lg-hair); margin-bottom: 0.7rem;
}
.lg-sec h3 { font-size: 1.04rem; margin: 1.3rem 0 0.45rem; color: var(--lg-cold); }
.lg-sec ul, .lg-sec ol { margin: 0 0 1em; padding-left: 1.25rem; max-width: var(--lg-measure); }
.lg-sec li { margin-bottom: 0.35em; }

.lg-back {
  margin: 2.2rem 0 0; padding-top: 1rem; border-top: var(--lg-rule) solid var(--lg-ink);
  font-family: var(--lg-face); font-size: 0.94rem; color: var(--lg-quiet); max-width: none;
}

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

.lg-cells {
  margin: 0 0 2rem; background: var(--lg-card);
  border-top: var(--lg-rule) solid var(--lg-cold);
  padding: 1.1rem 1.2rem 1.2rem; display: grid; gap: 0.1rem;
}
.lg-cells dt {
  font-family: var(--lg-face); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--lg-signal); padding-top: 0.85rem;
}
.lg-cells dt:first-child { padding-top: 0; }
.lg-cells dd { margin: 0.2rem 0 0; }

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

/* ------------------------------------------------------------------ the shelves */

.lg-shelf { list-style: none; margin: 0 0 2rem; padding: 0; }
.lg-shelf li { border-top: 2px solid var(--lg-hair); }
.lg-shelf li:last-child { border-bottom: 2px solid var(--lg-hair); }
.lg-shelf a {
  position: relative; display: grid; gap: 0.16rem;
  padding: 1rem 0.6rem 1rem 1.5rem;
  text-decoration: none; color: var(--lg-ink);
}
.lg-shelf a:hover { background: var(--lg-card); }

/* The bar is the shelf life, drawn. It is generated rather than marked up: an empty element exists
   only to be painted, and this way there is nothing in the document that carries no meaning. The
   words beside it say the same thing, so nothing is lost where the paint does not arrive. */
.lg-shelf a::before {
  content: ""; position: absolute; left: 0; top: 0.9rem; width: 5px; border-radius: 3px;
  background: var(--lg-signal);
}
.lg-shelf li.is-perishable a::before { height: 1.6rem; background: var(--lg-signal); }
.lg-shelf li.is-trip a::before { height: 3.2rem; background: var(--lg-brass); }
.lg-shelf li.is-fixed a::before { height: calc(100% - 1.8rem); background: var(--lg-cold); }

.lg-shelf-life {
  font-family: var(--lg-face); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--lg-quiet);
}
.lg-shelf-name { font-family: var(--lg-face); font-weight: 700; font-size: 1.12rem; }
.lg-shelf-said { color: var(--lg-quiet); font-size: 0.96rem; max-width: var(--lg-measure); }

@media (min-width: 54rem) {
  .lg-shelf a { grid-template-columns: 14rem 1fr; column-gap: 1.5rem; align-items: baseline; }
  .lg-shelf-life { grid-row: 1; grid-column: 1; }
  .lg-shelf-name { grid-row: 1; grid-column: 2; }
  .lg-shelf-said { grid-row: 2; grid-column: 2; }
}

.lg-shelves { display: grid; gap: 0.5rem; margin: 0 0 2rem; }
.lg-shelves a {
  position: relative; display: block; padding: 1rem 1.1rem 1rem 1.5rem;
  background: var(--lg-card); text-decoration: none; color: var(--lg-ink);
}
.lg-shelves a:hover { background: var(--lg-band); }
/* generated, for the same reason as the bar on the shelf list further up */
.lg-shelves a::before { content: ""; position: absolute; left: 0; top: 1rem; width: 6px; border-radius: 3px; }
.lg-shelves .is-perishable::before { height: 1.4rem; background: var(--lg-signal); }
.lg-shelves .is-trip::before { height: 3rem; background: var(--lg-brass); }
.lg-shelves .is-fixed::before { height: calc(100% - 2rem); background: var(--lg-cold); }
.lg-shelves-name { display: block; font-family: var(--lg-face); font-weight: 700; font-size: 1.08rem; }
.lg-shelves-said { display: block; color: var(--lg-quiet); font-size: 0.94rem; margin: 0.25rem 0; }
.lg-shelves-n {
  display: block; font-family: var(--lg-face); font-size: 0.76rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--lg-signal);
}

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

/* ------------------------------------------------------------------ tables, steps, frames */

.lg-table {
  margin: 0 0 2rem; overflow-x: auto;
  border-top: var(--lg-rule) solid var(--lg-ink); background: var(--lg-card);
}
.lg-table table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: 0.95rem; }
.lg-table th, .lg-table td {
  text-align: left; padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--lg-hair); vertical-align: top;
}
.lg-table thead th {
  font-family: var(--lg-face); font-size: 0.77rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--lg-quiet); background: var(--lg-band);
}
.lg-table tbody th { font-family: var(--lg-face); font-weight: 700; font-size: 0.92rem; }
.lg-table tbody tr:last-child td, .lg-table tbody tr:last-child th { border-bottom: 0; }
.lg-claims .is-yes { color: var(--lg-good); font-weight: 700; }
.lg-claims .is-no { color: var(--lg-quiet); }

.lg-steps { counter-reset: step; list-style: none; padding-left: 0; max-width: var(--lg-measure); }
.lg-steps li { counter-increment: step; position: relative; padding-left: 2.5rem; margin-bottom: 0.7em; }
.lg-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0.02em;
  font-family: var(--lg-face); font-weight: 700; font-size: 0.83rem;
  color: var(--lg-card); background: var(--lg-cold);
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%;
}

.lg-frame { margin: 0 0 2rem; }
.lg-frame img { width: 100%; border-top: var(--lg-rule) solid var(--lg-ink); }
.lg-frame figcaption {
  margin-top: 0.6rem; font-size: 0.92rem; color: var(--lg-quiet); max-width: var(--lg-measure);
}

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

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

/* ------------------------------------------------------------------ questions */

.lg-asked h3 {
  font-family: var(--lg-face); font-size: 1.08rem; margin: 1.8rem 0 0.5rem;
  padding-top: 0.7rem; border-top: 2px solid var(--lg-hair);
}
.lg-asked h3:first-child { margin-top: 0; }

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

.lg-form {
  margin: 0 0 2rem; background: var(--lg-card);
  border-top: var(--lg-rule) solid var(--lg-brass); padding: 1.3rem 1.25rem 1.4rem;
}
.lg-fields { display: grid; gap: 0.9rem; margin: 1.1rem 0; }
@media (min-width: 46rem) {
  .lg-fields { grid-template-columns: repeat(2, 1fr); }
  /* scoped to its own grid on purpose: unscoped, this also matched the date field inside
     .lg-check-fields, dropped it to a row of its own and pushed the submit button 85px down */
  .lg-fields > .lg-field:last-of-type { grid-column: 1 / -1; }
}
.lg-field label {
  display: block; font-family: var(--lg-face); font-size: 0.79rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--lg-quiet); margin-bottom: 0.3rem;
}
.lg-field input, .lg-field select, .lg-field textarea {
  width: 100%; font: 400 1rem/1.4 var(--lg-text); color: var(--lg-ink);
  background: #fff; border: 1px solid var(--lg-quiet); padding: 0.55rem 0.65rem; border-radius: 0;
}
.lg-field textarea { resize: vertical; }
.lg-field.is-off input, .lg-field.is-off select, .lg-field.is-off textarea {
  border-color: var(--lg-signal); border-width: 2px;
}
.lg-wrong { margin: 0.3rem 0 0; font-size: 0.92rem; color: var(--lg-signal); }
.lg-small { font-size: 0.93rem; color: var(--lg-quiet); }
.lg-broke { margin: 0.6rem 0 0; font-size: 0.93rem; color: var(--lg-signal); }
.lg-send { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin: 1.1rem 0 0.9rem; }
.lg-send button {
  font: 700 1rem/1 var(--lg-face); color: var(--lg-card); background: var(--lg-cold);
  border: 2px solid var(--lg-cold); padding: 0.8rem 1.5rem; cursor: pointer;
}
.lg-send button:hover { background: var(--lg-signal); border-color: var(--lg-signal); }
.lg-send button[disabled] { background: var(--lg-quiet); border-color: var(--lg-quiet); cursor: default; }
.lg-gate { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* the opening screen check: two fields and a button, working with the script switched off */
.lg-check {
  margin: 0 0 2rem; background: var(--lg-card);
  border-top: var(--lg-rule) solid var(--lg-cold); padding: 1.2rem 1.25rem 1.3rem;
}
.lg-check-said { font-size: 0.98rem; color: var(--lg-quiet); max-width: var(--lg-measure); }
.lg-check-fields { display: grid; gap: 0.9rem; margin: 1rem 0 0; }
@media (min-width: 40rem) { .lg-check-fields { grid-template-columns: 2fr 1fr; } }

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

.lg-card {
  max-width: var(--lg-wide); margin: 0 auto 2rem; padding: 1.05rem 1.2rem 1.15rem;
  background: var(--lg-card); border-top: var(--lg-rule) solid var(--lg-cold);
}
.lg-card p { font-size: 0.95rem; max-width: none; }
.lg-card-go { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }
.lg-card-go button {
  font: 700 0.9rem/1 var(--lg-face); padding: 0.62rem 1rem; cursor: pointer;
  border: 2px solid var(--lg-deep);
}
.lg-card-go button[data-lg-yes] { background: var(--lg-deep); color: var(--lg-card); }
.lg-card-go button[data-lg-no] { background: transparent; color: var(--lg-deep); }
.lg-card-go button:hover { border-color: var(--lg-signal); color: var(--lg-signal); background: var(--lg-band); }

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

.lg-foot {
  background: var(--lg-deep); color: var(--lg-floor);
  border-top: var(--lg-rule) solid var(--lg-brass); padding: 2.2rem 1.25rem 2.4rem;
}
.lg-foot-cols { max-width: var(--lg-wide); margin: 0 auto 1.8rem; display: grid; gap: 1.5rem; }
.lg-foot h2 {
  font-size: 0.79rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--lg-brass); margin-bottom: 0.55rem;
}
.lg-foot ul { list-style: none; margin: 0; padding: 0; }
.lg-foot li { margin-bottom: 0.3rem; }
.lg-foot a { color: var(--lg-card); text-decoration: none; font-size: 0.94rem; }
.lg-foot a:hover { color: var(--lg-brass); text-decoration: underline; }
.lg-imprint {
  max-width: var(--lg-wide); margin: 0 auto; padding-top: 1.4rem;
  border-top: 1px solid var(--lg-quiet); font-size: 0.88rem; line-height: 1.55; color: var(--lg-floor);
}
.lg-imprint strong { color: var(--lg-card); }
.lg-imprint a { color: var(--lg-card); }
.lg-imprint p { margin-bottom: 0.6em; max-width: none; }

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

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

.lg-js .lg-rise { opacity: 0; transform: translateY(6px); }
.lg-js .lg-rise.is-set { opacity: 1; transform: none; transition: opacity 260ms linear, transform 260ms ease-out; }
.lg-nojs .lg-rise { opacity: 1; transform: none; }

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

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


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

   Module 2.2 wants the availability fields AND the button on the first screen. Measured before
   this block, at 390x844: masthead 328, H1 393-534, subhead 548-672, preamble, first input at
   882 and the button ending at 1069. The container was visible at 729, which is exactly the
   false pass that measuring the form element instead of its controls produces. */
@media (max-width: 47.99rem) {
  .lg-top-in { padding: 0.8rem 1.1rem 0.65rem; gap: 0.3rem 1rem; }
  .lg-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lg-nav ul::-webkit-scrollbar { display: none; }
  .lg-nav li { flex: none; }
  .lg-nav a { padding: 0.5rem 0.7rem; font-size: 0.88rem; white-space: nowrap; }
  .lg-page { padding-top: 1.3rem; }
  .lg-head { padding-bottom: 0.8rem; margin-bottom: 1rem; }
  .lg-head h1 { font-size: 1.6rem; }
  .lg-stand { margin-top: 0.6rem; font-size: 1rem; }
  .lg-check { padding: 1rem 1.1rem 1.1rem; margin-bottom: 1.4rem; }
  .lg-check-fields { margin-top: 0.75rem; }
  /* the preamble reads after the controls on a phone, so it cannot stand between the heading
     and the first field. It keeps its place in the source, so nothing changes for a reader
     without CSS and nothing changes on a wider screen. */
  .lg-check { display: flex; flex-direction: column; }
  .lg-check > h2 { order: 1; }
  .lg-check > form { order: 2; }
  .lg-check-said { order: 3; margin-top: 0.9rem; }
}

/* A short phone: 375x667 is an iPhone SE 2 and 3, still sold hardware. At the sizes above, the
   button ended at 739 against a 667 fold. Only the opening block is tightened, and only where the
   screen is genuinely short, so a tall phone keeps the roomier setting. */
@media (max-width: 47.99rem) and (max-height: 44rem) {
  .lg-top-in { padding: 0.6rem 1.1rem 0.5rem; }
  .lg-nav a { padding: 0.42rem 0.65rem; }
  .lg-page { padding-top: 1rem; }
  .lg-brow { margin-bottom: 0.25rem; }
  .lg-head h1 { font-size: 1.36rem; }
  .lg-head { padding-bottom: 0.6rem; margin-bottom: 0.75rem; }
  .lg-stand { margin-top: 0.5rem; font-size: 0.95rem; }
  .lg-check { padding: 0.8rem 1rem 0.9rem; }
  .lg-check > h2 { font-size: 1.1rem; margin-bottom: 0.2rem; }
  .lg-check-fields { gap: 0.6rem; margin-top: 0.55rem; }
}

/* 360x640 and shorter. Thirteen pixels were missing, so this tier is small on purpose. */
@media (max-width: 47.99rem) and (max-height: 40rem) {
  .lg-brow { display: none; }
  .lg-head h1 { font-size: 1.28rem; }
  .lg-stand { font-size: 0.92rem; margin-top: 0.4rem; }
  .lg-check-fields { gap: 0.5rem; }
  .lg-send { margin-top: 0.6rem; }
}