@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..700&family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..500&family=JetBrains+Mono:wght@400;500&display=swap');

/* == Tokens == */
:root {
--bg:#0c0a0a;
--paper:#131010;
--surface:#1a1616;
--raised:#201b1b;
--line:#2b2525;
--line-hi:#40383a;
--ember:#d2432f;
--ember-hi:#f2705b;
--ember-dim:rgba(210,67,47,.11);
--ember-line:rgba(210,67,47,.34);
--brass:#b89a68;
--text:#f0e9df;
--text-2:#b0a79f;
--text-3:#8f8680;
--hover:rgba(255,255,255,.03);
--glass:rgba(12,10,10,.78);
--display:'Fraunces',Georgia,serif;
--body:'Newsreader',Georgia,serif;
--mono:'JetBrains Mono',ui-monospace,monospace;
--s-1:.25rem;
--s-2:.5rem;
--s-3:.75rem;
--s-4:1rem;
--s-5:1.5rem;
--s-6:2rem;
--s-7:3rem;
--s-8:4rem;
--gx:clamp(1.1rem,5vw,2rem);
--sec:clamp(3.5rem,9vw,6.5rem);
--col:40rem;
--wide:56rem;
--t-2xs:.66rem;
--t-xs:.75rem;
--t-sm:.9rem;
--t-md:clamp(1.02rem,.96rem + .3vw,1.16rem);
--t-lg:clamp(1.2rem,1.05rem + .6vw,1.5rem);
--t-xl:clamp(1.8rem,1.3rem + 2.2vw,3.2rem);
--t-2xl:clamp(3.4rem,13vw,9rem);
--r-sm:3px;
--r:6px;
--r-lg:10px;
--r-pill:99px;
--nav-h:3.75rem;
--tap:2.75rem;
--ease:cubic-bezier(.22,.8,.24,1);
--tr:.28s var(--ease);
--sh-1:0 1px 0 rgba(255,255,255,.03) inset,0 8px 24px -12px rgba(0,0,0,.6);
--sh-2:0 24px 60px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03) inset;
--glow:0 10px 30px rgba(210,67,47,.3);
color-scheme:dark;
}

/* == Base == */
*,*::before,*::after {
box-sizing:border-box;
margin:0;
padding:0;
}

html {
scroll-behavior:smooth;
font-size:17px;
scroll-padding-top:calc(var(--nav-h) + var(--s-5));
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}

body {
font-family:var(--body);
font-optical-sizing:auto;
background:var(--bg);
color:var(--text);
line-height:1.8;
overflow-x:clip;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

img,svg,iframe {
max-width:100%;
}

button {
font:inherit;
color:inherit;
-webkit-tap-highlight-color:transparent;
}

::selection {
background:var(--ember);
color:#fff;
}

::-webkit-scrollbar {
width:9px;
height:9px;
}

::-webkit-scrollbar-thumb {
background:var(--line-hi);
border-radius:var(--r-pill);
}

::-webkit-scrollbar-track {
background:var(--bg);
}

a {
color:var(--ember-hi);
text-decoration:none;
transition:color var(--tr);
}

.body-text a,
.listen-note a {
background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
transition:background-size var(--tr),color var(--tr);
}

.body-text a:hover,
.listen-note a:hover {
background-size:100% 1px;
}

em {
font-style:italic;
}

strong {
font-weight:600;
color:var(--text);
}

:focus-visible {
outline:2px solid var(--ember-hi);
outline-offset:3px;
}

/* == Progress == */
.reading-bar {
position:fixed;
inset:0 auto auto 0;
height:2px;
width:100%;
transform:scaleX(0);
transform-origin:left;
background:linear-gradient(90deg,var(--ember),var(--brass));
box-shadow:0 0 12px var(--ember);
z-index:300;
}

.back-top {
position:fixed;
right:var(--gx);
bottom:calc(var(--s-5) + env(safe-area-inset-bottom,0px));
z-index:150;
display:grid;
place-items:center;
width:var(--tap);
height:var(--tap);
color:var(--text-2);
background:var(--glass);
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
border:1px solid var(--line-hi);
border-radius:50%;
cursor:pointer;
opacity:0;
visibility:hidden;
transform:translateY(8px);
transition:opacity var(--tr),transform var(--tr),visibility 0s .28s,color var(--tr),border-color var(--tr);
}

.back-top.visible {
opacity:1;
visibility:visible;
transform:none;
transition:opacity var(--tr),transform var(--tr),visibility 0s,color var(--tr),border-color var(--tr);
}

.back-top:hover {
color:var(--ember-hi);
border-color:var(--ember-line);
}

/* == Header == */
.topnav {
position:sticky;
top:0;
z-index:200;
background:var(--glass);
-webkit-backdrop-filter:blur(18px) saturate(1.5);
backdrop-filter:blur(18px) saturate(1.5);
border-bottom:1px solid var(--line);
transition:box-shadow var(--tr),border-color var(--tr);
}

.topnav.scrolled {
border-bottom-color:var(--line-hi);
box-shadow:0 12px 32px -20px rgba(0,0,0,.9);
}

.topnav::after {
content:'';
position:absolute;
inset:auto 0 -1px;
height:1px;
background:linear-gradient(90deg,var(--ember),transparent 45%);
opacity:.5;
pointer-events:none;
}

.topnav-inner {
max-width:var(--wide);
min-height:var(--nav-h);
margin-inline:auto;
padding:var(--s-2) var(--gx);
display:flex;
align-items:center;
gap:var(--s-3);
}

.topnav-brand {
order:1;
margin-right:auto;
display:flex;
align-items:center;
gap:.65rem;
min-width:0;
font:500 var(--t-xs)/1 var(--mono);
letter-spacing:.06em;
color:var(--text-2);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.topnav-brand:hover {
color:var(--text);
}

.topnav-brand .dot {
flex-shrink:0;
width:8px;
height:8px;
border-radius:50%;
background:var(--ember);
box-shadow:0 0 0 0 var(--ember-line);
animation:ping 2.8s infinite;
}

@keyframes ping {
70% {
box-shadow:0 0 0 9px transparent;
}
100% {
box-shadow:0 0 0 0 transparent;
}
}

.topnav-right {
order:2;
max-width:40vw;
font:var(--t-xs)/1 var(--mono);
color:var(--text-3);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-variant-numeric:tabular-nums;
}

.nav-toggle {
order:3;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:4px;
width:var(--tap);
height:var(--tap);
background:none;
border:1px solid var(--line);
border-radius:var(--r);
cursor:pointer;
transition:border-color var(--tr),background var(--tr);
}

.nav-toggle:hover {
border-color:var(--line-hi);
background:var(--hover);
}

.nav-toggle .b {
display:block;
width:18px;
height:1.5px;
background:var(--text-2);
border-radius:2px;
transform-origin:center;
transition:transform .3s var(--ease),opacity .2s,background var(--tr);
}

.nav-toggle.open {
border-color:var(--ember-line);
background:var(--ember-dim);
}

.nav-toggle.open .b:nth-child(1) {
transform:translateY(5.5px) rotate(45deg);
background:var(--ember-hi);
}

.nav-toggle.open .b:nth-child(2) {
opacity:0;
}

.nav-toggle.open .b:nth-child(3) {
transform:translateY(-5.5px) rotate(-45deg);
background:var(--ember-hi);
}

.chapter-nav {
max-width:var(--wide);
margin-inline:auto;
padding-inline:var(--gx);
display:flex;
flex-wrap:wrap;
gap:var(--s-2);
max-height:0;
overflow:hidden;
opacity:0;
visibility:hidden;
transition:max-height .45s var(--ease),opacity .3s,padding .3s,visibility 0s .45s;
}

.chapter-nav.open {
max-height:70svh;
opacity:1;
visibility:visible;
padding-block:var(--s-2) var(--s-4);
overflow-y:auto;
overscroll-behavior:contain;
transition:max-height .45s var(--ease),opacity .3s,padding .3s,visibility 0s;
}

.chapter-nav a {
display:inline-flex;
align-items:center;
min-height:var(--tap);
padding:0 .95rem;
font:500 var(--t-xs)/1 var(--mono);
letter-spacing:.03em;
color:var(--text-3);
border:1px solid var(--line);
border-radius:var(--r-pill);
transition:color var(--tr),border-color var(--tr),background var(--tr);
}

.chapter-nav a:hover {
color:var(--text);
border-color:var(--line-hi);
}

.chapter-nav a.active {
color:var(--text);
border-color:var(--ember-line);
background:var(--ember-dim);
}

@media (min-width:900px) {
html {
scroll-padding-top:calc(var(--nav-h) + 3.5rem);
}

.nav-toggle {
display:none;
}

.chapter-nav {
max-height:none;
opacity:1;
visibility:visible;
flex-wrap:nowrap;
overflow-x:auto;
padding-block:.1rem .7rem;
scrollbar-width:none;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gx),#000 calc(100% - var(--gx)),transparent);
mask-image:linear-gradient(90deg,transparent,#000 var(--gx),#000 calc(100% - var(--gx)),transparent);
}

.chapter-nav::-webkit-scrollbar {
display:none;
}

.chapter-nav a {
flex-shrink:0;
min-height:2.1rem;
}
}

@media (max-width:380px) {
.topnav-right {
display:none;
}
}

/* == Cover == */
.cover {
position:relative;
overflow:hidden;
min-height:calc(100svh - var(--nav-h));
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:clamp(2rem,8vw,5rem) var(--gx) clamp(3rem,8vw,5rem);
border-bottom:1px solid var(--line);
isolation:isolate;
}

.cover-bg {
position:absolute;
inset:0;
z-index:-2;
background:radial-gradient(70% 60% at 85% 0%,rgba(210,67,47,.16),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(184,154,104,.07),transparent 70%),repeating-linear-gradient(90deg,transparent 0 95px,rgba(255,255,255,.018) 95px 96px);
}

.cover-grain {
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
opacity:.5;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}

.cover-spine {
position:absolute;
inset:0 auto 0 0;
width:3px;
background:linear-gradient(var(--ember),var(--brass));
transform-origin:top;
animation:spine 1.3s var(--ease) both;
}

@keyframes spine {
from {
transform:scaleY(0);
}
}

.cover-content {
max-width:var(--wide);
margin-inline:auto;
width:100%;
}

.cover-meta,
.cover-eyebrow {
font:500 var(--t-xs)/1.6 var(--mono);
letter-spacing:.08em;
color:var(--text-3);
}

.cover-meta span {
color:var(--ember);
}

.cover-meta {
margin-bottom:clamp(2rem,6vw,4rem);
}

.cover-eyebrow {
color:var(--brass);
margin-bottom:var(--s-4);
}

.cover-title {
font:900 var(--t-2xl)/.88 var(--display);
font-variation-settings:'opsz' 144,'SOFT' 0;
letter-spacing:-.045em;
margin-bottom:.9rem;
text-wrap:balance;
}

.cover-title .em {
display:inline-block;
font-style:italic;
font-weight:300;
color:var(--ember);
letter-spacing:-.03em;
padding-right:.05em;
}

.cover-subtitle {
font:italic 300 clamp(1.05rem,2.6vw,1.5rem)/1.4 var(--display);
color:var(--text-2);
margin-bottom:var(--s-6);
text-wrap:balance;
}

.cover-rule {
width:48px;
height:2px;
background:var(--ember);
margin-bottom:var(--s-5);
}

.cover-desc {
font-size:var(--t-md);
color:var(--text-2);
max-width:34rem;
text-wrap:pretty;
}

.cover-stats {
display:grid;
grid-template-columns:repeat(4,auto);
justify-content:start;
gap:var(--s-5) clamp(1.2rem,4vw,3rem);
margin-top:var(--s-7);
padding-top:var(--s-5);
border-top:1px solid var(--line);
}

.cover-stat-val {
display:block;
font:600 clamp(1.5rem,4vw,2.1rem)/1 var(--display);
font-variant-numeric:lining-nums tabular-nums;
transition:color var(--tr);
}

.cover-stat-label {
display:block;
margin-top:.45rem;
font:var(--t-xs)/1 var(--mono);
color:var(--text-3);
}

a.cover-stat-link {
color:inherit;
}

a.cover-stat-link:hover .cover-stat-val {
color:var(--ember-hi);
}

.cover-scroll {
position:absolute;
right:var(--gx);
bottom:var(--s-6);
display:flex;
flex-direction:column;
align-items:center;
gap:.4rem;
font:var(--t-xs)/1 var(--mono);
color:var(--text-3);
}

.cover-scroll svg {
animation:bob 2s ease-in-out infinite;
}

@keyframes bob {
50% {
transform:translateY(5px);
}
}

.cover-meta,
.cover-eyebrow,
.cover-title,
.cover-subtitle,
.cover-rule,
.cover-desc,
.cover-stats {
animation:rise .9s var(--ease) both;
}

.cover-eyebrow {
animation-delay:.1s;
}

.cover-title {
animation-delay:.2s;
}

.cover-subtitle {
animation-delay:.35s;
}

.cover-rule {
animation-delay:.42s;
}

.cover-desc {
animation-delay:.5s;
}

.cover-stats {
animation-delay:.62s;
}

@keyframes rise {
from {
opacity:0;
transform:translateY(22px);
}
}

@media (max-width:520px) {
.cover-stats {
grid-template-columns:repeat(2,auto);
}

.cover-scroll {
display:none;
}
}

/* == Layout == */
.publication {
max-width:var(--wide);
margin-inline:auto;
padding-inline:var(--gx);
}

.section-div {
border:0;
border-top:1px solid var(--line);
}

.chapter-head {
position:relative;
padding:var(--sec) 0 clamp(1.8rem,4vw,2.5rem);
border-bottom:1px solid var(--line);
}

.chapter-head::before {
content:'';
position:absolute;
left:calc(-1*var(--gx));
top:var(--sec);
bottom:1.8rem;
width:2px;
background:var(--ember);
transform:scaleY(0);
transform-origin:top;
transition:transform .8s var(--ease);
}

.chapter-head.vis::before {
transform:scaleY(1);
}

.ch-label {
font:500 var(--t-xs)/1 var(--mono);
letter-spacing:.06em;
color:var(--brass);
margin-bottom:.9rem;
}

.ch-num {
font:italic 300 clamp(5rem,16vw,10rem)/.8 var(--display);
color:transparent;
-webkit-text-stroke:1px var(--line-hi);
letter-spacing:-.05em;
margin-bottom:.9rem;
user-select:none;
transition:-webkit-text-stroke-color .6s;
}

.chapter-head.vis .ch-num {
-webkit-text-stroke-color:var(--ember-line);
}

.ch-title {
font:700 var(--t-xl)/1.1 var(--display);
font-variation-settings:'opsz' 96;
letter-spacing:-.025em;
text-wrap:balance;
}

.ch-title em {
font-style:italic;
font-weight:300;
color:var(--ember-hi);
}

.ch-sub {
font:italic 300 clamp(1rem,2vw,1.2rem)/1.5 var(--display);
color:var(--text-2);
margin-top:.9rem;
max-width:34rem;
text-wrap:pretty;
}

/* == Reveal == */
@media (scripting:enabled) {
.reveal:not(.visible) {
opacity:0;
transform:translateY(16px);
}

.reveal {
transition:opacity .7s var(--ease),transform .7s var(--ease);
}
}

/* == Body == */
.body-text {
max-width:var(--col);
padding-block:clamp(2rem,5vw,3.5rem);
}

.body-text p {
font-size:var(--t-md);
color:var(--text-2);
margin-bottom:1.35em;
text-wrap:pretty;
hanging-punctuation:first;
}

.body-text>p:first-of-type::first-letter {
font:700 3.3em/.82 var(--display);
float:left;
margin:.08em .1em 0 0;
color:var(--ember);
}

.body-text p:last-child {
margin-bottom:0;
}

.body-text h3 {
font:600 var(--t-lg)/1.25 var(--display);
letter-spacing:-.015em;
margin:2.6rem 0 .8rem;
text-wrap:balance;
}

.body-text h4 {
font:500 .8rem/1.3 var(--mono);
letter-spacing:.05em;
color:var(--brass);
margin:2.2rem 0 .7rem;
}

.pull-quote {
position:relative;
margin:2.8rem 0;
padding:.4rem 0 .4rem 1.8rem;
border-left:2px solid var(--ember);
}

.pull-quote::before {
content:'“';
position:absolute;
left:-.12em;
top:-.5em;
font:900 5rem/1 var(--display);
color:var(--ember);
opacity:.18;
pointer-events:none;
}

.body-text .pull-quote p {
font:italic 400 clamp(1.15rem,2.7vw,1.4rem)/1.5 var(--display);
color:var(--text);
margin:0;
}

.pull-quote cite {
display:block;
margin-top:.9rem;
font:normal var(--t-xs)/1.4 var(--mono);
color:var(--text-3);
}

/* == Callouts == */
.callout {
margin:var(--s-6) 0;
padding:1.2rem 1.4rem;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r);
}

.callout-label {
display:flex;
align-items:center;
gap:.6rem;
font:500 var(--t-xs)/1 var(--mono);
color:var(--text-3);
margin-bottom:.7rem;
}

.callout-label::before {
content:'';
width:14px;
height:1px;
background:var(--line-hi);
}

.body-text .callout p {
font-size:var(--t-sm);
line-height:1.75;
margin:0;
}

.callout.highlight {
background:linear-gradient(90deg,var(--ember-dim),transparent 80%),var(--surface);
border-left:3px solid var(--ember);
}

.callout.highlight .callout-label {
color:var(--ember-hi);
}

.callout.highlight .callout-label::before {
background:var(--ember);
}

/* == Principles == */
.principles {
margin:var(--s-6) 0;
border:1px solid var(--line);
border-radius:var(--r);
overflow:hidden;
}

.principle {
display:grid;
grid-template-columns:3.2rem 1fr;
background:var(--surface);
transition:background var(--tr);
}

.principle+.principle {
border-top:1px solid var(--line);
}

.principle:hover {
background:var(--paper);
}

.principle-n {
display:flex;
justify-content:center;
padding-top:1.1rem;
border-right:1px solid var(--line);
font:italic 300 1.6rem/1 var(--display);
color:var(--ember);
opacity:.55;
transition:opacity var(--tr);
}

.principle:hover .principle-n {
opacity:1;
}

.principle-body {
padding:1.05rem 1.3rem;
}

.principle-rule {
font:600 1rem/1.35 var(--display);
margin-bottom:.3rem;
}

.principle-detail {
font-size:var(--t-sm);
color:var(--text-2);
line-height:1.7;
}

/* == Tables == */
.table-wrap {
width:100%;
overflow-x:auto;
margin:var(--s-6) 0;
border:1px solid var(--line);
border-radius:var(--r);
background:var(--surface);
scrollbar-width:thin;
scrollbar-color:var(--line-hi) transparent;
-webkit-overflow-scrolling:touch;
}

table {
width:100%;
min-width:34rem;
border-collapse:collapse;
font-size:var(--t-sm);
}

thead {
background:var(--paper);
}

th {
padding:.8rem 1rem;
text-align:left;
font:500 var(--t-xs)/1 var(--mono);
letter-spacing:.04em;
color:var(--text-3);
white-space:nowrap;
border-bottom:1px solid var(--line-hi);
}

td {
padding:.85rem 1rem;
border-bottom:1px solid var(--line);
color:var(--text-2);
vertical-align:top;
line-height:1.65;
}

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

tbody tr {
transition:background var(--tr);
}

tbody tr:hover {
background:var(--hover);
}

td:first-child {
position:sticky;
left:0;
background:var(--surface);
color:var(--ember-hi);
white-space:nowrap;
}

tbody tr:hover td:first-child {
background:var(--raised);
}

td:first-child strong {
color:inherit;
font-weight:500;
}

/* == Flow == */
.flow {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:var(--s-2);
margin:var(--s-6) 0;
}

.flow-step {
position:relative;
padding:.7rem .95rem;
font:500 var(--t-xs)/1 var(--mono);
color:var(--text-2);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r);
white-space:nowrap;
transition:border-color var(--tr),color var(--tr),transform var(--tr);
}

.flow-step:hover {
border-color:var(--line-hi);
color:var(--text);
transform:translateY(-2px);
}

.flow-step.accent {
color:var(--text);
background:var(--ember-dim);
border-color:var(--ember-line);
}

.flow-arrow {
position:relative;
flex-shrink:0;
width:22px;
height:1px;
background:var(--line-hi);
font-size:0;
color:transparent;
}

.flow-arrow::after {
content:'';
position:absolute;
right:0;
top:-3px;
border:3.5px solid transparent;
border-left:5px solid var(--line-hi);
border-right:0;
}

.flow-label {
flex-basis:100%;
margin-top:.4rem;
font:var(--t-xs)/1.6 var(--mono);
color:var(--text-3);
}

@media (max-width:560px) {
.flow {
flex-direction:column;
align-items:flex-start;
}

.flow-arrow {
width:1px;
height:16px;
margin-left:1.4rem;
}

.flow-arrow::after {
right:-3px;
top:auto;
bottom:0;
border:3.5px solid transparent;
border-top:5px solid var(--line-hi);
border-bottom:0;
}
}

/* == Checklist == */
.checklist {
list-style:none;
margin:var(--s-6) 0;
border:1px solid var(--line);
border-radius:var(--r);
overflow:hidden;
}

.checklist li {
display:flex;
align-items:flex-start;
gap:.8rem;
padding:.9rem 1.1rem;
background:var(--surface);
border-bottom:1px solid var(--line);
font-size:var(--t-sm);
color:var(--text-2);
line-height:1.6;
}

.checklist li:last-child {
border-bottom:0;
}

.checklist-mark {
flex-shrink:0;
width:18px;
height:18px;
margin-top:2px;
display:grid;
place-items:center;
border-radius:50%;
background:var(--ember-dim);
border:1px solid var(--ember-line);
color:var(--ember-hi);
}

.checklist-status {
margin-left:auto;
padding-left:.6rem;
font:500 var(--t-2xs)/1.8 var(--mono);
letter-spacing:.06em;
color:var(--brass);
}

/* == Lessons == */
.lessons-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
gap:1px;
margin:var(--s-6) 0;
background:var(--line);
border:1px solid var(--line);
border-radius:var(--r);
overflow:hidden;
}

.lesson-card {
position:relative;
padding:1.4rem;
background:var(--surface);
transition:background var(--tr);
}

.lesson-card::after {
content:'';
position:absolute;
left:0;
top:0;
height:2px;
width:100%;
background:var(--ember);
transform:scaleX(0);
transform-origin:left;
transition:transform .5s var(--ease);
}

.lesson-card:hover {
background:var(--paper);
}

.lesson-card:hover::after {
transform:scaleX(1);
}

.lesson-num {
font:italic 300 2rem/1 var(--display);
color:var(--line-hi);
margin-bottom:.7rem;
transition:color var(--tr);
}

.lesson-card:hover .lesson-num {
color:var(--ember);
}

.lesson-title {
font:600 1rem/1.35 var(--display);
margin-bottom:.5rem;
}

.lesson-body {
font-size:var(--t-sm);
color:var(--text-2);
line-height:1.7;
}

/* == Limitations == */
.limitation {
display:flex;
gap:var(--s-4);
padding:1.1rem 0;
border-bottom:1px solid var(--line);
}

.limitation:last-child {
border-bottom:0;
}

.limitation-icon {
flex-shrink:0;
margin-top:3px;
color:var(--ember);
}

.limitation-title {
font:600 1.02rem/1.35 var(--display);
margin-bottom:.3rem;
}

.limitation-text {
font-size:var(--t-sm);
color:var(--text-2);
line-height:1.7;
}

/* == Appendix == */
.appendix-block {
margin-bottom:var(--s-7);
}

.appendix-block h3 {
font:500 .8rem/1 var(--mono);
letter-spacing:.05em;
color:var(--brass);
margin:0 0 1.2rem;
padding-bottom:.7rem;
border-bottom:1px solid var(--line);
}

.glossary-entry {
margin-bottom:1.3rem;
}

.glossary-term {
font:500 .85rem/1.4 var(--mono);
color:var(--ember-hi);
margin-bottom:.25rem;
}

.glossary-def {
font-size:var(--t-sm);
color:var(--text-2);
line-height:1.7;
}

/* == Listen == */
.listen-grid {
display:grid;
grid-template-columns:minmax(14rem,17.5rem) minmax(0,1fr);
align-items:start;
gap:clamp(1.5rem,4vw,2.75rem);
margin-block:clamp(2rem,5vw,3rem) var(--sec);
}

.listen-left {
display:grid;
gap:var(--s-4);
}

.listen-cover {
position:relative;
aspect-ratio:1;
overflow:hidden;
background:var(--surface);
border:1px solid var(--line-hi);
border-radius:var(--r-lg);
box-shadow:var(--sh-2);
}

.listen-cover img {
display:block;
width:100%;
height:100%;
object-fit:cover;
}

.listen-cover-play {
position:absolute;
inset:0;
display:grid;
place-items:center;
background:linear-gradient(transparent 55%,rgba(12,10,10,.65));
border:0;
cursor:pointer;
}

.play-btn {
display:grid;
place-items:center;
width:3.5rem;
height:3.5rem;
padding-left:2px;
color:#fff;
background:var(--ember);
border-radius:50%;
box-shadow:var(--glow);
transition:transform var(--tr),background var(--tr);
}

.listen-cover-play:hover .play-btn {
background:var(--ember-hi);
color:var(--bg);
transform:scale(1.08);
}

.listen-cover-meta {
font:var(--t-xs)/1.9 var(--mono);
color:var(--text-3);
}

.listen-cover-meta b {
color:var(--text);
font-weight:500;
}

.listen-cover-meta .sep {
color:var(--ember);
}

.listen-links {
display:flex;
flex-wrap:wrap;
gap:var(--s-2);
}

.listen-link {
display:inline-flex;
align-items:center;
gap:.5rem;
min-height:var(--tap);
padding:0 1rem;
font:500 var(--t-xs)/1 var(--mono);
letter-spacing:.03em;
color:var(--text-2);
border:1px solid var(--line-hi);
border-radius:var(--r-pill);
transition:color var(--tr),border-color var(--tr),background var(--tr);
}

.listen-link:hover {
color:var(--text);
border-color:var(--ember-line);
background:var(--ember-dim);
}

.listen-right {
display:grid;
gap:var(--s-4);
min-width:0;
}

.player-shell {
overflow:hidden;
background:var(--surface);
border:1px solid var(--line-hi);
border-radius:var(--r-lg);
box-shadow:var(--sh-1);
}

.player-head {
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:var(--s-3);
padding:var(--s-3) var(--s-4);
border-bottom:1px solid var(--line);
}

.player-title {
display:flex;
align-items:center;
gap:.65rem;
min-width:0;
flex:1 1 12rem;
font:500 var(--t-xs)/1.4 var(--mono);
color:var(--text-2);
}

.live-dot {
flex-shrink:0;
width:8px;
height:8px;
border-radius:50%;
background:var(--line-hi);
transition:background var(--tr);
}

.player-title.playing .live-dot {
background:var(--ember);
animation:ping 2.8s infinite;
}

.np {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.ptabs {
display:inline-flex;
padding:3px;
background:var(--paper);
border:1px solid var(--line);
border-radius:var(--r-pill);
}

.ptab {
min-height:2.4rem;
padding:0 1rem;
font:500 var(--t-xs)/1 var(--mono);
color:var(--text-3);
background:none;
border:0;
border-radius:var(--r-pill);
cursor:pointer;
transition:color var(--tr),background var(--tr);
}

.ptab:hover {
color:var(--text);
}

.ptab.active {
color:var(--text);
background:var(--ember-dim);
box-shadow:0 0 0 1px var(--ember-line) inset;
}

.player-stage {
position:relative;
aspect-ratio:16/9;
min-height:14rem;
background:var(--paper);
}

.player-pane {
position:absolute;
inset:0;
display:none;
}

.player-pane.active {
display:grid;
place-items:center;
}

.player-pane iframe {
display:block;
width:100%;
height:100%;
border:0;
}

.player-facade {
display:grid;
justify-items:center;
gap:var(--s-4);
padding:var(--s-5) var(--gx);
text-align:center;
}

.facade-btn {
display:inline-flex;
align-items:center;
gap:.6rem;
min-height:var(--tap);
padding:0 1.4rem;
font:500 var(--t-xs)/1 var(--mono);
letter-spacing:.04em;
color:#fff;
background:var(--ember);
border:0;
border-radius:var(--r-pill);
box-shadow:var(--glow);
cursor:pointer;
transition:background var(--tr),color var(--tr),transform var(--tr);
}

.facade-btn:hover {
background:var(--ember-hi);
color:var(--bg);
transform:translateY(-1px);
}

.facade-note {
max-width:26rem;
font:var(--t-xs)/1.7 var(--mono);
color:var(--text-3);
text-wrap:balance;
}

.tracklist {
list-style:none;
overflow:hidden;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
}

.tracklist li+li {
border-top:1px solid var(--line);
}

.track {
display:grid;
grid-template-columns:2rem minmax(0,1fr) 14px auto;
align-items:center;
gap:var(--s-3);
width:100%;
min-height:var(--tap);
padding:.4rem var(--s-4);
text-align:left;
color:var(--text-2);
background:none;
border:0;
cursor:pointer;
transition:background var(--tr),color var(--tr);
}

.track:hover {
background:var(--hover);
color:var(--text);
}

.track:focus-visible {
outline-offset:-3px;
}

.track-num,
.track-dur {
font:var(--t-xs)/1 var(--mono);
color:var(--text-3);
font-variant-numeric:tabular-nums;
}

.track-name {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:var(--t-sm);
line-height:1.4;
}

.track-eq {
display:flex;
align-items:flex-end;
justify-content:space-between;
width:14px;
height:12px;
opacity:0;
transition:opacity var(--tr);
}

.track-eq i {
display:block;
width:3px;
height:100%;
background:var(--ember-hi);
border-radius:1px;
transform:scaleY(.35);
transform-origin:bottom;
}

.track.playing {
color:var(--text);
background:var(--ember-dim);
}

.track.playing .track-num {
color:var(--ember-hi);
}

.track.playing .track-eq {
opacity:1;
}

.track.playing .track-eq i {
animation:eq .9s ease-in-out infinite;
}

.track.playing .track-eq i:nth-child(2) {
animation-delay:.2s;
}

.track.playing .track-eq i:nth-child(3) {
animation-delay:.4s;
}

@keyframes eq {
50% {
transform:scaleY(1);
}
}

.listen-note {
font-size:var(--t-sm);
line-height:1.7;
color:var(--text-2);
text-wrap:pretty;
}

.text-btn {
padding:0;
font:inherit;
color:var(--ember-hi);
background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
border:0;
cursor:pointer;
transition:color var(--tr);
}

.text-btn:hover {
color:var(--text);
}

@media (max-width:760px) {
.listen-grid {
grid-template-columns:minmax(0,1fr);
}

.listen-left {
grid-template-columns:minmax(0,1fr);
justify-items:start;
}

.listen-cover {
width:min(100%,22rem);
}
}

/* == Footer == */
.pub-footer {
margin-top:var(--sec);
background:var(--paper);
border-top:1px solid var(--line);
}

.pub-footer-inner {
max-width:var(--wide);
margin-inline:auto;
padding:var(--s-7) var(--gx) calc(var(--s-7) + env(safe-area-inset-bottom,0px));
display:grid;
gap:var(--s-5);
}

.pub-footer-brand {
font:600 var(--t-lg)/1.25 var(--display);
}

.pub-footer-sub,
.pub-footer-meta {
margin-top:var(--s-2);
font:var(--t-xs)/1.9 var(--mono);
color:var(--text-3);
}

@media (min-width:640px) {
.pub-footer-inner {
grid-template-columns:1fr auto;
align-items:end;
}

.pub-footer-meta {
text-align:right;
}
}

/* == Motion == */
@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto;
}

*,*::before,*::after {
animation-duration:.01ms;
animation-iteration-count:1;
transition-duration:.01ms;
}

.reveal:not(.visible) {
opacity:1;
transform:none;
}

.track.playing .track-eq i {
transform:scaleY(.7);
}
  }