@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root {
  --bg:#101c17;
  --paper:#f5f3ec;
  --text:#f8f9f4;
  --muted:#a0ada4;
  --primary:#cee69e;
  --youtube:#f00;
  font-family:'DM Sans',Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3,p,figure { margin:0; }
[hidden] { display:none!important; }
a:focus-visible,button:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--primary); outline-offset:5px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:fixed; z-index:20; top:8px; left:8px; padding:12px; background:var(--primary); color:var(--bg); transform:translateY(-200%); }
.skip:focus { transform:none; }
.eyebrow { font-size:10px; font-weight:500; letter-spacing:.15em; line-height:1.5; text-transform:uppercase; }
.masthead { position:absolute; z-index:4; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:32px 4.5%; gap:24px; }
.brand { display:flex; align-items:center; gap:24px; }
.brand img { width:154px; height:auto; }
.brand>span { padding-left:24px; border-left:1px solid #ffffff45; font-size:9px; letter-spacing:.18em; }
.masthead nav { display:flex; align-items:center; gap:32px; font-size:12px; }
.masthead nav a { padding-block:8px; }
.world-link { display:flex; align-items:center; gap:12px; }
.world-link span { font-size:20px; }
.hero { position:relative; height:100svh; min-height:720px; isolation:isolate; overflow:hidden; background:#26362c; }
.hero-slide { position:absolute; inset:0; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,#071711a8 0%,#07171135 65%,#07171114),linear-gradient(0deg,#101c17 0%,#101c171a 25%,transparent 70%,#07171145 100%); }
.hero-copy { position:absolute; left:4.5%; bottom:24%; width:min(660px,65%); }
.hero-copy>.eyebrow { margin-bottom:24px; }
.meta-dot { opacity:.55; margin-inline:12px; }
.hero h1 { font-size:clamp(58px,6.8vw,108px); font-weight:500; letter-spacing:-.065em; line-height:1.01; text-wrap:balance; }
.hero-description { margin-top:24px; max-width:365px; font-size:15px; line-height:1.65; color:#f5f7eecc; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:15px 22px; gap:16px; border:0; border-radius:3px; font-size:12px; font-weight:600; color:var(--bg); background:var(--primary); transition:filter .2s; }
.button:hover { filter:brightness(1.1); }
.button--primary>span { font-size:18px; line-height:1; }
.button--youtube { background:var(--youtube); color:white; gap:10px; }
.button--youtube svg { flex-shrink:0; }
.hero-bottom { position:absolute; z-index:2; bottom:36px; inset-inline:4.5%; display:flex; align-items:center; gap:36px; }
.browse-cue { display:flex; gap:20px; align-items:center; white-space:nowrap; font-size:8px; letter-spacing:.18em; }
.browse-cue>span:last-child { font-size:25px; }
.feature-picker { display:flex; flex:1; min-width:0; gap:20px; overflow:auto; scrollbar-width:none; }
.feature-picker::-webkit-scrollbar { display:none; }
.feature-picker button { flex:0 0 145px; color:#ffffff75; background:none; text-align:left; border:0; border-top:1px solid #ffffff30; padding:13px 0 4px; display:flex; align-items:flex-start; gap:10px; line-height:1.4; }
.feature-picker button[aria-pressed=true] { color:white; border-color:var(--primary); }
.feature-number { font-size:9px; margin-top:2px; }
.feature-title { font-size:11px; }
.hero-controls { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.hero-controls>span { font-size:9px; letter-spacing:.08em; margin-right:10px; white-space:nowrap; }
.hero-controls button,.rail-controls button { display:grid; place-items:center; width:38px; height:38px; border:1px solid #ffffff3d; border-radius:50%; background:transparent; color:white; font-size:16px; }
.hero-controls button:hover,.rail-controls button:hover { background:#ffffff16; border-color:#ffffff90; }
.browse { padding:62px 0 50px; scroll-margin-top:24px; }
.browse-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 4.5% 50px; }
.browse-heading .eyebrow { color:var(--muted); margin-bottom:12px; font-size:9px; }
.browse-heading h2 { font-size:clamp(30px,3.6vw,48px); line-height:1.12; font-weight:400; letter-spacing:-.04em; }
.filters { display:flex; gap:6px; flex-shrink:0; }
.filters button { border:1px solid #ffffff28; border-radius:30px; padding:10px 18px; background:none; color:var(--muted); font-size:11px; }
.filters button[aria-pressed=true] { background:var(--primary); border-color:var(--primary); color:var(--bg); }
.shelf { margin-bottom:44px; }
.shelf-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 4.5%; margin-bottom:18px; }
.shelf-heading h2 { font-size:20px; font-weight:500; letter-spacing:-.035em; }
.rail-controls { display:flex; gap:7px; }
.rail-controls button { width:30px; height:30px; font-size:14px; }
.card-rail { display:flex; gap:18px; overflow-x:auto; padding:0 4.5% 12px; scroll-snap-type:x proximity; scroll-padding-inline:4.5%; scrollbar-width:thin; scrollbar-color:#48594e transparent; }
.story-card { flex:0 0 clamp(260px,27vw,390px); min-width:0; scroll-snap-align:start; }
.card-photo { position:relative; overflow:hidden; border-radius:4px; background:#293f32; aspect-ratio:16/10; }
.card-photo>img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.story-card:hover .card-photo>img { transform:scale(1.035); }
.card-arrow { position:absolute; display:grid; place-items:center; right:14px; bottom:14px; width:30px; height:30px; background:#0c1b1466; border:1px solid #ffffff55; border-radius:50%; }
.film-badge { position:absolute; top:12px; right:12px; background:var(--youtube); color:white; border-radius:3px; padding:5px; display:grid; place-items:center; }
.film-badge svg { width:20px; height:14px; }
.story-card>.eyebrow { margin-top:16px; font-size:8px; color:var(--primary); }
.story-card .eyebrow>span { color:var(--muted); letter-spacing:.05em; margin-left:6px; }
.story-card h3 { font-size:19px; font-weight:400; letter-spacing:-.02em; margin-top:7px; line-height:1.3; }
.preview-note { margin:12px 4.5% 0; font-size:11px; line-height:1.6; color:var(--muted); }
.footer { margin:0 4.5%; padding:35px 0; display:flex; align-items:center; gap:30px; border-top:1px solid #ffffff22; }
.footer img { width:125px; }
.footer p { color:var(--muted); font-size:11px; }
.footer>span { margin-left:auto; color:#839389; font-size:9px; }
.article-hero { position:relative; height:82svh; min-height:580px; max-height:1000px; }
.article-hero .hero-shade { background:linear-gradient(90deg,#071711aa,#07171122),linear-gradient(0deg,#071711aa,transparent 80%); }
.article-hero-copy { position:absolute; bottom:70px; left:4.5%; width:min(780px,85%); }
.back-link { display:inline-block; font-size:11px; color:#ffffffbb; margin-bottom:35px; }
.article-hero-copy>.eyebrow { margin-bottom:16px; }
.article-hero h1 { font-size:clamp(48px,6.5vw,100px); line-height:1.02; letter-spacing:-.065em; font-weight:500; text-wrap:balance; }
.article-hero-copy>p:last-of-type { max-width:480px; font-size:15px; line-height:1.6; margin-top:24px; color:#ffffffcf; }
.reading-section { background:var(--paper); color:#293b2e; padding:80px 24px 90px; }
.prose { max-width:680px; margin:auto; font-size:16px; line-height:1.85; }
.writing-note { font-size:11px; line-height:1.7; border-left:2px solid #688548; padding-left:16px; color:#70796d; margin-bottom:40px; }
.article-lead { font-size:26px; line-height:1.5; letter-spacing:-.035em; }
.prose h2 { font-size:28px; letter-spacing:-.04em; line-height:1.2; font-weight:500; margin:42px 0 18px; }
.prose>p:not(.article-lead):not(.writing-note) { color:#586355; }
.prose figure { margin:40px -80px; }
.prose figure>img { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:3px; }
.prose figcaption { margin-top:12px; font-size:10px; color:#747e70; }
.prose figcaption a { text-decoration:underline; text-underline-offset:3px; }
.story-end { display:flex; align-items:center; gap:16px; font-size:12px; margin:45px 0 40px; }
.story-end>span:first-child { color:#6b8849; font-size:30px; }
.article-back { border-top:1px solid #d5d8ce; padding-top:22px; display:block; font-size:12px; }
.related { padding:56px 0 15px; }
dialog { background:var(--paper); color:#293b2e; border:0; border-radius:8px; padding:42px; width:min(480px,calc(100% - 40px)); }
dialog::backdrop { background:#071711b5; backdrop-filter:blur(5px); }
dialog .eyebrow { color:#7d8b73; margin-bottom:18px; }
dialog h2 { font-size:34px; font-weight:500; line-height:1.1; letter-spacing:-.04em; margin-bottom:20px; }
dialog p:not(.eyebrow) { color:#6b7464; font-size:14px; line-height:1.7; }
dialog .button { margin-top:28px; }
.dialog-close { position:absolute; right:15px; top:12px; border:0; background:none; font-size:25px; color:#293b2e; }
.error-page { min-height:80vh; padding:180px 4.5% 100px; }
.error-page h1 { font-size:clamp(42px,6vw,80px); max-width:650px; line-height:1.1; letter-spacing:-.05em; margin:20px 0 35px; }
@media (min-width:1600px) { .hero-copy { bottom:25%; } .story-card { flex-basis:24vw; } }
@media (max-width:900px) {
  .brand>span { display:none; }
  .hero-copy { width:72%; }
  .hero-bottom { gap:20px; }
  .browse-cue { display:none; }
  .browse-heading { align-items:flex-start; flex-direction:column; }
  .prose figure { margin-inline:0; }
  .footer { flex-wrap:wrap; }
  .footer>span { margin-left:0; }
}
@media (max-width:600px) {
  .masthead { padding:25px 24px; }
  .brand img { width:128px; }
  .masthead nav { gap:0; }
  .world-link { display:none!important; }
  .masthead nav a { font-size:11px; }
  .hero { min-height:740px; }
  .hero-shade { background:linear-gradient(0deg,#101c17 0%,#0c1a14aa 35%,#07171116 90%),linear-gradient(90deg,#07171150,transparent); }
  .hero-image { object-position:58% center; }
  .hero-copy { left:24px; right:24px; width:auto; bottom:150px; }
  .hero h1 { font-size:clamp(48px,12.8vw,74px); max-width:440px; }
  .hero-copy>.eyebrow { margin-bottom:20px; font-size:9px; }
  .hero-description { font-size:14px; max-width:290px; margin-top:22px; }
  .actions { gap:10px; margin-top:26px; }
  .button { padding:14px 17px; font-size:11px; min-height:46px; gap:12px; }
  .hero-bottom { inset-inline:24px; bottom:36px; gap:14px; }
  .feature-picker { gap:8px; }
  .feature-picker button { flex:0 0 22px; padding-top:12px; }
  .feature-title { display:none; }
  .feature-number { font-size:9px; }
  .hero-controls { gap:5px; }
  .hero-controls>span { margin-right:4px; font-size:8px; }
  .hero-controls button { width:32px; height:32px; }
  .browse { padding:40px 0 32px; }
  .browse-heading { margin:0 24px 30px; gap:24px; }
  .browse-heading h2 { font-size:32px; }
  .filters button { font-size:10px; padding:9px 16px; }
  .shelf { margin-bottom:32px; }
  .shelf-heading { padding-inline:24px; margin-bottom:15px; }
  .shelf-heading h2 { font-size:18px; }
  .card-rail { padding-inline:24px; scroll-padding-inline:24px; gap:14px; }
  .story-card { flex-basis:78vw; }
  .story-card h3 { font-size:18px; }
  .preview-note { margin-inline:24px; font-size:10px; }
  .footer { margin-inline:24px; gap:18px; padding:28px 0; }
  .footer>span { flex-basis:100%; line-height:1.6; }
  .footer p { font-size:10px; }
  .footer img { width:110px; }
  .article-hero { height:88svh; min-height:640px; }
  .article-hero-copy { left:24px; width:calc(100% - 48px); bottom:50px; }
  .article-hero h1 { font-size:52px; }
  .article-hero-copy>p:last-of-type { font-size:14px; }
  .back-link { margin-bottom:30px; }
  .reading-section { padding:44px 24px 52px; }
  .prose { font-size:15px; }
  .article-lead { font-size:23px; }
  .prose h2 { font-size:25px; }
  .prose figure { margin-block:30px; }
  .related { padding-top:35px; }
  dialog { padding:34px 26px; }
}
@media (max-width:350px) { .hero-controls>span { display:none; } .button--youtube { gap:7px; padding-inline:12px; } .masthead { padding-inline:20px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }