/* The tile grid, lifted verbatim out of index.html so the homepage and the
   pages under /more/ read the same rules rather than two copies of them.
   It was only ever inline, which meant a tile could not be used anywhere
   else - see 'a site-wide CSS change will miss the homepage'.

   One .folio:hover serves every grid on the site: 3px lift, gold border,
   .25s. Add a grid, not a second gesture. */

  /* ---------- folio grid ---------- */
  .folios{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .folio{
    position:relative; aspect-ratio:1/1; border-radius:8px; overflow:hidden;
    display:flex; align-items:flex-end; padding:22px;
    color:#fff; isolation:isolate; border:1px solid var(--hairline);
    transition:transform var(--dur-base) ease, border-color var(--dur-base) ease;
  }
  .folio:hover{ transform:translateY(-3px); border-color:var(--gold); }
  /* The scrim the label is read against. It was 60% black from 30% down, which
     is enough over a dark photograph and not enough over bright artwork. At
     1% of pixels the name measured 3.13:1 over the Dalgety After Dark sleeve,
     against a 4.5:1 standard - and measuring the homepage covers with the same
     test found Photography at 3.74 and Scenery & Nature at 4.09, both already
     failing before any of this. 82% from 25% down puts all three over 5:1 and
     costs the tiles that were fine a slightly deeper bottom edge. */
  .folio::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg,rgba(0,0,0,0) 25%,rgba(0,0,0,.82) 100%);
  }
  .folio .f-cat{ display:block; font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-.01em; }
  .folio .f-go{ display:block; font-size:13px; color:rgba(255,255,255,.82); margin-top:4px; }
  .folio .f-go .arrow{ color:var(--gold); }
  .folio.f1{ background:linear-gradient(145deg,#2a2622,#4a3d2c); }
  .folio.f2{ background:linear-gradient(145deg,#20242b,#3c4654); }
  .folio.f3{ background:linear-gradient(145deg,#2b2530,#4a3b50); }
  .folio.f4{ background:linear-gradient(145deg,#231f1f,#4a2f31); }
  .folio.f5{ background:linear-gradient(145deg,#1f2622,#324a3c); }
  .folio.f6{ background:linear-gradient(145deg,#26251f,#4a472c); }
  .folio.f7{ background:linear-gradient(145deg,#1f2528,#2f4650); }
  .folio.f8{ background:linear-gradient(145deg,#282022,#4a3340); }
  .folio.f9{ background:linear-gradient(145deg,#22261f,#3c4a2e); }
  .folio .ph-mark{ position:absolute; inset:0; z-index:-1; display:grid; place-items:center; opacity:.12; }
  .folio .ph-mark img{ width:58%; }
  .folio .cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
  .folio .cover-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }

  /* ---------- and there's more ---------- */
  /* Deliberately the same .folio tile: same 1:1 square, same 3px lift, same
     gold border on hover, same scrim over the picture. Only the grid name and
     the second line of the label are new. A second tile that merely looked
     like .folio would drift away from it the first time either one is touched. */
  /* Two columns, not three. Content Creators and General Knowledge became
     projects on 13 Sep 2026, leaving four tiles — and four across three
     columns is a full row plus one tile sitting on its own. */
  .more-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }

  /* .grid-folio: the same tile as .folios, at the same size. The More tiles
     were 526px against the folios' 344px and read as a louder, separate grid;
     Ashley asked for them to match on 18 Sep 2026 - the homepage first, then
     /more/music/.

     A modifier rather than a page selector, because two pages wanted it and a
     third may. The width is derived from the folio track rather than typed as
     344px, so the two stay equal at every viewport: (100% - the folios' two
     20px gaps) / 3 IS a .folios column - and three of them plus the gaps come
     to exactly the wrap, which is why this is the same grid as .folios.

     .grid-2up is for a block of four. Four tiles across three columns is a
     full row plus one sitting alone, which is the reason this grid was two
     columns in the first place; two columns of folio-width tiles, centred,
     keeps it balanced. Six divide three ways with nothing left over, so
     /more/music/ takes the plain three-across and reads exactly as the folios
     do - two full rows.

     Opted in by: index.html (four tiles, 2up) and more/music/ (six). NOT the
     General Knowledge page, whose six placeholder tiles are its own main
     content at the larger size and which nobody asked to change.

     The breakpoints are repeated because two classes outrank the one-class
     .more-grid in the shared media queries below, whatever the source order.
     Without them these tiles would keep the three-column width while the
     folios went to two. Each simply matches what .folios does at that width. */
  .more-grid.grid-folio{
    grid-template-columns:repeat(3, minmax(0, calc((100% - 40px) / 3)));
    justify-content:center;
  }
  .more-grid.grid-folio.grid-2up{
    grid-template-columns:repeat(2, minmax(0, calc((100% - 40px) / 3)));
  }
  @media (max-width:860px){
    .more-grid.grid-folio, .more-grid.grid-folio.grid-2up{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:560px){
    .more-grid.grid-folio, .more-grid.grid-folio.grid-2up{ grid-template-columns:1fr; }
  }
  .folio .f-sub{
    display:block; font-family:var(--display); font-size:13px; font-weight:400;
    letter-spacing:.06em; text-transform:uppercase;
    color:rgba(255,255,255,.72); margin-top:5px;
  }
  /* All four carry a film (video.cover-video). The .ph-mark rules above are
     kept because an empty folio still uses them, and because a new tile would
     start life as a placeholder the way these did. m5 and m6 are kept: their
     grounds cost nothing and a fifth tile should not have to reinvent one. */
  .folio.m1{ background:linear-gradient(145deg,#241f1d,#463527); }
  .folio.m2{ background:linear-gradient(145deg,#1e2127,#39434f); }
  .folio.m3{ background:linear-gradient(145deg,#241d28,#443152); }
  .folio.m4{ background:linear-gradient(145deg,#1c2426,#2e4a4a); }
  .folio.m5{ background:linear-gradient(145deg,#251e1e,#4a3330); }
  .folio.m6{ background:linear-gradient(145deg,#1f2320,#35452f); }

/* The grids break together. Kept here rather than in a page's own responsive
   block, or a page linking this file would get the tiles and not the way they
   fold. */
@media (max-width:860px){
  .folios, .more-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .folios, .more-grid{ grid-template-columns:1fr; }
}

/* ---------- tile grounds for a standalone grid ---------- */
/* Six grounds for any grid that is not the folios or the More section. Those
   two keep their own because they appear together on the homepage; grids on
   separate pages are never seen side by side, so they share these rather than
   each page adding a set of its own. Same tile, same hover — only the ground
   differs. */
  .folio.t1{ background:linear-gradient(145deg,#1f1d26,#3b3350); }
  .folio.t2{ background:linear-gradient(145deg,#26201d,#4a3a2c); }
  .folio.t3{ background:linear-gradient(145deg,#1c2422,#2c4a42); }
  .folio.t4{ background:linear-gradient(145deg,#251e22,#4a3040); }
  .folio.t5{ background:linear-gradient(145deg,#1e2126,#36434f); }
  .folio.t6{ background:linear-gradient(145deg,#241f1f,#4a3330); }

/* A tile with nowhere to go yet. It is a <span>, not an <a>: an anchor with no
   href is not focusable and reads as a broken link to a screen reader, and a
   link to nowhere is worse than an honest placeholder. It still lifts and
   golds on hover so the grid can be judged before the links arrive. */
  .folio.pending{ cursor:default; }
  .folio.pending .f-go{ color:rgba(255,255,255,.55); }

/* The line under a grid that says where its tiles lead. */
  .grid-note{
    margin:clamp(22px,3vw,32px) 0 0; text-align:center;
    font-family:var(--display); font-weight:300; font-size:14px;
    letter-spacing:.02em; color:var(--muted);
  }
  .grid-note .mark{ color:var(--gold); }