/*
 * waveform · magicmushroomtrip.com
 * 1. Concept: the trip as a track in a music player. Intensity is a waveform over seven hours, the phases are
 * chapters, the long pages are the tracks of an album, products are "singles" with a volume meter.
 * 2. Type: Readex Pro (interface, headings and text, variable 300-600) + Sono (time codes, labels; monospace axis).
 * 3. Palette: paper #f2f1ec, sheet #fbfaf7, ink #17161d, deck #16141d, bruise blue #3043d6, wave #8b95ff,
 * amber #e9a23b. Text contrast >= 4.5:1 everywhere.
 * 4. Layout signature: dark player chrome (top bar, deck, mini player, footer) around light reading space;
 * home = player deck with waveform scrubber, chapter strip and "now playing" card, then a track list.
 * 5. Finishing detail: articles carry a sticky mini player whose bars are built from their own sections and
 * fill as you read; the shop's strength classes show as a six-step volume meter.
 */
@font-face{font-family: "Readex Pro";src: url(fonts/readexpro-latin.woff2) format("woff2");font-weight: 300 600;font-display: swap;unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212}

@font-face{font-family: "Readex Pro";src: url(fonts/readexpro-latin-ext.woff2) format("woff2");font-weight: 300 600;font-display: swap;unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF}

@font-face{font-family: "Sono";src: url(fonts/sono-latin.woff2) format("woff2");font-weight: 400 500;font-display: swap;unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212}

@font-face{font-family: "Sono";src: url(fonts/sono-latin-ext.woff2) format("woff2");font-weight: 400 500;font-display: swap;unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF}

:root{--paper: #f2f1ec;--sheet: #fbfaf7;--ink: #17161d;--mute: #575663;--line: #dcdad2;--deck: #16141d;--deck2: #211e2b;--deck3: #2d2a3a;--on-deck: #eceaf2;--deck-mute: #a9a6b8;--bruise: #3043d6;--wave: #8b95ff;--amber: #e9a23b;--mono: "Sono",ui-monospace,monospace;--sans: "Readex Pro",system-ui,sans-serif;--r: 14px}

*{box-sizing: border-box}

html{-webkit-text-size-adjust: 100%;scroll-padding-top: 6.5rem}

body{margin: 0;background: var(--paper);color: var(--ink);font: 360 1.0625rem/1.65 var(--sans)}

img{max-width: 100%;height: auto;display: block}

a{color: var(--bruise);text-underline-offset: .18em;text-decoration-thickness: 1px}

a:hover{text-decoration-thickness: 2px}

:focus-visible{outline: 3px solid var(--amber);outline-offset: 2px;border-radius: 4px}

.mono{font-family: var(--mono);font-weight: 400;letter-spacing: .01em}

.sr,.scrub-label{position: absolute;width: 1px;height: 1px;overflow: hidden;clip-path: inset(50%);white-space: nowrap}

.skip{position: absolute;left: 1rem;top: -4rem;background: var(--amber);color: var(--deck);padding: .5rem 1rem;z-index: 50;border-radius: 8px}

.skip:focus{top: 1rem}

.wrap{width: min(1180px, 100% - 2.5rem);margin-inline: auto}

h1,h2,h3{font-weight: 560;line-height: 1.12;letter-spacing: -.02em;margin: 0}

.eyebrow{margin: 0 0 .9rem;font-size: .78rem;text-transform: uppercase;letter-spacing: .08em;color: var(--mute)}

/* buttons */
.btn{display: inline-flex;align-items: center;gap: .5rem;min-height: 44px;padding: .55rem 1.1rem;border-radius: 999px;font: 500 .95rem/1.2 var(--sans);text-decoration: none}

.btn-shop{background: var(--bruise);color: #fff}

.btn-shop:hover{background: #2333b4}

.btn-shop::after{content: "\2197";font-family: var(--mono)}

.btn-line{border: 1.5px solid currentColor;color: inherit}

/* top bar: player chrome */
.topbar{background: var(--deck);color: var(--on-deck);display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: .7rem max(1.25rem, (100% - 1180px) / 2);position: relative;z-index: 30}

.brand{display: flex;align-items: center;gap: .65rem;color: inherit;text-decoration: none}

.brand img{width: 36px;height: 36px;background: var(--paper);border-radius: 10px;padding: 3px}

.brand-name{font-weight: 560;letter-spacing: -.01em;font-size: 1.05rem}

.tabs ul{list-style: none;margin: 0;padding: 0}

.tabs-menu summary{list-style: none;cursor: pointer;display: flex;align-items: center;gap: .55rem;min-height: 44px;padding: 0 .9rem;border: 1px solid var(--deck3);border-radius: 999px;font-size: .95rem}

.tabs-menu summary::-webkit-details-marker{display: none}

.tabs-burger,.tabs-burger::before{display: block;width: 16px;height: 2px;background: currentColor;position: relative}

.tabs-burger::before{content: "";position: absolute;top: 5px}

.tabs-burger{top: -2px}

.tabs-menu[open] ul{position: absolute;right: 1rem;top: calc(100% - .3rem);background: var(--deck2);border-radius: var(--r);padding: .5rem;min-width: 15rem;box-shadow: 0 18px 40px rgb(0 0 0 / .35)}

.tabs-menu a{display: block;padding: .6rem .8rem;color: var(--on-deck);text-decoration: none;border-radius: 8px}

.tabs-menu a:hover,.tabs-menu a[aria-current]{background: var(--deck3)}

.tabs-inline{display: none}

@media (min-width: 1020px){.tabs-menu{display: none}

 .tabs-inline{display: flex;gap: .2rem}

 .tabs-inline a{display: block;padding: .45rem .75rem;font-size: .92rem;color: var(--deck-mute);border-radius: 999px;text-decoration: none}

 .tabs-inline a:hover{color: var(--on-deck);background: var(--deck2)}

 .tabs-inline a[aria-current]{color: var(--deck);background: var(--on-deck)}
}

/* ---------------- home: the player deck ---------------- */
.deck{background: var(--deck);color: var(--on-deck);padding: 1.5rem 0 3rem}

.deck > *{width: min(1180px, 100% - 2.5rem);margin-inline: auto}

.deck-top{display: grid;gap: 1.5rem;align-items: center}

.cover{margin: 0;position: relative}

.cover img{width: 100%;aspect-ratio: 16 / 10;object-fit: cover;object-position: 50% 62%;border-radius: var(--r)}

.cover figcaption{position: absolute;left: .8rem;bottom: .7rem;font-size: .8rem;color: var(--on-deck);background: rgb(22 20 29 / .78);padding: .25rem .6rem;border-radius: 999px}

.cover figcaption .mono{color: var(--amber);margin-right: .3rem}

.deck .eyebrow{color: var(--amber)}

.deck h1{font-size: clamp(2rem, 5.4vw, 3.6rem);font-weight: 520;max-width: 16ch}

.deck-intro{color: #d6d3e1;max-width: 60ch;margin-top: 1rem}

.deck-intro p{margin: 0 0 .8rem}

.deck-intro a{color: var(--wave)}

@media (min-width: 860px){.deck{padding-top: 2.5rem}

 .deck-top{grid-template-columns: minmax(260px, 360px) 1fr;gap: 2.5rem}

 .cover img{aspect-ratio: 1}
}

.player{margin-top: 2.2rem}

.wave-wrap{position: relative;height: 150px;border-radius: var(--r);background: var(--deck2);overflow: hidden}

.wave{width: 100%;height: 100%;display: block}

.wave .band-0{fill: transparent}

.wave .band-1{fill: rgb(255 255 255 / .03)}

.wave .bars rect{fill: #4a4660}

.wave .bars-played rect{fill: var(--wave)}

.wave .marker{stroke: rgb(233 162 59 / .55);stroke-width: 1.5;stroke-dasharray: 3 5;vector-effect: non-scaling-stroke}

.playhead{position: absolute;top: 0;bottom: 0;left: var(--pos, 0%);width: 2px;margin-left: -1px;background: var(--amber);pointer-events: none;display: none}

.playhead::after{content: "";position: absolute;left: -6px;bottom: -1px;width: 14px;height: 14px;border-radius: 50%;background: var(--amber)}

.playhead-time{position: absolute;top: .45rem;left: .45rem;font-size: .75rem;color: var(--deck);background: var(--amber);padding: .05rem .4rem;border-radius: 4px;white-space: nowrap}

.scrub{position: absolute;inset: 0;width: 100%;height: 100%;margin: 0;opacity: 0;cursor: ew-resize;display: none}

.wave-wrap:has(.scrub:focus-visible){outline: 3px solid var(--amber);outline-offset: 3px}

.axis{list-style: none;margin: .45rem 0 0;padding: 0;position: relative;height: 1.2rem;font-size: .74rem;color: var(--deck-mute)}

.axis li{position: absolute;transform: translateX(-50%)}

.axis li:first-child{transform: none}

.axis li:last-child{transform: translateX(-100%)}

@media (max-width: 599px){.axis li:nth-child(even){display: none}
}

.transport{display: none;align-items: center;gap: 1rem;flex-wrap: wrap;margin-top: 1rem}

.play{display: inline-flex;align-items: center;gap: .7rem;min-height: 48px;padding: .3rem 1.2rem .3rem .35rem;border: 0;border-radius: 999px;background: var(--amber);color: var(--deck);font: 560 1rem var(--sans);cursor: pointer}

.play-icon{width: 38px;height: 38px;border-radius: 50%;background: var(--deck);position: relative}

.play-icon::before{content: "";position: absolute;left: 15px;top: 12px;border-left: 12px solid var(--amber);border-top: 7px solid transparent;border-bottom: 7px solid transparent}

.play[aria-pressed="true"] .play-icon::before{left: 13px;top: 12px;width: 4px;height: 14px;border: 0;background: var(--amber);box-shadow: 8px 0 0 var(--amber)}

.clock{margin: 0;font-size: .95rem;color: var(--on-deck)}

.legend{margin: 0;font-size: .82rem;color: var(--deck-mute);flex: 1 1 18rem}

.now{display: none}

.chapters-title{font-size: 1.1rem;font-weight: 500;margin: 2.2rem 0 1rem;color: var(--on-deck)}

.chapters{list-style: none;margin: 0;padding: 0;display: grid;gap: 1px;background: var(--deck3);border-radius: var(--r);overflow: hidden}

.chapter{background: var(--deck2);padding: 1.2rem 1.25rem}

.chapter-seek{display: none}

.chapter-text h3{font-size: 1.25rem;font-weight: 520;margin-bottom: .5rem}

.chapter-text h3 .mono{display: block;font-size: .8rem;color: var(--amber);margin-bottom: .3rem;letter-spacing: .02em}

.chapter-text p{margin: 0 0 .7rem;color: #d6d3e1;max-width: 62ch}

.chapter-text a{color: var(--wave)}

.chapter-more a{font-weight: 500}

.chapter-more a::after{content: " \2192"}

@media (min-width: 760px){.chapters{grid-template-columns: 1fr 1fr}
}

/* with JS: player mode */
.js .playhead,.js .scrub{display: block}

.js .transport{display: flex}

.js .chapters-title{position: absolute;width: 1px;height: 1px;overflow: hidden;clip-path: inset(50%)}

.js .chapters{margin-top: 1.4rem;grid-template-columns: repeat(2, 1fr)}

.js .chapter{padding: 0}

.js .chapter-text{display: none}

.js .chapter-seek{display: grid;grid-template-columns: auto 1fr;column-gap: .6rem;width: 100%;height: 100%;text-align: left;padding: .8rem 1rem;border: 0;background: none;color: var(--deck-mute);font: 400 .95rem/1.3 var(--sans);cursor: pointer;position: relative}

.js .chapter-seek:hover{color: var(--on-deck);background: var(--deck3)}

.js .chapter-no{grid-row: span 2;font-size: .8rem;padding-top: .15rem}

.js .chapter-name{font-weight: 500;color: inherit}

.js .chapter-time{font-size: .76rem}

.js .chapter.is-on .chapter-seek{color: var(--on-deck);background: var(--deck3)}

.js .chapter.is-on .chapter-seek::before{content: "";position: absolute;left: 0;right: 0;top: 0;height: 3px;background: var(--amber)}

.js .chapter.is-on .chapter-no{color: var(--amber)}

@media (min-width: 760px){.js .chapters{grid-template-columns: repeat(3, 1fr)}
}

@media (min-width: 1020px){.js .chapters{grid-template-columns: repeat(6, 1fr)}
}

.js .now{display: grid;gap: .3rem 2rem;margin-top: 1.4rem;padding: 1.4rem 1.5rem;border-radius: var(--r);background: var(--deck3)}

.now-label{margin: 0;font-size: .75rem;text-transform: uppercase;letter-spacing: .1em;color: var(--amber)}

.now-body h3{font-size: clamp(1.5rem, 3vw, 2.1rem);font-weight: 520;margin: .2rem 0 .6rem}

.now-body h3 .mono{display: block;font-size: .85rem;color: var(--deck-mute);margin-bottom: .35rem}

.now-body p{margin: 0 0 .8rem;color: #dedbe8;max-width: 64ch}

.now-body a{color: var(--wave);font-weight: 500}

.now-body .chapter-more{margin: .4rem 0 0}

@media (min-width: 900px){.wave-wrap{height: 210px}
 .js .now{grid-template-columns: 9rem 1fr}
 .now-label{padding-top: .6rem}
}

/* track list */
.tracklist{padding: 4rem 0 3.5rem}

.section-head{display: flex;flex-wrap: wrap;align-items: baseline;justify-content: space-between;gap: .5rem 2rem;margin-bottom: 1.4rem}

.section-head h2{font-size: clamp(1.7rem, 3.4vw, 2.4rem);font-weight: 520}

.section-head p{margin: 0;color: var(--mute);max-width: 44ch}

.tracks{list-style: none;margin: 0;padding: 0;border-top: 1px solid var(--line)}

.tracks li{display: grid;grid-template-columns: 2.4rem 1fr auto;gap: .2rem 1rem;align-items: baseline;padding: 1rem .5rem;border-bottom: 1px solid var(--line);position: relative}

.tracks-head{font-size: .74rem;text-transform: uppercase;letter-spacing: .08em;color: var(--mute);padding-block: .6rem !important}

.tracks-head .col-note{display: none}

.track:hover{background: var(--sheet)}

.track-no{color: var(--mute);font-size: .9rem}

.track-title{font-weight: 520;font-size: 1.15rem;color: var(--ink);text-decoration: none;line-height: 1.3}

.track-title::after{content: "";position: absolute;inset: 0}

.track:hover .track-title{color: var(--bruise)}

.track .col-note{grid-column: 2;color: var(--mute);font-size: .92rem}

.track-len{grid-column: 3;grid-row: 1;font-size: .85rem;color: var(--mute)}

@media (min-width: 860px){.tracks li{grid-template-columns: 3rem minmax(0, 1.25fr) minmax(0, 1fr) 4.5rem}

 .tracks-head .col-note{display: block}

 .track .col-note{grid-column: 3}

 .track-len{grid-column: 4;text-align: right}
}

/* Netherlands band */
.nl{background: var(--sheet);border-block: 1px solid var(--line);padding: 3.5rem 0}

.nl-grid{display: grid;gap: 2.5rem}

.nl-text h2{font-size: clamp(1.6rem, 3vw, 2.2rem);font-weight: 520;margin-bottom: .8rem}

.nl-text > p{max-width: 60ch}

.ladder h3{font-size: .8rem;text-transform: uppercase;letter-spacing: .08em;color: var(--mute);font-weight: 400;margin-bottom: 1rem}

.ladder-steps{list-style: none;margin: 0;padding: 0;display: grid;gap: .5rem}

.ladder-steps a{display: grid;grid-template-columns: 7rem 1fr;grid-template-rows: auto auto;column-gap: .9rem;align-items: center;padding: .55rem .7rem;border-radius: 10px;color: var(--ink);text-decoration: none}

.ladder-steps a:hover{background: var(--paper)}

.ladder-bar{grid-row: span 2;height: 14px;border-radius: 999px;background: linear-gradient(90deg,var(--bruise) calc(var(--lvl) / 6 * 100%),var(--line) 0)}

.ladder-name{font-weight: 500}

.ladder-label{font-size: .78rem;color: var(--mute)}

.ladder-note{margin: 1.2rem 0 0}

.ladder-note .btn{color: var(--bruise)}

@media (min-width: 960px){.nl-grid{grid-template-columns: 1.25fr 1fr;gap: 4rem;align-items: start}

 .ladder-steps{grid-template-columns: repeat(6, 1fr);align-items: start;gap: .4rem}

 .ladder-steps a{grid-template-columns: 1fr;text-align: left;padding: .5rem .3rem}

 .ladder-bar{grid-row: auto;width: 100%;height: calc(1.6rem + var(--lvl) * 1.5rem);margin-top: calc((6 - var(--lvl)) * 1.5rem);border-radius: 8px 8px 3px 3px;background: var(--bruise);opacity: calc(.45 + var(--lvl) * .09);margin-bottom: .55rem}

 .ladder-name{font-size: .92rem;line-height: 1.25}

 .ladder-label{font-size: .7rem;line-height: 1.3}
}

/* numbers as level meters */
.levels{padding: 3.5rem 0 4rem}

.levels h2{font-size: clamp(1.5rem, 3vw, 2rem);font-weight: 520;margin-bottom: 1.4rem}

.meters{list-style: none;margin: 0;padding: 0;display: grid;gap: 1rem}

.meter{border-top: 3px solid var(--ink);padding-top: .9rem}

.meter-value{display: block;font-size: clamp(1.6rem, 3.4vw, 2.3rem);font-weight: 500;letter-spacing: -.02em;color: var(--bruise)}

.meter-text{color: var(--mute);font-size: .95rem}

@media (min-width: 700px){.meters{grid-template-columns: repeat(4, 1fr);gap: 1.5rem}
}

/* ---------------- products as singles ---------------- */
.products{display: grid;gap: 1rem;margin: 2rem 0;grid-template-columns: repeat(auto-fit,minmax(min(100%, 15rem), 1fr))}

@media (min-width: 1100px){.is-home .products{grid-template-columns: repeat(3, 1fr)}
}

.products .single{grid-template-columns: 1fr}

.single{display: grid;grid-template-columns: 6.5rem 1fr;gap: 1rem;align-items: start;background: var(--sheet);border: 1px solid var(--line);border-radius: var(--r);padding: .8rem}

.single-cover img{width: 100%;aspect-ratio: 1;object-fit: cover;border-radius: 9px;background: #fff}

.single-kind{margin: 0 0 .2rem;font: 400 .72rem var(--mono);text-transform: uppercase;letter-spacing: .07em;color: var(--mute)}

.single-name{font-size: 1rem;font-weight: 500;line-height: 1.3;margin: 0 0 .45rem;letter-spacing: -.01em}

.single-name a{color: var(--ink);text-decoration: none}

.single-name a:hover{color: var(--bruise)}

.vol{display: flex;align-items: center;gap: .5rem;margin: 0 0 .6rem;font-size: .8rem;color: var(--mute)}

.vol-bars{display: inline-flex;align-items: end;gap: 2px;height: 16px}

.vol-bars i{width: 4px;border-radius: 1px;background: var(--line)}

.vol-bars i:nth-child(1){height: 5px}
 .vol-bars i:nth-child(2){height: 7px}
 .vol-bars i:nth-child(3){height: 9px}

.vol-bars i:nth-child(4){height: 11px}
 .vol-bars i:nth-child(5){height: 13px}
 .vol-bars i:nth-child(6){height: 16px}

.vol[style*="--lvl: 1"] i:nth-child(-n+1),.vol[style*="--lvl: 2"] i:nth-child(-n+2),.vol[style*="--lvl: 3"] i:nth-child(-n+3),.vol[style*="--lvl: 4"] i:nth-child(-n+4),.vol[style*="--lvl: 5"] i:nth-child(-n+5),.vol[style*="--lvl: 6"] i{background: var(--bruise)}

.single-buy{display: flex;flex-wrap: wrap;align-items: center;gap: .4rem .9rem;margin: 0}

.single-price{font: 500 1rem var(--mono)}

.single .btn{min-height: 40px;padding: .4rem .95rem;font-size: .88rem}

.product-feature{margin: 2rem 0}

.single-feature{grid-template-columns: 1fr;padding: 1rem}

.single-feature .single-name{font-size: 1.3rem}

@media (min-width: 560px){.single-feature{grid-template-columns: 11rem 1fr;gap: 1.4rem;align-items: center}
}

/* ---------------- articles ---------------- */
.miniplayer{position: sticky;top: 0;z-index: 20;background: var(--deck);color: var(--on-deck);border-top: 1px solid var(--deck3)}

.mini-inner{width: min(1180px, 100% - 2rem);margin-inline: auto;display: grid;grid-template-columns: auto 1fr auto;align-items: center;gap: .2rem 1rem;padding: .55rem 0 .6rem}

.mini-track{margin: 0;font-size: .74rem;color: var(--amber)}

.mini-title{margin: 0;font-size: .9rem;font-weight: 500;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}

.mini-wave{grid-column: 1 / -1;position: relative;height: 30px}

.mini-wave svg{width: 100%;height: 100%;display: block}

.mbars rect{fill: #4a4660}

.mbars-read rect{fill: var(--wave)}

.mini-marks{list-style: none;margin: 0;padding: 0}

.mini-marks li{position: absolute;top: -3px;bottom: -3px;width: 0}

.mini-marks a{position: absolute;left: -9px;top: 0;bottom: 0;width: 18px}

.mini-marks a::before{content: "";position: absolute;left: 8px;top: 0;bottom: 0;width: 2px;background: var(--amber);opacity: .6}

.mini-marks a:hover::before,.mini-marks a:focus-visible::before{opacity: 1;width: 3px}

.mini-time{margin: 0;font-size: .74rem;color: var(--deck-mute);grid-column: 3;grid-row: 1}

@media (min-width: 860px){.mini-inner{grid-template-columns: 6.5rem 12rem 1fr 4.5rem}

 .mini-wave{grid-column: 3}

 .mini-time{grid-column: 4;text-align: right}
}

.article{width: min(780px, 100% - 2.5rem);margin: 0 auto;padding: 3rem 0 4rem}

.article-head{margin-bottom: 2.4rem}

.article h1{font-size: clamp(2rem, 5vw, 3.1rem);font-weight: 520}

.lead{font-size: 1.2rem;line-height: 1.5;color: var(--mute);margin: 1.1rem 0 0;font-weight: 320}

.toc{margin-top: 1.6rem;border: 1px solid var(--line);border-radius: var(--r);background: var(--sheet)}

.toc summary{cursor: pointer;padding: .8rem 1rem;font-size: .85rem;color: var(--mute)}

.toc ol{list-style: none;margin: 0;padding: 0 1rem 1rem;display: grid;gap: .2rem}

.toc a{display: block;padding: .3rem 0;color: var(--ink);text-decoration: none}

.toc a:hover{color: var(--bruise)}

.toc .mono{color: var(--bruise);font-size: .8rem;margin-right: .4rem}

.prose{counter-reset: ch}

.prose > p,.prose li{max-width: 68ch}

.prose h2{counter-increment: ch;font-size: clamp(1.45rem, 3vw, 1.85rem);font-weight: 520;margin: 3rem 0 .9rem;padding-top: 1.1rem;border-top: 1px solid var(--line)}

.prose h2::before{content: counter(ch,decimal-leading-zero);display: block;font: 400 .8rem var(--mono);color: var(--bruise);margin-bottom: .45rem;letter-spacing: .05em}

.prose h3{font-size: 1.2rem;font-weight: 540;margin: 2rem 0 .5rem}

.prose p{margin: 0 0 1.05rem}

.prose ul,.prose ol{padding-left: 1.25rem;margin: 0 0 1.2rem}

.prose li{margin-bottom: .45rem}

.prose li::marker{color: var(--bruise)}

.prose ol > li::marker{font-family: var(--mono);font-size: .9em}

.prose em{color: var(--mute)}

.prose strong{font-weight: 560}

.prose blockquote{margin: 1.5rem 0;padding: 1rem 1.25rem;border-left: 3px solid var(--amber);background: var(--sheet)}

.prose figure{margin: 2rem 0}

.prose figure img,.prose p img{display: inline-block;max-width: 180px;vertical-align: middle}

.table{overflow-x: auto;margin: 1.5rem 0 2rem;border: 1px solid var(--line);border-radius: var(--r);background: var(--sheet)}

table{border-collapse: collapse;width: 100%;font-size: .93rem;line-height: 1.45}

th,td{text-align: left;vertical-align: top;padding: .7rem .85rem;border-bottom: 1px solid var(--line)}

th{font: 400 .74rem var(--mono);text-transform: uppercase;letter-spacing: .06em;color: var(--mute);background: var(--paper)}

tr:last-child td{border-bottom: 0}

td:first-child{font-weight: 500;white-space: nowrap}

.is-about .prose p img{max-width: 220px;background: var(--deck);border-radius: var(--r);padding: 1rem}

.queue{display: grid;gap: .8rem;margin-top: 3.5rem}

.queue-item{display: grid;gap: .3rem;padding: 1.1rem 1.25rem;border-radius: var(--r);background: var(--deck);color: var(--on-deck);text-decoration: none}

.queue-item .mono{font-size: .74rem;color: var(--amber);text-transform: uppercase;letter-spacing: .07em}

.queue-title{font-size: 1.2rem;font-weight: 520}

.queue-next .queue-title::after{content: " \2192";color: var(--amber)}

.queue-prev{background: var(--sheet);color: var(--ink);border: 1px solid var(--line)}

.queue-prev .mono{color: var(--mute)}

.queue-item:hover{outline: 2px solid var(--bruise)}

@media (min-width: 640px){.queue{grid-template-columns: 1fr 1fr}
 .queue-next{grid-column: 2}
}

/* footer */
.foot{background: var(--deck);color: var(--deck-mute);padding: 3rem 0 2.5rem;font-size: .92rem}

.foot a{color: var(--on-deck)}

.foot-grid{display: grid;gap: 2rem}

.foot-pub{display: grid;grid-template-columns: 96px 1fr;gap: 1.2rem;align-items: center}

.foot-pub p{margin: 0;max-width: 48ch}

.foot-pub strong{color: var(--on-deck);font-weight: 500}

.foot-tracks{list-style: none;margin: 0;padding: 0;display: flex;flex-wrap: wrap;gap: .3rem 1.2rem}

.foot-tracks a{text-decoration: none}

.foot-tracks a:hover{text-decoration: underline}

.foot-disc{margin: 0;padding-top: 1.4rem;border-top: 1px solid var(--deck3);font-size: .85rem;max-width: 80ch}

@media (min-width: 900px){.foot-grid{grid-template-columns: 1.2fr 1fr}
 .foot-disc{grid-column: 1 / -1}
}

@media (prefers-reduced-motion: no-preference){.btn,.track,.ladder-steps a,.chapter-seek{transition: background-color .2s,color .2s}
}

/* article chapter rail (desktop only,own grid column) */
.rail{display: none}

@media (min-width: 1140px){.article{width: min(1180px, 100% - 3rem);display: grid;grid-template-columns: minmax(0, 760px) 300px;column-gap: 4.5rem;justify-content: center;align-items: start}

 .article-head,.prose,.queue{grid-column: 1}

 .article .toc{display: none}

 .rail{display: block;grid-column: 2;grid-row: 1 / span 3;position: sticky;top: 6.5rem;background: var(--deck);color: var(--on-deck);border-radius: var(--r);padding: 1rem .6rem .7rem}

 .rail-head{display: flex;justify-content: space-between;margin: 0 .6rem .6rem;font-size: .74rem;text-transform: uppercase;letter-spacing: .08em;color: var(--amber)}

 .rail ol{list-style: none;margin: 0;padding: 0}

 .rail a{display: grid;grid-template-columns: 1.8rem 1fr;gap: .4rem;padding: .45rem .6rem;border-radius: 8px;color: var(--deck-mute);text-decoration: none;font-size: .86rem;line-height: 1.35}

 .rail a:hover{color: var(--on-deck);background: var(--deck2)}

 .rail a.is-on{color: var(--on-deck);background: var(--deck3)}

 .rail a.is-on .rail-t{color: var(--amber)}

 .rail-t{font-size: .75rem;padding-top: .1rem}
}

@media (max-width: 639px){.table thead{display: none}

 .table tr{display: block;padding: .8rem .9rem;border-bottom: 1px solid var(--line)}

 .table tr:last-child{border-bottom: 0}

 .table td{display: block;padding: .1rem 0;border: 0;white-space: normal}

 .table td:first-child{font-size: 1.02rem}

 .table td[data-label]:not(:first-child)::before{content: attr(data-label);display: block;font: 400 .68rem var(--mono);text-transform: uppercase;letter-spacing: .06em;color: var(--mute);margin-top: .45rem}
}