/* Licence to Finish · sistema editorial do Beyond Patterns (mesma anatomia da Errata e do Alastor)
   Noite polar com textura de gelo atrás da leitura (decisão da Juliana em 4/10/2026, no
   lugar do papel claro do mock), luz do Cirrus por trás e o ouro da primeira luz raro. */
:root{
  --ink:#e9eef2; --paper:#0d1a2b; --paper-bright:#13243a; --muted:#b9c7d4; --line:#24384f;
  --accent:#e6b07c; --dark:#0d1a2b; --dark-2:#13243a; --dark-3:#192c45; --light:#e9eef2;
  --dark-muted:#a3b3c4; --dawn:#e6b07c; --dawn-light:#f6d1a8;
  --lift:0 1px 1px #050c16f2,0 2px 6px #050c16bf,0 6px 22px #050c16a6;
  --lift-title:0 2px 2px #050c16e6,0 8px 20px #050c16bf,0 18px 48px #050c1699;
  --lift-small:0 1px 2px #050c16e6;
  --serif:'Cormorant Garamond','Iowan Old Style',Georgia,serif;
  --sans:'DM Sans','Segoe UI',system-ui,sans-serif;
  --mono:'DM Mono','Cascadia Mono',Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
/* o gelo entra com a classe bg-ready (reading.js), depois do load ou na primeira rolagem; sem
   JavaScript, o <noscript> do head aplica direto */
html.bg-ready body{background-image:url("../art/bg-tile-512.webp")}
/* o conteúdo fica acima da luz de fundo, que se mistura só com o gelo do body */
main,.author-end,.site-footer{position:relative;z-index:1}
body.is-pt [data-en],body.is-en [data-pt]{display:none!important}
button,input{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
[hidden]{display:none!important}
::selection{background:var(--dawn-light);color:var(--dark)}
.eyebrow{font:10px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.dawn-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--dawn);margin-right:10px;box-shadow:0 0 0 5px #e6b07c18}
.skip-link{position:fixed;top:0;left:20px;padding:14px;background:var(--paper-bright);z-index:30;transform:translateY(-110%)}.skip-link:focus{transform:none}

/* camada de luz da GetLayers (Cirrus): atrás do conteúdo, em screen sobre o gelo do body;
   só clareia, e a 0,16 o pior caso ainda deixa o texto claro em AA (ver tools/gate_007.py) */
.background-light{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;mix-blend-mode:screen;opacity:0;transition:opacity 1.2s ease}
.background-light.is-ready{opacity:.16}
/* pausa geral: cenas e luz de fundo (bp_motion_paused) */
.motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;color:var(--muted);font:10px var(--mono);letter-spacing:.04em;white-space:nowrap}
.motion-toggle:hover{color:var(--ink)}
.motion-toggle-icon{color:var(--accent)}

/* cabeçalho sobre a capa */
.site-header{height:83px;position:absolute;inset:0 0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:0 5%;color:var(--light);border-bottom:1px solid #e9eef222}
.brand{font:600 22px/1 var(--sans);letter-spacing:-1px;white-space:nowrap}.brand-mark{color:var(--dawn);margin:0 3px;font-weight:400}.brand-dot{color:var(--dawn)}
.header-right{display:flex;align-items:center;gap:32px}
.header-index{font:10px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dark-muted)}
.language{display:flex;gap:7px;align-items:center;font:10px var(--mono)}
.language button{min-width:44px;min-height:44px;padding:8px 4px;color:var(--dark-muted)}
.language button[aria-pressed=true]{color:var(--light);text-decoration:underline;text-decoration-color:var(--dawn);text-underline-offset:6px}
.contents-toggle{display:flex;gap:12px;align-items:center;font:10px var(--mono);min-height:44px}

/* capa */
.cover{position:relative;min-height:760px;height:min(940px,100svh);overflow:hidden;background:var(--dark);color:var(--light)}
.cover .art-frame{position:absolute;inset:0}
.cover-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(90deg,#0b1626f0 0%,#0b1626c4 28%,#0b16265c 52%,#0b162600 74%),
  linear-gradient(0deg,#0b1626fa 0%,#0b162600 28%,#0b162610 80%,#0b16267a 100%)}
.cover-rule{position:absolute;z-index:3;top:110px;bottom:105px;left:5%;width:1px;background:linear-gradient(#e6b07c00,#e6b07c55,#e6b07c00)}
.cover-rule::before{content:'*';position:absolute;top:5%;left:-7px;color:var(--dawn);font:27px var(--serif);animation:breathe 6s ease-in-out infinite}
.cover-copy{position:relative;z-index:3;padding-top:150px;margin-left:10%;width:52%;max-width:780px}
.cover-kicker{color:#cfd9e2;margin:0 0 28px;display:flex;align-items:center;flex-wrap:wrap;gap:0 18px}
.file-code{color:var(--dawn)}
.cover h1{font:500 clamp(64px,7.6vw,124px)/.9 var(--serif);letter-spacing:-.045em;margin:0 0 26px}
.cover h1 em{font-style:italic;font-weight:500;color:var(--dawn-light);position:relative;display:inline-block}
.cover h1 em::after{content:'';position:absolute;left:-3%;right:-6%;bottom:-4px;height:3px;background:linear-gradient(90deg,#e6b07c00,var(--dawn) 25%,var(--dawn-light) 55%,#e6b07c00);transform:rotate(-2deg)}
.cover-deck{font:15px/1.7 var(--sans);color:#d3dce5;margin:28px 0 30px;max-width:460px}
.enter-link{display:inline-flex;align-items:center;gap:22px;font:11px var(--mono);letter-spacing:.03em;min-height:44px}
.arrow-circle{height:36px;width:36px;display:grid;place-items:center;border:1px solid #e9eef25c;border-radius:50%;font-size:18px;transition:transform .2s,background .2s}
.enter-link:hover .arrow-circle{transform:translateY(4px);background:#e9eef214}
.cover-caption{position:absolute;right:6%;bottom:132px;z-index:3;display:flex;gap:18px;font:10px/1.7 var(--mono);color:#d7e0e8;text-transform:uppercase;letter-spacing:.06em}
.cover-caption>span:first-child{color:var(--dawn);padding-top:2px}
.cover-footer{position:absolute;z-index:3;bottom:0;left:5%;right:5%;height:78px;border-top:1px solid #e9eef231;display:flex;align-items:center;justify-content:space-between;gap:20px;font:10px var(--mono);letter-spacing:.025em;color:#c3cfdb}
.score-label{color:var(--dawn)}

/* moldura de arte e pilha animada (mesmo enquadramento cover) */
.art-frame{position:relative;margin:0;overflow:hidden;background:var(--dark)}
.art-frame picture,.art-frame img{display:block;width:100%;height:100%}
.art-frame img{object-fit:cover;object-position:center}
.motion-stack{position:absolute;inset:0;pointer-events:none}
.motion-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform,opacity}
.motion-pause{position:absolute;right:5%;top:104px;z-index:5;display:inline-flex;gap:9px;align-items:center;min-height:40px;padding:0 14px;border:1px solid #e9eef238;background:#0b1626a8;color:var(--light);font:10px var(--mono);letter-spacing:.04em;backdrop-filter:blur(6px)}
.motion-pause:hover{border-color:var(--dawn)}
.article-art .motion-pause,.scene-workbench .motion-pause{top:auto;bottom:14px;right:14px}
/* divisória da abertura do cap. 6, que oscila sozinha (layer-motion.js, anim split) */
.motion-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--dawn);box-shadow:0 0 12px #e6b07c80}

/* faixa de leitura */
.reading-strip{height:58px;position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:0 5%;background:#0d1a2bdb;border-bottom:1px solid var(--line);backdrop-filter:blur(10px);font:10px var(--mono);letter-spacing:.04em}
.strip-location{display:flex;gap:8px;align-items:center;min-height:44px;color:var(--muted)}
.reading-strip .language button{color:var(--muted)}
.reading-strip .language button[aria-pressed=true]{color:var(--ink);text-decoration-color:var(--accent)}
.reading-strip .language{margin-left:auto}
.reading-strip .motion-toggle{margin-left:auto}
.reading-strip .motion-toggle+.language{margin-left:0}
.strip-progress{display:flex;align-items:center;gap:14px;font-size:9px;min-width:135px}
.progress-track{display:block;width:95px;height:2px;background:#2b4058}
.progress-track>span{display:block;height:100%;width:0;background:var(--accent)}

/* índice */
.contents{position:fixed;top:76px;right:4%;z-index:10;width:min(440px,92vw);max-height:calc(100dvh - 96px);overflow:auto;overscroll-behavior:contain;background:var(--paper-bright);color:var(--ink);padding:24px 28px;box-shadow:0 20px 70px #0006;border-top:3px solid var(--accent)}
.contents>.eyebrow{color:var(--accent);margin:0 0 10px}
.contents a{display:flex;gap:16px;align-items:baseline;padding:15px 0;min-height:44px;border-bottom:1px solid var(--line);font:18px/1.3 var(--serif)}
.contents a>span:first-child{font:10px var(--mono);color:var(--accent);min-width:22px}

/* arte de abertura do capítulo */
.article-art{max-width:1180px;margin:90px auto 0;background:var(--dark);color:var(--light);position:relative}
.article-art .art-frame{aspect-ratio:21/9}
.article-art figcaption{display:flex;justify-content:space-between;gap:20px;font:10px/1.6 var(--mono);letter-spacing:.04em;padding:18px 30px;border-top:1px solid #e6b07c40;color:#cfdae4}
.article-art figcaption .art-code{color:var(--dawn)}

/* leitura em duas colunas: margem + prosa */
.reading-section{max-width:1190px;margin:0 auto;display:grid;grid-template-columns:235px minmax(0,665px);gap:55px;padding:72px 35px 40px}
.intro-section{padding-top:96px}
.margin-note{padding-top:40px;color:var(--muted);font:11px/1.8 var(--mono)}
.chapter-number{display:block;font:500 92px/1 var(--serif);letter-spacing:-.06em;color:#8a96a3;margin-bottom:18px}
.margin-line{width:32px;height:1px;display:block;margin:22px 0;background:var(--accent)}
.margin-note p{margin:0}
.prose{min-width:0}
.prose>.eyebrow{color:var(--accent);margin:0 0 16px}
.prose h2{font:500 clamp(42px,4.8vw,62px)/1.04 var(--serif);letter-spacing:-.03em;margin:0 0 30px}
.prose h3{font:500 clamp(28px,2.6vw,36px)/1.15 var(--serif);letter-spacing:-.02em;margin:58px 0 20px}
.prose h3::before{content:'';display:block;width:32px;height:1px;background:var(--accent);margin-bottom:20px}
.byline{display:flex;gap:13px;align-items:center;font:11px/1.7 var(--sans);margin-bottom:42px}
.byline img{width:42px;height:42px;object-fit:cover;border-radius:12px}
.byline-detail{font-size:10px;color:var(--muted)}
/* corpo em Cormorant Garamond 500: no 400 os traços finos somem sobre o gelo (a GetLayers marca a
   Cormorant como fonte de título); a Juliana escolheu o 500 em 4/10/2026, peso já carregado */
.prose p.manuscript{font:500 22px/1.74 var(--serif);margin:0 0 28px;letter-spacing:.003em}
.prose p.manuscript strong{font-weight:600}
.prose p.lead{font-size:26px;line-height:1.5}
.prose p.hammer{font-size:30px;line-height:1.4;letter-spacing:-.02em;margin:40px 0}
.prose p.spoiler{font:13px/1.8 var(--mono);color:var(--muted);border-left:2px solid var(--accent);padding:4px 0 4px 18px;margin:36px 0}
/* profundidade: sombra projetada sob o texto (pedido da Juliana, 4/10/2026). Uma camada curta
   recorta a letra e uma larga afasta o gelo claro de trás; a sombra é a noite polar mais
   funda, nunca preto puro */
.reading-section,.sources-section,.scene-heading{text-shadow:var(--lift)}
.prose h2,.prose h3,.chapter-number,.sources-section h2,.scene-heading h2{text-shadow:var(--lift-title)}
.margin-note,.prose>.eyebrow,.prose p.spoiler,.byline,.scene-heading .eyebrow{text-shadow:var(--lift-small)}
@media(min-width:801px){.margin-note{align-self:start;position:sticky;top:96px}}

/* cenas: faixas escuras de ponta a ponta */
/* com a página toda em noite polar, a faixa da cena não tem fundo próprio: a luz e o gelo
   continuam sem emenda, e dois filetes marcam o começo e o fim da interação */
.editorial-interaction{position:relative;background:transparent;color:var(--light);padding:76px max(5%,calc((100vw - 1210px)/2)) 46px;margin:58px 0;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.editorial-interaction>*{position:relative}
.scene-heading{display:grid;grid-template-columns:1.15fr 1fr;column-gap:65px;align-items:end;margin-bottom:34px}
.scene-heading .eyebrow{grid-column:1/-1;color:var(--dawn);margin:0 0 20px}
.scene-heading h2{font:500 clamp(36px,3.8vw,54px)/1.05 var(--serif);letter-spacing:-.025em;margin:0}
.scene-heading>p:last-child{font:13px/1.9 var(--sans);color:var(--dark-muted);margin:0;max-width:470px}
.scene-workbench{position:relative;border:1px solid #c9d6e33a;background:var(--dark-2);aspect-ratio:16/9;overflow:hidden}
.scene-workbench .art-frame,.scene-workbench>img.stage-bg{position:absolute;inset:0;width:100%;height:100%}
.scene-workbench img.stage-bg{object-fit:cover}
.scene-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px}
.scene-controls button{min-height:46px;padding:13px 20px;font:11px/1.5 var(--mono);text-align:left;background:var(--light);color:var(--dark);border:1px solid #c9d6e3;transition:transform .18s,background .18s}
.scene-controls button:hover:not([aria-disabled=true]){background:#fff;transform:translateY(-2px)}
.scene-controls button.secondary{background:transparent;color:var(--dark-muted);border-color:#5d7189}
.scene-controls button[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.scene-controls button.is-live{box-shadow:inset 0 -3px var(--dawn)}
.scene-output{font:13px/1.85 var(--sans);color:#d6dfe8;border-top:1px solid #c9d6e330;margin:24px 0 0;padding:20px 0 0;min-height:70px;max-width:900px}
.scene-output strong{display:block;color:var(--dawn-light);font-weight:500;margin-bottom:4px}
.scene-scope{font:10px/1.8 var(--mono);color:var(--dark-muted);max-width:840px;margin:20px auto 0;text-align:center}
.scene-toggle{display:inline-flex;align-items:center;gap:10px;min-height:46px;font:11px var(--mono);color:var(--dark-muted);cursor:pointer}
.scene-toggle input{width:18px;height:18px;accent-color:var(--dawn)}

.art-missing{position:absolute;inset:0;display:grid;place-content:center;gap:8px;text-align:center;padding:20px;font:10px/1.7 var(--mono);letter-spacing:.06em;color:var(--dark-muted);background:repeating-linear-gradient(135deg,#13243a 0 14px,#11203440 14px 28px)}
.art-missing b{font:500 22px/1.2 var(--serif);letter-spacing:0;color:var(--light)}

/* fontes, autora, rodapé */
.sources-section{max-width:920px;margin:80px auto;padding:50px 45px;border-top:1px solid var(--line)}
.sources-section>.eyebrow{color:var(--accent)}
.sources-section h2,.author-end h2{font:500 48px/1.1 var(--serif);letter-spacing:-.03em;margin:15px 0 25px}
.sources-section p{font:13px/1.85 var(--sans);color:var(--muted);margin:0 0 18px}
.sources-section p strong{color:var(--ink);font-weight:600}
.author-end{background:#0b1626;border-top:1px solid var(--line);padding:65px 25px 80px;text-align:center}
.author-end>.eyebrow{color:var(--accent)}
.author-avatar{width:140px;height:140px;object-fit:cover;border-radius:12px;display:block;margin:0 auto 28px}
.author-end p:not(.eyebrow){max-width:530px;margin:0 auto;font:14px/1.9 var(--sans);color:var(--muted)}
.end-link{display:inline-block;font:10px var(--mono);padding:12px 0;margin-top:18px;border-bottom:1px solid var(--accent)}
.site-footer{background:#08111d;color:var(--dark-muted);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:38px 5%;font:9px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.site-footer .brand{color:var(--light);font-size:19px;text-transform:none;letter-spacing:-1px}
.site-footer a.footer-top{display:inline-flex;align-items:center;min-height:44px;color:var(--dawn)}
.site-footer a.footer-top:hover{color:var(--dawn-light)}

@keyframes breathe{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(9px)}}

@media(max-width:1100px){.cover-copy{margin-left:8%;width:64%}.reading-section{grid-template-columns:150px minmax(0,650px);gap:35px;padding-left:30px;padding-right:30px}.scene-heading{column-gap:35px}}
@media(max-width:800px){.header-index{display:none}.reading-section{grid-template-columns:1fr;max-width:720px;padding:58px 40px 30px}.margin-note{display:none}.scene-heading{display:block}.scene-heading>p:last-child{margin-top:20px}.article-art{margin-top:50px}}
@media(max-width:600px){
  .site-header{height:67px;padding:0 6%}.brand{font-size:19px}.header-right{gap:14px}.contents-toggle>span:first-child{display:none}
  .cover{min-height:760px;height:calc(100svh + 30px);max-height:900px}
  .cover-shade{background:linear-gradient(90deg,#0b1626d0,#0b162650 85%),linear-gradient(0deg,#0b1626fc,#0b162600 55%,#0b16260a 75%,#0b162673)}
  .cover-copy{padding-top:118px;margin-left:8%;width:86%}
  .cover h1{font-size:clamp(58px,15.5vw,92px)}
  .cover-kicker{font-size:8px;margin-bottom:24px}
  .cover-deck{font-size:13px;line-height:1.8}
  .cover-rule{left:4%;top:92px}
  .cover-caption{bottom:104px;right:8%;font-size:8px}
  .cover-footer{left:8%;right:8%;height:82px;flex-wrap:wrap;align-content:center;row-gap:10px;font-size:8px}
  .motion-pause{bottom:auto;top:78px;right:6%}
  .motion-toggle-label{display:none}
  .reading-strip{height:52px;padding:0 6%;font-size:8px}.strip-location{display:none}.progress-track{width:50px}.strip-progress{min-width:70px}
  .article-art .art-frame{aspect-ratio:4/5}.article-art figcaption{padding:15px 7%;font-size:9px}
  .reading-section{padding:50px 7% 24px}
  .prose h2{font-size:44px}.prose h3{font-size:28px}
  .prose p.manuscript{font-size:20px;line-height:1.72}.prose p.lead{font-size:23px}.prose p.hammer{font-size:27px}
  .editorial-interaction{padding:48px 5% 30px}.scene-heading h2{font-size:35px}
  .scene-workbench{aspect-ratio:4/5}
  .scene-controls button{width:100%}
  .sources-section{padding:35px 7%;margin:40px auto}.sources-section h2,.author-end h2{font-size:38px}
  .author-avatar{width:120px;height:120px}.author-end{padding:50px 7% 65px}
  .site-footer{flex-direction:column;gap:18px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{
  body{background:#fff;color:#000}
  .site-header,.reading-strip,.contents,.editorial-interaction,.motion-stack,.motion-pause,.cover-shade,.cover-rule,.enter-link,.cover-caption,.background-light,.site-footer,.end-link{display:none!important}
  .cover{height:auto;min-height:0;background:#fff;color:#000}.cover .art-frame{position:static;max-height:60vh}.cover-copy{padding:20px 0;margin:0;width:auto}.cover h1{font-size:46px;color:#000}.cover h1 em,.cover-kicker,.cover-deck{color:#000}.cover-footer{position:static;color:#000;height:auto;padding:12px 0}
  .reading-section{display:block;padding:20px 0}.margin-note{display:none}.prose p.manuscript{font-size:12pt;line-height:1.5;orphans:3;widows:3}.prose p.hammer{font-size:16pt}.prose h2{font-size:28pt;break-after:avoid}
  .article-art{max-width:70%;break-inside:avoid;background:#fff}.article-art figcaption{color:#000}
  .author-end{background:#fff}
  .reading-section,.reading-section *,.sources-section,.sources-section *{text-shadow:none!important}
}