/* /journal, September 2026: the hub for everything we make. The explore page's index over
   film from explore.html, the journal's own rules from journal-2026.html.
   Built by scratchpad/design-2026/build-journal2.py - do not edit by hand.  */
/* ---- the settings ---- */
:root{--ex-in:1600px;          /* the room the page has, wider than it was    */
    --ex-cols:5;             /* the shop page is five across                */
    --ex-gap:23px;           /* Jack's, 11 Sep                              */
    --ex-row:56px;
    --ex-shape:3/4;          /* the shop page's picture                     */
    --ex-corner:0px;
    --ex-say:16px;
    --ex-drop:12px;}
.in{max-width:var(--ex-in)}
/* ---- the opening: the site's own photographic hero ---- */
.hero{position:relative;height:clamp(560px,84vh,920px);margin-top:calc(-1*var(--bar));overflow:hidden;background:var(--forest);color:#fff}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:drift 16s linear both}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.05)}}
.hero .veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,24,20,.46) 0,rgba(20,24,20,.12) 30%,rgba(20,24,20,.14) 45%,rgba(20,24,20,.7) 100%)}
.hero .in{position:absolute;left:0;right:0;bottom:clamp(56px,9vh,96px)}
.hero h1{font-family:var(--face);font-weight:400;font-size:min(clamp(42px,6vw,88px), 28px + (clamp(42px,6vw,88px) - 28px) * 0.6);line-height:1;letter-spacing:-.012em;max-width:13ch;text-wrap:balance}
.hero .where{margin-top:20px;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.5vw,21px);line-height:1.45;max-width:54ch;color:rgba(255,255,255,.92)}
.hero .cap{position:absolute;right:var(--edge);bottom:clamp(56px,9vh,96px);font-family:var(--sans);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.hero .cap b{font-weight:600;color:#fff}
@media(prefers-reduced-motion:reduce){.hero > img{animation:none}}
@keyframes ex-pan{from{transform:scale(1.04) translate(-3.5%,2.4%)}to{transform:scale(1.26) translate(3.8%,-3.2%)}}
@keyframes ex-pan-b{from{transform:scale(1.24) translate(4.2%,2.8%)}to{transform:scale(1.03) translate(-3%,-2%)}}
@keyframes ex-pan-c{from{transform:scale(1.05) translate(3%,-3.4%)}to{transform:scale(1.28) translate(-3.6%,2.8%)}}
@media(prefers-reduced-motion:reduce){.ex-film img{animation:none}}
@keyframes ex-wait{to{transform:translateX(100%)}}
@keyframes ex-rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ex-c{animation:none;opacity:1;transform:none}.ex-end i::after{animation:none}}
@media(max-width:1400px){:root{--ex-cols:4}}
@media(max-width:1000px){:root{--ex-cols:3;--ex-gap:20px}}
@media(max-width:680px){:root{--ex-cols:2}[data-col] .ex-colrun{grid-auto-columns:86%}}
@media(prefers-reduced-motion:reduce){.ex-p img,.ex-p video{transition:none}.ex-c:hover .ex-p img,.ex-c:hover .ex-p video{transform:none}}
/* The opening as an index over film (14 September, after Mobbin's discover page). The band sits under the bar, which is glass over it; the index in the page's own container, four columns, labels 13 grey, headings Larken 28 on 34, the caption a hundred beneath. The film is two layers that swap with a fade. */
.hero.ix{height:auto;min-height:0;color:#fff}
.hero.ix .film{position:absolute;inset:0}
.hero.ix .layer{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.hero.ix .layer.on{opacity:1}
.hero.ix .layer.front{z-index:1}
.hero.ix .layer video,.hero.ix .layer img.still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:none}
.hero.ix .layer img.still{animation:drift 18s linear both}
.hero.ix .veil{background:linear-gradient(to bottom,rgba(20,24,20,.68) 0,rgba(20,24,20,.5) 50%,rgba(20,24,20,.72) 100%)}
.hero.ix .in{position:relative;left:auto;right:auto;bottom:auto;z-index:2;box-sizing:border-box;max-width:1600px;min-height:580px;margin:0 auto;padding:calc(var(--bar) + 40px) var(--edge) 40px;display:flex;flex-direction:column;justify-content:center}
html header.site .in{max-width:1600px}
.ix-grid{display:grid;grid-template-columns:repeat(4,max-content);justify-content:space-between;gap:0 40px}
.ix-col{display:grid;align-content:start;gap:0;justify-items:start}
.ix-lab{display:block;margin:0 0 10px;font:500 11px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ix-a{display:inline-block;margin:0;padding:0;border:0;background:none;cursor:pointer;font-family:var(--face);font-weight:400;font-size:28px;line-height:40px;letter-spacing:-.012em;color:#fff;text-align:left;text-decoration:none;transition:opacity .25s}
/* the line under the index: always there, one line, never wrapping, so the hero keeps its height */
.ix-line{margin:28px 0 0;height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font:italic 400 17px/1.5 var(--serif);color:rgba(255,255,255,.85)}
.ix-a:hover{opacity:.62}
.ix-a:focus-visible{outline:1px solid #fff;outline-offset:4px}
@media(min-width:821px){.ex-rowcats,.ex-fade,.ex-arrow{display:none}}
@media(max-width:820px){.ex-head{flex-wrap:wrap} .ex-head h2{flex-basis:100%} .ex-head .ex-all{flex-basis:100%;margin-top:10px} .ex-head h2{line-height:1.25} .ex-sort{display:flex;justify-content:flex-end;margin-bottom:14px} .ex-sort .ex-cat:not(.ex-where),.ex-in{display:none} .ex-where{margin-left:0} .hero.ix .in{min-height:0;padding:calc(var(--bar) + 48px) var(--edge) 40px} .ix-grid{grid-template-columns:1fr 1fr;justify-content:stretch;gap:26px 16px} .ix-a{font-size:22px;line-height:32px}}
@media(prefers-reduced-motion:reduce){.hero.ix .layer img.still{animation:none}}
@keyframes ex-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ex-grid,.ex-rail{animation:none}}
@media(max-width:820px){.wh-veil{padding:0} .wh{width:100%;max-height:none;height:100%} .wh-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)} .wh-rail{flex-direction:row;overflow-x:auto;gap:6px;padding:14px 20px;border-right:0;border-bottom:1px solid rgba(241,237,232,.14);scrollbar-width:none} .wh-g{flex:0 0 auto;margin:0;padding:8px 12px;font-size:15px} .wh-main,.wh-found{padding:18px 20px} .wh-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .wh-top{padding:18px 20px 14px} .wh-foot{padding:14px 20px 18px}}
@media(max-width:820px){.hero.ix,.ex-cats{display:none}
    .ex-mob{display:block;padding:20px var(--edge) 0;background:var(--paper)}
    .ex-mob h1{margin:0 0 16px;font:400 30px/1.05 var(--face);letter-spacing:-.012em;color:var(--ink)}
    .ex-mob .mwhere{display:flex;align-items:center;gap:12px;width:100%;height:48px;padding:0 16px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:500 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;text-align:left;cursor:pointer}
    .ex-mob .mwhere.on{background:var(--forest);border-color:var(--forest);color:var(--paper)} .ex-mob .mwhere .ex-map{display:block;width:13px;height:21px;object-fit:contain} .ex-mob .mwhere .ex-map.inv{filter:invert(1) brightness(2)} .ex-mob .mwhere .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ex-mob .mwhere .mx{font:300 24px/1 var(--sans);padding:0 2px}
    .ex-mob .rail{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--edge));padding:20px var(--edge) 6px} .ex-mob .rail::-webkit-scrollbar{display:none}
    .ex-mob .st{flex:0 0 auto;display:grid;justify-items:start;gap:8px;width:92px;margin:0;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;text-align:left}
    .ex-mob .st i{display:block;width:92px;height:115px;overflow:hidden;background:var(--stone)} .ex-mob .st.on i{outline:2px solid var(--forest);outline-offset:2px}
    .ex-mob .st img{display:block;width:100%;height:100%;object-fit:cover} .ex-mob .st b{font:500 10px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)} .ex-mob .st.on b{color:var(--ink)}
    .ex-mob .st.more i{display:grid;place-items:center;background:var(--forest);color:var(--paper);font:300 30px/1 var(--sans);font-style:normal}
    .ex-mobchips{position:sticky;top:var(--bar);z-index:41;display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;margin:10px 0 0;padding:14px var(--edge) 6px;background:var(--paper)} .ex-mobchips::-webkit-scrollbar{display:none}
    .ex-mobchips .chip{flex:0 0 auto;position:relative;padding:9px 0;border:0;background:none;color:var(--ink-55);font:500 11px var(--sans);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;cursor:pointer} .ex-mobchips .chip.on{color:var(--ink)} .ex-mobchips .chip.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink)}
    .ex-mobsort{display:flex;gap:20px;padding:10px var(--edge) 0}
    .ex-mobsort + .ex-sec{padding-top:8px}}
:root{--forest:#2B301D;--cask:#392916;--bracken:#C08C3D;--shell:#F9F5EE;--oat:#F5F1E9;--paper:#FFFFF7;--stone:#EAE4DC;--stone-2:#D8D1CB;--ink:#414042;--ink-75:rgba(65,64,66,.75);--ink-55:rgba(65,64,66,.55);--ink-35:rgba(65,64,66,.35);--ink-20:rgba(65,64,66,.2);--on-forest:#F1EDE8;
  --face:'Larken','Lora',Georgia,serif;--serif:'Lora',Georgia,serif;--sans:'Jost','Helvetica Neue',Arial,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
/* ------------------------------------------------------------------ the page */
.jr-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
/* A band pads both sides, so two of them meeting put twice the number between the sections. At 1440px that was 104 + 104 = 208, and halving it to 144 was still too much (Jack, 17 September, twice: "the space is huge between sections"). The number is not the whole fault. Where the ground CHANGES - paper to forest, paper to stone - the padding is the coloured block's own breathing room and is doing visible work. Where two PLAIN bands meet it is a void: no edge, no colour, just white. So the two cases are separated, and only the void closes. Plain to plain is now ~74px; a change of ground keeps 144. */
.jr-band{padding:clamp(52px,5vw,76px) 0}
.jr-band:not(.stone):not(.forest):has(+ .jr-band:not(.stone):not(.forest)){padding-bottom:clamp(28px,2.6vw,38px)}
.jr-band:not(.stone):not(.forest) + .jr-band:not(.stone):not(.forest){padding-top:clamp(28px,2.6vw,38px)}
.jr-band.stone{background:var(--stone)}
.jr-band.forest{background:var(--forest);color:var(--on-forest)}
.jr-band.tight{padding-top:clamp(40px,4vw,56px)}
/* the bar is sticky and clear over a hero, so the hero starts underneath it, as _landing.css has it */
.jr-top{position:relative;min-height:min(74vh,720px);margin-top:calc(-1 * var(--bar,76px));padding-top:var(--bar,76px);display:flex;align-items:flex-end;overflow:hidden;background:var(--stone-2)}
.jr-top > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* dark enough at the very top for the white bar to read over a pale photograph, and again at the foot for the title */
.jr-top .jr-veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,13,10,.52) 0,rgba(12,13,10,.16) 20%,rgba(12,13,10,.36) 56%,rgba(12,13,10,.84) 100%)}
.jr-top-in{position:relative;width:100%;max-width:1280px;margin:0 auto;padding:0 40px clamp(48px,5vw,72px);color:#fff}
.jr-mark{margin:0 0 clamp(20px,3vw,34px);font:600 9px var(--sans);letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.jr-top .jr-kick{margin:0;font:600 9px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.jr-top h1{margin:14px 0 0;max-width:15ch;font:400 min(clamp(40px,5.4vw,74px), 28px + (clamp(40px,5.4vw,74px) - 28px) * 0.6)/1.02 var(--face);letter-spacing:-.022em;text-wrap:balance}
.jr-top h1 em{font-family:var(--serif);font-style:italic}
.jr-stand{margin:18px 0 0;max-width:52ch;font:400 clamp(16px,1.3vw,19px)/1.6 var(--serif);color:rgba(255,255,255,.84)}
.jr-read{display:inline-block;margin:26px 0 0;padding:13px 20px;background:rgba(255,255,255,.95);color:var(--ink);font:600 9px var(--sans);letter-spacing:.22em;text-transform:uppercase}
/* under 820 the index hero is not drawn (explore.html hides it), so the phone gets a head of its own */
.jr-phone{display:none}
@media (max-width:820px){.jr-phone{display:block;padding:30px 18px 4px;background:var(--paper)}
  .jr-phone .k{margin:0;font:600 9px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-35)}
  .jr-phone h1{margin:12px 0 0;font:400 min(34px, 28px + (34px - 28px) * 0.6)/1.04 var(--face);letter-spacing:-.018em}
  .jr-phone p{margin:12px 0 0;font:400 15.5px/1.6 var(--serif);color:var(--ink-55)}
  .jr-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:20px -18px 0;padding:0 18px 4px}
  .jr-chips::-webkit-scrollbar{display:none}
  .jr-chips a{flex:none;padding:9px 14px;border:1px solid var(--ink-20);font:600 8.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-75);white-space:nowrap}
  .jr-say{border-top:1px solid var(--stone)}
  .jr-say p{display:none}
  .jr-say .jr-wrap{padding-top:20px;padding-bottom:20px}}
/* the strip that says what this page is, and how much of it there is */
.jr-say{background:var(--paper);border-bottom:1px solid var(--stone)}
.jr-say .jr-wrap{display:flex;align-items:baseline;justify-content:space-between;gap:40px;padding-top:26px;padding-bottom:26px}
.jr-say p{margin:0;max-width:56ch;font:400 17px/1.55 var(--serif);color:var(--ink-75)}
.jr-tally{display:flex;gap:30px;flex:none}
.jr-tally span{display:grid;gap:3px;text-align:right}
.jr-tally b{font:400 22px/1 var(--face)}
.jr-tally i{font:600 8.5px var(--sans);font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-35)}
/* a band's heading */
.jr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin:0 0 clamp(28px,3vw,42px)}
.jr-kick{margin:0;font:600 9px var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-35)}
.jr-head h2{margin:8px 0 0;font:400 min(clamp(30px,3.4vw,44px), 28px + (clamp(30px,3.4vw,44px) - 28px) * 0.6)/1.06 var(--face);letter-spacing:-.018em}
.jr-head h2 em{font-family:var(--serif);font-style:italic}
.jr-band.forest .jr-kick{color:rgba(241,237,232,.55)}
.jr-all{flex:none;padding-bottom:4px;border-bottom:1px solid var(--ink-20);font:600 9px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55)}
.jr-all:hover{color:var(--ink);border-color:var(--ink)}
/* what is new: four reading cards */
.jr-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,30px)}
.jr-card{display:block}
.jr-ph{display:block;position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--stone-2)}
.jr-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.jr-card:hover .jr-ph img{transform:scale(1.035)}
.jr-card b{display:block;margin:16px 0 0;font:400 clamp(19px,1.5vw,22px)/1.2 var(--face);letter-spacing:-.01em}
.jr-card i{display:block;margin:7px 0 0;font:600 8.5px var(--sans);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-35)}
/* by subject: the same door, smaller, four across */
.jr-subs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.jr-sub{display:block;position:relative;overflow:hidden;aspect-ratio:1;background:var(--stone-2)}
.jr-sub img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.jr-sub:hover img{transform:scale(1.04)}
.jr-sub::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,13,10,.66),rgba(12,13,10,.06) 62%)}
.jr-sub .jr-w{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;color:#fff}
.jr-sub b{display:block;font:400 clamp(18px,1.5vw,22px)/1.14 var(--face)}
.jr-sub i{display:block;margin-top:4px;font:600 8.5px var(--sans);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.72)}
/* the printed magazine */
.jr-mag .jr-wrap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(36px,5vw,84px);align-items:center}
.jr-cov{display:block;box-shadow:0 30px 70px -40px rgba(0,0,0,.8)}
.jr-cov img{display:block;width:100%}
.jr-mag h2{margin:10px 0 0;font:400 min(clamp(30px,3.4vw,46px), 28px + (clamp(30px,3.4vw,46px) - 28px) * 0.6)/1.05 var(--face);letter-spacing:-.018em}
.jr-mag h2 em{font-family:var(--serif);font-style:italic}
.jr-mag p{margin:18px 0 0;max-width:46ch;font:400 17px/1.66 var(--serif);color:rgba(241,237,232,.78)}
.jr-acts{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.jr-btn{display:inline-block;padding:14px 22px;background:var(--paper);color:var(--ink);font:600 9px var(--sans);letter-spacing:.22em;text-transform:uppercase}
.jr-btn.quiet{background:none;border:1px solid rgba(241,237,232,.4);color:var(--on-forest)}
.jr-btn.quiet:hover{border-color:var(--on-forest)}
/* the news, dated, newest first */
.jr-news{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,4vw,60px)}
.jr-row{display:grid;grid-template-columns:62px minmax(0,1fr) 72px;gap:18px;align-items:center;padding:20px 0;border-top:1px solid var(--stone-2)}
.jr-row .jr-when{font:600 8.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-35);align-self:start;padding-top:5px}
.jr-row b{display:block;font:400 19px/1.24 var(--face);letter-spacing:-.008em}
.jr-row i{display:block;margin-top:5px;font:400 12.5px var(--sans);font-style:normal;color:var(--ink-55)}
.jr-row .jr-th{width:72px;height:56px;object-fit:cover;display:block}
.jr-row:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* the folk tales, a rail */
.jr-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr);gap:clamp(16px,1.8vw,26px);overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.jr-rail::-webkit-scrollbar{display:none}
.jr-tale{display:block}
.jr-tale .jr-ph{aspect-ratio:3/4}
.jr-tale b{display:block;margin:15px 0 0;font:400 21px/1.18 var(--face)}
.jr-tale i{display:block;margin:6px 0 0;font:400 13.5px/1.5 var(--serif);font-style:italic;color:var(--ink-55)}
/* the Weekly */
.jr-weekly .jr-wrap{max-width:760px;text-align:center}
.jr-weekly h2{margin:12px 0 0;font:400 min(clamp(30px,3.4vw,46px), 28px + (clamp(30px,3.4vw,46px) - 28px) * 0.6)/1.05 var(--face);letter-spacing:-.018em}
.jr-weekly h2 em{font-family:var(--serif);font-style:italic}
.jr-weekly p{margin:16px auto 0;max-width:46ch;font:400 17px/1.66 var(--serif);color:rgba(241,237,232,.78)}
.jr-sign{display:flex;gap:10px;margin:28px auto 0;max-width:460px}
.jr-sign input{flex:1;min-width:0;padding:14px 16px;border:1px solid rgba(241,237,232,.4);background:none;color:var(--on-forest);font:400 15px var(--serif)}
.jr-sign input::placeholder{color:rgba(241,237,232,.5)}
.jr-sign button{flex:none;padding:14px 22px;border:0;background:var(--paper);color:var(--ink);font:600 9px var(--sans);letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.jr-small{margin:16px 0 0;font:400 12.5px var(--sans);color:rgba(241,237,232,.5)}
@media (max-width:1040px){.jr-four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jr-subs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jr-news{grid-template-columns:1fr}
  .jr-mag .jr-wrap{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
  .jr-say .jr-wrap{flex-direction:column;gap:22px}
  .jr-tally{justify-content:flex-start}
  .jr-tally span{text-align:left}}
@media (max-width:680px){.jr-wrap,.jr-top-in{padding-left:18px;padding-right:18px}
  .jr-top{min-height:66vh}
  .jr-four{grid-template-columns:1fr;gap:26px}
  .jr-subs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jr-mag .jr-wrap{grid-template-columns:1fr}
  .jr-cov{max-width:220px}
  .jr-head{flex-direction:column;align-items:flex-start;gap:14px}
  .jr-row{grid-template-columns:52px minmax(0,1fr) 60px;gap:12px}
  .jr-row .jr-th{width:60px;height:48px}
  .jr-sign{flex-direction:column}}