/* ═══════════════════════════════════════════════════════════════════════
   DRIFT — NEWSROOM
   Serves two templates: the index (src/newsroom/index.njk) and every post
   (_includes/layouts/post.njk). Loaded after interior.css, which supplies
   .sec, .sechead, .xhero and .xclose.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── PRESS CONTACT, IN THE HERO ───────────────────────────────────────── */
/* THE PICTURE PANEL IS NARROWER HERE than on the other .xhero pages, and
   that is what keeps the vessel on the screen (James, 28 Aug 2026: "make
   the image a bit smaller so that the MVY is within frame on a laptop").

   The reason is not the crop — .xhero-pic covers, but the file is square
   and so is the frame, so almost nothing is cut. It is the HEIGHT. The
   image has no fixed frame height on desktop: interior.css sizes it
   width:100%/height:100%, which against an auto row resolves to its own
   square ratio. So the hero is exactly as tall as the picture column is
   wide — at interior.css's 1.06fr that is 51.5vw, or 778px on a 1512px
   laptop, taller than the ~700px of viewport that laptop has. The bows and
   the caption sat below the fold.

   0.82fr puts the picture at 45vw, so the whole hero — and with it the
   whole vessel — lands inside a 700px viewport. Scoped to this page
   deliberately: /advantage and /markets share .xhero and were signed off at
   1.06fr with their own images. On very tall windows the 86vh min-height
   takes over again and the crop turns horizontal instead; the vessel has
   ~15% of clear water either side of it in the file, which absorbs it. */
@media(min-width:901px){
  .xhero{grid-template-columns:1fr .82fr}
}

.nr-contact{display:flex;align-items:center;gap:14px 16px;flex-wrap:wrap;margin-top:32px}
/* The note takes a row of its own rather than sitting beside the buttons.
   It rode alongside while there was one button; with two it is what gets
   squeezed, and a line that explains which door to use is not the part to
   let wrap into a two-word column. */
.nr-contact-note{flex:1 0 100%;margin-top:4px;
  font-size:.86rem;color:var(--fog);line-height:1.5;max-width:52ch}

/* ── THE ARCHIVE ──────────────────────────────────────────────────────────
   An <ol> because the order is the claim: this is what happened, most
   recent first. Reset the marker rather than the semantics — a screen
   reader should still hear a list. */
/* A GRID, not a stack. Thirty-one posts down one column is nine screens of
   scrolling to find out whether the thing you remember reading is here, and
   every entry looks the same on the way past. Three across with the image
   each post was published under turns that into recognition. */
.nr-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2vw,26px);
  grid-template-columns:repeat(3,1fr)}
@media(max-width:1080px){.nr-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.nr-list{grid-template-columns:1fr}}

/* Each card is one big link. The whole card is the target, not a "read more"
   at the end of it — a 3px-tall text link is the wrong hit area for the
   primary action on the page, on a phone especially. */
.nr-card{display:flex}
.nr-card>a{display:flex;flex-direction:column;width:100%;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  text-decoration:none;color:inherit;background:var(--hull);
  transition:border-color var(--t-base) var(--ease-out),
             transform var(--t-base) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out)}
.nr-card>a:hover{border-color:var(--line-signal);transform:translateY(-3px);
  box-shadow:0 20px 46px rgba(2,14,26,.4)}
.nr-card>a:focus-visible{outline:2px solid var(--current-lift);outline-offset:-2px}

/* 16/10 on every card whatever the file is. These came off Squarespace at
   ratios from 4/5 to 16/9, and a grid of mixed heights reads as a fault
   rather than as variety. flex:none so a long headline in the card next
   door cannot stretch this one's picture. */
.nr-shot{position:relative;margin:0;flex:none;aspect-ratio:16/10;overflow:hidden;
  background:var(--schematic);border-bottom:1px solid var(--line)}
.nr-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 900ms var(--ease-out)}
.nr-card>a:hover .nr-shot img{transform:scale(1.03)}

/* flex:1 so the Read link sits on the baseline across a row, however long
   the standfirst above it runs. */
.nr-body{flex:1;display:flex;flex-direction:column;gap:12px;
  padding:clamp(18px,2vw,24px)}
.nr-body .nr-more{margin-top:auto;padding-top:4px}
.nr-meta{display:flex;align-items:baseline;flex-wrap:wrap}

/* A post with no featured image is not a hole in the grid. It keeps the
   card and gives the space to the headline instead — four of these have
   only a 225-400px original on the old site, and a soft picture stretched
   across a card is worse than none. */
.nr-card.is-textonly>a{background:linear-gradient(180deg,var(--schematic),var(--hull))}
.nr-card.is-textonly .nr-body{padding-top:clamp(26px,3vw,34px)}

/* Date and kicker share a line and set in the label face, so the eye can
   skip the whole column when scanning for a headline. */
.nr-card time,.nr-kicker{font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase}
.nr-card time{color:var(--fog);font-variant-numeric:tabular-nums}
.nr-kicker{color:var(--current-lift);margin-left:16px}
.nr-card h3{margin:0;max-width:24ch;font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.25}
.nr-card p{margin:0;color:var(--mist);max-width:46ch;font-size:.85rem;line-height:1.5}
.nr-kicker{margin-left:12px}

.nr-more{font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.06em;
  color:var(--current-lift);display:inline-flex;align-items:center;gap:8px}
.nr-more .arw{transition:transform var(--t-fast) var(--ease-out)}
.nr-card>a:hover .nr-more .arw{transform:translateX(5px)}

/* ── COVERAGE STRIP ───────────────────────────────────────────────────────
   Same treatment as the homepage §08 logo row: held back at 35% so it reads
   as a credit list rather than as a wall of endorsements. */
/* The heading runs the full width of the wrap rather than interior.css's
   62ch measure (James, 28 Aug 2026). A measure is for reading paragraphs;
   this is four words set at display size, and at 62ch it broke after "has"
   for no reason the reader can see. It still wraps when the viewport is
   genuinely too narrow for it — this lifts the cap, it does not force a
   line. Only this section's head: the archive's "From DRIFT." is short
   enough that the measure never bites. */
#coverage .sechead{max-width:none}
.nr-logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,64px);
  padding-top:8px}
.nr-logos span{display:inline-flex;opacity:.35;transition:opacity var(--t-base) var(--ease-out)}
.nr-logos span:hover{opacity:.7}
.nr-logos img{height:clamp(22px,2.6vw,32px);width:auto;display:block}
/* The mastheads with no logo asset, named in prose beside the strip — same
   reasoning as homepage §08, which sets three of its five as wordmarks. */
.nr-alsoin{margin:28px 0 0;font-size:.92rem;color:var(--fog)}
.nr-alsoin b{color:var(--mist);font-weight:500}

/* ── AS FEATURED IN ───────────────────────────────────────────────────────
   The press wall carried over from /most-valuable-yacht when that page was
   retired. Twenty-three marks, the same list and order the old page had.

   LIGHT TILES, and the reasoning is the homepage's (home.css, .creds
   .reclogos) rather than a new decision: most of this artwork is black or
   dark-blue on transparent, drawn for a white page. Knocked out to white on
   the navy the whole row flattens into grey; on white each mark is itself,
   and the tile is what carries the row.

   Sunday Times and SailGP appear in the strip above as well. They are left
   in both: the strip above is the recognition list, this is the coverage
   list, and dropping them here would make the migrated list incomplete
   against the old page it came from.

   auto-fit + minmax rather than a fixed column count, so twenty-three tiles
   reflow at every width without a ladder of breakpoints. */
.nr-featured{margin-top:clamp(44px,6vh,72px)}
.nr-featured .eyebrow{margin-bottom:22px}
.nr-press{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.nr-press a,.nr-press span{display:grid;place-items:center;padding:14px 20px;
  min-height:62px;background:#fff;border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
.nr-press a:hover{border-color:var(--current-lift);
  box-shadow:0 8px 26px rgba(2,14,26,.45);transform:translateY(-1px)}
.nr-press a:focus-visible{outline:2px solid var(--current-lift);outline-offset:3px}
/* max-height AND max-width: a wide masthead shrinks to fit rather than
   overflowing, and a square roundel is not blown up past the cap height.

   EVERY FILE IN /press IS TRIMMED to its artwork. The Squarespace exports
   these came from carry enormous padding — several were under 20% ink — and
   a cap height applied to a mostly-empty frame renders the mark at a third
   of the size of its neighbours. Trimming is what makes one cap height
   correct for all of them. Trim anything added here the same way.

   Sunday Times, SailGP and Robb Report are the repo's existing logo-*.webp
   rather than a second copy in /press: those three were already trimmed for
   the homepage's row and are the same marks. */
.nr-press img{max-height:30px;max-width:100%;width:auto;height:auto;object-fit:contain}

/* ═══════════ A SINGLE POST ═══════════════════════════════════════════════
   The only page on the site meant to be read start to finish rather than
   scanned, so it is the only one with a real measure on its body copy. */
.nr-post{padding:clamp(120px,17vh,200px) 0 clamp(80px,12vh,140px)}
.nr-post .wrap{width:min(760px,90vw)}

.nr-head{padding-bottom:clamp(32px,5vh,52px);margin-bottom:clamp(32px,5vh,52px);
  border-bottom:1px solid var(--line)}
.nr-head .lede{margin-top:24px;color:var(--mist)}

.nr-meta{margin-top:28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fog)}
.nr-meta time{font-variant-numeric:tabular-nums}

/* ── PROSE ────────────────────────────────────────────────────────────────
   Markdown output, so these are element selectors rather than classes. Kept
   inside .nr-prose so nothing here can reach a hand-written page.

   `p` overrides the 52ch that .page-dense sets globally: 52ch is right for
   an evidence page where prose sits beside a figure, and too narrow for a
   column that IS the page. */
/* overflow-wrap, because a dozen of these posts carry a bare URL as the
   link TEXT — the press releases were written that way. A 460px unbroken
   string in a 351px column pushed the page to 480px wide on a 390px phone
   and let the whole site drag sideways; `break-word` is what lets the URL
   wrap mid-string instead. Nothing else here can produce an unbreakable
   run, so it is set once on the container. */
.nr-prose{font-size:clamp(1rem,1.5vw,1.12rem);font-weight:300;line-height:1.75;
  color:var(--mist);overflow-wrap:break-word}
.nr-prose>*+*{margin-top:1.25em}
.nr-prose p{max-width:none}
.nr-prose strong{color:var(--white);font-weight:500}
.nr-prose em{font-style:italic}

.nr-prose h2{font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:500;line-height:1.2;
  letter-spacing:-.02em;color:var(--white);margin-top:2em}
.nr-prose h3{font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:500;line-height:1.3;
  color:var(--white);margin-top:1.8em}

.nr-prose ul,.nr-prose ol{padding-left:1.3em}
.nr-prose li+li{margin-top:.5em}
.nr-prose li::marker{color:var(--current-lift)}

.nr-prose a{color:var(--current-lift);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line-signal)}
.nr-prose a:hover{text-decoration-color:var(--current-lift)}

.nr-prose blockquote{margin-left:0;padding-left:24px;border-left:2px solid var(--line-signal);
  color:var(--white)}

/* IMAGES. Until now .nr-prose said nothing about `img` at all, so a
   photograph rendered at its intrinsic size: the migrated files are
   1080–1600px on the long edge and the column is 760px, so every picture
   overflowed the measure and several ran taller than the viewport. A reader
   scrolling a post met one full screen of face after another.

   A picture here is capped by two different things at once. The COLUMN caps
   its width, and the VIEWPORT caps its height — that second one is the
   constraint the old markup was missing, because a square badge and a 3:4
   portrait both fill 760px of width happily and are still far too tall to
   take in at a glance. --nr-cap is that height ceiling: 620px, which is
   what puts a 3:4 portrait at a comfortable 465 inside the 760 measure,
   with a vh term that only bites on a window too short to show 620px of
   anything. Written as min() rather than a plain vh because a viewport
   fraction alone makes the same photograph a different size on every
   machine, and on a laptop shrinks it to a thumbnail.

   The obvious way to write that is max-width + max-height + width:auto, and
   it renders correctly — but it leaves the image with NO definite width, so
   the browser cannot work out how tall the box will be until the file
   lands, and reserves nothing. The lazy-loaded photographs then have zero
   height until they are scrolled to and the post shunts down the page as
   each one pops in, which is the exact fault the width/height attributes
   were added to prevent.

   So the width is resolved here instead, from three candidates: the column
   (100%), the file's own size (--w, so nothing is ever upscaled), and the
   width this image would need in order to stand --nr-cap tall (--ar is its
   aspect ratio). The smallest wins. --ar and --w are stamped on each image
   by the build; see nr_image_attrs in eleventy.config.js.

   With a definite width, `height:auto` plus the width/height attributes
   give the browser an exact height before a single byte of the image has
   arrived. Nothing moves as the post loads.

   The upshot is one consistent shape: landscape fills the measure, and
   anything squarer than about 5:4 is centred at a height the eye can take
   in whole. */
.nr-prose{--nr-cap:min(620px,78vh)}

/* THE BODY ARRIVES FASTER THAN EVERYTHING ELSE ON THE SITE, and this is the
   one place that is right. The global reveal is a 34px rise over 1s, tuned
   for sections of a scrolling landing page that the reader meets one at a
   time. The whole of a post's prose is a SINGLE reveal element, and it is
   the thing the reader came for: at the shared timing the article you just
   clicked spends 280ms of delay plus a second of fade before it is properly
   legible, which reads as the page still loading long after it has loaded.

   Shorter, and a shorter distance to travel — enough that the body still
   arrives rather than snapping, without making the reader wait to read. The
   header above it keeps the site's timing, so the page still opens the way
   every other page does. */
.js-reveal .nr-prose[data-reveal]{transform:translateY(16px);
  transition-duration:420ms,420ms}
.nr-prose img{display:block;margin-inline:auto;
  width:min(100%,var(--w,100%),calc(var(--nr-cap) * var(--ar,1)));height:auto;
  border-radius:var(--r-md);background:var(--schematic)}

/* Air around a photograph, which the 1.25em flow spacing does not give it.
   The class is set on the wrapping paragraph in eleventy.config.js rather
   than matched with :has() here, for the same reason the caption class is:
   the token stream can tell an image paragraph from a paragraph that merely
   contains an image, and a stylesheet cannot.

   Asymmetric on purpose — a caption belongs to the picture above it, so the
   gap below closes up when one follows. See .nr-cap. */
.nr-prose .nr-fig{margin-top:2.25em}
.nr-prose .nr-fig + *{margin-top:2.25em}
.nr-prose .nr-fig + .nr-cap{margin-top:.85em}

/* ── A RUN OF PHOTOGRAPHS ────────────────────────────────────────────────
   Two or more pictures with no text between them are grouped into one
   .nr-gallery by the build (see nr_gallery in eleventy.config.js) and shown
   side by side instead of stacked. Eight photographs down a 760px column is
   a lot of scrolling for a set the reader would rather take in at once.

   NOTHING IS CROPPED. The obvious way to build a tidy grid is one fixed
   aspect-ratio per cell with object-fit:cover, and it is wrong for this
   material: these are press photographs of identified people, and a centre
   crop to landscape takes the top off a head in the portrait ones. Instead
   each picture keeps its own shape and is capped to a shared HEIGHT, which
   is what makes a row of mixed portraits and squares sit together — they
   line up on their centres and end up close to the same visual weight.

   Same three-candidate width as a full-width picture above, for the same
   reason (the browser needs a definite width to reserve the space before
   the file lands) — only the height cap is smaller, since a gallery cell is
   about half the column. */
.nr-gallery{--nr-cap:min(380px,48vh);
  margin-top:2.25em;display:grid;gap:14px;align-items:center;justify-items:center;
  grid-template-columns:repeat(2,1fr)}
.nr-gallery + *{margin-top:2.25em}

/* The paragraph wrapper is now a grid cell, so its own flow margin has to
   go — .nr-fig's 2.25em would otherwise push every row apart twice. */
.nr-prose .nr-gallery .nr-fig{margin:0;width:100%;display:flex;justify-content:center}

/* An odd last picture spans the full width rather than sitting in a
   half-empty row, which reads as the set ending rather than as a gap. It
   keeps the gallery's smaller height cap, so it does not suddenly become
   the biggest image on the page. */
.nr-gallery .nr-fig:last-child:nth-child(odd){grid-column:1/-1}

/* A set of five or more is denser — three across on a full-width column,
   dropping to two when there is no longer room. auto-fit rather than a
   count, so the breakpoint is the available width rather than a guess. */
.nr-gallery[data-figures="5"],.nr-gallery[data-figures="6"],
.nr-gallery[data-figures="7"],.nr-gallery[data-figures="8"],
.nr-gallery[data-figures="9"]{--nr-cap:min(290px,36vh);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* One column below the point where two would be postage stamps. The cap
   goes back up to the full-width value, because at one per row these are
   ordinary pictures again rather than a grid. */
@media(max-width:620px){
  .nr-gallery,.nr-gallery[data-figures]{--nr-cap:min(620px,78vh);
    grid-template-columns:1fr;gap:18px}
}

/* CAPTIONS. The old site carried a caption under several news photographs —
   who is in the picture, and which side they are standing on. Markdown has
   no figcaption, so a caption is authored as an italic paragraph directly
   after the image and picked out by the adjacent sibling selector. Nothing
   else in a post puts a wholly-italic paragraph straight after a picture,
   so this cannot catch body text by accident.

   The .nr-cap class is applied in eleventy.config.js, not matched here: CSS
   cannot tell a caption from a paragraph that merely STARTS in italics, and
   one post's lede does exactly that. See the note beside the rule there. */
.nr-prose .nr-cap{margin-top:.85em;font-size:.86rem;line-height:1.5;color:var(--fog)}
.nr-prose .nr-cap em{font-style:normal}

/* The boilerplate rule before "Media enquiries". A markdown `---`. */
.nr-prose hr{border:0;border-top:1px solid var(--line);margin-top:2.5em}

.nr-close{margin-top:clamp(48px,8vh,80px);padding-top:clamp(32px,5vh,48px);
  border-top:1px solid var(--line);display:flex;gap:16px;flex-wrap:wrap}

/* ── NARROW ───────────────────────────────────────────────────────────── */
@media(max-width:620px){
  .nr-card>a{padding:26px 0}
  .nr-list{border-top:0}
  .nr-kicker{margin-left:12px}
  .nr-post{padding-top:clamp(96px,14vh,140px)}
  .nr-close .btn{width:100%;justify-content:center}
  /* Same treatment the closing band already gets: two half-width buttons on
     a 375px screen leave the email address nowhere to break. */
  .nr-contact .btn{width:100%;justify-content:center}
}