/* White editorial surface. Loaded only by posts; the rest of the site stays dark. */
:root{--paper:#ffffff;--ink:#15191f;--muted:#626b76;--line:#e2e5e9;--accent:#eaff00;color:var(--ink);background:var(--paper);color-scheme:light}
.reader-page{display:flow-root;background:linear-gradient(#0b0e12 0 180px,var(--paper) 180px);color:var(--ink);-webkit-font-smoothing:antialiased}
.reader-page ::selection{background:var(--accent);color:var(--ink)}
.reader-page :focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.reader-page .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}

/* Floating header aligns with the article and leaves breathing room on every edge. */
html{scrollbar-gutter:stable;--reader-top-gap:16px;scroll-padding-top:calc(var(--reader-header-clearance,100px) + 24px)}
.reader-page .reader-header{--header-content-inset:clamp(22px,5vw,88px);width:calc(100% - var(--gutter)*2);max-width:var(--reader-width);min-height:76px;top:var(--reader-top-gap);margin:var(--reader-top-gap) auto 0;padding:12px 16px;flex-wrap:wrap;background:#15191f;color:#f4f7fa;border:0;border-radius:999px;box-shadow:0 8px 28px #00000014}
.reader-page.reader-menu-open .reader-header,.reader-page:has(.reader-menu[open]) .reader-header{background:transparent;border-color:transparent;box-shadow:none}
.reader-page .reader-logo{position:relative;top:-3px;z-index:3}
.reader-page .reader-logo img{filter:brightness(0) invert(1)}
.reader-page .reader-menu summary{top:0;z-index:3;color:#f4f7fa;transition:color .18s ease}
.reader-page .reader-menu summary:focus-visible,.reader-page .reader-menu summary:active{color:var(--accent)}
@media(hover:hover) and (pointer:fine){.reader-page .reader-menu summary:hover{color:var(--accent)}}
.reader-page .menu-lines i{background:currentColor}
.reader-page .reader-whatsapp{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:46px;margin-left:auto;padding:12px 20px;border:1px solid transparent;border-radius:999px;background:#eaff00;color:#0b0e12;font-size:.875rem;line-height:1.4;font-weight:600;white-space:nowrap}
.reader-page .reader-whatsapp svg{width:18px;height:18px}
.reader-page .reader-whatsapp:hover{background:#f1ff70}
.reader-page .reader-header :focus-visible,.reader-page .post-opening :focus-visible{outline-color:#eaff00}
.reader-page .reader-header .reader-whatsapp:focus-visible{outline-color:#f4f7fa}
.reader-page .reading-progress{position:fixed;inset:auto 0 0;z-index:40;height:3px;background:#0b0e1214;pointer-events:none}
.reader-page .reading-progress span{background:var(--accent)}
.reader-page.reader-menu-open .reading-progress,.reader-page:has(.reader-menu[open]) .reading-progress{visibility:hidden}

/* Same numbered, full-screen navigation as the home. Details still works without JS. */
.reader-page.reader-menu-open{overflow:hidden}
.reader-page:has(.reader-menu[open]){overflow:hidden}
.reader-page .reader-menu .reader-overlay{position:fixed;inset:0;z-index:1;width:auto;max-height:none;padding:calc(var(--reader-header-height,76px) + var(--reader-top-gap) + 36px) var(--header-content-inset) 45px;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;background:#0b0e12;color:#f4f7fa;border:0;border-radius:0;box-shadow:none}
.reader-page .reader-overlay .menu-links{display:grid;margin:30px 0;max-width:900px}
.reader-page .reader-overlay .menu-links a{display:flex;align-items:baseline;gap:34px;min-height:44px;padding:0;border:0;font-family:var(--font-display);font-stretch:125%;font-weight:700;font-size:clamp(32px,5.4vw,80px);line-height:1.25;letter-spacing:-.05em}
.reader-page .reader-overlay .menu-links small{flex:none;font-size:.875rem;letter-spacing:.02em;color:#a8b6c7}
.reader-page .reader-overlay .menu-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px 28px;margin-top:auto;padding-top:24px;border-top:1px solid #3b495b}
.reader-page .reader-overlay .menu-foot a{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;font-size:.875rem}
.reader-page .reader-overlay a:hover{color:var(--accent)}

/* The black band follows the title height, then rounds off halfway down the cover. */
.post-opening{display:grid;grid-template-columns:minmax(0,1fr);isolation:isolate;margin-bottom:clamp(40px,5vw,64px)}
.post-opening::before{content:'';grid-area:1/1;z-index:-1;background:#0b0e12;pointer-events:none}
.post-opening::after{content:'';grid-area:2/1;align-self:start;height:50%;z-index:-1;background:#0b0e12;border-radius:0 0 50% 50% / 0 0 100% 100%;pointer-events:none}
.reader-page .post-opening .post-heading{grid-area:1/1;width:100%;color:#f4f7fa}
.reader-page .post-opening .post-cover{grid-area:2/1;width:100%;margin-bottom:0}
.reader-page .post-opening .post-introduction{color:#c8d3df}
.reader-page .post-opening .post-category,.reader-page .post-opening .post-category>span,.reader-page .post-opening .post-byline{color:#a8b6c7}
.reader-page .post-opening .post-byline>span:first-child{color:#f4f7fa}
.reader-page .post-opening .post-category a:hover{color:var(--accent)}

/* A shared 1000px column for heading, featured image and reading layout. */
.reader-page .post-heading{padding-block:clamp(36px,5vw,64px) 32px}
.reader-page .post-category{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:24px;color:var(--muted);font-size:.875rem;font-weight:400}
.reader-page .post-category a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none}
.reader-page .post-category a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.reader-page .post-category>span{color:#77818c}
.reader-page .post-heading h1{font-size:clamp(2rem,3.65vw,3.125rem);line-height:1.17;letter-spacing:-.035em;max-width:none;text-wrap:pretty}
.reader-page .post-introduction{margin-top:22px;color:#46505c;font-size:clamp(1.125rem,1.5vw,1.25rem);line-height:1.7}
.reader-page .post-byline{font-size:.875rem;margin-top:24px;gap:8px 20px}
.reader-page .post-byline>span+span::before{background:#89929d}
.reader-page .post-cover{margin-bottom:clamp(40px,5vw,64px)}
.reader-page .cover-stage{background:#f4f5f7;border-color:#e2e5e9;border-radius:4px;box-shadow:none}
.reader-page .rail-content{padding-top:0;top:calc(var(--reader-header-clearance,100px) + 28px)}
.reader-page .contents summary{color:var(--ink)}
.reader-page .contents nav a,.reader-page .contents nav a>span{color:var(--muted)}
.reader-page .contents nav a:hover,.reader-page .contents nav a[aria-current="location"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.reader-page .article-body p,.reader-page .article-body li{color:#38424e}
.reader-page .article-body h2{line-height:1.28}
.reader-page .article-body a{text-decoration-color:#7e8793}
.reader-page .article-body a:hover{text-decoration-color:var(--ink)}
.reader-page .article-body blockquote{border-color:var(--ink)}
.reader-page .full-project{background:#f6f7f8;border-color:var(--line);border-radius:4px}
.reader-page .full-project>p{color:var(--muted)}

/* Three real destinations, with existing covers and no competing card controls. */
.related-posts{margin-top:clamp(48px,6vw,80px);padding-block:40px 64px}
.related-posts>h2{border-top:1px solid var(--line);padding-top:32px;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.25;margin-bottom:28px}
.related-posts>h2>span{color:var(--accent)}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0}
.related-card{min-width:0}
.related-card>a{display:block;height:100%;border-radius:12px}
.related-cover{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:#f4f5f7;isolation:isolate}
.related-cover>img{width:100%;height:100%;object-fit:contain}
.related-card h3{margin-top:18px;font-size:clamp(1.0625rem,1.5vw,1.25rem);font-weight:600;line-height:1.5;letter-spacing:-.025em;overflow-wrap:anywhere}
.related-card>a:hover h3,.related-card>a:focus-visible h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* Commercial close: strong brand contrast, ordinary links, no motion or lead capture. */
.reader-page .reader-contact{display:block;margin:0;padding:0;border:0;background:#0b0e12;color:#f4f7fa}
.reader-contact-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(32px,5vw,64px);padding-block:clamp(56px,7vw,88px)}
.reader-contact-copy{min-width:0}
.reader-page .reader-eyebrow{font-size:.875rem;line-height:1.5;color:#a8b6c7;margin:0 0 18px}
.reader-page .reader-contact h2{font-size:clamp(2rem,3.5vw,3rem);line-height:1.18;letter-spacing:-.04em}
.reader-page .reader-contact h2>span{color:var(--accent)}
.reader-page .reader-contact-description{font-size:1.0625rem;line-height:1.8;color:#c8d3df;margin:22px 0 0;max-width:60ch}
.reader-contact-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.reader-contact-actions a{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:54px;padding:15px 22px;border:1px solid transparent;border-radius:5px;font-size:1rem;line-height:1.45}
.reader-contact-actions svg{width:20px;height:20px}
.reader-contact-actions .reader-contact-primary{background:#eaff00;color:#0b0e12}
.reader-contact-actions .reader-contact-primary:hover{background:#f1ff70}
.reader-contact-actions .reader-contact-secondary{color:#f4f7fa;border-color:#70829555}
.reader-contact-actions .reader-contact-secondary:hover{border-color:#a8b6c7;background:#ffffff08}
.reader-page .reader-contact :focus-visible,.reader-page .reader-footer :focus-visible{outline-color:#eaff00}

/* Same three-part structure as the homepage, without another logo or form. */
.reader-page .reader-footer{display:block;padding:0;border:0;background:#0b0e12;color:#f4f7fa}
.reader-footer-inner{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:28px;align-items:center;border-top:1px solid #3b495b;padding-block:28px 36px}
.reader-footer-inner>div>p{font-size:.875rem;line-height:1.5}
.reader-footer-inner>div>span{display:block;font-size:.8125rem;color:#a8b6c7;margin-top:8px}
.reader-footer-inner nav{display:flex;gap:20px;flex-wrap:wrap}
.reader-page .reader-footer a{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;line-height:1.5;min-height:44px}
.reader-page .reader-footer a:hover{color:#eaff00}
.reader-page .reader-footer svg{width:16px;height:16px;transform:rotate(-45deg)}
.reader-footer-inner>small{color:#a8b6c7;font-size:.8125rem;white-space:nowrap}

@media(max-width:800px){
  .reader-contact-inner{grid-template-columns:1fr;gap:28px}
  .reader-contact-actions{flex-direction:row;flex-wrap:wrap;align-items:center}
  .reader-footer-inner{grid-template-columns:minmax(0,1fr) auto;gap:16px 24px}
  .reader-footer-inner>small{grid-column:1/-1}
}
@media(max-width:700px){.reader-page .reader-header{--header-content-inset:24px}}
@media(max-width:640px){.related-grid{grid-template-columns:1fr;gap:32px}.related-posts{padding-block:24px 48px}.related-card h3{font-size:1.125rem;margin-top:14px}}
@media(max-width:480px){
  html{--reader-top-gap:12px}
  .reader-page .reader-header{gap:10px;min-height:68px;padding:10px}
  .reader-page .reader-whatsapp{padding-inline:14px;gap:10px;min-height:44px}
  .reader-page .reader-overlay .menu-links a{gap:22px}
  .reader-page .post-heading{padding-block:28px}
  .reader-page .post-heading h1{font-size:clamp(1.75rem,7.4vw,2.125rem);line-height:1.2}
  .reader-page .post-category{margin-bottom:18px}
  .reader-page .post-byline{font-size:.8125rem;gap:8px 14px}
  .reader-page .reader-contact-description{font-size:1rem}
  .reader-contact-actions{flex-direction:column;align-items:stretch}
  .reader-contact-actions a{width:100%;padding-inline:18px}
  .reader-footer-inner{grid-template-columns:1fr;gap:16px;padding-block:24px 30px}
  .reader-footer-inner nav{gap:16px 24px}
}
@media(prefers-reduced-motion:reduce){.reader-page *,.reader-page *::before,.reader-page *::after{animation:none!important;transition:none!important}}
@media print{.reader-page{color:#000;background:#fff}.reader-page .post-introduction,.reader-page .article-body p,.reader-page .article-body li{color:#000}.reader-page .reader-contact,.reader-page .reader-footer,.reader-page .reading-progress,.related-posts{display:none!important}}
@media print{.post-opening{display:block}.post-opening::before,.post-opening::after{display:none}.reader-page .post-opening .post-heading,.reader-page .post-opening .post-introduction,.reader-page .post-opening .post-category,.reader-page .post-opening .post-byline,.reader-page .post-opening .post-byline>span:first-child{color:#000}}
@media(forced-colors:active){.reader-page .reader-contact,.reader-page .reader-footer{background:Canvas;color:CanvasText}.reader-contact-actions a{border:1px solid ButtonText}.reader-page :focus-visible{outline-color:Highlight}}