/* ── The Photos page ──────────────────────────────────────────────
   Scoped to .bmp-photos, on the same terms as .bmp-oc: the homepage
   type rules live under .bmp-home and do not reach here, so this
   page states its own.

   The grid itself (.bmp-shotgrid) is deliberately not scoped — it is
   a component of the media system in visuals.css, and any page that
   wants a set of stills rather than a composed band should be able
   to ask for one.
   ───────────────────────────────────────────────────────────────── */

  .bmp-photos{display:block}
  .bmp-photos section{padding:clamp(72px,10vw,150px) 0}
  .bmp-photos-open{padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(38px,5vw,64px)}

  .bmp-photos h1{
    font-family:var(--bmp-display);font-weight:800;
    font-size:clamp(44px,9vw,120px);line-height:.92;letter-spacing:.005em;
    text-transform:uppercase;margin:0 0 24px;color:var(--bmp-white);
  }
  .bmp-photos h2{
    font-family:var(--bmp-display);font-weight:800;
    font-size:clamp(28px,4.4vw,54px);line-height:1.04;letter-spacing:.02em;
    text-transform:uppercase;margin:0 0 28px;color:var(--bmp-white);
  }

  .bmp-photos-line{
    font-family:var(--bmp-body);font-size:clamp(17px,2vw,24px);line-height:1.45;
    color:var(--bmp-muted);max-width:32ch;margin:0 0 30px;
  }

  /* The handle is the point of the page, so it is set as a thing you press
     rather than as a link inside a sentence. Gold on a hairline, and it keeps
     its contrast on hover instead of inverting — the page behind it is dark
     and an inverted pill would go dark-on-dark. */
  .bmp-photos-handle{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--bmp-display);font-weight:700;
    font-size:clamp(15px,1.7vw,19px);letter-spacing:.06em;
    color:var(--bmp-gold-1);text-decoration:none;
    padding:13px 22px;border:1px solid var(--bmp-gold-line);border-radius:999px;
    background:rgba(200,149,47,.06);
    transition:background .3s var(--bmp-ease),border-color .3s var(--bmp-ease);
  }
  .bmp-photos-handle:hover,
  .bmp-photos-handle:focus-visible{
    background:rgba(200,149,47,.14);border-color:var(--bmp-gold-2);
    color:var(--bmp-gold-1);
  }
  .bmp-photos-ig{display:inline-flex;width:20px;height:20px}
  .bmp-photos-ig svg{width:100%;height:100%}

  .bmp-photos-end{border-top:1px solid var(--bmp-line)}
  .bmp-photos-end .bmp-photos-line{max-width:34ch}

  .bmp-photos-alt{
    margin:26px 0 0;color:var(--bmp-muted-2);
    font-size:15px;line-height:1.6;
  }
  .bmp-photos-alt a{color:var(--bmp-gold-1);text-underline-offset:4px}

  /* ── The grid ──────────────────────────────────────────────────
     Square tiles, because the source is an Instagram account and a
     square is what those photographs were framed for. auto-fill
     rather than auto-fit: with three photographs published the row
     should stay three columns wide and stop, not stretch three
     stills across the whole viewport.
     ───────────────────────────────────────────────────────────── */
  .bmp-shotgrid{
    display:grid;gap:clamp(8px,1.1vw,16px);
    grid-template-columns:repeat(auto-fill,minmax(clamp(180px,24vw,300px),1fr));
    padding:0 clamp(8px,1.1vw,16px);
  }
  .bmp-shotgrid .bmp-shot{aspect-ratio:1/1}
  .bmp-shotgrid .bmp-shot-wide{grid-column:span 2;aspect-ratio:2/1}

  /* Below two columns a "wide" tile has nothing to be wide against, and
     spanning 2 of 2 makes it the only thing on its row for no reason. */
  @media (max-width:560px){
    .bmp-shotgrid{grid-template-columns:repeat(2,1fr)}
    .bmp-shotgrid .bmp-shot-wide{grid-column:span 2;aspect-ratio:16/9}
  }

  /* ── The two accounts ──────────────────────────────────────────
     The split is the whole proposition — stills on one, video on the
     other, from the same shoot — so the two are set side by side as
     equals rather than as one link and a footnote.
     ───────────────────────────────────────────────────────────── */
  .bmp-accounts{
    list-style:none;margin:0 0 6px;padding:0;
    display:grid;gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    max-width:660px;
  }
  .bmp-accounts a{
    display:flex;flex-direction:column;gap:4px;
    padding:18px 22px;text-decoration:none;
    border:1px solid var(--bmp-line-2);border-radius:14px;
    background:rgba(255,255,255,.015);
    transition:border-color .3s var(--bmp-ease),background .3s var(--bmp-ease);
  }
  .bmp-accounts a:hover,
  .bmp-accounts a:focus-visible{
    border-color:var(--bmp-gold-line);background:rgba(200,149,47,.07);
  }
  .bmp-accounts strong{
    font-family:var(--bmp-display);font-weight:700;
    font-size:clamp(15px,1.6vw,18px);letter-spacing:.01em;
    color:var(--bmp-gold-1);word-break:break-word;
  }
  .bmp-accounts span{
    font-size:13px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--bmp-muted-2);
  }