/* ===========================================================================
   THE HOME PAGE — הקיר

   Loaded only by `/`. Everything is scoped under `body.home` so it cannot
   reach the rest of the site, which keeps its own type and its own header.

   The idea, after some forty rejected attempts: the archive itself is the
   design. Eighty-two of Tomer's own photographs, edge to edge, with the wing
   mirror photograph mounted inside them at size. It cannot read as a template
   because the first screen is made of pictures only this family has — swap the
   archive and the page stops existing.

   The craft rules, since "cheap and unfinished" was the verdict on the
   containers that preceded it:
     · one thing is large (the name); everything else is 13px and quiet
     · the photographs are at full strength — nothing is dimmed to make room
       for an effect, because the photographs ARE the effect
     · nothing moves on load
   ========================================================================= */

/* The two faces the homepage adds, both chosen in the picker against the
   photograph itself rather than on a specimen sheet.

   Gveret Levin is handwriting, and it carries his name. Heebo carries the five
   destinations — never the handwriting, which would make the navigation look
   like part of the inscription.

   Gveret Levin has no digits at all. Not "poor digits": none. So the years fall
   back to Assistant, which site.css already serves, and take a drawn 700 rather
   than a browser's synthetic smear of a weight the file does not contain. */
@font-face {
  font-family: 'Gveret';
  font-style: normal;
  font-weight: 100 900;
  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;
}

/* ---------------------------------------------------------------- tokens -- */
/* Every value the picker settled, in one place — the face, the size, and the
   four nudges that placed the bar and the name against this particular
   photograph. They are the chooser's own numbers, not re-derived here. */
body.home {
  --void: #08090c;
  --gap: 2px;

  --nf: Gveret, cursive;           /* the name — כתב יד */
  --nw: 400;
  --ns: 3.6vw;                     /* the face's own size… */
  --nsc: .64;                      /* …and the scale set on the slider */
  --ntr: 0;                        /* tracking, the name */
  --ndt: .38em;                    /* tracking, the years — they are spaced out */
  --yf: Gveret, Assistant, sans-serif;   /* Gveret has no digits; Assistant draws them */
  --yw: 700;

  --bf: Heebo, sans-serif;         /* the navigation, never the handwriting */
  --bw: 400;

  /* Placement, in physical pixels: +x is right on screen whatever the page's
     direction, +y is down. The bar sits a little right of centre and the name a
     little left and lower than the geometry alone would put them, because the
     mirror is not centred in the frame and the type has to answer to the
     photograph rather than to the box. */
  --dx: 58px;                      /* the bar */
  --dy: 0px;
  --px: -26px;                     /* the name */
  --py: 16px;
}

/* The page is the photograph: no header, no measure, no page padding, and none
   of the warm gradient the inner pages carry — it would sit over the pictures
   as a haze. */
body.home { background: var(--void); overflow: hidden; }
body.home::before { display: none; }
body.home main { position: relative; z-index: 1; padding: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; }
body.home a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------- the wall -- */
/* The columns and the row height are set by /js/wall.js, which solves for
   square cells at the viewport it actually finds. The CSS values here are the
   fallback for the fraction of a second before it runs, and for no-JS. */
.wall {
  flex: 1; min-height: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(var(--cols, 12), 1fr);
  /* `1fr` as the floor's ceiling: the solver lands on whole square cells, and
     whatever pixels are left over after that division are shared out among
     the rows instead of being left as a black band at the foot of the
     page. A row two pixels taller than it is wide is invisible; a hundred
     pixels of black under the photographs is not. */
  /* Exactly `rows` equal rows filling the container's full height, so the
     photographs reach the bottom of the screen instead of stopping short and
     leaving a black band. grid-auto-rows stays as the fallback for any stray
     implicit row the tile count might create. */
  grid-template-rows: repeat(var(--rows, 7), minmax(0, 1fr));
  grid-auto-rows: minmax(var(--cell, 110px), 1fr);
  grid-auto-flow: dense;         /* let photographs close up around the mount */
  overflow: hidden;
  background: var(--void);
  padding: var(--gap);
}

.wall img {
  width: 100%; height: 100%; object-fit: cover;
  /* The tile file is already the chosen square — the crop was decided by hand,
     one photograph at a time — so there is no focal point to apply here. */
  transform: scale(var(--hov, 1));
  /* 2006 compacts were flat; a touch of contrast, nothing that reads as a filter */
  filter: contrast(1.05) saturate(1.03);
  transition: transform .5s cubic-bezier(.2, .8, .3, 1), filter .35s ease;
}
.wall a.tile { display: block; overflow: hidden; }
.wall a.tile:hover img { --hov: 1.06; filter: contrast(1.08) saturate(1.1) brightness(1.06); }

/* ------------------------------------------------------------ the mount -- */
/* Centred in the wall, spanning whole cells, with no border and no shadow, so
   it reads as part of the grid rather than as a panel floating over it.

   Reserving a strip underneath it for the name is what produced a black band
   across the middle of the wall — the caption cost more height than the type
   in it, and the leftover read as a hole. The name goes in the corner instead
   and those rows go back to being photographs. */
/* `margin: 0` first, and it is load-bearing. This is a <figure>, and the
   browser's own default is `margin: 1em 40px` — eighty pixels of it came off
   the width inside a grid area whose tracks were already solved, so the
   photograph rendered four-fifths the size the layout had computed for it and
   the mat around it stopped being even. The demo reset it in its own base
   sheet; site.css does not. */
.mount {
  margin: 0;
  grid-column: var(--mc, 4) / span var(--mw, 5);
  grid-row: var(--mr, 3) / span var(--mh, 3);
  position: relative;
  background: var(--void);
  overflow: hidden;
}
/* Pinned to the block's edges rather than sized with `height:100%`. The grid
   area's height is indefinite, so `height:100%` degrades to `auto`, the image
   sizes itself from its own ratio, overflows, and is cropped by the very
   `overflow:hidden` meant to be harmless. `inset:0` makes the height definite.

   `cover` rather than `contain`: contain guarantees the whole frame but pays
   with a black band wherever the block misses 2000:848, and the block can only
   span whole cells, so some mismatch always survives. What gets trimmed is
   chosen instead of left to chance — anchored low, so the loss comes off the
   sky and the open sea. The grass, the horses and the handlebar along the
   bottom are never touched, which was the whole point. */
.mount .shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 82%;
  filter: contrast(1.04) saturate(1.04);
}

/* -------------------------------------------------------------- the name -- */
.plate {
  position: absolute; z-index: 3;
  inset-inline-end: 4.5%; bottom: calc(7% - var(--py));
  transform: translateX(var(--px));
  pointer-events: none; text-align: end; width: max-content;
}
.plate h1 {
  display: block; margin: 0;
  font-family: var(--nf); font-weight: var(--nw);
  font-size: calc(var(--ns) * var(--nsc)); letter-spacing: var(--ntr);
  line-height: 1; color: #fff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .75);
}
/* The years are an LTR run inside an RTL page: without isolation the
   separators reorder and "1988 — 2006" paints as "2006 — 1988". */
.plate i {
  display: block; font-style: normal;
  font-family: var(--yf); font-weight: var(--yw);
  font-size: max(11px, calc(var(--ns) * var(--nsc) * .3));
  line-height: normal;             /* not site.css's 1.8 — see the note below */
  letter-spacing: var(--ndt);
  color: rgba(255, 247, 235, .92);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .9);
  direction: ltr; unicode-bidi: isolate;
  margin-top: .5em; text-align: center;
}

/* --------------------------------------------------------------- the bar -- */
/* Centred, 2% down from the top of the frame. That figure is not arbitrary:
   the wing mirror's upper edge is at 15.5% and his face is the one thing on
   this page that may never be covered.

   One continuous bar with circular ends and hairlines between the
   destinations, so it reads as five parts of a single object rather than five
   words that happen to share a background — and a bright hairline along its
   top edge, as though light from the sky were catching it. That line is the
   only ornament on the page, and it points upward, away from the photograph. */
.inside {
  position: absolute; z-index: 4; inset-inline: 0; top: calc(2% + var(--dy));
  transform: translateX(var(--dx));
  display: flex; justify-content: center; pointer-events: none;
}
.inside nav {
  display: inline-flex; align-items: stretch; pointer-events: auto;
  position: relative; overflow: hidden;
  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);
}
.inside nav::before {
  content: ""; position: absolute; inset-inline: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
}
.inside a {
  font-family: var(--bf); font-weight: var(--bw);
  font-size: clamp(12.5px, 1.1vw, 14.5px); letter-spacing: .08em;
  /* site.css sets `body { font: 400 17px/1.8 … }` and that leading is
     inherited here, where the type is 14.5px and set in a pill. Left alone it
     made the bar five pixels taller than the shape chosen against the
     photograph. */
  line-height: normal;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap; display: flex; align-items: center;
  /* 44px is the floor for something pressed with a thumb. These measured 34. */
  min-height: 44px;
  padding: .5rem clamp(.9rem, 1.8vw, 1.35rem);
  transition: background .2s, color .2s;
}
.inside a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.inside a[aria-current] { color: #fff; }
.inside .sep { width: 1px; flex: none; background: rgba(242, 240, 235, .2); }

/* --------------------------------------------------------------- the foot -- */
/* What is happening, or — when nothing is — what the archive holds, set small
   and factual. No large stat numbers: that is the template move this design
   was chosen over. */
/* `margin: 0` is not tidiness. site.css gives every paragraph a bottom margin,
   and this one is a flex item in a 100vh column: the margin came off the
   wall's height, which is the number the grid solver works from. Twenty-five
   pixels there moved the whole wall to a different solution — fewer columns, a
   smaller mount — and the home page stopped matching the design it was built
   from. */
.foot {
  flex: none; margin: 0;
  display: flex; align-items: center; justify-content: center;
  gap: .7rem; flex-wrap: wrap;
  padding: .8rem 1rem .95rem;
  font-size: 12.5px; line-height: 1.5; color: #9ba1ab;
  border-top: 1px solid rgba(242, 240, 235, .09);
}
.foot b { color: #ffd9a0; font-weight: 400; font-size: 11px; letter-spacing: .14em; }
.foot .d { color: #5f6671; font-size: 11px; }
.foot a { color: #c9cdd4; border-bottom: 1px solid transparent; }
.foot a:hover { color: #fff; border-bottom-color: #ffd9a0; }

/* -------------------------------------------------------------- narrower -- */
/* The bar stays where it is on a desktop: a pill across the top of the
   photograph, above the mirror.
 *
 * It had been moved to the foot of the frame, because at the photograph's own
 * 2000:848 ratio a 390px screen gives a 165px band and his face sits at y40 —
 * a bar with 44px tap targets ends at y49 and would land across it. The answer
 * is not to move the menu; it is to give the photograph the height it needs.
 * At 62vh his face starts near y120 and the bar clears it comfortably, with
 * `cover` taking the difference off the sides where there is only sea. */
@media (max-width: 700px) {
  /* The nudges were dialled in against a frame 1500px wide. Kept, 58px is a
     seventh of a phone screen and pushes the bar off the side of it. */
  body.home { --dx: 0px; --dy: 0px; --px: 0px; --py: 0px; }

  /* His name to the left of the photograph, low, clear of the bar above it. */
  /* Lower into the bottom-left corner, over the grass, clear of the mirror
     and the handlebar. Was 9% up; 3% drops it to the corner Mike marked. */
  .plate { inset-inline-end: 5%; top: auto; bottom: 3%; }
  .plate h1 { font-size: clamp(1.3rem, 6.5vw, 2rem); }

  .inside { top: 3%; bottom: auto; }
  /* Matched to the desktop pill — one rounded row with the hairline dividers
     kept, not wrapped with the dividers hidden. vw-scaled so the five items
     and four dividers hold one line down to 320px. */
  .inside nav { flex-wrap: nowrap; max-width: calc(100vw - 1.4rem); }
  .inside a {
    font-size: clamp(10px, 3.05vw, 13px);
    letter-spacing: .04em;
    padding: 0 clamp(.42rem, 1.9vw, 1rem);
  }

  .foot { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .wall img { transition: none; }
  .wall a.tile:hover img { --hov: 1; }
}

/* Nothing to say. The strip holds the line it would have taken — see the note
   in index.njk: this height is an input to the wall's grid solver, and giving
   it back changes the whole page. `1lh` is the text line it is reserving, so
   it stays correct when the font size changes at the narrow breakpoint. */
/* No message, no strip. It used to keep the line it would have occupied and
   show nothing, which on the home page is a band of black under the
   photographs. Removed from the flow entirely when quiet, so the wall fills
   the whole screen. Mike asked for exactly this. */
.foot.is-quiet { display: none; }

/* The wall for whoever runs no script — a plain grid of the same tiles. It
   exists inside <noscript>, so with JavaScript on it costs nothing and shows
   nowhere. */
.wall-noscript {
  list-style: none; margin: 0; padding: .5rem;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.wall-noscript img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 6px; height: auto; }