/* _home5.css - HAND-WRITTEN, registered against /drafts/home-5 alone.

   Draft 5: the opening as a SPLIT SCREEN. Jack, 19 September, on the round
   before: "make it more like its a split screen, still the border etc, but the
   heading needs to be moved right so its centered in the space... SAT 19 SEP
   2026 / Autumn / Light at 06:51 / Dark at 19:21, this is all to do with the
   video so all needs to go around the video. The heading should say Good
   morning from Scotland, then text saying scroll down to start your journey.
   Everything just a bit more centered and split."

   SO THE PAGE IS TWO HALVES INSIDE ONE BORDER.

   The LEFT half is the page talking: the greeting, and the way in. Centred in
   its own half rather than ranged against the outside margin, which is what
   made the first cut read as a wide margin instead of as a half.

   The RIGHT half is the film and only the film. Everything that is true of
   the picture rings it: the place and the clock along the top edge, the date,
   the season and the light times along the foot. Nothing about the day is
   left over on the page's side of the line, and nothing is written over the
   water.

   GOOD MORNING FROM SCOTLAND is by the clock in Ross-shire, not the reader's
   own - the point of the opening is that it is morning THERE. The server
   renders the right word so the first paint is never wrong, and the same tick
   that runs the clock keeps it right after that.

   ONE NUMBER SETS THE PLATE: --cv-plate, which is square, and the two rows of
   words and the border are measured off it.

   The colour is --cask (#392916), the brown the bar is painted in. */

.cv-hero{--cv-edge:var(--bar,76px);background:var(--cask)}

.cv-split{
  /* A THIRD AND TWO THIRDS - frame D off /design-2026/hero-split.html, which
     Jack chose on 19 September. Not every split is half and half: a greeting
     is a short line and wants a narrow measure, and the photograph is the
     thing worth the room. The film is sized off the WIDTH it is given, never
     off the hero's height - that was the fault in the half-and-half cut. */
  --cv-words:32%;
  --cv-gut:clamp(26px,3.2vw,60px);
  /* the hero's own height, mirrored so the film can be capped against it:
     _home.css sets .hr-hero to calc(100vh - 120px) with a 560px floor. */
  --cv-h:max(calc(100vh - 120px),560px);
  /* THE FILM'S WIDTH. The one number the whole page is built on: the right
     column is exactly this wide, so the left column is exactly the rest, and
     "centred between the edge of the page and the edge of the picture"
     becomes something the layout can promise.

     60vw IS D'S OWN PROPORTION. On the sheet the film is 61% of the frame
     and its left edge falls at 34%; this gives 34% at 1440 and 36% at 1920.
     Sizing it by HEIGHT instead - which is what the round before did - gave
     49% and 47%, because the opening is a wider, shorter shape than the
     sheet's 16:9 stage and the same ratio buys a much narrower picture on it.

     The second term is the guard: on a window too short to hold the film
     between its borders, the height decides instead.

     48.5vw AND A 6.2vw INSET are Jack's, 19 September. He took the width from
     54.5 to 48.5 - which moves the film's left edge 6vw to the RIGHT, since
     it was flush to the border - and then dragged it 119px back, which is
     that same 6vw. He is holding the left edge still and taking the film off
     the right border. So the inset is a number of its own rather than a drag,
     and the band beside the film stays where he put it, at 41% of the page. */
  /* THE ARROWS take a row under the picture, so the film comes down a
     little to make room - Jack, "reduce video size a little so it fits" -
     and the inset grows by exactly what the width loses, which holds the
     film's LEFT edge at the 41% he has now pinned it to twice. */
  --cv-inset:7.2vw;
  --cv-row:calc(30px + 18px);
  --cv-filmw:min(47.5vw,calc((var(--cv-h) - var(--cv-edge)*2 - var(--bar,76px)
    - var(--cv-row)) * 1.58));
  display:flex;align-items:stretch;
  /* CENTRED UNDER THE BAR, NOT IN THE HERO. The bar is 76px tall and it sits
     ON the opening, so a film centred in the hero has one bar-height less air
     showing above it than below it - which is what Jack has been correcting
     by hand, four rounds running, by pushing everything down twenty-odd
     pixels. One bar of top padding moves the column's middle down by half a
     bar and the two gaps you can SEE become the same number. */
  padding:calc(var(--cv-edge) + var(--bar,76px)) var(--cv-edge) var(--cv-edge)}

/* ================================================== the shadow, as the ground
   Jack chose "C - behind it" off /design-2026/hero-textures.html, and then
   the second of his two clips over the first (19 September: "use the new
   video i prefer this one"): leaf shadows drifting over warm plaster, denser
   and further out of focus than the first, looped forward-then-back so the
   drift never jumps. `?bg=1` puts the first one back.

   AT FULL, off Jack's own tuner line of 19 September (--tx-op:1). It went
   .55, then .42 when he asked to lighten it, then all the way up once he had
   the dial in his hand and could see what the clip does with the whole page.
   Soft light is what makes that survivable: it lifts and drops the brown
   without ever replacing it, so at 1 the wall is lit rather than papered.

   Soft light, at just over half: the shadow is a SURFACE. Multiply is for
   paper and press texture, screen for light leaks; soft light is the one that
   lets the cask brown stay brown underneath instead of going muddy. The
   research is in docs/decisions.md, 19 September. */
/* THE LEAF SHADOWS STAY AS THEY WERE. Not a dark layer in the same sense -
   soft light lifts and drops the cask brown rather than replacing it - and
   Jack has kept it at 1 since his own tuner line of 19 September. On the dial
   so it can be moved, at 1 because that is where he wants it. */
.cv-tex{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  opacity:var(--tx-op,1);
  transition:opacity .25s cubic-bezier(.22,.8,.24,1);
  mix-blend-mode:soft-light}
.cv-tex video{width:100%;height:100%;object-fit:cover;display:block;
  /* NEVER A HARDWARE OVERLAY. Jack, 23 September, on Skye: "the opacity on
     the main video keeps going on and off as you switch through the other
     video". Nothing on the page changes (measured: same element, playing,
     opacity 1, the clip's brightness flat through its loop); Chrome on
     Windows hands a full-page film to the graphics card as an overlay when
     nothing moves over it and takes it back while the card beside it
     cross-fades, and the two paths draw the colour differently. A film that
     is not quite opaque is never made an overlay, so it is drawn one way
     only. .999 cannot be seen. */
  opacity:.999}

/* ---- FILM TREATMENT, on the hero test only ----
   Soft light is right for the leaf texture and wrong for a photograph: it
   lifts wherever the film is brighter than the ground, so an open-water clip
   drives the whole page to white and takes the type with it.

   A film gets normal blend and a scrim instead. The scrim is a child of
   .cv-tex rather than a layer over it, so it darkens the picture BEFORE the
   blend - dimming the film rather than greying the page - and both numbers
   are dials, because how much a clip needs is a property of the clip. */
.cv-hero.hb-film .cv-tex{mix-blend-mode:var(--gr-blend,normal);
  opacity:var(--gr-op,1)}
.cv-hero.hb-film .cv-tex::after{content:'';position:absolute;inset:0;
  background:var(--cask,#392916);opacity:var(--gr-dark,.52);
  pointer-events:none}

/* The fold is gone with the half-and-half. A hairline down the middle of a
   page whose fold is at a third only tells the eye the wrong thing. */

/* ================================================== the left half */
/* CENTRED BETWEEN THE EDGE OF THE PAGE AND THE EDGE OF THE PICTURE.

   The negative margin is the whole trick: it pulls this column out past the
   border so it starts at the hero's own left edge, and it ends where the film
   begins, with no gutter taken out of it. Its middle is therefore exactly
   half way between the two, which is what Jack asked for. Ranged left on the
   border - the round before - put the heading hard against one end of that
   space with all of it on the other side. */
.cv-word{position:relative;z-index:2;flex:1 1 auto;min-width:0;
  margin-left:calc(-1 * var(--cv-edge));padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* +10 on his line, under a heading that has grown by a third */
  text-align:center;gap:clamp(24px,3.9vh,50px)}

/* `.hr-h1` comes from _home.css, where it is sized and shadowed for a heading
   lying across a full-bleed photograph. Every property that was working
   together there is reset here, not only the size. */
/* TWO LINES, ALWAYS. Jack: "the title should read on two lines eg Good
   morning / from Scotland."

   It was one line on a 1920 screen for two reasons at once: the size stopped
   at 44px where the sheet's scales with the frame, and the column was wider
   than the sheet's. Both are fixed - 3.4vw is the sheet's own proportion -
   and the measure is held at 9.5em so the break does not depend on the
   window. `text-wrap:balance` then puts it where a reader would: "Good
   morning" against "from Scotland." are within two characters of each other,
   and "Good morning from" against "Scotland." are not. */
/* 76px at 1920 is 3.96vw, and the leading and tracking are his too - the
   tracking coming off -.012em and up to nearly nothing, which at this size is
   right: Larken tightens well at 40px and stops wanting it at 70. */
.cv-word .hr-h1{width:auto;max-width:min(88%,9.5em);margin:0;text-align:center;
  text-wrap:balance;font-size:min(clamp(30px,3.85vw,82px), 28px + (clamp(30px,3.85vw,82px) - 28px) * 0.6);line-height:1.12;
  letter-spacing:.004em;text-shadow:0 2px 34px rgba(10,14,10,.38)}

/* The way in: small capitals and a hairline that falls, the way a printed
   page marks a turn. The whole block is the button; it is only ever a
   shortcut, because the wall is one scroll away regardless. */
/* THE WAY DOWN IS A SENTENCE NOW - frame B off
   /design-2026/hero-line.html, which Jack picked on 19 September.

   It says what o'clock it is and then asks you down, in one breath, which is
   what makes the greeting above it mean something rather than just be a
   greeting. IN SCOTLAND rather than at the falls: the film beside it already
   says where it is, and says somewhere else the moment the arrows are
   pressed, so the sentence names the country and lets the picture name the
   place. */
/* THE LINE HANGS BELOW THE WORDS RATHER THAN COUNTING AS PART OF THEM.

   Jack, 19 September: "can we move Good afternoon from Scotland / It is 13:12
   in Scotland down a little bit so it looks visually centered."

   He is right and the cause is the falling line. It is up to 150px tall and
   almost invisible, so with it inside the block the column centred 335px of
   which only the top 200 could be seen - and the words sat some seventy
   pixels high. Hung below, the block is the words alone, the words centre,
   and the line falls into the space underneath where it always belonged. */
.cv-down{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:22px;margin:0;padding:0;background:none;border:0;cursor:pointer;color:#fff;
  text-align:center}
.cv-says{font:400 clamp(14px,.99vw,20px)/1.5 var(--serif);
  letter-spacing:normal;text-transform:none;max-width:26em;
  /* the break is editorial and sits between the two clauses: what o'clock it
     is on one line, what to do about it on the next. Left to wrap on its own
     it put "happening." alone on the second line. */
  color:rgba(255,255,255,.9);text-shadow:0 1px 16px rgba(8,10,8,.6);
  transition:color .25s}
/* THE CLOCK STANDS OUT THREE WAYS AND NONE OF THEM IS A SECOND TYPEFACE:
   full white against a sentence at 90%, the weight up from 400 to 500, and a
   twelfth larger than the words either side of it. Tabular, or the line
   shifts every minute. */
.cv-says b{font-weight:500;font-size:1.08em;color:#fff;letter-spacing:.005em;
  font-variant-numeric:tabular-nums}
.cv-says em{font-style:normal;color:rgba(255,255,255,.7);transition:color .25s}
.cv-down:hover .cv-says em{color:rgba(255,255,255,.95)}
/* THE LINE DRAWS ITSELF. Nothing is there until it grows: a lit line coming
   down out of the sentence, holding a moment at its full length and then
   going out. It reads as the page reaching down rather than as something
   falling, and because there is no track behind it there is nothing on the
   ground when it is not moving.

   Three times the length of the drop it replaces - the fault with that one
   was never the idea, it was that the fall was 34 pixels. */
.cv-down i{display:block;width:1px;background:none;
  height:clamp(86px,10.5vh,150px);
  position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:20px}
.cv-down i s{position:absolute;left:0;top:0;width:1px;height:0;
  background:#C08C3D;text-decoration:none;
  animation:cv-draw 3.2s cubic-bezier(.3,.7,.3,1) infinite}
@keyframes cv-draw{
  0%{height:0;opacity:1}
  62%{height:100%;opacity:1}
  100%{height:100%;opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .cv-down i s{animation:none;height:100%;opacity:.6}
  .cv-at .td-dot{animation:none}
}

/* ================================================== the right half */
/* The arrows are a second item in a centred column, which would push the film
   up by half of them. The column is given a top padding of exactly what they
   take out of the bottom, so the FILM stays on the middle and the arrows hang
   in the space below it. Same arithmetic as the date line before them. */
.cv-frame{position:relative;z-index:2;flex:0 0 var(--cv-filmw);
  margin-right:var(--cv-inset);padding-top:var(--cv-row);
  display:flex;flex-direction:column;align-items:stretch;justify-content:center}

/* 10:7, WHICH IS WHAT THE SHEET ACTUALLY DREW.

   The dial said 5/4 and frame D did not obey it: its film is a flex item in a
   column of fixed height, so a ratio that tall was silently shrunk to fit -
   about 10:7 by the time it reached the screen. Jack chose what he saw. A
   true 5:4 at the sheet's width would be 933 tall on a 1920 screen where the
   frame has 848, so the two cannot both be had; the width is the thing he
   noticed ("the video also looks more square"), so the width wins.

   Still capped by the height that is left, for the short window: the ratio
   takes the width, or the height does, whichever runs out first. The 1.428 is
   the ratio written as a number - CSS cannot read one out of the other, so if
   the ratio changes both lines change together. */
/* The film is its column, so its right edge is the border and its left edge
   is where the words stop. Nothing floats. */
/* A WHITE EDGE ROUND THE FILM. Jack, 21 September: "could you put small white
   border around the video."

   In PAPER rather than #fff - the site's own white, which is the one the page
   is printed in; a true white against the cask brown reads as a cut-out
   rather than as a print with a margin.

   On the border box, so the frame grows outward and the film keeps its 1.58
   rather than the ratio being measured to the outside of the rule. The video
   inside is absolutely positioned against the padding box, so it sits inside
   the edge without anything else changing. */
.cv-mount{position:relative;width:100%;aspect-ratio:1.58;
  background:var(--cask);overflow:hidden}
/* Every view is stacked in the same frame and only the lit one is seen. They
   cross-fade rather than cut, because a cut between two still-ish films reads
   as a glitch and a fade reads as a channel being changed. */
.cv-feed{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .55s cubic-bezier(.22,.8,.24,1)}
.cv-feed.on{opacity:1;pointer-events:auto}
/* A film has an intrinsic ratio, so `height:auto` with top AND bottom set
   ignores the bottom and sizes itself 16:9 - which is how an earlier cut came
   out 827px tall in a 644px frame. Both dimensions are given outright. */
.cv-mount video{position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;display:block}
/* The veil earns its keep now: four corners carry words, so the top and the
   foot of the picture have to hold white type and the middle has to stay
   clear of it. Heavier at the two ends than the half-and-half cut needed. */
/* THE VEIL IS OFF. Jack, 21 September, having looked at it with the dial:
   "take opacity off the rogie video part completely but leave the good
   morning leaf video as it is."

   So it defaults to nothing. The gradient itself is untouched and the
   property stays, which means the dial on /drafts can bring it back with a
   drag rather than a rebuild - and it is worth keeping, because this veil was
   what held the white type in the four corners of the picture. */
.cv-mount .hr-veil{position:absolute;inset:0;opacity:var(--cv-veil,0);
  transition:opacity .25s cubic-bezier(.22,.8,.24,1);
  background:linear-gradient(to bottom,
  rgba(12,14,11,.52) 0%,rgba(12,14,11,.16) 20%,rgba(12,14,11,.04) 46%,
  rgba(12,14,11,.20) 74%,rgba(12,14,11,.56) 100%)}

/* ---- the corners of the picture ----
   Jack, 19 September: "can you put this overlayed on the video so just nicely
   in the corners." One fact to a corner, none of them near the middle of the
   frame. The rule that dressed them all alike in small capitals went
   when the three corners stopped being one manner and became three. */
/* BOTTOM LEFT, F. The site's own voice on the picture: Lora, sentence case,
   and the sound offered as a word.

   `.td-listen` IS A COMPONENT AND THE WHOLE OF IT HAS TO BE UNDONE. _home.css
   makes it an absolutely positioned bracken chip with its own height, padding,
   radius, type, tracking, capitals, transition and hover - and every one of
   those properties was working together. Changing the background alone would
   leave a floating orange-less chip still 40px tall in the wrong corner. */
.cv-note{position:absolute;z-index:5;left:var(--pad);bottom:var(--pad);
  /* SHORT LINES. The sheet's version breaks after every clause and reads as a
     note written on the picture; one long sentence wrapping across half the
     film reads as a caption, which is the opposite. The measure is held tight
     enough that the break cannot come out anywhere else. */
  max-width:min(46%,15em);
  /* 27px at 1920. It stops being a caption at this size and becomes the one
     sentence on the picture, which is what the corners being small buys. */
  /* 23px at 1920, down from 27: Jack, 19 September - "i think this font could
     be a little bit smaller". It was set when the sentence was two short
     lines about the falls; the feeds name their place as well, so the line is
     longer and wants less size to sit in the same corner. */
  font:400 clamp(16px,1.22vw,26px)/1.42 var(--serif);
  color:rgba(255,255,255,.94);text-shadow:0 1px 16px rgba(8,10,8,.66)}
.cv-note p{margin:0 0 7px}
.cv-note .td-listen{position:static;left:auto;bottom:auto;
  display:inline;height:auto;padding:0;border:0;border-radius:0;
  background:none;color:inherit;font:inherit;letter-spacing:normal;
  text-transform:none;transition:none;box-shadow:none;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.45)}
.cv-note .td-listen:hover{background:none;transform:none;
  text-decoration-color:#fff}
/* a shade smaller than the note it hangs under, so it reads as the offer
   rather than as the last line of the sentence */
/* .46em of a 27px note is his 12.5px, and it stays that proportion at any
   size - the offer is a footnote to the sentence, not part of it. */
.cv-note .td-listen b{font-weight:400;font-size:.53em;
  letter-spacing:.02em;opacity:.9}
/* the three bars belong to the chip, not to a sentence */
.cv-note .td-listen i{display:none}
/* The way out of a view that has no sound, in the same hand as the one that
   has: a word, underlined, a shade smaller than the sentence above it. */
.cv-note .cv-go{display:inline-block;margin-top:2px;color:inherit;
  font-size:.53em;letter-spacing:.02em;opacity:.9;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.45);
  transition:text-decoration-color .25s}
.cv-note .cv-go:hover{text-decoration-color:#fff}

/* ---- three of the nine at once (Jack, 19 September) ----
   D's manner top left and bottom right, F's manner bottom left. One pad sets
   all three corners, so the three blocks stand off the picture's edge by the
   same number. */
.cv-mount{--pad:clamp(14px,1.04vw,24px);
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.cv-mount .cv-at,
.cv-mount .cv-time{position:absolute;z-index:5;pointer-events:none}

/* THE TWO TOP CORNERS, IN ONE HAND. What the camera is looking at, and when -
   the same face, size and tracking, one ranged left and one right, so they
   read as an instrument's two labels rather than as a caption and a headline.
   Monospace because that is what every readout a person trusts is set in, and
   small because a label is not a headline. */
.cv-at,.cv-time{top:var(--pad);display:block;
  font:400 clamp(10.5px,.65vw,14px)/1.62 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.88);text-shadow:0 1px 14px rgba(8,10,8,.62)}
.cv-at{left:var(--pad)}
/* THE TALLY LIGHT. The one green on a page of brown, bracken and off-white,
   which is why a 7px dot carries as much as it does. It swells rather than
   blinks: a blink is an alarm, a swell is a thing that is on. */
.cv-live{display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:9px;vertical-align:1px;background:#AFA065;
  box-shadow:0 0 0 0 rgba(175,160,101,.55),0 0 10px 1px rgba(175,160,101,.55);
  animation:cv-on 2.4s ease-in-out infinite}
@keyframes cv-on{
  0%,100%{opacity:.55;box-shadow:0 0 0 0 rgba(175,160,101,.5),0 0 7px 0 rgba(175,160,101,.4)}
  50%{opacity:1;box-shadow:0 0 0 4px rgba(175,160,101,.14),0 0 13px 2px rgba(175,160,101,.7)}
}
@media(prefers-reduced-motion:reduce){.cv-live{animation:none;opacity:1}}
.cv-at .td-dot{width:7px;height:7px;border-radius:50%;background:#C08C3D;
  box-shadow:0 0 0 0 rgba(192,140,61,.6);animation:cv-beat 2.5s ease-out infinite}
@keyframes cv-beat{
  0%{box-shadow:0 0 0 0 rgba(192,140,61,.6)}
  70%{box-shadow:0 0 0 11px rgba(192,140,61,0)}
  100%{box-shadow:0 0 0 0 rgba(192,140,61,0)}
}
/* The clock is the only thing on either corner that moves, so it is the only
   thing given full white. Tabular figures, or the block twitches every second;
   monospace is tabular by definition, which is half the reason readouts are
   set in it. */
.cv-time{right:var(--pad);text-align:right;white-space:nowrap}
.cv-time b{font-weight:400;color:#fff;font-variant-numeric:tabular-nums}

/* ---- the sound of the place ----
   The home page's own button, class for class, so it behaves and looks
   identically: `.td-listen` and its bars are dressed by _home.css, which this
   page already loads. It sits in the plate's bottom left, opposite the
   listing's own corner, and it is the only thing allowed on the picture -
   because it is about the picture. */
.cv-mount .td-listen{z-index:4}

/* ---- the way through them ----
   A tick for each view and two arrows, on one line under the picture and at
   its own two edges. The ticks are short rules rather than dots: a rule can
   show which one is lit by weight alone, without anybody having to learn a
   colour. */
.cv-tabs{display:flex;align-items:center;justify-content:space-between;
  height:30px;margin-top:18px}
.cv-ticks{display:inline-flex;align-items:center;gap:10px;
  font:400 11.5px var(--mono,ui-monospace,Menlo,monospace);letter-spacing:.08em;
  color:rgba(249,245,238,.5);font-variant-numeric:tabular-nums}
.cv-ticks b{font-weight:400;color:rgba(249,245,238,.92)}
.cv-ticks s{display:block;width:18px;height:1px;text-decoration:none;
  background:rgba(249,245,238,.3)}
.cv-arrows{display:inline-flex;gap:8px}
.cv-arr{width:36px;height:30px;padding:0;cursor:pointer;background:none;
  border:1px solid rgba(249,245,238,.26);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .25s,background .25s}
.cv-arr:hover{border-color:rgba(249,245,238,.6);background:rgba(249,245,238,.06)}
.cv-arr i{display:block;width:7px;height:7px;
  border-top:1px solid rgba(249,245,238,.8);border-right:1px solid rgba(249,245,238,.8);
  transform:rotate(45deg) translate(-1px,1px)}
.cv-arr i.back{transform:rotate(-135deg) translate(-1px,1px)}
.cv-arr:hover i{border-color:#fff}

/* ---- TALL, for /drafts/home-7 ----
   The same opening with a portrait film, because four fifths of the archive
   is shot on a phone held upright. One class and one ratio.

   The film is sized by its HEIGHT here, not its width: 4:5 at the landscape
   width would be half again as tall as the frame has room for. The column
   keeps its width either way, so the words never move when the shape does -
   the film simply sits narrower inside it. */
/* THE HEIGHT IS THE ONLY NUMBER THERE IS. A film that stands up is limited by
   the room between the bar and the foot of the opening, and nothing else can
   make it bigger - so the plate takes all of it and the ratio decides how wide
   that comes out.

   SQUARE, at Jack word on 19 September: "maybe we can make it square instead,
   might work better". It does, and the reason is arithmetic - at the same
   height a square is a quarter wider than 4:5, which is the only way of making
   the picture bigger without taking the border down.

   The frame is the plate wide, so the film fills its column, its right edge is
   on the inset, and the heading centres itself in what is left. */
/* --cv-zoom is the only way of making a standing film bigger, because its
   size is the room between the bar and the foot of the opening and nothing
   else. At 1 it fills that room with one border of air top and bottom; past
   1 it starts eating the air, and past about 1.25 it reaches the bar. */
.cv-tall{--cv-ar:1;
  /* the arrows are part of the picture's width now, so they are named here
     and everything else is measured off them */
  --cv-arr:52px;
  --cv-arrgap:40px;
  /* JACK'S OWN, 19 September. He dragged the square 141px to the left and
     then put the words back under it by hand, three times, each by about half
     of that - so it is not a nudge, it is an inset. 14.5vw is his 141 on top
     of the 7.2 it had, at the width he works at, and the words re-centre
     themselves against it with nothing moved. */
  /* ONE ARROW AND ONE GAP puts the arrow's outer edge where the film's used to
     be, on the inner border. --cv-shift then takes the whole group - arrow,
     film, arrow - further in from that line: Jack, 19 September, "moved a
     little left". One number moves all three, so they cannot drift apart. */
  --cv-shift:4vw;
  --cv-inset:calc(var(--cv-arr) + var(--cv-arrgap) + var(--cv-shift));
  /* and a touch bigger than the room, which is what 1.03 is */
  --cv-zoom:1.03;
  --cv-plate:calc((var(--cv-h) - var(--cv-edge)*2 - var(--bar,76px) - var(--cv-row))
    * var(--cv-zoom,1))}
/* THE ROW WAS BEING COUNTED TWICE. --cv-plate already takes the arrows out of
   the height, and the frame was ALSO carrying a top padding of one row to keep
   the film on the middle - so the square came out 684 by 636 and was not
   square at all. The padding goes and the arrows are hung below the frame
   instead, which does the same job without spending the height twice. */
.cv-tall .cv-frame{flex:0 0 calc(var(--cv-plate) * var(--cv-ar));
  padding-top:0;position:relative}
/* THE WORDS SIT ABOVE THE SQUARE'S MIDDLE, by 27 - his number, and the only
   one of the six that was not a correction for having moved something else.
   A bottom padding of twice it lifts the column's centre by exactly that,
   which is the same arithmetic the arrows use and leaves nothing translated. */
.cv-tall .cv-word{padding-bottom:54px}
/* AND THE FILM COMES UP THE SAME 27. The words were lifted by that on the
   round before and the picture was not, so the two sat 27 apart and it read as
   out of true - which is what "not aligned visually" was. A bottom margin of
   twice it lifts the frame's middle by exactly the same amount, and the film's
   centre and the words' centre are one line again. */
.cv-tall .cv-frame{margin-bottom:54px}

/* flex:none MATTERS, and this is the second time today. The mount is an
   item in a column of fixed height, and a flex item shrinks by default - so
   the moment the size went past the room available, the square stopped being
   square and quietly became 787 by 732. It keeps its ratio and overflows
   instead, which is the honest signal that it is bigger than the page. */
.cv-tall .cv-mount{width:100%;height:auto;aspect-ratio:var(--cv-ar);margin:0;
  flex:none}
/* THE ARROWS FLANK THE PICTURE, one either side and both on its middle. The
   counter went with the row they used to sit in: a square plate is
   symmetrical, and a number ranged into one corner was the only thing on it
   that was not. */
.cv-tall .cv-tabs{position:absolute;top:50%;margin:0;
  left:calc((var(--cv-arr) + var(--cv-arrgap)) * -1);
  right:calc((var(--cv-arr) + var(--cv-arrgap)) * -1);
  transform:translateY(-50%);height:var(--cv-arr);pointer-events:none}
.cv-tall .cv-ticks{display:none}
.cv-tall .cv-arrows{width:100%;justify-content:space-between;pointer-events:auto}
.cv-tall .cv-arr{width:var(--cv-arr);height:var(--cv-arr)}
/* THE TWO SIDES ONLY. `border-width` is the shorthand and sets all four, and
   the reset this site loads gives every element `border-style:solid` at nought
   width - so widening all four turned each chevron into a complete square on
   its point. */
.cv-tall .cv-arr i{width:11px;height:11px;
  border-top-width:1.5px;border-right-width:1.5px;
  border-bottom-width:0;border-left-width:0}
/* and the words give up the same width on their side, so the column ends
   where the left arrow begins rather than where the film does - otherwise the
   heading runs under it at any size worth having */
.cv-tall .cv-word{padding-right:calc(var(--cv-arr) + var(--cv-arrgap))}

/* ---- /drafts/home-8: the sign-in page's own geometry ----
   Every number here was read off https://claude.ai/login at 1920 x 1080 and
   turned into a proportion of the window: the panel 712 wide of 1920 is
   37.08vw, its left edge 963 is 50.16vw, its top 104 is 9.63vh, and it is a
   true 4:5. The words centre on 591, which is 30.8vw.

   The opening takes the whole window here rather than 100vh - 120, because
   theirs fills the screen and the panel's place is measured against the
   screen. Square corners are the one difference Jack asked for. */
.cv-eight{
  /* THE PANEL IS SIZED BY HEIGHT, which is the whole thing I had wrong. Their
     own class says it: max-w-[calc((100svh - 9rem) * 1080/1350)] - the height
     of the window less 144px, times four fifths, capped by the column it sits
     in. Sized by WIDTH instead, as mine was, it is right on a 1080-tall window
     and runs off the bottom of any shorter one.

     Measured at two heights to be sure of it:
       1920 x 1080   963 left, 104 top, 712 x 890, 245 right, 86 below
       1920 x  880  1025 left,  92 top, 589 x 736, 307 right, 52 below
     Both centred on 1319, which is 68.7vw. */
  /* NINE TENTHS OF THEIRS. Jack, 19 September: "our version is bigger height
     wise so reduce the height of the video a little" - so the same rule, taken
     down a tenth, and the width follows the ratio as before. */
  /* 41.7vw is their rule - the window's height less 144, times four fifths -
     and .9 is Jack's tenth off it. Both named so the editor can move them. */
  --e-hs:41.7vw;
  --e-hc:.9;
  --e-h:min(var(--e-hs),calc((100vh - 144px) * var(--e-hc)));
  --e-w:calc(var(--e-h) * .8);
  /* the film's own place, named once so the words can be told to use it.
     68.7vw is where the sign-in page centres its panel, measured at two
     window heights. */
  --e-cx:68.7vw;
  --e-ty:-3vh;
  --e-left:calc(var(--e-cx) - var(--e-w) / 2);
  /* centred in the room below the bar and then up 3vh, which lands within
     four pixels of theirs at both the heights measured */
  --e-top:calc(var(--bar,76px) + (100vh - var(--bar,76px) - var(--e-h)) / 2
    + var(--e-ty));
  /* A LITTLE BIGGER. Jack, 19 September: "increase size of arrow buttons a
     little." 44 -> 52, and the glyph inside with it. */
  --e-arr:52px;
  --e-gap:34px;
  /* the eye's last word on where the words sit; the editor at
     /design-2026/home8-edit.html writes these two and nothing else */
  --e-wx:0px;
  --e-wy:0px;
  /* and the type, so the editor moves the real sizes rather than its own */
  --e-h1:min(3.85vw, 28px + (3.85vw - 28px) * 0.6);
  --e-h1w:8.2em;
  --e-say:1.12vw;
  --e-wg:clamp(24px,3.9vh,50px);
  height:100vh;min-height:0;display:block;padding:0}
.cv-eight .cv-frame{position:absolute;z-index:2;flex:none;display:block;
  width:var(--e-w);left:var(--e-left);top:var(--e-top);
  margin:0;padding:0}
.cv-eight .cv-mount{width:100%;height:var(--e-h);aspect-ratio:auto;margin:0;
  flex:none;border-radius:0}
/* THE WORD COLUMN IS THE FILM'S OPPOSITE NUMBER - same top, same height, and
   as wide as the room left of the film. Centre the words in that and the two
   middles land on one line by construction, at any window size.

   What was here before was 61.56vw ranged from the page's edge, centring on
   30.78vw. That is right on the sign-in page, where the left column is a real
   flex column with the panel beside it; on ours the film starts at 749 (1440),
   so the words sat 68px right of the middle of their own space. The vertical
   was the same mistake: 28vh from the top is their number, and their column
   carries a 564-tall sign-in card under the title that ours does not.
   Jack: "it's not centered. It needs to look perfect." */
.cv-eight .cv-word{position:absolute;z-index:2;left:0;bottom:auto;
  top:var(--e-top);height:var(--e-h);width:var(--e-left);margin:0;
  padding:0 clamp(24px,2.4vw,52px);gap:var(--e-wg);
  transform:translate(var(--e-wx),var(--e-wy));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center}
/* AND BACK UP TO 74. Theirs is 56, but theirs has a sign-in card under it
   carrying the weight; ours has two lines and a way down, and at their size
   the left half read as empty. Jack: "make this section bigger, more like it
   was before." */
.cv-eight .hr-h1{font-size:clamp(34px,var(--e-h1),80px);line-height:1.12;
  /* and held short of the left arrow: at 74px the heading was 702 wide and
     ran 19 under it. 8.2em keeps the two lines and clears it. */
  max-width:min(88%,var(--e-h1w))}
.cv-eight .cv-says{font-size:clamp(15px,var(--e-say),22px)}
/* the arrows stay under the picture and centred on it, so the panel's own
   rectangle is left exactly as measured */
/* THE ARROWS FLANK THE PANEL, one either side and both on its middle - the
   same arrangement as the square on home-7, and the right margin is wide
   enough to hold one without the panel moving. */
/* THE FOOT OF THE PICTURE, not two buttons in the margins.

   They used to sit absolutely at the film's middle, one in each margin, which
   is why they read as furniture round the picture rather than as part of it.
   Under the film, with the name at one end and the way through at the other,
   the row is a caption line - and it is the same line the date used to be on
   before the opening was rebuilt. */
/* the row under the film now carries the label alone - the arrows have been
   lifted out of it and hung in the margins */
/* the row under the film is the way THROUGH the views now - the counter and
   the arrows - since the name went up onto the picture */
.cv-eight .cv-tabs{position:static;margin:16px 0 0;height:var(--e-arr);
  display:flex;align-items:center;justify-content:flex-start;
  pointer-events:auto}
/* THE ARROWS GO BACK TO THE FILM'S MIDDLE, one in each margin.

   They are lifted out of the row and hung against .cv-frame, the film's own
   column and the nearest positioned ancestor. Not against .cv-mount, which
   has overflow:hidden and would clip anything outside it.

   The top is the frame's own padding and the bottom is the height of the row
   under the picture, so this box covers EXACTLY the film - and centring in it
   puts the arrows on the film's middle rather than the frame's, which sits
   twenty-odd pixels lower and would have read as a miss. */
/* TOP ZERO, NOT --cv-row. The frame carries padding-top:--cv-row on the
   centred feed, but .cv-eight sets it back to nothing - measured, the mount
   starts at the frame's very top. Taking the padding on trust put this box
   48px too low at the top and correct at the foot, so its centre sat 24 below
   the film's, which is exactly the miss Jack could see.

   Zero at the top and the row's height at the foot makes this box the film
   exactly: measured 0 above and 68 below. */
.cv-eight .cv-arrows{position:absolute;z-index:4;
  top:0;bottom:calc(var(--e-arr) + 16px);
  left:calc((var(--e-arr) + var(--e-gap)) * -1);
  right:calc((var(--e-arr) + var(--e-gap)) * -1);
  width:auto;display:flex;align-items:center;justify-content:space-between;
  pointer-events:none}
.cv-eight .cv-arr{pointer-events:auto}

/* SCOTLAND NOW. Jost, uppercase, ranged left under the film - the same small
   caps the rest of the opening's labels are set in, so it belongs to the
   picture rather than announcing itself. */
/* SCOTLAND NOW, ON THE FILM, OVER THE HEADLINE. Jack, 21 September: "put the
   scotland now above the Autumn at the falls text."

   It was under the picture in a row with the counter and the arrows, where it
   read as furniture rather than as a title. Here it names what you are looking
   at, immediately over the line that says what is happening in it.

   Gorse, because on the picture it needs to separate from the white headline
   under it without being another white line; and Jost small because the
   headline is Larken at 25 and two display faces stacked would fight. */
.cv-note .cv-now{display:block;margin:0 0 9px;
  font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  /* SCOPED, AND PALE RATHER THAN GORSE. Written as .cv-now alone this had the
     same specificity as .cv-note, which sets a colour on everything inside it
     and is declared later - so the colour here lost silently and the rule was
     a lie. Scoped, it applies.

     And it is paper at .8 rather than gorse: the headline under it is white,
     the tally light is green, and a third colour on the picture is one more
     than the corner can carry. Quieter than the headline is the whole job. */
  color:rgba(255,255,247,.8);text-shadow:0 1px 10px rgba(65,64,66,.8)}
.cv-now small{display:none}

/* ================================ WHERE, WHEN, AND WHAT IT IS DOING
   Jack, 21 September - the location, today's date and the weather on the
   film, bottom left, "sort of like a live forecast giving the impression of
   Scotland right now."

   One line, three parts, hairline rules between them. The green tally leads
   it: it used to sit at the top left with the place, and it came down here
   with it, because the light is what says live and it belongs with the thing
   that is live.

   No panel behind it - the hero's own foot gradient is already there for the
   headline, and a second ground under this would put a box on the picture. */
/* AT THE FOOT OF THE OPENING, not of the film. It hangs off .cv-eight, which
   is the whole screen, and lines up with the left edge of the words column -
   so it reads as the page's own line rather than as a caption on a picture. */
.cv-eight .cv-here{position:absolute;z-index:6;
  left:clamp(24px,2.4vw,52px);bottom:clamp(22px,3.4vh,44px);
  display:flex;align-items:center;gap:9px;pointer-events:none;
  font:500 10px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(249,245,238,.88);
  text-shadow:0 1px 10px rgba(65,64,66,.75)}
.cv-here .cv-live{position:static;flex:none}
.cv-here b{font-weight:500;color:var(--paper)}
.cv-here u{text-decoration:none;color:rgba(249,245,238,.72);
  font-variant-numeric:tabular-nums}
.cv-here em{font-style:normal;color:rgba(249,245,238,.72);
  font-variant-numeric:tabular-nums}
/* the rules between the three, which is what stops it reading as one phrase */
.cv-here s{flex:none;width:11px;height:1px;text-decoration:none;
  background:rgba(249,245,238,.4)}

/* THE FILM'S FOOT IS THE HEADLINE'S AGAIN. The line moved off the picture on
   21 September, so the room it was given back comes off too. */

@media (max-width:700px){
  /* the date is the part a phone can spare: the place and the weather are
     the two that are doing the work */
  .cv-here u,.cv-here s:first-of-type{display:none}
  .cv-here{gap:7px;font-size:9px;letter-spacing:.1em}
}
/* the glyph grows with the button. Note the long-hand widths: the shorthand
   sets all four sides and the site's reset gives every element a solid border
   at zero width, so `border-width:1.5px 1.5px 0 0` draws a diamond. */
.cv-eight .cv-arr i{width:13px;height:13px;
  border-top-width:1.5px;border-right-width:1.5px;
  border-bottom-width:0;border-left-width:0}
.cv-eight .cv-ticks{display:none}
.cv-eight .cv-arr{width:var(--e-arr);height:var(--e-arr)}
.cv-eight .cv-side{display:none}

/* ================================================== the spine
   One strip, up the outside edge, in the border. */
.cv-side{position:absolute;top:var(--cv-edge);bottom:var(--cv-edge);
  width:var(--cv-edge);z-index:2;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  font:600 10.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(249,245,238,.6)}
.cv-right{right:0}
.cv-side span{writing-mode:vertical-rl;white-space:nowrap}

/* ---- the bar ----
   Start here is gone at Jack's word, and the selector has to carry weight:
   `_bar.css` loads AFTER this file and already says
   `header.site .in .right .start`, so anything lighter loses on order. */
header.site .in .right button.start{display:none}
/* It keeps its brown rather than fading in as glass: it is furniture now. */
header.site::before{opacity:1}
/* THE MARK SITS ON THE BORDER, the same gutter the frame starts at, so the
   logo and the fold agree. `.in.in` is the same element named twice over:
   `_bar.css` sets this gutter to 60px with an equally specific selector and
   loads after this file, so the class has to be doubled to win. */
header.site .in.in{padding-left:var(--bar,76px);padding-right:var(--bar,76px);
  max-width:none}

@media(max-width:1080px){
  /* Below this a half is too narrow to set a heading in, so the two halves
     become two rows: the film first, the words under it. The border stays,
     because the border is the thing Jack kept. */
  .cv-split{height:auto;min-height:0;flex-direction:column;align-items:stretch;
    padding:calc(var(--bar,76px) + 18px) var(--cv-edge) clamp(26px,5vh,44px)}
  .cv-frame{margin-right:0}
  .cv-word{flex:0 0 auto;margin-left:0;padding:clamp(26px,4vh,44px) 0 0}
  .cv-mount{aspect-ratio:4/3}
  .cv-frame{flex:0 0 auto;order:-1;padding:0;width:auto}
  .cv-tabs{margin-top:14px}
  .cv-side{display:none}
}

/* THE EIGHT'S OPENING, STACKED. The rows above were written for the split
   opening; .cv-eight then hung the film and the words absolutely at desktop
   positions, with two classes to the split's one, so below 1080 they stayed
   where a wide screen puts them - both outside a hero that had shrunk to its
   own padding, 136px tall, and every section page (golf, eat, do, whisky)
   opened on a phone with no heading and no film. Found 24 September 2026 on
   /golf. Here they come back into the flow: the film first, the words under
   it, the arrows inside the film's edges and the line at the foot after. */
@media(max-width:1080px){
  .cv-eight{display:flex;flex-direction:column}
  .cv-eight .cv-frame{position:relative;left:auto;top:auto;width:auto;order:-1}
  .cv-eight .cv-mount{height:auto;aspect-ratio:4/5}
  .cv-eight .cv-word{position:relative;left:auto;top:auto;width:auto;height:auto;
    transform:none;padding:clamp(26px,4vh,44px) 0 0}
  .cv-eight .cv-arrows{left:10px;right:10px}
  .cv-eight .cv-here{position:relative;left:auto;bottom:auto;margin-top:26px}
}
@media(max-width:700px){
  /* the film's clock ran into the course's name at 390, and the words under
     the film say the hour already */
  .cv-eight .cv-time{display:none}
}

@media(max-width:700px){
  .cv-hero{--cv-edge:clamp(16px,4vw,28px)}
  header.site .in.in{padding-left:clamp(16px,4vw,28px);
    padding-right:clamp(16px,4vw,28px)}
}


/* ==========================================================================
   THE BAND  -  the date, the eight ways out, the way down
   ==========================================================================
   Settled by Jack on 19 and 20 September with the whole thing in front of him
   at /design-2026/feed-whole-2.html. The tabs came out as this went in: they
   were the only way to choose anything, so removing them earlier would have
   left nothing.

   IT IS NOT A FILTER ON THE FEED. Most people who arrive did not come for a
   day feed, and these eight are the way out for them - so they go to Explore
   and friends rather than filtering what is below. */

/* 56 above the date. It used to open 6px under whatever was above it, which
   against a hero that fills the window read as stuck to it. */
/* THE TOP BAND IS A SECTION LIKE THE REST, so it takes the same break. It
   was the only one on the page not separated from what follows it. The rule
   is drawn full width rather than on the band, because the band is held to
   the column and the breaks below it run to the page's edges. */
.fd-band{position:relative;
  width:min(100%,calc(724px + 28px * 2));margin:0 auto;padding:72px 28px 0}
.fd-band::after{content:'';position:absolute;left:calc(50% - 50vw);width:100vw;
  bottom:0;height:1px;background:rgba(228,222,217,.55)}

/* ---- the eight cards ---- */
.fd-rail{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;
  cursor:grab;-webkit-user-select:none;user-select:none;outline:none}
.fd-rail::-webkit-scrollbar{display:none}
/* the snap has to come off while the pointer is down or it fights the drag */
.fd-rail.pull{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}

/* THE CARD IS THREE LAYERS - the photograph, the colour, the darkening - and
   they are kept apart on purpose. Rolled into one, as a duotone has them,
   there is no way to have a lot of colour and very little darkening, which is
   the setting Jack ended up on: tweed at .26 with the wash down at .06, so
   the cards are warmed rather than dimmed. */
.fd-cat{position:relative;flex:0 0 120px;scroll-snap-align:start;display:block;
  overflow:hidden;text-decoration:none;background:var(--oat);aspect-ratio:1.01}
.fd-cat img{display:block;width:100%;height:100%;object-fit:cover;
  pointer-events:none;transition:transform .7s cubic-bezier(.22,.8,.24,1)}
.fd-cat:hover img{transform:scale(1.05)}
/* one colour for the whole row. Note the literal: a per-card value cannot be
   routed through a root variable, because a custom property resolves where it
   is declared rather than where it is used. */
.fd-cat .tint{position:absolute;inset:0;background:#682114;opacity:.26;
  mix-blend-mode:multiply;transition:opacity .3s cubic-bezier(.22,.8,.24,1)}
/* the darkening stays on top and stays neutral, so the word is safe however
   much colour is going on underneath it */
.fd-cat .dim{position:absolute;inset:0;background:rgba(10,9,7,1);opacity:.06;
  transition:opacity .3s cubic-bezier(.22,.8,.24,1)}
.fd-cat:hover .tint{opacity:.19}
.fd-cat:hover .dim{opacity:.04}
.fd-cat b{position:absolute;inset:0;display:grid;place-items:center;
  text-align:center;padding:10px;color:#fff;
  font:400 17px/1.22 var(--face);letter-spacing:.004em}

/* the arrows, out in the page's margin on the middle of the pictures, and
   only where there is a real pointer - a thumb needs no buttons */
.fd-rails{position:relative}
.fd-rarr{position:absolute;z-index:3;top:50%;transform:translateY(-50%);
  width:32px;height:32px;padding:0;cursor:pointer;
  background:var(--paper);border:1px solid var(--stone);
  display:none;place-items:center;
  transition:border-color .22s cubic-bezier(.22,.8,.24,1),opacity .22s}
.fd-rarr i{display:block;width:8px;height:8px;border-style:solid;
  border-color:var(--ink);border-top-width:1.5px;border-right-width:1.5px;
  border-bottom-width:0;border-left-width:0;
  transform:rotate(45deg) translate(-1px,1px)}
/* 46 = 32 of arrow plus 14 of air. The offset is from the rail now rather
   than from the band, so the old -20 sat on top of the end cards. */
.fd-rarr.back{left:-46px}
.fd-rarr.back i{transform:rotate(-135deg) translate(-1px,1px)}
.fd-rarr.fwd{right:-46px}
.fd-rarr:hover{border-color:var(--ink)}
.fd-rarr[disabled]{opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine){.fd-rarr{display:grid}}

/* ---- A1: the way down ----
   A hairline that draws itself downward and fades. It is not asking, it is
   showing the direction, and it is the opening's own device so it arrives
   familiar. Pressing it moves the page 72 per cent of a screen: enough to
   land the first entry, little enough to leave the band half in sight. */
.fd-cue{position:relative;display:flex;flex-direction:column;align-items:center;
  width:100%;margin:30px 0 0;padding:0 0 72px;border:0;background:none;
  cursor:pointer;color:var(--ink-55);
  font:500 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  transition:color .25s cubic-bezier(.22,.8,.24,1)}
.fd-cue:hover{color:var(--sub,var(--tweed))}
.fd-cue i{position:absolute;left:50%;top:26px;width:1px;height:38px}
.fd-cue i s{position:absolute;left:0;top:0;width:1px;height:0;
  background:var(--tweed);text-decoration:none;
  animation:fd-fall 3s cubic-bezier(.22,.8,.24,1) infinite}
@keyframes fd-fall{0%{height:0;opacity:1}62%{height:100%;opacity:1}
  100%{height:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .fd-cue i s{animation:none;height:100%;opacity:.5}
}

@media (max-width:900px){
  .fd-band{width:auto;padding:44px 16px 0}
  .fd-cat{flex-basis:104px}
}

/* ==========================================================================
   THE TOP OF THE DAY
   ==========================================================================
   The feed used to start with nothing at all. This says what day it is.

   There is no matching close: Jack, 20 September - "we don't need bookends,
   the feed will never end." So this is a beginning rather than half a pair,
   which changes what it has to carry - it is the only furniture on the page.

   It sits at the PICTURES' width, not the words', because it is the top edge
   of the column rather than a line of text inside it. */

.fd-top{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin:0;padding:0 0 20px}
.fd-top b{font:400 25px/1.1 var(--face);letter-spacing:.002em;color:var(--ink)}
.fd-top em{font-style:normal;font:500 10.5px/1 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-55)}

@media (max-width:900px){
  .fd-top b{font-size:22px}
}

/* ==========================================================================
   THE FEED  -  one column where the wall was
   ==========================================================================
   Jack, 19 September: "a single feed, the same column and margin as this
   article... like an Instagram or Threads feed but much cleaner and nicer
   designed", then "show the feed you came up with", then "take away the icon
   boxes" and "and the Attractions / Edinburgh part."

   536px is the article's own measure, read off the page. NOTHING LABELS AN
   ENTRY: no mark in the margin and no kicker line. What tells one from
   another is its shape - a fact has no picture, a collection has three, a
   question has buttons, a would-you-rather has the votes on it, an event has
   its date beside the headline. The subject survives as colour only. */

/* ONE NUMBER FOR THE AIR, on all four sides. The wash used to take its top
   and bottom from the entry's padding and its sides from a different figure
   again, and the first entry had a 12px exception on top of that - so it
   opened four pixels above the picture and thirty-six below the action, and
   read as a box drawn round the content. Jack: "the hover, it's all too
   close - make it perfect." */
/* THE COLUMN IS 536 AND THE ROW IS 536 PLUS THE AIR. The tint used to reach
   38px past the column while the picture ran the column's full width, so the
   picture floated in a field whose edges lined up with nothing and the rule
   between entries stopped 38px short of the tint at both ends - three widths
   in one row. X has one: the tint fills the row, and everything in the row,
   picture included, is inset from its edges by the same amount. */
/* MORE AIR. Jack: "maybe just more clean space in general." Between entries
   64 to 84, and the spaces inside an entry go up with it. */
/* WIDER, at Jack's word. 536 came off the article and has been the one number
   that could not move; it moves because he has looked at it and asked, and a
   measure taken from a page of running prose is not automatically right for a
   column that is mostly photographs and headlines. The row follows it out to
   656, and so does every picture. */
/* ==========================================================================
   EACH ENTRY OWNS A BAND OF THE PAGE
   ==========================================================================
   Jack, 20 September: "add in colour background to the page - try B4. But I
   would like the whole thing to have a hover effect, so the whole thing would
   be clickable, almost like a full width listing card."

   Three things had to change together. The feed stops being a 780px box and
   goes full width, with the centring moved down onto the entry. The vertical
   rhythm moves off a margin between entries and onto the entry's own padding,
   so the entry is exactly as tall as its band - otherwise the band has dead
   strips top and bottom that hover and click cannot reach. And the click is a
   stretched link rather than a wrapper, because a quiz is full of buttons and
   an event has two destinations. */
/* MORE ROOM. Jack: "create a bit more room overall on the page, maybe a bit
   more spaced out each section." 84 to 112 between one section and the next -
   half of it above the entry and half below, so a band is 56 of air, the
   thing, and 56 of air. */
/* JACK'S DIALS, 20 September, read off the weather decks' own tuner:
   column 752, air in a band 190, cards 294 wide at 0.90 so 327 tall, 6
   between them. The cards came out taller and narrower than I had them, and
   he is right - a lodge, a bookshop front or a castle avenue all sit badly in
   a letterbox and well in a portrait. */
.h3-feed{--fd-col:752px;--fd-air:28px;--fd-gap:190px;
  --fd-card:294px;--fd-shape:0.90;--fd-cgap:6px;
  max-width:none;margin:0;padding:0}
/* THE SECTION ITSELF WAS THE LIMIT, not the wrap. .ex-sec carries
   max-width:1600 and 57.6px of side padding, which held the bands 65px short
   of each page edge - found by walking the chain of parents rather than by
   guessing, because the wrap was already clear. Both have to go for a band to
   reach the edge of the page. */
.h3-bands{max-width:none;padding-left:0;padding-right:0}
.h3-bands .ex-wrap{max-width:none;padding:0}

/* B4: paper, shell, oat, in rotation. Four per cent apart, so it reads as a
   drift rather than as stripes. */
/* IT CLIPS ITS OWN SKY. The sky spans 100vw to reach both edges of the
   window, and 100vw counts the scrollbar - so without this every dark band is
   a scrollbar's width wider than the page and the whole thing slides. */
.fd-row{position:relative;overflow:hidden;
  transition:background .3s cubic-bezier(.22,.8,.24,1)}
.fd-row.g0{background:var(--paper)}
.fd-row.g1{background:var(--shell)}
.fd-row.g2{background:var(--oat)}

/* A FAINT BREAK, so the division is visible without pointing at anything.
   Stone at a third: on three grounds four per cent apart that is about as
   light as a line can be and still be seen. It runs the whole page, which is
   the difference between the page dividing itself and a box being drawn
   round each entry - the fault that got the last rules taken out. */
.fd-row + .fd-row{border-top:1px solid rgba(228,222,217,.55)}

/* AND THE HOVER IS THE GROUND, one step deeper. Jack: "on hover it changes
   colour for the section." It used to be a wash of the subject colour laid
   over the band; this uses the palette that is already there, so the band
   stays the same kind of object and simply becomes more of itself - and with
   a rule now doing the separating, a tint as well would be two devices for
   one job. */
.fd-row.g0:hover{background:var(--shell)}
.fd-row.g1:hover{background:var(--oat)}
.fd-row.g2:hover{background:var(--stone)}

/* THERE WAS AN EXCEPTION HERE FOR THE FIRST ROW, and it has gone.

   It was written on 21 September so the cards and the what's-on summary would
   read as one section: the first row did not take the hover tint, because the
   tint stops where the cards start and the two came apart the moment a
   pointer arrived.

   The summary then moved out of the feed altogether, into the briefing block
   above it - and the feed's first row became the WEATHER, which is dark. The
   rule said `background:var(--paper)`, so hovering a near-black band turned it
   the colour of the page. Jack: "the whole section goes white on hover."

   A rule pinned to :first-child is pinned to a POSITION, not to a thing, and
   positions move. It is deleted rather than repaired, because what it was
   written for - a feed row sitting directly under the cards - no longer
   exists. */

/* NO RULE BETWEEN ENTRIES. Jack: "I don't like those dividing lines" - and he
   is right for the same reason the marks and the kickers went. The shape of
   an entry already says it is a separate thing; a rule saying so as well is a
   third device doing one job. The separating is air, and the gap is 64 rather
   than the padding's 28 so that it reads as a break rather than as a generous
   line-height. */
/* THE ENTRY FILLS ITS BAND. The air that used to sit between entries is now
   the entry's own padding, so the thing you hover is exactly the thing you
   see. Half a gap top and bottom adds to the same 84 between one and the
   next. */
.fd-it{position:relative;display:block;
  width:min(100%,calc(var(--fd-col) + var(--fd-air) * 2));margin:0 auto;
  padding:calc(var(--fd-gap) / 2) var(--fd-air);
  color:var(--ink);text-decoration:none}

/* THE WHOLE BAND IS THE TARGET. A stretched ::after spanning the window and
   sitting under the entry's own contents - so a click reaches the empty sides
   of the page, and anything interactive inside still gets its own clicks. A
   quiz and an event are divs rather than links, so they never grow one and
   keep their own controls. */
a.fd-it::after{content:'';position:absolute;z-index:0;top:0;bottom:0;
  left:calc(50% - 50vw);width:100vw}

/* the tint is the row. 5.5 per cent, not 7 - seven of a dark brown over paper
   is a strong beige and the one on X is barely there. */
/* THE HOVER RUNS TO THE EDGES. It was already the subject's colour at five
   and a half per cent; letting it span the window is the whole of "a full
   width listing card" and costs two lines. The BAND is hovered rather than
   the entry, so the empty sides light up with it. */
.fd-it::before{content:'';position:absolute;z-index:0;
  left:calc(50% - 50vw);width:100vw;top:0;bottom:0;
  background:var(--sub,var(--ink));opacity:0;
  transition:opacity .26s cubic-bezier(.22,.8,.24,1);pointer-events:none}
/* the wash is kept only for the keyboard, which cannot hover */
.fd-it:focus-visible::before{opacity:.055}
.fd-it > *{position:relative;z-index:1}

/* THE TIME, IN THE MARGIN. Jack, 20 September, circling the empty space to
   the left of an entry: "maybe we could add a time reference here, same way
   Twitter says 2 hours ago, to show the timeliness."

   It says WHEN IT MATTERS rather than when it was posted. X says "2 hours
   ago" because a timeline records when things were written; every entry here
   was made this morning, so a column of "6h" would be true, identical and
   worth nothing. "Until 16:00" and "5 days left" is the same job done with
   the one thing we have that a social feed does not.

   The band is what made the margin possible - before it, the feed was a 780px
   box with nothing either side. */
.fd-at{position:absolute;left:calc(var(--fd-air) * -1 - 118px);
  top:calc(var(--fd-gap) / 2 + 4px);width:104px;text-align:right;
  font:500 10.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-55);font-variant-numeric:tabular-nums}

/* under 1200 there is no margin to stand in, so it goes above the headline
   rather than disappearing - the timeliness is the point of it */
@media (max-width:1200px){
  .fd-at{position:static;display:block;width:auto;text-align:left;
    margin:0 0 12px}
}

/* ---- the headline does the work now ---- */
/* NOT JUSTIFIED. Two or three words stretched to the full measure is not a
   headline, it is a ransom note; `balance` is the ragged-right version of the
   same care. */
.fd-h{margin:0;font:400 28px/1.24 var(--face);letter-spacing:.004em;
  color:var(--ink);text-wrap:balance}
/* JUSTIFIED, WHICH IS THE ARTICLE'S OWN SETTING - /preview/article/the-unsung-
   corner is Lora justified at 536, so this is the feed borrowing the setting
   it already borrowed the width from. Hyphens on, because justified text in a
   narrow column without them is a river. */
.fd-said{margin:14px 0 0;font:400 17.5px/1.64 var(--serif);color:var(--ink-75);
  text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* SAME SETTING WHEREVER PROSE APPEARS. A label - a kicker, a date, an action -
   is never justified, because justifying four words is how you get four words
   with a hole in the middle. */
.fd-when{margin:9px 0 0;font:400 15px/1.5 var(--serif);color:var(--ink-55)}
.fd-week > a:not(.fd-go){text-align:left}
.fd-k-quiz .fd-said,.fd-k-event .fd-said,.fd-k-collection .fd-said,
.fd-poster .fd-said{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* except over a photograph, where a ragged edge reads better on a gradient */
.fd-poster .fd-said{text-align:left;hyphens:manual}

/* THE DROP CAP HAS GONE. Jack, 20 September: "I don't think the big D works."
   It was there to give the day a first paragraph rather than a first card;
   once every entry had a band of its own the day already had an opening, so
   it was doing a job that had stopped existing - and with the words now at
   the top of the entry it was the first thing on the page every single time. */

/* ONE THING TO DO PER ENTRY. Jack: "we don't need keep and share - the only
   thing they can do is click for more info." */
/* a flex row, not an inline box: `vertical-align:middle` on the rule dropped
   the line box six pixels below the words, and the air at the foot of an
   entry measured 44 where every other side measured 38 */
/* FLEX, NOT INLINE-FLEX. An inline box sits on a line box, and the line box
   keeps the room a descender would need whether or not one is there - which
   is where the last six pixels were hiding. Block-level, sized to its own
   content, has no line box and the foot measures 38 like every other side. */
.fd-go{display:flex;width:fit-content;align-items:center;gap:10px;margin-top:15px;
  font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--sub,var(--ink))}
.fd-go s{display:block;width:18px;height:1px;margin:0;flex:none;
  background:currentColor;text-decoration:none;
  transition:width .28s cubic-bezier(.22,.8,.24,1)}
.fd-it:hover .fd-go s{width:32px}

/* ==========================================================================
   THE ROUND-UP - what is on, the news, and the sky
   --------------------------------------------------------------------------
   Jack, 20 September: the page should open with what is on in Scotland today
   and the interesting news, and a line about the weather that changes with
   the clock.

   THE FIRST ATTEMPT WAS A PANEL and he was right to send it back: chips,
   pills, a bordered table and a "VIEW ALL" - none of which exist anywhere on
   this page. The feed separates with air and ground, never with a border, and
   an entry is a headline with prose under it.

   So these are entries like any other. The only new thing is the BILL.
   ========================================================================== */

/* THE BILL - a running order, set the way a contents page sets one.

   THE NAME IS AT THE COLUMN'S LEFT EDGE, level with the headline and the
   prose, and the WHEN is ranged right at the far side of the measure. The
   first cut hung the when on the left instead, which put every name 140px in
   from the headline - and this page has exactly one alignment rule, which is
   that every block starts where the column starts.

   Ranged right it still gives the eye a second vertical to read down, and it
   does the job the chips and pills were doing in the version Jack sent back,
   without drawing a single box. */
.fd-bill{display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:36px;row-gap:26px;margin:30px 0 0;align-items:baseline;
  /* NO WIDTH HERE. --fd-meas is declared on .h3-feed.d4 itself rather than
     inside d4's min-width query, so a width built on it applied at 375 as
     well and pushed the page 383px sideways. The cap lives in the desktop
     query with the rest of d4. */
  width:100%}
.fd-bill b{display:block;font:400 21px/1.28 var(--face);letter-spacing:.004em;
  color:var(--ink);text-wrap:balance}
.fd-bill i{display:block;margin-top:5px;font-style:normal;
  font:400 15px/1.5 var(--serif);color:var(--ink-55)}
/* the when: the margin label's own type, so it reads as a label and not as a
   second heading */
.fd-bill > u{text-decoration:none;text-align:right;white-space:nowrap;
  font:500 10.5px/1.7 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-55);font-variant-numeric:tabular-nums}
/* ON NOW is the one state worth colouring, and it takes the subject's own
   colour - there are no red badges on this site. */
.fd-bill > u.now{color:var(--sub,var(--tweed))}
/* the whole band is already the link, so the names only carry the hover */
.fd-it:hover .fd-bill b{color:var(--sub,var(--tweed))}

/* ON A PHONE THE TWO COLUMNS STAY. The first cut collapsed them and used
   `order:-1` to lift the when above its name - but order on a grid item
   reorders the WHOLE grid, so all three whens went to the top in a block and
   all three names followed underneath. A name wrapping to two lines with its
   when ranged right beside it is the same design, and it fits at 375. */
@media (max-width:700px){
  .fd-bill{column-gap:18px;row-gap:24px}
  .fd-bill b{font-size:19px}
  .fd-bill > u{font-size:9.5px;letter-spacing:.11em}
}

/* THE NUMBERS UNDER A FORECAST. A temperature, a time and a wind are evidence,
   and evidence does not belong in the sentence - Jack has said twice that the
   22mm and the "since 06:00" made the weather entries unreadable. So the
   sentence is the forecast in plain words and the figures stand under it in
   their own row, with no box round them, because nothing on this page has a
   box round it. */
.fd-nums{display:flex;flex-wrap:wrap;gap:18px 38px;margin:34px 0 0}
.fd-nums > span{display:block}
.fd-nums u{display:block;text-decoration:none;margin-bottom:7px;
  font:500 10px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-35)}
.fd-nums b{font:400 20px/1 var(--serif);color:var(--ink);
  font-variant-numeric:tabular-nums}

/* three photographs under the sky entry, at the set band's proportions */
.fd-three.under{margin-top:36px}

/* THE NEWS LEADS WITH ONE STORY. The lead is the entry's own headline at full
   size and the rest hang under it in the bill - which is how a news page has
   always worked, and it is far better than five equal lines, because five
   equal lines give a reader nothing to start with. */
.fd-k-news .fd-bill{margin-top:34px}
.fd-k-news .fd-bill b{font-size:20px}

/* the sky entry's headline IS the forecast. No measure of its own: d4 gives
   every headline a column, and a max-width on top of that only decides where
   the line breaks - which it got wrong, at "Rain from about / two". */

/* ---- a picture ----
   F1: THE PICTURE RUNS TO THE ROW, NOT THE COLUMN. The hover tint has always
   been 592 wide and the picture 536 inside it; pushing the picture out to the
   row means the two share an edge exactly, and the words become the only
   thing inset. That one indent is what stops the column reading as a stack. */
/* THE PICTURE SITS UNDER THE WORDS NOW, at X's proportions - which is also
   the shape most of our landscape photography is already cropped to. It still
   reaches the row's edges while the words stay in the column: that one indent
   is what stops the page reading as a stack. */
/* FLUSH WITH THE WORDS. Jack, 20 September: "the title, body and the Doors
   Open Days should all be left aligned with the image."

   This retires F1 on purpose. Pictures wider than the words was the first of
   my five ideas he took, and the argument - that one indent stops a column
   reading as a stack - was a good one on a page with no other structure. The
   bands have since given every entry its own ground, its own break and its
   own hover, so the column is not a stack any more and the indent is just two
   edges where there should be one. The words keep 724 and the picture comes
   in to meet them, so the measure is untouched. */
.fd-pic{display:block;position:relative;margin:0 0 22px;overflow:hidden;
  background:var(--oat)}
.fd-pic.under{margin-top:26px;margin-bottom:0}
.fd-pic.under + .fd-go{margin-top:22px}
.fd-pic img,.fd-pic video{display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.8,.24,1)}
.fd-it:hover .fd-pic img{transform:scale(1.025)}

/* ---- a film: it runs while you point at it, and says so ---- */
.fd-k-film .fd-pic video{aspect-ratio:16/10}
.fd-over{position:absolute;left:15px;bottom:13px;display:flex;
  align-items:center;gap:9px;
  font:500 11.5px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 16px rgba(10,14,10,.7)}
.fd-live{display:block;width:7px;height:7px;border-radius:50%;
  background:#AFA065;animation:cv-on 2.4s ease-in-out infinite}

/* ---- a collection: three, and you can see it is three ---- */
.fd-three{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:5px;
  margin:0 0 22px}
.fd-three span{display:block;overflow:hidden;background:var(--oat)}
.fd-three img{display:block;width:100%;height:100%;aspect-ratio:1;
  object-fit:cover;transition:transform .8s cubic-bezier(.22,.8,.24,1)}
.fd-three span:first-child img{aspect-ratio:auto;height:100%}
.fd-it:hover .fd-three img{transform:scale(1.03)}

/* ---- a fact: no picture at all, and it earns the room ---- */
.fd-k-fact .fd-h{font-size:min(34px, 28px + (34px - 28px) * 0.6);line-height:1.2;max-width:14em}
/* the fact's own short rule goes with the rest of them: at this size the
   type is the announcement and does not need underlining */

/* ==========================================================================
   A QUESTION  -  eight shapes, one contract
   ==========================================================================
   Jack: "I want to have all of these on the feed - Q1 Q3 Q4 Q5 Q6 Q7 Q8 Q11.
   Make them consistent, so text button format, answer format etc."

   So only the middle of the row changes. The question is always the feed's
   own headline size - no shape gets to shrink it to fit. The answer is always
   the same two words then the telling then the action. The reward is always
   the account quiz's confetti.

   The rows themselves are _quiz.css's: a box the shape of a button with an
   inset ring, a right answer filling solid, a wrong one filling with bracken
   and shaking. Copied deliberately, so the daily quiz and the feed's question
   feel like the same hand. */

.fd-opts{display:grid;gap:9px;margin:17px 0 0}
.fd-opt{min-height:58px;padding:0 22px;display:grid;place-items:center;
  border:0;border-radius:0;background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--stone);
  font:400 17px/1.35 var(--sans);text-align:center;cursor:pointer;
  transition:box-shadow .25s cubic-bezier(.22,.8,.24,1),
    background .35s cubic-bezier(.22,.8,.24,1),
    color .35s cubic-bezier(.22,.8,.24,1),opacity .5s cubic-bezier(.22,.8,.24,1)}
.fd-opt:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.fd-opt.right{background:var(--forest);color:var(--shell);
  box-shadow:inset 0 0 0 1px var(--forest)}
.fd-opt.wrong{background:var(--bracken);color:var(--shell);
  box-shadow:inset 0 0 0 1px var(--bracken);animation:fd-shake .5s cubic-bezier(.22,.8,.24,1) both}
.fd-opt.dim{opacity:.34}
.fd-k-quiz.done .fd-opt{cursor:default}
@keyframes fd-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}

/* THE ANSWER, the same words in the same place in all eight */
.fd-verdict{font-weight:500;font-style:italic;color:var(--forest)}
.fd-verdict.no{color:var(--bracken)}
.fd-k-quiz .fd-go{margin-top:16px;text-decoration:none}

/* ---- pictures as the answer. Their captions are set in exactly the type a
   text option uses, so the two read as one control in different clothes. ---- */
/* the picture answers are a CONTROL, not a photograph, so they keep the
   column's width with the rest of the question */
/* ONE ROW, NOT TWO. Jack: "i like the concept but its way too big and takes
   up too much room, maybe it can fit on one row or something or smaller
   images."

   Four pictures at 1.25 across two columns of a 752 column is two rows of
   372 by 298 - six hundred pixels of quiz. Four across at 4:5 is 181 by 226,
   so the whole thing is a third of the height and still reads as four
   photographs to choose between. */
.fd-picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;margin:22px 0 0}
.fd-picks.two{grid-template-columns:1fr 1fr;gap:6px}
.fd-picks .fd-pick img{aspect-ratio:4/5}
.fd-pick{position:relative;display:block;padding:0;border:0;background:none;
  overflow:hidden;cursor:pointer;
  transition:box-shadow .25s cubic-bezier(.22,.8,.24,1),opacity .5s}
.fd-pick img{display:block;width:100%;height:auto;aspect-ratio:1.25;
  object-fit:cover;transition:transform .7s cubic-bezier(.22,.8,.24,1),filter .4s}
.fd-picks.two .fd-pick img{aspect-ratio:.86}
.fd-pick:hover img{transform:scale(1.035)}
.fd-pick u{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;
  text-decoration:none;text-align:center;
  background:linear-gradient(to top,rgba(10,9,7,.8),transparent);
  font:400 17px/1.3 var(--sans);color:#fff}
.fd-pick.right{box-shadow:inset 0 0 0 4px var(--forest)}
.fd-pick.right u{background:var(--forest);color:var(--shell);padding:14px}
.fd-pick.wrong{box-shadow:inset 0 0 0 4px var(--bracken);
  animation:fd-shake .5s cubic-bezier(.22,.8,.24,1) both}
.fd-pick.wrong u{background:var(--bracken);color:var(--shell);padding:14px}
.fd-pick.wrong img{filter:grayscale(.7)}
.fd-pick.dim{opacity:.4}
.fd-pick.dim img{filter:grayscale(.75)}
.fd-k-quiz.done .fd-pick{cursor:default}

/* ---- the crop: past recognition, then out ---- */
.fd-crop{display:block;position:relative;overflow:hidden;
  margin:0 0 22px;background:var(--oat)}
.fd-crop img{display:block;width:100%;height:auto;aspect-ratio:1.5;
  object-fit:cover;transform:scale(3.4);transform-origin:44% 62%;
  transition:transform 1.5s cubic-bezier(.22,.8,.24,1)}
.fd-crop.out img{transform:scale(1)}

/* ---- the guess ---- */
.fd-slide{display:block;margin:17px 0 0}
.fd-slide b{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;
  font:400 min(56px, 28px + (56px - 28px) * 0.6)/.9 var(--face);color:var(--sub,var(--ink));
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fd-slide b i{font-style:normal;font:500 11px/1.4 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-55)}
.fd-slide input[type=range]{width:100%;margin:0;height:22px;
  accent-color:var(--sub,var(--ink))}
.fd-slide .ends{display:flex;justify-content:space-between;margin-top:3px}
.fd-slide .ends em{font-style:normal;font:500 11px/1 var(--sans);
  letter-spacing:.14em;color:var(--ink-55)}
.fd-slide .line{position:relative;display:block;height:3px;background:var(--stone);
  margin:20px 0 0}
.fd-slide .line i,.fd-slide .line u{position:absolute;top:-4px;width:2px;height:11px;
  text-decoration:none}
.fd-slide .line i{background:var(--ink-55)}
.fd-slide .line u{background:var(--forest)}
.fd-slide .line u s{position:absolute;left:50%;top:15px;transform:translateX(-50%);
  text-decoration:none;font:500 11px/1 var(--sans);letter-spacing:.1em;
  color:var(--forest);font-variant-numeric:tabular-nums}

/* ---- the one you type ---- */
.fd-type{display:flex;gap:8px;margin:17px 0 0}
.fd-type input{flex:1;min-height:58px;padding:0 20px;border:0;border-radius:0;
  outline:none;background:transparent;box-shadow:inset 0 0 0 1px var(--stone);
  font:400 17px var(--sans);color:var(--ink)}
.fd-type input:focus{box-shadow:inset 0 0 0 1px var(--ink)}
.fd-k-quiz.done .fd-type input{box-shadow:inset 0 0 0 1px var(--forest);
  color:var(--forest)}
.fd-type button{min-height:58px;padding:0 24px;border:0;cursor:pointer;
  background:var(--sub,var(--ink));color:var(--shell);
  font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}

/* the confetti's canvas, made once and reused */
#fd-confetti{position:fixed;inset:0;z-index:70;pointer-events:none}

/* ---- a would-you-rather: two pictures, and the votes come up on them ---- */
.fd-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px;
  margin:0 0 22px}
.fd-pick{position:relative;display:block;padding:0;border:0;background:none;
  overflow:hidden;cursor:pointer}
.fd-pick img{display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;transition:transform .8s cubic-bezier(.22,.8,.24,1)}
.fd-pick:hover img{transform:scale(1.03)}
/* the bar is the vote, and it grows from nothing once you have had your say */
.fd-pick i{position:absolute;left:0;bottom:0;height:4px;width:0;
  background:var(--sub,var(--ink));
  transition:width .7s cubic-bezier(.22,.8,.24,1)}
.fd-pick u{position:absolute;left:0;right:0;bottom:0;display:flex;
  align-items:baseline;justify-content:space-between;gap:10px;
  padding:26px 13px 13px;text-decoration:none;
  background:linear-gradient(to top,rgba(10,14,10,.72),transparent);
  font:500 11.5px/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:#fff;text-align:left}
.fd-pick u b{font:500 15px/1 var(--sans);letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.fd-k-two.done .fd-pick{cursor:default}

/* ---- ON THIS DAY: the year is the mark ----
   Jack chose B7 off /design-2026/on-this-day-b.html and cut two things from
   it - the month under the numerals, and the action line at the foot, since
   the whole row has always been the link. */
.fd-mark{display:grid;grid-template-columns:auto 1fr;column-gap:24px;
  align-items:start}
.fd-yr{font:400 min(76px, 28px + (76px - 28px) * 0.6)/.84 var(--face);color:var(--sub,var(--ink));
  letter-spacing:-.012em;font-variant-numeric:lining-nums}
/* the phrase opens the headline rather than sitting above it: one sentence,
   one thought, and the eye still catches where it starts */
/* "On this day in 1866," takes the heading's own colour, a little softer, so it reads on a dark post as on a pale one (Jack, 12 October 2026: "can you fix the font on this feedpost on home cant read it"; it was fixed ink on cask) */
.fd-h .fd-was{color:var(--sub,inherit);opacity:.72}
/* on a dark post the post's own colour (--sub) is the ground's: the heading's light colour instead */
.fd-row.dark .fd-h .fd-was{color:inherit}

/* ==========================================================================
   A COLLECTION  -  cards you swipe
   ==========================================================================
   Jack: "the name of the place on the image, then circles similar to
   Instagram centred underneath so it's obvious you can scroll through them.
   Then under that is the general collection description. Keep it simple."

   So: portrait cards with the next one peeking, the name on each picture,
   dots centred under them, and the collection's own words below that. No
   cover card and no action line - the whole row is the link. */

.fd-coll{display:block;position:relative;margin:0 0 20px}
.fd-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;
  cursor:grab;-webkit-user-select:none;user-select:none}
.fd-track::-webkit-scrollbar{display:none}
/* while the pointer is down the snap has to be off, or it fights the drag */
.fd-track.pull{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}

/* THE ARROWS, for the desktop. Jack: "for collections we need arrows to swipe
   on desktop" - a carousel that only answers to a swipe is one a mouse cannot
   use, which is most people at a desk. Out in the page's margin rather than on
   the photographs, which is where the opening puts its own. */
.fd-arr{position:absolute;z-index:3;top:calc(50% - 40px);width:38px;height:38px;
  transform:translateY(-50%);padding:0;cursor:pointer;
  background:var(--paper);border:1px solid var(--stone);
  display:none;place-items:center;
  transition:border-color .25s cubic-bezier(.22,.8,.24,1),opacity .25s}
.fd-arr i{display:block;width:9px;height:9px;border-style:solid;
  border-color:var(--ink);border-top-width:1.5px;border-right-width:1.5px;
  border-bottom-width:0;border-left-width:0;
  transform:rotate(45deg) translate(-1px,1px)}
.fd-arr.back{left:-48px}
.fd-arr.back i{transform:rotate(-135deg) translate(-1px,1px)}
.fd-arr.fwd{right:-48px}
.fd-arr:hover{border-color:var(--ink)}
.fd-arr[disabled]{opacity:0;pointer-events:none}
/* only where there is a real pointer: a thumb needs no buttons */
@media (hover:hover) and (pointer:fine){
  .fd-arr{display:grid}
}
.fd-card{position:relative;flex:0 0 calc(100% - 96px);scroll-snap-align:start;
  overflow:hidden;background:var(--oat)}
.fd-card img{display:block;width:100%;height:auto;aspect-ratio:.8;
  object-fit:cover;pointer-events:none}

/* the name, on the picture */
.fd-name{position:absolute;left:0;right:0;bottom:0;padding:46px 18px 16px;
  background:linear-gradient(to top,rgba(10,9,7,.84),transparent)}
.fd-name b{display:block;font:400 21px/1.2 var(--face);color:#fff}
.fd-name em{display:block;margin-top:5px;font-style:normal;
  font:500 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}

/* THE DOTS. Round, and the only round thing in the system: the house rule is
   square edges and it holds for everything we draw, but this is a control
   every reader already knows and making it ours would cost it its obviousness.
   Seven at a time, the outermost shrinking, so fourteen places do not print
   fourteen dots. */
.fd-dots{display:flex;align-items:center;justify-content:center;gap:6px;
  height:8px;margin:16px 0 0}
.fd-dots i{display:block;width:6px;height:6px;border-radius:50%;
  background:var(--stone);
  transition:background .25s cubic-bezier(.22,.8,.24,1),
    width .25s cubic-bezier(.22,.8,.24,1),height .25s cubic-bezier(.22,.8,.24,1)}
.fd-dots i.on{background:var(--sub,var(--ink))}
.fd-dots i.sm{width:5px;height:5px}
.fd-dots i.xs{width:4px;height:4px;opacity:.6}

/* and the collection's own words, under the dots */
/* THE 20px WAS SPACING THE HEADLINE AWAY FROM A KICKER, and when the region
   band lost its kicker on 20 September the gap stayed: the headline was
   pushed 20px down the column while the big margin label beside it stayed
   where it was, so the two stopped lining up. Measured, the quiz sits its
   label 8px above its headline and the region sat it 28px above.

   The gap belongs to the kicker, so it is asked for only where there is
   one. `:has` rather than `+` because a collection puts its cards between
   the kicker and the headline in the markup and moves them afterwards with
   `order`, so the two are not adjacent siblings. Where :has is not
   supported the headline simply sits tight to the kicker, which is what
   every other kind of entry does anyway. */
.fd-k-collection > .fd-h{margin-top:0}
.fd-k-collection:has(> .fd-kick) > .fd-h{margin-top:20px}

@media (max-width:900px){
  .fd-card{flex-basis:calc(100% - 64px)}
  /* below this there is no margin to stand them in */
  .fd-arr{display:none}
}

/* ==========================================================================
   AN EVENT  -  two shapes, one contract
   ==========================================================================
   Jack chose E4 and E8 off /design-2026/feed-event.html. The poster for the
   event that leads a day; the three-up for one that arrives with company.

   They share the headline size, the line under it, the week and the two ways
   out - in that order, always. An event row is the second shape in the feed
   that cannot be one link, because it has two destinations; the quiz was the
   first, for being full of buttons. */

/* E4, the poster */
/* the poster, the swipe and the three-up reach the row's edge the same way */
.fd-poster{display:block;position:relative;overflow:hidden;
  margin:0 0 4px;background:var(--oat)}
.fd-poster img{display:block;width:100%;height:auto;aspect-ratio:.94;
  object-fit:cover;transition:transform .8s cubic-bezier(.22,.8,.24,1)}
.fd-it:hover .fd-poster img{transform:scale(1.02)}
.fd-poster .veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,9,7,.86),rgba(10,9,7,.18) 52%,
    rgba(10,9,7,.34))}
.fd-poster .up{position:absolute;left:24px;right:24px;top:20px;display:flex;
  justify-content:space-between;gap:14px}
.fd-poster .up em{font-style:normal;font:500 11px/1.4 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.fd-poster .dn{position:absolute;left:24px;right:24px;bottom:22px}
.fd-poster .dn .fd-h{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.fd-poster .dn .fd-said{color:rgba(255,255,255,.8)}

/* E8, the three-up */
.fd-up{display:grid;grid-template-columns:1.7fr 1fr;gap:10px;
  margin:0 0 22px}
.fd-up .big,.fd-up .side a{position:relative;display:block;overflow:hidden;
  background:var(--oat);text-decoration:none}
.fd-up .big img{display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:1;transition:transform .8s cubic-bezier(.22,.8,.24,1)}
.fd-it:hover .fd-up .big img{transform:scale(1.025)}
.fd-up .side{display:grid;gap:10px}
.fd-up .side img{display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:1.45;transition:transform .8s cubic-bezier(.22,.8,.24,1)}
.fd-up .side a:hover img{transform:scale(1.04)}
.fd-up .side u{position:absolute;left:0;right:0;bottom:0;padding:24px 11px 10px;
  text-decoration:none;
  background:linear-gradient(to top,rgba(10,9,7,.82),transparent);
  font:500 10px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:#fff}
.fd-run{margin:9px 0 0;font:500 11.5px/1.5 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--sub,var(--ink))}

/* the week, the same under both */
/* and the week is set apart by air too, not by a rule */
.fd-week{display:block;margin:26px 0 0;padding:0}
.fd-week b{display:block;margin:0 0 12px;font:500 10.5px/1 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.fd-week > a:not(.fd-go){display:grid;grid-template-columns:64px 1fr;
  gap:14px;align-items:baseline;margin:0 0 9px;
  font:400 15px/1.45 var(--serif);color:var(--ink);text-decoration:none}
.fd-week > a:not(.fd-go):hover{text-decoration:underline;text-underline-offset:3px}
.fd-week em{font-style:normal;font:500 10.5px/1.7 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--sub,var(--ink));
  font-variant-numeric:tabular-nums}
.fd-k-event .fd-go{text-decoration:none}

/* ---- an event: the date sits with the headline, because it is the news ---- */
.fd-date{display:grid;grid-template-columns:auto 1fr;align-items:start;
  column-gap:20px}
.fd-date b{grid-row:1;display:block;font:400 min(40px, 28px + (40px - 28px) * 0.6)/1 var(--face);
  color:var(--sub,var(--ink));font-variant-numeric:tabular-nums}
.fd-date i{grid-row:2;display:block;margin-top:2px;
  font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--sub,var(--ink));font-style:normal}
.fd-date .fd-h{grid-column:2;grid-row:1 / span 2}

/* ---- the phone ---- */
@media (max-width:900px){
  /* `.ex-wrap` already carries the page's margin - adding to it left the
     column 259px wide in a 375px window. */
  .h3-feed{max-width:none}
  .h3-feed{--fd-air:16px;--fd-gap:72px}
  .fd-h{font-size:24px}
  .fd-k-fact .fd-h{font-size:27px}
  /* the margin is the first thing to go on a phone */
  .fd-mark{display:block}
  .fd-yr{display:block;margin:0 0 10px;font-size:min(54px, 28px + (54px - 28px) * 0.6)}
  .fd-up{grid-template-columns:1fr;gap:6px}
  .fd-up .side{grid-template-columns:1fr 1fr}
  .fd-poster .up,.fd-poster .dn{left:16px;right:16px}
  .fd-picks{grid-template-columns:1fr 1fr}
  .fd-slide b{font-size:min(42px, 28px + (42px - 28px) * 0.6)}
  .fd-three{grid-template-columns:1fr 1fr 1fr}
  .fd-three span:first-child img{aspect-ratio:1}
}

/* ===========================================================================
   THE DARK BAND
   ===========================================================================
   The weather entries and the collections stand on one. It is not a tint on
   the existing ground: it is black, the words are pure white, and the sky is
   drawn live behind them. Jack, 20 September: "maybe pure white text for
   these black sections."

   A dark band does not take the hover the pale ones take. Three grounds
   rotating four per cent apart works because the steps are small; black to
   slightly-less-black is not a hover, it is a fault report. The photographs
   lift instead, which is the whole reason they are there.
   =========================================================================== */
.fd-row.dark{background:#2B301D;color:#fff;--pale:#D7D2CB}
.fd-row.dark + .fd-row,
.fd-row + .fd-row.dark{border-top-color:rgba(255,255,255,.10)}

/* PURE WHITE, and a shadow under it. The sky behind is never one value -
   an aurora curtain or a lit cloud can put 200 brightness behind a word -
   so the type carries its own dark halo and stays readable over any of it. */
.fd-row.dark .fd-h{color:#fff;text-shadow:0 1px 24px rgba(4,6,10,.72)}
.fd-row.dark .fd-said{color:#fff;opacity:.92;text-shadow:0 1px 18px rgba(4,6,10,.68)}
.fd-row.dark .fd-at{color:rgba(255,255,255,.55)}
.fd-row.dark .fd-go{color:#E7C9A4}
.fd-row.dark .fd-name b{color:#fff}
.fd-row.dark .fd-dots i{background:rgba(255,255,255,.28)}
.fd-row.dark .fd-dots i.on{background:#fff}
.fd-row.dark .fd-arr{background:rgba(250,247,242,.92);border-color:transparent;color:#414042}
.fd-row.dark .fd-arr i{border-color:#414042}

/* THE SKY, behind everything the entry carries. It is the row's own width,
   not the column's, because a sky that stops at the measure is a picture. */
.fd-sky{position:absolute;z-index:0;top:0;bottom:0;left:calc(50% - 50vw);
  width:100vw;pointer-events:none;overflow:hidden}
.fd-sky canvas{display:block;width:100%;height:100%}
/* LIFTED ABOVE THE SKY - but not .fd-at, which is absolutely positioned out
   in the margin and had been taking its offsets as a relative shift instead,
   landing it 146px left of the column and underneath the reading. It gets its
   z-index directly; it is already positioned and does not need the lift. */
.fd-row.dark .fd-it > *:not(.fd-sky):not(.fd-at),
.fd-row.bright .fd-it > *:not(.fd-sky):not(.fd-at){position:relative;z-index:2}
.fd-row.dark .fd-at,.fd-row.bright .fd-at{z-index:2}

/* the action carries a shadow too: a bright curtain or a lit cloud can put
   200 brightness behind it and it is the smallest type on the band */
.fd-row.dark .fd-go{text-shadow:0 1px 18px rgba(4,6,10,.8)}
.fd-row.dark .fd-go s{box-shadow:0 0 14px rgba(4,6,10,.7)}

/* THE READING, said as instruments. Only the weather carries one: a
   temperature and a cloud figure are the entry's evidence, and putting them
   into the sentence would waste the sentence. */
.fd-read{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:11px;margin:0 0 14px;font:500 11px/1 var(--sans);letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
  font-variant-numeric:tabular-nums}
.fd-read span{color:#fff}
.fd-read span + span::before{content:'/';display:inline-block;
  margin-right:11px;color:rgba(255,255,255,.3)}

/* ===========================================================================
   THE CARDS
   ===========================================================================
   One strip, 294 by 327, six apart, two and a half of them in view - the same
   on a weather band and on a collection, because a weather entry IS a
   collection with a sky behind it. Jack: "for collections can you make these
   just like the weather ones we just did, the same layout."
   =========================================================================== */
.fd-track{gap:var(--fd-cgap)}
.fd-card{flex:0 0 var(--fd-card)}
.fd-card img{aspect-ratio:var(--fd-shape)}

/* the caption melts into the band's own colour, so the card has no bottom
   edge and nothing adds height back */
.fd-row.dark .fd-name{padding:36px 14px 12px;
  background:linear-gradient(to top,#2B301D 4%,rgba(8,10,14,.42) 52%,rgba(8,10,14,0))}
.fd-row.dark .fd-name b{font-size:16px;line-height:1.24}
.fd-row.dark .fd-name em{margin-top:4px;font-size:9.5px;letter-spacing:.14em;
  color:#414042}

/* THE CARDS COME AFTER THE READING, and they are moved here rather than in
   the markup. The heading still comes first in the document, which is what
   anything not looking at the screen reads - and on 19 September Jack had
   wanted the pictures first, so leaving the DOM alone keeps that reversible.

   Every child is ordered because a flex container with one ordered child and
   the rest at their default puts that child somewhere nobody expects. */
.fd-k-collection, .fd-k-weather{display:flex;flex-direction:column}
.fd-k-collection > .fd-sky, .fd-k-weather > .fd-sky{order:0}
.fd-k-collection > .fd-read, .fd-k-weather > .fd-read{order:1}
.fd-k-collection > .fd-h, .fd-k-weather > .fd-h{order:2}
.fd-k-collection > .fd-said, .fd-k-weather > .fd-said{order:3}
.fd-k-collection > .fd-coll, .fd-k-weather > .fd-coll{order:4;width:100%;margin:24px 0 0}
.fd-k-collection > .fd-go, .fd-k-weather > .fd-go{order:5}

/* the arrows sit on the cards' own middle, not on the strip's */
.fd-k-collection .fd-arr, .fd-k-weather .fd-arr{
  top:calc(var(--fd-card) / var(--fd-shape) / 2)}

/* ===========================================================================
   C2 - CENTRED TO THE PAGE
   ===========================================================================
   Jack, 20 September: "try C2 on feed, see how that looks."

   One piece of craft decides the shape of this: CENTRED TEXT CANNOT BE
   JUSTIFIED. Justification works by stretching a line to two fixed edges and
   centred text has neither, so the reading is ragged on both sides. At the
   full 752 a long line with two ragged edges is genuinely harder to follow
   than the same line with two straight ones - so the reading is held in to
   600, which is about 68 characters and the width at which a ragged measure
   stops costing anything. The headline keeps the full column.
   =========================================================================== */
.h3-feed.mid .fd-h{text-align:center}
.h3-feed.mid .fd-said{text-align:center;hyphens:manual;
  width:min(100%,600px);margin-left:auto;margin-right:auto}
.h3-feed.mid .fd-go{margin-left:auto;margin-right:auto}
.h3-feed.mid .fd-run,
.h3-feed.mid .fd-when,
.h3-feed.mid .fd-week{text-align:center}
.h3-feed.mid .fd-opts,
.h3-feed.mid .fd-picks{justify-content:center}
/* the strip stays where it is: it scrolls, so its start IS its left edge, and
   centring a scroller only hides the fact that there is more of it */

/* the margin time keeps its own edge - a label hanging off one side is the
   one thing that breaks a symmetrical entry, so under 1200 where it comes
   inline it centres with everything else */
@media (max-width:1200px){
  .h3-feed.mid .fd-at{text-align:center}
}

@media (max-width:900px){
  .h3-feed{--fd-card:220px;--fd-cgap:5px}
  .fd-row.dark .fd-name b{font-size:14.5px}
}

/* ===========================================================================
   THE BRIGHT BAND
   ===========================================================================
   For the two weather entries that are daylight. Same band, same cards, same
   live sky - the only thing that changes is that the words go back to ink,
   because white on a pale blue sky with white cloud in it cannot be read and
   a text-shadow does not save it.

   The card captions keep their dark scrim rather than melting into the ground
   the way the black bands do: a white gradient under white type would lose the
   name entirely.
   =========================================================================== */
.fd-row.bright{background:#C3D2DB;color:var(--ink);--pale:var(--ink-75)}
.fd-row.bright .fd-h{color:var(--ink);text-shadow:0 1px 22px rgba(255,255,255,.75)}
.fd-row.bright .fd-said{color:var(--ink-75);text-shadow:0 1px 16px rgba(255,255,255,.8)}
.fd-row.bright .fd-at{color:var(--ink-55)}
.fd-row.bright .fd-go{color:var(--cask)}
.fd-row.bright .fd-read{color:rgba(65,64,66,.6);text-shadow:0 1px 14px rgba(255,255,255,.8)}
.fd-row.bright .fd-read span{color:var(--ink)}
.fd-row.bright .fd-read span + span::before{color:rgba(65,64,66,.3)}
.fd-row.bright .fd-name{padding:46px 14px 14px;
  background:linear-gradient(to top,rgba(8,10,14,.86) 4%,rgba(8,10,14,.34) 54%,rgba(8,10,14,0))}
.fd-row.bright .fd-name b{color:#fff;font-size:16px;line-height:1.24}
.fd-row.bright .fd-name em{margin-top:4px;font-size:9.5px;letter-spacing:.14em;color:#DCD4C8}
.fd-row.bright .fd-dots i{background:rgba(65,64,66,.26)}
.fd-row.bright .fd-dots i.on{background:var(--ink)}
.fd-row.bright + .fd-row,
.fd-row + .fd-row.bright{border-top-color:rgba(65,64,66,.12)}

/* THE TIME, WHEN IT COMES INLINE. Below 1200 there is no margin to stand in
   and it was landing on top of the instrument reading, which sits at the top
   of a weather band where nothing used to be. */
@media (max-width:1200px){
  .fd-k-weather > .fd-at,
  .fd-k-collection > .fd-at{order:0;margin:0 0 10px}
}

/* ===========================================================================
   THE PEOPLE BEHIND THE PLACES - the shopkeeper band, S2
   ===========================================================================
   Jack picked S2 off the deck: the film in the column with the words under it.

   THE ONE EXCEPTION TO WORDS-FIRST, and it is deliberate. Everything else on
   this feed puts the headline above the picture, because on a long day you
   should learn what a thing is before you look at it. Here the film IS the
   hook - somebody opening a door and smiling at you stops a scroll in a way
   no sentence will.

   The order is set here rather than in the markup, so the heading still comes
   first in the document for anything not looking at the screen. Every child is
   given an order, because a flex container with one ordered child and the rest
   at their default puts that child somewhere nobody expects.
   =========================================================================== */
.fd-k-shop{display:flex;flex-direction:column}
.fd-k-shop > .fd-at{order:0}
.fd-k-shop > .fd-kick{order:1}
.fd-k-shop > .fd-pic{order:2}
.fd-k-shop > .fd-h{order:3}
.fd-k-shop > .fd-said{order:4}
.fd-k-shop > .fd-go{order:5}
.fd-k-shop > .fd-h{margin-top:26px}

/* the standing line, so a reader learns the shape before reading a word */
.fd-kick{display:block;margin:0 0 14px;font:500 11px/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;color:var(--bracken)}
.fd-row.dark .fd-kick{color:#E7C9A4}

/* ===========================================================================
   D4 - THE LEDGER. /drafts/home-9
   ===========================================================================
   From the other chat's sheet, `public/design-2026/feed-fresh.html`, in its
   own words: "a ledger - when on the left, what on the right". Above a
   thousand pixels the entry becomes two columns, the band widens from 752 to
   1100, and the time is set large and faint in Larken beside everything else.

   SMALLER THAN THE SHEET, as asked. It sets 58px in a 300px column; this is
   44 in 260 - the same idea with the volume down. Still the first thing you
   see, no longer the loudest thing on the page.

   AND THE TRAP IT WALKS PAST. `.fd-at` is normally absolutely positioned out
   in the margin with a negative left and a top offset. Dropping it into a grid
   column while leaving those in place is exactly the fault that threw it 146px
   off the column on 20 September - a component rule half-overridden wins the
   other half. Every one of those properties is cleared below, not just the one
   that is wrong.
   =========================================================================== */
.h3-feed.d4{--fd-wide:1100px;--fd-when:260px;--fd-big:44px;
  /* THE READING MEASURE IS THE COLUMN. Jack, 21 September: "I think listings
     would look better if the text is the full way over to the margin."

     It was 600 against a 752 column, so the words stopped 152px short of
     the photograph and every entry carried two right edges. Now there is
     one, at 1223, shared by the headline, the prose, the running order, the
     forecast's figures and the picture.

     Lora at 16.5 over 752 is about ninety characters a line, which is wide
     for continuous prose - but these are three-line standfirsts under a
     headline rather than pages of an article, and one right edge is worth
     more here than the measure costs. If a long body ever lands in the feed,
     this is the first number to look at. */
  --fd-gap:176px;--fd-meas:752px}

@media (min-width:1001px){
  .h3-feed.d4 .fd-it{
    width:min(100%,calc(var(--fd-wide) + var(--fd-air) * 2));
    display:grid;grid-template-columns:var(--fd-when) minmax(0,var(--fd-col));
    column-gap:48px;align-items:start;justify-items:start}

  /* everything but the sky lives in the right-hand column. The sky is
     absolutely positioned and spans the whole row, so it is left out - giving
     it a grid area would anchor it to one column. */
  /* THE TIME IS EXCLUDED HERE, not overridden later. A child selector
     carrying :not(.fd-sky) scores (0,4,0); a plain descendant rule on the
     time scores (0,3,0) - so the column-2 rule was quietly winning, the time
     sat in the wrong column, and every other property in its own rule applied
     perfectly. That is the hardest kind of fault to see, because it looks
     like the rule half worked rather than like it lost. */
  .h3-feed.d4 .fd-it > *:not(.fd-sky):not(.fd-at){grid-column:2}

  /* the time, in a column of its own */
  .h3-feed.d4 .fd-it > .fd-at{
    grid-column:1;grid-row:1 / span 9;
    position:static;left:auto;top:auto;right:auto;
    width:auto;max-width:none;margin:-6px 0 0;
    text-align:left;text-transform:none;
    font:400 min(min(var(--fd-big),max(30px,7vw)), 28px + (min(var(--fd-big),max(30px,7vw)) - 28px) * 0.6)/1.04 var(--face);
    letter-spacing:-.012em;color:var(--ink-35);text-wrap:balance}
  .h3-feed.d4 .fd-row.dark .fd-at{color:rgba(255,255,255,.42)}

  /* the wide things fill their column rather than shrinking to their content */
  .h3-feed.d4 .fd-h,
  .h3-feed.d4 .fd-said,
  .h3-feed.d4 .fd-pic,
  .h3-feed.d4 .fd-opts,
  .h3-feed.d4 .fd-coll,
  .h3-feed.d4 .fd-read,
  .h3-feed.d4 .fd-week,
  .h3-feed.d4 .fd-poster,
  .h3-feed.d4 .fd-three,
  /* the round-up's two: without these `justify-items:start` sizes them by
     their longest line instead of by the column */
  .h3-feed.d4 .fd-bill,
  .h3-feed.d4 .fd-nums,
  .h3-feed.d4 .fd-pair,
  .h3-feed.d4 .fd-up{justify-self:stretch;width:auto}

  /* THE ROUND-UP READS TO THE PROSE'S EDGE, NOT THE PICTURE'S. A bill is a
     list of sentences, so it stops where the sentences stop - which is what
     makes the ranged-right column land on an edge that is already there. */
  .h3-feed.d4 .fd-bill,
  .h3-feed.d4 .fd-nums{max-width:var(--fd-meas)}

  /* D4's own type: a shorter headline and a narrower reading than the
     centred feed uses, because the column is doing the width now */
  .h3-feed.d4 .fd-h{font-size:min(34px, 28px + (34px - 28px) * 0.6);line-height:1.16;letter-spacing:-.002em}
  /* ALL THREE, not just the width. Something clamps this to 307px and no
     readable rule in any of the page's seventeen stylesheets declares it -
     setting max-width by hand releases it at once. Stating the whole set is
     the reliable answer; finding the clamp is a job for a quiet afternoon. */
  .h3-feed.d4 .fd-said{font-size:16.5px;
    width:min(100%,var(--fd-meas));min-width:0;max-width:var(--fd-meas);
    margin-left:0;margin-right:0}

  /* a ledger is read across, not down the middle: the centring that the rest
     of the feed wears would fight the column it now sits in */
  .h3-feed.d4.mid .fd-h,
  .h3-feed.d4.mid .fd-said,
  .h3-feed.d4.mid .fd-read,
  .h3-feed.d4.mid .fd-run,
  .h3-feed.d4.mid .fd-when{text-align:left}
  .h3-feed.d4.mid .fd-go{margin-left:0;margin-right:auto}
  .h3-feed.d4.mid .fd-read,
  .h3-feed.d4.mid .fd-opts,
  .h3-feed.d4.mid .fd-picks{justify-content:flex-start}
  .h3-feed.d4 .fd-kick{align-self:start}

  /* the grid puts the time where the margin used to, so the margin goes */
  .h3-feed.d4 .fd-k-weather > .fd-at,
  .h3-feed.d4 .fd-k-collection > .fd-at{order:0;margin:-6px 0 0}
}

/* ===========================================================================
   THE KEEP
   ===========================================================================
   docs/WHAT-TRAVELS.md: in travel a save means somebody is adding a place to
   their plans. It is the metric that means something, and until now nothing on
   this feed could be kept.

   Top right of the card, small, and only filled in once it is on - an empty
   outline is an invitation and a filled one is a fact. It is a button inside a
   band that is itself a link, so it sits above the stretched door and stops
   the click going through.
   =========================================================================== */
.fd-keep{position:absolute;z-index:6;top:10px;right:10px;
  width:34px;height:34px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(12,14,18,.42);backdrop-filter:blur(6px);
  display:grid;place-items:center;
  opacity:0;transform:translateY(-3px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),background .22s var(--ease)}
.fd-card:hover .fd-keep,.fd-keep:focus-visible,.fd-keep.on{opacity:1;transform:none}
.fd-keep:hover{background:rgba(12,14,18,.62)}
.fd-keep:focus-visible{outline:2px solid var(--august);outline-offset:2px}

/* the mark itself: an outline that fills. Drawn rather than an emoji, so it
   sits on the same baseline as everything else we draw. */
.fd-keep i{display:block;width:15px;height:15px;
  border:1.6px solid rgba(255,255,255,.92);border-bottom:0;
  border-radius:2px 2px 0 0;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%);
  transition:background .22s var(--ease)}
.fd-keep.on i{background:#fff}
.fd-keep.on{background:rgba(12,14,18,.66)}

/* on a phone there is no hover, so it is simply always there */
@media (hover:none){.fd-keep{opacity:1;transform:none}}

/* ===========================================================================
   A PROMPT - M5
   ===========================================================================
   Jack locked M5 as the shape for every prompt, not only the moon's: one
   question, a line saying why we are asking AND what we will not ask for, one
   field, one button.

   The second half of that line is the half that matters. "We do not want your
   address, only enough to work out where your horizon is" is why somebody
   answers - asking for less than we could is the whole technique.
   =========================================================================== */
.fd-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px;margin:24px 0 0}
.h3-feed.d4 .fd-ask{justify-content:flex-start}
.fd-field{flex:0 0 220px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);color:#fff;
  padding:13px 15px;font:400 15px/1 var(--sans);text-align:center}
.fd-field::placeholder{color:rgba(255,255,255,.45)}
.fd-field:focus{outline:0;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.12)}
.fd-ask button{background:#F4F0EA;border:0;color:#414042;cursor:pointer;
  padding:13px 22px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.fd-ask button:hover{background:#fff}
.fd-why{flex:1 1 100%;margin-top:4px;font:400 14px/1.5 var(--serif);
  font-style:italic;color:rgba(255,255,255,.6);text-align:center}
.h3-feed.d4 .fd-why{text-align:left}

/* a prompt on a pale band, where the feed has no dark ground to lean on */
.fd-row:not(.dark) .fd-field{background:var(--paper);border-color:var(--stone-2);color:var(--ink)}
.fd-row:not(.dark) .fd-field::placeholder{color:var(--ink-55)}
.fd-row:not(.dark) .fd-ask button{background:var(--ink);color:var(--paper)}
.fd-row:not(.dark) .fd-why{color:var(--ink-55)}

/* ===========================================================================
   A REFERENCE LIST - what to pack
   ===========================================================================
   The most saved format in travel, and we had never made one. Built to be
   come back to: plain, ranged left even on a centred feed, and the same every
   time it is opened. A list somebody keeps is a list they can scan, so the
   lines do not justify and they do not centre.
   =========================================================================== */
.fd-list{display:block;width:min(100%,600px);margin:22px auto 0;text-align:left}
.h3-feed.d4 .fd-list{margin-left:0}
.fd-list span{display:flex;gap:14px;padding:11px 0;
  font:400 16.5px/1.55 var(--serif);color:inherit;
  border-bottom:1px solid rgba(255,255,255,.12)}
.fd-list span:last-child{border-bottom:0}
.fd-list span::before{content:'';flex:0 0 5px;height:5px;margin-top:11px;
  border-radius:50%;background:currentColor;opacity:.4}
.fd-row:not(.dark) .fd-list span{border-bottom-color:rgba(228,222,217,.8)}

/* ==========================================================================
   SECTIONS SIX TO NINE
   ==========================================================================
   A word given the room, the same place twice, a sound, and one pin on an
   outline of the country. */

/* ---- A WORD ----
   The word is the picture. It carries the entry on its own at display size,
   and the meaning reads underneath as ordinary text, so nothing competes.
   One face, never two - the whole headline is Larken or none of it is. */
.fd-k-word .fd-h{font:400 min(clamp(44px,8vw,86px), 28px + (clamp(44px,8vw,86px) - 28px) * 0.6)/.98 var(--face);
  letter-spacing:-.022em;color:var(--sub,var(--ink))}
.fd-k-word .fd-said{margin-top:18px}
/* the margin already carries the kicker, so the word is not repeated there */
.h3-feed.d4 .fd-k-word .fd-h{margin-top:-8px}

/* ---- THE SAME PLACE, TWICE ----
   Equal frames, equal weight. The caption is the whole point of the shape -
   without it the pair is just two photographs - so it sits under rather than
   over, where nothing can make it unreadable. */
.fd-twain{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 22px}
.fd-twain > span{display:block;min-width:0}
.fd-twain img{display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover}
.fd-twain em{display:block;margin:9px 0 0;font-style:normal;
  font:500 11.5px/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-35)}
.fd-row.dark .fd-twain em{color:rgba(255,255,255,.55)}

/* ---- A SOUND ----
   The player is the browser's own. It is the one control on this page we do
   not draw ourselves, because a custom transport that cannot be operated by
   keyboard is worse than a plain one that can. */
.fd-hear{display:block;margin:20px 0 0}
.fd-hear audio{display:block;width:min(100%,420px)}
.h3-feed.d4 .fd-hear audio{margin-left:0}

/* ---- ONE PIN ----
   No tiles, no key, no bill: the coast is drawn from coordinates and so is
   the pin, which is why they cannot disagree with each other. */
.fd-map{display:grid;justify-items:start;gap:18px;margin:22px 0 0}
/* the outline is /atlas/scotland-map.svg, the same one the munro pages and
   the events finder draw, through the same component - so a pin here and a
   pin there are in the same place on the same map */
.fd-map > div{display:block;width:min(100%,300px)}
.fd-map svg.scot{display:block;width:100%;height:auto}
.fd-map .scot .dot circle{fill:var(--sub,var(--bracken));stroke:none}
.fd-row.dark .fd-map .scot .dot circle{fill:#fff}

.fd-tell{padding:11px 20px;cursor:pointer;
  background:none;border:1px solid var(--stone);color:var(--ink);
  font:500 11.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .25s cubic-bezier(.22,.8,.24,1),
             background-color .25s cubic-bezier(.22,.8,.24,1),
             color .25s cubic-bezier(.22,.8,.24,1)}
.fd-tell:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.fd-row.dark .fd-tell{border-color:rgba(255,255,255,.3);color:#fff}
.fd-row.dark .fd-tell:hover{background:#fff;color:var(--ink);border-color:#fff}

@media (max-width:640px){
  .fd-twain{gap:6px}
  .fd-map svg{width:min(100%,220px)}
}

/* ---- two corrections, both found by reading the page rather than measuring
   it ----

   THE WORD WAS NOT BIG. `.h3-feed.d4 .fd-h` sets 34px and is a three-class
   selector, so a two-class `.fd-k-word .fd-h` lost to it however far down the
   file it sat. Specificity, not order - and the fix is to say it at the same
   depth rather than reach for !important.

   THE LIST SAT ABOVE THE HEADLINE. The reference list renders early in the
   markup, so "a waterproof, and a warm layer under it" came before "what to
   pack for Scotland in September". The row is a grid, so `order` puts it back
   under the words it belongs to without moving any markup. */
.h3-feed .fd-k-word .fd-h,
.h3-feed.d4 .fd-k-word .fd-h{font:400 min(clamp(44px,8vw,86px), 28px + (clamp(44px,8vw,86px) - 28px) * 0.6)/.98 var(--face);
  letter-spacing:-.022em;color:var(--sub,var(--ink));max-width:none}

.fd-list{order:2}
.fd-k-packing > .fd-go,
.fd-k-fact > .fd-go{order:3}

/* ---- AN EVENT'S THREE FACTS ----
   D3 off /design-2026/feed-event.html, which Jack picked on 20 September for
   both states of the entry. Three columns, ruled top and bottom, in a fixed
   order: Where, When, Price.

   THE EMPTY COLUMN IS THE POINT. We hold a price on none of the 179 published
   events. A line of facts would have let that vanish; three columns cannot,
   and the em dash sitting there is the argument for filling the data. */
.fd-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:24px 0 0;width:min(100%,var(--fd-meas,600px));
  border-top:1px solid var(--stone);border-bottom:1px solid var(--stone)}
.h3-feed.d4 .fd-facts{margin-left:0}
.fd-facts > span{display:block;min-width:0;padding:14px 18px 14px 0}
.fd-facts b{display:block;margin-bottom:5px;font:500 10.5px/1 var(--sans);
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-35)}
.fd-facts em{font-style:normal;font:400 16px/1.35 var(--serif);color:inherit}
.fd-facts em.none{color:var(--ink-35)}
.fd-row.dark .fd-facts{border-color:rgba(255,255,255,.22)}
.fd-row.dark .fd-facts b{color:rgba(255,255,255,.5)}
.fd-row.dark .fd-facts em.none{color:rgba(255,255,255,.4)}

@media (max-width:640px){
  .fd-facts{grid-template-columns:1fr 1fr}
  .fd-facts > span:last-child{grid-column:1 / -1;border-top:1px solid var(--stone)}
}

/* ==========================================================================
   THE TOP OF THE HOME PAGE, AS JACK CHOSE IT  -  home-8 only
   ==========================================================================
   docs/BRIEF-home-top.md, 20 September. Three changes and no others: the
   arrows become B4, the cards become R13, and the date moves under the cards
   and is given the page.

   Every rule is scoped to .cv-eight. home-5 is the same component and must
   come out of this unchanged.

   THE PATTERN THAT MATTERS IN ALL THREE: each live rule has several properties
   working together, and overriding one leaves the others fighting it. The
   brief lists them and every one is reset below. */

/* ---- 1. THE ARROWS  -  B4, a solid tweed square ----
   Place and size unchanged: 52 x 52, 34 from the film, on its middle. The live
   rule carries a border, a background AND a glyph colour, so all three go. */
.cv-eight .cv-arr{border:0;background:var(--tweed);
  transition:background .25s cubic-bezier(.22,.8,.24,1)}
.cv-eight .cv-arr i{border-color:var(--shell);
  transition:border-color .25s cubic-bezier(.22,.8,.24,1)}
.cv-eight .cv-arr:hover{border:0;background:var(--shell)}
.cv-eight .cv-arr:hover i{border-color:var(--cask)}
.cv-eight .cv-arr:focus-visible{outline:2px solid var(--august);outline-offset:4px}

/* ---- 2. THE WAY OUT  -  R13, all eight, the word centred at the foot ----
   The live card is a 120px square with the word centred over the whole
   picture. flex-basis, aspect-ratio, and every one of the b's four properties
   are replaced; miss one and the word walks back to the middle. */
/* HEIGHT:AUTO IS NOT DECORATION. `.cv-eight` is the hero's class and it
   carries `height:100vh` - the opening is meant to be the window. The brief
   puts the same class on the band so everything here can be scoped to it,
   and the band therefore inherited a 900px height it does not want: its
   content ends at 1455 and it ran to 1800, which pushed the first feed
   entry 345px down the page and left the band's own hairline stranded
   below it. Reset the height with the width, not after somebody notices. */
.fd-band.cv-eight{width:min(100%,calc(1100px + 28px * 2));padding:64px 28px 0;
  height:auto}
.cv-eight .fd-rail{gap:10px}
/* MORE THAN EIGHT KEEP EIGHT'S WIDTH. flex:1 fits whatever is in the row,
   which with thirteen boxes made each one a stamp (Jack, 22 September:
   "the category cards look tiny"). A row with more than eight measures
   its boxes as if there were eight, and the rest scroll behind the arrows
   the row already has. */
.cv-eight .fd-rail.many .fd-cat{flex:0 0 calc((100% - 14px) / 8)}
.cv-eight .fd-cat{flex:1 1 0;min-width:0;aspect-ratio:4/5;
  transition:transform .42s cubic-bezier(.22,.8,.24,1)}
.cv-eight .fd-cat:hover{transform:translateY(-4px)}
/* the foot that blurs: the lower 42 per cent, fading in from nothing */
.cv-eight .fd-cat::after{content:'';position:absolute;left:0;right:0;bottom:0;height:42%;
  pointer-events:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(to top,#000 40%,transparent);
  mask-image:linear-gradient(to top,#000 40%,transparent);
  background:linear-gradient(to top,rgba(10,9,7,.55),rgba(10,9,7,0))}
/* the word: off the middle of the picture, onto the foot, centred.
   z-index because the ::after is painted after it and would otherwise blur it. */
.cv-eight .fd-cat b{inset:auto 8px 11px 8px;display:block;padding:0;z-index:1;
  text-align:center;white-space:nowrap;color:#fff;
  font:400 17px/1.2 var(--face);letter-spacing:.004em}

/* Below 1100 the eight do not fit, so the rail goes back to being a rail:
   136px cards, swiped or dragged, and the existing arrows come back by
   themselves where there is a pointer. Never two rows. */
@media (max-width:1100px){
  .cv-eight .fd-rail{overflow-x:auto}
  .cv-eight .fd-cat{flex:0 0 136px}
}
@media (max-width:900px){
  .fd-band.cv-eight{width:auto;padding:44px 16px 0}
}

/* ---- 3. THE DATE BLOCK  -  under the cards ----
   The live .fd-top is a baseline flex row, space-between, wrapping, with
   padding under it. All four are reset. */
.cv-eight .fd-top{display:flex;flex-direction:column;align-items:center;gap:22px;
  flex-wrap:nowrap;margin:0 auto;padding:88px 0 0;text-align:center;
  /* back to the words' own 752. It went to 940 to hold "It's Sunday the 20th
     of September." on one line at 60px; without the contraction and at 52 the
     line is about 680 and the block does not need to be special. */
  width:min(100%,752px)}
/* 72 down to 60 (Jack, 20 September: "smaller font a little"). The phone
   size comes down with it in the same proportion - 9.4vw was 72's, so 7.8vw
   is 60's - or the line would jump back up to the old size the moment the
   window got narrow enough for the vw half of the min() to win. */
.cv-eight .fd-top b{font:400 min(min(52px,6.8vw), 28px + (min(52px,6.8vw) - 28px) * 0.6)/1.12 var(--face);letter-spacing:.002em}
.cv-eight .fd-top em{position:relative;display:block;width:min(100%,520px);height:30px;
  font:500 10.5px/1 var(--sans);font-style:normal;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-55);font-variant-numeric:tabular-nums}
.cv-eight .fd-top em::before{content:'';position:absolute;left:0;right:0;top:4px;
  height:1px;background:var(--stone-2,#D8D1CB)}
.cv-eight .fd-top em s{position:absolute;left:0;top:4px;height:1px;
  width:var(--now,50%);background:var(--bracken)}
.cv-eight .fd-top em i{position:absolute;left:var(--now,50%);top:0;width:9px;height:9px;
  margin-left:-4px;border-radius:50%;background:var(--bracken)}
.cv-eight .fd-top em span{position:absolute;top:18px;white-space:nowrap}
.cv-eight .fd-top em span:nth-of-type(1){left:0}
.cv-eight .fd-top em span:nth-of-type(2){right:0}
@media (max-width:900px){ .cv-eight .fd-top{padding-top:60px} }

/* ==========================================================================
   SOME IDEAS FOR YOU THIS WEEK
   --------------------------------------------------------------------------
   Jack, 21 September, drawing a box under the briefing: "some kind of
   suggestions here of things to do but as cards or collections."

   FOUR CARDS, NOT SIX. Six at this width are 170px each, which is a thumbnail
   and a caption; four are 260 and the photograph is a photograph. The row
   sits under the briefing on the same ground, with a rule between them,
   because the briefing is what happened and this is what to do about it -
   two halves of one block rather than two blocks.

   THE SECOND LINE IS THE DESIGN. It is set in Jost small caps, tweed, under
   the title, and it says why the card is there. Without it this is a filter
   menu with photographs.
   ========================================================================== */
.id{width:100%;padding:0 0 78px}
/* NO RULE. Jack: "remove this page break." It drew a line under a thing that
   had not finished - the briefing and the ideas are two halves of one block,
   what happened and what to do about it, so the air between them is the join
   and a rule was a second device saying the opposite. */
.id-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:28px;flex-wrap:wrap;margin:0 0 30px;padding-top:58px}
.id-head b{font:400 26px/1.16 var(--face);letter-spacing:-.004em;color:var(--ink)}
.id-head i{font-style:normal;font:400 15.5px/1.5 var(--serif);color:var(--ink-55);
  max-width:34em}

/* ============================================ O13: THE WALL, TITLES ON FILM
   Jack picked O13 off /design-2026/ideas-where.html, 21 September, with
   "just white text" and "slightly bigger than you had it".

   The four cards that were here are gone and so are their rules - a
   component's leftover rules fighting its new markup is the fault this page
   has already had four times.

   THE WALL IS B1's, at his own numbers: four columns, 238px rows, a 7px
   gutter, the uprights spanning two rows so the thing knits rather than
   sitting as a row of equal boxes. */
/* DENSE, so a tile that could not be illustrated never leaves a hole: the
   next one moves up into its place. The controller lays the tiles in the
   one order that fills twelve cells (HomeController::fullWall). Jack, 22
   September: "there should never be gaps so always be a full square". */
.ov{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:var(--ov-row,238px);gap:var(--ov-gap,7px);grid-auto-flow:dense}
.ov-t{position:relative;display:block;overflow:hidden;text-decoration:none;
  background:var(--oat)}
/* a photograph or a film, the same frame either way */
.ov-t video,.ov-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;transition:transform .7s cubic-bezier(.22,.8,.24,1)}
.ov-t:hover video,.ov-t:hover img{transform:scale(1.035)}

/* THE PHOTOGRAPH IS NOT HELD BACK AT ALL. No veil, no gradient, no band -
   that was the whole question the deck was asked and this is the answer it
   came back with. The title survives on its own weight and one close shadow. */
.ov-w{position:absolute;inset:var(--ov-pad,16px);z-index:2;
  display:flex;align-items:flex-end;justify-content:flex-start;
  pointer-events:none}
.ov-w i{display:block;max-width:74%;font-style:normal;
  font:500 var(--ov-size,12.5px)/1.45 var(--sans);
  letter-spacing:.24em;text-transform:uppercase;
  /* WHITE, and only white. The deck ran white and black alternately to
     compare them; Jack settled it on 21 September. */
  color:var(--paper);
  text-shadow:0 1px 9px rgba(65,64,66,.85),0 1px 2px rgba(65,64,66,.55)}

.ov-t:focus-visible{outline:2px solid var(--bracken);outline-offset:-2px}

@media (max-width:1000px){
  .ov{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:var(--ov-row-m,208px)}
}
@media (max-width:620px){
  /* ONE COLUMN, AND THE SPANS RESET. A grid-row span survives a column
     change and leaves one tile twice the height of its neighbours for no
     reason at all. */
  .ov{grid-template-columns:1fr;grid-auto-rows:190px}
  .ov-t{grid-row:span 1 !important}
  .ov-w i{font-size:calc(var(--ov-size,12.5px) * .94);letter-spacing:.2em}
}

/* .id-more went with the "Your week in Scotland" link Jack deleted on
   21 September; its rules go with it. */

@media (max-width:980px){
  .id{padding-bottom:52px}
  .id-row{grid-template-columns:1fr 1fr;gap:34px 18px}
  .id-head{padding-top:34px;margin-bottom:24px}
  .id-head b{font-size:22px}
}
@media (max-width:560px){
  .id-row{grid-template-columns:minmax(0,1fr);gap:28px 0}
}

/* ==========================================================================
   THE BRIEFING  -  ten shapes on one format, switched with ?sum=
   --------------------------------------------------------------------------
   Jack, 21 September: "I like the Monday's briefing text thing, but I like B
   the most, so give me more ideas in that format. Be creative and think about
   our style and cleanliness, and come up with lots of options."

   So the format is fixed - a lead with a photograph, the rest set small
   around it, under the briefing head - and what varies is where the
   photograph sits, how hard it pushes, and what the digest is.

   ONE TYPE SCALE ACROSS ALL TEN, which is what makes them a family:

     the head        Larken 34, the region under it in Jost small caps
     the lead        Larken 28, standfirst Lora 16.5
     a section       Jost 10.5 small caps over a hairline
     a time or topic Jost 9.5 small caps, tweed when it is happening now
     a thing         Larken 17, where it is in Lora 13.5

   No boxes, no chips, no pills, no shadows, one accent. Air separates; a rule
   appears only where it is structural.
   ========================================================================== */
/* the ideas row follows it on the same ground with a rule between, so
   the briefing's foot padding comes off - what happened and what to do
   about it are two halves of one block, not two blocks */
.fp{width:100%;padding:66px 0 0}

/* ==========================================================================
   THE DAILY  -  the cover, as an object
   --------------------------------------------------------------------------
   Off the Works in Progress cover Jack sent, and the thing that cover is
   doing is not "type on a photograph". It is a PRINTED GROUND: a masthead
   across the top, a strapline under it, the contents running down both
   margins and along the foot, and the picture framed in the middle rather
   than bled to the edges.

   Type over a photograph is a banner. Type on a ground with a photograph
   inside it is an issue - and an issue is a thing somebody opens every
   morning, which is the whole of what Jack is after.

   THE GROUND IS OAT, not the page's paper: a cover has to read as a separate
   object sitting ON the page. One hairline of stone round it and another
   round the plate, and no shadow anywhere - a shadow would make it a card
   floating above the page instead of a thing lying on it.
   ========================================================================== */
.dl{
  /* JACK'S OWN NUMBERS, tuned on /design-2026/daily-cover.html on 21
     September: gorse, 61px at 700, .058em tracked with .09em on the short
     line, .93 leading, 3:4. */
  --dl-ground:#C08C3D;
  --dl-w:340px;
  --dl-title:min(52px, 28px + (52px - 28px) * 0.6);     /* his 61 was set on a 418 cover; this one is 340 */
  --dl-weight:700;     /* 600 is not a Larken weight - the kit has no 600 */
  --dl-track:.058em;
  --dl-short:.09em;
  --dl-lead:.93;
  position:relative;display:flex;flex-direction:column;
  width:var(--dl-w);aspect-ratio:3/4;padding:20px 18px 16px;
  background:var(--dl-ground);color:var(--ink)}
.dl.big{--dl-w:420px;--dl-title:min(64px, 28px + (64px - 28px) * 0.6);padding:24px 22px 20px}
.dl.small{--dl-w:246px;--dl-title:min(38px, 28px + (38px - 28px) * 0.6);padding:14px 12px 11px}

.dl-by{display:block;text-align:center;
  font:500 8.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);opacity:.72}

/* ONE SIZE, BOTH LINES. Jack asked twice to be rid of the two-size masthead.
   The short line is tracked out to match the long one, and each line puts
   back its own trailing letter-space as padding so the INK is centred -
   letter-spacing adds its space after the last glyph too, which leaves a
   centred line half a space to the left. */
.dl-mast{display:block;margin:10px 0 0;text-align:center;
  font:var(--dl-weight) var(--dl-title)/var(--dl-lead) var(--face);
  letter-spacing:var(--dl-track);text-transform:uppercase;color:var(--ink)}
.dl-mast s{display:block;text-decoration:none;padding-left:var(--dl-track)}
.dl-mast s:first-child{letter-spacing:var(--dl-short);padding-left:var(--dl-short)}

/* a plain vertical rectangle: no arch, no frame, no border */
.dl-plate{display:block;flex:1 1 auto;min-height:0;margin:16px 0 12px;
  overflow:hidden;background:rgba(65,64,66,.12)}
.dl-plate img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.8,.24,1)}
.fp-open:hover .dl-plate img{transform:scale(1.03)}

.dl-foot{display:block;text-align:center;
  font:500 8px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);opacity:.76}
.dl-foot i{font-style:normal;opacity:.5;margin:0 .5em}

.fp-open{display:block;text-decoration:none;color:inherit;width:fit-content}

/* ---- the blurb ---- */
.fp-words{display:block;min-width:0}
.fp-words > b{display:block;font:400 27px/1.16 var(--face);letter-spacing:-.004em;
  color:var(--ink);text-wrap:balance}
.fp-words > i{display:block;margin:13px 0 0;font-style:normal;
  font:400 16px/1.56 var(--serif);color:var(--ink-75)}
.fp-go{display:flex;width:fit-content;align-items:center;gap:10px;margin:22px 0 0;
  font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);transition:color .2s cubic-bezier(.22,.8,.24,1)}
.fp-go s{display:block;width:20px;height:1px;background:currentColor;
  text-decoration:none;transition:width .28s cubic-bezier(.22,.8,.24,1)}
.fp-words:hover .fp-go{color:var(--tweed)}
.fp-words:hover .fp-go s{width:36px}

/* ==========================================================================
   THE INSPECTOR  -  a draft control, /drafts only
   --------------------------------------------------------------------------
   Jack, 21 September: "can you build a system where we can click and adjust
   each element individually."

   Every round of this draft has run the same way: he says what is wrong, I
   guess a number, he looks, it is still wrong. This cuts that out - he moves
   the thing himself and hands back the numbers.

   It writes INLINE styles on the one element picked, never the stylesheet,
   and a reload puts everything back. What comes out is a block of CSS with a
   selector on it, to be pasted into this file by hand, which is the only
   place a decision is allowed to live.
   ========================================================================== */
.ins{position:fixed;left:18px;bottom:18px;z-index:120;width:296px;
  max-height:86vh;overflow:auto;
  background:var(--paper);border:1px solid var(--ink);padding:14px 16px 16px;
  font:400 13px/1.5 var(--sans);box-shadow:0 18px 50px rgba(20,16,12,.2)}
.ins-go{width:100%;padding:9px;cursor:pointer;background:var(--ink);
  color:var(--paper);border:0;
  font:500 10px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase}
.ins.on .ins-go{background:var(--bracken)}
.ins-say{margin:12px 0 0;font:400 12.5px/1.5 var(--sans);color:var(--ink-55)}

.ins-who{margin:12px 0 10px;padding-bottom:10px;
  border-bottom:1px solid var(--stone)}
.ins-who b{display:block;font:500 12.5px/1.3 var(--sans);color:var(--ink);
  word-break:break-all}
.ins-who i{display:block;margin-top:4px;font-style:normal;
  font:400 11.5px/1.4 var(--sans);color:var(--ink-55)}

.ins label{display:block;margin:0 0 9px}
.ins label u{display:flex;justify-content:space-between;text-decoration:none;
  margin-bottom:3px;font-size:11px;letter-spacing:.03em;color:var(--ink-75)}
.ins label u b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.ins input[type=range]{width:100%}
.ins-free{width:100%;padding:6px 8px;font:400 12px var(--sans);
  background:#fff;border:1px solid var(--stone-2,#D8D1CB);color:var(--ink)}

/* the four that are choices rather than amounts, two to a row */
.ins-type{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
.ins select{width:100%;padding:5px 6px;font:400 12px var(--sans);
  background:#fff;border:1px solid var(--stone-2,#D8D1CB);color:var(--ink)}

/* THE PALETTE AS SWATCHES, names on hover. A colour picked off a wheel is how
   a palette stops meaning anything, so the twelve come first and the free
   field is underneath for anything else. */
.ins-inks{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 11px}
.ins-inks u{flex:0 0 100%;text-decoration:none;margin-bottom:3px;
  font-size:11px;letter-spacing:.03em;color:var(--ink-75)}
.ins-inks button{width:20px;height:20px;padding:0;cursor:pointer;
  border:1px solid var(--stone-2,#D8D1CB)}
.ins-inks button.on{outline:2px solid var(--ink);outline-offset:1px}
.ins-inks button.clear{background:none;color:var(--ink-55);
  font:400 13px/1 var(--sans)}

.ins-out{margin-top:12px;padding-top:12px;border-top:1px solid var(--stone)}
.ins-out pre{margin:0 0 9px;padding:9px 10px;background:var(--oat);
  font:400 11px/1.55 ui-monospace,Menlo,monospace;color:var(--ink);
  white-space:pre-wrap;word-break:break-all}
.ins-out button{width:100%;padding:8px;cursor:pointer;background:var(--ink);
  color:var(--paper);border:0;margin-bottom:5px;
  font:500 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.ins-out button.ghost{background:none;color:var(--ink);
  border:1px solid var(--stone-2,#D8D1CB)}
/* the one that makes it stick, in bracken so it is plainly the committing one */
.ins-out button.keep{background:var(--bracken)}
/* the typing toggle, lit while it is open */
.ins-out button.ghost.lit{background:var(--forest);color:var(--paper);
  border-color:var(--forest)}
/* a copy is a sketch and says so, so it is never mistaken for the page */
[data-sketch=copy]{outline:1px dashed var(--bracken);outline-offset:2px}
/* SAID PROPERLY. One line of eleven-pixel grey under two buttons is not how
   you tell somebody their work is saved - or that it is not. */
.ins-said{margin:9px 0 0;padding:8px 10px;background:rgba(175,160,101,.16);
  font:500 12px/1.45 var(--sans);color:var(--ink)}
.ins-said.bad{background:rgba(192,140,61,.16);color:var(--tweed)}
.ins-fine{margin:8px 0 0;font:400 11px/1.45 var(--sans);color:var(--ink-35)}
.ins-fine b{font-weight:500;color:var(--ink-55)}
.ins-say.no b{color:var(--tweed)}

/* out of the selection, back to what holds it */
.ins-up{display:block;margin-top:6px;padding:0;cursor:pointer;
  background:none;border:0;text-align:left;
  font:500 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tweed);text-decoration:underline}

/* the legend - what each handle on the box does */
.ins-keys{margin:10px 0 12px;padding:9px 10px;background:var(--oat)}
.ins-keys span{display:flex;align-items:center;gap:7px;
  font:400 11px/1.5 var(--sans);color:var(--ink-75)}
.ins-keys i.k{display:block;width:11px;height:11px;flex:none;
  background:var(--bracken);border:1px solid var(--paper)}
.ins-keys i.k.mid{background:rgba(192,140,61,.3);
  outline:1px solid var(--bracken);outline-offset:-1px}
.ins-keys i.k.rot{border-radius:50%;background:var(--forest)}
.ins-keys i.k.type{border-radius:50%}
/* while something is being dragged the panel gets out of the way, so a thing
   being moved across the page is never hidden behind the controls moving it */
.ins.busy{opacity:.26;pointer-events:none}

/* ---- THE OVERLAY ----
   It sits ON the picked element rather than round it, and it is the only
   outline drawn - the first cut put one on the element as well and everything
   wore two lines two pixels apart.

   Fixed, and re-measured on every scroll and every change, because the page
   moves under it otherwise. */
.ins-box{position:fixed;z-index:118;pointer-events:none;
  outline:1px solid var(--bracken);outline-offset:0}
/* the body of it is the handle for moving. A faint wash so it is obvious the
   whole thing is draggable, not just its edges. */
.ins-grab{position:absolute;inset:0;pointer-events:auto;cursor:move;
  background:rgba(192,140,61,.12)}
.ins-h{position:absolute;pointer-events:auto;display:block;
  background:var(--bracken);border:1px solid var(--paper)}
.ins-h.e{right:-5px;top:50%;width:10px;height:22px;margin-top:-11px;cursor:ew-resize}
.ins-h.s{bottom:-5px;left:50%;width:22px;height:10px;margin-left:-11px;cursor:ns-resize}
.ins-h.se{right:-7px;bottom:-7px;width:15px;height:15px;cursor:nwse-resize}
/* the turn handle: a ring on a stalk at the top right, which is where every
   tool that turns things has put it for thirty years */
.ins-h.rot{right:-9px;top:-9px;width:19px;height:19px;border-radius:50%;
  cursor:grab;background:var(--forest);border-color:var(--paper)}
.ins-h.rot:active{cursor:grabbing}
/* the type handle: a letter rather than a knob, because it does a different
   job from the three that pull the box */
.ins-h.type,.ins-h.op{left:-11px;top:-11px;width:22px;height:22px;
  cursor:ns-resize;display:grid;place-items:center;color:var(--paper);
  font-style:normal;font:500 11px/1 var(--sans)}
/* the opacity handle is a ring rather than a letter, because it is not about
   type and should not look as though it is */
.ins-h.op{border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--paper) 0 3px,var(--bracken) 3px)}
/* the size, printed on it, so a drag does not have to be guessed at */
/* UNDER the box. At top:-20 it sat directly on the turn handle, which is why
   the thing that turns text could not be found. */
.ins-box u{position:absolute;left:0;bottom:-21px;text-decoration:none;
  padding:2px 6px;background:var(--bracken);color:var(--paper);
  font:500 9.5px/1.4 var(--sans);letter-spacing:.06em;white-space:nowrap}

/* ---- the clock ----
   On its own, with the whole sentence over it rather than half of it. The
   door into yesterday's edition and the hairline above the row have gone at
   Jack's word; what he wanted from that round was the size of the figure. */
.fp-next{display:block;margin:24px 0 0}
.fp-next u{display:block;margin-bottom:7px;text-decoration:none;
  font:500 9px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-35)}
/* tabular figures, or the line shivers once a second as the digits change
   width */
.fp-next b{display:block;font:400 22px/1 var(--serif);color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ---- the digest, in the old welcome page's own language ----
   Jack, 21 September, pointing at the "Scotland, today" page: "can you make
   the events and interesting news look more like this."

   It already exists. These rules are copied across from _home.css with every
   class name kept - .td-block, .td-bh, .td-list, .td-chip, .td-t, .td-pill,
   .td-when - because class names come from the mock and are never renamed,
   and because one stylesheet per page means they are copied rather than
   shared.

   Three changes for this column and no more: the row is 56 rather than 60 and
   the title 15.5 rather than 16, since it stands in a 340px column here
   instead of across half a screen; and the chip has no radius, because
   nothing else on this page has one. */
.fp{--td-row:56px;--td-chip:36px;--td-title:15.5px;--td-corner:0px;
  --td-ease:cubic-bezier(.22,.8,.24,1)}

/* ---- WHAT _home.css STILL SENDS US ----
   This page loads _home.css for the opening, so the ORIGINAL td- rules are
   live alongside these. Anything the copy does not mention still applies, and
   two of them were doing real damage:

     .td-block{margin-top:clamp(26px,3.2vh,42px)} - 28.8px at a 900px window,
     which is exactly how far LATEST sat below the top of the cover. The three
     columns were aligned; an old rule was pushing the contents of one down.

     .td-list a:hover{padding-left:8px} - the nudge Jack asked to be rid of.
     Deleting our copy of it did nothing; the original was never ours.

   Turned off by name, in our scope, rather than out-weighted one property at
   a time - this page does not want them and it is clearer to say so once. */
.fp .td-block{margin-top:0}
.fp .td-list a:hover{padding-left:0}

.td-block + .td-block{margin-top:34px}
.td-bh{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding-bottom:2px}
.td-block h3{margin:0;font:500 9.5px var(--sans);letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-55)}
.td-bh a{font:500 9.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-55);text-decoration:none;padding-bottom:2px;
  box-shadow:inset 0 -1px 0 var(--ink-20);white-space:nowrap;
  transition:color .25s,box-shadow .25s}
.td-bh a:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}

/* TWO COLUMNS, NOT THREE. Jack, 21 September, circling the right-hand
   side: "i dont want these bits" - the View all links and the place
   ranged right. Right for the same reason the titles were being cut: at
   328px the place was taking a third of the row and squeezing the thing
   it described. The chip and the title get the width back. */
.td-list a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;
  align-items:center;min-height:var(--td-row);color:var(--ink);
  text-decoration:none;transition:padding-left .35s var(--td-ease)}
/* THE HOVER DOES NOT MOVE THE ROW. `padding-left:8px` came over with the
   rest of this list from _home.css; on that page the rows are widely spaced
   and the nudge reads as a nudge, but in a 328px column beside a fixed cover
   it reads as a jump, and a pointer travelling down the list sets every row
   it passes twitching.

   A wash that runs past the row's own edges, so the whole line lights rather
   than the text inside it. The variations are on /design-2026/daily-rows.html
   and this is the interim. */
.td-list a{position:relative;z-index:0}
.td-list a::before{content:'';position:absolute;z-index:-1;
  top:0;bottom:0;left:-14px;right:-14px;
  background:var(--oat);opacity:0;
  transition:opacity .22s cubic-bezier(.22,.8,.24,1)}
/* 2, AS CHOSEN: the wash, and two pixels of bracken down the left of it. The
   edge is what stops a plain tint reading as a highlight in a document. */
.td-list a:hover::before{opacity:1;box-shadow:inset 2px 0 0 var(--bracken)}
.td-chip{display:grid;place-items:center;width:var(--td-chip);height:var(--td-chip);
  border:1px solid var(--ink-20);border-radius:var(--td-corner);line-height:1;
  flex:0 0 auto}
.td-chip i{display:block;font-style:normal;font:600 7.5px var(--sans);
  letter-spacing:.14em;color:var(--ink-55);margin-bottom:2px}
.td-chip b{display:block;font:400 15px var(--face);color:var(--ink);
  font-variant-numeric:tabular-nums}
/* NO WRAP TO RESERVE. This was a wrapping flex row built so a pill could fall
   to its own line beside a long title; with the pill gone it was still
   keeping the room for the wrap, and every row carried an empty line under
   it. Jack: "remove the line break under that too." */
.td-t{min-width:0;display:block}
/* THE TITLE WRAPS HERE. The rule this is copied from sets nowrap with an
   ellipsis, which is right across half a screen and wrong in a 328px column -
   every one of the eight was cut mid-word. The row grows instead, and the
   chip and the place stay on the first line by sitting at the top. */
.td-t > span{font:400 var(--td-title)/1.3 var(--face);letter-spacing:-.004em;
  white-space:normal;max-width:100%}
/* CENTRED AGAINST THE BOX. This was align-items:start, which was right while
   a pill could push a title onto a second line and the chip had to stay level
   with the first of them. The pill has gone, so there is nothing to stay
   level with, and a one-line title was sitting eleven pixels above the middle
   of its own date box. */
.td-list a{align-items:center;padding:9px 0}
/* .td-pill has gone with the badges it drew. */
.td-when{font:400 13px var(--sans);color:var(--ink-55);white-space:nowrap}

/* ==========================================================================
   THE TEN PLACEMENTS
   ========================================================================== */
/* ==========================================================================
   THE THREE COLUMNS, LOCKED TOP AND FOOT
   --------------------------------------------------------------------------
   Jack, 21 September, with three lines drawn on a screenshot: "make sure
   everything is aligned down these lines... no gaps please, and everything
   perfectly aligned."

   They started together because the grid said so, and ENDED wherever their
   content ran out - the cover at 453, the middle at 449, Latest at 481.
   Three ragged feet across 1,100px.

   `stretch` takes all three to the tallest, and both text columns then spread
   their own rows to fill it. So the tops line up because the grid puts them
   there and the FEET line up because the columns are now the same height -
   and the slack that used to pile up at the bottom of each is shared out
   between its rows instead, which is what "no gaps" means. */
.fp-3{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.05fr);
  gap:0 44px;align-items:stretch}

/* both text columns are flex columns to the full height... */
/* AND THE COVER FILLS ITS COLUMN TOO. It kept its own 3:4 and came out 453
   tall in a 474 row - twenty-one pixels of gap under it, which is exactly the
   kind of thing the three drawn lines were about. In the row it takes the
   row's height and the plate absorbs the difference; the ratio it ends up
   with, 340 by 474, is 0.717, which is a cover proportion anyway.

   The 3:4 stays on .dl itself, so a cover used anywhere else still knows its
   own shape. */
.fp-3 > .fp-open{display:flex}
.fp-3 .dl{height:100%;aspect-ratio:auto}
.fp-3 > .fp-mid,.fp-3 > .fp-side{display:flex;flex-direction:column;min-width:0}
.fp-3 .td-block{display:flex;flex-direction:column;min-height:0}
/* ...the block that carries the rows takes the leftover room... */
.fp-mid > .fp-side,.fp-3 > .fp-side > .td-block{flex:1 1 auto}
/* ...and the rows spread through it rather than stacking at the top */
.fp-3 .td-list{flex:1 1 auto;display:flex;flex-direction:column;
  justify-content:space-between}
/* A's middle column carries the blurb AND the events, so the hole beside a
   455px cover is filled by something worth reading rather than by air */
.fp-mid .fp-gap{margin-top:34px}
.fp-2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 48px;
  align-items:start}
.fp-3mid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:0 44px;align-items:start}
.fp-2up{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;align-items:start}
.fp-2up .fp-gap{margin-top:0}

/* D: the cover on the right */
.fp-d2 .fp-3{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) auto}

/* B and G: the blurb sits under its own cover */
.fp-b .fp-words,.fp-g2 .fp-words,.fp-h2 .fp-words,.fp-i2 .fp-words,
.fp-j2 .fp-words{margin-top:26px}
.fp-2 > div{min-width:0}

/* C: the plate column is only as wide as the cover */
.fp-plate{display:block;width:fit-content}
.fp-plate .fp-words{margin-top:24px;max-width:340px}

/* E: a large cover, and the digest in two columns underneath */
.fp-big{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 48px;
  align-items:start}
.fp-under{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;
  margin-top:48px;padding-top:40px;border-top:1px solid rgba(228,222,217,.9)}

/* F: the cover up beside the head */
.fp-brow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 44px;
  align-items:start}
.fp-f2 .fp-head{margin-bottom:24px}

/* H: the newsstand - today's cover with the last two behind it */
.fp-stand{position:relative;display:block;
  width:calc(340px + 64px);padding:0 0 0 64px}
.fp-stand .fp-open{position:absolute;top:0}
.fp-stand .back2{left:0;transform:scale(.90);transform-origin:top left;
  opacity:.5;filter:saturate(.6)}
.fp-stand .back1{left:32px;transform:scale(.95);transform-origin:top left;
  opacity:.74;filter:saturate(.8)}
.fp-stand .front{position:relative;left:0;top:0}
.fp-stand .back1:hover,.fp-stand .back2:hover{opacity:1;filter:none}

/* I: the digest runs past the right of the window */
.fp-bleed2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 48px;
  align-items:start}
.fp-run2{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;
  margin-right:calc(-50vw + 50%);padding-right:40px;min-width:0}

/* J: the cover over the fold */
.fp-fold{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;
  margin-top:50px;padding-top:42px;border-top:1px solid rgba(65,64,66,.18)}

@media (max-width:1100px){
  .fp-3,.fp-3mid,.fp-2,.fp-big,.fp-brow,.fp-bleed2{
    grid-template-columns:minmax(0,1fr);gap:34px 0}
  .fp-d2 .fp-3{grid-template-columns:minmax(0,1fr)}
  .fp-run2{margin-right:0;padding-right:0}
  .fp-stand{width:auto;padding-left:0}
  .fp-stand .fp-open{position:static;transform:none;opacity:1;filter:none}
  .fp-stand .back1,.fp-stand .back2{display:none}
  .fp-2up,.fp-under,.fp-fold,.fp-run2{grid-template-columns:minmax(0,1fr);gap:32px 0}
  .fp-head b{font-size:27px}
  .fp-words > b{font-size:23px}
  .fp{padding-top:44px}
}
@media (max-width:420px){
  .dl{--dl-w:min(100%,300px)}
}

/* ==========================================================================
   THE DAILY SUMMARY  -  eight shapes, switched with ?sum=
   --------------------------------------------------------------------------
   Jack, 21 September: "can you come up with a slide deck on how we can maybe
   combine these two in a sort of summary for the reader just under the cards.
   It can look different from the rest of the feed as this is basically a
   daily summary for them, with news and events... it's a bit boring just now
   and maybe a waste of space."

   MEASURED, NOT FELT. The two entries take 1,112px between them - two full
   screens on a laptop - to carry six short items and one standfirst, and the
   260px margin column holds one word in each, so a fifth of the width does
   nothing down the whole length of both.

   THE PERMISSION IS THE POINT: it may look different from the rest of the
   feed. So none of these is an entry. No margin word, no 34px headline, no
   justified standfirst, no action line with a growing rule. They share one
   small type scale of their own and they all stand on the page's own 1100
   column, which is the only thing they keep.
   ========================================================================== */
.sm{width:100%;padding:70px 0 74px}

/* the one label the whole summary uses: a time, or a kind */
.sm u{display:block;text-decoration:none;font:500 9.5px/1.6 var(--sans);
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-35);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sm u.now{color:var(--tweed)}

/* one thing, and where it is */
.sm-line{display:block;text-decoration:none;color:inherit}
.sm-line b{display:block;font:400 20px/1.3 var(--face);letter-spacing:.004em;
  color:var(--ink);transition:color .2s cubic-bezier(.22,.8,.24,1)}
.sm-line i{display:block;margin-top:4px;font-style:normal;
  font:400 14.5px/1.45 var(--serif);color:var(--ink-55)}
.sm-line:hover b{color:var(--tweed)}
.sm-line.sm-sm b{font-size:17px}
.sm-line.sm-sm i{font-size:13.5px;margin-top:3px}

.sm h3{margin:0 0 20px;padding-bottom:11px;
  border-bottom:1px solid rgba(228,222,217,.9);
  font:500 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink)}
.sm h3.sm-gap{margin-top:30px}

.sm-head{margin:0 0 26px}
.sm-head b{display:block;font:400 30px/1.14 var(--face);letter-spacing:-.004em;
  color:var(--ink)}
.sm-head i{display:block;margin-top:8px;font-style:normal;
  font:400 16px/1.5 var(--serif);color:var(--ink-55)}

.sm-more{display:flex;width:fit-content;align-items:center;gap:10px;margin-top:22px;
  text-decoration:none;font:500 10.5px/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--tweed)}
.sm-more s{display:block;width:18px;height:1px;background:currentColor;
  text-decoration:none;transition:width .28s cubic-bezier(.22,.8,.24,1)}
.sm-more:hover s{width:32px}

/* a row is the label over the thing, close together */
.sm-row{margin:0 0 22px}
.sm-row u{margin-bottom:5px}

/* ---------------------------------------------------------------- A */
.sm-a{display:grid;grid-template-columns:1fr 1fr;gap:0 64px}

/* ---------------------------------------------------------------- B */
.sm-b{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0 56px}
.sm-lead{display:block;text-decoration:none;color:inherit}
.sm-pic{display:block;overflow:hidden;background:var(--oat);margin:0 0 20px}
.sm-pic img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.8,.24,1)}
.sm-lead:hover .sm-pic img{transform:scale(1.025)}
.sm-lead b{display:block;font:400 30px/1.16 var(--face);letter-spacing:-.004em;
  color:var(--ink);text-wrap:balance}
.sm-lead i{display:block;margin-top:12px;font-style:normal;
  font:400 16.5px/1.56 var(--serif);color:var(--ink-75)}

/* ---------------------------------------------------------------- C
   the index: three columns, every line the same shape */
.sm-index{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px 26px;align-items:baseline}
.sm-index u{text-align:right}
.sm-index a{text-decoration:none;font:400 19px/1.3 var(--face);color:var(--ink);
  transition:color .2s cubic-bezier(.22,.8,.24,1)}
.sm-index a:hover{color:var(--tweed)}
.sm-index em{font-style:normal;font:400 14px/1.4 var(--sans);color:var(--ink-55);
  white-space:nowrap}

/* ---------------------------------------------------------------- D
   five things. The numerals are Larken and they do the job the margin word
   used to, one per line rather than one per entry. Numbered because this is
   genuinely a count of the day, not because a numeral looks tidy. */
.sm-five{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:0 26px;align-items:baseline}
.sm-five li{display:contents}
.sm-five s{text-decoration:none;font:400 21px/1.5 var(--face);color:var(--ink-20);
  font-variant-numeric:lining-nums;padding:16px 0;
  border-top:1px solid rgba(228,222,217,.8)}
.sm-five a{text-decoration:none;font:400 21px/1.35 var(--face);color:var(--ink);
  padding:16px 0;border-top:1px solid rgba(228,222,217,.8);
  transition:color .2s cubic-bezier(.22,.8,.24,1)}
.sm-five a:hover{color:var(--tweed)}
.sm-five em{display:none}
.sm-five u{padding:19px 0 16px;border-top:1px solid rgba(228,222,217,.8)}
.sm-five li:first-child s,.sm-five li:first-child a,.sm-five li:first-child u{border-top:0}

/* ---------------------------------------------------------------- E
   the briefing: its own ground and its own edge, so it is plainly a thing
   you read before the feed rather than the first thing in it */
.sm-e{padding-top:56px;padding-bottom:60px}
.sm-brief{padding:40px 44px 44px;background:var(--oat);
  border:1px solid rgba(216,209,203,.9)}
.sm-two{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.sm-brief .sm-head{margin-bottom:32px}
.sm-brief .sm-head b{font-size:26px}
.sm-brief .sm-head i{font:500 10.5px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-55);margin-top:10px}

/* ---------------------------------------------------------------- F */
.sm-wide{display:block;overflow:hidden;background:var(--oat);margin:0 0 34px}
.sm-wide img{display:block;width:100%;height:auto;aspect-ratio:21/8;object-fit:cover}
.sm-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px}
.sm-row.stack{margin-bottom:18px}

/* ---------------------------------------------------------------- G
   the day on a line. The cleverest and the most fragile: it wants a time on
   every event and we hold one on almost none of them. */
.sm-g{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0 56px}
.sm-hours{position:relative;height:34px;margin:0 0 26px;
  border-top:1px solid rgba(228,222,217,.9)}
.sm-hours u{position:absolute;top:9px;transform:translateX(-50%);
  color:var(--ink-35)}
.sm-now{position:absolute;top:-4px;width:7px;height:7px;margin-left:-3px;
  border-radius:50%;background:var(--bracken)}
.sm-when{margin:0 0 16px}
.sm-when > span{display:block;max-width:22em}
.sm-when b{display:block;font:400 18px/1.3 var(--face);color:var(--ink)}
.sm-when i{display:block;margin-top:3px;font-style:normal;
  font:400 13.5px/1.4 var(--serif);color:var(--ink-55)}

/* ---------------------------------------------------------------- H
   written out. One paragraph, the things themselves as the links, and the
   only shape here that could not have come from any other website. */
.sm-h{padding:86px 0 90px}
.sm-h p{margin:0;max-width:26em;
  font:400 25px/1.52 var(--serif);color:var(--ink);letter-spacing:.002em}
.sm-h .sm-day{font-family:var(--face);letter-spacing:-.004em}
.sm-h a{color:var(--ink);text-decoration:none;
  background-image:linear-gradient(var(--tweed),var(--tweed));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 1.08em;
  transition:background-size .25s cubic-bezier(.22,.8,.24,1),color .2s}
.sm-h a:hover{color:var(--tweed);background-size:100% 2px}

@media (max-width:980px){
  .sm-a,.sm-b,.sm-two,.sm-g{grid-template-columns:minmax(0,1fr);gap:40px 0}
  .sm-three{grid-template-columns:minmax(0,1fr);gap:36px 0}
  .sm-index{grid-template-columns:auto minmax(0,1fr);gap:14px 20px}
  .sm-index em{grid-column:2}
  .sm-five{grid-template-columns:auto minmax(0,1fr)}
  .sm-five u{grid-column:2;padding:0 0 14px;border-top:0}
  .sm-h p{font-size:21px;max-width:none}
  .sm{padding:48px 0 52px}
  .sm-brief{padding:28px 22px 30px}
}

/* ==========================================================================
   THE WEEK AHEAD  -  seven days under today's weather
   --------------------------------------------------------------------------
   Jack, 21 September: "instead of photos and the high low rain from, can we
   have kind of an overview of the week, maybe with temp and weather icons, in
   our style. A summary kind of thing like attached but clean cool and our
   style."

   The attached was Google's eight-day strip. What is worth taking is the
   SHAPE - a day, a mark, two numbers, seven across - and what is worth
   leaving is everything else: the boxes, the selected-day panel, the chart,
   the tabs and the colour.

   SEVEN EQUAL COLUMNS OF AIR. No boxes, no rules between them: the feed
   separates with air everywhere else and a forecast is no different. Today is
   marked by a hairline under its column and by being the only day at full
   strength - which is all the emphasis a column needs when the other six are
   at 55 per cent.
   ========================================================================== */
.fd-week7{
  /* THE COLOURS OF THE WEATHER, off the Scottish eight in
     docs/DESIGN-SYSTEM.md rather than out of a weather app. An accent there
     has one job - bracken is anything with a date, august is something the
     reader has kept - so neither may be lent to a raincloud. These four can
     be, and one of them is already the word for it: haar is the Scots for
     sea fog. No red anywhere, including the storm. */
  --wx-sun:#C08C3D;      /* gorse: the sun, and the lightning */
  --wx-cloud:#414042;    /* slate */
  --wx-rain:#414042;     /* loch, which holds up on a pale ground */
  --wx-snow:#414042;
  --wx-fog:#414042;

  /* SPREAD OUT. Jack, 21 September: "you can make the icons part a little
     bigger and spread out a little more." It was capped at the prose measure,
     600, which put seven columns at 86 each; the column's own 752 gives them
     107 and the strip lands on the picture edge, which is an edge that
     already exists on this page. */
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:0;margin:44px 0 0;width:100%}

.fd-week7 > span{display:flex;flex-direction:column;align-items:center;
  gap:16px;padding:0 4px 16px}
/* TODAY IS THE ONE NAME AT FULL STRENGTH, and that is all the marking it
   needs. There was a hairline under its column as well, in currentColor -
   white on the dark band - and with six other days sitting at 55 per cent it
   was a second device doing one job. */
.fd-week7 > span.on u{opacity:1}

.fd-week7 u{text-decoration:none;font:500 10px/1 var(--sans);
  letter-spacing:.15em;text-transform:uppercase;color:inherit;opacity:.55}
/* 26 to 40. At 26 a filled mark is a smudge and a coloured one is a smudge
   with a tint; at 40 the cloud has a silhouette and the sun has rays. */
.fd-week7 svg{display:block;width:40px;height:40px}
/* ONE TEMPERATURE. The low is gone at Jack's word, and with it the flex row
   that held the pair. */
.fd-week7 b{font:400 21px/1 var(--serif);font-variant-numeric:tabular-nums}

/* THE SAME SET ON THE DARK BAND. Slate cloud disappears into a near-black
   ground and loch rain with it, so the two that carry the silhouette get
   their light-ground values. One set that flips beats two that drift. */
.fd-row.dark .fd-week7{color:#fff;--wx-cloud:#C9D0D6;--wx-rain:#A0BAD4;
  --wx-snow:#E9EDEF;--wx-fog:#E9EDEF}

/* D4 GIVES IT THE COLUMN, NOT THE PROSE MEASURE. A forecast is a row of
   marks rather than a sentence, and the spreading is the point of it. */
@media (min-width:1001px){
  .h3-feed.d4 .fd-week7{justify-self:stretch;width:auto;max-width:none}
}

/* under 620 seven columns are 46px each and the marks collide, so it becomes
   four and three */
@media (max-width:620px){
  .fd-week7{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:28px}
  .fd-week7 svg{width:34px;height:34px}
}
}

/* ==========================================================================
   THE TOP OF THE DAY  -  eight shapes, switched with ?day=
   --------------------------------------------------------------------------
   Jack, 21 September: "I'm not fully happy with this section... can we do
   some redesigns to try something new, something that looks and flows
   better."

   THE DIAGNOSIS. Not the content - he asked for the date, the light and the
   way in on 20 September and liked them. It is that the block is CENTRED on
   752 while everything below it is ranged left in d4's two-column grid, with
   a 260px margin and the words starting at 471. The page is centred, then
   hard left, and this block is the join. That is what "doesn't flow" is.

   So every shape below except H sits on the feed's own grid, and the four
   strongest (A, B, C, E) start at the same left edge the entries do.

   ONE SET OF NUMBERS, taken from d4 rather than invented: the row is 1100
   plus 28 of air either side, the margin column is 260, the words are 752,
   and the gap between them is 48.
   ========================================================================== */
/* NO GUTTER OF ITS OWN. This lives inside .fd-band, which already pays the
   28 that .fd-it pays for itself - so a second one put every shape 28px to
   the right of the entries below it. */
.dy{--dy-when:260px;--dy-col:752px;--dy-gap:48px;width:100%;margin:0}

/* ---------------------------------------------------------------- A
   the feed's grid, exactly: the day where the entries' margin words go */
.dy-a{display:grid;grid-template-columns:var(--dy-when) minmax(0,var(--dy-col));
  column-gap:var(--dy-gap);align-items:start;padding-top:96px}
/* the margin word wears what .fd-at wears in d4 - same face, same size, same
   grey - so the first entry under it reads as the next one of these rather
   than as something new */
.dy-a > b{font:400 min(min(44px,7vw), 28px + (min(44px,7vw) - 28px) * 0.6)/1.04 var(--face);letter-spacing:-.012em;
  color:var(--ink-35);margin-top:-6px}
.dy-a .dy-said{display:block;min-width:0}
.dy-a .dy-said em{display:block;font-style:normal;
  font:400 min(34px, 28px + (34px - 28px) * 0.6)/1.16 var(--face);letter-spacing:-.002em;color:var(--ink)}

/* the light, on a line, under it. 440 not 520: it is beside the words now
   rather than alone in the middle of the page. */
.dy-a .dy-said u{position:relative;display:block;width:min(100%,440px);height:30px;
  margin-top:26px;text-decoration:none;
  font:500 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-55);font-variant-numeric:tabular-nums}
.dy-a .dy-said u::before{content:'';position:absolute;left:0;right:0;top:4px;
  height:1px;background:var(--stone-2,#D8D1CB)}
.dy-a .dy-said u s{position:absolute;left:0;top:4px;height:1px;
  width:var(--now,50%);background:var(--bracken);text-decoration:none}
.dy-a .dy-said u i{position:absolute;left:var(--now,50%);top:1px;width:7px;height:7px;
  margin-left:-3px;border-radius:50%;background:var(--bracken)}
.dy-a .dy-said u span{position:absolute;top:16px;white-space:nowrap}
.dy-a .dy-said u span:nth-of-type(1){left:0}
.dy-a .dy-said u span:nth-of-type(2){right:0}

/* ---------------------------------------------------------------- B
   one line at the column's edge, and the light said in words underneath.
   The whole block is 110px tall against the current one's 300. */
.dy-b{padding:96px 0 0}
.dy-b > b{display:block;font:400 min(34px, 28px + (34px - 28px) * 0.6)/1.16 var(--face);letter-spacing:-.002em;
  color:var(--ink);margin-left:calc(var(--dy-when) + var(--dy-gap))}
.dy-b > u{display:block;margin:14px 0 0 calc(var(--dy-when) + var(--dy-gap));
  text-decoration:none;font:400 16.5px/1.5 var(--serif);color:var(--ink-55)}
@media (max-width:1000px){
  .dy-b > b,.dy-b > u{margin-left:0}
}

/* ---------------------------------------------------------------- C
   THE TRACK BECOMES THE DIVISION. An instrument sitting in the middle of a
   page is an object to look at; the same instrument drawn as the line
   between the cards and the feed is structure, and it costs no height. */
.dy-c{padding-top:88px}
.dy-c .dy-rule{position:relative;display:block;height:1px;margin:0 0 30px;
  background:var(--stone-2,#D8D1CB)}
.dy-c .dy-rule s{position:absolute;left:0;top:0;height:1px;width:var(--now,50%);
  background:var(--bracken);text-decoration:none}
.dy-c .dy-rule i{position:absolute;left:var(--now,50%);top:-3px;width:7px;height:7px;
  margin-left:-3px;border-radius:50%;background:var(--bracken)}
.dy-c .dy-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;margin:0}
.dy-c .dy-row b{font:400 min(34px, 28px + (34px - 28px) * 0.6)/1.16 var(--face);letter-spacing:-.002em;color:var(--ink)}
.dy-c .dy-row u{text-decoration:none;font:500 10.5px/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------------------------------------------------------- D
   the almanac line. No display type anywhere: three facts, one rule, done.
   If the page wants the date to be furniture rather than a heading, this is
   what furniture looks like. */
.dy-d{display:flex;flex-wrap:wrap;gap:8px 0;margin:0;padding:92px 0 0;
  font:500 11px/1.6 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-55);font-variant-numeric:tabular-nums}
.dy-d span + span::before{content:'\00B7';margin:0 14px;color:var(--ink-35)}
.dy-d span:first-child{color:var(--ink)}

/* ---------------------------------------------------------------- E
   date left, the numbers ranged right as a small table - the way a masthead
   has set a date and a weather panel for two hundred years */
.dy-e{display:flex;align-items:flex-end;justify-content:space-between;
  gap:40px;flex-wrap:wrap;padding-top:96px}
.dy-e > b{font:400 min(min(46px,6vw), 28px + (min(46px,6vw) - 28px) * 0.6)/1.1 var(--face);letter-spacing:-.006em;color:var(--ink)}
.dy-e .dy-tab{display:flex;gap:0 42px}
.dy-e .dy-tab > span{display:block;text-align:right}
.dy-e .dy-tab u{display:block;text-decoration:none;margin-bottom:7px;
  font:500 9.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-35)}
.dy-e .dy-tab i{font-style:normal;font:400 20px/1 var(--serif);color:var(--ink);
  font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- F
   the arc. A straight line says nothing two times do not; the day's own
   shape says where in it you are without reading anything. */
.dy-f{display:flex;align-items:flex-end;justify-content:space-between;
  gap:40px;flex-wrap:wrap;padding-top:96px}
.dy-f > b{font:400 min(min(40px,5.4vw), 28px + (min(40px,5.4vw) - 28px) * 0.6)/1.12 var(--face);letter-spacing:-.004em;color:var(--ink)}
/* the box carries the room the times need; they used to hang off the
   bottom of it and were clipped by the band */
.dy-f .dy-arc{position:relative;display:block;width:220px;flex:none;
  padding-bottom:20px}
.dy-f .dy-arc svg{display:block;width:220px;height:56px}
.dy-f .dy-path{fill:none;stroke:var(--stone-2,#D8D1CB);stroke-width:1}
/* the sun, placed by the two numbers the component works out: CSS has no
   sine, so the arc's own height at this moment is done in JavaScript and
   arrives here as pixels. No astronomy - the arc is a drawing of a day, not
   a claim about the sun's altitude over Banchory. */
.dy-f .dy-arc i{position:absolute;left:var(--dy-x,110px);top:var(--dy-y,4px);
  width:9px;height:9px;margin:-4px 0 0 -4px;
  border-radius:50%;background:var(--bracken)}
.dy-f .dy-arc u{position:absolute;bottom:0;text-decoration:none;
  font:500 9.5px/1 var(--sans);letter-spacing:.14em;color:var(--ink-55);
  font-variant-numeric:tabular-nums}
.dy-f .dy-arc u:nth-of-type(1){left:0}
.dy-f .dy-arc u:nth-of-type(2){right:0}

/* ---------------------------------------------------------------- H
   what is there now, kept whole so the others can be judged against it */
.dy-h{display:flex;flex-direction:column;align-items:center;gap:22px;
  flex-wrap:nowrap;margin:0 auto;padding:88px 0 0;text-align:center;
  width:min(100%,752px)}
.dy-h b{font:400 min(min(52px,6.8vw), 28px + (min(52px,6.8vw) - 28px) * 0.6)/1.12 var(--face);letter-spacing:.002em}
.dy-h em{position:relative;display:block;width:min(100%,520px);height:30px;
  font:500 10.5px/1 var(--sans);font-style:normal;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-55);font-variant-numeric:tabular-nums}
.dy-h em::before{content:'';position:absolute;left:0;right:0;top:4px;
  height:1px;background:var(--stone-2,#D8D1CB)}
.dy-h em s{position:absolute;left:0;top:4px;height:1px;width:var(--now,50%);
  background:var(--bracken);text-decoration:none}
.dy-h em i{position:absolute;left:var(--now,50%);top:0;width:9px;height:9px;
  margin-left:-4px;border-radius:50%;background:var(--bracken)}
.dy-h em span{position:absolute;top:18px;white-space:nowrap}
.dy-h em span:nth-of-type(1){left:0}
.dy-h em span:nth-of-type(2){right:0}

/* under 1000 there is no margin column to hang anything in, so A folds into
   B's shape - the day above the date rather than beside it */
@media (max-width:1000px){
  .dy-a{grid-template-columns:minmax(0,1fr);row-gap:10px;padding-top:64px}
  .dy-a > b{margin-top:0;font-size:min(min(34px,9vw), 28px + (min(34px,9vw) - 28px) * 0.6)}
  .dy-b,.dy-c,.dy-d,.dy-e,.dy-f,.dy-h{padding-top:64px}
  .dy-e,.dy-f{align-items:flex-start;flex-direction:column;gap:26px}
}

/* ------------------------------------------------------------- THE DECK
   Jack, 21 September: "I wanted a slide deck please, not just change it."

   The dock swapped the block in place, which hid the fact that these are
   eight versions of one thing. A deck says so. The SLIDE carries no
   scaffolding - the arrows sit out in the page's margins and the caption and
   dots sit under the stage - so what is being judged is only ever the design.

   A draft control: it is rendered only where the URL says /drafts. */
.dy-deck{position:relative;width:100%}

/* THE STAGE TAKES ONLY WHAT ITS SLIDE NEEDS. It held 206 - the tallest of the
   eight - so that paging would not jog the page; but that is a quarter of a
   screen of scaffolding standing between the cards and the feed, and on G it
   reserved room for nothing at all. A draft has to show what the page will
   really look like, so the jog is the price and the strip carries the rest. */
.dy-stage{position:relative}

.dy-slide{animation:dy-in .42s cubic-bezier(.22,.8,.24,1) both}
.dy-slide.back{animation-name:dy-in-back}
@keyframes dy-in{from{opacity:0;transform:translateX(26px)}
  to{opacity:1;transform:none}}
@keyframes dy-in-back{from{opacity:0;transform:translateX(-26px)}
  to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .dy-slide,.dy-slide.back{animation:none}
}

/* the arrows, in the rail's own language */
.dy-arr{flex:none;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  background:var(--paper);border:1px solid var(--stone-2,#D8D1CB);border-radius:50%;
  transition:border-color .25s cubic-bezier(.22,.8,.24,1)}
.dy-arr:hover{border-color:var(--ink)}
.dy-arr i{display:block;width:8px;height:8px;border-style:solid;
  border-color:var(--ink);border-width:1px 1px 0 0}
.dy-arr.back i{transform:rotate(-135deg) translate(-1px,1px)}
.dy-arr.fwd i{transform:rotate(45deg) translate(-1px,1px)}

/* THE STRIP, at the foot of the window. It is scaffolding, so it stands off
   the page rather than in it - nothing the deck needs may sit between the
   cards and the feed, which is the whole of what Jack asked for. */
.dy-strip{position:fixed;left:50%;bottom:22px;z-index:60;transform:translateX(-50%);
  display:flex;align-items:center;gap:18px;
  max-width:min(94vw,880px);padding:11px 16px;
  background:var(--paper);border:1px solid var(--stone-2,#D8D1CB);
  box-shadow:0 14px 40px rgba(20,16,12,.14)}
.dy-cap{margin:0;min-width:0;flex:1 1 auto}
.dy-cap b{display:block;font:500 10.5px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tweed)}
.dy-cap i{display:block;margin-top:5px;font-style:normal;
  font:400 13.5px/1.45 var(--sans);color:var(--ink-55);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dy-dots{display:flex;gap:4px}
.dy-dots button{width:28px;height:28px;cursor:pointer;background:none;border:0;
  font:500 10px/1 var(--sans);letter-spacing:.08em;color:var(--ink-35);
  transition:color .2s cubic-bezier(.22,.8,.24,1),background-color .2s cubic-bezier(.22,.8,.24,1)}
.dy-dots button:hover{color:var(--ink)}
.dy-dots button.on{background:var(--ink);color:var(--paper)}

@media (max-width:900px){
  .dy-strip{display:none}
}

/* ---- A5: the year in the margin, and how long ago under it ----
   Jack, 20 September. The 76px numeral has gone from the markup: it was taking
   a grid column that the photograph below it was not in, so on the centred feed
   the words centred in the 585 that was left while the picture centred on the
   full 752 - 83px apart, measured. The margin carries the year instead.

   `.fd-mark` was that two-column grid. Every property of it is reset here, not
   just the columns: left as a grid with one child it still imposes its gap and
   its alignment on everything inside. */
.fd-mark{display:block;grid-template-columns:none;column-gap:0;align-items:initial}

/* the second line in the margin. In the centred feed the margin is a small
   capitals label, so this sits under it at the same weight and lighter; in the
   ledger it is Larken at 44, so it takes a fraction of that instead. */
.fd-at em{display:block;margin-top:4px;font-style:normal;
  font:500 9.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-35)}
.h3-feed.d4 .fd-at em{margin-top:8px;font-size:11px;letter-spacing:.1em}

/* ---- THE QUIZ ANSWERS  -  N1 / P1 / V1 ----
   Jack, 20 September, off /design-2026/feed-quiz-2.html: one layout and three
   media states. The answers are three boxes across the whole column; above
   them there is nothing, a photograph, or a film.

   WHAT THIS REPLACES, and why every property of it has to go: a single column
   of 58px pills with the text centred, 160px wide against a 752px column, so
   five sixths of the width did nothing. `display:grid` with no template is one
   column; `place-items:center` centres the text; `min-height:58px` is the pill.
   All three are reset below, not just the width. */
/* AIR. Jack, 20 September: "a little more space on this one, more clean space,
   its very bunched together." The question and its answers were 24 apart with
   8 between the boxes, which read as one block of stuff rather than a question
   and three things to press. The band's own padding was never the problem: it
   is 88 top and bottom, the same as every other entry on the page. */
.fd-opts{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:40px 0 0}
/* four answers go two by two rather than three and an orphan. Where :has is
   not supported the fourth simply wraps, which is the same thing a row short. */
.fd-opts:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}

.fd-opt{position:relative;min-height:106px;padding:18px 20px;
  display:flex;flex-direction:column;justify-content:flex-end;
  place-items:initial;text-align:left;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--stone-2);
  font:400 17px/1.28 var(--serif);
  transition:box-shadow .3s cubic-bezier(.22,.8,.24,1),
    background .3s cubic-bezier(.22,.8,.24,1),
    color .3s cubic-bezier(.22,.8,.24,1),
    transform .3s cubic-bezier(.22,.8,.24,1),
    opacity .5s cubic-bezier(.22,.8,.24,1)}
.fd-opt i{position:absolute;left:18px;top:14px;font-style:normal;
  font:500 10.5px/1 var(--sans);letter-spacing:.16em;color:var(--ink-35);
  transition:color .3s cubic-bezier(.22,.8,.24,1)}
.fd-opt:hover{box-shadow:inset 0 0 0 1px var(--ink),0 10px 26px rgba(65,64,66,.10);
  transform:translateY(-3px)}
.fd-opt:hover i{color:var(--bracken)}
/* answered: the lift comes off, and the letter goes quiet inside a filled box */
.fd-opt.right,.fd-opt.wrong,.fd-opt.dim{transform:none}
.fd-opt.right i,.fd-opt.wrong i{color:rgba(249,245,238,.66)}
.fd-opt.right{box-shadow:inset 0 0 0 1px var(--forest)}
.fd-opt.wrong{box-shadow:inset 0 0 0 1px var(--bracken)}

/* on a dark band a paper box would be a hole in the page */
.fd-row.dark .fd-opt{background:rgba(255,255,255,.05);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.fd-row.dark .fd-opt i{color:rgba(255,255,255,.45)}
.fd-row.dark .fd-opt:hover{background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px #fff;transform:translateY(-3px)}

/* the media above them takes the whole column, so the picture and the answers
   read as one object rather than two.

   MARGIN-BOTTOM WAS 0 AND THAT WAS WRONG. It put the photograph flush against
   the question, measured at zero on every quiz that has one, while the gap
   from the question to its answers was 24. The picture is its own block: it
   gets a little more air under it than the question gets, so the entry reads
   as a picture, then a question and its answers together. */
.fd-k-quiz .fd-pic,.fd-k-quiz .fd-crop{width:100%;margin-bottom:38px}

@media (max-width:640px){
  /* three across at 375 gives 105px a box, which will not hold two words */
  .fd-opts,.fd-opts:has(> :nth-child(4)){grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}
  .fd-opt{min-height:88px;font-size:16px}
}

/* ---- THE CARD, AS THE EXPLORE PAGE HAS IT ----
   Jack, 20 September: "can the listings we show here be more like the design we
   have on explore page please."

   The words come off the photograph and sit under it. Every number here is read
   off _explore.css rather than picked to look about right: the 12px drop, the
   9.5px region at .24em, the name in Larken at 19, the line under it at 16.

   WHAT HAS TO BE UNDONE, because the old card was built the other way: the name
   was absolutely positioned over the foot of the picture with a gradient behind
   it, and on a dark band that gradient was melted into the band's own colour so
   the card had no bottom edge. Position, inset, padding and background all go,
   or the words sit on the photograph AND under it at once. */
.fd-name{position:static;left:auto;right:auto;bottom:auto;
  display:block;margin-top:12px;padding:0;background:none}
.fd-name .eye{display:block;margin-bottom:5px;
  font:500 9.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-35)}
.fd-name b{display:block;margin:0;
  font:400 19px/1.35 var(--face);letter-spacing:-.005em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-name i{display:block;margin-top:2px;font-style:normal;
  font:400 16px/1.4 var(--sans);letter-spacing:-.02em;color:var(--ink-55);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the picture is its own block again now that nothing sits on it */
.fd-card{background:none}
.fd-card img{aspect-ratio:var(--fd-shape);object-fit:cover}

/* ON A DARK BAND the three greys invert. The gradient that used to melt the
   caption into the band goes with the rest of it. */
.fd-row.dark .fd-name{padding:0;background:none}
.fd-row.dark .fd-name .eye{color:rgba(255,255,255,.45)}
.fd-row.dark .fd-name b{color:#fff;font-size:19px;line-height:1.35}
.fd-row.dark .fd-name em,
.fd-row.dark .fd-name i{margin-top:2px;font-size:16px;letter-spacing:-.02em;
  color:rgba(255,255,255,.62)}

/* the keep sits on the picture, so it has to stop being measured from the card
   now that the card is taller than its photograph */
.fd-card .fd-keep{top:10px;bottom:auto}

/* ---- THE CROSS, AND THE ROW CLOSING ----
   Jack, 20 September: "a large x to the top right of every section, which when
   pressed deletes in a nice transitional way, to give the impression that this
   is an ever evolving feed."

   It sits on the row rather than inside the entry, because the entry is a link
   and a button inside a link is invalid. The row is already positioned for the
   sky canvas, so there is nothing new to establish. */
/* THE FAR RIGHT OF THE SECTION, not of the column. Jack, 20 September: "the
   far right of the section, not within the margin."

   It was flush with the reading column, which made it look like part of the
   reading rather than a way of getting rid of it. The band is full bleed and
   the cross is a control on the whole section, so it belongs on the
   section's own edge. */
.fd-x{position:absolute;z-index:4;top:38px;right:40px;
  width:46px;height:46px;padding:0;cursor:pointer;
  display:grid;place-items:center;background:none;border:0;
  opacity:0;transition:opacity .28s cubic-bezier(.22,.8,.24,1)}
/* it appears when the row does, so it is not a row of crosses down the page */
.fd-row:hover .fd-x,.fd-x:focus-visible{opacity:.55}
.fd-x:hover{opacity:1}
.fd-x:focus-visible{outline:2px solid var(--august);outline-offset:2px}

/* the glyph is drawn rather than typed: a multiplication sign sits differently
   in every face and this one has to be square */
.fd-x i{position:relative;display:block;width:26px;height:26px}
.fd-x i::before,.fd-x i::after{content:'';position:absolute;left:0;top:12px;
  width:26px;height:1.5px;background:var(--ink);
  transition:background-color .25s cubic-bezier(.22,.8,.24,1)}
.fd-x i::before{transform:rotate(45deg)}
.fd-x i::after{transform:rotate(-45deg)}
.fd-row.dark .fd-x i::before,.fd-row.dark .fd-x i::after{background:#fff}

/* THE CLOSE. The height is set in the script from the row's own measurement,
   so this only has to say how it travels. */
.fd-row.going{transition:height .5s cubic-bezier(.4,0,.2,1),
  opacity .34s cubic-bezier(.22,.8,.24,1),
  transform .5s cubic-bezier(.4,0,.2,1);
  opacity:0;transform:translateY(-10px) scale(.985);pointer-events:none}
.fd-row.going .fd-x{opacity:0}

@media (max-width:1200px){
  /* under the column's own width the cross comes in to the page's edge */
  .fd-x{right:12px;top:26px}
}
@media (prefers-reduced-motion:reduce){
  .fd-row.going{transition:none}
}


/* ============================================================ THE HERO TEST
   A draft control, /drafts/home-9/hero/<clip> only. It hangs along the foot
   rather than down a side, because the thing being judged is a film behind a
   whole page and a panel down the side eats the very width that decides
   whether the film reads.

   Ink ground, not paper: it has to sit over whatever the film is doing
   without becoming part of the design being looked at. */
.hb{position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:11px 18px 12px;background:rgba(65,64,66,.94);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hb-said{margin:0;flex:none;font:400 12px/1.4 var(--sans);
  color:rgba(249,245,238,.72)}
.hb-said b{font-weight:500;color:var(--paper)}

/* the films, one line, scrolling rather than wrapping the bar to three rows */
/* its own line, under the field - on the same one it took whatever room was
   going and pushed everything else off the right-hand end.

   WRAPPING, not scrolling sideways: twenty-seven chips in one row had the
   same fault as the results, and the last dozen could not be reached. */
.hb-list{flex:1 1 100%;min-width:0;display:flex;flex-wrap:wrap;gap:4px;
  max-height:76px;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(249,245,238,.34) transparent;
  order:2}
.hb-list a{flex:none;padding:5px 9px;text-decoration:none;white-space:nowrap;
  font:400 11.5px/1 var(--sans);letter-spacing:.02em;
  color:rgba(249,245,238,.6);background:rgba(249,245,238,.07)}
.hb-list a:hover{color:var(--paper);background:rgba(249,245,238,.14)}
.hb-list a.on{color:var(--ink);background:var(--gorse)}

/* the three dials - what the test is actually for */
.hb-dials{flex:none;display:flex;align-items:center;gap:14px}
.hb-dials label{display:flex;align-items:center;gap:6px;
  font:400 11px/1 var(--sans);color:rgba(249,245,238,.6)}
.hb-dials input[type=range]{width:78px;accent-color:var(--gorse)}
.hb-dials select{padding:4px 6px;font:400 11px/1 var(--sans);
  color:var(--paper);background:rgba(249,245,238,.1);border:0}
.hb-dials b{min-width:2.4em;font-weight:500;color:var(--paper);
  font-variant-numeric:tabular-nums}

/* ADD VIDEO. Choosing is looking: "beach" returns sixty clips and no list of
   file names will tell you which one has the light in it, so the panel shows
   the frames at a size you can judge and a click puts that film behind the
   page. */
/* THE FIELD, FIRST IN THE STRIP AND ALWAYS THERE. Wide enough to read its
   own placeholder, which is what tells you it is a search at all. */
.hb-find{flex:1 1 380px;min-width:260px;display:flex;gap:0;order:-1}
.hb-find input{flex:1 1 auto;min-width:0;padding:8px 11px;
  font:400 13px/1.3 var(--sans);color:var(--ink);
  background:var(--paper);border:0;outline-offset:-2px}
.hb-find input::placeholder{color:rgba(65,64,66,.45)}
.hb-find button{flex:none;padding:8px 16px;cursor:pointer;border:0;
  background:var(--gorse);color:var(--ink);
  font:500 12px/1.3 var(--sans);letter-spacing:.04em}
.hb-find button:hover{background:#C08C3D}

.hb-pick{flex:1 1 100%;margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(249,245,238,.16)}
.hb-none{margin:0 0 8px;font:400 11.5px/1.4 var(--sans);
  color:rgba(249,245,238,.6)}
.hb-none button{margin-left:10px;padding:0;cursor:pointer;background:none;
  border:0;font:400 11.5px/1.4 var(--sans);color:var(--gorse);
  text-decoration:underline}

/* the frames, scrolling rather than growing the bar up the page */
.hb-grid{display:grid;grid-auto-flow:column;grid-auto-columns:168px;
  gap:10px;overflow-x:auto;padding-bottom:5px;max-height:186px}
.hb-grid a{display:block;text-decoration:none}
.hb-grid img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  background:rgba(249,245,238,.08)}
.hb-grid a:hover img{outline:2px solid var(--gorse);outline-offset:-2px}
/* THE SENTENCE NEEDS THREE LINES, not one clipped one. It is the reason the
   tile came back, and a description cut off at "A stone bench sits benea" is
   no better than the file name it replaced. */

/* AND IT WRAPS. This was one endless row with overflow-x:auto, which a wheel
   cannot move and which showed six of sixty results at a time - the rest were
   simply unreachable. A search result is a set you scan, so it lays out as a
   set and the panel scrolls DOWN, which every wheel already does. Capped at
   42vh so the page underneath, which is the thing being judged, is never
   buried by its own tool. */
.hb-grid{grid-auto-flow:row;
  grid-template-columns:repeat(auto-fill,minmax(182px,1fr));
  grid-auto-columns:auto;
  max-height:42vh;overflow-y:auto;overflow-x:hidden;
  padding-right:4px;scrollbar-width:thin;
  scrollbar-color:rgba(249,245,238,.34) transparent}
.hb-grid b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  margin-top:6px;font:400 11px/1.38 var(--sans);
  color:rgba(249,245,238,.92);overflow:hidden}
.hb-grid i{display:block;font:400 10.5px/1.3 var(--sans);font-style:normal;
  color:rgba(249,245,238,.5)}

/* a bar you can see. An invisible scrollbar on a dark strip is how the last
   fifty results went missing in the first place. */
.hb-grid::-webkit-scrollbar,.hb-list::-webkit-scrollbar{width:9px}
.hb-grid::-webkit-scrollbar-thumb,.hb-list::-webkit-scrollbar-thumb{
  background:rgba(249,245,238,.34)}
.hb-grid::-webkit-scrollbar-thumb:hover,.hb-list::-webkit-scrollbar-thumb:hover{
  background:rgba(249,245,238,.55)}
.hb-grid::-webkit-scrollbar-track,.hb-list::-webkit-scrollbar-track{
  background:rgba(249,245,238,.07)}

.hb-out{flex:none;font:500 10px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(249,245,238,.55);
  text-decoration:underline;text-underline-offset:3px}
.hb-out:hover{color:var(--paper)}

/* the strip is fixed, so the page needs the room back at its foot */
body:has(.hb) .ft{padding-bottom:86px}

@media (max-width:700px){
  .hb{gap:9px;padding:9px 14px 10px}
  .hb-said{flex:1 1 100%}
}


/* ======================================= IDEAS FOR THE WEEKEND - V1
   Jack picked V1 off /design-2026/weekend-broadsheet.html, 21 September.

   The broadsheet: a square film, the title, a running countdown, and ten
   things set in two serif columns. It holds ten in 253px, which is why it
   won - the eight arrangements before it held five in anything from 960 to
   4,174px, against a brief of "concise, not a huge section, not listing
   cards". Two columns of serif is the oldest answer to "a lot of short
   entries in very little room" and still the best one.

   NO SANS IN THE BLOCK AT ALL. Every other band on this page labels itself
   in Jost; this one does not, and that is the whole character of it. */
.b-wk{display:grid;grid-template-columns:var(--b-pic,230px) 1fr;gap:36px;
  align-items:start;width:100%;padding:0 0 78px}
.b-pic{position:relative;display:block;overflow:hidden;background:var(--oat);
  aspect-ratio:1}
.b-pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;transition:transform .7s cubic-bezier(.22,.8,.24,1)}
.b-wk:hover .b-pic video{transform:scale(1.03)}

.b-h{margin:0 0 8px;font:400 var(--b-head,32px)/1.08 var(--face);
  letter-spacing:-.012em;color:var(--ink)}

/* THE COUNTDOWN. Tabular figures so a ticking second does not shove the words
   along once a second - the one thing that makes a running clock restless.
   It is empty until the browser fills it: a clock rendered on the server is
   wrong by the time the page is served, and this page is cached. */
.b-cd{margin:0 0 14px;padding-bottom:11px;border-bottom:1px solid var(--stone);
  min-height:1.5em;
  font:400 13.5px/1.5 var(--serif);font-style:italic;color:var(--ink-55)}
.b-cd s{text-decoration:none;font-style:normal;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}

.b-x{columns:var(--b-cols,2);column-gap:34px}
.b-x a{display:block;break-inside:avoid;padding:0 0 11px;text-decoration:none;
  color:var(--ink);font:400 var(--b-body,14.5px)/1.5 var(--serif)}
.b-x b{font-weight:600}
.b-x i{font-style:italic;color:var(--ink-75)}
.b-x a:hover b{color:var(--tweed)}

@media (max-width:900px){
  .b-wk{grid-template-columns:1fr;gap:22px}
  .b-x{columns:1}
}
@media (max-width:620px){
  .b-h{font-size:26px}
}


/* ---- THE STAY PAGE'S FRONT BLOCK, 22 September ------------------------
   Jack: "fix the alignment and spacing on this part its too close to the
   next section and for this part it can be redesigned to suit - it doesn't
   need the date squares." The themed block carries the standard space below
   it, since nothing stands between it and the first band on this page; and
   its two lists are rows with a photograph, the name and one line, no date
   chip. No hairlines: rows are separated by space alone. ---------------- */
/* 24, not the band's 96: the wall now follows and brings 58px of its own,
   and the two stacked to 150. Jack, 22 September: "little too much space in
   between these sections". */
.fp.fp-themed{padding-bottom:24px}
/* THE SAME BOOK AS THE DAILY. Jack, 23 September: "the scottish escapes book
   on the pages should be exact same dimensions as this one". The themed
   block's lists run taller than the home page's, and the cover stretched to
   the row: 340 by 612 against the Daily's 340 by 457. It keeps the Daily's
   shape instead and stands at the top of the row. The same on every page
   (Jack, 23 September, on Perthshire's Daily at 306 by 555 beside a long
   list of collections: "look at the length or height of the daily image,
   its all messed up"). */
.fp-3 > .fp-open{align-self:start}
.fp-3 .dl{height:auto;aspect-ratio:340/457}
/* 16 under the title, not 2: Jack, 22 September, "we need more space after
   the titles new places to visit and latest collections" */
.fp-stay .fp-rows{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.fp-stay .fp-rows a{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;
  text-decoration:none;color:inherit}
.fp-stay .fp-rows img,.fp-stay .fp-rows .ph{width:64px;aspect-ratio:4/3;object-fit:cover;
  display:block;background:var(--oat)}
.fp-stay .fp-rows b{display:block;font:400 16px/1.3 var(--face);letter-spacing:-.002em}
.fp-stay .fp-rows i{display:block;margin-top:3px;font:400 11px/1.4 var(--sans);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-55);font-style:normal}
.fp-stay .fp-rows a:hover b{color:var(--tweed)}
.fp-stay .fp-rows a:hover img{opacity:.92}


/* ---- WHAT ARE YOU HERE FOR - the stay page's opening question, 22 Sept --
   Jack: "there should be a prompt at the top to narrow down what the user is
   here for... using similar kind of design to what we did with the trip
   planner". These are the planner's own rules - the bordered tweed tiles
   (.wh-way), the uppercase pills, the .bt-q rise - copied here under the same
   names, because /stay loads this one sheet and never the planner's. The
   region tiles are the rail's own .fd-cat, as buttons, in a grid. ---------- */
.sa{width:100%;padding:0 0 clamp(44px,5vw,64px)}
.sa h2{margin:0;font:400 min(clamp(22px,2vw,28px), 28px + (clamp(22px,2vw,28px) - 28px) * 0.6)/1.2 var(--face);letter-spacing:-.006em;
  color:var(--ink);text-wrap:balance}
.sa .hint{margin:8px 0 0;font:italic 400 15.5px/1.5 var(--serif);color:var(--ink-55)}

.sa .wh-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
.sa .wh-way{position:relative;padding:20px 22px 18px;border:1px solid var(--tweed);
  background:var(--paper);cursor:pointer;text-align:left;font:inherit;color:var(--tweed);
  transition:.25s}
.sa .wh-way b{display:block;font:400 22px/1.2 var(--face)}
.sa .wh-way i{display:block;margin-top:5px;font:italic 400 14.5px/1.4 var(--serif);
  color:var(--ink-55);transition:.25s}
.sa .wh-way:hover,.sa .wh-way.on{background:var(--tweed);color:var(--paper)}
.sa .wh-way:hover i,.sa .wh-way.on i{color:rgba(255,255,247,.7)}
.sa .wh-way:focus-visible{outline:2px solid var(--bracken);outline-offset:2px}

/* the regions: the rail's tile, as a button, five to a row. Every property
   the rail set for a flex child is reset here, not just the one that shows -
   a half-overridden component rule wins the other half. */
.sa .sa-regions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:22px}
.sa .sa-regions .fd-cat{flex:none;width:100%;aspect-ratio:1;scroll-snap-align:none;
  border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit}
.sa .sa-regions .fd-cat img{position:absolute;inset:0;width:100%;height:100%}
.sa .sa-regions .fd-cat b{font-size:18px}

.sa .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sa .pills button{min-height:44px;padding:0 20px;background:var(--paper);
  font:600 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--ink);color:var(--ink);cursor:pointer;transition:.2s}
.sa .pills button:hover,.sa .pills button.on{background:var(--ink);color:var(--paper)}

.sa .sa-dates{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:22px}
.sa .sa-dates label{display:inline-flex;align-items:center;gap:10px;
  font:600 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.sa .sa-dates input{min-height:44px;padding:0 14px;border:1px solid var(--ink);
  background:var(--paper);font:400 15px var(--serif);color:var(--ink);border-radius:0}
.sa .sa-next{min-height:44px;padding:0 22px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  font:600 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.sa .sa-next:disabled{opacity:.35;cursor:default}

/* the quiet way back or round, and the one line once it is answered */
.sa .sa-back{display:flex;gap:22px;margin-top:16px}
.sa .sa-back button,.sa .sa-done button{background:none;border:0;padding:0;cursor:pointer;
  font:italic 400 14.5px/1.5 var(--serif);color:var(--ink-55);
  text-decoration:underline;text-underline-offset:3px}
.sa .sa-back button:hover,.sa .sa-done button:hover{color:var(--tweed)}
.sa .sa-done{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--stone);border-bottom:1px solid var(--stone)}
.sa .sa-done b{font:400 18px/1.3 var(--face);color:var(--ink)}
.sa .sa-done i{font:italic 400 14.5px/1.5 var(--serif);color:var(--ink-55)}

/* the planner's beat: each screen rises in. One class, not the planner's
   .bt-q.in pair: .in is this page's own container and carries the gutter, and
   the pair put the whole question 57px in from the column. */
.sa .bt-q{animation:bt-rise .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes bt-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sa .bt-q{animation:none}}

@media (max-width:900px){
  .sa .wh-ways{grid-template-columns:1fr}
  .sa .sa-regions{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .sa .sa-regions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sa .sa-back{flex-wrap:wrap;gap:10px 22px}
}


/* ---- the sign-up, in the clock's place on the stay page, 22 September ---
   Jack: "Next edition, Monday at nine - instead of this i think we put enter
   your email to receive every edition free", "instead of 5d 17:07:48". The
   clock's own label style over it; under it one hairline box holding the
   field and the word. Once joined it reads as the clock did: a label and a
   line. ------------------------------------------------------------------ */
.fp-join span{display:flex;max-width:340px;border:1px solid var(--ink)}
.fp-join input{flex:1 1 auto;min-width:0;min-height:42px;padding:0 12px;border:0;border-radius:0;
  background:var(--paper);font:400 14.5px var(--serif);color:var(--ink);outline:none}
.fp-join input::placeholder{color:var(--ink-35)}
.fp-join input:focus-visible{box-shadow:inset 0 0 0 1px var(--ink)}
.fp-join button{flex:0 0 auto;padding:0 16px;border:0;background:var(--ink);color:var(--paper);
  font:600 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  transition:background .2s}
.fp-join button:hover{background:var(--tweed)}
.fp-join em{display:block;margin-top:8px;font:italic 400 13.5px/1.4 var(--serif);color:var(--ink-55)}


/* ---- THE NEXT FOURTEEN NIGHTS, on a stay entry with a calendar, 22 Sept --
   Jack: "(property name) is free this weekend for a last minute stay". A
   square a night with the day's letter, hollow when free and filled when
   taken, and one quiet line saying which is which. Tabular by construction:
   every square the same width, so the row reads as a calendar. ------------ */
.fd-nights{display:flex;flex-wrap:wrap;gap:5px;margin:18px 0 0;align-items:center}
.fd-nights i{display:grid;place-items:center;width:30px;height:30px;
  border:1px solid currentColor;font:500 9.5px/1 var(--sans);letter-spacing:.04em;
  font-style:normal;color:var(--ink);opacity:.9}
.fd-nights i.taken{background:currentColor}
.fd-nights u{flex-basis:100%;margin-top:4px;text-decoration:none;
  font:italic 400 12.5px/1.4 var(--serif);color:var(--ink-55)}
.fd-row.dark .fd-nights i{color:var(--paper)}
.fd-row.dark .fd-nights u{color:rgba(255,255,247,.55)}
@media (max-width:560px){.fd-nights i{width:26px;height:26px;font-size:9px}}


/* ---- THE BOX YOU ARE ON, 22 September ----------------------------------
   A box on /stay opens that kind's feed (/stay/cottages), and the row shows
   which one you are in: a tweed rule inside the picture's edge, the wash
   lifted. Everything else about the tile is left alone. -------------------- */
.fd-cat.on{outline:3px solid var(--tweed);outline-offset:-3px}
.fd-cat.on .tint,.fd-cat.on .dim{opacity:0}
.cv-eight .fd-cat.on{transform:translateY(-4px)}


/* ---- SOUNDS OF SCOTLAND, 22 September ------------------------------------
   Jack: "lets do a immersive section here using audio - so a video like the
   rogie falls one and the listen to the sounds of rogie falls type thing so
   they can click play", then "we just need one for now". One film with its
   own sound in a wide frame, silent until the round paper button is pressed;
   then the five bars move and the frame's edge glows. The caption sits in
   the film's bottom-left over a soft foot; the sentence and the way out sit
   under. ------------------------------------------------------------------- */
.snd{width:100%;padding:0 0 78px}
.snd-head{display:flex;align-items:baseline;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin:0 0 22px}
.snd-head b{font:400 26px/1.16 var(--face);letter-spacing:-.004em;color:var(--ink)}
.snd-head i{font:italic 400 15.5px/1.5 var(--serif);color:var(--ink-55)}

.snd-frame{position:relative;overflow:hidden;background:var(--ink);aspect-ratio:16/9;
  box-shadow:0 0 0 0 rgba(192,140,61,0);transition:box-shadow .6s}
.snd-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.snd-frame::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(to top,rgba(10,9,7,.72),rgba(10,9,7,0));pointer-events:none}
.snd-frame.on{box-shadow:0 0 0 3px var(--bracken)}

/* the button: a paper disc with an ink triangle, two bars once it plays */
.snd-play{position:absolute;left:50%;top:50%;z-index:2;width:84px;height:84px;margin:-42px 0 0 -42px;
  border:0;border-radius:50%;background:var(--paper);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 12px 30px -10px rgba(10,9,7,.6);transition:transform .25s,opacity .3s}
.snd-play:hover{transform:scale(1.05)}
.snd-play i{display:block;width:0;height:0;border-style:solid;border-width:14px 0 14px 24px;
  border-color:transparent transparent transparent var(--ink);margin-left:6px}
.snd-frame.on .snd-play{opacity:.72;width:64px;height:64px;margin:-32px 0 0 -32px}
.snd-frame.on .snd-play i{width:18px;height:22px;border:0;margin:0;
  background:linear-gradient(to right,var(--ink) 0 35%,transparent 35% 65%,var(--ink) 65%)}
.snd-frame.on:hover .snd-play{opacity:1}

/* the sound, seen: five bars that only move while it plays */
.snd-wave{position:absolute;right:22px;bottom:22px;z-index:2;display:flex;gap:4px;align-items:flex-end;height:26px}
.snd-wave i{display:block;width:4px;height:6px;background:var(--paper);opacity:.85;transform-origin:bottom}
.snd-frame.on .snd-wave i{animation:snd-bar 1.1s ease-in-out infinite}
.snd-frame.on .snd-wave i:nth-child(2){animation-delay:.15s}
.snd-frame.on .snd-wave i:nth-child(3){animation-delay:.3s}
.snd-frame.on .snd-wave i:nth-child(4){animation-delay:.45s}
.snd-frame.on .snd-wave i:nth-child(5){animation-delay:.6s}
@keyframes snd-bar{0%,100%{height:6px}50%{height:26px}}
@media (prefers-reduced-motion:reduce){.snd-frame.on .snd-wave i{animation:none;height:16px}}

.snd-cap{position:absolute;left:24px;right:120px;bottom:22px;z-index:2;color:var(--paper);pointer-events:none}
.snd-cap b{display:block;font:400 min(clamp(24px,2.6vw,38px), 28px + (clamp(24px,2.6vw,38px) - 28px) * 0.6)/1.1 var(--face);letter-spacing:-.008em;
  text-shadow:0 1px 9px rgba(65,64,66,.6)}
.snd-cap i{display:block;margin-top:6px;font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  font-style:normal;opacity:.85}

.snd-row{display:flex;justify-content:space-between;gap:18px 34px;align-items:baseline;margin-top:16px;flex-wrap:wrap}
.snd-said{margin:0;font:400 16px/1.6 var(--serif);color:var(--ink-75);max-width:64ch}
.snd-go{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font:500 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.snd-go s{display:block;width:18px;height:1px;background:currentColor;transition:width .25s}
.snd-go:hover{color:var(--tweed)}
.snd-go:hover s{width:32px}

@media (max-width:900px){
  .snd{padding-bottom:56px}
  .snd-cap{right:80px}
}
@media (max-width:560px){
  .snd-frame{aspect-ratio:4/5}
  .snd-cap b{font-size:22px}
  .snd-play{width:64px;height:64px;margin:-32px 0 0 -32px}
}

/* WHERE A FILM'S FACT WAS READ. films:facts, 22 September: a ten-seconds
   band that says a fact says where the fact came from, small, under it. */
.fd-source{margin:12px 0 0;font:500 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.fd-row.dark .fd-source{color:rgba(255,255,255,.6)}

/* THE FEED'S APPROVAL ROOM, /feedapproval. Jack, 22 September: "exactly the
   same as the home page feed with sections then on hover over the buttons
   can appear to approve, reject, or request change." The rows are the
   feed's; these are only the bar above them and the decisions over them. */
.fa{min-height:100vh;background:var(--paper)}
.fa-bar{max-width:1120px;margin:0 auto;padding:44px var(--edge,32px) 18px}
.fa-bar h1{font:400 min(clamp(30px,3.4vw,44px), 28px + (clamp(30px,3.4vw,44px) - 28px) * 0.6)/1.05 var(--face);letter-spacing:-.01em;margin:0 0 14px}
.fa-bar nav{display:flex;gap:22px;flex-wrap:wrap;font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.fa-bar nav a{color:var(--ink-55);text-decoration:none;padding-bottom:6px;border-bottom:1px solid transparent}
.fa-bar nav a.on{color:var(--ink);border-color:var(--ink)}
.fa-bar nav b{font-weight:500;color:var(--ink)}
.fa-bar p{margin:14px 0 0;font:italic 400 15px/1.5 var(--serif);color:var(--ink-55)}
.fa-feed{padding-bottom:80px}
.fa-row{position:relative}
.fa-meta{display:flex;gap:16px;flex-wrap:wrap;margin:0;padding:10px var(--edge,32px) 22px;font:500 9.5px/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-35)}
.fd-row.dark .fa-meta{color:rgba(255,255,255,.45)}
.fa-note{margin:0;padding:0 var(--edge,32px) 22px;font:italic 400 14px/1.5 var(--serif);color:var(--ink-55)}
/* the writer's reason, on a dark row. .fa-meta had this and .fa-note did not,
   so 54 of 68 rows carried a near-black line on a near-black ground: Jack,
   23 September, "some content is just white". */
.fd-row.dark .fa-note{color:rgba(255,255,255,.62)}
.fa-acts{position:absolute;top:22px;right:28px;z-index:4;display:flex;gap:8px;align-items:flex-start;opacity:.6;transition:opacity .2s}
.fa-row:hover .fa-acts,.fa-acts.open,.fa-acts:focus-within{opacity:1}
.fa-acts button{font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:11px 14px;border:1px solid rgba(255,255,255,.35);background:rgba(65,64,66,.82);color:#fff;cursor:pointer;backdrop-filter:blur(6px)}
.fd-row.g0 .fa-acts button,.fd-row.g1 .fa-acts button,.fd-row.g2 .fa-acts button,.fd-row.bright .fa-acts button{background:rgba(255,255,247,.94);color:var(--ink);border-color:var(--ink-35)}
.fa-acts .fa-yes{background:var(--forest,#2B301D);border-color:var(--forest,#2B301D);color:#fff}
.fa-acts .fa-no:hover{background:var(--tweed,#682114);border-color:var(--tweed,#682114);color:#fff}
.fa-acts .fa-ask:hover,.fa-acts .fa-yes:hover{filter:brightness(1.12)}
.fa-form{position:absolute;top:44px;right:0;width:320px;padding:12px;background:rgba(255,255,247,.97);border:1px solid var(--ink-35);display:grid;gap:8px}
.fa-form textarea{width:100%;font:400 14px/1.5 var(--serif);padding:8px 10px;border:1px solid var(--ink-35);background:#fff;color:var(--ink);resize:vertical}
.fa-form .fa-send{justify-self:end;background:var(--ink);color:#fff;border-color:var(--ink)}
.fa-gone{padding:28px var(--edge,32px)}
.fa-said{font:italic 400 16px/1.5 var(--serif);color:var(--ink-55);padding:0 var(--edge,32px)}
/* the checker on demand */
.fa-check{display:flex;align-items:center;gap:16px;margin-top:18px}
.fa-check button{font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:12px 16px;background:var(--forest,#2B301D);color:#fff;border:1px solid var(--forest,#2B301D);cursor:pointer}
.fa-check button:disabled{opacity:.45;cursor:default}
.fa-check span{font:italic 400 14px/1.4 var(--serif);color:var(--ink-55)}
/* the checker's scores on each piece, and the autopilot line kind by kind (23 September) */
.fa-scores{padding-top:0;padding-bottom:8px;color:var(--ink-55)}
.fa-scores span[title]{cursor:help}
.fa-pilot{margin-top:14px;display:grid;gap:4px}
.fa-pilot p{margin:0;font:400 13.5px/1.5 var(--sans);color:var(--ink-55)}
.fa-pilot b{font-weight:600;color:var(--ink)}
.fa-pilot button{font:600 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;margin-left:6px;background:none;color:var(--ink);border:1px solid var(--ink);cursor:pointer}
/* Take it down, on the live feed, for a signed-in keeper only (23 September) */
.fd-down{display:flex;gap:8px;align-items:center;padding:0 var(--edge,32px) 14px;font:500 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.fd-down button{font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:1px solid currentColor;padding:6px 9px;color:var(--ink-55);cursor:pointer}
.fd-down input{font:400 13px/1.3 var(--sans);letter-spacing:0;text-transform:none;padding:5px 8px;border:1px solid var(--ink-35);min-width:0;flex:1 1 180px;max-width:320px}
.fd-down.said{color:var(--ink-55)}
/* a photograph that is not ours carries its photographer (Google Places terms, 23 September) */
.fd-credit{display:block;margin-top:8px;font:400 11px/1.4 var(--sans);letter-spacing:.02em;color:var(--ink-55)}
.fd-row.dark .fd-credit{color:rgba(255,255,255,.55)}
.fd-credit + .fd-go{margin-top:18px}
.fd-row.dark .fd-down button{color:rgba(255,255,255,.6)}
.fa-acts .fa-some{background:transparent;border-color:rgba(255,255,255,.55)}
.fd-row.g0 .fa-acts .fa-some,.fd-row.g1 .fa-acts .fa-some,.fd-row.g2 .fa-acts .fa-some{background:#fff;color:var(--forest,#2B301D);border-color:var(--forest,#2B301D)}

/* THE FEED ROOM IN BASECAMP (23 September): the sections across the top,
   and "How it runs" folded away. */
.bc-body .fa{min-height:0;background:transparent}
.bc-body .fa-bar{padding-top:8px}
.fa-sections{margin-bottom:14px}
.fa-sections a{font-size:11px}
.fa-how{margin-top:14px;font:400 14px/1.5 var(--serif);color:var(--ink-55)}
.fa-how summary{cursor:pointer;font:500 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.fa-how[open] summary{margin-bottom:10px}

/* FREE DATES under a stay (variant B, /design-2026/free-dates.html). Jack, 23
   September: "the dates should be presented better and not just in the body
   of the text". A small label, then each free spell as a button that books it. */
.fd-dates{display:block;margin:22px 0 0}
.fd-dates > u{display:block;margin-bottom:10px;text-decoration:none;
  font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-35)}
.fd-dates > span{display:flex;flex-wrap:wrap;gap:10px}
.fd-dates a{padding:10px 16px;border:1px solid var(--stone);border-radius:0;
  font:400 15px/1 var(--serif);color:var(--ink);text-decoration:none;
  font-variant-numeric:tabular-nums;transition:background .2s,color .2s}
.fd-dates a:hover,.fd-dates a:focus-visible{background:var(--ink);color:var(--paper)}
.fd-row.dark .fd-dates > u{color:rgba(251,249,246,.5)}
.fd-row.dark .fd-dates a{border-color:rgba(251,249,246,.25);color:var(--paper)}
.fd-row.dark .fd-dates a:hover,.fd-row.dark .fd-dates a:focus-visible{background:var(--paper);color:var(--ink)}
#your-dates{scroll-margin-top:110px}


/* ---- THE MAGAZINE IN THE FEEDS (ArticleBands). Jack, 23 September, off
   /design-2026/feed-articles.html: "i think use E a f h". A and E are the
   picture and collection entries as they are; F, the cover line, is the
   photograph with the issue, the title and the action over its foot; H is a
   collection whose cards are each a link. ---- */
.fd-cover{display:block;position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#414042}
.fd-cover img,.fd-cover video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.8,.24,1)}
.fd-it:hover .fd-cover img,.fd-it:hover .fd-cover video{transform:scale(1.02)}
.fd-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 38%,rgba(0,0,0,.66))}
.fd-cover-words{position:absolute;left:32px;right:32px;bottom:30px;z-index:1;display:block}
.fd-cover-words .fd-kick{color:rgba(244,239,231,.84);margin-bottom:12px}
.fd-cover-words .fd-h{color:#F4EFE7;font-size:min(34px, 28px + (34px - 28px) * 0.6);line-height:1.16}
.fd-cover-words .fd-go{color:#F4EFE7;margin-top:16px}
a.fd-card{color:inherit;text-decoration:none}
a.fd-card:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:760px){.fd-cover{aspect-ratio:4/5}.fd-cover-words{left:18px;right:18px;bottom:20px}.fd-cover-words .fd-h{font-size:26px}}


/* ---- GOLF'S OPENING and its region row, 24 September ---------------------
   Jack, on /golf: "seems to be a outline of the box on right side remove that";
   and of the region cards, "make sure they all fit". */
/* the film's box had a brown ground, and at 640.5 wide a hairline of it
   showed down the film's edge */
.cv-hero[data-theme="golf"] .cv-mount{background:transparent}
/* all the regions in one row, none cut off: equal widths, names on two
   lines if they need them */
.cv-eight .fd-rail.many[data-theme="golf"] .fd-cat{flex:1 1 0;min-width:0}
.cv-eight .fd-rail.many[data-theme="golf"] .fd-cat b{white-space:normal;font-size:14px;line-height:1.15;
  left:4px;right:4px}
@media (max-width:900px){
  .cv-eight .fd-rail.many[data-theme="golf"] .fd-cat{flex:0 0 120px}
}

/* ---- THE GOLF BLOCK, 24 September -------------------------------------------
   Jack: "too much ... maybe more larger things ... the interview of james wilson
   ... highlight some courses", then of five shapes tried on the page, "lets go
   with e". Two features side by side, the interview and the course of the day;
   one Latest strip under them, everything new in it. */
.gfx{padding-bottom:24px}
.gfx-big{display:block;text-decoration:none;color:inherit}
.gfx-big .gfx-pic{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--oat)}
.gfx-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.8,.24,1)}
.gfx a:hover .gfx-pic img{transform:scale(1.025)}
.gfx-words{display:block;padding:20px 0 0}
.gfx-words small,.gfx-strip small{display:block;margin:0 0 8px;font:500 10.5px/1.3 var(--sans);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.gfx-words b{display:block;font:400 min(clamp(24px,1.9vw,30px), 28px + (clamp(24px,1.9vw,30px) - 28px) * 0.6)/1.14 var(--face);letter-spacing:-.01em;text-wrap:balance}
.gfx-line{display:block;margin:12px 0 16px;max-width:52ch;font:400 16px/1.6 var(--serif);color:var(--ink-70,rgba(65,64,66,.72))}
.gfx-go{display:inline-block;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:4px}
.gfx a:hover .gfx-words b{color:var(--tweed)}
.gfx-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.gfx-two.one{grid-template-columns:minmax(0,1fr)}
.gfx-strip{margin-top:52px;padding-top:22px;border-top:1px solid rgba(65,64,66,.14)}
.gfx-strip h3{margin:0 0 16px;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.gfx-strip > div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px}
.gfx-strip a{display:block;text-decoration:none;color:inherit}
.gfx-strip b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font:400 17px/1.35 var(--face)}
.gfx-strip a:hover b{color:var(--tweed)}
@media (max-width:900px){
  .gfx-two{grid-template-columns:minmax(0,1fr);gap:40px 0}
  .gfx-strip > div{grid-template-columns:minmax(0,1fr);gap:22px 0}
}

/* A PAGE AT A TIME, under the rows of the feed room. Jack, 25 September:
   "can you add pagination to this ... it takes ages to load as there are so
   many". Kept had reached 1,682 rows, every one drawn as a full feed entry
   with its own film. Two words and a count, in the room's own meta type. */
.fa-pages{justify-content:center;gap:28px;align-items:baseline;padding-top:34px;padding-bottom:48px}
.fa-pages a{color:var(--ink-55);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.fa-pages a:hover{color:var(--ink-75)}
.fa-pages span[aria-hidden]{color:var(--ink-20)}


/* =========================================================================
   /ITINERARIES: THE ROUTE FINDER under the themed opening (route-finder.tsx).
   Jack, 25 September 2026: "this page is just about finding the right place";
   then "i want this to be sooo easy to use and navigate and a real joy to
   find things". Three shapes to try in the page (?finder=a|b|c): the
   sentence, the bar, all on the page. The routes wear Explore's card inside
   .ex-face (_explore.css); the choices wear the house tabs. rf- is the
   prefix, checked free across every sheet the page loads. The source of this
   block is scratchpad/design-2026/itin-landing/rf.css.
   ========================================================================= */
/* the cards across follow Explore's own (:root --ex-cols in _explore.css) */
.rf{background:var(--paper)}
/* the feed band's own column (.fd-band.cv-eight): 1100 between 28px gutters */
/* Explore's measure (_explore.css, .ex-wrap), so the opening, the row, the routes and the bands share one edge */
.rf-in{max-width:var(--ex-in);margin:0 auto;padding:0 var(--edge);box-sizing:border-box}
/* what you love, the second line of Explore's row */
.rf-kinds{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:16px}
.rf .ex-cats{margin-top:0;padding-top:28px}
.rf .ex-sec{padding-bottom:clamp(80px,9vw,120px)}
.rf .ex-head .rf-clear{flex-basis:auto}
.rf-find{position:relative;padding:clamp(56px,6vw,88px) 0 0}
.rf .rf-head{padding-top:clamp(48px,5vw,72px)}

/* THE OPENING: the film across the width, the words and the finder on it, in the routes' own column */
/* up under the glass bar, as the feed pages' opening is */
.rf-open{position:relative;overflow:hidden;margin-top:calc(var(--bar,76px) * -1);min-height:clamp(520px,72vh,760px);display:flex;align-items:flex-end;color:var(--shell);background:#2b301d}
.rf-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rf-veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,18,16,.55),rgba(20,18,16,.12) 55%,rgba(20,18,16,.25))}
.rf-openin{position:relative;z-index:1;width:100%;padding-top:calc(var(--bar,76px) + 48px);padding-bottom:clamp(56px,7vw,96px)}
.rf-open h1{font:400 min(clamp(44px,5vw,76px), 28px + (clamp(44px,5vw,76px) - 28px) * 0.6)/1.02 var(--face);letter-spacing:-.015em;margin:0 0 16px;max-width:14ch;text-wrap:balance}
.rf-lede{font:400 18px/1.55 var(--serif);color:rgba(249,245,238,.82);margin:0;max-width:46ch}
.rf-at{position:absolute;z-index:1;right:28px;bottom:24px;font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(249,245,238,.72)}
/* on the film the tabs, the labels and the sentence turn light; the bar and the panels stay paper-white */
.rf-open .rf-tab{color:rgba(249,245,238,.66)}
.rf-open .rf-tab:hover,.rf-open .rf-tab.on{color:var(--shell)}
.rf-open .rf-lab{color:var(--shell)}
.rf-open .rf-maplink{color:rgba(249,245,238,.8);text-decoration-color:rgba(249,245,238,.35)}
.rf-open .rf-maplink:hover{color:var(--shell);text-decoration-color:var(--bracken)}
.rf-open .rf-sentence,.rf-open .rf-word{color:var(--shell)}
.rf-open .rf-word:hover,.rf-open .rf-word.open{color:var(--bracken-soft)}
.rf-open .rf-hint{color:rgba(249,245,238,.66)}
.rf-open .rf-clear{color:rgba(249,245,238,.75);text-decoration-color:rgba(249,245,238,.35)}
.rf-open .rf-panel{color:var(--ink)}
.rf-open .rf-panel .rf-tab{color:var(--ink-55)}
.rf-open .rf-panel .rf-tab:hover,.rf-open .rf-panel .rf-tab.on{color:var(--ink)}

/* WHAT YOU LOVE: the planner's photograph tiles, their rules copied from journey-2026.css under the same names */
.rf-q{font:400 min(clamp(28px,2.8vw,40px), 28px + (clamp(28px,2.8vw,40px) - 28px) * 0.6)/1.1 var(--face);letter-spacing:-.005em;margin:0 0 10px}
.wz-cards{display:grid;grid-template-columns:repeat(var(--wz-cols,5),minmax(0,1fr));gap:26px 20px;text-align:left}
.wz-card{display:block;align-self:start;position:relative;background:none;border:0;padding:0;cursor:pointer;text-align:left;color:var(--ink)}
.wz-shot{display:block;position:relative;overflow:hidden;background:var(--stone);aspect-ratio:1/1}
.wz-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease,ease)}
.wz-card:hover .wz-shot img{transform:scale(1.05)}
.wz-card h3{font:400 19px/1.15 var(--face);margin:11px 0 0}
.wz-shot .tick{position:absolute;top:8px;right:8px;z-index:3;width:26px;height:26px;display:grid;place-items:center;background:var(--forest);color:var(--on-forest);font:600 13px/1 var(--sans);opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s}
.wz-card.on .tick{opacity:1;transform:none}
.wz-card.on .wz-shot::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--ink)}
.wz-card:focus-visible{outline:2px solid var(--august);outline-offset:4px}
.rf-loves{margin-top:30px}

/* HOW LONG, WHERE, HOW: one quiet line under the tiles, nothing boxed, nothing cut off */
.rf-more{display:flex;flex-wrap:wrap;gap:14px 56px;margin-top:44px}
.rf-pick{display:flex;align-items:baseline;gap:12px;background:none;border:0;padding:0 0 8px;cursor:pointer;border-bottom:2px solid transparent;color:var(--ink);text-align:left}
.rf-pick span{font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.rf-pick b{font:400 21px/1.2 var(--face)}
.rf-pick i{width:8px;height:8px;border-right:1.5px solid var(--ink-55);border-bottom:1.5px solid var(--ink-55);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.rf-pick:hover b{color:var(--tweed)}
.rf-pick.open{border-bottom-color:var(--bracken)}
.rf-pick.open i{transform:translateY(1px) rotate(225deg)}
.rf-inline{margin-top:24px;animation:rf-in .22s var(--ease,ease) both}

/* the house tabs: small capitals, the chosen underlined in bracken (Jack, 13 September) */
.rf-tabs{display:flex;flex-wrap:wrap;gap:14px 28px}
.rf-tab{position:relative;background:none;border:0;padding:0 0 8px;cursor:pointer;font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.rf-tab:hover{color:var(--ink)}
.rf-tab.on{color:var(--ink);border-bottom-color:var(--bracken)}
.rf-tab:focus-visible,.rf-word:focus-visible,.rf-seg:focus-visible{outline:2px solid var(--august);outline-offset:3px}

/* C, all on the page: four labelled rows */
.rf-rows{display:grid;gap:26px}
.rf-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:baseline}
.rf-lab{font:400 20px/1 var(--face);color:var(--ink)}
.rf-maplink{background:none;border:0;padding:0;margin:18px 0 0;cursor:pointer;font:italic 400 15px/1.4 var(--serif);color:var(--ink-75);text-decoration:underline;text-decoration-color:var(--ink-20);text-underline-offset:4px}
.rf-maplink:hover{color:var(--ink);text-decoration-color:var(--bracken)}
.rf-rows .rf-wherebox{margin-top:22px}

/* A, the sentence: the answer as one line, each part a word to press */
.rf-sentence{font:300 min(clamp(30px,3.4vw,46px), 28px + (clamp(30px,3.4vw,46px) - 28px) * 0.6)/1.35 var(--face);letter-spacing:-.01em;margin:0;max-width:26ch;text-wrap:balance}
.rf-word{background:none;border:0;padding:0;cursor:pointer;font:inherit;letter-spacing:inherit;color:var(--ink);text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--bracken);text-decoration-thickness:2px;text-underline-offset:.18em;transition:color .2s}
.rf-word:hover,.rf-word.open{color:var(--bracken)}
.rf-word.set{text-decoration-style:solid}
.rf-hint{font:italic 400 15px/1.5 var(--serif);color:var(--ink-55);margin:16px 0 0}

/* B, the bar: one white bar in four parts */
.rf-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;box-shadow:0 1px 0 rgba(65,64,66,.04),0 10px 30px rgba(65,64,66,.07)}
.rf-seg{background:none;border:0;border-left:1px solid var(--stone);padding:18px 22px 20px;text-align:left;cursor:pointer;min-width:0;transition:background .2s}
.rf-seg:first-child{border-left:0}
.rf-seg span{display:block;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);margin:0 0 10px}
.rf-seg b{display:block;font:400 19px/1.25 var(--face);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rf-seg:hover,.rf-seg.open{background:var(--shell)}
.rf-seg.open span{color:var(--bracken)}

/* the open choices, under the sentence or the bar */
.rf-panel{margin-top:18px;background:#fff;padding:26px 28px 28px;box-shadow:0 1px 0 rgba(65,64,66,.04),0 16px 40px rgba(65,64,66,.09);animation:rf-in .22s var(--ease,ease) both}
@keyframes rf-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.rf-done{display:block;margin:22px 0 0;background:none;border:0;padding:0;cursor:pointer;font:500 14px/1 var(--sans);color:var(--tweed);text-decoration:underline;text-underline-offset:4px}

/* where: the live map's regions and their names, Show all first */
.rf-wherebox{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.rf-regions{list-style:none;margin:0;padding:0;columns:3;column-gap:28px}
.rf-regions li{break-inside:avoid}
.rf-regions button{background:none;border:0;padding:5px 0;cursor:pointer;font:400 18px/1.25 var(--face);color:var(--ink-55);text-align:left}
.rf-regions button:hover,.rf-regions button.hov,.rf-regions button.on{color:var(--ink)}
.rf-regions button.on{text-decoration:underline;text-decoration-color:var(--bracken);text-decoration-thickness:2px;text-underline-offset:6px}
.rf-regions button.rf-all{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:9px 0 12px}
.rf-map{margin:0;position:relative}
.rf-map svg{width:100%;height:auto;display:block}
.rf-map .rf-land{fill:var(--stone)}
.rf-map .rf-rg{fill:rgba(43,48,29,.2);cursor:pointer;transition:fill .2s}
.rf-map .rf-rg:hover,.rf-map .rf-rg.hov{fill:rgba(43,48,29,.4)}
.rf-map .rf-rg.on{fill:rgba(192,140,61,.65)}
.rf-map figcaption{position:absolute;left:0;bottom:0;font:600 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55)}

/* the routes: the answer said back as their heading */
.rf-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:0 0 30px;scroll-margin-top:100px}
.rf-head h2{font:400 min(clamp(28px,2.8vw,40px), 28px + (clamp(28px,2.8vw,40px) - 28px) * 0.6)/1.15 var(--face);letter-spacing:-.005em;margin:0;max-width:30ch;text-wrap:balance}
.rf-clear{background:none;border:0;padding:0;cursor:pointer;font:500 14px/1 var(--sans);color:var(--ink-55);text-decoration:underline;text-decoration-color:var(--ink-20);text-underline-offset:4px}
.rf-clear:hover{color:var(--tweed);text-decoration-color:var(--tweed)}
.rf .ex-face{padding-bottom:clamp(80px,9vw,120px)}
/* route titles are longer than a place's name: up to three lines, where Explore keeps one */
.rf .ex-t b{white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rf-none{padding:10px 0 40px}
.rf-none p{font:italic 400 18px/1.5 var(--serif);color:var(--ink-75);margin:0 0 22px}
.rf-none .btn{margin:0 12px 12px 0}

/* a weekend: two days side by side; a week: a run of days */
.rf-sets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px var(--ex-gap,23px)}
.rf-eye{font:500 9.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-35);margin:0 0 12px}
.rf-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ex-gap,23px)}
.rf-day,.rf-week li a{display:block;text-decoration:none;color:inherit}
.rf-day img,.rf-week img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--stone);transition:transform 1.2s var(--ease,ease)}
.rf-day:hover img,.rf-week li a:hover img{transform:scale(1.02)}
.rf-no{display:block;font:italic 500 20px/1 var(--script);color:var(--ink-75);margin:14px 0 6px}
.rf-day b,.rf-week b{display:block;font:400 19px/1.25 var(--face);letter-spacing:-.005em}
.rf-weeks{display:grid;gap:64px}
.rf-week h3{font:400 28px/1.1 var(--face);margin:0 0 20px}
.rf-week ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:18px}
.rf-week b{font-size:16px}

/* the people who wrote them */
.rf-writers{background:var(--stone);padding:clamp(72px,9vw,110px) 0}
.rf-writers h2,.rf-on h2{font:400 min(clamp(32px,3.2vw,46px), 28px + (clamp(32px,3.2vw,46px) - 28px) * 0.6)/1.05 var(--face);letter-spacing:-.005em;margin:0 0 36px}
.rf-wg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ex-gap,23px)}
.rf-wg a{text-decoration:none;color:inherit}
.rf-wg img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.rf-wg b{display:block;font:400 22px/1.2 var(--face);margin:16px 0 6px}
.rf-wg span{font:italic 400 15px/1.45 var(--serif);color:var(--ink-75)}
/* and further, on forest: the band inherits its button and its words */
.rf-on{background:var(--forest);color:var(--on-forest);padding:clamp(72px,9vw,110px) 0}
.rf-og{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,96px)}
.rf-on h2{font-size:min(clamp(28px,2.6vw,38px), 28px + (clamp(28px,2.6vw,38px) - 28px) * 0.6);margin-bottom:14px}
.rf-on p{font:400 17px/1.6 var(--serif);color:rgba(241,237,232,.75);margin:0 0 26px;max-width:44ch}
.rf-on .btn{--hover-bg:var(--shell);--hover-color:var(--forest);color:var(--shell);border-color:var(--shell)}

/* while the three shapes are tried: the switch at the foot of the window */
.rf-try{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:20px;background:var(--forest);color:var(--on-forest);padding:12px 20px;box-shadow:0 12px 30px rgba(0,0,0,.2);white-space:nowrap}
.rf-try span{font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(241,237,232,.6)}
.rf-try a{font:400 15px/1 var(--face);color:var(--on-forest);text-decoration:none;padding-bottom:4px;border-bottom:2px solid transparent}
.rf-try a.on{border-bottom-color:var(--bracken)}

@media (max-width:1000px){.wz-cards{--wz-cols:4}}
@media (max-width:900px){
  .rf-kinds{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:10px calc(var(--edge) * -1) 0;padding:0 var(--edge) 4px}
  .rf-kinds::-webkit-scrollbar{display:none}
  /* Explore hides its row on a phone for its own index; this page has none, so the row stays: where first, the
     full width, then how long, then what you love, each line scrolling sideways if it must */
  .rf .ex-cats{display:block;position:relative;top:auto;padding:18px 0 8px}
  .rf .ex-sort{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:14px 22px;margin-bottom:0}
  .rf .ex-sort .ex-cat:not(.ex-where){display:inline-flex}
  .rf .ex-in{display:none}
  .rf .ex-where{order:-1;flex:1 1 calc(100% - 44px);justify-content:center;margin:0 0 4px}
  .rf .ex-clearw{order:-1;margin:0 0 4px -22px}
  /* on a phone the tiles are one row that scrolls sideways, so the routes are not five rows away */
  .wz-cards.rf-loves{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-16px;margin-right:-16px;padding:0 16px 6px;scrollbar-width:none}
  .wz-cards.rf-loves::-webkit-scrollbar{display:none}
  .wz-cards.rf-loves .wz-card{flex:0 0 40%;scroll-snap-align:start}
  .wz-card h3{font-size:17px}
  .rf-more{gap:14px 28px}
  .rf-open{min-height:480px}
  .rf-openin{padding-top:calc(var(--bar,76px) + 64px);padding-bottom:56px}
  .rf-seg b{white-space:normal}
  .rf-at{right:16px;bottom:16px}
  .rf-row{grid-template-columns:1fr;gap:12px}
  /* on a phone a long row of tabs scrolls sideways rather than stacking */
  .rf-rows .rf-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .rf-rows .rf-tabs::-webkit-scrollbar{display:none}
  .rf-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rf-seg:nth-child(3){border-left:0}
  .rf-seg:nth-child(n+3){border-top:1px solid var(--stone)}
  .rf-wherebox{grid-template-columns:1fr}
  .rf-map{max-width:360px}
  .rf-regions{columns:2}
  .rf-sets{grid-template-columns:1fr}
  .rf-week ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rf-wg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rf-og{grid-template-columns:1fr}
  .rf-try{gap:12px;padding:10px 14px;bottom:10px}
  .rf-try span{display:none}
  .rf-try a{font-size:13px}
}

/* ---------------------------------------------------------------------------
   WHAT ARE YOU LOOKING FOR TODAY: the old card, at the new size, in Explore's row.

   Jack, 28 September, twice. First: the row "should be simlar to this so where it says collections it
   can say smethign lilkle 'What are you looking for today' then it will show the listing cards, (not the
   design of collections, i was just showing that for size and style etc)". Then, when the first build
   came back wearing the dark Collections card: "i said not to design the samea s collection, it was just
   the layout i wanted to change, so not attached style of card".

   So the LAYOUT is Explore's - the heading with View all, the rail, the arrows, the 330px step - and the
   CARD is the one the row already had: the photograph filling it, the name centred on it, the tweed tint
   and the neutral dim that keep a white word readable over any picture. Nothing about the card changes
   except its size.

   These rules undo the c2 dress rather than avoid it, because c2 is what makes Explore's rail step 330
   and the two have to stay in step. Every property c2 sets on the card is set back here: a component
   rule half-overridden wins the other half, which has caught this site four times.
   --------------------------------------------------------------------------- */
.fd-doors[data-col="c2"] .ex-col{
  background:var(--oat);            /* not the dark #2B301D */
  padding:0;                        /* the photograph goes to the edge */
  aspect-ratio:6/7;                 /* the Collections shape, which is the size he pointed at */
  overflow:hidden;
  position:relative;
  display:block;                    /* not the flex column that stacks kicker, title, picture */
  transition:transform .4s cubic-bezier(.22,.8,.24,1)}
.fd-doors[data-col="c2"] .ex-col:hover{
  background:var(--oat);
  transform:none;                   /* c2 lifts and shadows; this card never did */
  box-shadow:none}

/* the kicker and the title are not stacked above a small picture any more: the
   title lies on the photograph, and the kicker is not drawn at all. */
.fd-doors[data-col="c2"] .ex-col .k{display:none}
.fd-doors[data-col="c2"] .ex-col .big{
  position:absolute;inset:0;z-index:2;margin:0;display:grid;place-items:center;
  text-align:center;padding:16px;color:#fff;
  font:400 25px/1.2 var(--face);letter-spacing:.004em;
  text-shadow:0 1px 18px rgba(0,0,0,.45)}

/* the picture fills the card instead of sitting in a 16:9 slot at the foot */
.fd-doors[data-col="c2"] .ex-col .ex-p{
  position:absolute;inset:0;margin:0;aspect-ratio:auto;background:var(--oat)}
.fd-doors[data-col="c2"] .ex-col .ex-p img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.8,.24,1)}
.fd-doors[data-col="c2"] .ex-col:hover .ex-p img{transform:scale(1.05)}

/* the tweed tint and the neutral dim, exactly as .fd-cat carries them: one
   colour for the whole row, and the darkening on top so the word is safe
   however much colour is going on underneath it. */
.fd-doors[data-col="c2"] .ex-col .ex-p::before,
.fd-doors[data-col="c2"] .ex-col .ex-p::after{
  content:"";position:absolute;inset:0;z-index:1;display:block;
  transition:opacity .3s cubic-bezier(.22,.8,.24,1)}
/* NO BLEND MODE HERE, and this is the whole reason the row looked broken.
   .fd-cat tints with mix-blend-mode:multiply and that is fine where it sits. On this card it made the
   photograph disappear on some cards and not others: a blend mode forces its own compositing layer, and
   inside a clipped, absolutely positioned box it stopped the image painting at all. Two of the first
   three cards came back flat oat with the name floating on nothing, while the middle one was perfect -
   which is what a compositing fault looks like and what a loading fault never does. Every image was
   complete, at full natural size, at opacity 1, the whole time.
   A plain tint at a slightly lower opacity looks the same and always paints. */
.fd-doors[data-col="c2"] .ex-col .ex-p::before{
  background:#682114;opacity:.22}
.fd-doors[data-col="c2"] .ex-col .ex-p::after{
  background:rgba(10,9,7,1);opacity:.06}
.fd-doors[data-col="c2"] .ex-col:hover .ex-p::before{opacity:.19}
.fd-doors[data-col="c2"] .ex-col:hover .ex-p::after{opacity:.04}

/* the heading in our own face, not Explore's, since this row sits on the home
   page and takes its type from the page it is on */
.fd-doors .ex-head h2{font:400 30px/1.1 var(--face);letter-spacing:-.005em}
.fd-doors{margin:0 0 56px}

/* ---------------------------------------------------------------------------
   SMALLER CARDS, THE SAME COLUMN AS THE SECTION BELOW, AND A SLIVER OF THE LAST.

   Jack, 28 September: "can we try the wigets smaller so we can fit more in and wider so fits the same
   margin as section below, make sure you show a little of the very last one so users know they can
   scroll".

   THE COLUMN IS NOT A NUMBER TYPED IN HERE. The section below is .fd-band.cv-eight, which is
   min(100%, 1100px + 28px * 2) with 28px of padding - a 1,100px column starting at 403 on a 1,920 screen.
   This takes the same expression rather than its answer, so the two move together when either changes.
   Explore's own row is 980 wide and starts 60px further in, which is what made the two edges disagree.

   AND THE SLIVER IS ARITHMETIC, not a guess. At 230 wide with 20 between, four cards and their three
   gaps come to 980 in a 1,100 column, so the fifth starts at 1,000 and shows 100px of itself - a little
   under half a card, which reads as "there is more" rather than as a mistake. Anything that divides the
   column evenly would show four cards and a clean edge, and a clean edge is what makes a rail look like
   a grid that has run out.
   --------------------------------------------------------------------------- */
/* The band around this row is .fd-band.cv-eight, which is min(100%, 1100 + 28*2) with 28px of padding -
   a 1,100px column, and the column the Daily below it sits in. The row was 980 because Explore's .ex-sec
   adds 60px of padding on each side, which is the whole of the 120px difference. Measured, not guessed:
   the chain read 1156 -> 1100 -> 980 and the 60s were sitting in the middle of it.
   Taking that padding off gives the row the band's column exactly, so the two edges line up however the
   band is resized. */
.fd-doors.ex-sec{padding-left:0;padding-right:0}
.fd-doors .ex-colwrap{width:100%;max-width:none;margin:0;padding:0}

.fd-doors[data-col="c2"] .ex-colrun{grid-auto-columns:230px;gap:20px}
.fd-doors[data-col="c2"] .ex-col{width:230px}

/* the name comes down with the card: 25px on a 330 card is 20px on a 230 one */
.fd-doors[data-col="c2"] .ex-col .big{font:400 20px/1.2 var(--face);padding:14px}

/* the arrows sat 16px outside Explore's column; here the column has 28px of
   padding of its own, so they move out to the edge of it rather than over the
   first and last card. */
.fd-doors .ex-railarrow.l{left:-22px}
.fd-doors .ex-railarrow.r{right:-22px}

@media (max-width:760px){
  /* NO ARROWS ON A PHONE, and not only because a phone scrolls the rail with a thumb. They are what
     made the page 6px wider than the window at 390: the arrows sit 22px outside the rail so they clear
     the first and last card, and .ex-rail does not clip, so the right one ended at 396 in a 390 window.
     Measured, not guessed - the rail's own scrollWidth was 380 in a 358 box, and 16 + 380 is 396. */
  .fd-doors .ex-railarrow{display:none}
  .fd-doors[data-col="c2"] .ex-colrun{grid-auto-columns:186px;gap:14px}
  .fd-doors[data-col="c2"] .ex-col{width:186px}
  .fd-doors[data-col="c2"] .ex-col .big{font-size:17px}
}

@media (max-width:760px){
  .fd-doors[data-col="c2"] .ex-col .big{font-size:20px}
}


/* =====================================================================
   THE DAILY, AS A CLOCK  (?sum=k, and what the page renders)
   =====================================================================
   Jack chose D2 off /design-2026/daily-deck/ on 28 September, against six other shapes. His brief for
   the section, the same day: "this whole section in red here should only vbe about the daily - it
   should have the cover images but then it should just have a countdown a sign up form to sign up -
   then a prompt to open the latest edition, so nice and clean and simple."

   THE COUNTDOWN IS THE DESIGN. It is set at the size a masthead would be, in Larken, with tabular
   figures - without those the line shivers once a second as the digits change width, and at 104px it
   would shiver visibly. Everything else on the plate is small so that it can be large: the covers are
   150 wide, the form is the page's own .fp-join at its normal size, and the way in is one line.

   NO BADGE, NO COLOUR, NO URGENCY. A clock on a wall is not urgent, it is just true, and that is the
   whole reason this shape can carry a running number without the page turning into a countdown sale.
   --------------------------------------------------------------------- */
/* 56 below, because there is 56 above: the doors row ends at 1479 and this begins at 1535, and
   measured on the page this section ran straight into the dark weather band with nothing between them
   at all. The two gaps are the same number on purpose, so the clock sits in its own room rather than
   leaning on the band under it. */
.fp-clock{text-align:center;position:relative}

/* the kicker and the number, which are .fp-next's own <u> and <b>. The component is not changed; the
   two elements it has always drawn are simply given this plate's sizes. */
.fp-clock .fp-next{margin:0 0 30px}
.fp-clock .fp-next u{margin-bottom:18px;font-size:11px;letter-spacing:.24em;color:var(--ink-55)}
.fp-clock .fp-next b{
  font:400 min(clamp(52px,6.6vw,104px), 28px + (clamp(52px,6.6vw,104px) - 28px) * 0.6)/.94 var(--face);letter-spacing:.01em;
  font-variant-numeric:tabular-nums}

/* ---- the three editions under it ----
   Evidence that there is a run of these rather than one decorated object. Photographs, not dressed
   covers: the masthead is already said by the clock above them, and three mastheads in a row would be
   the page saying its own name four times. */
.fp-ckrow{display:flex;gap:20px;justify-content:center;margin:0 0 30px}
.fp-ckc{position:relative;display:block;width:150px;aspect-ratio:3/4;overflow:hidden;
  background:var(--oat)}
.fp-ckc img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.8,.24,1)}
.fp-ckc:hover img{transform:scale(1.05)}
/* the picture says nothing on its own, so the link carries the words where a reader with a screen
   reader will meet them and a sighted reader will not */
.fp-ckhid{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- the form and the way in ---- */
.fp-ckfoot{display:flex;flex-direction:column;align-items:center;gap:6px}
/* .fp-join is ranged left everywhere else on the page; here it is the centre of a centred plate, so
   its label, its field and its answer all take the middle. Every one of them is set, not just the
   label: a component rule half-overridden wins the other half. */
.fp-clock .fp-join{margin:0;text-align:center}
/* THE LABEL IS NOT THE KICKER. Both are .fp-next's <u>, so the 11px and .24em this plate gives the
   countdown's kicker were landing on the sign-up label too - and the label is 45 characters, so it broke
   onto three lines on a phone. Jack, 28 September: "take awayt he line braek". At 9px and .14em those 45
   characters are about 284px, inside the 358 a 390 screen leaves, so it is one line at every width. The
   words are his own from 22 September and are not touched. */
.fp-clock .fp-join u{margin-bottom:10px;color:var(--ink-55);
  font-size:9px;letter-spacing:.14em}
.fp-clock .fp-join span{margin:0 auto}
.fp-clock .fp-join em{text-align:center}
.fp-ckgo{display:inline-block;margin-top:16px;color:var(--ink);
  font:500 13px/1 var(--sans);letter-spacing:.06em;text-decoration:none;
  border-bottom:1px solid var(--ink-35);padding-bottom:4px}
.fp-ckgo:hover{border-bottom-color:var(--ink)}

/* A PHONE. 3 x 150 and two 20px gaps is 490 against the 342 a 390 screen leaves, so the covers come
   down to a third of the row each and the clock comes down with them - clamp already does most of
   that, but 52px against a 342 column is still 8 characters at 6.5px of tracking. */
@media (max-width:760px){
  .fp-ckrow{gap:10px}
  .fp-ckc{width:calc((100% - 20px) / 3)}
  .fp-clock .fp-next b{font-size:min(clamp(34px,11vw,52px), 28px + (clamp(34px,11vw,52px) - 28px) * 0.6)}
  .fp-clock .fp-next u{letter-spacing:.18em}
}


/* =====================================================================
   THE FEED SAYS WHAT IT IS, AND WHERE IT ENDS
   =====================================================================
   Jack, 28 September: "we now need some kind of heading for the feed saying something like the latest
   from hidden scotland or something introducing the feed,, and pagination still pending for this page".

   The heading rides the feed's own grid - it is an .fd-it in an .fd-row, so it needs no width, no left
   padding and no number of its own. All that is set here is how much room it takes and how it reads.
   --------------------------------------------------------------------- */
.fd-lead .fd-it{padding-top:calc(var(--fd-gap) / 2);padding-bottom:calc(var(--fd-gap) / 3)}
/* D4's grid is justify-items:start, so a grid child shrinks to its own text. The entries fill the 752
   column because their prose is long enough to; a two-word heading does not, and centring it inside its
   own 517px box centres it on nothing. Stretched, both take the column and the centring is the column's.
   Measured: the heading read 711-1228 against the entries' 711-1463. */
/* IT SPANS BOTH COLUMNS. In column 2 alone it sat on the entries' measure with nothing in the time
   column beside it, which centred it 135px right of the middle of the window and read as a heading that
   had drifted rather than one introducing anything. A lead for the whole feed takes the whole of the
   feed's width, so its centre is the page's centre and its left edge is the band's own. */
/* AND IT HAS TO OUTSCORE THE RULE IT IS ARGUING WITH. The column-2 rule is
   .h3-feed.d4 .fd-it > *:not(.fd-sky):not(.fd-at), and :not() carries the weight of what is inside it,
   so that is FIVE classes, not three. Two goes at this lost by counting wrong: .fd-lead .fd-it > * is
   three, .h3-feed.d4 .fd-lead .fd-it > * is four, and both times the heading stayed in column 2 while
   every other property in the rule applied perfectly - the hardest kind of fault to see, and the one the
   note further up this file was written about. Five classes ties it, and a tie is broken by order. */
/* THE LEAD IS NOT ON THE GRID AT ALL. Spanning both columns got it to 403-1463, because the two tracks
   and their gap come to 1,060 in an 1,100 column and the spare 40 sits on the right - so a centred line
   inside it was 27px left of the middle of the page. As a plain block it takes the whole 1,100: its left
   edge is 403, the same as the row of doors and the Daily above it, and its centre is the page's. */
/* AND IT DRAWS NO RULE UNDER ITSELF. .fd-row + .fd-row puts a hairline between every two entries, and
   making the lead an .fd-row meant the first real entry - the weather, which is nearly black - suddenly
   had a white line across the whole page at its top, directly under the Daily. Jack, 28 September:
   "i mean teh page break under Open this morning's edition". A heading and the thing it is introducing
   are one piece; the rule belongs between entries, not between an entry and its own heading. */
.fd-row.fd-lead + .fd-row{border-top:0}
/* AND THE BAND ABOVE THE FEED CLOSES WITHOUT ONE EITHER. .fd-band::after draws a hairline the full width
   of the page at the foot of the band, which was there to say a new section starts below - and with the
   Daily ending on paper and the feed now opening on paper, it read as a rule ruled across the page
   immediately under "Open this morning's edition". Jack pointed straight at it on 28 September.
   The heading does that job now: a section that names itself does not need a line to announce it. */
.fd-band.cv-eight::after{display:none}
.h3-feed.d4 .fd-row.fd-lead .fd-it{display:block}
/* AND THE WIDTH IS DECLARED, not left to auto. With the grid off, the heading still came back 518 wide -
   its own text - rather than the 1,100 a block child of a block should take, so it went on reading as a
   line that had drifted left. Measured rather than reasoned about: setting width:100% on it in the
   browser took it from 518 to 1,100 and put its centre on the page's. */
.fd-lead .fd-it > *{width:100%}
.fd-leadh{margin:0;font:400 min(clamp(28px,2.4vw,38px), 28px + (clamp(28px,2.4vw,38px) - 28px) * 0.6)/1.14 var(--face);letter-spacing:-.004em;
  color:var(--ink);text-align:center}
/* NO MEASURE ON IT, BECAUSE IT IS ONE LINE. Jack, 28 September: "pease remove the line break". Held to
   52 characters it broke as "...what has opened, and / what the week looks like", which is a wrap in the
   middle of a sentence that fits the column with room to spare - about 800px of type in 1,100. It still
   wraps on a narrow screen, where wrapping is the right answer. */
.fd-leadp{margin:12px auto 0;font:400 17px/1.6 var(--serif);color:var(--ink-55);text-align:center}
.fd-leadp a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--ink-35);padding-bottom:2px}
.fd-leadp a:hover{border-bottom-color:var(--ink)}

/* ---- the foot of the feed ----
   It was an empty div with no rules, so the feed stopped without saying whether that was the end of the
   day or the end of what had loaded. Now it says which. The line while there is more is quiet on
   purpose: the next twelve arrive before the reader reaches it, so it is a marker rather than a wait,
   and anything louder would be advertising a delay that is not there. */
.fd-more{display:flex;justify-content:center;padding:54px 24px 64px;background:var(--paper)}
.fd-more span{display:inline-flex;align-items:center;gap:10px;
  font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-35)}
/* three dots that fill in turn, which is the whole of the loading state */
.fd-more i{display:inline-block;width:22px;height:3px;
  background:
    radial-gradient(circle 1.5px at 1.5px 1.5px, var(--ink-35) 99%, transparent 0) 0 0/8px 3px repeat-x;
  animation:fd-dots 1.2s steps(3) infinite}
@keyframes fd-dots{from{width:4px}to{width:26px}}
.fd-more.done span{color:var(--ink-35)}
.fd-more.done{padding-top:64px;border-top:1px solid var(--stone)}
@media (prefers-reduced-motion:reduce){.fd-more i{animation:none;width:22px}}

@media (max-width:1000px){
  .fd-more{padding:40px 20px 48px}
  .fd-leadp{font-size:16px}
}


/* =====================================================================
   L2: THIS MORNING'S PHOTOGRAPH AS THE DAILY'S GROUND, UNDER A PAPER WASH
   =====================================================================
   Jack chose it off /design-2026/daily-ground/ on 28 September, from six ways of making the picture
   light enough to keep ink type over it: "i like the image behind G9 but can we try that on a lighter
   background eg H1", then "make L2 live".

   A WASH, NOT A FADE. Fading the picture takes every value down evenly and flattens it; paper laid over
   it at 88 per cent leaves the darks registering, so the rock still reads as rock at the same overall
   lightness. Same brightness, more photograph. The two look identical described and nothing alike on
   the page, which is why they were both on the sheet.

   AND THE TYPE IS UNCHANGED, which is the entire reason for asking for it lighter. G9 had to darken the
   photograph to .42 and put a black gradient over it, because white type needs somewhere dark to sit.
   Nothing here is set against the ground: the clock is still 104px of Larken in ink, the kicker is still
   ink-55, the field is still white with an ink frame. If any of those ever has to change to survive the
   picture, the wash is too weak, not the type wrong.
   --------------------------------------------------------------------- */
.fp-clock{padding:64px 0;margin:0}

/* THE PICTURE ESCAPES THE COLUMN. .fd-band.cv-eight holds this to 1,100, and a ground that stops at the
   column is a panel rather than a section. left:calc(50% - 50vw);width:100vw is the page's own way out
   of a column - it is what .fd-band::after used for its hairline - rather than a new device. */
.fp-ckbg{position:absolute;left:calc(50% - 50vw);width:100vw;top:0;bottom:0;z-index:0;
  display:block;overflow:hidden;background:var(--paper)}
.fp-ckbg img{width:100%;height:100%;object-fit:cover}
/* the wash itself, on the picture's own box so it bleeds with it */
.fp-ckbg::after{content:'';position:absolute;inset:0;background:var(--paper);opacity:.88}

/* everything else comes forward. The rule names the children rather than setting z-index on each one,
   so an element added to this shape later cannot land behind the photograph by being forgotten. */
.fp-clock > *:not(.fp-ckbg){position:relative;z-index:1}

@media (max-width:760px){
  .fp-clock{padding:44px 0}
}


/* =====================================================================
   THE DOORS ROW'S ARROWS
   =====================================================================
   Jack, 28 September: "can you fix the arrows on the aWhat are you looking for today section".

   Explore's arrows are right for Explore and wrong here, and in three ways at once. Everything below is
   measured off the page rather than adjusted by eye.
   --------------------------------------------------------------------- */

/* THEY ARE DRAWN. .ex-railarrow is opacity:0 until .ex-rail:hover, which works on Explore where the rail
   is the whole page. Here the row is one band among several and a control nobody can see is a control
   nobody uses. */
.fd-doors .ex-railarrow{opacity:1}

/* CENTRED BY CONSTRUCTION. top:calc(50% - 30px) was worked out against Explore's 385px card. Ours is 268,
   so the arrows sat 21px high - arrow centre 1340 against card centre 1361, read off the page. A translate
   cannot be wrong at any card height, which is the point of using one. */
.fd-doors .ex-railarrow{top:50%;transform:translateY(-50%)}
/* and the run keeps no room for a scrollbar it hides. .ex-run carries 4px of bottom padding for one;
   scrollbar-width is none and ::-webkit-scrollbar is display:none, so the 4px is only there to put the
   arrows two pixels below the middle of the card. Measured with transitions killed, because the cards
   carry a reveal that leaves them translated 10px down and at opacity 0 until it fires - which made the
   first two readings of this wrong by exactly that 10. */
.fd-doors .ex-colrun{padding-bottom:0}

/* OUTSIDE THE CARDS. At -22 the left arrow ran 381-415 against a column starting at 403, so it lay across
   twelve pixels of the first card, and the same at the other end. At 1920 there is 400px of empty page
   either side; at -46 they stand clear with twelve pixels of air. */
.fd-doors .ex-railarrow.l{left:-46px}
.fd-doors .ex-railarrow.r{right:-46px}

/* AN ARROW THAT IS DRAWN IS AN ARROW THAT WORKS. At the start the left one does nothing and at the end
   the right one does nothing, and both looked exactly as they do when they work. */
.fd-doors .ex-rail[data-at="start"] .ex-railarrow.l,
.fd-doors .ex-rail[data-at="end"] .ex-railarrow.r{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .fd-doors .ex-railarrow{transition:none}
}


/* ---- the Daily's own cover, above the clock (shape K) ----
   Jack, 28 September: "ABOVE Tomorrow's edition in CENTERED we should put the cover imge of the daily we
   designed". .dl is an inline-level object, so it is the link that does the centring rather than the
   cover carrying a margin of its own - which keeps every number Jack tuned on it on 21 September exactly
   where he left it. */
.fp-ckcover{display:block;width:fit-content;margin:0 auto 34px;text-decoration:none}
.fp-ckcover .dl{transition:transform .5s cubic-bezier(.22,.8,.24,1)}
.fp-ckcover:hover .dl{transform:translateY(-3px)}

@media (max-width:760px){
  .fp-ckcover{margin-bottom:26px}
}


/* =====================================================================
   S1: THE DAILY AS TWO EQUAL HALVES
   =====================================================================
   Jack chose it off /design-2026/daily-split/ on 28 September: "i think E1 side by side but maybe more
   split? seems to be too far over the left", then "try S1".

   THE GRID IS 1fr 1fr, NOT auto 1fr. That is the whole fix. With `auto 1fr` the cover took the 340 it
   needed and the words took the other 704 - and then both ranged their contents left, so the words put
   340px of type in a 704px column and 300px of the page sat empty after them. Two equal halves with the
   cover ranged right and the words ranged left puts the meeting point at the middle of the column and
   the emptiness at the outside edges, where it reads as margin.
   --------------------------------------------------------------------- */
.fp-cksplit{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  width:min(100%,1100px);margin:0 auto}

/* the cover holds the inside edge of its half; the words hold the inside edge of theirs */
.fp-ckcover{justify-self:end;width:fit-content;margin:0;text-decoration:none}
.fp-ckside{justify-self:start;min-width:0}

/* EVERY CENTRING PROPERTY IS RESET, not just text-align. This shape was centred in six places and a
   component rule half-overridden wins the other half - the fault that has caught this site four times.
   The six: the plate, the countdown's kicker, its figure, the sign-up's label, its field, and its
   answer. Each one is named rather than left to inherit. */
.fp-clock{text-align:left}
.fp-clock .fp-next{text-align:left}
.fp-clock .fp-join{text-align:left}
.fp-clock .fp-join span{margin:0}
.fp-clock .fp-join em{text-align:left}
.fp-clock .fp-join u{max-width:none;margin-left:0;margin-right:0}
.fp-ckside .fp-next{margin:0 0 30px}
.fp-ckside .fp-join u{margin-bottom:10px}
.fp-ckgo{margin-top:18px}

/* A PHONE HAS NO TWO HALVES. Below 900 the cover goes above the words and both range left, which is the
   page's own axis - the doors row and every feed entry start there too. */
@media (max-width:900px){
  .fp-cksplit{grid-template-columns:1fr;gap:30px;justify-items:start}
  .fp-ckcover{justify-self:start}
  .fp-ckcover .dl{--dl-w:min(340px,72vw)}
}

/* ===========================================================================
   THE BOOKMARK, WHOLE (13 October 2026). Jack: "the bookmark icon is also cut off half of it". The mark was a box's
   top and sides with the notch clipped out of its foot, so the two strokes of the notch were never drawn and it read
   as a bracket. Now drawn as a bookmark: an outline, filled once it is kept. At every width, since it was wrong at
   every width.
   =========================================================================== */
.fd-keep i{width:16px;height:18px;border:0;border-radius:0;clip-path:none;background:rgba(255,255,255,.95);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4.5L6 21z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4.5L6 21z'/%3E%3C/svg%3E") center/contain no-repeat}
.fd-keep.on i{background:#fff;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4.5L6 21z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4.5L6 21z'/%3E%3C/svg%3E")}

/* the dots under a row of cards: a page-wide .sm (padding 48px 0 52px) drew the small one as a 100px bar */
.fd-dots i{padding:0}

/* ===========================================================================
   THE FEED ON A PHONE, SIMPLER (13 October 2026). Jack, of the Ballater post: "it says Just added then straight under
   says added today, it should just say 'just added' title description image/video. then on mobile delete the find out
   more and line. and make the love this and recommend better positioned. Do this to all the feed widgets to make them
   nicer. Note this is just for mobile"; and of "Today calls for": "simplify that and make the cards a little bigger".
   So, at 700px and under, on every band:
     - one word over the title: the band's own (.fd-at), without the line under it (.fd-at em: "Added today",
       "38 minutes ago", "For today's weather") and without a second kicker over it (.fd-kick, where .fd-at is there);
     - no "Find out more", "See them all" and the line after it (.fd-go): the whole band is the way in;
     - less air over a band and none wasted under it;
     - Love this and Recommend on one line straight under the band, Love this on the left edge of the picture and
       Recommend on its right, at the band's own 20px;
     - the cards in a row of places one and a peek wide, where they were 220px.
   The large screen is untouched.
   =========================================================================== */
@media (max-width:700px){
  .fd-row .fd-at em{display:none}
  .fd-row .fd-it:has(> .fd-at) > .fd-kick{display:none}
  .fd-row .fd-go{display:none}
  .fd-row > .fd-it{padding-top:56px;padding-bottom:22px}
  .fd-row .shr-under{margin:0;padding:0 20px 44px}
  .fd-row .shr-under .shr{flex-wrap:wrap;justify-content:space-between;gap:0 12px;font-size:11px;letter-spacing:.1em}
  .fd-row .shr-under .shr > button{min-height:44px;gap:8px}
  .fd-row .shr-under .shr svg{width:20px;height:20px}
  .fd-row .fd-coll .fd-card{flex:0 0 calc(100% - 52px)}
}

/* a quiz answer long enough to grow upward never reaches its letter, pinned at the box's top (the site walk, 13 October 2026:
   "Design more than 500 golf courses" under the A on a phone): room above the words for the letter itself */
#hm-feed .fd-row .fd-opt{padding-top:58px}
@media (max-width:640px){#hm-feed .fd-row .fd-opt{padding-top:50px}}

/* THE PACKING LIST ON A DARK BAND (Jack, 13 October 2026, of October's list on forest: "cant read this text"): its words
   took the band's ink, dark grey on dark green; on a dark band they are its paper colour. And space between the lines,
   never a rule (the house style: space divides, never hairlines). */
.fd-row.dark .fd-list span{color:rgba(255,255,247,.92)}
.fd-list span,.fd-row:not(.dark) .fd-list span{border-bottom:0;padding:7px 0}

/* A REGION'S OPENING ON A PHONE: THE NAME FIRST (Jack, 14 October 2026, of /region/lochaber on his phone: "for the
   region pages on mobile, can we switch around so the title goes at the top"). The stacked rows above put the film
   first and the words under it, so a phone opened on a framed photograph of rocks captioned "Small Isles" and the
   region's name came after a full screen. Only the region pages wear this opening now (the sections open on the live
   hero), and they alone carry data-theme on it: the welcome first, then the film, then the line of the day. */
@media(max-width:1080px){
  .cv-split.cv-eight[data-theme] .cv-word{order:-2;padding:clamp(10px,2.4vh,22px) 0 0}
  .cv-split.cv-eight[data-theme] .cv-frame{order:0;margin-top:clamp(22px,3.6vh,34px)}
  .cv-split.cv-eight[data-theme] .cv-here{order:1;margin-top:18px}
}
@media(max-width:700px){
  .cv-split.cv-eight[data-theme]{padding-bottom:28px}
  .cv-split.cv-eight[data-theme] .hr-h1{font-size:min(clamp(38px,11vw,52px), 28px + (clamp(38px,11vw,52px) - 28px) * 0.6);line-height:1.04}
  .cv-split.cv-eight[data-theme] .cv-says{font-size:15px;line-height:1.5}
  .cv-split.cv-eight[data-theme] .cv-mount{aspect-ratio:4/3}
}
@media(max-width:700px){
  /* the foot line read "Lochaber — — 9° · Cloudy": the date and the hour are left out on a phone (the words above
     say the hour) and their dashes went with them */
  .cv-split.cv-eight[data-theme] .cv-here u,
  .cv-split.cv-eight[data-theme] .cv-here u + s{display:none}
  /* the arrows smaller and further in: two 52px red squares sat over a third of a 4:3 picture */
  .cv-split.cv-eight[data-theme] .cv-arr{width:40px;height:40px}
}
@media(max-width:700px){
  /* the strips stacked on a phone: the shade ran top to bottom and was lightest where a short strip sets its words, so
     "Food and drink" over the grey pier and "Shops and makers" over a lit shop all but vanished (the site walk, 14
     October 2026, on Jack's /region/lochaber). Shade from the left, under the words, and a soft edge to the letters */
  .lp-page .lp-w6 .lp-sp::after{background:linear-gradient(90deg,rgba(65,64,66,.66) 0%,rgba(65,64,66,.42) 55%,rgba(65,64,66,.18) 100%)}
  .lp-page .lp-w6 .lp-sp .t,.lp-page .lp-w6 .lp-sp .d{text-shadow:0 1px 12px rgba(65,64,66,.45)}
}
@media(max-width:700px){
  /* A REGION PAGE'S POSTS ON A PHONE (Jack, 14 October 2026: "improve this design for mobile as much as possible").
     Centred, a ten-line paragraph (Steall Falls, the Stables Cafe, Did you know) starts each line somewhere new; set
     left, on the column's edge with the picture under it. Scoped to the region pages by their opening. */
  body:has(.cv-split.cv-eight[data-theme]) .h3-feed .fd-it .fd-at,
  body:has(.cv-split.cv-eight[data-theme]) .h3-feed .fd-it .fd-h,
  body:has(.cv-split.cv-eight[data-theme]) .h3-feed .fd-it .fd-said{text-align:left;margin-left:0;margin-right:0}
  /* a card's name in two lines, never cut: "The old road at Kingshouse and a p..." */
  body:has(.cv-split.cv-eight[data-theme]) .fd-card b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden;text-overflow:clip}
}
@media(max-width:1080px){
  /* a tablet too: at 4:5 the film stood 830px tall under the name, a screen of picture before anything to read */
  .cv-split.cv-eight[data-theme] .cv-mount{aspect-ratio:4/3}
}