:root {
  --paper: #e9e7e0;
  --grid-line: #6f78c8;
  --page: 100vh;            /* one notebook page = one screen */
  --fold-1: 90vh;           /* first fold, near the bottom of page 1 */
  --fold-2: 190vh;          /* second fold, near the bottom of page 2 */
  --fold-3: 290vh;          /* third fold, near the bottom of page 3 */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
}

html {
  overflow-x: hidden;
}

body {
  background: var(--paper);
  color: #1f1f1f;
  font-family: "Special Elite", "Courier New", Courier, monospace;
  font-weight: 400;   /* one typewriter for the whole page — never bold */
}

/* the graph-paper region: three notebook pages tall, with a fold near the bottom
   of each. Add more pages by bumping the height and adding folds. */
.notebook {
  position: relative;
  height: calc(3 * var(--page));
}

.paper-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Mobile-only flat grid layer (activated in html.pan-mode below). On the pan
   canvas it replaces the SVG's filtered grid, which iOS can't paint at the
   1440×2700 size. Layered right above the SVG paper but below the
   folds/stain/doodles, so its z-order matches the SVG grid it stands in for.
   display:none on desktop — there the SVG draws the real (wobbled) grid. */
.grid-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: none;
}

/* paper folds — section dividers drawn across the graph paper */
.fold {
  position: absolute;
  left: 0;
  width: 100%;
  height: 34px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.32) 30%,
    rgba(255, 255, 255, 0) 46%,
    rgba(0, 0, 0, 0) 54%,
    rgba(0, 0, 0, 0.24) 63%,
    rgba(0, 0, 0, 0.07) 78%,
    rgba(0, 0, 0, 0) 100%
  );
}
.fold-1 { top: var(--fold-1); }
.fold-2 { top: var(--fold-2); }
.fold-3 { top: var(--fold-3); }

.content {
  position: relative;   /* origin for the JS-placed side sticker */
  z-index: 1;
  height: var(--page);  /* page 1 — keeps the writing and props on the first page */
}

/* coffee-cup ring soaked into the bottom-right of the page. Sits on the paper
   layer (below the text via z-index) and multiplies into it so the grid shows
   through, like a real stain — and it can never cover the writing. */
.coffee-stain {
  position: absolute;
  right: 64px;
  /* lower-right of page 1: bottom edge sits 40px above the first fold,
     anchored to the fold so it stays put as pages are added below */
  top: calc(var(--fold-1) - 40px);
  transform: translateY(-100%);
  width: min(360px, 60vw);   /* coffee-mug ring ≈ 8cm at the same scale */
  height: auto;
  z-index: 0;
  opacity: 0.8;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}

/* little minifig propped up on the left, slightly tilted. Bottom is anchored as a
   percentage so it stays above the fold line (at 90% of the page) at any height. */
.minifig {
  position: absolute;
  left: 24px;
  bottom: 15%;
  height: 216px;        /* bumped up for visual balance — a stocky minifig reads
                           smaller than the lankier B1 at equal real-world height */
  width: auto;
  transform: rotate(-6deg);
  pointer-events: none;
  user-select: none;
}

/* battle droid — moved off page 1 (where it crowded the minifig) to the right
   side of page 2. It now lives inside .page-two, so top is page-2-relative;
   right-anchored like the passport to keep a steady gap from it at any width. */
.droid {
  position: absolute;
  top: 24vh;
  right: 380px;
  height: 190px;
  width: auto;
  transform: rotate(-15deg);
  pointer-events: none;
  user-select: none;
}

.site-header {
  padding: 24px 28px;
}

.logo {
  display: inline-block;
  line-height: 0;
}

.logo img {
  display: block;
  width: 240px;
  max-width: 62vw;
  height: auto;
  filter: url(#penify);   /* roughen the clean strokes into pen-on-paper */
}

/* hand-written welcome note under the logo on page 1, set in Caveat (a
   handwriting font) so it reads like a greeting jotted on the page. width:
   max-content so the block hugs its longest line — the side sticker measures
   this block's right edge to decide whether to float up beside it (index.html). */
.welcome {
  width: max-content;
  max-width: 88vw;
  margin: 22px 28px 80px;
  font-family: "Caveat", "Special Elite", cursive;
  font-size: 46px;
  line-height: 1.15;
  color: #1f1f1f;
}

/* recent-photos sticker: slightly off-kilter, like a sticker slapped onto the
   side of a notebook page. By default it sits in normal flow AFTER the writing,
   pushed to the right margin, so it can never cover any text. */
.sticker-link {
  display: block;
  width: max-content;
  margin: 0 28px 80px auto;   /* margin-left:auto pushes it to the right margin */
  line-height: 0;
  transform: rotate(4deg);
}

.sticker-link:focus-visible {
  outline: 2px solid var(--grid-line);
  outline-offset: 6px;
}

.sticker {
  display: block;
  width: min(480px, 56vw);
  height: auto;
}

/* ---- Notebook text blocks (casual notes + roadtrip journal) ----
   Special Elite, with every vertical measure a multiple of the paper grid's 20px cell
   so each line of writing lands on a grid line. No drawn rules — the text just
   rides the existing grid. The align script in index.html nudges each block's
   first baseline onto a line with a small translateY; the 40px line rhythm keeps
   every line after it aligned. */
.notes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px 60px;
  padding: 0 28px 80px;
}

.note {
  width: max-content;
  max-width: 92vw;
}

.note-title {
  margin: 0 0 20px;          /* one empty grid row under the heading */
  font-size: 27px;           /* same size as every line — one typewriter, no size hierarchy */
  font-weight: 400;          /* override the browser's default bold <h2> */
  line-height: 40px;         /* 2 grid cells */
  color: #1f1f1f;
}

.ruled {
  margin: 0;
  padding: 0 0 0 16px;       /* slight indent under the heading */
  list-style: none;
}

.ruled li {
  margin: 0;
  font-size: 27px;
  line-height: 40px;         /* every item is one 2-cell grid row */
  color: #1f1f1f;
}

.ruled li::before {
  content: "–";              /* typed list dash */
  margin-right: 0.4em;
}

/* ---- Page 2: recent travel ---- */
.page-two {
  position: absolute;
  top: var(--page);
  left: 0;
  width: 100%;
  height: var(--page);
  z-index: 1;
}

.page-two .notes {
  padding-top: 40px;
}

/* passport set down on the right side of page 2, slightly off-kilter */
.passport {
  position: absolute;
  right: -160px;        /* ~40% hangs off the right edge (clipped by overflow-x) */
  top: 60px;
  height: 570px;        /* US passport ≈ 12.5cm — about 3× a minifig, off the B1 scale */
  width: auto;
  transform: rotate(4deg);
  pointer-events: none;
  user-select: none;
}

/* sardine-tin label stuck onto the bottom-left of page 2, slightly tilted.
   Bottom sits a touch above the page-2 fold (fold-2 = 190vh) so it stays clear
   of the fold line, mirroring the coffee stain's clearance above fold-1. */
.sardines {
  position: absolute;
  left: 28px;
  bottom: calc(10vh + 56px);   /* +56 (not 40) so the −5° tilt still clears the fold */
  width: min(340px, 62vw);
  height: auto;
  transform: rotate(-5deg);
  user-select: none;
}

/* off-road "trophy" sticker on the third page, lower-left open space. Sized to
   about the sardine sticker. Bottom is anchored a fixed offset above fold-3 so
   it always clears the fold; left is narrow so it stays clear of the page-3
   doodles (bear/church are further right) at any viewport height. z-index 0 +
   placed after the doodles in the DOM, so it sits on the paper above them. */
.trophy {
  position: absolute;
  top: calc(var(--fold-3) - 360px);
  left: 110px;
  width: 300px;
  height: auto;
  z-index: 0;
  transform: rotate(-4deg);
  user-select: none;
}

/* transparent wrapper that turns a sticker img into a link without affecting
   its layout (display:contents) — clicks on the img still follow the href */
.sticker-wrap { display: contents; }

/* LEGO "SPAM" sticker — bottom-right of page 3, mirroring the trophy's lower-left
   spot (links to lego.html). Anchored above fold-3 like the trophy so it clears
   the fold; keyed off --fold-3 so it lands identically in pan-mode without a
   separate override. Cursor is owned by cursors.css (the .sticker-wrap hand). */
.spamlego {
  position: absolute;
  top: calc(var(--fold-3) - 280px);
  right: 110px;
  width: 215px;
  height: auto;
  z-index: 1;
  transform: rotate(4deg);
  user-select: none;
}

/* ---- Hand-drawn doodles ----
   Split out of one sketch artboard and scattered through the margins and the
   open space across the three pages. They sit on the paper at z-index 0 — below
   the writing layer (.content / .page-two are z-index 1) — so they can never
   cover any text; each is dropped into a measured gap, clear of the folds.
   Top is in vh to track the page/fold system, except the page-1 corner doodle
   which is px-anchored to stay beside the top band of writing at any height. */
.doodle {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.d-cactus  { top: 16px;  right: 44px; width: 128px; transform: rotate(-6deg); } /* p1 top-right */
.d-tree    { top: 124vh; left: 44px;  width: 118px; transform: rotate(-3deg); } /* p2 left edge */
.d-fuchsia { top: 103vh; left: 600px; width: 112px; transform: rotate(4deg); }  /* p2 center-top */
.d-flower  { top: 203vh; left: 80px;  width: 150px; transform: rotate(5deg); }  /* p3 upper-left */
.d-church  { top: 214vh; right: 90px; width: 230px; transform: rotate(3deg); }  /* p3 mid-right */
.d-bear    { top: 226vh; left: 560px; width: 170px; transform: rotate(-4deg); } /* p3 lower-center */

/* ============================================================
   Mobile — "pan canvas"
   On a phone we DON'T reflow to a column. A head script in index.html
   detects the phone, widens the layout viewport to the laptop width
   (width=1440) so every vw-based size renders exactly as on desktop and
   the page stays 1:1, then tags <html class="pan-mode">. The reader
   drags around the full-size notebook with a finger — the minifig,
   droid and passport sit at the same life-size as on a laptop.

   The wide viewport handles the horizontal axis for free; the one thing
   it can't fix is vh (on a phone 100vh is the phone's own height, not
   900px). So below we pin the page/fold system — and the few props
   positioned in vh — to fixed px, reproducing the 1440×900 laptop spread
   on every phone. Everything else inherits the untouched desktop rules.
   Class-gated, not width-gated: once the viewport is 1440 a max-width
   media query would stop matching.
   ============================================================ */
html.pan-mode {
  overflow-x: visible;           /* let the finger pan horizontally across the 1440 canvas */

  /* the vh page/fold system, pinned to a 900px laptop page so every phone
     reproduces the 1440×900 spread (the wide viewport can't set vh for us) */
  --page: 900px;
  --fold-1: 810px;               /* 0.9 × page */
  --fold-2: 1710px;              /* 1.9 × page */
  --fold-3: 2610px;              /* 2.9 × page */
}

/* The 1440×2700 pan canvas is too big for the SVG paper filters on phones: iOS
   skips the oversized filter regions (so the wobbled grid never paints) and
   repainting them during a finger-pan janks hard (foreground elements appear to
   drift). So on the pan canvas we drop the three filtered layers and draw a
   crisp, cheap CSS grid instead — flat, but always-rendering and smooth. */
html.pan-mode .tex-mottle,
html.pan-mode .grid-layer,
html.pan-mode .tex-grain { display: none; }

html.pan-mode .grid-fallback {
  display: block;
  /* var(--grid-line) #6f78c8 at the SVG grid's 0.55 stroke-opacity, on the
     same 20px cell — vertical lines (to right) + horizontal lines (to bottom) */
  background-image:
    repeating-linear-gradient(to right,
      rgba(111, 120, 200, 0.55) 0, rgba(111, 120, 200, 0.55) 1px,
      transparent 1px, transparent 20px),
    repeating-linear-gradient(to bottom,
      rgba(111, 120, 200, 0.55) 0, rgba(111, 120, 200, 0.55) 1px,
      transparent 1px, transparent 20px);
}

/* clip the passport's overhang at the page edge, exactly as the desktop's
   html{overflow-x:hidden} does. overflow-x:clip (not hidden) leaves overflow-y
   visible, so the document still pans/scrolls freely instead of nesting a
   scroll container inside the canvas. */
html.pan-mode .notebook { overflow-x: clip; }

/* the few props whose top/bottom were in raw vh, converted to the same 900px
   page (everything else already keys off the --page / --fold vars above) */
html.pan-mode .droid     { top: 216px; }                /* was 24vh       */
html.pan-mode .sardines  { bottom: calc(90px + 56px); } /* was 10vh + 56px */
html.pan-mode .d-tree    { top: 1116px; }               /* was 124vh      */
html.pan-mode .d-fuchsia { top: 927px; }                /* was 103vh      */
html.pan-mode .d-flower  { top: 1827px; }               /* was 203vh      */
html.pan-mode .d-church  { top: 1926px; }               /* was 214vh      */
html.pan-mode .d-bear    { top: 2034px; }               /* was 226vh      */