:root{--ink:#ebe4d7;--muted:#b8b9ad;--accent:#c4aa80;--line:#66604d;--bg:#0b1011}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.75 system-ui,-apple-system,sans-serif}
body:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,16,17,.94) 0%,rgba(11,16,17,.79) 48%,rgba(11,16,17,.46) 100%),var(--page-bg,url('assets/tlo-start.jpg')) center/cover no-repeat;filter:saturate(.72) contrast(1.04);pointer-events:none}
body:after{content:"";position:fixed;inset:0;z-index:-1;background:url('assets/archiwum.svg') right -60px top 120px/950px auto no-repeat;opacity:.11;pointer-events:none}
a{color:inherit;text-underline-offset:5px}
a:hover{color:var(--accent)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.wrap{width:min(1150px,calc(100% - 64px));margin:auto}
header{position:relative;z-index:10;border-bottom:1px solid #b8a37a44;background:#0b1011ed}
.top{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:96px}
.brand{font:1.4rem Georgia,serif;text-decoration:none;line-height:1.2}
.brand span{display:block;font-style:italic;color:var(--accent)}
nav{display:flex;align-items:center;gap:26px}
nav>a,nav>details>summary{font-size:.84rem;text-decoration:none;white-space:nowrap}
nav a[aria-current=page]{color:var(--accent)}
nav details{position:relative}
summary{cursor:pointer}
nav summary{list-style:none}
nav summary:after{content:' +';color:var(--accent)}
nav details[open] summary:after{content:' −'}
nav .drop{position:absolute;top:38px;left:-22px;min-width:225px;padding:18px 22px;background:#141b1b;border:1px solid #6a5b41;box-shadow:0 15px 25px #0008}
nav .drop a{display:block;padding:8px 0;font-size:.85rem;text-decoration:none}
.mobile-menu{display:none}
.overline,.section-no,.label{font: .7rem/1.7 ui-monospace,SFMono-Regular,monospace;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.cover{position:relative;isolation:isolate;overflow:hidden;min-height:590px;display:flex;align-items:center}
.cover .scene{position:absolute;z-index:-2;inset:0;background:var(--page-bg,url('assets/tlo-start.jpg')) center/cover no-repeat;filter:saturate(.72) contrast(1.05)}
.cover:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#0b1011f2 0,#0b1011a8 43%,#0b101119 80%),linear-gradient(0deg,var(--bg),transparent 50%)}
.cover-copy{padding:48px 0 70px;max-width:670px}
h1{font:400 clamp(3.2rem,6.3vw,5.5rem)/1.06 Georgia,serif;margin:18px 0 25px;letter-spacing:-.035em}
h1 em{color:#d3bc95;font-weight:400}
h2{font:400 clamp(2.1rem,4vw,3.4rem)/1.15 Georgia,serif;margin:12px 0 25px}
h3{font:400 clamp(1.5rem,2.5vw,2.2rem)/1.25 Georgia,serif;margin:10px 0 14px}
p{max-width:740px}
.cover-copy>p:not(.overline){max-width:460px;color:#d6d5c9}
.links{display:flex;gap:25px;flex-wrap:wrap;margin-top:30px}
.links a{font-size:.94rem;color:var(--accent);text-decoration:none;border-bottom:1px solid #97836a;padding:7px 0}
.cover-credit{position:absolute;bottom:15px;right:25px;color:#d1d3c7;font-size:.65rem}
.fog{pointer-events:none;position:absolute;inset:40% -20% -10%;z-index:0;background:radial-gradient(ellipse at 60% 80%,#dbe6dc20,transparent 65%);filter:blur(25px);animation:drift 35s ease-in-out infinite alternate}
.cover .wrap{position:relative;z-index:1}
.entry-list{padding:30px 0 44px}
.entry{display:grid;grid-template-columns:55px 1fr auto;gap:20px;align-items:center;border-top:1px solid #9c8b6744;padding:19px 0;text-decoration:none}
.entry:last-child{border-bottom:1px solid #9c8b6744}
.entry .n{font:italic 1.5rem Georgia,serif;color:#9a8b73}
.entry strong{font:400 1.2rem Georgia,serif}
.entry small{display:block;font-size:.7rem;color:var(--muted);margin-top:5px}
.entry .arrow{color:var(--accent);font-size:1.5rem}
.page-heading{padding:55px 0 22px}
.page-heading h1{font-size:clamp(2.8rem,5vw,4.8rem)}
.page-heading .lead{color:var(--muted);max-width:650px}
.reading{padding-bottom:55px}
.story{position:relative;max-width:900px;margin:0;padding:32px 0;border-top:1px solid #a9956b66;scroll-margin-top:30px}
.story-top{display:flex;justify-content:space-between;color:var(--accent);font: .7rem ui-monospace,monospace;letter-spacing:.05em}
.story-number{font:italic 1.5rem Georgia,serif}
.story>p{color:var(--muted);max-width:730px}
.story details{max-width:760px}
.story summary{display:inline-block;color:var(--accent);font-size:.85rem;border-bottom:1px solid #958261;padding:4px 0;list-style:none}
.story summary:after{content:' +';margin-left:15px}
.story details[open] summary:after{content:' −'}
.story details p{color:#d3d1c3}
.story blockquote{font:italic 1.5rem/1.5 Georgia,serif;color:#ccb794;border-left:1px solid #8b7052;padding-left:22px;margin:25px 0}
.source,.reading-date{font-size:.76rem;color:var(--muted)}
.source a{color:var(--accent)}
.next{padding:0 0 50px}
.next-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.next .tag{font:.7rem ui-monospace,monospace;color:var(--accent);letter-spacing:.07em}
.next h2{margin-top:20px}
.next p{color:#d0d1c2}
.note-strip{font:.75rem ui-monospace,monospace;display:flex;flex-wrap:wrap;gap:15px;color:var(--accent);margin:25px 0}
.timeline{border-left:1px solid var(--accent);padding-left:25px}
.timeline b{color:var(--accent);display:block;font:.8rem ui-monospace,monospace}
.timeline p{margin:0 0 20px}
.next details{border-top:1px solid #96826066;padding:20px 0}
.content{padding:20px 0 35px}
.intro{display:grid;grid-template-columns:.9fr 1.2fr;gap:65px}
.intro p,.author p{color:#d0d1c2}
.author{border-top:1px solid #96826055}
.author-grid{display:grid;grid-template-columns:.9fr 1.2fr;gap:65px}
.author h2{font-size:2.3rem}
.faq{max-width:830px}
.faq details{border-top:1px solid #96826055;padding:18px 0}
.faq summary{font-size:1rem}
.faq details p{color:var(--muted)}
.footer{border-top:1px solid #96826044;padding:22px 0;display:flex;justify-content:space-between;gap:20px;font-size:.75rem;color:var(--muted)}
.footer p{margin:0}
.footer a{color:var(--accent);text-decoration:none}
.quick-nav{display:flex;gap:20px;flex-wrap:wrap;margin:20px 0 30px}
.quick-nav a{font-size:.82rem;color:var(--accent)}

@keyframes drift{from{transform:translateX(-5%)}
to{transform:translateX(5%)}
}

@media(max-width:900px){.top{min-height:90px}
nav{gap:15px}
.brand{font-size:1.2rem}
.intro,.author-grid{gap:35px}
}

@media(max-width:700px){.wrap{width:calc(100% - 36px)}
.desktop-menu{display:none}
.mobile-menu{display:block}
.top{min-height:80px}
.mobile-menu summary{list-style:none;font: .8rem ui-monospace,monospace;color:var(--accent);padding:14px 4px}
.mobile-menu summary:after{content:' ☰'}
.mobile-menu[open] summary:after{content:' ×'}
.mobile-menu nav{position:absolute;top:80px;left:0;right:0;display:flex;align-items:stretch;flex-direction:column;gap:0;background:#111918;border-bottom:1px solid #8b7757;padding:15px 25px}
.mobile-menu nav>a{padding:11px 0}
.mobile-menu .sub{font-size:.75rem;padding:7px 0 7px 15px;color:#b8b9ad}
.cover{min-height:560px}
.cover-copy{padding:40px 0 70px}
h1{font-size:clamp(3rem,12vw,4.2rem)}
.cover:after{background:linear-gradient(90deg,#0b1011dd,#0b10115e),linear-gradient(0deg,var(--bg),transparent 65%)}
.cover-credit{right:18px;max-width:210px;text-align:right;font-size:.6rem}
.cover-copy>p:not(.overline){font-size:.97rem}
.links{gap:15px 25px}
.entry{grid-template-columns:32px 1fr 20px;gap:10px;padding:18px 0}
.entry strong{font-size:1.09rem}
.page-heading{padding:35px 0 15px}
.page-heading h1{font-size:2.8rem}
.next-grid,.intro,.author-grid{grid-template-columns:1fr;gap:15px}
.story{padding:24px 0}
.story-top{line-height:1.6;gap:18px}
.footer{flex-wrap:wrap}
.entry-list{padding:15px 0 30px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.fog{animation:none}
}


.story details h4{font:400 1.3rem/1.4 Georgia,serif;color:var(--accent);margin:30px 0 12px}
.story details p{max-width:730px}
.story details .reading-date{font-size:.7rem;color:var(--muted);border-top:1px solid #96826044;padding-top:15px;margin-top:25px}


/* Atmosphere: visible layers beneath the reading plane. */
.cover .scene{filter:saturate(.2) contrast(1.12) brightness(.82)}

.cover:after{background:linear-gradient(90deg,#091013f2 0,#0b1114b8 40%,#101e282e 76%),linear-gradient(0deg,var(--bg),transparent 42%)}

.cover .fog{inset:0;z-index:0;filter:none;animation:none;opacity:1;background:radial-gradient(ellipse at 83% 25%,#bcd5dd35 0,transparent 40%),linear-gradient(0deg,#90abb422,transparent 48%);pointer-events:none}

.cover .fog:before,.cover .fog:after{content:"";position:absolute;pointer-events:none;width:145%;left:-23%;height:65%;bottom:-14%;filter:blur(15px);will-change:transform;background:radial-gradient(ellipse at 16% 68%,#d8e6e98c 0,#c0d4de40 13%,transparent 29%),radial-gradient(ellipse at 45% 58%,#dce8e980 0,#c7dce54a 16%,transparent 34%),radial-gradient(ellipse at 79% 70%,#e4edea9e 0,#c3d6de52 18%,transparent 39%);animation:mist-near 19s ease-in-out infinite alternate;opacity:.78}

.cover .fog:after{bottom:4%;height:73%;opacity:.57;filter:blur(24px);background:radial-gradient(ellipse at 18% 62%,#cbdedb7d 0,transparent 32%),radial-gradient(ellipse at 61% 52%,#deebe8a1 0,#abc4ce45 19%,transparent 43%),radial-gradient(ellipse at 91% 66%,#ccdde77d 0,transparent 32%);animation:mist-far 27s ease-in-out infinite alternate}

.cover .wrap{z-index:2}
.cover-copy{background:radial-gradient(ellipse at 35% 45%,#07101432,transparent 70%)}

.cover h1{text-shadow:0 3px 18px #000a,0 0 55px #bbd5d511}
.cover-credit{z-index:3;text-shadow:0 1px 5px #000}

body:before{background:linear-gradient(90deg,rgba(11,16,17,.94) 0%,rgba(11,16,17,.79) 48%,rgba(11,16,17,.46) 100%),var(--page-bg,url('assets/tlo-start.jpg')) center/cover no-repeat}

body:after{opacity:.11}
.entry-list{position:relative}
.entry-list:before{content:"";position:absolute;left:0;right:0;top:-20px;height:65px;background:radial-gradient(ellipse at 70% 0,#b8cfce25,transparent 67%);pointer-events:none}

@keyframes mist-near{0%{transform:translate3d(-8%,3%,0) scale(1.02)}
50%{transform:translate3d(0,-2%,0) scale(1.06)}
100%{transform:translate3d(8%,1%,0) scale(1.02)}
}

@keyframes mist-far{0%{transform:translate3d(7%,-1%,0) scale(1.06)}
100%{transform:translate3d(-7%,4%,0) scale(1)}
}

@media(max-width:700px){.cover .fog:before{height:54%;bottom:-10%;opacity:.72;filter:blur(12px)}
.cover .fog:after{height:68%;bottom:0;opacity:.5;filter:blur(18px)}
.cover:after{background:linear-gradient(90deg,#091013db,#0b111482),linear-gradient(0deg,var(--bg),transparent 60%)}
.cover .fog{background:radial-gradient(ellipse at 85% 18%,#bcd5dd30,transparent 50%)}
.cover-copy>p:not(.overline){text-shadow:0 2px 8px #000}
.links a{text-shadow:0 2px 8px #000}
}

@media(prefers-reduced-motion:reduce){.cover .fog:before,.cover .fog:after{animation:none;will-change:auto;transform:none}
}


/* Mobile motion: keep the approved light levels and move the existing bands. */
@-webkit-keyframes mobile-mist-near{from{-webkit-transform:translate(-10%,2%);transform:translate(-10%,2%)}
to{-webkit-transform:translate(10%,-2%);transform:translate(10%,-2%)}
}

@keyframes mobile-mist-near{from{transform:translate(-10%,2%)}
to{transform:translate(10%,-2%)}
}

@-webkit-keyframes mobile-mist-far{from{-webkit-transform:translate(9%,-2%);transform:translate(9%,-2%)}
to{-webkit-transform:translate(-9%,2%);transform:translate(-9%,2%)}
}

@keyframes mobile-mist-far{from{transform:translate(9%,-2%)}
to{transform:translate(-9%,2%)}
}

@media(max-width:700px){
.cover .fog:before{-webkit-animation:mobile-mist-near 14s ease-in-out -4s infinite alternate;animation:mobile-mist-near 14s ease-in-out -4s infinite alternate;will-change:transform;-webkit-animation-play-state:running;animation-play-state:running}

.cover .fog:after{-webkit-animation:mobile-mist-far 20s ease-in-out -9s infinite alternate;animation:mobile-mist-far 20s ease-in-out -9s infinite alternate;will-change:transform;-webkit-animation-play-state:running;animation-play-state:running}

}

@media(max-width:700px) and (prefers-reduced-motion:reduce){
.cover .fog:before{-webkit-animation-duration:28s;animation-duration:28s}

.cover .fog:after{-webkit-animation-duration:40s;animation-duration:40s}

}


.read-story,.back-link{color:var(--accent);font-size:.88rem;text-decoration:none;border-bottom:1px solid #8a7652;padding-bottom:5px}
.story h3 a{text-decoration:none}
.article-shell{padding:30px 0 55px}
.long-story{max-width:800px;margin:30px auto 0}
.article-heading{background:none;border:0;color:var(--ink);position:static;z-index:auto}
.article-heading h1{font-size:clamp(2.4rem,4.8vw,4.2rem);line-height:1.13;max-width:800px}
.article-lead{font-size:1.15rem;color:#d1d0c2;margin-bottom:30px}
.contents{display:flex;align-items:flex-start;flex-direction:column;gap:9px;padding:22px 0;margin:25px 0 35px;border-block:1px solid #88765a66}
.contents a{font-size:.86rem;color:var(--accent);text-decoration:none;white-space:normal}
.article-body{max-width:740px}
.article-body p{color:#d5d3c7;font-size:1.06rem;line-height:1.85}
.article-body h2{font-size:1.8rem;margin:38px 0 14px;scroll-margin-top:30px}
.evidence{border-top:1px solid #8f795b88;margin-top:45px;padding-top:32px}
.evidence>h2{font-size:2.3rem}
.evidence-row{display:grid;grid-template-columns:210px 1fr;gap:30px;border-top:1px solid #6d665544;padding:19px 0}
.evidence-row h3{font:400 1.08rem/1.5 Georgia,serif;color:var(--accent);margin:0}
.evidence-row p{color:#c8c9bd;margin:0;font-size:.94rem}
.article-sources{padding:28px 0;border-top:1px solid #6d665566;margin-top:25px}
.article-sources h2{font-size:1.5rem}
.article-sources a{overflow-wrap:anywhere}
.article-next{display:grid;grid-template-columns:1fr 1fr;gap:35px;border-top:1px solid #8f795b66;padding-top:25px;margin-top:30px;align-items:start}
.article-next a{font:1.1rem/1.5 Georgia,serif;text-decoration:none;white-space:normal}
.article-next small{display:block;font:.7rem/1.6 ui-monospace,monospace;color:var(--accent);margin-bottom:10px}

@media(max-width:700px){.article-shell{padding-top:25px}
.article-heading h1{font-size:2.5rem}
.article-lead{font-size:1.03rem}
.contents{margin-top:20px}
.article-body p{font-size:1rem}
.article-body h2{font-size:1.55rem}
.evidence-row{grid-template-columns:1fr;gap:8px}
.evidence>h2{font-size:2rem}
.article-next{grid-template-columns:1fr;gap:25px}
.article-next a{font-size:1.05rem}
}


.archive-divider{padding:35px 0 8px;margin-top:20px}
.archive-divider h2{font-size:2rem}
.archive-divider:before{content:"";display:block;width:55px;height:1px;background:var(--accent);margin-bottom:24px}