:root {
    /* palette. three values corrected 2026-08-08, each marked with the reason */
    --ink:#22332f;        /* 11.79:1 on paper */
    --soft:#3d4f4a;       /*  7.72:1 on paper */
    --paper:#f6f1e7;
    --surface:#fffdf8;
    --sea:#1c5e53;        /*  6.72:1 on paper */
    --ochre:#a34430;      /* CORRECTED from #b8503c - 4.39:1 failed, now 5.44:1 */
    --scrub:#2fbfa0;      /* CORRECTED from #1c8b74 - 2.14:1 failed, now 3.88:1 */
    --dim:#6f7d78;        /* CORRECTED from rgba(34,51,47,.45) - 2.75:1 failed, now 3.82:1 */
    --line:#ddd0b4;
    /* rhythm: one base unit, every vertical measure a multiple of it */
    --u:8px;
    --gut:16px;
    --maxw:1128px;
    --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
    --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  }
  @media (min-width:768px) { :root { --gut:24px; } }

  *, *::before, *::after { box-sizing:border-box; }
  * { margin:0; }
  html { scroll-behavior:smooth; scroll-padding-top:calc(var(--u) * 3); }
  @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
  body { background:var(--paper); color:var(--ink); font-family:var(--serif);
         font-size:18px; line-height:32px; -webkit-font-smoothing:antialiased;
         overflow-x:hidden; }

  /* container and grid: 4 / 8 / 12 fields */
  .page { width:min(100% - 48px, var(--maxw)); margin-inline:auto; }
  .grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:var(--gut); }
  @media (min-width:768px)  { .grid { grid-template-columns:repeat(8,minmax(0,1fr)); } }
  @media (min-width:1080px) { .grid { grid-template-columns:repeat(12,minmax(0,1fr)); } }

  /* type scale, ratio 1.25 from 18px; every leading a multiple of 4 */
  .mono { font-family:var(--mono); font-size:12px; line-height:16px; letter-spacing:.14em;
          text-transform:uppercase; }
  h1 { font-size:44px; line-height:48px; letter-spacing:-.015em; text-wrap:balance; font-weight:700; }
  h2 { font-size:35px; line-height:40px; letter-spacing:-.01em; text-wrap:balance; }
  @media (min-width:1080px) { h1 { font-size:55px; line-height:56px; } }
  .lede { font-size:20px; line-height:32px; color:var(--soft); max-width:34em; }
  @media (min-width:768px) { .lede { font-size:22px; } }
  a { color:var(--sea); text-underline-offset:3px; }
  a:focus-visible, button:focus-visible, summary:focus-visible, .rr:focus-visible {
    outline:3px solid var(--ochre); outline-offset:3px; }
  .eyebrow { color:var(--ochre); display:block; }

  /* header shares the content margins, so the two line up */
  .site-header { padding-block:calc(var(--u) * 3); }
  .site-header .page { display:flex; align-items:center; justify-content:space-between;
                       gap:var(--u) calc(var(--u) * 2); flex-wrap:wrap; }
  .site-header img { height:40px; width:auto; display:block; }
  .site-header a.mono { color:var(--ochre); text-decoration:none; padding:calc(var(--u) * 1.5) 0; }

  main > section { padding-block-start:calc(var(--u) * 8); }
  @media (min-width:1080px) { main > section { padding-block-start:calc(var(--u) * 12); } }
  .stack { display:flex; flex-direction:column; gap:calc(var(--u) * 2); }
  .stack-s { display:flex; flex-direction:column; gap:var(--u); }
  .hero { padding-block-start:calc(var(--u) * 4); position:relative; }
  .rule { width:72px; height:6px; background:var(--sea); border-radius:3px;
          margin-block-start:calc(var(--u) * 4); }

  /* bernard, peering over the corner. He is the premise of the page; he arrives
     once and then stays put - scattered motion is what makes a page feel
     machine-made, one deliberate entrance is character. */
  .crab { position:absolute; right:0; top:calc(var(--u) * -2); width:84px; z-index:2;
          pointer-events:none; }
  .crab img { width:100%; height:auto; display:block; }
  @media (min-width:768px) { .crab { width:112px; right:calc(var(--u) * 2); } }
  @media (prefers-reduced-motion:no-preference) {
    .crab { animation:scuttle 1s cubic-bezier(.22,1,.36,1) .35s both; }
    @keyframes scuttle {
      from { transform:translateX(46px) rotate(7deg); opacity:0; }
      to   { transform:translateX(0)    rotate(0);    opacity:1; }
    }
  }

  /* the film index */
  .lib { row-gap:calc(var(--u) * 4); margin-block-start:calc(var(--u) * 4); }
  .fcard { grid-column:span 4; display:flex; flex-direction:column; gap:var(--u);
           text-decoration:none; color:inherit; }
  @media (min-width:1080px) { .fcard { grid-column:span 3; } }
  .fcard-shot { position:relative; display:block; border-radius:6px;
                border:1px solid var(--line); background:var(--surface); }
  .fcard-shot > img { width:100%; height:auto; display:block; border-radius:5px;
                      aspect-ratio:16/9; object-fit:cover; transition:transform .3s ease; }
  .fcard:hover .fcard-shot > img { transform:scale(1.015); }
  .fcard:hover .fcard-title { text-decoration:underline; }

  /* the running time hangs off the card on a luggage tag. A tag tied to a thing
     is bernard's native object, and it carries real information, so it earns
     its place rather than decorating. */
  .fcard-tag { position:absolute; right:-6px; top:-14px; width:88px; rotate:5deg;
               filter:drop-shadow(0 2px 4px rgba(34,51,47,.2)); transition:rotate .25s ease; }
  .fcard:hover .fcard-tag { rotate:0deg; }
  /* Painted from CSS, not 19 inlined copies in the markup: the blank tag alone
     would be 15 x 57 KB of base64 and put the page over a megabyte. One
     declaration each, and the browser caches the decoded image. */
  .tag-art { display:block; width:100%; aspect-ratio:88/41;
             background:url(tag-luggage.svg) center/contain no-repeat; }
  .fcard-tag-t { position:absolute; left:34%; right:8%; top:0; bottom:0;
                 display:flex; align-items:center; justify-content:center;
                 font-family:var(--mono); font-size:12px; letter-spacing:.04em;
                 /* MEASURED: the tag body under this text is rgb(245,221,183), a light
                    tan. Paper was 1.17:1 on it - the time was effectively invisible.
                    Ink measures 10.05:1. Never pick a colour to sit on artwork by eye. */
                 color:var(--ink); font-variant-numeric:tabular-nums; }
  @media (prefers-reduced-motion:reduce) {
    .fcard-shot > img, .fcard-tag { transition:none; }
    .fcard:hover .fcard-shot > img { transform:none; }
    .fcard:hover .fcard-tag { rotate:5deg; }
  }
  .fcard-kicker { color:var(--ochre); margin-block-start:var(--u); }
  .fcard-title { font-size:22px; line-height:28px; letter-spacing:-.005em; }
  .fcard-blurb { font-size:15px; line-height:24px; color:var(--soft); }
  @media (min-width:768px) {
    .fcard-kicker { min-height:32px; }
    .fcard-title { min-height:56px; }
    .fcard-blurb { min-height:48px; }
  }
  .fcard-dur { color:var(--dim); text-transform:none; letter-spacing:.06em; font-size:12.5px; }

  /* on a phone the index would be four screens before the first film, so it
     becomes a swipe rail: one card and a peek at the next */
  @media (max-width:767px) {
    .lib { display:flex; gap:var(--gut); overflow-x:auto; scroll-snap-type:x mandatory;
           -webkit-overflow-scrolling:touch; scrollbar-width:none;
           margin-inline:-24px; padding:16px 24px var(--u); }
    .lib::-webkit-scrollbar { display:none; }
    .fcard { flex:0 0 76%; scroll-snap-align:start; }
  }

  /* films not yet made: blank tags, still on the peg. Replaces the filled-vs-
     outlined star, which needed a written legend to be understood at all. */
  .pegboard { margin-block-start:calc(var(--u) * 6); }
  .pegs { list-style:none; margin:calc(var(--u) * 2) 0 0; padding:0;
          display:flex; flex-wrap:wrap; gap:calc(var(--u) * 2); }
  .peg { position:relative; width:210px; rotate:var(--r); }
  /* One per row on a phone is 15 tags of dead stack, so go two-up - but ONLY
     where the label still fits. Measured, not guessed: at 390px two-up is clean;
     at 320px it overflowed 8 of the 15 labels, so below 380px it stays one per
     row (where the tag is wider than the desktop one anyway). */
  @media (min-width:380px) and (max-width:520px) {
    .pegs { gap:calc(var(--u) * 1.5); }
    .peg { width:calc(50% - var(--u) * .75); }
    .peg-t { font-size:12px; line-height:15px; left:37%; right:7%; }
  }
  @media (max-width:379px) {
    .peg { width:100%; }
  }
  .peg:nth-child(4n+1) { --r:-1.8deg; } .peg:nth-child(4n+2) { --r:1.2deg; }
  .peg:nth-child(4n+3) { --r:-.9deg; }  .peg:nth-child(4n+4) { --r:1.6deg; }
  .peg-art { display:block; width:100%; aspect-ratio:210/104; opacity:.72;
             background:url(tag-blank.svg) center/contain no-repeat; }
  /* MEASURED off the artwork, not guessed: the punched hole and its string
     occupy the left 31%, so text starts at 38% to leave real air rather than
     butting the hole. Body colour is rgb(254,254,254), so --soft is 8.7:1. */
  .peg-t { position:absolute; left:38%; right:9%; top:18%; bottom:16%;
           display:flex; align-items:center; font-size:13.5px; line-height:18px;
           color:var(--soft); text-wrap:balance; }

  /* one film */
  .rr-film { padding-block-start:calc(var(--u) * 10); }
  .film-head { display:flex; flex-direction:column; gap:var(--u);
               margin-block-end:calc(var(--u) * 3); }
  .film-meta { color:var(--dim); margin-block-start:calc(var(--u) * 2);
               letter-spacing:.06em; text-transform:none; font-size:12.5px; }
  .rr-film .aside { margin-block-start:calc(var(--u) * 2); }
  .aside { font-size:15px; line-height:24px; color:var(--soft); font-style:italic; }

  .rr { position:relative; border-radius:8px; overflow:hidden; background:#000;
        box-shadow:0 6px 28px rgba(34,51,47,.16); }
  /* a film is 9 whole fields wide on a big screen (840px = 9 cols + 8 gutters);
     full-bleed makes a 90-second film 634px tall for no gain */
  @media (min-width:1080px) { .rr, .drawers, .film-meta { max-width:840px; } }
  .rr video { width:100%; display:block; aspect-ratio:16/9; }
  /* Title cards fill the frame: type upper-left, starfish and lockup lower-right.
     The only quadrant empty on every card is the upper right - and it must be
     placed in PERCENTAGES, because a fixed offset that clears the headline on a
     desktop lands squarely on it in a 192px-tall phone frame. */
  .rr-big { position:absolute; right:5%; top:8%; width:clamp(44px,13%,68px); aspect-ratio:1;
            border-radius:50%; border:0; cursor:pointer; background:rgba(34,51,47,.9);
            color:var(--paper); font-size:26px; display:flex; align-items:center;
            justify-content:center; transition:opacity .25s ease, transform .2s ease; }
  .rr-big:hover { transform:scale(1.06); }
  .rr.playing .rr-big { opacity:0; pointer-events:none; }
  @media (prefers-reduced-motion:reduce) { .rr-big { transition:none; }
                                           .rr-big:hover { transform:none; } }
  .rr-bar { position:absolute; inset-inline:0; bottom:0; display:flex; align-items:center;
            gap:calc(var(--u) * .5); padding:var(--u) calc(var(--u) * 1.5);
            background:linear-gradient(transparent, rgba(34,51,47,.94) 42%);
            opacity:0; transition:opacity .25s ease; }
  /* .paused is set at load AND mid-film, so it needs .started with it - otherwise
     the bar is pinned across the untouched title card on every device */
  .rr:hover .rr-bar, .rr:focus-within .rr-bar, .rr.started.paused .rr-bar { opacity:1; }
  /* touch devices never hover, so the controls must simply be there - but only
     once the film has started; until then the big button is the only control
     that means anything, and the card stays whole */
  @media (hover:none) { .rr.started .rr-bar { opacity:1; } }
  @media (prefers-reduced-motion:reduce) { .rr-bar { transition:none; } }
  .rr-bar button { border:0; background:none; color:var(--paper); font-size:16px; cursor:pointer;
                   min-width:44px; min-height:44px; border-radius:6px;
                   display:inline-flex; align-items:center; justify-content:center; }
  .rr-bar button:hover { background:rgba(246,241,231,.16); }
  .rr-bar button[aria-pressed="true"] { color:var(--scrub); }
  .b-speed { font-size:12px; letter-spacing:.06em; text-transform:none; }
  .rr-time { color:var(--paper); font-family:var(--mono); font-size:12px; white-space:nowrap;
             font-variant-numeric:tabular-nums; padding-inline:calc(var(--u) * .5); }
  .rr-scrub { position:relative; flex:1; height:6px; border-radius:3px;
              background:rgba(246,241,231,.3); cursor:pointer; margin-inline:calc(var(--u) * .5); }
  .rr-scrub::before { content:""; position:absolute; inset:-19px 0; }
  .rr-buf, .rr-prog { position:absolute; inset-block:0; left:0; border-radius:3px; width:0; }
  .rr-buf { background:rgba(246,241,231,.45); }
  .rr-prog { background:var(--scrub); }

  /* transcript and chapters, folded away until wanted */
  .drawers { display:flex; flex-direction:column; margin-block-start:calc(var(--u) * 3);
             border-block-start:1px solid var(--line); }
  .drawer { border-block-end:1px solid var(--line); }
  .drawer > summary { list-style:none; cursor:pointer; display:flex; align-items:center;
                      gap:var(--u); min-height:56px; color:var(--sea); }
  .drawer > summary::-webkit-details-marker { display:none; }
  .drawer > summary::before { content:"+"; font-family:var(--mono); font-size:15px;
                              width:20px; color:var(--dim); }
  /* U+2212 MINUS SIGN, not an en-rule: a glyph, and it must stay out of the sweep */
  .drawer[open] > summary::before { content:"\2212"; }
  .drawer-n { color:var(--dim); margin-inline-start:auto; }
  .drawer-body { padding-block:var(--u) calc(var(--u) * 3); }
  .rr-find { font:inherit; font-size:16px; line-height:24px; width:100%; max-width:32em;
             min-height:48px; padding:var(--u) calc(var(--u) * 2); border:1px solid var(--line);
             border-radius:6px; background:var(--surface); color:var(--ink);
             margin-block-end:calc(var(--u) * 2); }
  .rr-list { list-style:none; margin:0; padding:0; max-height:432px; overflow-y:auto; }
  .rr-list li { display:flex; gap:calc(var(--u) * 2); padding:var(--u) calc(var(--u) * 1.5);
                border-radius:6px; cursor:pointer; font-size:17px; line-height:28px; }
  .rr-list li:hover { background:var(--surface); }
  .rr-list li.on { background:#f0e9d8; }
  .rr-list li.dim { opacity:.4; }
  .rr-list .st { font-family:var(--mono); font-size:12px; color:var(--sea); flex:none;
                 padding-block-start:calc(var(--u) * .75); font-variant-numeric:tabular-nums; }
  .rr-chs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gut); }
  @media (min-width:768px)  { .rr-chs { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @media (min-width:1080px) { .rr-chs { grid-template-columns:repeat(4,minmax(0,1fr)); } }
  .rr-ch { display:flex; flex-direction:column; gap:var(--u); border:0; background:none;
           padding:0; cursor:pointer; text-align:left; font:inherit; color:inherit; }
  .rr-ch img { width:100%; display:block; border-radius:4px; border:1px solid var(--line);
               aspect-ratio:16/9; object-fit:cover; }
  .rr-ch:hover img { border-color:var(--sea); }
  .rr-ch span { font-size:14px; line-height:20px; color:var(--soft); }

  /* the course map */
  .course { display:flex; flex-direction:column; gap:calc(var(--u) * 2);
            margin-block-start:calc(var(--u) * 4); }
  .module { background:var(--surface); border:1px solid var(--line); border-radius:6px;
            padding:calc(var(--u) * 3); }
  .module .mono { color:var(--sea); }
  .module h3 { font-size:24px; line-height:32px; margin-block:var(--u); }
  .module p.blurb { color:var(--soft); font-size:17px; line-height:28px;
                    margin-block-end:calc(var(--u) * 2); }
  ul.lessons { list-style:none; margin:0; padding:0; display:grid; gap:var(--u) var(--gut);
               grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
  ul.lessons li { display:flex; gap:calc(var(--u) * 1.5); align-items:baseline;
                  font-size:17px; line-height:28px; }
  ul.lessons svg { flex:none; width:15px; height:15px; transform:translateY(2px) rotate(-8deg); }
  ul.lessons li:nth-child(2) svg { transform:translateY(2px) rotate(14deg); }
  ul.lessons li:nth-child(3) svg { transform:translateY(2px) rotate(-22deg); }
  ul.lessons li:nth-child(4) svg { transform:translateY(2px) rotate(6deg); }
  .soon-star path { fill:none !important; stroke:var(--dim); }
  .badge { display:inline-block; background:var(--sea); color:var(--paper); border-radius:5px;
           padding:calc(var(--u) * .5) var(--u); font-family:var(--mono); font-size:11px;
           line-height:16px; letter-spacing:.12em; text-transform:uppercase;
           margin-inline-start:var(--u); vertical-align:middle; }

  footer { padding-block:calc(var(--u) * 10) calc(var(--u) * 14); color:var(--soft); }
  footer .mono { color:var(--dim); }
  .dune { position:fixed; left:0; bottom:0; width:100%; height:112px; z-index:-1; }