/* ── Journal ───────────────────────────────────────────
     Two pages share this sheet:
       journal.html          — the index (numbered grid)
       article-vibe-with.html — a single entry (split page)
     Loaded AFTER css/style.css, which supplies the brand
     tokens (--red, --sun, --paper, --blue, --gloria), the
     reset, .glyph and .visually-hidden.

     The index and the entry both sit on brand red. The one
     exception is the entry's photo column, which sits on
     --sand: the whole piece is about NgON and VIBE WITH not
     matching, so the two halves of the page are allowed not
     to match either.
     No GSAP, no scroll library — both pages read with
     JavaScript switched off (the slider degrades to the
     first frame, the filters just stay on "all").
     ───────────────────────────────────────────────────── */

  :root{
    --sand: #c9c0ae;   /* the calm half of the split */
    --sand-ink: #33302b;
  }

  /* ── shared top row ──────────────────────────────────
     Logo hard left, section links spread across the rest,
     current section called out in full size. */
  .jr-nav{
    position:relative; z-index:20;
    display:flex; align-items:center; gap:20px;
    padding:22px 30px 0;
  }
  .jr-nav__home img{
    width:64px; border-radius:14px;
    box-shadow:0 8px 22px rgba(0,0,0,0.22);
    transform:rotate(-3deg);
    transition:transform .35s ease;
  }
  .jr-nav__home:hover img{ transform:rotate(0deg) scale(1.05); }
  .jr-nav__links{
    flex:1;
    display:flex; align-items:baseline; justify-content:space-around;
    gap:14px;
  }
  .jr-nav__links a{
    position:relative;
    padding-left:12px;
    font-size:13px; font-weight:600; letter-spacing:0.01em;
    opacity:0.9;
    transition:opacity .25s ease;
  }
  .jr-nav__links a::before{
    content:''; position:absolute; left:0; top:0.15em;
    width:5px; height:5px; background:var(--sun);
  }
  .jr-nav__links a:hover{ opacity:1; }
  .jr-nav__links a[aria-current="page"]{
    font-size:clamp(20px, 2.6vw, 30px);
    font-weight:700; letter-spacing:-0.02em;
    opacity:1;
  }
  .jr-nav__links a[aria-current="page"]::before{ top:0.55em; }

  /* ══ INDEX ═══════════════════════════════════════════ */
  .jr{
    background:var(--red); color:var(--paper);
    min-height:100vh;
    display:flex; flex-direction:column;
  }
  .jr__inner{ flex:1; padding:0 30px 90px; }

  /* the standfirst sits in the content column, not the
     sidebar column — same start line as the grid */
  .jr-intro{
    max-width:900px;
    margin:clamp(40px, 7vw, 84px) 0 clamp(44px, 6vw, 70px) 0;
    font-size:clamp(22px, 3.4vw, 40px);
    line-height:1.16; letter-spacing:-0.025em; font-weight:700;
  }
  .jr-intro em{
    font-style:normal; font-family:var(--gloria);
    font-weight:400; color:var(--sun);
    letter-spacing:0;
  }

  .jr-layout{
    display:grid;
    grid-template-columns:190px minmax(0, 1fr);
    gap:0 46px;
    align-items:start;
  }

  /* ── sidebar: search ────────────────────────────────── */
  .jr-side{ position:sticky; top:24px; }
  .jr-search label{
    display:block;
    font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
    font-weight:600; opacity:0.6; margin-bottom:8px;
  }
  .jr-search input{
    width:100%;
    background:none; border:none;
    border-bottom:1px solid rgba(250,247,238,0.35);
    padding:0 0 7px;
    color:var(--paper);
    font-family:inherit; font-size:15px; font-weight:500;
    outline:none;
    transition:border-color .25s ease;
  }
  .jr-search input::placeholder{ color:rgba(250,247,238,0.45); font-weight:400; }
  .jr-search input:focus{ border-bottom-color:var(--sun); }

  /* ── the numbered grid ──────────────────────────────── */
  /* Three across is the working width beside the sidebar — four only
     once the screen is wide enough that three would stretch the cards.
     The grid fills left-to-right, so a new entry takes the next slot
     without touching this rule. */
  .jr-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:44px 26px;
  }
  @media(min-width:1420px){
    .jr-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  }
  .jr-card{ display:block; }
  .jr-card[hidden]{ display:none; }
  .jr-card__frame{
    aspect-ratio:6 / 7;
    overflow:hidden;
    background:rgba(0,0,0,0.12);
    transition:opacity .3s ease;
  }
  .jr-card__frame img{
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .55s cubic-bezier(.2,.7,.3,1);
  }
  .jr-card:hover .jr-card__frame img{ transform:scale(1.045); }

  /* Pointing at one entry pulls the other photographs back to half
     strength, so the row reads as a single choice rather than eight
     equal ones. Only the frames dim — the titles stay legible, which
     is what keeps the grid scannable while the cursor sits still.
     :has() is the whole mechanism; a browser without it simply never
     dims anything, which is the same grid minus one flourish.
     Keyboard focus gets the same treatment as the cursor. */
  .jr-grid:has(.jr-card:hover) .jr-card:not(:hover) .jr-card__frame,
  .jr-grid:has(.jr-card:focus-visible) .jr-card:not(:focus-visible) .jr-card__frame{
    opacity:0.5;
  }
  .jr-card__title{
    position:relative;
    margin-top:12px; padding-left:12px;
    font-size:13.5px; font-weight:600; line-height:1.28;
    letter-spacing:0.005em;
  }
  .jr-card__title::before{
    content:''; position:absolute; left:0; top:0.32em;
    width:5px; height:5px; background:var(--sun);
    transition:background .25s ease;
  }
  .jr-card:hover .jr-card__title::before{ background:var(--paper); }
  .jr-card__meta{
    margin-top:5px; padding-left:12px;
    font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
    font-weight:500; opacity:0.55;
  }
  .jr-empty{
    grid-column:1 / -1;
    font-family:var(--gloria);
    color:var(--sun);
    font-size:clamp(17px, 2vw, 22px);
    padding:18px 0 40px;
  }

  /* ── index footer ───────────────────────────────────── */
  .jr-foot{
    border-top:1px solid rgba(250,247,238,0.22);
    margin:0 30px;
    padding:26px 0 34px;
    display:flex; flex-wrap:wrap; gap:10px 26px;
    align-items:baseline; justify-content:space-between;
    font-size:12px; font-weight:500;
  }
  .jr-foot__note{ font-family:var(--gloria); font-size:15px; color:var(--sun); padding-left:56px; }
  .jr-foot a{ text-decoration:underline; text-underline-offset:3px; }

  /* ══ ENTRY ═══════════════════════════════════════════ */
  .vw{
    background:var(--red); color:var(--paper);
    min-height:100vh;
    display:flex; flex-direction:column;
  }
  .vw__grid{
    flex:1;
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:0 56px;
    align-items:start;
    padding:clamp(30px, 5vw, 58px) 30px 40px;
  }

  /* ── left: the words ────────────────────────────────── */
  .vw__title{
    font-size:clamp(28px, 4vw, 46px);
    line-height:1.02; letter-spacing:-0.035em; font-weight:700;
    margin-bottom:14px;
  }
  .vw__sub{
    font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
    font-weight:600; color:var(--sun);
    margin-bottom:30px;
  }
  .vw__body{ max-width:46ch; }
  .vw__body p{
    font-size:15px; line-height:1.45; font-weight:500;
    margin-bottom:15px;
  }
  .vw__body p.vw-lede{
    font-size:clamp(17px, 1.9vw, 21px); line-height:1.32;
    font-weight:600; letter-spacing:-0.015em;
    margin-bottom:30px;
  }
  .vw__body h2{
    font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
    font-weight:700; color:var(--sun);
    margin:32px 0 12px;
  }
  .vw__body h2:first-child{ margin-top:0; }
  .vw__quote{
    margin:34px 0 0;
    padding-left:18px;
    border-left:3px solid var(--sun);
    font-family:var(--gloria);
    font-size:clamp(18px, 2.2vw, 25px); line-height:1.3;
    color:var(--sun);
  }
  .vw__credit{
    margin-top:34px;
    font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
    font-weight:500; opacity:0.6;
    display:flex; flex-wrap:wrap; gap:4px 16px;
  }

  /* ── right: the pictures, on the calm ground ────────── */
  .vw__gallery{ position:relative; }
  .vw-slider{
    position:relative;
    background:var(--sand);
    overflow:hidden;
  }
  .vw-slider__track{
    display:flex;
    transition:transform .6s cubic-bezier(.25,.8,.3,1);
  }
  .vw-slider__slide{
    flex:0 0 100%;
    aspect-ratio:9 / 10;
  }
  /* aspect-ratio alone derives the frame's height from its own width,
     so a wider window made the page TALLER and pushed the footer off
     screen. The cap re-points that height at the viewport: the frame
     keeps its 9/10 shape until there is no room for it, then stops
     growing and lets object-fit crop instead. 322px is the chrome
     around it — nav, the grid's padding, the caption and the footer. */
  @media(min-width:861px){
    .vw-slider__slide{ max-height:calc(100dvh - 322px); }
  }
  .vw-slider__slide img{
    width:100%; height:100%;
    object-fit:cover; object-position:center;
  }
  /* Once the frame is capped by viewport height it can end up wider
     than tall, and a centre crop then cuts the faces out of the two
     portraits shot with their subject high in the frame. Pull the
     crop upwards on those. */
  .vw-slider__slide--focus-top img{ object-position:center 22%; }

  /* the flat-lay is the one landscape frame in the set —
     showing all of it beats cropping the ends off both
     baguettes, so it sits inside the frame instead */
  .vw-slider__slide--contain img{
    object-fit:contain;
    background:var(--sand);
  }
  .vw-slider__nav{
    position:absolute; top:0; bottom:0; width:34%;
    background:none; border:none; cursor:pointer;
    padding:0; color:var(--sand-ink);
    opacity:0; transition:opacity .3s ease;
  }
  .vw-slider__nav--prev{ left:0; }
  .vw-slider__nav--next{ right:0; }
  .vw-slider:hover .vw-slider__nav{ opacity:0.75; }
  .vw-slider__nav:focus-visible{ opacity:1; outline:2px solid var(--red); outline-offset:-4px; }
  /* The arrow sits on whatever the photo happens to be, so it carries
     its own ground rather than trusting the frame underneath it. */
  .vw-slider__nav span{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%;
    background:rgba(201,192,174,0.92);
    font-size:19px; font-weight:400; line-height:1;
  }
  .vw-slider__dots{
    position:absolute; left:0; right:0; bottom:12px;
    display:flex; justify-content:center; gap:6px;
  }
  .vw-slider__dots button{
    width:7px; height:7px; padding:0;
    border:none; border-radius:0; cursor:pointer;
    background:rgba(51,48,43,0.35);
    transition:background .25s ease;
  }
  .vw-slider__dots button[aria-current="true"]{ background:var(--red); }
  .vw__caption{
    margin-top:10px;
    font-family:var(--gloria);
    color:var(--sun);
    font-size:14px; line-height:1.4;
    min-height:2.8em;
  }

  /* ── entry footer ───────────────────────────────────── */
  .vw-foot{
    border-top:1px solid rgba(250,247,238,0.22);
    margin:0 30px;
    padding:22px 0 34px;
    display:flex; flex-wrap:wrap; gap:12px 26px;
    align-items:baseline; justify-content:space-between;
    font-size:12px; font-weight:600;
  }
  .vw-foot__back{ position:relative; padding-left:68px; }
  .vw-foot__back::before{
    content:''; position:absolute; left:56px; top:0.32em;
    width:5px; height:5px; background:var(--sun);
  }
  .vw-foot__next{
    font-family:var(--gloria); font-weight:400; font-size:15px;
    color:var(--sun);
    text-decoration:underline; text-underline-offset:3px;
  }

  /* On a short desktop window the words, not the photograph, are what
     overflow — 584px of text does not fit under an 86px nav in a 800px
     viewport. Tightening the vertical rhythm here buys back the ~90px
     that costs, so the entry holds one screen on a laptop without
     touching how it reads on a tall display. */
  @media(min-width:861px) and (max-height:920px){
    /* scoped to the entry: the index scrolls by design and has no
       reason to compress its nav */
    .vw .jr-nav{ padding-top:16px; }
    .vw .jr-nav__home img{ width:52px; }
    .vw__grid{ padding-top:30px; padding-bottom:24px; }
    .vw__title{ margin-bottom:10px; }
    .vw__sub{ margin-bottom:22px; }
    .vw__body p{ margin-bottom:12px; }
    .vw__body h2{ margin:22px 0 9px; }
    .vw__quote{ margin-top:24px; }
    .vw__credit{ margin-top:24px; }
    .vw-foot{ padding:16px 0 22px; }
  }

  /* ── responsive ─────────────────────────────────────── */
  @media(max-width:860px){
    .jr-nav{ padding:18px 20px 0; gap:12px; }
    .jr-nav__home img{ width:52px; }
    .jr-nav__links{ justify-content:flex-start; gap:16px; flex-wrap:wrap; }
    .jr__inner{ padding:0 20px 70px; }
    /* Stacked footers clear the fixed sound toggle downwards instead
       of sideways — an indent that works for one line on desktop just
       pushes the wrapped second line back under the button here. */
    .jr-foot, .vw-foot{ margin:0 20px; padding-bottom:66px; }
    .jr-foot__note{ padding-left:0; }
    .vw-foot__back{ padding-left:12px; }
    .vw-foot__back::before{ left:0; }

    /* sidebar unsticks and lies down above the grid */
    .jr-layout{ grid-template-columns:minmax(0, 1fr); gap:30px; }
    .jr-side{ position:static; }
    .jr-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px 18px; }

    /* the split becomes a stack: words, then pictures */
    .vw__grid{ grid-template-columns:minmax(0, 1fr); gap:34px; padding:26px 20px 34px; }
    .vw__body{ max-width:none; }
    .vw-slider__nav{ opacity:0.7; }
    /* A squarer frame on one column: the portraits still crop cleanly
       and the one landscape frame wastes less of the column on ground. */
    .vw-slider__slide{ aspect-ratio:1 / 1; }
  }
  @media(max-width:420px){
    .jr-grid{ gap:28px 14px; }
    .jr-card__title{ font-size:12px; }
  }

  @media (prefers-reduced-motion: reduce){
    .jr-card__frame img,
    .vw-slider__track{ transition:none; }
  }