/* Self-hosted typefaces.
   Frank Ruhl Libre is a 1908 Hebrew book serif; it carries the whole tone of
   this design, so it is not something to leave to a fallback.

   These were loaded from Google Fonts until Cloudflare's Fonts feature was
   found rewriting the page: it strips the <link> tags and injects an inline
   <style> block of @font-face rules. A strict CSP blocks that block, and the
   site silently fell back to Times New Roman. Serving the files ourselves
   removes the rewrite, the third party that saw every visitor's address, and
   two extra connections before any text can render.

   Variable fonts on the wght axis — one file per subset covers 400 to 600. */

@font-face {
  font-family: 'Frank Ruhl Libre';
  font-style: normal;
  font-weight: 400 600;
  src: url('/fonts/frank-ruhl-libre-hebrew.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}

@font-face {
  font-family: 'Frank Ruhl Libre';
  font-style: normal;
  font-weight: 400 600;
  src: url('/fonts/frank-ruhl-libre-latin.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Frank Ruhl Libre';
  font-style: normal;
  font-weight: 400 600;
  src: url('/fonts/frank-ruhl-libre-latin-ext.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400 600;
  src: url('/fonts/assistant-hebrew.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}

@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400 600;
  src: url('/fonts/assistant-latin.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400 600;
  src: url('/fonts/assistant-latin-ext.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================================
   tomersade.net
   ----------------------------------------------------------------------------
   Direction: a room at dusk with one candle lit. The palette is blue-leaning
   night rather than black, and warm amber rather than orange, because that is
   what candlelight does to a dark room.

   Type is Frank Ruhl Libre over Assistant. Frank-Rühl is the 1908 face Hebrew
   literature is set in — it carries memory in a way the Rubik/Heebo pairing
   every Hebrew site reaches for does not.

   The signature element is the year chart: 255 candles across 2006-2018, drawn
   as flames whose height is that year's count. The shape of that distribution —
   a surge in 2008, then a long thinning — is the truest thing about this site,
   so it is the first thing the page says. The mark is the subject, not a bar
   chart wearing a costume.
   ========================================================================= */

:root {
  --night:     #101218;
  --raised:    #171a22;
  --raised-2:  #1c2029;
  --line:      #262b36;
  --line-soft: #1e222b;

  --flame:     #ffc06a;
  --flame-hi:  #fff0cf;
  --ember:     #c9763f;

  --paper:     #e6e1d6;
  --body:      #d6d0c4;
  --muted:     #aeaaa0;   /* 7.0:1 on every surface — AAA */
  --muted-2:   #8d8679;   /* 4.5:1 — AA for small text; every use of it is small */

  --serif: "Frank Ruhl Libre", "Times New Roman", serif;
  --sans:  "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --measure: 62rem;
  --gap: clamp(1rem, 2.5vw, 1.75rem);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font: 400 17px/1.8 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faint warmth from above, as if a candle were just off-screen */
body::before {
  content: "";
  position: fixed; inset: 0 0 auto 0; height: 60vh;
  background: radial-gradient(80% 100% at 50% 0%, rgba(255, 176, 90, .055), transparent 70%);
  pointer-events: none; z-index: 0;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2rem); }

a { color: var(--flame); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--flame-hi); }
:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { position: static; display: inline-block; padding: .6rem 1rem; background: var(--raised); }

/* ---------------------------------------------------------------- header -- */

.site-head {
  position: sticky; top: 0; z-index: 5;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(16, 18, 24, .85);
  backdrop-filter: blur(12px);
}
.site-head .wrap {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  align-items: baseline; justify-content: space-between;
  padding-block: 1.05rem;
}
.brand {
  font: 600 1.15rem/1 var(--serif); color: var(--paper); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: .55rem;
  /* The name sets its own line-height to 1, which leaves an 18px-tall target —
     under the 24px WCAG 2.2 minimum, and it is the link back to the home page
     from every other page. The padding grows the target; the matching negative
     margin keeps the header exactly where it was. */
  padding-block: .3rem; margin-block: -.3rem;
}
.brand::before {
  content: ""; width: 5px; height: 12px;
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: linear-gradient(to top, var(--ember), var(--flame) 55%, var(--flame-hi));
  box-shadow: 0 0 8px 2px rgba(255, 176, 90, .5);
  transform: translateY(1px);
}
.site-head nav { display: flex; gap: clamp(.85rem, 2.4vw, 1.6rem); flex-wrap: wrap; }
.site-head nav a {
  font-size: .95rem; color: var(--muted); text-decoration: none;
  padding-block: .2rem; border-bottom: 1px solid transparent;
}
.site-head nav a:hover { color: var(--paper); }
.site-head nav a[aria-current] { color: var(--paper); border-bottom-color: var(--flame); }

.marquee {
  position: relative; z-index: 1;
  background: var(--raised); border-bottom: 1px solid var(--line-soft);
  font-size: .93rem; color: var(--muted);
}
.marquee .wrap { padding-block: .6rem; }

main { position: relative; z-index: 1; padding-block: clamp(2.5rem, 6vw, 4.5rem) 6rem; }

/* ------------------------------------------------------------ typography -- */

h1 { font: 500 clamp(2rem, 5.5vw, 3.1rem)/1.15 var(--serif); letter-spacing: -.015em; margin: 0 0 .6rem; }
h2 { font: 500 clamp(1.15rem, 2.4vw, 1.4rem)/1.3 var(--serif); margin: 0 0 .5rem; }
h3 { font: 600 1rem/1.4 var(--sans); margin: 0 0 .35rem; }

.lede { color: var(--muted); font-size: 1.05rem; margin: 0 0 clamp(2rem, 5vw, 3rem); max-width: 46ch; }
.eyebrow { font: 600 .74rem/1 var(--sans); letter-spacing: .16em; color: var(--muted-2); margin: 0 0 1rem; }

/* ------------------------------------------------------------------ hero -- */

.hero { text-align: center; padding-block: clamp(1rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4rem); }
.hero h1 { margin-bottom: .35rem; }
.hero .years { font: 400 1rem/1 var(--sans); color: var(--muted); letter-spacing: .1em; }

.candle-lg { position: relative; width: 74px; height: 138px; margin: 0 auto clamp(2rem, 5vw, 3rem); }
.candle-lg .glow {
  position: absolute; left: 50%; top: -30px; width: 260px; height: 260px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,176,90,.18) 0%, rgba(255,150,50,.07) 38%, transparent 70%);
  animation: breathe 4.5s ease-in-out infinite;
}
.candle-lg .flame {
  position: absolute; left: 50%; top: 0; width: 14px; height: 29px;
  transform: translateX(-50%); transform-origin: 50% 100%;
  border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background: linear-gradient(to top, #ff9422 3%, var(--flame) 30%, var(--flame-hi) 100%);
  box-shadow: 0 0 15px 5px rgba(255,167,58,.5), 0 0 38px 15px rgba(255,140,25,.2);
  animation: flicker 3.4s ease-in-out infinite;
}
.candle-lg .flame::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 9px;
  transform: translateX(-50%); border-radius: 50%;
  background: rgba(90,140,225,.45); filter: blur(1px);
}
.candle-lg .wick {
  position: absolute; left: 50%; top: 28px; width: 2px; height: 7px;
  transform: translateX(-50%); background: #37302a; border-radius: 1px;
}
.candle-lg .wax {
  position: absolute; left: 50%; top: 35px; width: 52px; height: 103px;
  transform: translateX(-50%); border-radius: 5px 5px 3px 3px;
  background: linear-gradient(100deg, #4a423a 0%, #c2b6a0 16%, #f2ead9 45%, #e6d9c3 66%, #857a6b 100%);
}
.candle-lg .wax::before {
  content: ""; position: absolute; inset-inline: 0; top: -3px; height: 9px; border-radius: 50%;
  background: linear-gradient(100deg, #635a4d, #f4ede0 45%, #a1957f);
}
.candle-lg .wax::after {
  content: ""; position: absolute; left: 50%; top: -2px; width: 34px; height: 46px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,190,110,.4), transparent 72%); filter: blur(3px);
}

@keyframes flicker {
  0%, 100% { transform: translateX(-50%) scaleY(1) rotate(0deg); opacity: 1; }
  22% { transform: translateX(-50%) scaleY(1.08) rotate(1.1deg); opacity: .95; }
  44% { transform: translateX(-50%) scaleY(.95) rotate(-.9deg); opacity: 1; }
  68% { transform: translateX(-50%) scaleY(1.04) rotate(.6deg); opacity: .97; }
}
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .76; } }

/* ------------------------------------------------- signature: year chart -- */

.years-chart { margin: 0 0 clamp(3rem, 7vw, 4.5rem); }
.years-chart .cap {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: 1.5rem; color: var(--muted); font-size: .9rem;
}
.years-chart .cap strong { color: var(--paper); font-weight: 600; }
.flames {
  display: flex; align-items: flex-end; gap: clamp(3px, 1.2vw, 10px);
  height: 132px; padding-bottom: 1.9rem; border-bottom: 1px solid var(--line);
}
.flames .yr {
  flex: 1; position: relative; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; height: 100%;
}
.flames .fl {
  width: min(13px, 100%);
  border-radius: 50% 50% 44% 44% / 66% 66% 34% 34%;
  background: linear-gradient(to top, var(--ember) 0%, var(--flame) 42%, var(--flame-hi) 100%);
  box-shadow: 0 0 10px 2px rgba(255,167,58,.28);
  transform-origin: 50% 100%;
  animation: rise .9s cubic-bezier(.2,.8,.25,1) backwards, sway 5s ease-in-out infinite;
}
.flames .yr:nth-child(odd) .fl { animation-duration: .9s, 6.2s; }

/* Year-chart bar heights.
   These are classes rather than an inline style attribute so the Content
   Security Policy needs no 'unsafe-inline' for styles. The template already
   rounds to whole percent, so nothing is lost — the rendered chart is
   identical, and the policy stays strict enough to be worth having. */
.flames .fl-0 { height: 0%; }
.flames .fl-1 { height: 1%; }
.flames .fl-2 { height: 2%; }
.flames .fl-3 { height: 3%; }
.flames .fl-4 { height: 4%; }
.flames .fl-5 { height: 5%; }
.flames .fl-6 { height: 6%; }
.flames .fl-7 { height: 7%; }
.flames .fl-8 { height: 8%; }
.flames .fl-9 { height: 9%; }
.flames .fl-10 { height: 10%; }
.flames .fl-11 { height: 11%; }
.flames .fl-12 { height: 12%; }
.flames .fl-13 { height: 13%; }
.flames .fl-14 { height: 14%; }
.flames .fl-15 { height: 15%; }
.flames .fl-16 { height: 16%; }
.flames .fl-17 { height: 17%; }
.flames .fl-18 { height: 18%; }
.flames .fl-19 { height: 19%; }
.flames .fl-20 { height: 20%; }
.flames .fl-21 { height: 21%; }
.flames .fl-22 { height: 22%; }
.flames .fl-23 { height: 23%; }
.flames .fl-24 { height: 24%; }
.flames .fl-25 { height: 25%; }
.flames .fl-26 { height: 26%; }
.flames .fl-27 { height: 27%; }
.flames .fl-28 { height: 28%; }
.flames .fl-29 { height: 29%; }
.flames .fl-30 { height: 30%; }
.flames .fl-31 { height: 31%; }
.flames .fl-32 { height: 32%; }
.flames .fl-33 { height: 33%; }
.flames .fl-34 { height: 34%; }
.flames .fl-35 { height: 35%; }
.flames .fl-36 { height: 36%; }
.flames .fl-37 { height: 37%; }
.flames .fl-38 { height: 38%; }
.flames .fl-39 { height: 39%; }
.flames .fl-40 { height: 40%; }
.flames .fl-41 { height: 41%; }
.flames .fl-42 { height: 42%; }
.flames .fl-43 { height: 43%; }
.flames .fl-44 { height: 44%; }
.flames .fl-45 { height: 45%; }
.flames .fl-46 { height: 46%; }
.flames .fl-47 { height: 47%; }
.flames .fl-48 { height: 48%; }
.flames .fl-49 { height: 49%; }
.flames .fl-50 { height: 50%; }
.flames .fl-51 { height: 51%; }
.flames .fl-52 { height: 52%; }
.flames .fl-53 { height: 53%; }
.flames .fl-54 { height: 54%; }
.flames .fl-55 { height: 55%; }
.flames .fl-56 { height: 56%; }
.flames .fl-57 { height: 57%; }
.flames .fl-58 { height: 58%; }
.flames .fl-59 { height: 59%; }
.flames .fl-60 { height: 60%; }
.flames .fl-61 { height: 61%; }
.flames .fl-62 { height: 62%; }
.flames .fl-63 { height: 63%; }
.flames .fl-64 { height: 64%; }
.flames .fl-65 { height: 65%; }
.flames .fl-66 { height: 66%; }
.flames .fl-67 { height: 67%; }
.flames .fl-68 { height: 68%; }
.flames .fl-69 { height: 69%; }
.flames .fl-70 { height: 70%; }
.flames .fl-71 { height: 71%; }
.flames .fl-72 { height: 72%; }
.flames .fl-73 { height: 73%; }
.flames .fl-74 { height: 74%; }
.flames .fl-75 { height: 75%; }
.flames .fl-76 { height: 76%; }
.flames .fl-77 { height: 77%; }
.flames .fl-78 { height: 78%; }
.flames .fl-79 { height: 79%; }
.flames .fl-80 { height: 80%; }
.flames .fl-81 { height: 81%; }
.flames .fl-82 { height: 82%; }
.flames .fl-83 { height: 83%; }
.flames .fl-84 { height: 84%; }
.flames .fl-85 { height: 85%; }
.flames .fl-86 { height: 86%; }
.flames .fl-87 { height: 87%; }
.flames .fl-88 { height: 88%; }
.flames .fl-89 { height: 89%; }
.flames .fl-90 { height: 90%; }
.flames .fl-91 { height: 91%; }
.flames .fl-92 { height: 92%; }
.flames .fl-93 { height: 93%; }
.flames .fl-94 { height: 94%; }
.flames .fl-95 { height: 95%; }
.flames .fl-96 { height: 96%; }
.flames .fl-97 { height: 97%; }
.flames .fl-98 { height: 98%; }
.flames .fl-99 { height: 99%; }
.flames .fl-100 { height: 100%; }

.flames .lbl {
  position: absolute; bottom: -1.65rem;
  font: 500 .7rem/1 var(--sans); color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.flames .n {
  position: absolute; top: -1.3rem;
  font: 600 .72rem/1 var(--sans); color: var(--flame);
  opacity: 0; transition: opacity .18s; font-variant-numeric: tabular-nums;
}
.flames .yr:hover .n, .flames .yr:focus-within .n { opacity: 1; }

@keyframes rise { from { height: 0; opacity: 0; } }
@keyframes sway {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  50% { transform: scaleY(1.035) rotate(.8deg); }
}

/* ----------------------------------------------------------------- cards -- */

.cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card {
  display: block; padding: 1.4rem 1.5rem; text-decoration: none; color: inherit;
  background: var(--raised); border: 1px solid var(--line-soft); border-radius: 12px;
  transition: border-color .2s, background .2s, transform .2s;
}
.card:hover { border-color: var(--line); background: var(--raised-2); transform: translateY(-2px); }
.card .count { font: 600 1.75rem/1 var(--serif); color: var(--flame); display: block; margin-bottom: .35rem; }
.card h2 { margin-bottom: .3rem; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }

/* --------------------------------------------------- candle & diary list -- */
/* A luminous spine with a flame per entry, so the rhythm of the wall is
   visible while reading and not only in the chart above.                     */

.entries { list-style: none; margin: 0; padding: 0; position: relative; }
.entries::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 5px; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line) 6%, var(--line) 94%, transparent);
}
.entry { position: relative; padding-inline-start: 2.1rem; padding-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.entry::before {
  content: ""; position: absolute; inset-inline-start: 1px; top: .55rem;
  width: 9px; height: 13px; border-radius: 50% 50% 44% 44% / 66% 66% 34% 34%;
  background: linear-gradient(to top, var(--ember), var(--flame) 55%, var(--flame-hi));
  box-shadow: 0 0 9px 2px rgba(255,167,58,.35);
}
.entry .meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: baseline; margin-bottom: .45rem; }
.entry .who { font: 600 .97rem/1.3 var(--sans); color: var(--paper); }
.entry time { font-size: .85rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.entry .hd { font: 500 1.08rem/1.4 var(--serif); color: var(--flame); margin: 0 0 .4rem; }
.entry .body p { margin: 0 0 .7rem; color: var(--body); }

/* Anything a visitor wrote can contain a string with no spaces in it — a long
   URL, a runaway keyboard. Without this the widest line sets the page width and
   a phone scrolls sideways for every entry on that page, not just the offending
   one. One published entry is a 157-character run of a single letter. */
.entry .body,
.entry .hd,
.entry .who,
.search-result,
.lede {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.entry .body p:last-child { margin-bottom: 0; }

.year-sep {
  padding-inline-start: 2.1rem;
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.4rem, 3vw, 2rem);
  font: 600 .78rem/1 var(--sans); letter-spacing: .18em; color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.entries .year-sep:first-child { margin-top: 0; }

.empty { color: var(--muted); }

/* ----------------------------------------------------------------- pager -- */

.pager {
  display: flex; gap: 1.25rem; align-items: center; justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); color: var(--muted); font-size: .92rem;
}
.pager a {
  text-decoration: none; padding: .5rem 1.1rem;
  border: 1px solid var(--line); border-radius: 999px; color: var(--paper);
  transition: border-color .2s, color .2s;
}
.pager a:hover { border-color: var(--flame); color: var(--flame); }

/* --------------------------------------------------------------- gallery -- */

.gallery-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 clamp(1.75rem, 4vw, 2.5rem); }
.gallery-tabs a {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .45rem 1rem; border: 1px solid var(--line-soft); border-radius: 999px;
  text-decoration: none; color: var(--muted); font-size: .92rem;
  transition: border-color .2s, color .2s, background .2s;
}
.gallery-tabs a:hover { color: var(--paper); border-color: var(--line); }
.gallery-tabs a[aria-current] { background: var(--paper); color: var(--night); border-color: var(--paper); }
.gallery-tabs .n { font-size: .78rem; opacity: .6; font-variant-numeric: tabular-nums; }

.grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}
.grid a { display: block; border-radius: 8px; overflow: hidden; }
.grid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: var(--raised); border: 1px solid var(--line-soft); border-radius: 8px;
  transition: transform .35s cubic-bezier(.2,.8,.25,1), border-color .2s;
}
.grid a:hover img { transform: scale(1.035); border-color: var(--line); }
.grid.pages { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.grid.pages img { aspect-ratio: 3 / 4; object-fit: contain; background: #14161c; }

/* ---------------------------------------------------------------- panels -- */

.sections { display: grid; gap: var(--gap); }
.panel {
  background: var(--raised); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 1.5rem 1.6rem;
}
.panel p { margin: 0 0 .7rem; color: var(--muted); }
.panel p:last-child { margin-bottom: 0; }

.films { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .55rem; }
.films li {
  background: var(--raised); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: .85rem 1.15rem; display: flex; justify-content: space-between;
  gap: 1rem; align-items: baseline;
}
.films .n { color: var(--muted-2); font-size: .85rem; white-space: nowrap; }

.note { color: var(--muted); font-size: .93rem; border-inline-start: 2px solid var(--line); padding-inline-start: 1rem; }
.archived-note {
  color: var(--muted); font-size: .92rem; background: var(--raised);
  border: 1px solid var(--line-soft); border-radius: 10px;
  padding: .85rem 1.15rem; margin-bottom: 1.5rem;
}
.notice {
  margin: 1.5rem 0; padding: 1.2rem 1.4rem;
  border-inline-start: 2px solid var(--flame);
  background: var(--raised); border-radius: 0 10px 10px 0;
}
.notice p { margin: 0 0 .55rem; }
.notice p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- video -- */

.film { margin: 0 0 2.5rem; }
.film video {
  width: 100%; max-width: 46rem; display: block; border-radius: 10px;
  border: 1px solid var(--line); background: #000;
}
.film figcaption { color: var(--muted); font-size: .9rem; margin-top: .7rem; }

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

.site-foot {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line-soft); padding-block: 2.5rem;
  text-align: center; color: var(--muted-2); font-size: .9rem;
}
.site-foot p { margin: 0 0 .4rem; }
.site-foot .credit { font-size: .8rem; color: #4e4941; }

/* ------------------------------------------------------------------ a11y -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flame, .glow, .fl { animation: none !important; }
  .card, .grid img, .pager a { transition: none; }
}

@media (max-width: 34rem) {
  body { font-size: 16px; }
  .flames { height: 104px; gap: 2px; }
  .flames .lbl { font-size: .58rem; }
  .site-head .wrap { padding-block: .85rem; }
  .entry { padding-inline-start: 1.7rem; }
  .year-sep { padding-inline-start: 1.7rem; }
}

/* -------------------------------------------------------------- lightbox -- */

.lb {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: rgba(8, 9, 12, .94);
  backdrop-filter: blur(6px);
  padding: clamp(1rem, 4vw, 3rem);
}
.lb[hidden] { display: none; }
.lb.lb-in { animation: lbfade .2s ease-out; }
@keyframes lbfade { from { opacity: 0; } }

.lb-fig { margin: 0; display: grid; place-items: center; gap: .9rem; max-width: 100%; max-height: 100%; }
.lb-img {
  max-width: min(92vw, 1400px); max-height: 82vh;
  object-fit: contain; display: block;
  border-radius: 6px; border: 1px solid var(--line);
  background: var(--raised);
}
.lb-cap { color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
/* "8 / 22" is a left-to-right run. Dropped into an RTL page it reorders around
   the slash and reads "22 / 8", so photo 8 of 22 looks like photo 22 of 8. The
   isolate pins the run's own direction without affecting anything around it. */
.lb-count { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.lb-close, .lb-nav {
  position: absolute; background: rgba(23, 26, 34, .8);
  border: 1px solid var(--line); color: var(--paper);
  border-radius: 999px; cursor: pointer; font: inherit;
  display: grid; place-items: center;
  transition: border-color .18s, background .18s;
}
.lb-close:hover, .lb-nav:hover:not(:disabled) { border-color: var(--flame); color: var(--flame); }
.lb-nav:disabled { opacity: .3; cursor: default; }

.lb-close { top: 1rem; inset-inline-end: 1rem; width: 2.6rem; height: 2.6rem; font-size: 1.5rem; line-height: 1; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; }
.lb-nav::before { content: ""; width: 11px; height: 11px; border-top: 2px solid currentColor; border-inline-start: 2px solid currentColor; }
/* Positioned on the inline axis, so they mirror with direction: in RTL the
   gallery advances leftwards, which puts "next" on the left where a reader
   expects it. The glyph's borders are logical too, so it mirrors with them. */
.lb-prev { inset-inline-start: 1rem; }
.lb-prev::before { transform: rotate(135deg); margin-inline-start: 4px; }
.lb-next { inset-inline-end: 1rem; }
.lb-next::before { transform: rotate(-45deg); margin-inline-end: 4px; }

@media (max-width: 34rem) {
  .lb-nav { width: 2.5rem; height: 2.5rem; }
  .lb-img { max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) { .lb.lb-in { animation: none; } }

/* ------------------------------------------------------------------ forms -- */

.cta-row { margin: 0 0 clamp(2rem, 4vw, 2.75rem); }
.cta {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .65rem 1.4rem; border-radius: 999px;
  background: var(--flame); color: #1a1206; text-decoration: none;
  font-weight: 600; font-size: .95rem;
  transition: background .18s, transform .18s;
}
.cta::before {
  content: ""; width: 6px; height: 13px;
  border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: linear-gradient(to top, #b8621f, #fff0cf);
}
.cta:hover { background: var(--flame-hi); color: #1a1206; transform: translateY(-1px); }

.submit-form { max-width: 40rem; display: grid; gap: 1.25rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .93rem; color: var(--paper); font-weight: 500; }
.field .opt { color: var(--muted-2); font-weight: 400; }
.field input, .field textarea {
  font: inherit; font-size: 1rem; color: var(--paper);
  background: var(--raised); border: 1px solid var(--line); border-radius: 8px;
  padding: .7rem .9rem; width: 100%;
  transition: border-color .18s;
}
.field input:focus, .field textarea:focus { border-color: var(--flame); outline: none; }
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.7; }
.hint { margin: 0; font-size: .84rem; color: var(--muted-2); }

/* Honeypot: off-screen rather than display:none, since some bots skip hidden
   fields but not positioned ones. */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.actions { display: flex; gap: 1rem; align-items: center; }
.actions button {
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: .7rem 1.6rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--flame); color: #1a1206;
  transition: background .18s;
}
.actions button:hover { background: var(--flame-hi); }
.actions .cancel { color: var(--muted); text-decoration: none; font-size: .92rem; }
.actions .cancel:hover { color: var(--paper); }

.form-errors {
  background: #2a1a1a; border: 1px solid #4a2828; border-radius: 10px;
  padding: .9rem 1.2rem; margin-bottom: 1.5rem; color: #f0b8b8;
}
.form-errors ul { margin: 0; padding-inline-start: 1.1rem; }

.done { text-align: center; padding-block: clamp(1rem, 5vw, 3rem); }
.done .lede { margin-inline: auto; }

/* ----------------------------------------------------------------- admin -- */

.admin-login { max-width: 26rem; margin-inline: auto; }
.admin-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .7rem 1rem; margin-bottom: 2rem;
  background: var(--raised); border: 1px solid var(--line-soft); border-radius: 10px;
  font-size: .9rem; color: var(--muted);
}
.admin-bar strong { color: var(--paper); font-weight: 600; }
.inline { display: inline; margin: 0; }
button.link {
  background: none; border: 0; color: var(--flame); cursor: pointer;
  font: inherit; font-size: .9rem; padding: 0; text-decoration: underline;
}
.decide { display: flex; gap: .6rem; margin-top: .9rem; }
.decide button {
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  padding: .45rem 1.1rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--raised-2); color: var(--paper);
  transition: border-color .18s, color .18s;
}
.decide .ok:hover { border-color: #4ea862; color: #7fd694; }
.decide .no:hover { border-color: #a85050; color: #f0a0a0; }
.rejected { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .88rem; color: var(--muted-2); }
.rejected .k {
  font: 10px ui-monospace, Menlo, monospace; text-transform: uppercase;
  letter-spacing: .06em; background: var(--raised-2); padding: .1rem .4rem;
  border-radius: 3px; margin-inline-end: .4rem;
}

/* --- search ------------------------------------------------------------- */

.search {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 2rem;
}
.search label {
  flex: 1 0 100%;
  font: 500 .8rem/1.6 var(--sans); color: var(--muted-2);
  letter-spacing: .02em;
}
.search input[type="search"] {
  flex: 1 1 18rem;
  padding: .7rem .9rem;
  font: 400 1rem/1.4 var(--sans);
  color: var(--paper);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 3px;
}
.search input[type="search"]::placeholder { color: var(--muted-2); }
.search input[type="search"]:focus-visible {
  outline: 2px solid var(--flame); outline-offset: 1px;
  border-color: transparent;
}
.search button {
  padding: .7rem 1.4rem;
  font: 500 .95rem/1.4 var(--sans);
  color: var(--night); background: var(--flame);
  border: 0; border-radius: 3px; cursor: pointer;
}
.search button:hover { background: var(--flame-hi); }
.search button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

.res-head {
  margin: 2.5rem 0 1rem;
  font: 500 1.1rem/1.3 var(--serif); color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: .5rem;
}

/* The matched text. Underlined as well as coloured, so the match is not
   carried by hue alone for anyone who cannot distinguish it. */
mark {
  background: rgba(255,192,106,.19);
  color: var(--flame-hi);
  text-decoration: underline;
  text-decoration-color: rgba(255,192,106,.5);
  text-underline-offset: 2px;
  border-radius: 2px;
  padding: 0 .1em;
}

.muted { color: var(--muted-2); font-size: .9em; }

/* A pending entry that would publish someone's contact details. Amber rather
   than red: it is a caution about consequence, not an error by the writer. */
.warn {
  margin: .9rem 0 0;
  padding: .7rem .9rem;
  font: 400 .9rem/1.6 var(--sans);
  color: var(--flame-hi);
  background: rgba(255,192,106,.09);
  border: 1px solid rgba(255,192,106,.3);
  border-radius: 4px;
}
.decide .redact {
  background: transparent;
  color: var(--flame);
  border: 1px solid var(--flame);
}
.decide .redact:hover { background: rgba(255,192,106,.12); }

/* A photograph with no larger version behind it. Same frame as the others, but
   no pointer and no hover lift, so it does not promise a zoom it cannot give. */
.grid img.nozoom { cursor: default; }
.grid img.nozoom:hover { transform: none; border-color: var(--line-soft); }

/* A link that stands alone as the page's one action, rather than sitting inside
   a sentence. WCAG 2.2 exempts links within a block of text from the 24px
   target minimum, and prose links here rely on that; this one has no sentence
   around it to be part of, so it carries its own target. */
.action-link {
  display: inline-block; padding-block: .35rem; padding-inline: .1rem;
}

/* --- albums on one page ---------------------------------------------------
   The gallery used to be five tabs over a 24-per-page pager: seeing 122
   photographs meant eleven page loads. They are thumbnails and they load
   lazily, so there was never a reason to make anyone click. The albums remain
   as headings, because which album a photograph belongs to is part of what it
   says — and the heading sticks, so you always know which one you are in. */
.album + .album { margin-top: clamp(2.5rem, 6vw, 4rem); }
.album-h {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: baseline; gap: .6rem;
  margin: 0 0 .9rem; padding-block: .7rem;
  font: 500 clamp(1.15rem, 2.6vw, 1.45rem)/1.3 var(--serif);
  background: linear-gradient(to bottom, var(--night) 72%, transparent);
}
.album-h .n {
  font: 400 .8rem/1 var(--sans); color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
/* The heading is sticky, so an anchored jump must stop clear of it. */
.album { scroll-margin-top: 4.5rem; }

/* --- the physical diary, read one page at a time ---------------------------
   The scans are not uniform and never will be: full notebook pages beside
   strips torn from a pad, three lines deep. A grid of equal tiles made the
   strips unreadable and the full pages enormous. Every scan now sits on the
   same sheet at whatever size fits it — a strip stays a strip, it just sits on
   a page rather than being stretched to fill one. */

.diary-book { position: relative; display: grid; justify-items: center; }
.diary-sheets { list-style: none; margin: 0; padding: 0; width: 100%; }

/* Without the script every sheet simply stacks: worse, but readable. */
.diary-sheet { margin: 0 0 1.25rem; }
.diary-sheet figure { margin: 0; }
.diary-sheet img {
  display: block; width: 100%; height: auto; border-radius: 8px;
  background: #f6f3ea; border: 1px solid var(--line);
}

/* With the script, one at a time on a fixed sheet. */
.is-reader .diary-sheets {
  position: relative; perspective: 2200px;
  min-height: min(78vh, 62rem);
  display: grid; place-items: center;
}
.is-reader .diary-sheet {
  grid-area: 1 / 1; margin: 0; display: none;
  width: 100%; justify-items: center;
}
.is-reader .diary-sheet.is-current { display: grid; }
.is-reader .diary-sheet figure {
  display: grid; place-items: center;
  width: min(100%, 46rem);
  /* The sheet is a constant. What varies is how much of it a scan fills. */
  aspect-ratio: 3 / 4;
  background: #f6f3ea;
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, .9);
  padding: clamp(.4rem, 1.4vw, .9rem);
  overflow: hidden;
}
.is-reader .diary-sheet img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain; border: 0; border-radius: 4px; background: none;
}

/* The sheet keeps its size at every zoom level — that constancy is the whole
   point of the reader — and the scan scrolls inside it. Sizes are set in px by
   the script, which computes fit and scales from it. */
.is-reader .diary-sheet figure { overflow: auto; overscroll-behavior: contain; }
.is-reader .diary-sheet img { max-width: none; max-height: none; margin: auto; }
.is-reader.is-zoomed .diary-sheet figure { cursor: grab; }
.is-reader.is-zoomed .diary-sheet figure:active { cursor: grabbing; }

@keyframes diary-turn-in {
  from { transform: rotateY(-14deg) translateX(3%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes diary-turn-in-back {
  from { transform: rotateY(14deg) translateX(-3%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.is-reader .diary-sheet.turn-in figure { animation: diary-turn-in .34s cubic-bezier(.2,.7,.3,1) both; transform-origin: right center; }
.is-reader .diary-sheet.turn-in-back figure { animation: diary-turn-in-back .34s cubic-bezier(.2,.7,.3,1) both; transform-origin: left center; }
@media (prefers-reduced-motion: reduce) {
  .is-reader .diary-sheet figure { animation: none !important; }
}

.diary-nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(23, 26, 34, .82); border: 1px solid var(--line);
  color: var(--paper); cursor: pointer;
  display: grid; place-items: center;
}
.diary-nav::before {
  content: ""; width: 10px; height: 10px;
  border-top: 2px solid currentColor; border-inline-start: 2px solid currentColor;
}
/* Positioned on the inline axis so they mirror with direction: in RTL the
   notebook advances leftwards, which puts "next" on the left. */
.diary-prev { inset-inline-end: clamp(.2rem, 2vw, 1rem); }
.diary-prev::before { transform: rotate(135deg); margin-inline-start: 4px; }
.diary-next { inset-inline-start: clamp(.2rem, 2vw, 1rem); }
.diary-next::before { transform: rotate(-45deg); margin-inline-end: 4px; }
.diary-nav:hover { border-color: var(--flame); color: var(--flame); }
.diary-nav:disabled { opacity: .3; cursor: default; }
.diary-nav:disabled:hover { border-color: var(--line); color: var(--paper); }

.diary-bar {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  flex-wrap: wrap; margin-top: 1.4rem; color: var(--muted); font-size: .9rem;
}
.diary-count { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
/* Zoom is a range the reader chooses, not a second fixed state. */
.diary-zoomer { display: inline-flex; align-items: center; gap: .5rem; }
.diary-zoomer button {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: .3rem .75rem; font: inherit; font-size: .86rem;
  cursor: pointer; line-height: 1.4;
}
.diary-zoomer button:hover:not(:disabled) { color: var(--paper); border-color: var(--flame); }
.diary-zoomer button:disabled { opacity: .38; cursor: default; }
.diary-zoomer .diary-zout, .diary-zoomer .diary-zin {
  min-width: 2rem; text-align: center; font-size: 1rem;
}
.diary-zoomer input[type="range"] { width: clamp(6rem, 16vw, 11rem); accent-color: var(--flame); }
.diary-zval {
  min-width: 3.2rem; text-align: center; font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate; font-size: .84rem; color: var(--muted-2);
}

/* Visible only to a screen reader: the range needs a label, and a visible one
   would repeat what the per-cent readout already says. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.diary-jump { display: inline-flex; align-items: center; gap: .5rem; }
.diary-jump input {
  width: 4.4rem; background: var(--raised); color: var(--paper);
  border: 1px solid var(--line); border-radius: 6px; padding: .35rem .5rem;
  font: inherit; font-size: .86rem; text-align: center;
}

/* Filter by who wrote it. Same shape as the album chips, because it does the
   same job: narrowing a long list without leaving the page you are on. */
.who-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 clamp(1.5rem, 3.5vw, 2.2rem); }
.who-tabs a {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .4rem .95rem; border: 1px solid var(--line-soft); border-radius: 999px;
  text-decoration: none; color: var(--muted); font-size: .9rem;
  transition: border-color .2s, color .2s, background .2s;
}
.who-tabs a:hover { color: var(--paper); border-color: var(--line); }
.who-tabs a[aria-current] { background: var(--paper); color: var(--night); border-color: var(--paper); }
.who-tabs .n { font-size: .76rem; opacity: .6; font-variant-numeric: tabular-nums; }

/* --- searching the diary, and numbered pages ------------------------------- */
.entry-search { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0 0 1.2rem; }
.entry-search input[type="search"] {
  flex: 1 1 18rem; min-width: 0;
  background: var(--raised); color: var(--paper);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .55rem 1.1rem; font: inherit; font-size: .95rem;
}
.entry-search input::placeholder { color: var(--muted-2); }
.entry-search input:focus-visible { border-color: var(--flame); }
.entry-search button {
  background: var(--paper); color: var(--night); border: 1px solid var(--paper);
  border-radius: 999px; padding: .55rem 1.3rem; font: inherit; font-size: .92rem;
  font-weight: 600; cursor: pointer;
}
.entry-search button:hover { background: var(--flame); border-color: var(--flame); }
.entry-search .clear { color: var(--muted); font-size: .88rem; text-decoration: none; }
.entry-search .clear:hover { color: var(--paper); }
.result-line { color: var(--muted); margin-bottom: 1.2rem; }

.pager.numbered { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; }
.pager.numbered a, .pager.numbered .cur, .pager.numbered .off {
  min-width: 2.4rem; text-align: center;
  border: 1px solid var(--line-soft); border-radius: 999px;
  padding: .34rem .7rem; font-size: .9rem; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pager.numbered a { color: var(--muted); }
.pager.numbered a:hover { color: var(--paper); border-color: var(--line); }
.pager.numbered .cur { background: var(--paper); color: var(--night); border-color: var(--paper); font-weight: 600; }
.pager.numbered .off { color: var(--muted-2); opacity: .45; border-color: transparent; }
.pager.numbered .gap { color: var(--muted-2); padding-inline: .2rem; border: 0; min-width: 0; }