/* 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 .25s ease, border-color .25s ease;
  }
  .folio:hover{ transform:translateY(-3px); border-color:var(--gold); }
  .folio::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.6) 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. */
  .more-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .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 six now carry a film (video.cover-video). The .ph-mark rules above are
     kept because an empty folio still uses them, and because a seventh tile
     would start life as a placeholder the same way these six did. */
  .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); }