@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=DM+Mono:wght@400&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --night: #170c10;
  --deep: #10090c;
  --paper: #f3e7d1;
  --ink: #30161c;
  --muted: #6f514e;
  --red: #a2263b;
  --signal: #ef8591;
  --ghost: #c7a9a8;
  --hairline: #65444a;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
  --mono: 'DM Mono', monospace;
}
* {box-sizing: border-box}
html {scroll-behavior: smooth; scroll-padding-top: 90px; background: var(--night)}
body {margin: 0; color: var(--paper); background: var(--night); font-family: var(--sans); -webkit-font-smoothing: antialiased}
body.is-en [data-pt], body.is-pt [data-en], html[data-lang='pt'] body.is-en [data-en] {display: none}
html[data-lang='pt'] body.is-en [data-pt] {display: revert}
[hidden] {display: none !important}
button, input {font: inherit}
button, a {-webkit-tap-highlight-color: transparent}
a {color: inherit; text-underline-offset: 4px}
button {cursor: pointer}
button:focus-visible, a:focus-visible {outline: 3px solid var(--signal); outline-offset: 5px}
::selection {background: #a2263b; color: #fff1dd}
.skip-link {position: fixed; top: -100px; left: 20px; background: var(--paper); color: var(--ink); z-index: 30; padding: 16px}
.skip-link:focus {top: 12px}
.site-header {height: 85px; padding: 0 5%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #513037; position: relative; z-index: 5; gap: 24px}
.brand {text-decoration: none; display: inline-flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap}
.brand-mark {font: 30px var(--serif); color: var(--signal); line-height: 1}
.header-index {font: 10px var(--mono); letter-spacing: .16em; color: var(--ghost); text-transform: uppercase}
.header-tools, .language-switch {display: flex; align-items: center; gap: 8px}
.header-tools {gap: 28px}
.jump {font-size: 11px; text-decoration: none; border-bottom: 1px solid #8e6871; padding: 7px 0}
.language-switch {border-left: 1px solid var(--hairline); padding-left: 20px; gap: 2px}
.language-switch button {border: 0; color: var(--ghost); background: transparent; min-width: 44px; min-height: 44px; font: 11px var(--mono)}
.language-switch button[aria-pressed='true'] {color: var(--paper); box-shadow: inset 0 -2px var(--signal)}
.hero {min-height: 660px; height: min(790px, calc(100svh - 85px)); position: relative; overflow: hidden; isolation: isolate}
.hero-art {position: absolute; inset: 0 0 0 18%; z-index: -3}
.hero-art img {width: 100%; height: 100%; object-fit: cover; object-position: 66% center; display: block}
.hero::before {content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, var(--night) 0%, rgba(23,12,16,.96) 19%, rgba(23,12,16,.62) 42%, rgba(23,12,16,.03) 70%), linear-gradient(0deg, var(--night), transparent 27%)}
.hero::after {content: ''; position: absolute; left: 5%; top: 50px; bottom: 34px; width: 1px; background: linear-gradient(var(--red), #75414b 65%, transparent); z-index: -1}
.hero-content {padding: 61px 8% 95px; max-width: 880px}
.eyebrow {font: 10px/1.7 var(--mono); letter-spacing: .17em; text-transform: uppercase; color: var(--ghost); margin: 0}
.hero .eyebrow {display: flex; gap: 12px; align-items: center}
.live-dot {display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px #cf4a66}
.chapter-number {font: 12px var(--mono); color: var(--signal); margin-top: 56px; display: block}
h1 {font: 500 clamp(74px, 7.9vw, 126px)/.85 var(--serif); letter-spacing: -.047em; margin: 19px 0 30px; max-width: 570px}
h1 em {font-weight: 500; color: #ef8591; display: block; margin-left: .35em}
.hero-deck {max-width: 350px; font: 400 15px/1.8 var(--sans); color: #e0c8bf; margin: 0 0 34px}
.enter-link {display: inline-flex; align-items: center; gap: 25px; padding: 12px 0; border-bottom: 1px solid var(--signal); text-decoration: none; font-size: 12px}
.enter-link .arrow {color: var(--signal); font-size: 20px; transition: transform .2s}
.enter-link:hover .arrow {transform: translateY(4px)}
.hero-caption {position: absolute; right: 5%; bottom: 45px; text-align: right; font: 9px/1.7 var(--mono); color: var(--ghost); letter-spacing: .08em}
.reading-meta {display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 8%; border-top: 1px solid #513037; font: 10px var(--mono); letter-spacing: .04em; color: var(--ghost)}
.reading-meta .byline {color: var(--paper)}
.reading-meta .counts {display: flex; gap: 23px; flex-wrap: wrap}
.paper {background: var(--paper); color: var(--ink); position: relative; padding: 89px 6% 77px}
.reading-grid {max-width: 1080px; display: grid; grid-template-columns: 180px minmax(0,660px); gap: 68px; margin: 0 auto}
.margin-note {padding-top: 6px; border-top: 1px solid #b89d91}
.margin-note .eyebrow {color: var(--muted); font-size: 9px}
.margin-number {font: 500 91px/.95 var(--serif); letter-spacing: -.07em; color: var(--red); margin: 18px 0 20px}
.margin-note p {font: 12px/1.8 var(--sans); max-width: 150px; color: var(--muted)}
.chapter-copy h2 {font: 500 40px/1.08 var(--serif); margin: 0 0 30px; letter-spacing: -.025em}
.chapter-copy p {font: 18px/1.95 var(--sans); letter-spacing: -.02em; margin: 0 0 28px}
.chapter-copy .lead {font: 500 28px/1.4 var(--serif); letter-spacing: -.01em}
.blank-quote {max-width: 960px; margin: 68px auto 5px; padding: 38px 55px 45px; position: relative; border-top: 1px solid #b89d91; border-bottom: 1px solid #b89d91}
.blank-quote::before {content: '“'; position: absolute; left: 5px; top: 18px; font: 110px var(--serif); color: var(--red)}
.blank-quote p {font: 500 clamp(30px,3.2vw,47px)/1.14 var(--serif); letter-spacing: -.025em; margin: 0; max-width: 750px}
.blank-quote .line {width: 30%; height: 2px; background: var(--red); display: block; margin: 26px 0 0 auto}
.experiment {padding: 65px 6% 70px; background: radial-gradient(ellipse at 76% 50%, #30121c, transparent 64%), var(--deep); overflow: hidden; position: relative}
.experiment-head {max-width: 1080px; margin: 0 auto 38px; display: flex; justify-content: space-between; align-items: flex-end; gap: 45px}
.experiment-head h2 {font: 500 clamp(40px,4vw,58px)/1 var(--serif); letter-spacing: -.035em; margin: 15px 0 0}
.experiment-head .instruction {font: 13px/1.8 var(--sans); color: var(--ghost); max-width: 280px; margin: 0}
.deal-stage {max-width: 1080px; margin: 0 auto}
.deal-world {display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 43px}
.contract {color: var(--ink); background: #eadbc2; background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, #bda38d09 4px); padding: 30px 34px 26px; position: relative; transform: rotate(-1.3deg); box-shadow: 0 13px 42px #0006}
.contract::before {content: ''; position: absolute; inset: 9px; border: 1px solid #ac8c7c; pointer-events: none}
.contract-header {display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #a88379; padding-bottom: 16px; font: 9px var(--mono); letter-spacing: .12em; text-transform: uppercase}
.contract-header .contract-symbol {font: 30px var(--serif); color: var(--red)}
.contract h3 {font: 600 36px/.98 var(--serif); letter-spacing: -.025em; max-width: 260px; margin: 22px 0}
.terms {margin: 0}
.terms > div {padding: 10px 0; border-top: 1px solid #c5aa94}
.terms dt {font: 9px var(--mono); color: #6f514e; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px}
.terms dd {font: 14px/1.5 var(--sans); margin: 0}
.favor-line {min-height: 40px; color: var(--red); font: italic 500 27px/1.3 var(--serif); border-bottom: 1px solid var(--red); padding: 8px 0; margin: 2px 0 14px}
.contract-small {font: 9px/1.6 var(--mono); color: var(--muted); margin: 0}
.contract-seal {position: absolute; right: 26px; top: 92px; width: 58px; height: 58px; border: 2px solid var(--red); border-radius: 50%; display: grid; place-items: center; color: var(--red); font: 10px var(--mono); transform: rotate(-15deg); opacity: .65}
.transmission {position: relative; min-width: 0; padding: 9px 0}
.transmission-header, .transmission-footer {display: flex; justify-content: space-between; gap: 16px; font: 9px var(--mono); letter-spacing: .11em; color: var(--ghost); text-transform: uppercase; padding: 0 15px}
.transmission-header {align-items: center; color: var(--signal)}
.radio-scene {position: relative; width: 100%; min-height: 280px; aspect-ratio: 1.5}
.radio-scene svg {display: block; width: 100%; height: 100%; overflow: visible}
#ether-canvas {position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; touch-action: pan-y pinch-zoom}
.transmission-footer {margin-top: 8px; padding-top: 16px; border-top: 1px solid #5a303c; letter-spacing: .03em; line-height: 1.6; text-transform: none}
.deal-status {min-height: 52px; max-width: 820px; text-align: center; margin: 30px auto 12px; font: 15px/1.65 var(--sans); color: var(--paper)}
.deal-actions {display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 54px}
.action {border: 1px solid #c8445a; min-height: 49px; padding: 13px 25px; background: #aa2c42; color: #fff3e3; box-shadow: 0 4px 0 #5c1524, inset 0 1px 0 #e687944a; font: 500 12px var(--sans); transition: transform .15s, background .15s, box-shadow .15s}
.action:hover {background: #b5364d}
.action:active {transform: translateY(3px); box-shadow: 0 1px 0 #5c1524}
.action.secondary {background: #36232a; border-color: #73525a; box-shadow: 0 4px 0 #080406, inset 0 1px 0 #bc92921a; color: var(--paper)}
.action.secondary:hover {background: #4c303a}
.deal-outcome {max-width: 730px; margin: 27px auto 0; font: 500 27px/1.35 var(--serif); text-align: center; color: var(--signal)}
.stage-caption {font: 9px/1.7 var(--mono); color: var(--ghost); text-align: center; max-width: 710px; margin: 30px auto 0}
.deal-stage[data-phase='called'] .contract {transform: rotate(0); box-shadow: 0 0 0 1px #cf677a, 0 18px 65px #9c183633}
.deal-stage[data-phase='called'] .contract-seal {opacity: 1}
.deal-stage[data-phase='declined'] .contract {transform: rotate(-3deg)}
.afterword {padding-top: 77px}
.afterword .chapter-copy p:last-child {margin-bottom: 0}
.margin-thread {width: 55px; height: 100px; margin-top: 24px; color: var(--red)}
.end-mark {display: block; color: var(--red); font: 34px var(--serif); text-align: center; margin: 40px auto 0}
.chapter-copy .source-note {max-width: 660px; margin: 40px auto 0; border-top: 1px solid #b89d91; padding: 18px 0 0; font: 11px/1.8 var(--sans); color: var(--muted)}
.author-footer {text-align: center; padding: 65px 24px 35px; background: var(--night)}
.author-avatar {width: 140px; height: 140px; object-fit: cover; border-radius: 12px; margin-bottom: 20px}
.author-footer h2 {font: 500 32px var(--serif); margin: 5px 0 13px}
.author-footer .bio {font: 13px/1.8 var(--sans); color: var(--ghost); max-width: 380px; margin: 0 auto 25px}
.footer-home {display: inline-block; min-height: 44px; padding: 12px; font-size: 11px}
.footer-bottom {max-width: 1080px; margin: 45px auto 0; padding-top: 23px; border-top: 1px solid #513037; display: flex; justify-content: space-between; gap: 20px; color: var(--ghost); font: 9px var(--mono)}
.no-js {padding: 20px; background: var(--paper); color: var(--ink); text-align: center}
@media (min-width: 1600px) {.hero-content {margin-left: max(0px,calc((100vw - 1450px) / 2))} .hero-art {left: 23%}}
@media (max-width: 1000px) {.header-index {display: none} .reading-grid {grid-template-columns: 120px minmax(0,660px); gap: 40px} .deal-world {gap: 24px} .contract {padding: 25px} .hero-content {padding-left: 8%} .hero-caption {display: none}}
@media (max-width: 700px) {
  html {scroll-padding-top: 24px}
  .site-header {height: 70px; padding: 0 6%; gap: 15px}
  .brand {font-size: 12px; gap: 8px}
  .header-tools {gap: 8px}
  .jump {display: none}
  .language-switch {padding-left: 8px}
  .language-switch button {min-width: 40px}
  .hero {height: auto; min-height: 730px}
  .hero-art {inset: 0 0 auto 0; height: 510px}
  .hero-art img {object-position: 72% center; opacity: .86}
  .hero::before {background: linear-gradient(0deg,var(--night) 26%,rgba(23,12,16,.97) 36%,rgba(23,12,16,.35) 64%,rgba(23,12,16,.02) 90%)}
  .hero::after {left: 6%; top: 34px; bottom: 35px}
  .hero-content {padding: 28px 9% 40px; max-width: none}
  .hero .eyebrow {font-size: 8px; letter-spacing: .1em}
  .chapter-number {margin-top: 292px; font-size: 10px}
  h1 {font-size: clamp(68px,15.7vw,98px); margin: 15px 0 25px; max-width: none}
  h1 em {display: inline; margin-left: 0}
  .hero-deck {font-size: 13px; line-height: 1.8; max-width: 310px; margin-bottom: 20px}
  .enter-link {font-size: 11px}
  .reading-meta {padding: 22px 9%; display: block; font-size: 9px; line-height: 1.6}
  .reading-meta .counts {gap: 16px; margin-top: 12px}
  .paper {padding: 49px 8%}
  .reading-grid {display: block}
  .margin-note {display: flex; align-items: baseline; gap: 14px; border: 0; margin-bottom: 26px; padding: 0}
  .margin-number {font-size: 35px; margin: 0; order: -1}
  .margin-note p, .margin-thread {display: none}
  .margin-note .eyebrow {font-size: 8px}
  .chapter-copy h2 {font-size: 35px; margin-bottom: 25px}
  .chapter-copy p {font-size: 16px; line-height: 1.95; margin-bottom: 25px}
  .chapter-copy .lead {font-size: 27px; line-height: 1.45}
  .blank-quote {padding: 27px 0 30px 22px; margin-top: 37px}
  .blank-quote::before {left: -8px; top: 12px; font-size: 68px}
  .blank-quote p {font-size: 32px; line-height: 1.15}
  .experiment {padding: 45px 6%}
  .experiment-head {display: block; margin-bottom: 32px; padding: 0 2%}
  .experiment-head h2 {font-size: 42px; margin-top: 13px}
  .experiment-head .instruction {font-size: 12px; max-width: 310px; margin-top: 18px}
  .deal-world {display: flex; flex-direction: column; gap: 15px}
  .contract {width: min(100% - 12px,430px); padding: 28px; transform: rotate(-1deg)}
  .contract h3 {font-size: 34px; max-width: 220px}
  .transmission {width: 100%; padding-top: 20px}
  .radio-scene {aspect-ratio: 1.65; min-height: 220px; max-height: 320px}
  .transmission-header {font-size: 8px}
  .transmission-footer {font-size: 9px; margin-top: 0; padding: 13px 10px 0}
  .deal-status {font-size: 13px; margin-top: 25px; min-height: 65px; padding: 0 6px}
  .deal-actions {gap: 13px 10px}
  .action {flex: 1 1 130px; padding: 14px 16px; font-size: 12px; min-height: 50px}
  .deal-outcome {font-size: 25px; padding: 0 6px}
  .stage-caption {font-size: 8px; margin-top: 27px; padding: 0 6px}
  .source-note {font-size: 10px}
  .author-avatar {width: 120px; height: 120px}
  .author-footer {padding-top: 49px}
  .footer-bottom {font-size: 8px; gap: 12px; flex-wrap: wrap; justify-content: center}
}
@media (prefers-reduced-motion: reduce) {html {scroll-behavior: auto} *, *::before, *::after {animation: none !important; transition: none !important}}
@media print {
  :root {--paper: #fff; --ink: #000; --muted: #333; --red: #000; --ghost: #333}
  html, body {background: #fff; color: #000}
  .site-header, .hero-art, .hero::before, .hero::after, .enter-link, .experiment, .hero-caption, .footer-home, .skip-link {display: none}
  .hero {height: auto; min-height: 0; overflow: visible}
  .hero-content {padding: 20px 0; max-width: none}
  .chapter-number {margin-top: 15px; color: #000}
  h1 {font-size: 60px; max-width: none; color: #000}
  h1 em {display: inline; color: #000}
  .hero-deck, .eyebrow, .reading-meta, .byline {color: #000 !important}
  .reading-meta {padding: 15px 0; border-color: #000}
  .paper {padding: 22px 0; background: #fff}
  .reading-grid {display: block; max-width: none}
  .margin-note {display: none}
  .chapter-copy p {font-size: 12pt; line-height: 1.6; orphans: 3; widows: 3}
  .blank-quote {margin: 20px 0; padding: 25px 30px; break-inside: avoid}
  .blank-quote p {font-size: 24pt}
  .author-footer {background: #fff; padding: 25px 0; color: #000}
  .author-avatar {display: none}
  .author-footer .bio {color: #000}
  .footer-bottom {color: #000; border-color: #000}
}