/* ===========================================================================
   THE INNER PAGES

   The front page settled first: a wall of his photographs, the wing-mirror
   shot mounted in it, his name in Gveret Levin, five destinations on a divided
   glass bar. The inner pages were still a serif on dark grey with a warm
   gradient and a row of cards — recognisably a template, and recognisably a
   different site.

   This is the shape that came out of twenty directions and four rounds with a
   design panel:

     · the wing-mirror photograph across the top, the bar on it exactly where
       it sits on the front page — 2% down, nudged 58px, clear of the mirror
     · a column of his photographs down the left edge, scrolling
     · the messages beside it, each marked with a נר נשמה

   Everything here is scoped to `body.inner`, so the admin screens and the home
   page are untouched.
   ========================================================================= */

/* Gveret and Heebo were used throughout this stylesheet and declared in
   neither it nor site.css — home.css has them, and the inner pages do not load
   home.css. So the title fell back to the system `cursive` and every piece of
   UI type to the system sans, on every inner page, and the whole shell has
   been rendering in the wrong two typefaces.

   Weights copied from the demo rather than invented. Gveret Levin is a single
   master: declaring it `100 900`, as home.css does, tells the browser the file
   covers the range and it synthesises — 253px of title where the face's own
   400 draws 223. No range here, so 400 is the file and nothing is smeared. */
@font-face {
  font-family: 'Gveret';
  font-style: normal;
  src: url('/fonts/gveret-hebrew.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  src: url('/fonts/heebo-hebrew.woff2') format('woff2');
  font-display: swap;
}
/* Chosen 11.08.2026 for what people wrote — the candles and the diary. Self
   hosted like the rest: the CSP allows no font origin but this one, and a
   Google Fonts reference would be rewritten by Cloudflare Fonts into an inline
   style block the CSP then blocks, which is how this site once rendered
   entirely in Times New Roman while every test passed. */
@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 400 700;
  src: url('/fonts/arimo-hebrew.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Miriam';
  font-style: normal;
  font-weight: 400 700;
  src: url('/fonts/miriam-hebrew.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Varela';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/varela-hebrew.woff2') format('woff2');
  font-display: swap;
}

body.inner {
  --void: #08090c;
  --line: rgba(242, 240, 235, .09);
  --warm: #ffd9a0;
  /* Secondary text. Not picked by eye: 5.1:1 against the void, so dates,
     hints and counts clear AA at 11px. The greys they replaced measured
     3.1 and 4.3. */
  --dim: #7b828d;
  --rail: 287px;

  background: var(--void);
}
/* The warm gradient the old inner pages carried would sit over the photograph
   as a haze, and over the rail as a wash. */
body.inner::before { display: none; }
body.inner main { position: relative; z-index: 1; padding: 0; }

/* --------------------------------------------------------------- the frame -- */
/* Two columns of 140px photographs — 15% up from the demo's 122px, which makes
   the strip 287px: 2×140 plus the 2px gap and 2px of padding either side. A
   fixed width rather than a percentage: the strip is a margin of pictures, and
   a margin that grows with the window stops being one. */
.inner-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  min-height: 100vh;
  position: relative;
}
/* The scanned notebook keeps the strip like every other page —
   but their content is not prose, so it runs the whole column rather than
   stopping at the reading measure. 52rem for a grid of 123 photographs would
   be three across and six thousand pixels long, which is the pagination we
   removed wearing a different hat. */
.inner-frame.wide .page { max-width: none; }

/* The gallery and the films have no strip — one is already 123 of his
   photographs, the other is something you sit and watch. Without it the single
   column takes the whole frame, and the photograph across the top widens to
   match. */
.inner-frame.no-rail { grid-template-columns: minmax(0, 1fr); }
/* The photograph keeps the demo's size here too. It is sized from the viewport
   rather than from its column precisely so that removing the strip does not
   change it — every page's header is the same 973×413 at 1440px, which is the
   point of having one. */

/* Absolutely positioned, and that is load-bearing. As a grid item the rail's
   own height counts towards the row, so enough photographs to reach the bottom
   of a long page made the *page* longer — blank scroll under the last message.
   Out of flow it is exactly as tall as the words beside it, always full, never
   the thing deciding how long the page is; the surplus is clipped.

   `inset-inline-end`, not start: on an RTL page start is the right. */
.rail {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--rail);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  padding: 2px;
  align-content: start;
  overflow: hidden;
  border-inline-start: 1px solid var(--line);
}
.rail img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.03);
}

/* ----------------------------------------------------------- the photograph -- */
/* The proportions from the demo, to the pixel: `0.78 × (100vw − 192px)` at the
   photograph's own 2000:848, centred in the column beside the strip. At 1440px
   that is 973×413 sitting 358px in, which is what the mockup measures.

   Sized from the viewport rather than from its column, so the strip can change
   width without the photograph shrinking by every pixel the strip gains.

   Whole, never cropped. A fixed height against a 2.36:1 photograph shows only
   part of it and pulls the wing mirror up under the menu. */
.photo-head {
  position: relative;
  width: calc(0.78 * (100vw - 192px));
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 2000 / 848;
  overflow: hidden;
  background: var(--void);
}
/* `> picture > img` since the WebP wrapper went in: the child combinator
   stopped matching the moment the img gained a parent, and the photograph
   painted at its 2000px attribute width through a 1200px page. Both forms
   kept, so removing the wrapper can never re-break it the other way. */
.photo-head > img,
.photo-head > picture > img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(1.04);
}
.photo-head > picture { position: absolute; inset: 0; }
/* Nothing over the top of it: the bar sits on the open sky and its own glass
   carries the type, as on the front page. The gradient comes in low, where the
   heading needs a ground. */
.photo-head::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, transparent 45%, rgba(8, 9, 12, .92) 100%);
}

/* The bar, placed exactly as the front page places it. The mirror is not
   centred in the frame and the offset was dialled in against that, so copying
   the 58px matters as much as copying the pill. */
.photo-head .bar {
  position: absolute; inset-inline: 0; top: 2%; z-index: 2;
  display: flex; justify-content: center;
  pointer-events: none;
}
/* The nudge moves the pill, not the full-width strip holding it. Translating
   the strip put its right edge 58px past the viewport — clipped by the
   photograph, so nothing showed, but it reported as overflow on every check
   and would have become a scrollbar the day the clipping changed. */
.photo-head .bar nav {
  display: inline-flex; align-items: stretch; pointer-events: auto;
  position: relative; overflow: hidden;
  transform: translateX(58px);
  border-radius: 999px;
  background: rgba(8, 9, 12, .55);
  border: 1px solid rgba(242, 240, 235, .18);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.photo-head .bar nav::before {
  content: ""; position: absolute; inset-inline: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
}
/* 44px is the floor, and it is the height of the whole tab rather than a
   padded label: these five are the site's navigation and they are pressed with
   a thumb, on a phone, by people who were adults in 2006. They measured 34. */
.photo-head .bar a {
  font: 400 clamp(12.5px, 1.1vw, 14.5px)/normal Heebo, sans-serif;
  letter-spacing: .08em; color: rgba(255, 255, 255, .92);
  white-space: nowrap; display: flex; align-items: center;
  min-height: 44px;
  padding: .5rem clamp(.9rem, 1.8vw, 1.35rem);
  /* No underline. site.css underlines every <a>; the home page kills it with
     `body.home a { text-decoration: none }` and the inner pages had no
     equivalent, so this bar rendered underlined while the identical home bar
     did not — which read as a different, heavier menu. */
  text-decoration: none;
  transition: background .2s, color .2s;
}
.photo-head .bar a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.photo-head .bar a[aria-current] { color: var(--warm); }
.photo-head .bar .sep { width: 1px; flex: none; background: rgba(242, 240, 235, .2); }

/* The search field, on the photograph at the far corner from the title, in the
   same glass as the bar so the two read as one set of controls. */
.photo-head .site-search {
  position: absolute; z-index: 2; top: 2%; inset-inline-end: 3%;
  display: flex; align-items: center; gap: .3rem;
  background: rgba(8, 9, 12, .55);
  border: 1px solid rgba(242, 240, 235, .18);
  border-radius: 999px;
  padding: .25rem .5rem .25rem .8rem;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.photo-head .site-search input {
  width: clamp(6rem, 11vw, 10rem);
  background: none; border: 0; color: #fff;
  font: 400 12.5px/1 Heebo, sans-serif;
  padding: .35rem 0;
}
.photo-head .site-search input::placeholder { color: rgba(255, 255, 255, .5); }
.photo-head .site-search input:focus { outline: none; }
.photo-head .site-search button {
  all: unset; cursor: pointer; display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  color: rgba(255, 255, 255, .7);
}
.photo-head .site-search button:hover { color: var(--warm); }
.photo-head .site-search:focus-within { border-color: var(--warm); }
@media (max-width: 700px) {
  .photo-head .site-search { position: static; margin: .8rem auto 0; width: max-content; }
}

/* The page title, on the photograph, in the same hand as the front page. */
/* The plate shrinks to the width of the title, so centring inside it centres
   the count under the title rather than under the page — which is what it
   reads as, and it was sitting against the title's leading edge. */
.photo-head .plate {
  position: absolute; z-index: 2; inset-inline-start: 6%; bottom: 10%;
  pointer-events: none; text-align: center;
}
.photo-head .plate h1 {
  margin: 0;
  font: 400 clamp(2rem, 4.6vw, 3.4rem)/1 Gveret, cursive;
  color: #fff;
}
/* The script hand has a long descender; .7rem put the count inside it. */
.photo-head .plate .count {
  display: block; margin-top: 1.15rem;
  font: 400 12px/1 Heebo, sans-serif; letter-spacing: .16em; color: var(--dim);
}

/* ---------------------------------------------------------------- the page -- */
body.inner .page {
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) 8rem;
}
body.inner .lede { margin: 0 0 2rem; color: #9ba1ab; font-size: 15px; }
body.inner .cta {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 400 13px/1 Heebo, sans-serif; letter-spacing: .1em;
  border: 1px solid rgba(242, 240, 235, .28); border-radius: 999px;
  padding: .7rem 1.4rem;
  transition: border-color .2s, background .2s;
}
body.inner .cta:hover { border-color: var(--warm); background: rgba(255, 217, 160, .08); }

/* --------------------------------------------------------------- one candle -- */
/* A column for the נר at the start of the entry — the right, on an RTL page —
   so one mark stands beside both the name and the title rather than being
   repeated on each line. The message runs the full width beneath it: indenting
   a 200-word letter to clear the glass would cost the measure. */
body.inner .entries { list-style: none; margin: 0; padding: 0; }
body.inner .entry {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0 .7rem;
  padding: 2.6rem 0 1.6rem;
  border-top: 1px solid var(--line);
}
body.inner .entry:first-child { border-top: 0; padding-top: 0; }
body.inner .candle {
  grid-row: span 2;
  color: var(--warm);
  align-self: start;
  margin-top: .1rem;
  justify-self: center;
}
body.inner .meta, body.inner .hd { grid-column: 2; }
body.inner .body { grid-column: 1 / -1; padding-top: .1rem; }

body.inner .meta {
  display: flex; gap: .9rem; align-items: baseline; margin: 0 0 .45rem;
}
body.inner .who { font: 400 12.5px/1 Varela, sans-serif; color: #dde0e5; letter-spacing: .03em; }
/* 12.5px, not 11. It is the date on every one of 253 candles and 176 diary
   entries, it is the only thing on the page that says when someone wrote, and
   most people reading it are past fifty. It matched .who at 12.5 anyway. */
body.inner .meta time {
  font: 400 12.5px/1 Varela, sans-serif; letter-spacing: .1em; color: var(--dim);
  direction: ltr; unicode-bidi: isolate;
}

/* The title people wrote for their own candle — 250 of the 253 carry one, so
   these are what the eye runs down the page. */
body.inner .hd {
  margin: 0 0 .55rem;
  font: 400 clamp(1.2rem, 2.1vw, 1.6rem)/1.25 Gveret, cursive;
  color: #fff;
  text-wrap: balance;
}

/* Measured rather than guessed at, twice. `44ch` gave 41 characters a line and
   872px of black beside it; no cap gave 82. And a width in rem cannot hold a
   measure across faces — 640px was 72 characters in Miriam and 82 in Arimo.
   `ch` scales with the font, which is the whole reason it exists. */
body.inner .body {
  margin: 0;
  max-width: 72ch;
  font: 400 1.1rem/1.95 Arimo, Arial, sans-serif;
  /* #fff, not the paper white the rest of the site uses. On a near-black page
     #f2f0eb reads as warm — it is 7 points of red over blue, which is nothing
     on a light ground and visibly yellow on this one. What people wrote is the
     one thing here that should be a plain white. */
  color: #fff;
  text-wrap: pretty;
}
/* The colour has to be set on the paragraph, not left to the rule above it:
   site.css carries `.entry .body p { color: var(--body) }`, and a colour set
   directly on an element always beats one inherited from its container,
   whatever the specificity of the two selectors. So the container said #fff
   and every line of it still rendered in #d6d0c4. */
body.inner .body p { margin: 0 0 .8rem; color: #fff; }
body.inner .body p:last-child { margin-bottom: 0; }

body.inner .year-sep {
  margin: 3rem 0 1rem;
  font: 400 clamp(1.6rem, 3vw, 2.4rem)/1 Gveret, cursive;
  color: rgba(255, 217, 160, .45);   /* 3.6:1 — AA for 38px type */
  list-style: none;
}
body.inner .empty { color: var(--dim); list-style: none; }

/* ------------------------------------------------------------------ narrow -- */
@media (max-width: 900px) {
  .inner-frame { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .photo-head { width: 100%; }
  /* The nudge was dialled in against a frame 1500px wide; 58px of a phone
     screen is a seventh of it. */
  .photo-head .bar nav { transform: none; }
}
@media (max-width: 700px) {
  /* The same object as the desktop bar, scaled down — one rounded pill, the
     hairline dividers kept, a single row. It had been wrapping to two lines
     with the dividers dropped and the ends squared off, which read as a
     different component. Font and padding are in vw so five Hebrew items and
     four dividers still fit one row at 320px without the page scrolling. */
  .photo-head .bar nav {
    flex-wrap: nowrap; border-radius: 999px;
    max-width: calc(100vw - 1.4rem);
  }
  .photo-head .bar a {
    font-size: clamp(10px, 3.05vw, 13px);
    letter-spacing: .04em;
    padding: 0 clamp(.42rem, 1.9vw, 1rem);
  }

  /* The photograph is taller than its own ratio here, and that is what makes
     the bar possible at the top.
     
     At 2000:848 a 390px screen gives a 165px band, and in a band that shallow
     his face sits at y40 while a bar with 44px tap targets ends at y49 — the
     menu would land across it, which is the one thing that may not happen. The
     ratio is dropped for a height instead: at 250px his face starts at y61 and
     the bar clears it by twelve. `cover` takes the difference off the sides,
     where there is sea and grass, rather than off the top. */
  /* Tall enough that the bar clears the MIRROR, not merely his face.
     
     The frame's top corner is 18.3% down the photograph — measured off the
     file, by finding where the dark frame starts against the sky. The bar sits
     3% down and is 46px tall, so clearing it by a visible margin needs
     (46 + 16) / (0.183 - 0.03) ≈ 405px. At 47vh on a 390x844 phone that is
     397px: the mirror starts at y73, the bar ends at y58.
     
     It is also the proportion the desktop uses — the photograph there runs a
     little under half the window, and at 250px this was 30% and looked like a
     letterbox with a menu jammed into it. */
  .photo-head { aspect-ratio: auto; height: clamp(340px, 47vh, 460px); }
  .photo-head img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
}

/* ------------------------------------------------- announcement and foot -- */
/* The announcement the family can set from the admin screens. It sits under
   the photograph rather than over it: the picture is the one thing on the page
   that should never have a notice laid across it. */
body.inner .marquee {
  margin: 0;
  padding: .9rem clamp(1rem, 4vw, 2rem);
  background: rgba(255, 217, 160, .07);
  border-block-end: 1px solid rgba(255, 217, 160, .16);
  color: var(--warm);
  font: 400 14px/1.6 Heebo, sans-serif;
  text-align: center;
}

/* Inside the words column, so it ends the reading. Under the rail there is no
   page to stand on — the photographs run to the bottom edge. */
body.inner .site-foot {
  margin: 0;
  padding: 2.5rem clamp(1rem, 4vw, 2rem) 3rem;
  border-block-start: 1px solid var(--line);
  text-align: center;
  color: var(--dim);
}
body.inner .site-foot p { margin: 0; }
body.inner .site-foot p:first-child {
  font: 400 clamp(1.2rem, 2.2vw, 1.6rem)/1 Gveret, cursive;
  color: rgba(255, 217, 160, .5);
  margin-bottom: .9rem;
}
body.inner .site-foot .credit { font: 400 12px/1.7 Heebo, sans-serif; letter-spacing: .04em; }
body.inner .site-foot a { color: #9ba1ab; border-bottom: 1px solid rgba(155, 161, 171, .3); }
body.inner .site-foot a:hover { color: var(--warm); border-color: var(--warm); }

/* ===========================================================================
   THE FURNITURE

   Everything that is not the words: tabs, pagers, buttons, fields. The old
   inner pages drew these from site.css, which meant a page could carry the
   front page's photograph above a row of solid cream buttons — the new shell
   on top of the old vocabulary.

   One move fixes the lot: every control on an inner page is the same glass as
   the bar on the photograph. It is already the site's language for "something
   you can press", it sits on a photograph without fighting it, and it means a
   visitor learns one shape instead of four.
   ========================================================================= */

/* Heebo for anything that is an instrument, Miriam only for reading. The pages
   were inheriting Assistant from site.css for all of it — a good face, but the
   wrong one here: the bar, the plate and the counts are all Heebo, so the tabs
   and pagers beside them read as belonging to a different site. */
body.inner .page { font-family: Heebo, sans-serif; }

/* ------------------------------------------------------------------ glass -- */
body.inner .cta,
body.inner .pager a,
body.inner .gallery-tabs a,
body.inner .book-tabs a,
body.inner .who-tabs a,
body.inner .diary-nav button,
body.inner .diary-zoomer button,
body.inner button[type="submit"] {
  background: rgba(242, 240, 235, .05);
  border: 1px solid rgba(242, 240, 235, .18);
  border-radius: 999px;
  color: rgba(255, 255, 255, .88);
  font: 400 13px/1 Heebo, sans-serif;
  letter-spacing: .06em;
  padding: .62rem 1.15rem;
  /* Every one of these is pressed with a thumb — the album chips, the writer
     filter, the two books, the page turners, the zoom. They came out at 35px
     against a 44px floor, and the type inside them is not what decides that. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  transition: background .2s, border-color .2s, color .2s;
}
body.inner .cta::before { display: none; }   /* the old sweep belongs to the old button */
body.inner .cta:hover,
body.inner .pager a:hover,
body.inner .gallery-tabs a:hover,
body.inner .book-tabs a:hover,
body.inner .who-tabs a:hover,
body.inner .diary-nav button:hover,
body.inner .diary-zoomer button:hover,
body.inner button[type="submit"]:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 217, 160, .5);
  color: #fff;
  transform: none;
}

/* Where you are. Warm rather than inverted — a solid cream chip was the
   brightest thing on a page whose subject is a photograph. */
body.inner .gallery-tabs a[aria-current],
body.inner .book-tabs a[aria-current],
body.inner .who-tabs a[aria-current],
body.inner .pager .cur {
  background: rgba(255, 217, 160, .12);
  border: 1px solid rgba(255, 217, 160, .45);
  border-radius: 999px;
  color: var(--warm);
  padding: .62rem 1.15rem;
  font: 400 13px/1 Heebo, sans-serif;
  letter-spacing: .06em;
}
body.inner .pager { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; margin-top: 3rem; }
body.inner .pager .off { color: var(--dim); padding: 0 .4rem; }
body.inner .gallery-tabs .n, body.inner .who-tabs .n, body.inner .book-tabs .n {
  opacity: .55; font-size: 12px; font-variant-numeric: tabular-nums; margin-inline-start: .35rem;
}

/* כתבו ביומן, and the same invitation on the candles.

   It was 102×35 in grey glass at 13px — the identical treatment to an inactive
   book tab, only smaller and duller. So the one thing either page invites a
   visitor to DO looked like the weakest control on it, and sat under the 44px
   a finger needs.

   The active tab's language, one size up: warm outline, warm words, filling on
   hover. It belongs to the same family as the two books, which is right — it
   is the third thing you can do with the diary — while being unmistakably an
   action rather than a state. */
body.inner .cta {
  padding: .85rem 1.6rem;
  min-height: 46px;
  display: inline-flex; align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 217, 160, .45);
  background: rgba(255, 217, 160, .12);
  color: #ffd9a0;
  font: 400 15px/1 Heebo, sans-serif;
  letter-spacing: .04em;
}
body.inner .cta:hover { background: rgba(255, 217, 160, .22); color: #fff; }

/* The one solid button on the site: sending something. It is the end of a
   form, and it should look like the end of a form. */
body.inner .submit-form button[type="submit"] {
  background: rgba(255, 217, 160, .16);
  border-color: rgba(255, 217, 160, .5);
  color: var(--warm);
  padding: .8rem 2rem;
  font-size: 14px;
}
body.inner .submit-form button[type="submit"]:hover {
  background: rgba(255, 217, 160, .26); color: #fff;
}

/* ----------------------------------------------------------------- fields -- */
body.inner .field label,
body.inner .entry-search label { font: 400 12px/1 Heebo, sans-serif; letter-spacing: .08em; color: #9ba1ab; }
body.inner .field input, body.inner .field textarea, body.inner .field select,
body.inner .entry-search input {
  background: rgba(242, 240, 235, .04);
  border: 1px solid rgba(242, 240, 235, .16);
  border-radius: 10px;
  color: #eceef1;
  font: 400 15px/1.6 Heebo, sans-serif;
  padding: .7rem .9rem;
}
body.inner .field textarea { font-family: Arimo, Arial, sans-serif; line-height: 1.8; }
body.inner .field input:focus, body.inner .field textarea:focus,
body.inner .entry-search input:focus {
  outline: none; border-color: var(--warm); background: rgba(255, 217, 160, .06);
}
body.inner .field .hint { font-size: 12px; color: var(--dim); }
body.inner .form-errors {
  border: 1px solid rgba(255, 120, 100, .4); background: rgba(255, 120, 100, .07);
  border-radius: 10px; padding: .9rem 1.1rem; color: #ffb3a8; font-size: 14px;
}
/* An unsent draft came back. Quiet, one line, with the one control it needs. */
body.inner .draft-note {
  border: 1px solid rgba(214, 178, 106, .35); background: rgba(214, 178, 106, .07);
  border-radius: 10px; padding: .7rem 1.1rem; color: var(--dim); font-size: 14px;
}
body.inner .draft-clear {
  background: none; border: none; padding: 0; cursor: pointer;
  color: inherit; font: inherit; text-decoration: underline;
}

/* ---------------------------------------------------------------- albums -- */
/* The gallery has the width now, so the grid can breathe rather than being a
   three-across column six thousand pixels long. */
body.inner .album-h {
  margin: 3.5rem 0 1.1rem;
  font: 400 clamp(1.4rem, 2.6vw, 2rem)/1 Gveret, cursive;
  color: #fff;
}
body.inner .album:first-of-type .album-h { margin-top: 1rem; }
body.inner .grid { gap: 10px; }
body.inner .grid img { border-radius: 6px; }
body.inner .lede { font: 400 15px/1.7 Heebo, sans-serif; color: #9ba1ab; }
body.inner .note, body.inner .muted, body.inner .hint { color: var(--dim); }
body.inner .archived-note {
  border-inline-start: 2px solid rgba(255, 217, 160, .35);
  padding-inline-start: .9rem; color: #9ba1ab; font-size: 14px;
}

/* The last of the old type system. Buttons and inputs do not inherit a face
   from their parent — they start at the UA's Arial — and site.css sets the
   serif on headings and `strong` by element, which reaches inside `.page`
   whatever the parent says. Both need naming rather than inheriting. */
body.inner .page button,
body.inner .page input,
body.inner .page select,
body.inner .page textarea { font-family: Heebo, sans-serif; }
body.inner .page .body textarea { font-family: Arimo, Arial, sans-serif; }
body.inner .page strong, body.inner .page b { font: inherit; font-weight: 600; color: #dde0e5; }
body.inner .page .n { font-family: Heebo, sans-serif; }

/* Section headings inside a page — the search result groups, the sections of
   the writing page. The same hand as the plate above them, a size down. */
body.inner .res-head,
body.inner .sections h2,
body.inner .page h2:not(.hd) {
  font: 400 clamp(1.3rem, 2.3vw, 1.75rem)/1.3 Gveret, cursive;
  color: #fff;
  margin: 2.5rem 0 1rem;
}

/* A search hit inside a nineteen-year-old message. Cream-on-black was the
   brightest thing on the page and made the surrounding words look switched
   off; the warm underline marks it without shouting. */
body.inner mark {
  background: rgba(255, 217, 160, .14);
  color: var(--warm);
  border-radius: 3px;
  padding: 0 .15em;
  box-decoration-break: clone;
}

/* The cancel beside a submit. It was 26px against the send button's 44 — the
   two are a pair and one of them was hard to hit. */
body.inner .actions { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }

/* Centred under the fields, on all three forms rather than only the contact
   one: the widget and the buttons are the same component on each, and the
   Turnstile iframe is a fixed 300px block that otherwise sits against the
   edge of a field column two or three times its width. */
body.inner .submit-form .cf-turnstile { display: flex; justify-content: center; }
body.inner .submit-form .actions { justify-content: center; }
body.inner .cancel {
  border: 1px solid rgba(242, 240, 235, .16);
  border-radius: 999px;
  color: #9ba1ab;
  font: 400 13px/1 Heebo, sans-serif;
  padding: .8rem 1.4rem;
  min-height: 44px;
  display: inline-flex; align-items: center;
}
body.inner .cancel:hover { color: #fff; border-color: rgba(242, 240, 235, .34); }
body.inner .submit-form button[type="submit"] { min-height: 44px; }

/* The line under each book tab — "what people wrote here since 2006". It was
   drawing --muted-2 from site.css at 4.38:1, just under AA. */
body.inner .book-tabs span { color: var(--dim); font-size: 12px; }
/* Inside the tab you are on, the hint sits on the warm chip rather than on the
   void, which lifts the background under it — the same grey that reads at 5.1:1
   elsewhere drops to 4.1 here. It takes the chip's own colour instead. */
body.inner .book-tabs a[aria-current] span { color: rgba(255, 217, 160, .72); }

/* "ניקוי" beside the diary's search. A real control at 25px, next to a submit
   button at 44 — the same mismatch the cancel button had. */
body.inner .entry-search { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
body.inner .entry-search .clear {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 1rem; border-radius: 999px;
  border: 1px solid rgba(242, 240, 235, .16);
  color: var(--dim); font: 400 13px/1 Heebo, sans-serif;
}
body.inner .entry-search .clear:hover { color: #fff; border-color: rgba(242, 240, 235, .34); }
body.inner .entry-search button[type="submit"] { min-height: 44px; }

/* ===========================================================================
   THE ז DEMO, EXACTLY

   Diffed against pages/p57.html rather than eyeballed. site.css sets the page
   at 17px/1.8 and puts negative tracking on every h1 — both inherited into the
   shell and both wrong here. The demo is 16px/1.75 with the title untracked.
   ========================================================================= */
/* #fff rather than the paper white the rest of the site uses. On a near-black
   page #f2f0eb reads warm — seven points of red over blue, invisible on a
   light ground and visibly yellow on this one. It was showing on the prose
   pages and on the form labels, not only in the candles. */
body.inner .page { font: 400 16px/1.75 Heebo, sans-serif; color: #fff; }
body.inner .plate h1,
.photo-head .plate h1 { letter-spacing: normal; }

/* ---------------------------------------------------------------- the films -- */
/* Centred, all of it. Two players and two captions were sitting hard against
   the start edge of a 1440px column with the rest of it empty, because
   everything on this site is set to read from the right and a film is not
   text — it is an object on a page, and an object alone in a column belongs in
   the middle of it.

   Scoped to the films page: the same `.film` classes render inside the admin
   screens, where the form beside them is still left-to-read. */
body.inner .films-page .lede {
  margin-inline: auto;
  text-align: center;
}
body.inner .films-page .film { display: grid; justify-items: center; }
body.inner .films-page .film video,
body.inner .films-page .film .film-embed {
  margin-inline: auto;
  width: 100%;
}
body.inner .films-page .film figcaption {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
body.inner .films-page .film .film-note { display: block; margin-top: .3rem; }
body.inner .films-page .empty { text-align: center; }

/* The old flame. site.css draws one on every `.entry` as a CSS teardrop — that
   was the mark before the נר נשמה was drawn, and it is still there underneath,
   so each entry carried two: a small flame above the date and the glass candle
   beside it. */
body.inner .entry::before { display: none; }

/* An entry with no candle beside it should not reserve the column for one.
   The diary never draws a candle — that mark belongs to the candles — but it
   inherited the two-column grid, so the writer's name and the title sat 42px
   in from the right while the message itself started at the edge. The header
   of every entry was misaligned with its own text, and a 30px gutter held
   nothing at all. */
body.inner .entry:not(:has(.candle)) { grid-template-columns: minmax(0, 1fr); }
body.inner .entry:not(:has(.candle)) .meta,
body.inner .entry:not(:has(.candle)) .hd { grid-column: 1; }

/* ===========================================================================
   THE TWO BOOKS

   They were a grid of `repeat(auto-fit, minmax(14rem, 1fr))`, so two cards
   divided the whole 832px column between them whatever their labels needed —
   379px each for a label wanting 130. A box three times wider than its
   contents reads as a panel, not as something you press.

   The treatment is DeepSeek's, from the panel: the two books as facing pages
   of an open notebook, meeting at a shared spine in the middle, each sized to
   its own text. The search sits on the same row in the width they gave back —
   choosing a book and searching inside it are the same job, and the search had
   been on its own line below.
   ========================================================================= */

body.inner .diary-controls {
  display: flex; align-items: stretch; gap: 1rem;
  margin: 0 0 clamp(1.4rem, 3vw, 2rem);
  flex-wrap: wrap;
}

/* The row itself. Without this the grid from site.css takes over —
   `repeat(auto-fit, minmax(14rem, 1fr))` — and equalises both tabs at 224px,
   which is the stretching this whole change exists to remove. */
body.inner .book-tabs {
  display: flex; grid-template-columns: none;
  align-items: stretch; gap: 0; margin: 0; flex: 0 0 auto;
}

/* Two pills side by side, each sized to its own text.

   This is what the chosen mockup actually rendered, which is not quite what
   the panel wrote: DeepSeek proposed facing pages joined at a square inner
   seam, but the mockup loaded the live stylesheet, where `body.inner
   .book-tabs a` outranks a bare `.book-tabs a` and rounds every control to
   999px. So the thing on the screen — and the thing that was chosen — was two
   fully rounded pills touching in the middle. Shipping the CSS as written
   would have shipped a design nobody saw.

   `flex: 0 0 auto` is what stops them growing back into the space the search
   now uses. */
body.inner .book-tabs a {
  flex: 0 0 auto;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: .62rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(242, 240, 235, .18);
  background: rgba(242, 240, 235, .05);
}
body.inner .book-tabs strong {
  display: block; font: 500 .95rem/1.3 Heebo, sans-serif; color: #dde0e5; white-space: nowrap;
}
body.inner .book-tabs span {
  display: block; font: 400 .74rem/1.3 Heebo, sans-serif; color: var(--dim);
  margin-top: .1rem; white-space: nowrap;
}
body.inner .book-tabs a:hover { background: rgba(255, 255, 255, .1); }
body.inner .book-tabs a[aria-current] {
  background: rgba(255, 217, 160, .12);
  border-color: rgba(255, 217, 160, .45);
  position: relative; z-index: 1;   /* its warm edge sits over the neighbour's */
}
body.inner .book-tabs a[aria-current] strong { color: #ffd9a0; }
body.inner .book-tabs a[aria-current] span { color: rgba(255, 217, 160, .72); }

/* The search takes what the books gave back. */
body.inner .diary-controls .entry-search { flex: 1 1 14rem; margin: 0; }
body.inner .diary-controls .entry-search input { flex: 1 1 auto; min-width: 0; }

@media (max-width: 640px) {
  /* Below this the two books plus a field cannot share a line without the
     field becoming a slot. The books keep their row; the search takes its own. */
  body.inner .diary-controls { gap: .8rem; }
  body.inner .diary-controls .entry-search { flex: 1 0 100%; }
  body.inner .book-tabs span { white-space: normal; }
}

/* The search field takes the pill too, so the row reads as one set of
   controls: two rounded books, a rounded field, a rounded button. It was the
   only 10px corner among them.

   Extra padding on the ends because the curve eats into the line — text set
   hard against a 999px radius looks like it is falling out of the shape. */
body.inner .entry-search input {
  border-radius: 999px;
  padding-inline: 1.2rem;
  min-height: 46px;
}
/* And the same height as the field beside it. They were 48 and 44 — close
   enough to look like a mistake rather than a choice. */
body.inner .entry-search button[type="submit"] { padding-inline: 1.4rem; min-height: 48px; }
body.inner .cta { min-height: 48px; }

/* ------------------------------------------------------- the invitation -- */
/* כתבו ביומן, and הדליקו נר on the candles, float at the foot of the screen.

   The reason is the measurement: on the diary the entries run past twelve
   thousand pixels, so a button anywhere in the flow is either passed before
   you have read anything or reached only by someone who scrolled to the end.
   Fixed, it is in reach at every point of the reading — which is the moment
   the wish to write actually arrives.

   `env(safe-area-inset-bottom)` because on an iPhone the home indicator sits
   exactly where this bar does, and 0 elsewhere. The page pays for the space
   it takes so the bar never covers the last entry or the closing line. */
body.inner .cta-row {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 5;
  margin: 0;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background: rgba(8, 9, 12, .82);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-top: 1px solid rgba(242, 240, 235, .09);
}
/* The space is reserved at the very end of the column, not inside `.page` —
   the closing line is a sibling of it, so padding there left יהי זכרו ברוך
   under the bar at the foot of every page. */
body.inner .site-foot { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }

/* But only where there is a bar to reserve for. The forms — a candle, a diary
   entry, a message to the family — carry no .cta-row, and on those pages the
   reservation is 6rem of empty black under the closing line, which on a phone
   is most of a screen of nothing.
 *
 * Written as :not(:has()) rather than :has() so a browser that understands
 * neither keeps the generous value: the failure that matters is the bar
 * covering the last line, not a gap under it. */
body.inner:not(:has(.cta-row)) .site-foot {
  padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
}
body.inner:not(:has(.cta-row)) .page { padding-bottom: clamp(2.5rem, 6vw, 4rem); }

/* A fixed bar over a page that is already short is just a bar. Under about
   520px of height — a phone in landscape, a small window — it goes back into
   the flow and the reserved space comes off again. */
@media (max-height: 520px) {
  body.inner .cta-row { position: static; padding: 0; background: none; border-top: 0; }
  body.inner .site-foot { padding-bottom: 3rem; }
}

@media print {
  body.inner .cta-row { display: none; }
}

/* --------------------------------------------------- the books, retitled -- */
/* Names only. Each pill held a title and a sentence, which made every choice
   three times taller than its own name — and the sentences are read once and
   then never again. They moved to one line under the row. */
/* `[aria-current]` too: the shared "where you are" rule further up sets
   `padding: .62rem 1.15rem` for every kind of tab, so the open book was 18.4px
   where its neighbour was 20 — and the same label measured 145.08px on one
   page and 148.30px on the other. Three pixels, but it moved everything beside
   it when you switched books, which is exactly the complaint. */
body.inner .book-tabs a,
body.inner .book-tabs a[aria-current] { padding: 0 1.25rem; justify-content: center; }
body.inner .book-tabs strong { font: 400 15px/1 Heebo, sans-serif; letter-spacing: .02em; }

/* The row is now one height throughout: the two books, the search field and
   its button all 48px, which is also the write button. It was 59 / 48 / 48. */
body.inner .diary-controls > * { min-height: 48px; }
body.inner .book-tabs a { min-height: 48px; }
body.inner .entry-search { align-items: stretch; }
body.inner .entry-search input,
body.inner .entry-search button[type="submit"] { min-height: 48px; height: 48px; }

/* Both explanations, once each, under the whole row. */
body.inner .book-hint {
  margin: -.4rem 0 clamp(1.4rem, 3vw, 2rem);
  font: 400 12.5px/1.7 Heebo, sans-serif;
  color: var(--dim);
}
body.inner .book-hint b { font-weight: 500; color: #9ba1ab; }

/* ------------------------------------------------------- back to the top -- */
/* The diary runs past 12,000px and the only navigation is at the top of it.
 *
 * On the inline-END side, which is the visual left on this RTL page — `left`
 * would put it under the reader's thumb on one direction and in the wrong
 * corner on the other. It is a link to #top, so it works with no script; the
 * script only hides it until there is something to come back from. */
body.inner .to-top {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 6;                       /* over the write bar, never under it */
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(8, 9, 12, .82);
  border: 1px solid rgba(242, 240, 235, .18);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
}
body.inner .to-top[hidden] { display: none; }
body.inner .to-top:hover { border-color: var(--warm); color: #fff; }
body.inner .to-top:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; }

/* The chevron, drawn rather than typed: an arrow glyph sits differently in
   every font on the page and this one has to be square in a circle. */
body.inner .to-top span {
  width: 11px; height: 11px;
  border-top: 2px solid currentColor;
  border-inline-start: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: 3px;
}

/* Above the write bar on the pages that carry one — it is fixed, full width
   and 71px tall, so `bottom: 1rem` puts this behind it. */
body.inner:has(.cta-row) .to-top {
  bottom: calc(71px + 1rem + env(safe-area-inset-bottom, 0px));
}

/* The bar goes back into the flow on a short screen, and this comes back down
   with it — see the note on .cta-row above. */
@media (max-height: 520px) {
  body.inner:has(.cta-row) .to-top { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
}

@media print { body.inner .to-top { display: none; } }

/* --------------------------------------------------------- long entries -- */
/* Folded, never truncated: the whole text is in the page and one press away,
   and with no JavaScript nothing folds at all. The fade is a hint that there
   is more, which a hard cut is not — a paragraph ending mid-sentence at a
   straight edge reads as a bug rather than as a fold. */
body.inner .body.is-folded {
  max-height: var(--fold-to, 520px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
}

body.inner .unfold {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; margin: .5rem 0 0; padding: 0 1.15rem;
  background: rgba(242, 240, 235, .05);
  border: 1px solid rgba(242, 240, 235, .18);
  border-radius: 999px;
  color: rgba(255, 255, 255, .88);
  font: 400 13px/1 Heebo, sans-serif; letter-spacing: .06em;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
body.inner .unfold:hover { border-color: var(--warm); color: #fff; }
body.inner .unfold:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; }

/* Printing a memorial should print what people wrote, not a row of buttons
   over half of it. */
@media print {
  body.inner .body.is-folded { max-height: none; mask-image: none; -webkit-mask-image: none; }
  body.inner .unfold { display: none; }
}

/* The folded text is still in the DOM — that is the no-JS contract — so the
   browser lays it out and paints it even though it is clipped. content-
   visibility lets it skip the work until the reader unfolds, without removing
   a single word from the page. The intrinsic size keeps the scrollbar honest
   before it is measured. */
body.inner .body.is-folded {
  content-visibility: auto;
  contain-intrinsic-size: auto var(--fold-to, 520px);
}