/* The article, September 2026 - the whole of it.

   article-kit.html's own rules: one drawing for every kind of block that
   article_blocks holds, in the mock's order. Covers /articles/{slug} and
   /preview/article/{slug}, which are the same page.

   The reading body is here now rather than in _ours.css, which the article
   page no longer loads. What is left out: the chrome (the shared sheet's and
   the shared components'), the ground and the type (the shared sheet's), and
   the mock's own furniture - its contents list, the spec panel beside each
   section, and the survey table at the foot, none of which is the article.

   Built by scratchpad/design-2026/build-article-kit.py - do not edit by
   hand.                                                                  */
.h2 em,h1 em,h2 em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em;letter-spacing:0}
header.site.glass{background-color:transparent;color:#fff}
header.site.glass .flow a,header.site.glass .menu-word{color:#fff}
header.site.glass .mk img{filter:invert(1) brightness(2)}
/* 1 · the opening, as approved */
.hero{position:relative;height:clamp(440px,64vh,680px);overflow:hidden;background:var(--forest);color:#fff}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.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(40px,7vh,72px);text-align:center}
.hero .issue{display:inline-flex;align-items:center;gap:16px}
.hero .issue img{height:56px;width:auto;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.hero .issue span{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.88);line-height:1.9}
.hero .issue span b{display:block;font-family:var(--serif);font-weight:400;font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;color:#fff}
.hero h1{font-family:var(--face);font-weight:400;font-size:min(clamp(40px,5.4vw,80px), 28px + (clamp(40px,5.4vw,80px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.01em;margin:22px auto 0;max-width:15ch;text-wrap:balance}
.hero .stand{margin:20px auto 0;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 .by{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px clamp(22px,3vw,40px);font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.hero .by b{color:#fff;margin-left:10px}
.hero .credit{position:absolute;right:var(--edge);bottom:clamp(40px,7vh,72px);color:rgba(255,255,255,.8)}
.hero .credit b{color:#fff}
@media(max-width:820px){.hero .credit{display:none}}
/* 2 · the reading column */
.band{padding:clamp(56px,9vh,110px) 0}
.col{max-width:var(--col);margin:0 auto;padding:0 clamp(28px,6vw,52px);text-align:left}
.col + .col{margin-top:26px}
.col p{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.92;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4}
.col p + p{margin-top:24px}
.col p.lede::first-letter{font-family:var(--face);font-weight:500;font-size:min(4.2em, 28px + (4.2em - 28px) * 0.6);line-height:.78;float:left;margin:10px 14px 0 0;color:#C08C3D}
.col h2{font-family:var(--face);font-weight:500;font-size:27px;line-height:1.48;letter-spacing:.016em;color:var(--ink-75);margin:clamp(26px,3vh,38px) 0 28px;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.col h2:first-child{margin-top:0}
.col h3{font-family:var(--face);font-style:normal;font-weight:500;font-size:27px;line-height:1.48;letter-spacing:.016em;color:var(--ink-75);margin:clamp(26px,3vh,38px) 0 28px;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.col h3:first-child{margin-top:0}
.col .note{margin-top:6px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-55)}
.col a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ink-35);transition:text-decoration-color .3s}
.col a:hover{text-decoration-color:var(--ink)}
/* 3 · a chapter: the guide's divider, a full band */
.chapter{padding:clamp(40px,6vh,64px) 0}
.chapter .in{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.chapter h2{font-family:var(--face);font-weight:400;font-size:min(clamp(36px,4.4vw,64px), 28px + (clamp(36px,4.4vw,64px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.01em}
.chapter .of{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-75)}
/* 4 · the pulled line */
.pull{max-width:var(--col);margin:0 auto;padding:0 clamp(20px,5vw,24px)}
.pull p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:min(clamp(26px,2.6vw,36px), 28px + (clamp(26px,2.6vw,36px) - 28px) * 0.6);line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.pull cite{display:block;margin-top:14px;font-style:normal;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-55)}
.say{position:relative;min-height:min(66vh,600px);display:grid;place-items:center;overflow:hidden;background:var(--forest);color:#fff;text-align:center}
.say img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.say .veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,24,20,.3),rgba(20,24,20,.6))}
.say blockquote{position:relative;max-width:30ch;padding:clamp(64px,10vh,120px) var(--edge);font-family:var(--serif);font-style:italic;font-weight:400;font-size:min(clamp(26px,3vw,44px), 28px + (clamp(26px,3vw,44px) - 28px) * 0.6);line-height:1.28;letter-spacing:-.01em;text-wrap:balance}
.say cite{display:block;margin-top:28px;font-style:normal;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.85)}
/* 5 · photographs */
.plate{max-width:calc(var(--col) + 18rem);margin:clamp(44px,7vh,72px) auto;padding:0 var(--edge)}
.plates > :first-child{margin-top:0}
.plates > :last-child{margin-bottom:0}
.plate img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;background:var(--stone-2)}
.plate figcaption{margin-top:12px}
.plate figcaption::before{content:"Photograph · ";color:var(--ink-55)}
.plate.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.plate.two figure img{aspect-ratio:4/5}
.plate.tall{max-width:34rem}
.plate.tall img{aspect-ratio:4/5}
.beside{max-width:calc(var(--col) + 18rem);margin:clamp(44px,7vh,72px) auto;padding:0 var(--edge);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center}
.beside img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--stone-2)}
.beside p{font-family:var(--serif);font-size:clamp(18px,1.4vw,20px);line-height:1.7;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4}
.beside p + p{margin-top:20px}
@media(max-width:700px){.plate.two,.beside{grid-template-columns:1fr}}
/* 6 · the box */
.box{max-width:var(--col);margin:0 auto;padding:0 clamp(20px,5vw,24px)}
.box > div{background:var(--stone);padding:clamp(24px,3vw,36px) clamp(24px,3vw,40px)}
.box .kick{margin-bottom:10px}
.box p{font-family:var(--serif);font-size:17.5px;line-height:1.65}
.box p + p{margin-top:14px}
.box p b{font-weight:500}
/* 7 · the round-up, one place */
.town .top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(32px,5vh,56px)}
.town .top img{width:100%;aspect-ratio:8/5;object-fit:cover;background:var(--stone-2)}
.town h2{font-family:var(--face);font-weight:400;font-size:min(clamp(36px,4.4vw,64px), 28px + (clamp(36px,4.4vw,64px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.town .where{margin-top:12px;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-75)}
.town .said{margin-top:22px;font-family:var(--serif);font-size:clamp(17px,1.4vw,19.5px);line-height:1.65;max-width:56ch;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4}
.town .said + .said{margin-top:16px}
.getting{margin-top:clamp(32px,5vh,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.getting div{border-top:1px solid var(--stone-2);padding-top:14px}
.getting .note-i{font-style:italic;color:var(--ink-55)}
.getting .kick{margin-bottom:6px}
.getting p{font-family:var(--serif);font-size:16.5px;line-height:1.55}
@media(max-width:900px){.town .top{grid-template-columns:1fr}.getting{grid-template-columns:1fr}}
/* the card that the round-up, the picks and a local's guide all share */
.picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pick{display:flex;flex-direction:column;min-width:0}
.pick .ph{display:block;position:relative;aspect-ratio:8/5;overflow:hidden;background:var(--stone-2)}
.pick .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.pick .ph-link:hover img{transform:scale(1.035)}
.pick .ph.plain{display:grid;place-items:center;background:var(--stone);padding:20px;text-align:center}
.pick .ph.plain span{font-family:var(--script);font-style:italic;font-weight:500;font-size:min(clamp(26px,2.4vw,34px), 28px + (clamp(26px,2.4vw,34px) - 28px) * 0.6);line-height:1.1;color:var(--ink-55);text-wrap:balance}
.pick .tx{display:flex;flex-direction:column;flex:1 1 auto;padding-top:16px}
.pick .k{display:block;margin-bottom:8px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.pick h3{font-family:var(--face);font-weight:400;font-size:clamp(20px,1.6vw,23px);line-height:1.12;text-wrap:balance}
.pick p{margin-top:10px;font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink-75);text-wrap:pretty}
.pick .btns{margin-top:auto;padding-top:18px}
.btn.quiet:hover{background:var(--ink);color:var(--paper)}
.pick .btn{flex:1 1 0;min-height:44px;padding:0 12px;font-size:9.5px}
@media(max-width:1100px){.picks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.picks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.picks{grid-template-columns:1fr}}
/* 8 · the numbered list: one entry */
.entry{max-width:calc(var(--col) + 18rem);margin:0 auto;padding:0 var(--edge)}
.entry + .entry{margin-top:clamp(56px,9vh,110px)}
.entry img{width:100%;aspect-ratio:8/5;object-fit:cover;background:var(--stone-2)}
.entry .row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;align-items:start;margin-top:clamp(20px,3vh,28px)}
.entry .n{width:56px;height:56px;display:grid;place-items:center;background:var(--forest);color:var(--paper);font-family:var(--face);font-size:20px}
.entry h3{font-family:var(--face);font-weight:400;font-size:min(clamp(26px,2.6vw,36px), 28px + (clamp(26px,2.6vw,36px) - 28px) * 0.6);line-height:1.08;text-wrap:balance}
.entry .where{margin-top:6px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-75)}
.entry p{margin-top:16px;font-family:var(--serif);font-size:clamp(17px,1.4vw,19.5px);line-height:1.68;max-width:60ch;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4}
.entry .link{display:inline-block;margin-top:14px;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--ink-35)}
.entry .link:hover{text-decoration-color:var(--ink)}
/* a place named in the text: its photograph on hover. The markup is Weave::anchor()'s, and these rules are link-previews.html's. */
.pv{position:relative;display:inline-block;--pv-w:132px;--pv-h:calc(var(--pv-w) * 5 / 4);--pv-pad:4px;--pv-lift:14px;--pv-ms:260ms;--pv-from:95%;--pv-shade:18%;--pv-mount:var(--forest)}
.pv > a{color:var(--ink);font-weight:600;text-decoration:none;box-shadow:inset 0 -1px 0 rgba(65,64,66,.28);transition:box-shadow var(--pv-ms) var(--ease)}
.pv:hover > a,.pv:focus-within > a{box-shadow:inset 0 -2px 0 var(--ink)}
.pv-set{position:absolute;left:50%;bottom:100%;margin-bottom:var(--pv-lift);width:calc(var(--pv-w) + 2*var(--pv-pad));height:calc(var(--pv-h) + 2*var(--pv-pad));transform:translateX(-50%);pointer-events:none;z-index:20;display:block}
.pv-card{position:absolute;bottom:0;left:50%;display:block;background:var(--pv-mount);padding:var(--pv-pad);width:calc(var(--pv-w) + 2*var(--pv-pad));height:calc(var(--pv-h) + 2*var(--pv-pad));box-shadow:0 6px 18px rgba(65,64,66,calc(var(--pv-shade)/100)),0 1px 2px rgba(65,64,66,.1);opacity:0;transform:translateX(-50%) translateY(4px) scale(var(--pv-from));transition:opacity var(--pv-ms) var(--ease),transform var(--pv-ms) var(--ease)}
.pv-card img{width:var(--pv-w);height:var(--pv-h);object-fit:cover;display:block;max-width:none}
.pv:hover .pv-card,.pv:focus-within .pv-card{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
@media(prefers-reduced-motion:reduce){.pv-card{transition:opacity 1ms linear}}
.grid4{display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.grid4::-webkit-scrollbar{display:none}
.grid4 > *{flex:0 0 clamp(200px,20vw,248px);scroll-snap-align:start}
.swipe{position:relative}
.swipe .arw{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;cursor:pointer;background:var(--paper);box-shadow:0 1px 3px rgba(65,64,66,.16);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1;transition:opacity .25s var(--ease),background .25s,box-shadow .25s}
.swipe .arw:first-of-type{right:calc(100% + 14px)}
.swipe .arw:last-of-type{left:calc(100% + 14px)}
.swipe .arw:hover{background:#fff;box-shadow:0 2px 8px rgba(65,64,66,.22)}
.swipe .arw[disabled]{opacity:.22;pointer-events:none;box-shadow:none}
.c{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--stone-2);color:#fff}
.c .sh{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6) 0,rgba(0,0,0,.16) 44%,rgba(0,0,0,0) 64%);pointer-events:none}
.c h3{font-family:var(--face);font-weight:400;font-size:min(clamp(22px,2vw,28px), 28px + (clamp(22px,2vw,28px) - 28px) * 0.6);line-height:1.08;text-wrap:balance}
@media(max-width:1320px){.swipe .arw{display:none}}
/* 11 · a local's guide: meet, the weekend, the tips */
.meet .in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,110px);align-items:center}
.meet .por{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--stone-2);max-width:460px}
.meet .por img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.meet h2{font-family:var(--face);font-weight:400;font-size:min(clamp(36px,4.4vw,64px), 28px + (clamp(36px,4.4vw,64px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.meet .of{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-75)}
.meet p{margin-top:22px;font-family:var(--serif);font-size:clamp(17px,1.4vw,19.5px);line-height:1.62;max-width:56ch;text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4}
.meet p + p{margin-top:16px}
@media(max-width:900px){.meet .in{grid-template-columns:1fr}}
.weekend h2{font-family:var(--face);font-weight:400;font-size:min(clamp(36px,4.4vw,64px), 28px + (clamp(36px,4.4vw,64px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.01em;text-wrap:balance;color:#fff}
.days{margin-top:clamp(32px,5vh,56px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px)}
.day{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;align-items:start}
.day .n{width:46px;height:46px;display:grid;place-items:center;background:var(--paper);color:var(--forest);font-family:var(--face);font-size:17px}
.day h3{font-family:var(--face);font-weight:400;font-size:min(clamp(22px,2vw,28px), 28px + (clamp(22px,2vw,28px) - 28px) * 0.6);line-height:1.1;color:#fff}
.day p{margin-top:10px;font-family:var(--serif);font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.65;color:var(--on-forest);max-width:50ch;text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4}
.tips .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vh,40px) clamp(28px,4vw,60px)}
.tip{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;align-items:start}
.tip .n{width:46px;height:46px;display:grid;place-items:center;background:var(--forest);color:var(--paper);font-family:var(--face);font-size:17px}
.tip h3{font-family:var(--face);font-weight:400;font-size:min(clamp(21px,1.9vw,26px), 28px + (clamp(21px,1.9vw,26px) - 28px) * 0.6);line-height:1.12}
.tip p{margin-top:8px;font-family:var(--serif);font-size:16.5px;line-height:1.6;color:var(--ink-75);text-wrap:pretty}
@media(max-width:900px){.days,.tips .rows{grid-template-columns:1fr}}
/* 12 · the recipe: what you need, what to do, whose it is */
.recipe .in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,110px);align-items:start}
.recipe .serves{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-75);margin-bottom:22px}
.recipe h2{font-family:var(--face);font-weight:400;font-size:min(clamp(28px,2.8vw,40px), 28px + (clamp(28px,2.8vw,40px) - 28px) * 0.6);line-height:1.05;margin-bottom:18px}
.recipe h3{font-family:var(--face);font-weight:400;font-size:clamp(19px,1.6vw,22px);line-height:1.15;margin:22px 0 8px}
.recipe h3:first-of-type{margin-top:0}
.need{list-style:none}
.need li{font-family:var(--serif);font-size:17px;line-height:1.55;padding:9px 0;border-bottom:1px solid var(--stone-2)}
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;align-items:start;padding:14px 0}
.steps li::before{content:counter(s);width:46px;height:46px;display:grid;place-items:center;background:var(--forest);color:var(--paper);font-family:var(--face);font-size:17px}
.steps li p{font-family:var(--serif);font-size:clamp(17px,1.4vw,19px);line-height:1.65;padding-top:8px;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4}
.yield{margin-top:26px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-75)}
.yield a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ink-35)}
@media(max-width:820px){.recipe .in{grid-template-columns:1fr}}
/* 13 · what's on: three to a row */
.things-on .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.ev{border-top:1px solid var(--ink);padding-top:16px}
.ev .kick{margin-bottom:8px}
.ev h3{font-family:var(--face);font-weight:400;font-size:min(clamp(22px,2vw,28px), 28px + (clamp(22px,2vw,28px) - 28px) * 0.6);line-height:1.1}
.ev p{margin-top:10px;font-family:var(--serif);font-size:16.5px;line-height:1.6;color:var(--ink-75)}
.ev.past{opacity:.55}
.ev .when{display:block;margin-top:10px;font-family:var(--serif);font-style:italic;font-size:15.5px}
@media(max-width:820px){.things-on .grid3{grid-template-columns:1fr}}
/* 14 · a tale: the folklore opening */
.tale .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:center}
.tale .art{aspect-ratio:4/5;overflow:hidden;background:var(--stone-2)}
.tale .art img{width:100%;height:100%;object-fit:cover}
.tale h2{font-family:var(--face);font-weight:400;font-size:min(clamp(40px,5vw,72px), 28px + (clamp(40px,5vw,72px) - 28px) * 0.6);line-height:1;letter-spacing:-.012em;text-wrap:balance}
.tale .where{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink-75)}
.tale .stamp{width:96px;height:auto;margin-bottom:22px;opacity:.85}
@media(max-width:820px){.tale .in{grid-template-columns:1fr}}
/* 15 · the way out */
.out .in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,90px);align-items:center}
.out h2{font-family:var(--face);font-weight:400;font-size:min(clamp(32px,3.6vw,52px), 28px + (clamp(32px,3.6vw,52px) - 28px) * 0.6);line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.out .links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px}
.out .links a{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--ink-35)}
.out .links a:hover{text-decoration-color:var(--ink)}
@media(max-width:820px){.out .in{grid-template-columns:1fr}}
.next{position:relative;display:block;min-height:min(70vh,640px);overflow:hidden;background:var(--forest);color:#fff}
.next > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 2s var(--ease)}
.next:hover > img{transform:scale(1.03)}
.next .veil{position:absolute;inset:0;background:linear-gradient(to right,rgba(20,24,20,.7),rgba(20,24,20,.15))}
.next .in{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(70vh,640px);padding-top:clamp(64px,10vh,120px);padding-bottom:clamp(48px,8vh,88px)}
.next .kick{color:rgba(255,255,255,.85)}
.next h2{font-family:var(--face);font-weight:400;font-size:min(clamp(40px,5.2vw,76px), 28px + (clamp(40px,5.2vw,76px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.01em;margin-top:16px;max-width:14ch;text-wrap:balance}
.next p{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.4vw,20px);line-height:1.45;max-width:50ch;color:rgba(255,255,255,.92)}
.next .go{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;margin-top:28px;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;background:var(--paper);color:var(--forest);width:max-content}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ---- what app.css says about these names, undone ----

   app.css is the 2023 design, compiled into the bundle and served on every
   page before this sheet, and it uses two of the kit's names for two other
   things. Each line here is the value measured on the mock, not a decision.
   The pass that takes those names out of app.css is in docs/TODO.md 14.   */
.plate figcaption{padding:0;text-align:start}

/* ---- the gate, on a members-only article ----

   The opening and the first two paragraphs, the reading fading into paper,
   then this over the article's own photograph. From payments.html, which is
   where the gate is drawn; its `.gate-demo` wrapper is the mock's own
   furniture and is dropped, and `.col` is this page's reading column.
   Signed-in members never see any of it, and an open article never gates. */
.gate{position:relative;min-height:min(70vh,560px);display:grid;align-items:center;overflow:hidden;background:var(--forest);color:var(--on-forest)}
.gate > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.gate .veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(43,48,29,.75),rgba(43,48,29,.92))}
.gate .in{position:relative;padding-top:clamp(48px,8vh,80px);padding-bottom:clamp(48px,8vh,80px)}
.gate .kick{color:var(--on-forest-55)}
.gate h2{font-family:var(--face);font-weight:400;font-size:min(clamp(36px,4.4vw,64px), 28px + (clamp(36px,4.4vw,64px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.01em;max-width:16ch;text-wrap:balance;color:#fff}
.gate p{margin-top:18px;font-family:var(--serif);font-size:18px;line-height:1.6;max-width:48ch}
.gate .btns{margin-top:26px}
.gate .btn{border-color:var(--paper);color:var(--forest);background:var(--paper)}
.gate .btn.quiet{background:transparent;color:var(--on-forest);border-color:rgba(241,237,232,.55)}
.gate .btn.quiet:hover{background:var(--on-forest);color:var(--forest)}
.col.open{position:relative}
.col.open::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(to bottom,rgba(251,249,246,0),var(--paper))}
/* The itinerary's gate says this and the article's wants it:
   the heading's last word is set in the script face, as every heading on the
   site is. From itin3-gate-tokens.html.                                   */
.gate h2 em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em}

/* ---- the foot of a printed article ----

   The issue's cover standing with a paper folio plate over its foot, and the
   pitch beside it in one of three states: a visitor, a member, and a piece
   that was never in an issue. Never a spread - those are in the reader,
   behind the gate, which is the whole point of it. From printed.html.    */
.printed .in{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(32px,6vw,110px);align-items:center}
.obj{position:relative;max-width:360px}
.cov{display:block;position:relative;aspect-ratio:var(--tall);overflow:hidden;background:var(--stone-2);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.folio{position:absolute;left:-14px;bottom:28px;background:var(--paper);color:var(--forest);font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;padding:10px 14px}
.printed h2{font-family:var(--face);font-weight:400;font-size:min(clamp(36px,4.4vw,66px), 28px + (clamp(36px,4.4vw,66px) - 28px) * 0.6);line-height:1.02;letter-spacing:-.01em;text-wrap:balance;color:#fff}
.printed h2 em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em}
.printed p{margin-top:22px;font-family:var(--serif);font-size:clamp(17px,1.4vw,19.5px);line-height:1.62;max-width:52ch}
.printed .btns{margin-top:26px}
.printed .fine{margin-top:16px;font-style:italic;font-size:15.5px;color:var(--on-forest-55)}
.printed .fine a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:820px){.printed .in{grid-template-columns:1fr}.obj{max-width:240px}}
/* a tale opens on its own block and its title is the page h1 (SWEEP 4) */ .tale h1{font-family:var(--face);font-weight:400;font-size:min(clamp(40px,5vw,72px), 28px + (clamp(40px,5vw,72px) - 28px) * 0.6);line-height:1;letter-spacing:-.012em;text-wrap:balance}
/* ---- the paywall, the classic: from public/design-2026/article-wall/top.html ---- */
.wt-k{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(43,48,29,.6);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.wt-k svg{width:14px;height:16px;flex:0 0 auto}
.wt-h{font-family:var(--face);font-weight:400;font-size:min(clamp(32px,3.6vw,46px), 28px + (clamp(32px,3.6vw,46px) - 28px) * 0.6);line-height:1.05;margin:0 0 12px}
.wt-s{font-family:var(--serif);font-size:17px;line-height:1.6;margin:0 0 26px;max-width:56ch;text-wrap:balance}
.wt-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 32px}
.wt-strip figure{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden}
.wt-strip img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.82)}
.wt-strip figcaption{position:absolute;left:10px;right:10px;bottom:10px;color:#fff;font-family:var(--face);font-size:18px;line-height:1.1}
.wt-plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 20px}
.wt-plan{border:1px solid rgba(43,48,29,.25);padding:22px;text-align:left}
.wt-plan b{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.wt-plan strong{display:block;font-family:var(--face);font-weight:400;font-size:min(40px, 28px + (40px - 28px) * 0.6);line-height:1;margin-bottom:10px}
.wt-plan p{font-family:var(--serif);font-size:15px;line-height:1.5;margin:0 0 18px}
.wt-after{font-family:var(--serif);font-size:16px;margin:0;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.wt-after a.u{text-decoration:underline;text-underline-offset:3px}
.wt-box{position:relative;z-index:2;background:#fff;border:1px solid rgba(43,48,29,.18);box-shadow:0 24px 70px rgba(43,48,29,.16);padding:44px 48px 40px}
.wt-box.center{text-align:center}
.wt-box.center .wt-k{justify-content:center}
.wt-box.center .wt-s{margin-left:auto;margin-right:auto}
.wt-box.center .wt-after{justify-content:center}
.wt-classic .wt-box{max-width:860px;margin:-40px auto 72px}
@media (max-width:760px){.wt-strip{grid-template-columns:repeat(2,1fr)}.wt-strip figure:nth-child(n+3){display:none}.wt-plans{grid-template-columns:1fr}.wt-box{padding:30px 22px}.wt-classic .wt-box{margin-left:16px;margin-right:16px}}