/* ============================================================
   Lawod — sample-site stylesheet
   (Phase 4, Session B · premium elevation Session C, 2026-08-20)
   ============================================================
   This demo wears its OWN palette. It shares nothing with
   site/css/tokens.css on purpose: a prospect must see a site that
   looks like THEIRS, not like JL Digital's brand. Only the two
   locked font files are shared (same URLs as the rest of the site,
   so a visitor coming from jldigitalph.com already has them cached).

   Direction: "dive logbook" — the salt-stained logbook every diver
   keeps. The page IS the shop's logbook opened for you: dive sites
   as numbered entries, photos taped in like instant prints, the
   shop's round rubber stamp, one dashed route line stitching the
   entries — and booking is "your first entry".
   - Ground:    salt-faded ruled paper
   - Ink:       ballpoint navy
   - One red:   depth figures alone (the lit number of every entry)
   - Action:    stamp teal — buttons and links

   The premium elevation (2026-08-20, approved on the decision page)
   keeps the world and raises the execution:
   - the paper becomes a finite OBJECT: above 1100px it is a bounded
     sheet resting on a dark desk, with edges, binding shade, and a
     drawn margin ruling — no more infinite beige
   - the paper gets its promised history: film grain, salt stains,
     sun-fade, slightly roughened ruling (all CSS, ~1KB)
   - the instant prints get true print anatomy: thick chin with the
     caption IN it, photo sheen, dual contact+ambient shadow,
     translucent torn tape that varies print to print
   - the stamp presses ON the photo (it used to eat the thesis line)
     with speckle-masked ink
   - the No. tags return to ink — depth figures stay the only red
     (the world's own rule)
   - the booking form becomes log entry No. 14: card sheet, ruled
     textarea, facts-style labels, the route rail arriving at it
   - designed hover / focus / active states; the letterpress button
     finally presses
   - the one scroll moment: log prints settle into the page as they
     enter view (CSS scroll timeline, resting state is the fallback)

   Every colour pair below was checked against WCAG AA (computed
   2026-08-19; elevation re-check 2026-08-20 — soft ink DARKENED to
   #4d5a74 to buy headroom under the new grain, and the button hover
   now darkens instead of lightening, because #268076 measured 4.49:1
   under its own label):
     ink       #22304d on paper #e9e2d0    10.17:1
     soft ink  #4d5a74 on paper             5.44:1
     depth red #a83b2a on paper             4.89:1
     depth red #a83b2a on card #fffcf3      6.16:1
     teal      #1e6a63 on paper             4.93:1
     CTA text  #f2fbf7 on teal #1e6a63      6.04:1
     CTA text  #f2fbf7 on hover #1a5c56     7.02:1
     ink       #22304d on card #fffcf3     12.81:1
     soft ink  #4d5a74 on card              6.85:1
     jl-text   #e9e9ed on #161826          14.54:1
     jl-accent #9184d9 on #161826           5.45:1
   The old #b3402e red failed bare paper at 4.41:1 — that is why the
   depth red is #a83b2a everywhere. Never put red on the tape strips.
   The paper pairs sit within ~0.5 of the AA line: the grain tile is
   capped at 3% and the stains at 8%/6%, and the verification pass
   pixel-samples the average text-zone ground from the render (sampled
   2026-08-20 at 4%: avg ground (227,220,202) → soft ink 5.07:1) —
   never raise them without re-sampling. Known sliver: where a glyph
   crosses a 1px ruled line the local ground dips below 4.5:1; that
   condition predates the elevation (the rules have been 12% ink since
   Session B) and spans one hairline, not a reading surface.
   Focus rings are per-band via --ring: teal on paper, card-white on
   the dark desk/skip surface, jl-accent in the JL bands.
   ============================================================ */

/* The two locked families, pointed at the SAME woff2 files the whole
   site uses (../../ because this file lives in samples/css/). Never a
   third family — differentiation comes from palette and layout. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/fonts/fraunces-600.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/public-sans.woff2") format("woff2");
}

:root {
  /* One committed light look: paper is paper. The desk around it is
     the only dark surface and carries no text. */
  color-scheme: light;

  --paper:      #e9e2d0;  /* salt-faded logbook page */
  --card:       #fffcf3;  /* entry cards — a fresher sheet */
  --ink:        #22304d;  /* ballpoint navy — headings, body */
  --ink-soft:   #4d5a74;  /* pencil notes — secondary text (darkened
                             2026-08-20: the old #54617c held 4.81:1,
                             too little under grain) */
  --rule:       rgba(34, 48, 77, 0.12);  /* the ruled lines */
  --line:       rgba(34, 48, 77, 0.3);   /* dashes, borders */
  --depth:      #a83b2a;  /* depth figures ONLY — the lit number */
  --teal:       #1e6a63;  /* the shop stamp, links, buttons */
  --teal-deep:  #14514b;  /* button shadow edge */
  --teal-press: #1a5c56;  /* button hover — darker, never lighter */
  --tape:       rgba(214, 204, 168, 0.62); /* washi tape, translucent */
  --desk:       #132022;  /* the desk under the logbook — no text ever */

  /* JL Digital's own dark voice, used ONLY in the two truth bands.
     Declared here so this page never imports the main tokens file. */
  --jl-night:   #161826;
  --jl-text:    #e9e9ed;
  --jl-bright:  #f3f5fe;
  --jl-accent:  #9184d9;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad-x: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* per-band focus ring */
  --ring: var(--teal);

  /* Film grain: one tiled turbulence speckle, ~700 bytes, CSP-safe
     (img-src allows data:). Capped at 4% — see the contrast note. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ---- reset-lite ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  /* Below the desk breakpoint the body IS the paper (the .page
     wrapper carries the same layers); above it the body is the desk
     and the paper becomes a bounded object. */
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(30, 106, 99, 0.15);
}

/* The logbook itself. All the paper's physical history lives here:
   ruled lines, a roughening offset pass, salt stains, sun-fade at
   the edges, and the grain — stacked as backgrounds, zero requests. */
.page {
  background:
    var(--grain),
    /* salt stains: two soft asymmetric blotches */
    radial-gradient(420px 300px at 88% 2%, rgba(160, 138, 92, 0.08), transparent 70%),
    radial-gradient(520px 380px at 4% 38%, rgba(160, 138, 92, 0.06), transparent 70%),
    /* sun-fade: the page edges warmed by years of daylight */
    linear-gradient(90deg, rgba(160, 138, 92, 0.06), transparent 8% 92%, rgba(160, 138, 92, 0.06)),
    /* the ruling, plus a 1px-offset echo so it stops being laser-perfect */
    repeating-linear-gradient(0deg, transparent 0 27px, var(--rule) 27px 28px),
    repeating-linear-gradient(0deg, transparent 0 27.5px, rgba(34, 48, 77, 0.05) 27.5px 28.5px),
    var(--paper);
}
@media (min-width: 1100px) {
  /* The desktop transformation: a finite sheet on the desk — edges,
     contact shadow, and a breath of desk around it. */
  .page {
    max-width: 1240px;
    margin: 0 auto;
    border: 1px solid rgba(34, 48, 77, 0.25);
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.35),
      0 24px 60px -20px rgba(0, 0, 0, 0.55);
    position: relative;
  }
  /* the binding: a soft gutter shade down the sheet's left edge */
  .page::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 26px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(34, 48, 77, 0.14), transparent);
  }
  /* the classic margin ruling — drawn in ink, not red: red belongs
     to depth figures alone, and navy-margin logbooks are real */
  .page::after {
    content: "";
    position: absolute;
    left: 74px; top: 0; bottom: 0;
    width: 2px;
    pointer-events: none;
    background: rgba(34, 48, 77, 0.16);
  }
}

img { max-width: 100%; height: auto; display: block; }
/* Kills the 300ms double-tap delay on older mobile browsers without
   touching pinch-zoom — every tappable thing on the page. */
a, button, input, select, textarea, label { touch-action: manipulation; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.12;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
/* Display Fraunces takes a touch of negative tracking. */
h1 { letter-spacing: -0.015em; }
h2 { letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a {
  color: var(--teal);
  text-underline-offset: 3px;
  transition: color 150ms var(--ease);
}
a:hover { color: var(--teal-deep); }

/* The browser surfaces nobody draws still belong to the logbook. */
::selection { background: var(--teal); color: var(--card); }
input, textarea { caret-color: var(--teal); }

/* One visible focus style everywhere — thick, offset, recoloured per
   band through --ring. */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--card);
  padding: 10px 18px;
  z-index: 10;
}
.skip-link:focus { left: 12px; top: 12px; }
/* the skip link surfaces over dark grounds — ring in its own card
   white, not the teal that sank to 2.76:1 on the note band */
.skip-link:focus-visible { outline-color: var(--card); }

.wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ---- JL truth bands (dark voice) ------------------------------- */
.jl-note {
  background: var(--jl-night);
  color: var(--jl-text);
  padding: 14px var(--pad-x);
  font-size: 15px;
  line-height: 1.55;
  --ring: var(--jl-accent);
}
.jl-note p { margin: 0; max-width: 72ch; }
.jl-note strong { color: var(--jl-bright); font-weight: 700; }
.jl-note a { color: var(--jl-accent); }
.jl-note a:hover { color: var(--jl-bright); }

.jl-close {
  background: var(--jl-night);
  color: var(--jl-text);
  padding: clamp(56px, 9vw, 96px) var(--pad-x);
  --ring: var(--jl-accent);
}
.jl-close .inner { max-width: 720px; margin: 0 auto; }
.jl-close h2 {
  color: var(--jl-bright);
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  margin-bottom: 0.6em;
}
.jl-close p { max-width: 62ch; }
.jl-close strong { color: var(--jl-bright); }
.jl-close a { color: var(--jl-accent); }
.jl-close a:hover { color: var(--jl-bright); }
.jl-close .jl-rule {
  border: 0;
  height: 1px;
  background: rgba(233, 233, 237, 0.16);
  margin: 0 0 28px;
}
.jl-close .btn-jl {
  display: inline-block;
  background: var(--jl-accent);
  color: var(--jl-night);
  font-weight: 700;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 6px;
  margin: 6px 18px 6px 0;
  transition: background-color 150ms var(--ease), transform 120ms var(--ease);
}
.jl-close .btn-jl:hover { background: var(--jl-bright); color: var(--jl-night); }
.jl-close .btn-jl:active { transform: translateY(1px); }

/* ---- demo header ------------------------------------------------ */
.site-head {
  display: flex;
  align-items: center;
  gap: 12px 22px;
  flex-wrap: wrap;
  padding: 16px var(--pad-x);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.site-head nav {
  display: flex;
  gap: 4px 20px;
  flex-wrap: wrap;
  align-items: center;
}
.site-head nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  /* comfortable tap size on a phone */
  padding: 10px 2px;
  position: relative;
}
/* a hand-ruled underline: slides in, sits a hair off-square like a
   line drawn without a ruler */
.site-head nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0) rotate(-0.4deg);
  transform-origin: left;
  transition: transform 180ms var(--ease);
}
.site-head nav a:hover::after,
.site-head nav a:focus-visible::after { transform: scaleX(1) rotate(-0.4deg); }

/* ---- buttons ---------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  text-align: center;
  border-radius: 6px;
  padding: 15px 24px;
  border: 0;
  cursor: pointer;
  transition: background-color 150ms var(--ease), transform 120ms var(--ease),
              box-shadow 120ms var(--ease);
}
/* The letterpress finally presses: hover lifts a hair (and DARKENS —
   the old lighter hover fell to 4.49:1 under its own label), active
   drops it flat onto the page. */
.btn-teal {
  background: var(--teal);
  color: #f2fbf7;
  box-shadow: 0 3px 0 var(--teal-deep);
}
.btn-teal:hover {
  background: var(--teal-press);
  color: #f2fbf7;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--teal-deep);
}
.btn-teal:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--teal-deep);
}

/* ---- hero: the log, opened -------------------------------------- */
.hero { padding: clamp(16px, 4vw, 56px) 0 0; }
.hero .wrap { position: relative; }
/* the route line begins here — the spine the whole log hangs from */
.hero .wrap::before {
  content: "";
  position: absolute;
  left: calc(var(--pad-x) - 12px);
  top: 130px;
  bottom: -20px;
  border-left: 3px dashed rgba(34, 48, 77, 0.42);
}
.hero h1 {
  font-size: clamp(3.2rem, 14vw, 7rem);
  margin: 0 0 0.05em;
}
/* The pencil voice, honestly rendered: upright light-weight Public
   Sans, not a synthesized oblique (the variable file has no italic —
   faked slants are a cheap type tell). */
.hero .sub {
  font-weight: 350;
  color: var(--ink-soft);
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  letter-spacing: 0.01em;
  margin-bottom: 1em;
}

/* ---- the instant print, elevated -------------------------------- */
/* True print anatomy: white mat with a thick chin, the caption lives
   IN the chin, a faint sheen across the photo, contact + ambient
   shadows, and translucent torn tape that varies print to print. */
.print {
  position: relative;
  background: #fff;
  padding: 10px 10px 6px;
  margin: 0;
  box-shadow: 0 1px 2px rgba(34, 48, 77, 0.28), 4px 12px 26px rgba(34, 48, 77, 0.24);
  transform: rotate(-1.5deg);
}
/* the photo well: holds the sheen without touching the chin */
.print .ph {
  position: relative;
  display: block;
  overflow: hidden;
}
.print .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.14) 8%, transparent 30%);
}
.print img { width: 100%; outline: 1px solid rgba(34, 48, 77, 0.08); outline-offset: -1px; }
/* washi tape: translucent, torn ends, a real shadow under it */
.print::before, .print::after {
  content: "";
  position: absolute;
  width: 70px; height: 22px;
  background: var(--tape);
  top: -10px;
  box-shadow: 0 1px 3px rgba(34, 48, 77, 0.22);
  clip-path: polygon(3% 0, 97% 4%, 100% 88%, 94% 100%, 4% 96%, 0 12%);
}
.print::before { left: -16px; transform: rotate(-38deg); }
.print::after { right: -16px; transform: rotate(38deg); }
/* no two prints taped by the same hand twice */
.log .print.tilt-r::before { transform: rotate(-31deg); top: -12px; }
.log .print.tilt-r::after { transform: rotate(43deg); left: auto; right: -12px; }
.print figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 350;
  color: var(--ink-soft);
  padding: 10px 4px 8px;
}
/* Depth figures: the one lit number of every entry, and the ONLY
   place the red lives (see the contrast table — #a83b2a everywhere). */
.depth {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--depth);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* the shop's round rubber stamp — pressed ON the photo now (floating
   above the print, it used to eat the "Entry no. 1 is yours" line),
   its ink broken by a speckle mask like a real strike */
.stamp {
  position: absolute;
  right: 16px;
  top: 18px;
  width: clamp(100px, 9vw, 132px);
  height: clamp(100px, 9vw, 132px);
  border: 3px double var(--teal);
  border-radius: 50%;
  transform: rotate(12deg);
  color: var(--teal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 2;
  /* a faint pool of the paper's own tone under the ink keeps the
     strike legible over bright water without hiding the photo */
  background: rgba(233, 226, 208, 0.28);
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 62%, rgba(0, 0, 0, 0.7) 78%, rgba(0, 0, 0, 0.88) 100%);
  mask-image: radial-gradient(circle at 30% 40%, #000 62%, rgba(0, 0, 0, 0.7) 78%, rgba(0, 0, 0, 0.88) 100%);
}
.stamp b { font-size: 13px; letter-spacing: 0.06em; }

.hero .print { margin-top: 10px; }
@media (min-width: 900px) {
  /* an instant print is a small object: it caps and tilts harder
     instead of stretching into a 900px banner */
  .hero .print {
    max-width: 640px;
    transform: rotate(-2deg);
  }
  .hero .print figcaption { font-size: clamp(13.5px, 1.1vw, 15px); }
}

/* the tight entry index under the print */
.index { margin: 12px 0 0; }
.index .row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 6px 2px;
  font-size: 15px;
}
.index .row b { font-family: var(--font-display); font-size: 1.05rem; order: 1; }
.index .row span { color: var(--ink-soft); font-size: 13px; font-weight: 350; order: 2; }
/* a drawn leader line carries the eye to the depth figure */
.index .row::after {
  content: "";
  order: 3;
  flex: 1;
  min-width: 10px;
  border-bottom: 1px dashed var(--line);
  transform: translateY(-4px);
}
@media (max-width: 419px) {
  /* on the narrowest rows the leader would force the depth to wrap
     under the name — the figure matters more than the dashes */
  .index .row::after { display: none; }
  .index .row { justify-content: space-between; }
  .index .row .depth { margin-left: auto; }
}
.index .row .depth { order: 4; }
@media (min-width: 900px) {
  /* leaders read as leaders, not a football field of dashes */
  .index { max-width: 560px; }
}

.hero .cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  padding-bottom: 8px;
}
.hero .cta .aside-note {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 350;
  margin: 0;
  /* short enough to sit BESIDE the button at 390 (the comp's own
     width) instead of wrapping under it and out of the viewport */
  max-width: 13ch;
}

/* Gentle arrival, once, on load — compositor-only, and fully
   disabled under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.7s var(--ease) both; }
  .rise-2 { animation-delay: 0.12s; }
  .rise-3 { animation-delay: 0.24s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px) rotate(-1.5deg); }
    to   { opacity: 1; }
  }
  /* the print keeps its resting tilt; text elements land straight */
  h1.rise, p.rise, div.rise { animation-name: rise-straight; }
  @keyframes rise-straight {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* THE page's one scroll moment: each log print settles into the
   album as it enters view — from a lifted, harder tilt down to its
   resting angle. Progressive: without scroll timelines (or with
   reduced motion) the print simply rests, which IS the design. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .log .print {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    @keyframes settle {
      from { transform: rotate(-4deg) translateY(12px); }
      to   { transform: rotate(-1.5deg) translateY(0); }
    }
    .log .print.tilt-r {
      animation-name: settle-r;
    }
    @keyframes settle-r {
      from { transform: rotate(4.2deg) translateY(12px); }
      to   { transform: rotate(1.6deg) translateY(0); }
    }
  }
}

/* ---- sections ---------------------------------------------------- */
section { padding: clamp(56px, 9vw, 104px) 0 0; }
.sec-title { font-size: clamp(1.8rem, 5vw, 3.2rem); max-width: 20ch; }
.sec-intro { color: var(--ink-soft); max-width: 56ch; margin-bottom: 2em; }

/* ---- the log so far: entries + prints stitched by the route ----- */
/* The route line, weightier now, threading every entry and print.
   The entries' No. tags sit on it — in INK: red is the depth's. */
.log-grid {
  position: relative;
  max-width: 680px;
  padding-left: 18px;
}
.log-grid::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  bottom: 6px;
  border-left: 3px dashed rgba(34, 48, 77, 0.42);
}
@media (min-width: 1100px) {
  /* the spread opens: entries hold the margin, prints push into the
     freed field and overlap their entries — an album, not a column */
  .log-grid { max-width: 920px; }
}
.entry {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px 18px;
  margin-top: 26px;
  box-shadow: 2px 3px 10px rgba(34, 48, 77, 0.12);
}
@media (min-width: 1100px) {
  .entry { max-width: 520px; }
}
.entry .no {
  position: absolute;
  left: -8px; top: -12px;
  background: var(--ink);
  color: #fdf6e8;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 3px;
  transform: rotate(-4deg);
}
.entry h3 { font-size: 1.35rem; margin: 0 0 2px; }
.entry p { font-size: 14px; color: var(--ink-soft); margin: 0; }
/* the fixed three-tier facts line: depth / viz / level, always in
   the same order and position on every entry */
.entry .facts {
  display: flex;
  gap: 8px 20px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal);
}
/* Entries and prints run as ONE sequence down the rail — a logbook
   is read in order, not in columns. */
.log .print { margin: 30px 18px 0; }
.log .print.tilt-r { transform: rotate(1.6deg); }
@media (min-width: 1100px) {
  .log .print {
    max-width: 520px;
    margin-left: auto;
    margin-top: -24px; /* the print overlaps its entry's lower edge */
  }
  .log .print.tilt-r { margin-left: 340px; }
}
/* pencil marginalia in the freed margin — restatements of facts the
   page already carries, in the pencil voice, rotated by hand */
.marginalia { display: none; }
@media (min-width: 1100px) {
  .marginalia {
    display: block;
    position: absolute;
    font-weight: 350;
    font-size: 14px;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
    max-width: 15ch;
  }
  .marginalia.m-1 { right: -60px; top: 96px; transform: rotate(-2deg); }
  .marginalia.m-2 { right: -48px; top: 640px; transform: rotate(1.4deg); }
}

/* ---- courses: the rate page -------------------------------------- */
/* Not another generic card: the rate sheet is TAPED IN like the
   prints — same tape grammar, a rest tilt, square corners. */
.courses .sheet {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 8px 18px;
  max-width: 640px;
  box-shadow: 0 1px 2px rgba(34, 48, 77, 0.22), 4px 10px 24px rgba(34, 48, 77, 0.18);
  transform: rotate(-0.6deg);
}
.courses .sheet::before, .courses .sheet::after {
  content: "";
  position: absolute;
  width: 70px; height: 22px;
  background: var(--tape);
  top: -10px;
  box-shadow: 0 1px 3px rgba(34, 48, 77, 0.22);
  clip-path: polygon(3% 0, 97% 4%, 100% 88%, 94% 100%, 4% 96%, 0 12%);
}
.courses .sheet::before { left: -14px; transform: rotate(-34deg); }
.courses .sheet::after { right: -14px; transform: rotate(39deg); }
.courses .mi {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
}
.courses .mi:last-child { border-bottom: 0; }
.courses dt { font-weight: 600; font-size: 16px; }
.courses dt small {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.courses dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.courses .sheet-note {
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-top: 14px;
}

/* ---- find us ------------------------------------------------------ */
.find address {
  font-style: normal;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  margin-bottom: 0.8em;
}
.find p { max-width: 56ch; }
/* the hours slip: a paperclipped note, not a third card costume */
.find .hours {
  display: inline-block;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 10px 16px 10px 34px;
  font-size: 15px;
  margin-top: 6px;
  background: var(--card);
  box-shadow: 1px 2px 6px rgba(34, 48, 77, 0.14);
}
/* the paperclip: two nested rounded hoops hooked over the top edge */
.find .hours::before {
  content: "";
  position: absolute;
  left: 12px; top: -8px;
  width: 11px; height: 30px;
  border: 2px solid #8a94a8;
  border-radius: 6px / 9px;
  clip-path: inset(0 0 22% 0);
}
.find .hours::after {
  content: "";
  position: absolute;
  left: 15px; top: -4px;
  width: 5px; height: 20px;
  border: 2px solid #8a94a8;
  border-radius: 4px / 6px;
}

/* ---- book form: log entry No. 14 --------------------------------- */
/* The conversion rejoins the fiction: the form is a fresh entry card
   with the route rail arriving at its edge. */
.book form {
  position: relative;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  max-width: 560px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px dashed rgba(34, 48, 77, 0.42);
  border-radius: 4px;
  padding: clamp(20px, 4vw, 30px);
  box-shadow: 2px 3px 12px rgba(34, 48, 77, 0.14);
}
/* "you are here": the route's terminal marker on the entry's rail */
.book form::before {
  content: "";
  position: absolute;
  left: -8px; top: 34px;
  width: 12px; height: 12px;
  border: 3px solid var(--teal);
  border-radius: 50%;
  background: var(--card);
}
/* the entry tag, in ink like the others — this one is yours */
.form-no {
  position: absolute;
  left: -10px; top: -12px;
  background: var(--ink);
  color: #fdf6e8;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 3px;
  transform: rotate(-4deg);
  margin: 0;
}
@media (min-width: 640px) {
  .book form { grid-template-columns: 1fr 1fr; }
  .book .field-wide, .book .form-actions { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: 6px; }
/* labels speak the facts-line language of the entries */
.field label {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  /* 16px floor so old-Android browsers never zoom the page on focus */
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--ink-soft);
  border-radius: 3px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 150ms var(--ease);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink); }
/* the message area is ruled like the page it belongs to */
.field textarea {
  min-height: 112px;
  resize: vertical;
  line-height: 28px;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, var(--rule) 27px 28px) local,
    #fff;
}
.book .aside-note { color: var(--ink-soft); font-size: 15px; margin: 14px 0 0; }

/* ---- fictional footer ---------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--line);
  margin-top: clamp(56px, 9vw, 104px);
  padding: 36px var(--pad-x) 44px;
  color: var(--ink-soft);
  font-size: 15px;
}
.site-foot .foot-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.site-foot p { margin: 0 0 4px; }

/* ---- print ---------------------------------------------------------- */
/* The logbook already IS paper: printing mostly means dropping the
   dark bands to bordered white and settling the tilted prints. */
@media print {
  body, .page { background: #fff; color: #000; }
  .page { box-shadow: none; border: 0; }
  .page::before, .page::after { display: none; }
  .jl-note, .jl-close { background: #fff; color: #000; border: 2px solid #000; }
  .jl-note a, .jl-close a, .jl-close h2, .jl-note strong, .jl-close strong { color: #000; }
  .jl-close .btn-jl, .btn { border: 2px solid #000; background: #fff; color: #000; box-shadow: none; }
  .print, .print.tilt-r, .courses .sheet { transform: none; box-shadow: none; border: 1px solid #000; }
  .entry, .find .hours, .book form { box-shadow: none; }
  /* backgrounds don't print: the tags flip to bordered white */
  .entry .no, .form-no { background: #fff; color: #000; border: 1px solid #000; }
  .stamp { background: #fff; }
  .marginalia { display: none; }
  .rise, .rise-2, .rise-3 { animation: none; }
  .site-head nav { display: none; } /* anchor links mean nothing on paper */
}