/* Dionysian Dreams · v3 (20 Oct 2026), loaded after site.css and v2.css.
   Three kinds of page, three shapes, so nobody mixes them up:
   Words   = the dictionary. Type only, looked up, short.
   Stories = the post, opened. The painting in colour first (colour A), colour again further down.
   Essays  = the long read you scroll through. Paintings in colour hold still while the story moves over them,
             like the reels: slow push-in, small centred lines. Between the pictures, the full text on paper. */

/* ---------- colour A: the page opens on the painting (stories and essays) ---------- */
.fold.post{position:relative;background-color:#0b0b0a;background-position:var(--postpos,center 18%);background-size:cover;background-repeat:no-repeat;color:#EEEBE4;--ink:#EEEBE4;--soft:rgba(238,235,228,.72);--rule:rgba(238,235,228,.25)}
.fold.post:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(11,11,10,.55),rgba(11,11,10,.05) 30%,rgba(11,11,10,.05) 55%,rgba(11,11,10,.8));pointer-events:none}
.fold.post>*{position:relative}
.fold.post a,.fold.post .hint,.fold.post button{color:#EEEBE4}
.fold.post .mark{filter:invert(1)}
.fold.post .stage .essay{text-align:center;justify-self:center;max-width:24ch;margin-inline:auto;grid-column:1/-1;text-shadow:0 0 18px rgba(0,0,0,.6)}
.fold.post .stage .title{color:#EEEBE4}
.fold.post .kicker{grid-column:1/-1;justify-self:center;text-align:center;font-size:var(--small);color:var(--soft);margin-bottom:.8em;text-shadow:0 0 12px rgba(0,0,0,.6)}

/* ---------- ESSAY: the scroll ---------- */
.v3-essay .stage{grid-template-rows:minmax(0,1fr) auto auto auto}
.scene{position:relative;background:#0b0b0a;color:#EEEBE4}
.scene .pic{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;margin:0}
.scene .pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,40%);
  transform:scale(calc(1 + var(--p,0) * var(--zoom,.16)));transform-origin:var(--fx,50%) var(--fy,40%);will-change:transform}
.scene .pic:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(11,11,10,.35),rgba(11,11,10,0) 25%,rgba(11,11,10,0) 60%,rgba(11,11,10,.55));pointer-events:none}
.scene .pic figcaption{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom,0px));font-size:12px;line-height:1.3;color:rgba(238,235,228,.72);text-align:right;z-index:1}
.scene .beats{position:relative;margin-top:-100vh;margin-top:-100svh;z-index:2}
.beat{min-height:85vh;min-height:85svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--pad);text-align:center}
.beat:first-child{min-height:100vh;min-height:100svh}
.beat:last-child{min-height:110vh;min-height:110svh}
.beat p{font-size:clamp(20px,2.1vw,30px);letter-spacing:-.02em;line-height:1.18;max-width:22ch;text-shadow:0 0 18px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.5)}
.beat p em{font-style:italic}
.beat .ch{display:block;font-size:var(--small);letter-spacing:0;color:rgba(238,235,228,.8);margin-bottom:1em;text-shadow:0 0 12px rgba(0,0,0,.7)}
@media (prefers-reduced-motion:reduce){.scene .pic img{transform:none}}

/* the full text, on paper, between the pictures */
.read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);padding:clamp(56px,10vh,120px) var(--pad)}
.read>header{grid-column:1}
.read>header .n{display:block;font-family:'GFS Didot',Didot,serif;font-size:clamp(44px,6vw,96px);line-height:.9}
.read>header h2{font-size:inherit;font-weight:500;margin-top:.6em}
.read>header{position:sticky;top:var(--pad);align-self:start}
.read .text{grid-column:2 / -1;max-width:36em}
.read .text p{font-size:clamp(18px,1.5vw,21px);line-height:1.5;letter-spacing:-.005em}
.read .text p+p{margin-top:1em}
.read .src{color:var(--soft);font-size:var(--small);line-height:1.4;margin-top:2em;padding-top:.9em;border-top:1px solid var(--rule);max-width:none}
.read .src+.src{border-top:0;margin-top:.4em;padding-top:0}
.read .lit{grid-column:1;margin-top:2em;max-width:30ch}
@media (max-width:700px){
  .read{grid-template-columns:minmax(0,1fr)}
  .read>header{position:static;display:flex;align-items:baseline;gap:14px;margin-bottom:1.4em}
  .read>header h2{margin-top:0}
  .read .text{grid-column:1}
  .read .lit{grid-column:1}
}

/* try this: the essay ends on something to do */
.try{padding:clamp(56px,10vh,120px) var(--pad);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);border-top:1px solid var(--rule)}
.try h2{grid-column:1;font-size:inherit;font-weight:500}
.try p{grid-column:2 / -1;font-size:clamp(24px,2.6vw,40px);letter-spacing:-.02em;line-height:1.15;max-width:22ch}
.try p em{font-style:italic}
.try .fig{grid-column:2 / -1;justify-self:end;height:clamp(140px,22vw,260px);width:auto;margin-top:clamp(24px,4vh,40px)}
@media (max-width:700px){.try{grid-template-columns:minmax(0,1fr);row-gap:1em}.try h2,.try p,.try .fig{grid-column:1}}

/* the essay's credits: every painting, in order */
.credits{padding:0 var(--pad) clamp(40px,8vh,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
.credits h2{grid-column:1;font-size:inherit;font-weight:500}
.credits ol{grid-column:2 / -1;color:var(--soft);font-size:var(--small);line-height:1.4}
.credits li+li{margin-top:.35em}
@media (max-width:700px){.credits{grid-template-columns:minmax(0,1fr)}.credits h2,.credits ol{grid-column:1}.credits ol{margin-top:.8em}}

/* ---------- STORY: colour further down ---------- */
.v3-story .tale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);padding:clamp(48px,9vh,110px) var(--pad)}
.v3-story .tale .text{grid-column:1 / span 2;max-width:30ch}
.v3-story .tale .text p{font-size:clamp(22px,2.4vw,36px);letter-spacing:-.02em;line-height:1.18}
.v3-story .tale .text p+p{margin-top:.8em}
.v3-story .tale .word{grid-column:3;align-self:start;border-top:1px solid var(--rule);padding-top:.8em}
.v3-story .tale .word .g{font-family:'GFS Didot',Didot,serif;font-size:clamp(30px,3.4vw,52px);line-height:1.05;display:block}
.v3-story .tale .word .tr{color:var(--soft);display:block;margin-top:.3em}
.v3-story .tale .word a{display:inline-block;margin-top:.8em}
.v3-story .tale .src{grid-column:1 / span 2;color:var(--soft);margin-top:2em;max-width:60ch}
@media (max-width:700px){.v3-story .tale{grid-template-columns:minmax(0,1fr);row-gap:2em}.v3-story .tale .text,.v3-story .tale .word,.v3-story .tale .src{grid-column:1}.v3-story .tale .src{margin-top:0}}

/* the detail: a second look at the same painting, close up, in colour */
.detail{position:relative;height:78vh;height:78svh;min-height:420px;background-color:#0b0b0a;background-position:var(--dpos,50% 30%);background-size:var(--dsize,260%);background-repeat:no-repeat;color:#EEEBE4;display:flex;align-items:flex-end;justify-content:center;padding:var(--pad)}
.detail:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(11,11,10,0) 50%,rgba(11,11,10,.65));pointer-events:none}
.detail p{position:relative;text-align:center;font-size:clamp(20px,2.1vw,30px);letter-spacing:-.02em;line-height:1.18;max-width:24ch;margin-bottom:clamp(24px,6vh,64px);text-shadow:0 0 18px rgba(0,0,0,.7)}
.detail p .soft{display:block;font-size:var(--small);color:rgba(238,235,228,.8);margin-bottom:.8em;letter-spacing:0}

/* next: the next story waits as its own figure, in colour */
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);padding:clamp(48px,9vh,110px) var(--pad);border-top:1px solid var(--rule);align-items:end}
.next h2{grid-column:1;font-size:inherit;font-weight:500;align-self:start}
.next a{grid-column:2 / -1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--gap);text-decoration:none}
.next .t{font-size:clamp(40px,7vw,120px);font-weight:500;letter-spacing:-.05em;line-height:.85}
.next .when{display:block;color:var(--soft);font-size:var(--small);letter-spacing:0;margin-top:.9em;font-weight:400}
.next img{height:clamp(150px,22vw,300px);width:auto}
@media (max-width:700px){.next{grid-template-columns:minmax(0,1fr);row-gap:1.2em}.next h2,.next a{grid-column:1}.next img{height:150px}}

/* ---------- STORIES index: the wall of figures ---------- */
.wall{padding:clamp(40px,8vh,96px) var(--pad);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
.wall>div{grid-column:1}
.wall h2{font-size:inherit;font-weight:500}
.wall .lede{color:var(--soft);margin-top:.9em;max-width:30ch}
.wall ul{grid-column:2 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(14px,2vw,32px)}
.wall li a{display:grid;grid-template-rows:clamp(150px,16vw,230px) auto auto;text-decoration:none}
.wall li img{height:100%;width:100%;object-fit:contain;object-position:left bottom;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.wall li a:hover img,.wall li a:focus-visible img{transform:translateY(-6px)}
.wall .t{font-size:clamp(20px,2vw,30px);letter-spacing:-.02em;line-height:1.1;margin-top:.5em;border-top:1px solid var(--rule);padding-top:.4em}
.wall .when{color:var(--soft);margin-top:.2em}
@media (max-width:900px){.wall ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.wall{grid-template-columns:minmax(0,1fr);row-gap:1.6em}.wall ul{grid-column:1}.wall li a{grid-template-rows:150px auto auto}}

/* the essays, on the Stories page: each one shows its first painting */
.shelf{padding:0 var(--pad) clamp(40px,8vh,96px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
.shelf>div{grid-column:1}
.shelf h2{font-size:inherit;font-weight:500}
.shelf .lede{color:var(--soft);margin-top:.9em;max-width:30ch}
.shelf ul{grid-column:2 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,32px)}
.shelf li a{display:block;text-decoration:none}
.shelf .cover{display:block;aspect-ratio:4/5;background-color:#f1efe9;background-position:var(--pos,center);background-size:contain;background-repeat:no-repeat;position:relative;border-bottom:1px solid var(--rule)}
.shelf .cover .t{position:absolute;left:0;bottom:8px;font-size:clamp(24px,2.6vw,40px);font-weight:500;letter-spacing:-.04em;line-height:.9}
.shelf .when{display:block;color:var(--soft);margin-top:.5em}
.shelf .soon .cover{opacity:.55}
@media (max-width:700px){.shelf{grid-template-columns:minmax(0,1fr);row-gap:1.4em}.shelf ul{grid-column:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ---------- WORDS: the dictionary ---------- */
.v3-words .wpic,.v3-words .wcap{display:none!important}
.v3-words .entry.has-pic{grid-template-columns:minmax(0,1fr)}
.letters{display:flex;margin-top:clamp(28px,5vh,56px);padding-top:clamp(20px,3vh,32px)!important;flex-wrap:wrap;gap:.2em .9em;padding:0 var(--pad) clamp(28px,5vh,56px);font-family:'GFS Didot',Didot,serif;font-size:clamp(22px,2.4vw,34px);border-bottom:1px solid var(--rule)}
.letters a{text-decoration:none}
.letters span{color:var(--rule)}
.v3-words #words .rows{column-count:2;column-gap:var(--gap)}
.v3-words #words .entry{break-inside:avoid;display:block;padding:clamp(18px,2vw,28px) 0}
.v3-words #words .entry .g{font-size:clamp(30px,3vw,46px)}
.v3-words #words .entry .tr{font-style:italic;margin-top:.15em}
.v3-words #words .entry .body{margin-top:.7em}
.v3-words #words .entry p{font-size:clamp(16px,1.25vw,19px);max-width:44ch}
.v3-words #words .entry[data-letter]:before{content:attr(data-letter);display:block;font-family:'GFS Didot',Didot,serif;font-size:clamp(56px,6vw,96px);line-height:1;color:var(--soft);margin-bottom:.15em}
.v3-words #words .entry .story{display:inline-block;margin-top:.6em;font-size:var(--small)}
.v3-words #words .entry.season{column-span:all}
@media (max-width:900px){.v3-words #words .rows{column-count:1}}
.detail .cr{position:absolute;right:var(--pad);bottom:10px;font-size:11px;color:rgba(238,235,228,.7);max-width:60%;text-align:right}

/* ---------- STORY · Mystery: the eye ----------
   Mystery may come from myein, to close the eyes. Each painting opens like an eye as you scroll in and closes as you leave.
   The inside of the hall stays shut: nobody wrote down what was shown. */
.fold.post.opens{animation:eyeopen 1.8s cubic-bezier(.45,0,.2,1) .2s both}
@keyframes eyeopen{from{clip-path:ellipse(80% 0.4% at 50% 50%)}to{clip-path:ellipse(120% 120% at 50% 50%)}}
.scene.eye .pic{clip-path:ellipse(calc(60% + var(--o,1) * 60%) calc(0.4% + var(--o,1) * 120%) at 50% 50%);background:#0b0b0a}
.scene.eye.blind .pic{display:flex;align-items:center;justify-content:center}
.scene.eye.blind .lid{display:block;transform:translateY(22vh);width:min(70vw,520px);height:min(18vw,130px);border-bottom:1px solid rgba(238,235,228,.55);border-radius:0 0 50% 50%}
@media (prefers-reduced-motion:reduce){.fold.post.opens{animation:none}}
.v3-mystery .tale.v3-word{padding-top:0}
.v3-mystery .tale.v3-word .word{grid-column:1;grid-row:1}
.v3-mystery .tale.v3-word .text.src{grid-column:2 / -1;grid-row:1;color:var(--soft);font-size:var(--small);line-height:1.45;max-width:60ch}
.v3-mystery .tale.v3-word .wsecret{grid-column:2 / -1}
@media (max-width:700px){.v3-mystery .tale.v3-word .word,.v3-mystery .tale.v3-word .text.src,.v3-mystery .tale.v3-word .wsecret{grid-column:1;grid-row:auto}}

/* ---------- PLAY · The witch's wardrobe ----------
   One postcard witch, seven pieces, oldest first. In each painting the site's own light walks from the middle to the piece.
   Each piece gets a sewn label ("First seen"), and at the end you dress your own witch with three of them. */
.v3-witch .intro{padding:clamp(56px,10vh,120px) var(--pad);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
.v3-witch .intro p{grid-column:2 / -1;font-size:clamp(22px,2.4vw,36px);letter-spacing:-.02em;line-height:1.18;max-width:28ch}
@media (max-width:700px){.v3-witch .intro{grid-template-columns:minmax(0,1fr)}.v3-witch .intro p{grid-column:1}}
.scene.lamp .pic:after{display:none}
.scene.lamp .light{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at calc(50% + (var(--Lx,50%) - 50%) * var(--f,0)) calc(50% + (var(--Ly,50%) - 50%) * var(--f,0)),
    rgba(11,11,10,0) 0, rgba(11,11,10,0) calc(14vmin + var(--f,0) * 6vmin), rgba(11,11,10,.86) calc(34vmin + var(--f,0) * 8vmin))}
.scene.lamp .beat:first-child{min-height:100vh;min-height:100svh}
/* the sewn label */
.tag{display:inline-grid;grid-template-columns:auto;justify-items:center;gap:.15em;background:#EEEBE4;color:#151514;padding:14px 22px 16px;min-width:13em;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;line-height:1.25;text-align:center;position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,.35);outline:1px dashed rgba(21,21,20,.35);outline-offset:-6px}
.tag .tn{font-size:17px;letter-spacing:.04em;font-weight:500}
.tag .tf{color:#65625b;margin-top:.5em;font-size:11px}
.tag .td{font-family:'GFS Didot',Didot,serif;font-size:28px;letter-spacing:0;text-transform:none;line-height:1.05}
.tag .tw{color:#65625b;text-transform:none;letter-spacing:0;font-size:13px}
/* dress your witch */
.dress{padding:clamp(56px,10vh,120px) var(--pad);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(24px,4vh,40px);border-top:1px solid var(--rule)}
.dress .dhead{grid-column:1}
.dress h2{font-size:clamp(26px,3vw,44px);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.dress .dhead p{color:var(--soft);margin-top:.8em;max-width:28ch}
.dress .chips{grid-column:2 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.chip{appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer;display:grid;gap:.25em}
.chip img{width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.chip .cn{font-size:clamp(15px,1.3vw,18px);letter-spacing:-.01em;margin-top:.3em}
.chip .cd{color:var(--soft);font-size:var(--small)}
.chip[aria-pressed="true"] img{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink);transform:scale(.94)}
.chip[aria-pressed="true"] .cn{font-weight:500}
.chip:disabled{opacity:.4;cursor:default}
.chip:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.dress .card{grid-column:2 / -1;background:#0b0b0a url(witch/postcard.webp) 55% 45%/cover no-repeat;color:#EEEBE4;position:relative;overflow:hidden;
  min-height:min(125vw,640px);max-width:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.4vh,24px);padding:clamp(20px,4vw,40px);text-align:center}
.dress .card:before{content:"";position:absolute;inset:0;background:rgba(11,11,10,.62)}
.dress .card>*{position:relative}
.dress .ck{font-size:clamp(20px,2vw,28px);letter-spacing:-.02em}
.dress .ctags{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:120px;justify-content:center}
.dress .ctags .tag{min-width:14em;padding:8px 16px 10px}
.dress .ctags .tag .tf{margin-top:.2em}
.dress .ctags .tag .td{font-size:22px}
.dress .cempty{color:rgba(238,235,228,.7)}
.dress .cl{max-width:30ch;font-size:15px;line-height:1.35;color:rgba(238,235,228,.85)}
.dress .cu{font-size:12px;color:rgba(238,235,228,.7);letter-spacing:.02em}
.dress .acts{grid-column:2 / -1;display:flex;flex-wrap:wrap;gap:.6em 1.4em;align-items:baseline}
.dress .act{font-size:clamp(18px,1.6vw,22px)}
.dress .act:disabled{opacity:.4;cursor:default}
@media (max-width:700px){
  .dress{grid-template-columns:minmax(0,1fr)}
  .dress .dhead,.dress .chips,.dress .card,.dress .acts{grid-column:1}
  .dress .chips{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .chip .cd{display:none}
  .chip .cn{font-size:13px}
}
/* which witch: one piece kept, her painting fills the panel */
.dress .chips{grid-template-columns:repeat(7,minmax(0,1fr))}
.dress .result{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);background:#0b0b0a;color:#EEEBE4;min-height:min(90vh,760px);scroll-margin-top:16px}
.dress .result[hidden]{display:none}
.dress .rpic{background-size:cover;background-repeat:no-repeat;min-height:420px;animation:rin .9s cubic-bezier(.22,1,.36,1) both}
@keyframes rin{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
.dress .rtx{padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;justify-content:flex-end;gap:.6em}
.dress .rk{color:rgba(238,235,228,.75);font-size:var(--small)}
.dress .rn{font-size:clamp(48px,7vw,110px);font-weight:500;letter-spacing:-.05em;line-height:.88}
.dress .rl{font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;line-height:1.2;max-width:22ch}
.dress .rs{color:rgba(238,235,228,.65);font-size:13px;line-height:1.4;max-width:40ch;margin-top:.6em}
.dress .result .act{color:#EEEBE4}
.dress .result .soft{color:rgba(238,235,228,.7)}
@media (prefers-reduced-motion:reduce){.dress .rpic{animation:none}}
@media (max-width:700px){
  .dress .chips{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dress .result{grid-template-columns:minmax(0,1fr);margin:0 calc(-1 * var(--pad))}
  .dress .rpic{min-height:62vh}
  .dress .rn{font-size:15vw}
}
/* the look: each piece's story, then its old pictures in a row you swipe, oldest first */
.look,.ale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(24px,4vh,40px);padding:clamp(48px,9vh,110px) var(--pad)}
.look>header,.ale>header{grid-column:1}
.look>header .n{display:block;font-family:'GFS Didot',Didot,serif;font-size:clamp(44px,6vw,96px);line-height:.9}
.look>header h2,.ale>header h2{font-size:clamp(24px,2.6vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.05;margin-top:.3em}
.ale>header .lede{color:var(--soft);margin-top:.6em}
.look .text,.ale .text{grid-column:2 / -1;max-width:36em}
.look .text p,.ale .text p{font-size:clamp(18px,1.5vw,21px);line-height:1.5}
.look .text p+p,.ale .text p+p{margin-top:1em}
.strip{grid-column:1 / -1;display:flex;gap:clamp(14px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin:0 calc(-1 * var(--pad));padding-left:var(--pad);padding-right:var(--pad);scrollbar-width:thin}
.ref{flex:0 0 auto;scroll-snap-align:start;margin:0;width:clamp(220px,26vw,340px);display:flex;flex-direction:column;gap:.6em}
.ref img{width:100%;height:clamp(240px,30vw,400px);object-fit:contain;object-position:left bottom;background:transparent}
.ref figcaption{display:grid;gap:.15em;border-top:1px solid var(--rule);padding-top:.5em}
.ref .y{font-family:'GFS Didot',Didot,serif;font-size:clamp(26px,2.4vw,36px);line-height:1}
.ref .w{font-size:15px;line-height:1.3}
.ref .m{font-size:12px;color:var(--soft);line-height:1.3}
.ref.txt blockquote{margin:0;height:clamp(240px,30vw,400px);display:flex;align-items:flex-end;font-size:clamp(20px,1.9vw,26px);letter-spacing:-.02em;line-height:1.2;font-style:italic;padding-bottom:.4em}
.ale{background:#e2ded5;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ale .alepics{grid-column:1;grid-row:2 / span 2;display:grid;gap:clamp(14px,2vw,24px);align-content:start}
.ale .alepics .ref{width:auto}
.ale .alepics .ref img{height:clamp(220px,24vw,360px)}
.ale .text{grid-row:2 / span 2}
.ale .told{font-size:clamp(20px,1.9vw,26px)!important;line-height:1.3!important;letter-spacing:-.01em}
.ale .checks{margin:1em 0;display:grid;gap:.7em}
.ale .checks li{position:relative;padding-left:1.6em;font-size:clamp(17px,1.4vw,20px);line-height:1.45}
.ale .checks li:before{content:"✓";position:absolute;left:0;top:0;color:var(--ink)}
.ale .checks b{font-weight:500}
.credits .cnote{grid-column:2 / -1;color:var(--soft);font-size:var(--small);line-height:1.45;max-width:70ch}
@media (max-width:700px){
  .look,.ale{grid-template-columns:minmax(0,1fr)}
  .look>header,.ale>header,.look .text,.ale .text,.strip,.ale .alepics{grid-column:1;grid-row:auto}
  .look>header{display:flex;align-items:baseline;gap:14px}
  .ale .alepics{grid-template-columns:1fr 1fr}
  .ref{width:72vw}
  .ref img,.ref.txt blockquote{height:62vw}
  .credits .cnote{grid-column:1}
}
/* "More stories" / "Read on" at the end of every page: the same wall of figures as the Stories page */
.wall.more{border-top:1px solid var(--rule)}
.wall .all{margin-top:1.2em}
.wall .noimg{display:block;height:100%}
.wall li img[src*="door"],.wall li img[src*="d-hat"]{object-fit:cover;object-position:center 30%;width:72%;border-radius:2px}