@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

/* Wojak's room and day form the world; the original information stays inside its chapters. */
:root{--display:'Archivo Black',Impact,'Arial Black',sans-serif}
html{scroll-padding-top:94px}
.world-page{background:#efe7d6}
.nav,.nav.compact{height:78px;border-bottom:2px solid var(--ink)}
.nav .site-logo{width:46px;height:46px;border:1px solid var(--ink)}
.nav .brand{font-size:12px;letter-spacing:.8px}
.nav nav{gap:24px}
.nav nav a{font-size:11px;letter-spacing:.6px}
.nav nav a.is-current{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:8px}
.button{border-width:2px;border-radius:6px}
.nav .button{background:var(--gold);color:var(--ink);border-color:var(--ink)}
.nav .button:hover{background:#e5ca92}
.nav .x-button{border:2px solid var(--ink);border-radius:6px}
.hero h1,.display,.footer-word,.real-story-copy h3,.scene-content h3,.impact-grid strong,.article-reader h1,.article-reader h2{font-family:var(--display);font-weight:400}
.display{font-size:clamp(44px,5.4vw,80px);line-height:1.04;letter-spacing:-2.5px}
.display em{font-style:normal}
.world-page .hero{display:flex;align-items:center;min-height:calc(100svh - 78px);padding:70px 6% 158px;position:relative;background:var(--paper);isolation:isolate}
.world-page .hero .hero-portrait{position:absolute;inset:0;max-width:none;width:100%;height:100%;border:0;margin:0;z-index:-1}
.world-page .hero .hero-portrait img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:left bottom}
.world-page .hero .hero-portrait picture{display:block;width:100%;height:100%}
.world-page .hero-content{width:48%;max-width:650px;padding:0}
.world-page .hero h1{font-size:clamp(64px,7.4vw,112px);line-height:1.04;letter-spacing:-3px;text-transform:none;margin:0 0 26px}
.world-page .hero h1>span{display:block}
.world-page .hero h1 em{font:700 clamp(28px,2.7vw,42px)/1.2 var(--sans);letter-spacing:-.8px;text-transform:none;color:var(--accent);margin-top:18px}
.world-page .hero h2{font:500 18px/1.5 var(--sans);max-width:440px;margin-bottom:10px}
.world-page .hero p{font-size:14px;max-width:440px;color:var(--muted)}
.world-page .hero .actions{gap:24px;margin-top:24px}
.world-page .hero .button{background:var(--ink);color:var(--paper);border-color:var(--ink);padding:18px 21px}
.world-page .hero .button:hover{background:#49463e}
.world-page .hero .quiet-link{font-size:10px;letter-spacing:.8px}
.world-page .hero-day-path{position:absolute;left:6%;right:6%;bottom:24px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:0;background:var(--surface);color:var(--ink);border:2px solid var(--ink);border-radius:10px;overflow:hidden;z-index:3}
.hero-day-path a{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:19px 20px;min-height:94px;border-right:1px solid var(--line);text-decoration:none}
.hero-day-path a:last-child{border-right:0}
.hero-day-path .moment-time{font:600 10px/1.4 var(--sans);letter-spacing:.8px;text-transform:uppercase;color:var(--accent)}
.hero-day-path strong{font:700 14px/1.3 var(--sans);padding-right:13px}
.hero-day-path .moment-arrow{position:absolute;right:14px;bottom:22px;font-size:14px}
.hero-day-path a:hover,.hero-day-path a[aria-current="true"]{background:#eee1c6;color:var(--ink)}
.world-page .ticker{border-top:0;border-bottom:2px solid var(--ink);background:var(--ink);color:var(--paper);font-size:10px;letter-spacing:1.3px;padding:15px 0}
.world-page .ticker>div>span:before{color:var(--gold)}
.world-page #story{display:flow-root;scroll-margin-top:-16px}
.world-page .section{position:relative;width:calc(100% - 96px);max-width:1320px;margin:52px auto;padding:46px;background:var(--surface);color:var(--ink);border:2px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 #d5c5a5;scroll-margin-top:-16px}
.world-page .section-top{margin-bottom:36px;min-height:25px;position:relative;z-index:1}
.world-page .section-top>span:first-child{display:inline-flex;width:fit-content;padding:5px 9px;background:#eee1c6;border:1px solid #bdab89;border-radius:3px;font:600 10px/1.4 var(--sans);letter-spacing:1px;color:var(--ink)}
.world-page .section-top>span:last-child:not(:first-child){font-size:9px;align-self:center}
.world-page .story-grid{gap:7%;align-items:center}
.world-page .story-copy .display{font-size:clamp(40px,4.6vw,66px)}
.world-page .story-copy p{font-size:15px;line-height:1.8}
.world-page .story-copy h3{font:500 24px/1.4 var(--sans)}
.world-page .portrait-figure{max-width:480px;transform:rotate(1.5deg)}
.world-page .image-frame{border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.world-page .portrait-figure figcaption{font-size:10px;color:var(--ink);font-weight:600}
.world-page .portrait-note{font:italic 20px/1.4 'Playfair Display',Georgia,serif;color:var(--muted)}
.world-page #day{background:var(--surface);border:2px solid var(--ink)}
.world-page .day-grid{grid-template-columns:minmax(0,34fr) minmax(0,58fr);gap:7%}
.world-page .day-heading{top:105px}
.world-page .day-heading .display{font-size:clamp(42px,5.2vw,76px);line-height:1.05}
.world-page .day-heading>.eyebrow{padding:5px 9px;border:1px solid #bdab89;border-radius:3px;background:#eee1c6;width:fit-content;margin-bottom:24px;color:var(--ink)}
.world-page .day-nav a{font-size:12px;line-height:1.5;border-color:var(--line)}
.world-page .day-nav a.active{background:#eee1c6;border-color:var(--ink);border-left:3px solid var(--ink);font-weight:700}
.world-page .scene-img{border:2px solid var(--ink);border-radius:10px;overflow:hidden}
.world-page .scene-content{padding-top:22px}
.world-page .scene-content h3{font-size:29px;line-height:1.15;letter-spacing:-1px}
.world-page .scene-content p{font-size:14px;line-height:1.8}
.world-page .next-moment{font-weight:700}
.world-page #cause{background:#eee1c6;border:2px solid var(--ink)}
.world-page .pledge-grid{gap:7%}
.world-page .pledge-copy{padding:30px;border:2px solid var(--ink);border-radius:10px;background:var(--surface)}
.world-page .pledge-copy strong{font:400 clamp(70px,8vw,112px)/1 var(--display);letter-spacing:-5px;margin-bottom:20px}
.world-page .pledge-copy .pledge-statement{font:600 20px/1.5 var(--sans)}
.world-page .meme-grid{gap:22px}
.meme-image,.meme-image img,dialog #meme-full{background:#fff}
.world-page .meme-card{border:2px solid var(--ink);border-radius:9px;background:var(--paper);box-shadow:3px 3px 0 #ded2b9}
.world-page .meme-meta{background:var(--paper);border-top:2px solid var(--ink)}
.world-page .meme-meta>span{font-size:10px;font-weight:700;color:var(--accent)}
.world-page .meme-meta h3{font-size:15px;font-weight:600}
.world-page .meme-actions a,.world-page .meme-actions button{font-weight:600}
.world-page .vault-filters button{border:2px solid var(--ink);border-radius:5px;font-size:10px;font-weight:700;letter-spacing:.5px;background:var(--surface)}
.world-page .vault-filters button[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
.world-page #hope{border:2px solid var(--ink);scroll-margin-top:0}
.world-page #hope .real-story-card{border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--paper)}
.world-page .real-story-copy h3{font-size:26px;letter-spacing:-.8px}
.world-page .real-story-copy .quiet-link{font-weight:700}
.world-page #mha .impact-grid article{border:2px solid var(--ink);border-radius:9px;background:var(--paper)}
.world-page #mha .impact-grid strong{font-size:48px;letter-spacing:-2px}
.world-page .footer{background:var(--ink);color:var(--paper);border-top:2px solid var(--ink);margin-top:60px}
.world-page .footer-word{font-size:clamp(40px,8vw,122px);line-height:1.05;letter-spacing:-4px;color:var(--paper);border-color:#ffffff30}
.world-page .footer-word>em{font:700 .4em/1.3 var(--sans);letter-spacing:-1px;font-style:normal;color:var(--gold);margin-top:20px}
.world-page .footer-top,.world-page .footer-bottom,.world-page .legal{border-color:#ffffff30}
.world-page .footer-bottom span,.world-page .legal{color:#d6d0c3}
.world-page .footer a:focus-visible{outline-color:var(--gold)}
.chapter-rail{position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:8px}
.chapter-rail a{position:relative;display:grid;place-items:center;width:34px;height:34px;background:var(--surface);border:1px solid var(--ink);border-radius:50%;font:700 9px var(--sans)}
.chapter-rail a.is-current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rail-label{display:none;position:absolute;right:43px;white-space:nowrap;padding:8px 12px;background:var(--ink);color:var(--paper);border-radius:4px;font-size:11px}
.chapter-rail a:hover .rail-label,.chapter-rail a:focus-visible .rail-label{display:block}
@media(max-width:1250px){.chapter-rail{display:none}}
@media(max-width:1050px){.hero-day-path a{padding:17px 14px}.hero-day-path strong{font-size:12px}.hero-day-path .moment-arrow{right:10px}.world-page .section{padding:36px}.world-page .impact-grid article{padding:23px}.world-page #mha .impact-grid strong{font-size:43px}}
@media(max-width:1050px){
  .world-page .hero{display:block;min-height:0;padding:34px 0 28px}
  .world-page .hero-content{width:88%;max-width:780px;text-align:center;margin:0 auto 26px}
  .world-page .hero h1{font-size:clamp(44px,10.5vw,90px);letter-spacing:-2px;line-height:1.06;margin-bottom:20px}
  .world-page .hero h1 em{font-size:clamp(26px,4.5vw,34px);margin-top:16px;letter-spacing:-.6px}
  .world-page .hero h2,.world-page .hero p{max-width:none}
  .world-page .hero .actions{justify-content:center;gap:18px}
  .world-page .hero .hero-portrait{position:relative;inset:auto;width:100%;height:clamp(330px,55vw,520px);z-index:0}
  .world-page .hero .hero-portrait img{object-position:72% bottom}
  .world-page .hero-day-path{position:relative;inset:auto;width:88%;margin:0 auto;grid-template-columns:repeat(5,minmax(148px,1fr));overflow-x:auto;border-radius:8px}
  .hero-day-path a{min-height:90px}
  .world-page .section{width:calc(100% - 48px);padding:32px;margin:36px auto;box-shadow:4px 4px 0 #d5c5a5}
  .world-page .day-grid{gap:6%}
  .world-page .real-stories-grid{grid-template-columns:1fr}
  .world-page .real-story-card{display:grid;grid-template-columns:40% minmax(0,1fr)}
  .world-page .real-story-photo img{height:100%;aspect-ratio:auto}
  .world-page #mha .impact-grid{grid-template-columns:1fr}
  .world-page #mha .impact-grid p{min-height:0}
  .world-page .pledge-copy{padding:24px}
}
@media(max-width:950px){.nav nav{gap:0}.nav nav a{font-size:12px}}
@media(max-width:760px){
  html{scroll-padding-top:92px}.nav,.nav.compact{height:76px}.nav .site-logo{width:38px;height:38px}.nav .brand{font-size:9px;letter-spacing:.6px}
  .world-page .hero h2{font-size:16px}.world-page .hero p{font-size:13px}
  .world-page .hero .button{font-size:10px;padding:15px 16px;gap:16px}
  .world-page .hero .quiet-link{font-size:9px}
  .world-page .section{padding:24px}
  .world-page .section-top{margin-bottom:28px}
  .world-page .display,.world-page .story-copy .display{font-size:clamp(34px,8.4vw,50px);letter-spacing:-1.5px}
  .world-page .story-grid,.world-page .day-grid{display:block}
  .world-page .portrait-figure{margin-top:28px;transform:none;max-width:none}
  .world-page .day-heading .display{font-size:48px}.world-page .day-heading .display br{display:none}
  .world-page .day-nav{margin-bottom:26px}.world-page .day-nav a{font-size:10px;min-height:44px;padding:10px}
  .world-page .scene-content h3{font-size:25px;letter-spacing:-.7px}
  .world-page .pledge-copy{margin-top:26px}.world-page .pledge-copy .pledge-statement{font-size:18px}
  .world-page .meme-grid{gap:18px}.world-page .meme-meta{padding:18px}
  .world-page .footer-word{letter-spacing:-1.5px}.world-page .footer-word>em{font-size:.6em;margin-top:14px}
}
@media(max-width:650px){
  .world-page .section{width:calc(100% - 28px);padding:18px;border-radius:10px}
  .world-page .meme-grid{grid-template-columns:minmax(0,1fr)}
  .world-page .real-story-card{display:flex}.world-page .real-story-photo img{aspect-ratio:16/10;height:auto}
  .world-page .real-story-copy{padding:20px}.world-page .real-story-copy h3{font-size:25px}
  .world-page .hero-day-path{width:92%}.world-page .hero h1{letter-spacing:-1.5px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}