/* ── Field Notes ───────────────────────────────────────
     article-field-notes-vietnam.html only.
     Loaded AFTER css/style.css (brand tokens, reset, .glyph).

     Laid out as a contact sheet: numbered panels divided by
     hairlines, two across on desktop, with the closing row
     split three ways. Each panel is a self-contained section
     of the brief, so the rules below are named after the
     panel they build rather than after a generic component.

     Typography: headings are Gloria Hallelujah, the brand hand,
     and everything else is monospace — handwritten titles over
     typed notes, which is what the piece is. The mono is true of
     this page and nowhere else on the site; Poppins stays the
     brand face everywhere else.

     Three instructions from the brief are load-bearing and are
     the reason some obvious things are missing:
       • no text sits over any photograph
       • the "what comes back with us" heading is deliberately
         absent — the brief asked for whitespace there
       • nothing follows the closing clip: no CTA, no logo,
         no sign-off
     ───────────────────────────────────────────────────── */

  :root{
    --fn-line: rgba(26,26,26,0.22);   /* the hairline between panels */
    --fn-mute: rgba(26,26,26,0.55);
    --fn-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  .fn{
    background:var(--paper); color:var(--ink);
    font-family:var(--fn-mono);
    font-weight:400;
  }

  /* ── top bar ─────────────────────────────────────────
     The shared .jr-nav spreads its links across the whole
     width and blows the current section up to headline size,
     which would fight a page made of quiet panels. Here it
     stays a single compact row on the hairline. */
  .fn-nav{
    display:flex; align-items:center; gap:34px;
    padding:14px 22px;
    border-bottom:1px solid var(--fn-line);
  }
  .fn-nav__home img{ width:52px; display:block; }
  .fn-nav__links{ display:flex; gap:26px; }
  .fn-nav__links a{
    font-size:11.5px; letter-spacing:0.06em;
    color:var(--ink); opacity:0.7;
    transition:opacity .25s ease;
  }
  .fn-nav__links a:hover{ opacity:1; }
  .fn-nav__links a[aria-current="page"]{ opacity:1; font-weight:700; }

  /* ── the sheet ───────────────────────────────────────
     12 columns so the closing row can split 4 / 3 / 5 while
     the rows above stay a clean half and half. Hairlines are
     drawn by the panels themselves (right + bottom), with the
     sheet supplying the outer left edge. */
  .fn-sheet{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    border-left:1px solid var(--fn-line);
  }
  .fn-panel{
    border-right:1px solid var(--fn-line);
    border-bottom:1px solid var(--fn-line);
    padding:22px 24px 30px;
    min-width:0;
  }
  .fn-panel--a{ grid-column:span 6; }   /* 01 opener      */
  .fn-panel--b{ grid-column:span 6; }   /* 02 the food    */
  .fn-panel--c{ grid-column:span 6; }   /* 03 systems     */
  .fn-panel--d{ grid-column:span 6; }   /* 04 the bread   */
  .fn-panel--e{ grid-column:span 4; }   /* 05 human frame */
  .fn-panel--f{ grid-column:span 3; }   /* 06 what comes back */
  .fn-panel--g{ grid-column:span 5; }   /* 07 closing     */

  /* ── panel furniture ─────────────────────────────────── */
  .fn-num{
    font-size:10.5px; letter-spacing:0.1em;
    color:var(--red);
    margin-bottom:18px;
  }
  /* the opener swaps its number for the issue line */
  .fn-meta{
    display:flex; justify-content:space-between; gap:12px;
    font-size:10.5px; letter-spacing:0.1em;
    color:var(--red);
    margin-bottom:34px;
  }

  /* Headings are handwritten; everything else on the sheet stays
     typed. Gloria has a small x-height and no bold, so it needs more
     size and more leading than the mono it replaces, and both the
     uppercasing and the tracking come off — handwriting set in caps
     reads as clumsy rather than casual. The --gloria token falls back
     to Patrick Hand, which is what carries Vietnamese diacritics if a
     future heading needs them; Gloria itself has none. */
  .fn-title{
    font-family:var(--gloria);
    font-size:clamp(26px, 3vw, 40px);
    line-height:1.24; letter-spacing:0; font-weight:400;
    margin-bottom:26px;
  }
  .fn-h{
    font-family:var(--gloria);
    font-size:clamp(16px, 1.6vw, 20px);
    line-height:1.34; letter-spacing:0; font-weight:400;
    margin-bottom:18px;
  }

  /* ── text ────────────────────────────────────────────── */
  .fn-p{ margin-bottom:14px; }
  .fn-p:last-child{ margin-bottom:0; }
  .fn-panel p{
    font-size:11.5px; line-height:1.62;
    letter-spacing:0.005em;
  }
  .fn-strong{ font-weight:700; }
  /* the quieter block that trails the main copy */
  .fn-quiet p{ color:var(--fn-mute); }
  /* the two questions the piece turns on */
  .fn-q{ font-weight:700; margin:4px 0 14px; }
  .fn-q:last-child{ margin-bottom:0; }

  /* the handwritten asides — the only two on the page */
  .fn-hand{
    font-family:var(--gloria);
    font-size:14px; line-height:1.4;
  }
  .fn-hand--beat{ margin-top:22px; }
  .fn-hand--cap{ display:block; text-align:right; margin-top:14px; }

  /* ── figures ─────────────────────────────────────────── */
  .fn-figure{ margin:0 0 16px; }
  .fn-figure:last-child{ margin-bottom:0; }
  .fn-figure img, .fn-figure video{
    width:100%; height:auto; display:block;
    background:rgba(26,26,26,0.06);
  }

  /* 2 x 2 — three stills and a clip, all the same frame */
  .fn-quad{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px; margin-bottom:18px;
  }
  .fn-quad .fn-figure{ margin:0; }
  .fn-quad img, .fn-quad video{ aspect-ratio:3 / 2; object-fit:cover; }

  /* two frames side by side */
  .fn-duo{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  .fn-duo .fn-figure{ margin:0; }
  .fn-duo img{ aspect-ratio:3 / 4; object-fit:cover; }

  /* a panel that splits again inside itself */
  .fn-split{
    display:grid; grid-template-columns:repeat(12, 1fr);
    gap:18px; align-items:start;
  }
  .fn-split--photo   > *:first-child{ grid-column:span 6; }
  .fn-split--photo   > *:last-child { grid-column:span 6; }
  .fn-split--aside   > *:first-child{ grid-column:span 7; }
  .fn-split--aside   > *:last-child { grid-column:span 5; }
  .fn-split--bread   > *:first-child{ grid-column:span 7; }
  .fn-split--bread   > *:last-child { grid-column:span 5; }

  /* ── closing ─────────────────────────────────────────── */
  .fn-close p{ margin-bottom:10px; }
  .fn-close p:last-of-type{ font-weight:700; margin-bottom:20px; }

  /* The page ends with this clip, by instruction: no CTA, no
     logo, no sign-off underneath. Nothing goes below it. */
  .fn-outro video{ width:100%; height:auto; display:block; }

  /* ── responsive ─────────────────────────────────────── */
  @media(max-width:1000px){
    /* the three-way closing row cannot hold three columns here,
       so the sheet becomes two even ones throughout */
    .fn-panel--e{ grid-column:span 6; }
    .fn-panel--f{ grid-column:span 6; }
    .fn-panel--g{ grid-column:span 12; }
    .fn-panel--g .fn-close{ max-width:44ch; }
  }
  @media(max-width:720px){
    /* one panel per row; the sheet reads as a column of notes */
    .fn-panel{ grid-column:span 12 !important; padding:20px 18px 26px; }
    .fn-sheet{ border-left:none; }
    .fn-panel{ border-right:none; }

    /* inner splits have no room left to split */
    .fn-split{ display:block; }
    .fn-split > *:first-child{ margin-bottom:18px; }
    .fn-nav{ gap:18px; padding:12px 18px; }
    .fn-nav__links{ gap:16px; flex-wrap:wrap; }
    .fn-nav__home img{ width:44px; }
    .fn-panel p{ font-size:12.5px; }
  }
  @media(max-width:460px){
    .fn-quad{ grid-template-columns:minmax(0, 1fr); }
    .fn-quad img, .fn-quad video{ aspect-ratio:4 / 3; }
  }