:root{
  --paper:#f6f1e7; --paper-2:#eee6d6; --ink:#1f2a2b; --ink-soft:#4f5b5a;
  --sea:#2f5d62; --clay:#b8643b; --sun:#e2a64b; --line:rgba(31,42,43,.14);
  --max:1080px;
  /* Languages in other scripts prepend their own font via an inline style (see fonts.njk) */
  --serif:Fraunces,Georgia,serif;
  --sans:Inter,system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141b1c; --paper-2:#1b2425; --ink:#ece5d8; --ink-soft:#a9b0ab;
    --sea:#7fb2b5; --clay:#e08c60; --sun:#e9b766; --line:rgba(236,229,216,.14);
  }
}
:root[data-theme="dark"]{
  --paper:#141b1c; --paper-2:#1b2425; --ink:#ece5d8; --ink-soft:#a9b0ab;
  --sea:#7fb2b5; --clay:#e08c60; --sun:#e9b766; --line:rgba(236,229,216,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3,blockquote{font-family:var(--serif);font-weight:300;letter-spacing:-.01em}
a{color:inherit}

/* Header */
header.top{position:fixed;inset:0 0 auto 0;z-index:10;background:color-mix(in srgb,var(--paper) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:18px;padding-bottom:18px}
.mark{font-family:Fraunces,serif;font-size:20px;font-weight:500;letter-spacing:.02em;text-decoration:none}
.mark span{color:var(--clay)}
.top-right{display:flex;align-items:center;gap:28px}
nav a{font-size:14px;text-decoration:none;color:var(--ink-soft);margin-left:24px}
nav a:hover{color:var(--ink)}

/* Hamburger (mobile only, see max-width:560px) */
.menu-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;margin-right:-10px;background:none;border:0;color:var(--ink);cursor:pointer}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .25s ease,background .25s ease}
.menu-toggle span{position:relative}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0}
.menu-toggle span::before{top:-6px}
.menu-toggle span::after{top:6px}
.nav-open .menu-toggle span{background:transparent}
.nav-open .menu-toggle span::before{transform:translateY(6px) rotate(45deg)}
.nav-open .menu-toggle span::after{transform:translateY(-6px) rotate(-45deg)}

/* Language switcher */
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:4px 0}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover,.lang[open] summary{color:var(--ink)}
.lang summary .caret{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform .2s}
.lang[open] summary .caret{transform:rotate(180deg)}
.lang ul{position:absolute;right:-12px;top:calc(100% + 14px);list-style:none;min-width:200px;padding:8px 0;background:var(--paper);border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.14)}
.lang li a{display:flex;align-items:center;gap:12px;padding:7px 20px;font-size:15px;text-decoration:none;color:var(--ink-soft)}
.flag{display:inline-block;width:20px;height:15px;flex:none;border-radius:2px;box-shadow:0 0 0 1px var(--line);vertical-align:-2px}
.lang li a:hover{background:var(--paper-2);color:var(--ink)}
.lang li a[aria-current]{color:var(--clay)}

/* Hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero .wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:180px}
.kicker{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);font-weight:500}
.hero h1{font-size:clamp(52px,10vw,124px);line-height:.95;margin:22px 0 28px}
.hero h1 em{font-style:italic;color:var(--sea)}
.hero p.lead{max-width:540px;font-size:clamp(18px,2.1vw,21px);color:var(--ink-soft)}
.scroll{display:inline-flex;gap:10px;align-items:center;margin-top:44px;font-size:14px;color:var(--ink-soft);text-decoration:none}
.scroll i{display:block;width:34px;height:1px;background:currentColor}
.horizon{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;z-index:1}
.sun{position:absolute;right:12%;top:22%;width:clamp(120px,18vw,220px);aspect-ratio:1;border-radius:50%;
     background:radial-gradient(circle at 40% 40%,var(--sun),var(--clay));opacity:.85;z-index:0}

/* Sections */
section{padding:120px 0}
.label{display:flex;gap:14px;align-items:baseline;margin-bottom:28px}
.label span{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
h2{font-size:clamp(34px,5vw,58px);line-height:1.08;max-width:15ch;margin-bottom:36px}
h2 em{font-style:italic;color:var(--sea)}
.prose{max-width:640px;color:var(--ink-soft)}
.prose p+p{margin-top:1.1em}
.prose strong{color:var(--ink);font-weight:500}
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}

/* Pillars */
.alt{background:var(--paper-2)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.pillar{background:var(--paper-2);padding:36px 30px 40px}
.pillar svg{width:38px;height:38px;stroke:var(--sea);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pillar h3{font-size:25px;margin:22px 0 12px;font-weight:400}
.pillar p{font-size:15.5px;color:var(--ink-soft)}

/* Quotes */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:64px}
blockquote{font-size:clamp(24px,3vw,34px);line-height:1.3;font-style:italic;position:relative;padding-top:42px}
blockquote::before{content:"“";position:absolute;top:-18px;left:-4px;font-size:96px;line-height:1;color:var(--clay);font-style:normal}
blockquote cite{display:block;margin-top:20px;font:500 13px var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* Learning */
.learn{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:48px;max-width:860px}
.learn div{border-top:1px solid var(--line);padding-top:20px}
.learn h3{font-size:21px;font-weight:400;margin-bottom:6px}
.learn p{font-size:15.5px;color:var(--ink-soft)}

/* Closing */
.closing{text-align:center;padding:150px 0 130px}
.closing h2{margin:0 auto 28px;max-width:18ch}
.closing .prose{margin:0 auto}
.compass{width:64px;height:64px;margin:0 auto 34px;display:block;stroke:var(--clay);fill:none;stroke-width:1.2}

footer{border-top:1px solid var(--line);padding:30px 0;font-size:13.5px;color:var(--ink-soft)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Reveal: only hide content when JS is running, so the page still reads without it */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* Language picker (root page) */
.picker{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.picker .wrap{position:relative;z-index:2;width:100%;padding-top:80px;padding-bottom:80px}
.picker h1{font-size:clamp(52px,9vw,104px);line-height:1;margin-bottom:48px}
.picker h1 .mark{font-size:inherit;font-weight:300}
.langs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);max-width:760px}
.langs a{display:block;height:100%;padding:20px 24px;background:var(--paper);text-decoration:none;transition:background .2s}
.langs a:hover,.langs a:focus-visible{background:var(--paper-2)}
.langs .name{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:500}
.langs .tag{padding-left:32px}
.langs .tag{display:block;font-size:14.5px;color:var(--ink-soft)}
.langs a.suggested .name{color:var(--clay)}

/* Scripts without capitals or italics: Thai, Khmer, Sinhala, Tamil */
:is(:lang(th),:lang(km),:lang(si),:lang(ta)) :is(.kicker,.label span,cite){letter-spacing:.05em;text-transform:none}
html:is(:lang(th),:lang(km),:lang(si),:lang(ta)) :is(.hero h1 em,h2 em,blockquote){font-style:normal}
:is(:lang(th),:lang(km),:lang(si),:lang(ta)) .hero h1{line-height:1.2}
:is(:lang(th),:lang(km),:lang(si),:lang(ta)) h2{line-height:1.3}
/* Stacked vowel and tone marks need taller lines */
:is(:lang(th),:lang(km),:lang(si)) body{line-height:1.9}

@media (max-width:860px){
  section{padding:84px 0}
  .split,.quotes{grid-template-columns:1fr;gap:40px}
  .pillars{grid-template-columns:1fr 1fr}
  .sun{right:-30px;top:16%}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .top-right{gap:14px}
  nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:4px 16px 12px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(0,0,0,.1)}
  nav a{margin:0;padding:14px 0;font-size:17px;color:var(--ink)}
  nav a+a{border-top:1px solid var(--line)}
  .js .menu-toggle{display:flex}
  .nav-open nav{display:flex}
  .pillars,.learn,.langs{grid-template-columns:1fr}
  .pillar{padding:30px 22px}
}