/* _home3.css - HAND-WRITTEN, and registered against /drafts/home-3 alone.

   Draft 3 of the home page, 18 September 2026 (Jack): the film with no search
   box under it, and a prompt to go down instead.

   That prompt, the wall's own spacing and one performance rule are ALL this
   file holds. Everything else on the page belongs to a sheet that already
   draws it: the hero is _welcome.css's, and the sticky bar, the row of words,
   the grid and the card are _explore.css's, class for class, because Jack
   asked for the tabs to be "exact same and work the exact same as explore
   page". The first cut of this file drew its own row and its own grid beside
   Explore's; that is why it is now so short.

   The precedent for a draft with its own hand-written sheet is _cshelf.css,
   written for /try/cottages-shelf on 10 September. If this draft is kept,
   these rules go into the home page's mock and build-home.py; if not, delete
   this file and the three lines in config/design.php. */

/* ------------------------------------------------------- the opening, live
   Jack, 18 September: "i want to get the feeling that we have for the rogie
   falls… it shows time, maybe weather, i need the feeling of a live cam
   almost."

   So the whole opening is the Rogie card grown to the page: the place named
   against a lit dot at the top left, the clock running opposite it, and along
   the foot the things that are true at this moment - the date, the season,
   and when the light comes and goes today.

   Everything is small, spaced and monospaced-feeling rather than designed,
   because that is what makes a frame read as a camera rather than a poster.
   Nothing says the word live; a second hand says it better. */
/* Below the bar, not level with it: the mark sits top left and "Start here"
   top right, so a row at the top of the frame runs straight through both. */
.h3-burn{position:absolute;top:var(--bar,76px);left:0;right:0;z-index:3;
  display:flex;justify-content:space-between;align-items:center;
  padding:clamp(14px,1.8vw,24px) clamp(20px,4vw,60px);
  font:600 9.5px var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.88);pointer-events:none}
.h3-burn .h3-where{display:inline-flex;align-items:center;gap:10px}
/* the dot is _home.css's own, from the card */
.h3-burn .h3-clock{font-variant-numeric:tabular-nums;letter-spacing:.18em}

.h3-strip{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;flex-wrap:wrap;gap:6px clamp(16px,2.4vw,34px);
  padding:0 clamp(20px,4vw,60px) clamp(18px,2.2vw,30px);
  font:600 9.5px var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.66);pointer-events:none}
.h3-strip span{white-space:nowrap}
/* the date leads, so the eye lands on the day rather than on the sunrise */
.h3-strip span:first-child{color:rgba(255,255,255,.9)}

/* The opening carries its own words in the middle, so the veil has to work
   top and bottom rather than only at the foot. */
.h3-hero .hr-veil{background:linear-gradient(to bottom,
  rgba(12,14,11,.55) 0%,rgba(12,14,11,.18) 22%,rgba(12,14,11,.22) 52%,
  rgba(12,14,11,.62) 100%)}

@media(max-width:700px){
  .h3-strip span:nth-child(n+4){display:none}
}

/* ---------------------------------------------------------------- the prompt
   What stands where the search box did. No count - Jack, 18 September: "never
   mention the number of places". A word, and a hairline that falls towards
   what is below. The whole block is the button. */
.h3-down{display:block;margin:34px auto 0;padding:0;background:none;border:0;
  cursor:pointer;text-align:center;color:#fff}
.h3-down-w{display:block;font-family:var(--face);font-weight:400;
  font-size:min(clamp(20px,1.8vw,26px), 28px + (clamp(20px,1.8vw,26px) - 28px) * 0.6);line-height:1.1;letter-spacing:-.01em;color:#fff}
/* the rule falls, waits, and falls again - the one moving thing on the page */
.h3-down-r{display:block;width:1px;height:54px;margin:16px auto 0;
  background:rgba(255,255,255,.28);position:relative;overflow:hidden}
.h3-down-r i{position:absolute;left:0;top:-54px;width:1px;height:54px;
  background:#C08C3D;animation:h3fall 2.6s cubic-bezier(.22,.8,.24,1) infinite}
@keyframes h3fall{
  0%{transform:translateY(0)}
  55%{transform:translateY(108px)}
  100%{transform:translateY(108px)}
}
.h3-down:hover .h3-down-r{background:rgba(255,255,255,.5)}
@media(prefers-reduced-motion:reduce){
  .h3-down-r i{animation:none;top:0}
}

/* ------------------------------------------------------------------ the wall
   Explore opens on its own index, so its first section carries spacing this
   page does not want: here the wall follows the sticky bar directly. */
.h3-wall{padding-top:0;padding-bottom:clamp(60px,7vw,96px)}

/* `content-visibility:auto` WAS here, and it was wrong.

   It skips laying out and painting a card that is off screen, which is a real
   saving at two thousand cards - but the wall never holds two thousand. The
   pagination mounts 48 and adds 100 at a time, so a few hundred is the most
   that is ever in the DOM, and at that size the saving is not measurable.

   What it did cost was visible: a skipped card paints NOTHING and reports the
   fallback height instead of its own (measured: every card exactly 340px, the
   `contain-intrinsic-size` value, while its photograph sat loaded in memory
   at 450px wide). Jack, 18 September: "why arnt the images on the listings
   loading?" They were. They were being deliberately not drawn.

   An optimisation that is redundant and lies about what is on the screen is
   worse than none, so the cards are ordinary cards again. */

/* what the observer watches for: the next hundred */
.h3-end{height:1px}

/* ---------------------------------------------- nothing waits to be shown
   `_explore.css` starts every card at `opacity:0` and lifts it with an
   `ex-rise` animation. That is the third time this pattern has cost a day on
   this project (the Studio's columns, the framed page, and now this): a
   window that is not painting never runs the animation, and the thing stays
   invisible for good.

   It is a worse bet here than on Explore, because this wall mounts a hundred
   more cards every time the reader nears the foot of it - a card that arrives
   while the tab is in the background would never be seen. And on two thousand
   cards a fade on each one is noise rather than craft.

   So the cards are simply there. Same for the photograph inside: see the
   `up` class in welcome-3.tsx, without which every picture loads correctly
   and paints at zero. */
.h3-wall .ex-c{opacity:1;transform:none;animation:none}

/* ------------------------------------------------- the things that are not
                                                      places
   A collection, an itinerary or an article sits in the same card as a place,
   because the wall should read as one wall. The only thing that separates
   them is the line above the name: a place says where it is, and these say
   what they are - and that word is lit, so it is findable at a glance without
   a badge, a border or a second card shape.

   Bracken is the site's "the one thing lit", and on this page nothing else
   claims it. */
.h3-other .eye{color:#C08C3D}

/* ------------------------------------------------------- Scotland, now
   The waterfall stands two columns wide and two rows deep, so it is twice
   the size of everything round it and the only thing on the wall that is not
   a card. `--td-shape` is the home page's own token for the frame; here it is
   set to the block it occupies, so the film fills it however many columns the
   page is running. */
.h3-live{grid-column:span 2;grid-row:span 2;--td-shape:auto}
.h3-live video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Below the three-column widths the wall runs two across, and a thing two
   columns wide is then the whole row - which is right: it is the one frame
   that deserves it. It keeps its own shape rather than a square. */
@media(max-width:1000px){
  .h3-live{grid-row:span 1;--td-shape:4/5}
}

/* what a local said - the only words on the wall that are somebody's own */
.h3-said{display:block;margin-top:8px;font:italic 400 16px/1.55 var(--serif);
  color:var(--ink-75)}

/* ------------------------------------------------------------- nothing yet
   Plan has no content and will not for a while. An empty grid reads as a
   broken page, so the word says what it is for instead. */
.h3-soon{margin:0;padding:clamp(48px,8vw,96px) 0;text-align:center;
  font:400 19px/1.7 var(--serif);color:var(--ink-55);max-width:44ch;
  margin-inline:auto}

/* ------------------------------------------------------------- four across
   Jack, 18 September: "maybe try row of 4 listings so we can make them
   bigger." Explore runs five above 1400px and already steps to 4, 3 and 2
   below it, so only the widest case moves. Setting --ex-cols on the wall
   itself would beat :root at EVERY width and put four cards on a phone,
   which is why this is behind a min-width rather than set outright. */
@media(min-width:1401px){
  .h3-wall .ex-grid{--ex-cols:3}
}
/* Between 1000 and 1400 Explore drops to four; three there too, so the step
   down the page takes is 3-3-2 rather than 3-4-2, which reads as a mistake. */
@media(min-width:1001px) and (max-width:1400px){
  .h3-wall .ex-grid{--ex-cols:3}
}

/* ---------------------------------------------------------------- the words
   Explore HIDES its row of categories on the desktop - "on the desktop the
   index above does the choosing, so the row is the order... the category words
   stay for the phone" (its own comment, 14 September). Taking Explore's
   classes took that rule with it, so the tabs were invisible on any real
   screen, which is what Jack saw: "i dont see the tabs?"

   Here the row IS the navigation - there is no index above it doing the
   choosing - so it shows at every width. It still scrolls sideways rather
   than wrapping, which is what it already does on the phone.

   Centred, at Jack's word. `safe` is doing real work there: a centred flex
   row that overflows pushes its first items off the left edge, where they
   cannot be scrolled back to, and twelve words overflow a phone. `safe
   center` centres while it fits and falls back to the start when it does
   not. */
.h3-bar .ex-rowcats{display:flex;justify-content:safe center}