/*
 * anleitung · tripaufmagischentruffeln.com
 * 1. Concept: a Bauhaus instruction sheet / assembly manual for one truffle trip in the Netherlands.
 * 2. Type: Outfit (geometric display, step numbers, labels) + Red Hat Text (reading text). Self-hosted woff2.
 * 3. Palette: paper #f3f1ea, sheet #fbfaf6, ink #151515, graphite #55524b, Bauhaus blue #1f45a8,
 *    signal yellow #f2b705 (fills only), signal red #c8341b (warnings).
 * 4. Layout signature: home = cover sheet with an exploded parts drawing and numbered pins, then a
 *    large numbered sequence "Schritt 1 bis 8" with a geometric CSS diagram per step; articles = chapter
 *    plate with a huge chapter number, side rail with parts list and work steps, h2 sections as step boxes "3.2".
 * 5. Detail: every rule is a solid 2px ink line; circle, square and triangle return as the only ornaments.
 */
@font-face{font-family:"Outfit";font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/outfit-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/outfit-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Red Hat Text";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/redhat-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Red Hat Text";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/redhat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Red Hat Text";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/redhat-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Red Hat Text";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/redhat-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#f3f1ea;--sheet:#fbfaf6;--ink:#151515;--grey:#55524b;--blue:#1f45a8;--yellow:#f2b705;--red:#c8341b;
  --line:2px solid var(--ink);--thin:1px solid #c9c5b9;
  --display:"Outfit",ui-sans-serif,system-ui,sans-serif;--text:"Red Hat Text",ui-sans-serif,system-ui,sans-serif;
  --gut:clamp(1rem,4vw,2.5rem);--max:78rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--text);font-feature-settings:"kern"}
@media (min-width:48rem){body{font-size:1.125rem}}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.01em;margin:0}
p,ul,ol{margin:0 0 1em}
strong{font-weight:700}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem 1rem}
.skip:focus{left:1rem;z-index:5}
.sq{display:inline-block;width:.7em;height:.7em;background:var(--yellow);border:var(--line);margin-right:.5em;vertical-align:-.05em}
.kicker{font:600 .8rem/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;margin:0 0 1rem}

/* masthead */
.mast{border-top:10px solid var(--ink);border-bottom:var(--line);background:var(--paper)}
.mast-in{max-width:var(--max);margin:0 auto;padding:.75rem var(--gut);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--ink);text-decoration:none;margin-right:auto}
.brand img{width:44px;height:44px}
.brand-name{font:700 1.15rem/1.1 var(--display);letter-spacing:-.01em}
.mast-doc{display:none;margin:0;font:500 .78rem/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.menu summary{list-style:none;cursor:pointer;font:600 .85rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;border:var(--line);padding:.6rem .8rem;background:var(--yellow)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--ink);color:var(--paper)}
.tabs{display:flex;flex-direction:column;margin-top:.6rem;border-top:var(--line)}
.tabs a{display:flex;gap:.7rem;align-items:baseline;padding:.65rem 0;border-bottom:var(--thin);color:var(--ink);text-decoration:none;font:600 1rem/1.2 var(--display)}
.tab-no{font-weight:800;color:var(--blue);min-width:1.6em}
.tabs a[aria-current]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.3em}
.menu{flex-basis:auto}
.menu[open]{flex-basis:100%;order:3}
.langs a{font:600 .8rem var(--display);margin-left:.5rem}
.tabs-desk{display:none}
@media (min-width:64rem){
  .mast-doc{display:block}
  .menu{display:none}
  .tabs-desk{display:flex;flex-direction:row;flex-basis:100%;order:3;margin:0;border-top:var(--line)}
  .tabs-desk a{flex:1;border:0;border-left:var(--thin);padding:.6rem .8rem;font-size:.95rem}
  .tabs-desk a:first-child{border-left:0}
  .tabs-desk a[aria-current]{background:var(--ink);color:var(--paper);text-decoration:none}
  .tabs-desk a[aria-current] .tab-no{color:var(--yellow)}
}

main{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* home: cover */
.cover{display:grid;gap:2rem;padding:2.5rem 0 3rem;border-bottom:var(--line)}
.cover h1{font-size:clamp(2.4rem,7vw,4.8rem);font-weight:800;line-height:.98;letter-spacing:-.025em;margin-bottom:1.5rem;max-width:12ch}
.lead p{max-width:40rem;font-size:1.1rem}
.lead p:first-child{font-size:1.2rem}
.parts-fig{margin:0;background:var(--sheet);border:var(--line)}
.parts-img{position:relative;border-bottom:var(--line)}
.pin{position:absolute;width:clamp(18px,2.6vw,30px);height:clamp(18px,2.6vw,30px);border-radius:50%;background:var(--yellow);border:2px solid var(--ink);transform:translate(-50%,-50%);display:grid;place-items:center;font:800 clamp(.62rem,1.2vw,.85rem)/1 var(--display);color:var(--ink)}
.pin-1{left:37.8%;top:8%}.pin-2{left:68.4%;top:8.8%}.pin-3{left:96.2%;top:7%}.pin-4{left:34.7%;top:47.2%}.pin-5{left:96.2%;top:38.9%}.pin-6{left:50%;top:79.9%}.pin-7{left:91.3%;top:69.9%}
.parts-fig figcaption{padding:1rem 1.1rem 1.1rem}
.fig-label{display:block;font:700 .78rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.8rem}
.legend{list-style:none;padding:0;margin:0;columns:2 12rem;column-gap:1.5rem;counter-reset:pin;font-size:.95rem;line-height:1.35}
.legend li{counter-increment:pin;display:flex;gap:.55rem;align-items:baseline;break-inside:avoid;margin-bottom:.45rem}
.legend li::before{content:counter(pin);flex:none;width:1.45rem;height:1.45rem;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);display:grid;place-items:center;font:800 .72rem/1 var(--display)}
@media (min-width:60rem){
  .cover{grid-template-columns:5fr 6fr;align-items:start;gap:3rem;padding-top:3.5rem}
}

/* home: the step sequence */
.sequence{padding:3rem 0 2rem}
.seq-head{display:grid;gap:.5rem;border-bottom:var(--line);padding-bottom:1.2rem;margin-bottom:0}
.seq-title{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.02em}
.seq-note{margin:0;color:var(--grey);max-width:38rem}
@media (min-width:48rem){.seq-head{grid-template-columns:1fr 1fr;align-items:end}}
.steps{list-style:none;margin:0;padding:0}
.step{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"no dg" "text text";gap:1rem 1.25rem;padding:2rem 0;border-bottom:var(--line)}
.step-no{grid-area:no;font:800 clamp(4.5rem,14vw,8.5rem)/.8 var(--display);letter-spacing:-.05em;color:var(--ink)}
.dg{grid-area:dg;justify-self:end}
.step-text{grid-area:text;max-width:44rem}
.step-text h3{font-size:clamp(1.5rem,3.2vw,2.1rem);margin-bottom:.7rem}
.step-text p{margin-bottom:.8rem}
.to-chapter{display:inline-flex;align-items:center;gap:.6rem;font:700 .9rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;border:var(--line);padding:.6rem .9rem;background:var(--sheet)}
.to-chapter::before{content:"";width:0;height:0;border-left:.6em solid var(--blue);border-top:.36em solid transparent;border-bottom:.36em solid transparent}
.to-chapter:hover{background:var(--ink);color:var(--paper)}
.step:nth-child(even) .step-no{color:var(--blue)}
@media (min-width:56rem){
  .step{grid-template-columns:11rem 1fr 11rem;grid-template-areas:"no text dg";align-items:start;gap:2.5rem;padding:2.75rem 0}
  .step:nth-child(even){grid-template-columns:11rem 1fr 11rem}
  .dg{justify-self:center}
}

/* geometric diagrams, one per step (pure CSS, 9rem box) */
.dg{position:relative;width:7.5rem;height:7.5rem;flex:none}
@media (min-width:56rem){.dg{width:9rem;height:9rem}}
.dg i{position:absolute;display:block}
/* 1 shop: outlined block, door, sign */
.dg-1 i:nth-child(1){left:8%;top:22%;width:84%;height:70%;border:3px solid var(--ink);background:var(--sheet)}
.dg-1 i:nth-child(2){left:40%;top:52%;width:22%;height:40%;background:var(--blue)}
.dg-1 i:nth-child(3){left:66%;top:6%;width:26%;height:26%;border-radius:50%;background:var(--yellow);border:3px solid var(--ink)}
/* 2 id card + fresh */
.dg-2 i:nth-child(1){left:4%;top:20%;width:92%;height:60%;background:var(--blue)}
.dg-2 i:nth-child(2){left:14%;top:32%;width:28%;height:36%;border-radius:50%;background:var(--yellow)}
.dg-2 i:nth-child(3){left:50%;top:36%;width:36%;height:6%;background:var(--sheet)}
.dg-2 i:nth-child(4){left:50%;top:52%;width:26%;height:6%;background:var(--sheet)}
/* 3 strength scale: three circles, the smallest chosen */
.dg-3 i:nth-child(1){left:2%;top:58%;width:22%;height:22%;border-radius:50%;background:var(--yellow);border:3px solid var(--ink)}
.dg-3 i:nth-child(2){left:28%;top:44%;width:32%;height:32%;border-radius:50%;border:3px solid var(--ink)}
.dg-3 i:nth-child(3){left:58%;top:28%;width:42%;height:42%;border-radius:50%;background:var(--ink)}
.dg-3 i:nth-child(4){left:0;top:86%;width:100%;height:3px;background:var(--ink)}
/* 4 room with two people */
.dg-4 i:nth-child(1){left:6%;top:6%;width:88%;height:88%;border:3px solid var(--ink)}
.dg-4 i:nth-child(2){left:20%;top:44%;width:28%;height:28%;border-radius:50%;background:var(--blue)}
.dg-4 i:nth-child(3){left:54%;top:44%;width:28%;height:28%;border-radius:50%;background:var(--yellow);border:3px solid var(--ink)}
.dg-4 i:nth-child(4){left:6%;top:30%;width:22%;height:3px;background:var(--ink)}
/* 5 take: nugget and downward triangle */
.dg-5 i:nth-child(1){left:30%;top:4%;width:40%;height:34%;border-radius:46% 54% 40% 60%/55% 45% 55% 45%;background:var(--ink)}
.dg-5 i:nth-child(2){left:26%;top:50%;width:0;height:0;border-left:24px solid transparent;border-right:24px solid transparent;border-top:30px solid var(--red)}
.dg-5 i:nth-child(3){left:10%;top:86%;width:80%;height:8%;background:var(--blue)}
@media (min-width:56rem){.dg-5 i:nth-child(2){left:24%;border-left-width:31px;border-right-width:31px;border-top-width:40px}}
/* 6 hours: intensity bars */
.dg-6 i{bottom:8%;width:12%;background:var(--blue)}
.dg-6 i:nth-child(1){left:4%;height:22%}
.dg-6 i:nth-child(2){left:20%;height:62%}
.dg-6 i:nth-child(3){left:36%;height:88%;background:var(--yellow);border:3px solid var(--ink)}
.dg-6 i:nth-child(4){left:52%;height:56%}
.dg-6 i:nth-child(5){left:68%;height:70%}
.dg-6 i:nth-child(6){left:84%;height:28%}
.dg-6::after{content:"";position:absolute;left:0;right:0;bottom:5%;height:3px;background:var(--ink)}
/* 7 tipping point: warning triangle, a calm square */
.dg-7 i:nth-child(1){left:6%;top:6%;width:0;height:0;border-left:3.1rem solid transparent;border-right:3.1rem solid transparent;border-bottom:5.4rem solid var(--red)}
.dg-7 i:nth-child(2){left:62%;top:58%;width:34%;height:34%;background:var(--blue)}
.dg-7 i:nth-child(3){left:33%;top:46%;width:6%;height:20%;background:var(--sheet)}
.dg-7 i:nth-child(4){left:33%;top:70%;width:6%;height:6%;background:var(--sheet)}
@media (min-width:56rem){
  .dg-7 i:nth-child(1){border-left-width:3.7rem;border-right-width:3.7rem;border-bottom-width:6.4rem}
  .dg-7 i:nth-child(3){left:38%}.dg-7 i:nth-child(4){left:38%}
}
/* 8 border: the truffle stays left of the bar, home is right */
.dg-8 i:nth-child(1){left:46%;top:0;width:8%;height:100%;background:var(--ink)}
.dg-8 i:nth-child(2){left:4%;top:56%;width:30%;height:30%;border-radius:50%;background:var(--yellow);border:3px solid var(--ink)}
.dg-8 i:nth-child(3){left:66%;top:52%;width:30%;height:34%;background:var(--blue)}
.dg-8 i:nth-child(4){left:62%;top:30%;width:0;height:0;border-left:2.4rem solid transparent;border-right:2.4rem solid transparent;border-bottom:1.6rem solid var(--blue)}
.dg-8 i:nth-child(5){left:8%;top:22%;width:30%;height:3px;background:var(--red);transform:rotate(-40deg)}
.dg-8 i:nth-child(6){left:8%;top:22%;width:30%;height:3px;background:var(--red);transform:rotate(40deg)}
@media (min-width:56rem){.dg-8 i:nth-child(4){border-left-width:2.85rem;border-right-width:2.85rem;border-bottom-width:1.9rem;left:63%;top:28%}}

/* home: annex */
.annex{display:grid;gap:1.25rem;padding:1rem 0 3.5rem}
.annex-box{border:var(--line);background:var(--sheet);padding:1.4rem 1.4rem .6rem}
.annex-box h2{font-size:1.5rem;margin-bottom:.7rem}
.annex-label{font:700 .78rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-bottom:.6rem}
.annex-box.is-alert{background:var(--yellow)}
.annex-box.is-alert .annex-label{color:var(--ink)}
@media (min-width:48rem){.annex{grid-template-columns:1fr 1fr}}

/* article: chapter plate */
.plate{display:grid;gap:1.25rem;padding:2rem 0 2.25rem;border-bottom:var(--line)}
.plate-no{display:flex;flex-direction:column;justify-content:space-between;background:var(--yellow);border:var(--line);padding:.8rem 1rem;width:9.5rem;height:9.5rem}
.plate-word{font:700 .78rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.plate-num{font:800 5.6rem/.78 var(--display);letter-spacing:-.05em}
.plate-sym{width:3.4rem;height:3.4rem;border-radius:50%;background:var(--blue)}
.plate h1{font-size:clamp(2rem,5.2vw,3.6rem);font-weight:800;letter-spacing:-.02em;max-width:22ch;margin-bottom:1rem}
.plate-desc{font-size:1.15rem;max-width:42rem;margin-bottom:.8rem}
.plate-meta{font:500 .85rem/1.3 var(--display);color:var(--grey);letter-spacing:.04em;margin:0}
@media (min-width:56rem){
  .plate{grid-template-columns:14rem 1fr;gap:2.5rem;padding:3rem 0}
  .plate-no{width:14rem;height:14rem;padding:1rem 1.2rem}
  .plate-num{font-size:9rem}
  .plate-sym{width:5rem;height:5rem}
}

/* article: rail + sheet (separate grid columns, nothing sticky, no overlap) */
.chapter{display:grid;gap:2rem;padding:2rem 0 4rem}
.rail{display:grid;gap:1.25rem;align-content:start}
.rail-box{border:var(--line);background:var(--sheet);padding:1rem 1.1rem}
.rail-title{font:700 .8rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;margin:0 0 .8rem;padding-bottom:.6rem;border-bottom:var(--line)}
.partlist{list-style:none;margin:0;padding:0;counter-reset:part;font-size:.95rem;line-height:1.35}
.partlist li{counter-increment:part;display:flex;gap:.6rem;margin-bottom:.55rem}
.partlist li::before{content:counter(part,upper-alpha);flex:none;width:1.4rem;height:1.4rem;border:2px solid var(--ink);display:grid;place-items:center;font:800 .72rem/1 var(--display);background:var(--yellow)}
.worklist{list-style:none;margin:0;padding:0;font:500 .95rem/1.3 var(--display)}
.worklist li{border-bottom:var(--thin)}
.worklist li:last-child{border-bottom:0}
.worklist a{display:flex;gap:.6rem;padding:.45rem 0;color:var(--ink);text-decoration:none}
.worklist a:hover{color:var(--blue)}
.worklist span{font-weight:800;color:var(--blue);min-width:2.2rem}
.sheet{min-width:0}
.intro{font-size:1.15rem;max-width:44rem;margin-bottom:2rem}
.box{display:grid;grid-template-columns:1fr;gap:.5rem;border-top:var(--line);padding:1.75rem 0 1rem}
.box-no{margin:0;font:800 1.1rem/1 var(--display);color:var(--paper);background:var(--ink);justify-self:start;align-self:start;padding:.35rem .55rem}
.box-body{min-width:0}
.box-body h2{font-size:clamp(1.45rem,3vw,2rem);margin-bottom:.9rem}
.box-body h3{font-size:1.2rem;margin:1.5rem 0 .5rem}
.box-body>p,.box-body>ul,.box-body>ol{max-width:44rem}
.box-body li{margin-bottom:.35rem}
.box-body ol{padding-left:0;list-style:none;counter-reset:li}
.box-body ol>li{counter-increment:li;display:grid;grid-template-columns:2rem 1fr;gap:.25rem}
.box-body ol>li::before{content:counter(li) ".";font:800 1rem/1.65 var(--display);color:var(--blue)}
.box-body ul{padding-left:1.1rem;list-style:square}
.box-body ul li::marker{color:var(--blue)}
@media (min-width:56rem){
  .chapter{grid-template-columns:17rem 1fr;gap:3.5rem}
  .box{grid-template-columns:4.5rem 1fr;gap:1.5rem}
  .box-no{font-size:1.25rem;padding:.45rem .6rem}
}

/* tables as specification sheets */
.table{overflow-x:auto;margin:1.25rem 0 1.5rem;border:var(--line);background:var(--sheet)}
table{border-collapse:collapse;width:100%;font-size:.95rem;line-height:1.4}
th{font:700 .78rem/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;text-align:left;background:var(--yellow);border-bottom:var(--line);padding:.7rem .8rem}
td{padding:.65rem .8rem;border-bottom:var(--thin);vertical-align:top}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:700;font-family:var(--display);white-space:nowrap}

/* warnings */
blockquote{margin:1.5rem 0;border:var(--line);border-left:12px solid var(--red);background:var(--sheet);padding:1rem 1.2rem .2rem 1.2rem;max-width:44rem;position:relative}
blockquote strong:first-child{font-family:var(--display);color:var(--red)}

figure{margin:1.5rem 0}
.box-body figure img,.box-body p img{border:var(--line);background:var(--sheet);max-width:16rem}

/* product cards: components */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.9rem;margin:1.5rem 0 2rem;counter-reset:bauteil}
.product-feature{margin:1.5rem 0 2rem;max-width:22rem}
.part{counter-increment:bauteil;display:flex;flex-direction:column;border:var(--line);background:var(--sheet);color:var(--ink);text-decoration:none;position:relative}
.part::before{content:"Teil " counter(bauteil,upper-alpha);position:absolute;left:-2px;top:-2px;background:var(--ink);color:var(--paper);font:700 .7rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:.35rem .5rem;z-index:1}
.part-frame{display:block;aspect-ratio:1;background:#fff;border-bottom:var(--line);padding:.75rem}
.part-frame img{width:100%;height:100%;object-fit:contain}
.part-label{display:flex;flex-direction:column;gap:.5rem;padding:.75rem .8rem .8rem;flex:1}
.part-name{font:600 .98rem/1.25 var(--display)}
.part-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem;margin-top:auto;font-size:.85rem;color:var(--grey)}
.part-price{font:800 1.05rem/1 var(--display);color:var(--ink);white-space:nowrap}
.part:hover{background:var(--yellow)}
.part:hover .part-frame{background:#fff}

/* next chapter */
.next{display:flex;flex-direction:column;gap:.4rem;margin-top:2.5rem;border:var(--line);background:var(--ink);color:var(--paper);padding:1.2rem 1.4rem;text-decoration:none;max-width:44rem}
.next-label{font:600 .8rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--yellow)}
.next-title{font:700 1.5rem/1.15 var(--display)}
.next:hover{background:var(--blue);color:var(--paper)}

/* footer */
.foot{background:var(--ink);color:var(--paper);margin-top:2rem}
.foot-in{max-width:var(--max);margin:0 auto;padding:2.5rem var(--gut) 2rem;display:grid;gap:1.75rem}
.foot a{color:var(--paper)}
.foot a:hover{color:var(--yellow)}
.foot-pub{display:flex;gap:1rem;align-items:center}
.foot-pub img{width:84px;height:84px;flex:none;background:var(--paper);border-radius:50%;padding:4px}
.foot-pub p{margin:0;max-width:34rem}
.foot-nav ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.2rem 1rem;font:500 .95rem/1.3 var(--display)}
.foot-nav a{display:flex;gap:.5rem;padding:.3rem 0;text-decoration:none}
.foot-nav span{color:var(--yellow);font-weight:800}
.foot-disc{margin:0;font-size:.9rem;color:#d9d6cc;max-width:48rem;border-top:1px solid #4a4843;padding-top:1.25rem}
.foot-end{margin:0;display:flex;align-items:center;gap:.5rem;font:700 .78rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.end-c,.end-s{width:.9rem;height:.9rem;display:inline-block}
.end-c{border-radius:50%;background:var(--yellow)}
.end-s{background:var(--blue);border:1px solid var(--paper)}
.end-t{width:0;height:0;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.9rem solid var(--red);margin-right:.4rem}
@media (min-width:56rem){.foot-in{grid-template-columns:1.2fr 1fr}.foot-disc,.foot-end{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.mast,.foot,.rail{display:none}body{background:#fff}}
@media (max-width:40rem){
  .table table,.table tbody,.table tr,.table td{display:block}
  .table thead{display:none}
  .table tr{padding:.7rem .9rem;border-bottom:var(--thin)}
  .table tr:last-child{border-bottom:0}
  .table td{border:0;padding:.1rem 0}
  .table td:first-child{white-space:normal;margin-bottom:.15rem}
  .table td+td{color:var(--grey)}
  .table td:last-child{color:var(--ink)}
}