/* LodgeNote — shared styles */

:root {
  --ink: #2F2618;
  --ink-soft: #4A3B28;
  --ink-faded: #6E5A40;
  --rust: #8E3519;
  --link: #7E5A3B;
  --cream: #E9DCC0;
  --gold: #D4AB6C;
  --paper: #EADCB8;
  --photo-paper: #F7F1E1;
  --placeholder: #C6B794;
  --walnut: #4D3B29;
  --walnut-light: #6E5539;
  --walnut-dark: #3A2C1F;
  --rule-blue: rgba(80, 110, 140, .26);
  --margin-red: rgba(160, 62, 45, .38);
  --page-width: min(860px, calc(100% - 32px));
  --serif: 'Merriweather', Georgia, serif;
  --type: 'Special Elite', 'Courier New', monospace;
  --caps: 'IM Fell English SC', Georgia, serif;
}

* { box-sizing: border-box; }
/* pages fade into each other instead of flashing white (browsers that support it) */
@view-transition { navigation: auto; }

html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--walnut) radial-gradient(ellipse at 50% 30%, var(--walnut-light) 0, var(--walnut) 60%, var(--walnut-dark) 100%) no-repeat fixed;
  color: var(--ink);
  font-family: var(--serif);
  overflow-x: clip;
}

a { color: var(--link); }
a:hover { color: var(--rust); }

/* ---------- Header & footer (on the walnut background) ---------- */

.site-header {
  width: var(--page-width);
  margin: 0 auto;
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--cream);
  text-decoration: none;
  font-weight: 300;
  font-size: 26px;
}
.brand:hover { color: var(--cream); }
.brand img { width: 56px; height: 56px; display: block; }

.nav {
  display: flex;
  gap: 28px;
  font-family: var(--type);
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nav a { color: var(--cream); text-decoration: none; }
.nav a:hover { color: var(--gold); }
.nav a[aria-current="page"] { border-bottom: 1px solid var(--cream); }

.site-footer {
  padding: 0 16px 32px;
  text-align: center;
  font-family: var(--type);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--cream);
}
.site-footer a { color: var(--cream); }

/* ---------- The sheet of paper ---------- */

.page { width: var(--page-width); margin: 48px auto; }

.sheet { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .5)); transform: rotate(-.4deg); }
.sheet--right { transform: rotate(.35deg); }
.sheet--slight { transform: rotate(-.3deg); }

.paper {
  position: relative;
  overflow: hidden;
  background-color: var(--paper);
  box-shadow: inset 0 0 70px rgba(105, 70, 25, .42);
}

/* Notebook page: ruled lines and red margin (home, about) */
.paper--notebook {
  padding: 54px clamp(16px, 4vw, 44px) 72px 76px;
  line-height: 36px;
  font-size: 16px;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(125, 82, 32, .28) 0, rgba(125, 82, 32, 0) 3px),
    radial-gradient(circle at 74% 38%, rgba(125, 82, 32, .22) 0, rgba(125, 82, 32, 0) 4px),
    radial-gradient(circle at 41% 81%, rgba(125, 82, 32, .25) 0, rgba(125, 82, 32, 0) 3px),
    radial-gradient(circle at 88% 88%, rgba(125, 82, 32, .2) 0, rgba(125, 82, 32, 0) 5px),
    radial-gradient(ellipse at 50% 45%, rgba(250, 242, 220, .55) 0, rgba(250, 242, 220, 0) 60%),
    radial-gradient(ellipse at 100% 0, rgba(120, 80, 30, .28) 0, rgba(120, 80, 30, 0) 35%),
    radial-gradient(ellipse at 0 100%, rgba(120, 80, 30, .3) 0, rgba(120, 80, 30, 0) 40%),
    repeating-linear-gradient(to bottom, transparent 0, transparent 35px, var(--rule-blue) 35px, var(--rule-blue) 36px);
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 18px;
}
.paper--notebook::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 55px;
  width: 2px;
  background: var(--margin-red);
  pointer-events: none;
}

/* Article page: plain aged paper, folds, faded ruling at the top */
.paper--article {
  padding: clamp(48px, 7vw, 84px) clamp(20px, 7vw, 88px) 64px;
  box-shadow: inset 0 0 80px rgba(105, 70, 25, .45);
  background-image:
    radial-gradient(circle at 9% 2%, rgba(125, 82, 32, .3) 0, rgba(125, 82, 32, 0) 4px),
    radial-gradient(circle at 63% 3.5%, rgba(125, 82, 32, .24) 0, rgba(125, 82, 32, 0) 3px),
    radial-gradient(circle at 37% 1.2%, rgba(125, 82, 32, .2) 0, rgba(125, 82, 32, 0) 5px),
    radial-gradient(circle at 71% 47%, rgba(125, 82, 32, .2) 0, rgba(125, 82, 32, 0) 3px),
    radial-gradient(circle at 8% 58%, rgba(125, 82, 32, .22) 0, rgba(125, 82, 32, 0) 4px),
    radial-gradient(ellipse at 30% 0, rgba(120, 80, 30, .24) 0, rgba(120, 80, 30, 0) 18%),
    linear-gradient(to bottom, transparent 33.2%, rgba(110, 75, 30, .1) 33.3%, rgba(255, 250, 235, .35) 33.4%, transparent 33.6%),
    linear-gradient(to bottom, transparent 66.4%, rgba(110, 75, 30, .09) 66.5%, rgba(255, 250, 235, .3) 66.6%, transparent 66.8%),
    radial-gradient(circle at 14% 9%, rgba(125, 82, 32, .25) 0, rgba(125, 82, 32, 0) 3px),
    radial-gradient(circle at 81% 31%, rgba(125, 82, 32, .2) 0, rgba(125, 82, 32, 0) 4px),
    radial-gradient(circle at 23% 64%, rgba(125, 82, 32, .22) 0, rgba(125, 82, 32, 0) 3px),
    radial-gradient(circle at 92% 83%, rgba(125, 82, 32, .2) 0, rgba(125, 82, 32, 0) 5px),
    radial-gradient(ellipse at 50% 40%, rgba(252, 246, 228, .6) 0, rgba(252, 246, 228, 0) 65%),
    radial-gradient(ellipse at 100% 0, rgba(120, 80, 30, .22) 0, rgba(120, 80, 30, 0) 25%),
    radial-gradient(ellipse at 0 100%, rgba(120, 80, 30, .24) 0, rgba(120, 80, 30, 0) 30%);
}
.paper--article::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 160px;
  background-image:
    linear-gradient(90deg, transparent 55px, rgba(160, 62, 45, .3) 55px, rgba(160, 62, 45, .3) 57px, transparent 57px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(80, 110, 140, .2) 35px, rgba(80, 110, 140, .2) 36px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, transparent 100%);
  pointer-events: none;
}

/* Small screens: no red margin, the text takes the full width */
@media (max-width: 600px) {
  .paper--notebook { padding-left: 20px; padding-right: 20px; }
  .paper--notebook::before { display: none; }
  .paper--article::before {
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(80, 110, 140, .2) 35px, rgba(80, 110, 140, .2) 36px);
  }
}

.coffee-ring {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 6px solid rgba(120, 74, 28, .15);
  box-shadow: inset 0 0 8px rgba(120, 74, 28, .15), 0 0 4px rgba(120, 74, 28, .1);
  pointer-events: none;
}
.coffee-ring--top-right { top: 46px; right: -38px; }
.coffee-ring--bottom-left { bottom: 60px; left: -44px; width: 160px; height: 160px; border-color: rgba(120, 74, 28, .13); }

/* ---------- Open notebook (home): the page keeps the article width,
   the leather cover lies open to its left and runs off the window edge ---------- */

.notebook {
  --leather:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022 .05' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0 .6 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23v)'/%3E%3C/svg%3E") 0 0 / 480px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022 .05' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .6 0 0 0 0 .4 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0 .18 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23h)'/%3E%3C/svg%3E") 1px 1px / 480px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.8 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 240px,
    radial-gradient(ellipse at 20% 10%, rgba(120, 78, 44, .28) 0, rgba(120, 78, 44, 0) 50%),
    radial-gradient(ellipse at 80% 95%, rgba(0, 0, 0, .45) 0, rgba(0, 0, 0, 0) 60%),
    #2E1D11;
  position: relative;
  margin: 0 -12px 0 -6px;
  padding: 12px 12px 12px 6px;
  background: var(--leather);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 26px rgba(0, 0, 0, .6);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6));
  transform: rotate(-.3deg);
}
/* Saddle stitching around the edge */
.notebook::before {
  content: "";
  position: absolute;
  inset: 5px 5px 5px 0;
  border: 1px dashed rgba(210, 180, 140, .3);
  border-left: 0;
  pointer-events: none;
}
/* Elastic band on the back cover */
.notebook::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 2px;
  width: 7px;
  background: linear-gradient(90deg, #0E0A07, #2A2018 45%, #0E0A07);
  box-shadow: -1px 0 2px rgba(0, 0, 0, .5);
}
.notebook > * { position: relative; z-index: 1; }

/* Front cover, lying open on the left */
.notebook-cover {
  position: absolute;
  top: 0; bottom: 0; right: 100%;
  width: calc(100% - 18px);
  background: var(--leather);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 2px 0 6px rgba(0, 0, 0, .55), inset 0 0 40px rgba(0, 0, 0, .55);
}
.notebook-cover::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(210, 180, 140, .32);
}
/* Shadow of the spine */
.notebook-cover::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 34px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
}

/* Outside of the cover, with the gold-stamped mark: only seen while the notebook is closed */
.notebook-cover { transform-origin: 100% 50%; transform-style: preserve-3d; backface-visibility: hidden; }
.notebook-cover::before, .notebook-cover::after { backface-visibility: hidden; }
.cover-front {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--leather);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .55);
  transform: rotateY(180deg) translateZ(1px);
  backface-visibility: hidden;
}
.cover-front::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(210, 180, 140, .32);
}
.cover-logo {
  width: min(34%, 220px);
  height: auto;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7)) drop-shadow(0 -1px 0 rgba(255, 230, 170, .15));
}
/* Phones: the notebook is much taller than the screen, so the mark sits near the top to be seen */
@media (max-width: 600px) {
  .cover-front { align-items: flex-start; padding-top: 110px; }
  .cover-logo { width: 46%; }
}

/* Home: the notebook opens when the site is first visited in a session (class set in index.html) */
.nb-intro .notebook-cover {
  z-index: 3;
  animation: cover-open 2s cubic-bezier(.55, 0, .25, 1) both;
}
@keyframes cover-open {
  0%, 18% { transform: perspective(2600px) rotateY(180deg); }
  100% { transform: perspective(2600px) rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nb-intro .notebook-cover { animation: none; }
}

/* Opening a note from home: the home page lies over the note, then turns onto the left (pageturn.js) */
.notebook > .page-leaf {
  position: absolute;
  top: 12px; right: 12px; bottom: 12px; left: 6px; /* the box of the page, inside the notebook's padding */
  z-index: 4;
  transform-style: preserve-3d;
  pointer-events: none;
  animation: leaf-turn 1s cubic-bezier(.45, .05, .3, 1) .15s both;
}
@keyframes leaf-turn {
  from { transform: perspective(2600px) rotateY(0deg); }
  to { transform: perspective(2600px) rotateY(-180deg); }
}
/* a long note's notebook is too tall to keep its drop shadow while a page turns in 3D */
.page-note .notebook:has(> .page-leaf) { filter: none; }
.page-leaf > .paper { position: absolute; inset: 0; margin: 0; backface-visibility: hidden; }
.page-leaf-front { background-attachment: local; }
/* the back of the leaf is a verso: no margin line, the spine's shadow on its right */
.page-leaf-back { transform: rotateY(180deg); }
.page-leaf-back::before { display: none; }
.page-leaf > .page-leaf-back::after { left: auto; right: 0; background: linear-gradient(270deg, rgba(70, 42, 12, .35), rgba(70, 42, 12, 0)); }

/* The page lies in the gutter of the spine */
.notebook .paper { box-shadow: inset 0 0 70px rgba(105, 70, 25, .42), 0 1px 3px rgba(0, 0, 0, .5); }
.notebook .paper::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 30px;
  background: linear-gradient(90deg, rgba(70, 42, 12, .35), rgba(70, 42, 12, 0));
  pointer-events: none;
}

/* No tilt on articles: on a long page the rotation would shift the top sideways */
.page-note .notebook { transform: none; }

/* Article: the back of the previous page lies on the left, framed by the leather, with the Contents */
.notebook-verso {
  position: absolute;
  top: 0; bottom: 0; right: 100%;
  width: calc(100% - 6px);
  background: var(--leather);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 26px rgba(0, 0, 0, .6);
}
.notebook-verso::before {
  content: "";
  position: absolute;
  inset: 5px 0 5px 5px;
  border: 1px dashed rgba(210, 180, 140, .3);
  border-right: 0;
  pointer-events: none;
}
.verso-page {
  position: absolute;
  inset: 12px 0 12px 12px;
  background-color: #E2D2AC;
  background-image:
    radial-gradient(circle at 78% 6%, rgba(125, 82, 32, .25) 0, rgba(125, 82, 32, 0) 4px),
    radial-gradient(circle at 90% 52%, rgba(125, 82, 32, .2) 0, rgba(125, 82, 32, 0) 3px),
    linear-gradient(90deg, rgba(70, 42, 12, 0) calc(100% - 40px), rgba(70, 42, 12, .38)),
    radial-gradient(ellipse at 0 0, rgba(120, 80, 30, .26) 0, rgba(120, 80, 30, 0) 30%);
  box-shadow: inset 0 0 70px rgba(105, 70, 25, .45), 0 1px 3px rgba(0, 0, 0, .5);
}
/* Stays in view, vertically centred in the window, while the note scrolls */
.verso-toc {
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 220px;
  margin: 0 96px 0 auto;
}
.verso-toc .toc { position: relative; isolation: isolate; margin: 0; max-width: none; }
/* A few foxing spots under the Contents text */
.verso-toc .toc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 14% 22%, rgba(125, 82, 32, .45) 0, rgba(125, 82, 32, 0) 4px),
    radial-gradient(circle at 18% 27%, rgba(125, 82, 32, .32) 0, rgba(125, 82, 32, 0) 2px),
    radial-gradient(circle at 72% 40%, rgba(125, 82, 32, .4) 0, rgba(125, 82, 32, 0) 3.5px),
    radial-gradient(circle at 44% 63%, rgba(125, 82, 32, .34) 0, rgba(125, 82, 32, 0) 3px),
    radial-gradient(circle at 86% 78%, rgba(125, 82, 32, .42) 0, rgba(125, 82, 32, 0) 4.5px),
    radial-gradient(circle at 30% 90%, rgba(125, 82, 32, .32) 0, rgba(125, 82, 32, 0) 3px);
  pointer-events: none;
}
.verso-toc .toc-title span { font-size: 18px; }
.verso-toc .toc ol { font-size: 14px; }
.verso-toc .toc a { padding: 5px 0; }
.verso-toc .toc a .num { flex-basis: 26px; }

/* The verso only has room for the Contents on wide screens;
   there the note moves to the right so the Contents keep ~90px from the window edge */
@media (max-width: 1419px) { .verso-toc { display: none; } }
@media (min-width: 1420px) {
  .notebook--has-toc .paper .toc { display: none; }
  .page-note .site-header, .page-note .page,
  .page-home .site-header, .page-home .page { position: relative; left: max(80px, 840px - 50vw); }
}

/* Home and notes, wide screens: the lodge above its river, right of the notebook.
   The picture is 600×740; its lodge sits level with the top of the notebook (130px down)
   and stays there while the page scrolls */
@media (min-width: 1500px) {
  .page-home::before, .page-note::before {
    content: "";
    position: fixed;
    right: 0;
    left: calc(50% + 390px + max(80px, 840px - 50vw));
    top: calc(130px - (50vw - 390px - max(80px, 840px - 50vw)) / 6);
    aspect-ratio: 600 / 740;
    background: url("../img/lodge-scene.svg") no-repeat 50% 0 / 100% auto;
    pointer-events: none;
  }
  .page-home .site-header, .page-home .page, .page-home .site-footer,
  .page-note .site-header, .page-note .page, .page-note .site-footer { position: relative; z-index: 1; }
}

/* Laptops and tablets: no room beside the notebook, so the lodge becomes a panorama
   in the header, between the logo and the menu. From 1500px the home and the notes
   show the side picture instead; the about page, whose cover fills that side, keeps the panorama */
@media (min-width: 760px) {
  .site-header::after {
    content: "";
    order: 1;
    flex: 1 1 0;
    align-self: stretch;
    min-width: 180px;
    max-width: 480px;
    height: 118px;
    margin: -24px auto -38px; /* overflows the header row without pushing the notebook down */
    background: url("../img/lodge-banner.svg") no-repeat 50% 50% / contain;
    pointer-events: none;
  }
  .site-header .nav { order: 2; }
}
@media (min-width: 1500px) {
  .page-home .site-header::after, .page-note .site-header::after { content: none; }
}

/* Mirrored notebook (about): cover lying open on the right */
.notebook--right { margin: 0 -6px 0 -12px; padding: 12px 6px 12px 12px; transform: rotate(.3deg); }
.notebook--right::before { inset: 5px 0 5px 5px; border-left: 1px dashed rgba(210, 180, 140, .3); border-right: 0; }
.notebook--right::after { right: auto; left: 2px; box-shadow: 1px 0 2px rgba(0, 0, 0, .5); }
.notebook--right .notebook-cover { right: auto; left: 100%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), -2px 0 6px rgba(0, 0, 0, .55), inset 0 0 40px rgba(0, 0, 0, .55); }
.notebook--right .notebook-cover::after { right: auto; left: 0; background: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)); }
.notebook--right .paper::after { left: auto; right: 0; background: linear-gradient(270deg, rgba(70, 42, 12, .35), rgba(70, 42, 12, 0)); }

/* ---------- Notebook pages (home, about) ---------- */

.kicker {
  margin: 0;
  font-family: var(--type);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--ink-faded);
  text-transform: uppercase;
}

.notebook-title {
  margin: 0;
  line-height: 72px;
  font-weight: 300;
  font-style: italic;
  font-size: 36px;
}

.intro { margin-top: 0; }
.intro p { margin: 0; }
.search { margin-top: 36px; }
.search label {
  display: block;
  font-family: var(--type);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
/* The search field: a label pasted on the page, with a magnifier, so it reads apart from the typed text */
.search input {
  width: 100%;
  max-width: 440px;
  height: 36px;
  margin: 0;
  padding: 0 12px 0 40px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 3px;
  background: rgba(250, 243, 225, .75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E3519' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E") no-repeat 13px 50% / 17px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 1px 2px 4px rgba(70, 42, 12, .22);
  transform: rotate(-.4deg);
  font-family: var(--type);
  font-size: 16px;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.search input::placeholder { color: #7A6548; }
/* phones: 16px keeps iOS from zooming in on focus, so the room comes from the padding */
@media (max-width: 600px) { .search input { padding: 0 6px 0 32px; background-position: 9px 50%; background-size: 15px; } }
.search input:focus { outline: none; border-color: var(--rust); box-shadow: 0 0 0 3px rgba(142, 53, 25, .15), 1px 2px 4px rgba(70, 42, 12, .22); }

.notes-list { margin: 36px 0 0; padding: 0; list-style: none; }
.notes-list li { display: flex; flex-wrap: wrap; column-gap: 18px; }
.notes-list li[hidden] { display: none; }
/* dates in red ink, titles in the book's serif: the list stands apart from the typed introduction */
.notes-list time { flex: 0 0 84px; font-family: var(--type); font-size: 14px; color: var(--rust); }
.notes-list a {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
}
.notes-list a:hover { color: var(--rust); text-decoration: underline dotted; text-underline-offset: 5px; }

.no-results { margin: 0; font-family: var(--type); color: var(--ink-faded); }

/* Phones: search and list of notes first, the introduction after them */
@media (max-width: 600px) {
  .page-home .paper--notebook, .page-leaf-front { display: flex; flex-direction: column; }
  .page-home .intro, .page-leaf-front .intro { order: 1; margin-top: 36px; }
  .page-home .signoff, .page-leaf-front .signoff { order: 2; }
}

.signoff { margin: 36px 0 0; font-style: italic; font-weight: 300; font-size: 15px; color: var(--ink-faded); }

.typed p { margin: 0 0 36px; font-family: var(--type); font-size: 16px; line-height: 36px; }
.typed a { color: var(--ink); text-decoration: underline dotted; text-underline-offset: 5px; }
.typed a:hover { color: var(--rust); }

.typed-heading {
  margin: 0;
  line-height: 36px;
  font-family: var(--type);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--ink-faded);
}

/* ---------- Note (article) ---------- */

.note-header { text-align: center; position: relative; }
.note-title { margin: 20px 0 0; font-weight: 300; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.2; }
.note-dek {
  margin: 18px auto 0;
  max-width: 560px;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
}
.note-byline { margin-top: 22px; font-family: var(--type); font-size: 14px; color: var(--ink-soft); }

.photo { margin: 44px 0 0; }
/* the opening photo keeps room below its caption, whatever follows it (margins collapse with the Contents) */
.paper > .photo { margin-bottom: 52px; }
.photo-print {
  background: var(--photo-paper);
  padding: 10px 10px 12px;
  box-shadow: 0 2px 8px rgba(60, 40, 15, .35);
  transform: rotate(-.5deg);
}
.photo-print img { display: block; width: 100%; height: auto; }
.paper .photo-print > img { cursor: zoom-in; }
.photo-print iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* YouTube thumbnail, swapped for the player on click (assets/js/video.js) */
.video { position: relative; display: block; }
.paper .video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; cursor: pointer; }
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  padding: 4px 14px;
  border: 2px solid var(--cream);
  background: rgba(47, 38, 24, .72);
  color: var(--cream);
  font-family: var(--type);
  font-size: 15px;
  letter-spacing: .16em;
}
.video:hover .video-play { background: var(--rust); }

/* Lightbox (assets/js/lightbox.js) */
.lightbox-open, .lightbox-open body { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px;
  background: rgba(26, 18, 11, .92);
}
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; max-width: 100%; text-align: center; }
.lightbox-print {
  display: inline-block;
  background: var(--photo-paper);
  padding: 10px 10px 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .6);
}
.lightbox-print img { display: block; max-width: min(1000px, calc(100vw - 52px)); max-height: calc(100vh - 170px); width: auto; height: auto; }
.lightbox-caption { margin-top: 14px; font-family: var(--type); font-size: 14px; color: var(--cream); }
.lightbox-btn {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(233, 220, 192, .5);
  border-radius: 0;
  background: rgba(47, 38, 24, .6);
  color: var(--cream);
  font-family: var(--type);
  font-size: 22px;
  cursor: pointer;
}
.lightbox-btn:hover { background: var(--rust); }
.lightbox-close { top: 12px; right: 12px; }
.lightbox-prev { left: 12px; top: 50%; margin-top: -22px; }
.lightbox-next { right: 12px; top: 50%; margin-top: -22px; }
@media (max-width: 600px) {
  .lightbox-prev, .lightbox-next { top: auto; bottom: 12px; margin-top: 0; }
}
.prose .photo { margin: 36px 0; }
.photo--small { max-width: 300px; margin-left: auto; margin-right: auto; }
.photo-print--left { padding: 8px 8px 10px; transform: rotate(-1deg); }
.photo-print--right { padding: 8px 8px 10px; transform: rotate(.8deg); }
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--placeholder);
  font-family: var(--type);
  font-size: 14px;
  letter-spacing: .16em;
  color: #3E3020;
}
.photo figcaption, .photo-pair figcaption { margin-top: 14px; font-family: var(--type); font-size: 13px; color: var(--ink-soft); }
.photo-pair { margin: 36px auto; max-width: 720px; }
.photo-pair .photos { display: flex; flex-wrap: wrap; gap: 20px; }
.photo-pair .photo-print { flex: 1 1 260px; min-width: 0; }
.photo-pair--three .photo-print { flex-basis: 170px; }

.toc { margin: 52px auto 0; max-width: 520px; }
.toc-title { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.toc-title::before, .toc-title::after { content: ""; flex: 1; border-top: 1px solid var(--ink-faded); }
.toc-title span { font-family: var(--caps); font-size: 22px; letter-spacing: .08em; }
.toc ol { margin: 0; padding: 0; list-style: none; font-size: 16px; font-weight: 300; }
.toc a { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--rust); }
.toc a .num { flex: 0 0 30px; font-family: var(--caps); }
.toc a::after { content: ""; flex: 1; border-bottom: 1px dotted var(--ink-faded); }

.prose { margin: 0 auto; max-width: 640px; }
.prose p { margin: 0 0 1.3em; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.8; font-weight: 300; }
.prose p a { text-decoration: none; border-bottom: 1px dotted var(--link); }
.prose p a:hover { border-bottom-style: solid; }
.prose h2 {
  margin: 56px 0 22px;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 27px);
  line-height: 1.3;
  scroll-margin-top: 24px;
}
.prose h2:first-child { margin-top: 64px; }
.prose h2 .num { font-family: var(--caps); color: var(--rust); }
.prose h2 .sub {
  display: block;
  margin-top: 6px;
  font-family: var(--type);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--ink-faded);
}
.prose h3 { margin: 32px 0 14px; font-weight: 400; font-style: italic; font-size: 20px; }
.prose ul { margin: 0; padding-left: 20px; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.9; font-weight: 300; }

.dropcap {
  float: left;
  font-family: var(--caps);
  font-size: 86px;
  line-height: .8;
  margin: 8px 12px 0 0;
  color: var(--rust);
}

.pullquote { margin: 40px 0; text-align: center; }
.pullquote::before, .pullquote::after {
  content: "· · ·";
  display: block;
  font-family: var(--caps);
  font-size: 22px;
  letter-spacing: .5em;
  color: var(--rust);
}
.pullquote p { margin: 14px 0; font-style: italic; font-size: clamp(19px, 2vw, 23px); line-height: 1.55; }

.glance {
  margin: 40px 0;
  padding: 14px 24px 22px;
  background: #F6EFDC;
  background-image:
    linear-gradient(to bottom, transparent 46px, rgba(160, 62, 45, .45) 46px, rgba(160, 62, 45, .45) 48px, transparent 48px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(80, 110, 140, .22) 27px, rgba(80, 110, 140, .22) 28px);
  box-shadow: 0 2px 8px rgba(60, 40, 15, .3);
  transform: rotate(.6deg);
  font-family: var(--type);
}
.glance-head { display: flex; justify-content: space-between; align-items: center; height: 34px; font-size: 13px; letter-spacing: .2em; }
.glance-cols { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 16px; font-size: 15px; line-height: 28px; }
.glance-cols > div { flex: 1 1 220px; min-width: 0; }
.glance ul { margin: 0; padding: 0; list-style: none; }
.glance .good { color: #4E5A2A; }
.glance .bad { color: var(--rust); }
.stamp {
  margin-top: 18px;
  display: inline-block;
  transform: rotate(-4deg);
  border: 2px solid var(--rust);
  color: var(--rust);
  padding: 2px 12px;
  font-size: 15px;
  letter-spacing: .14em;
}

.prose p.disclosure {
  padding: 14px 18px;
  border: 1px dashed var(--ink-faded);
  font-family: var(--type);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
}

.back { text-align: right; font-family: var(--type); font-size: 13px; }
.back a, .pager a { color: var(--ink-faded); text-decoration: none; }
.back a:hover, .pager a:hover { color: var(--rust); }

.end-mark { margin: 56px 0 0; text-align: center; font-family: var(--type); font-size: 13px; letter-spacing: .3em; color: var(--ink-faded); }
.pager { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--type); font-size: 14px; }

/* About, on screens wide enough to show some of the back cover: the notebook runs past
   the bottom of the window (cut by its edge, like the cover on the home page), and the
   footer is stamped in gold on the visible part of the back cover */
@media (min-width: 1200px) {
  .page-about { position: relative; display: flex; flex-direction: column; overflow-y: clip; }
  .page-about .page { flex: 1; display: flex; flex-direction: column; margin-bottom: -80px; }
  .page-about .notebook { flex: 1; display: flex; flex-direction: column; }
  .page-about .notebook > .paper { flex: 1; padding-bottom: 140px; }
  .page-about .site-footer {
    position: absolute;
    z-index: 3;
    bottom: 34px;
    left: calc(50% + 436px);   /* the back cover's left edge: half the page + its leather rim */
    right: 0;
    padding: 0 16px;
    font-size: 12px;
    letter-spacing: .22em;
    background: linear-gradient(135deg, #F6E0A6, #D4AB6C 45%, #B07E36 70%, #E8C47C);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7));
  }
}