/* Shared shell for every page that is not the landing: /about, /privacy, /terms.
   Same palette, type and furniture as the landing, none of its motion.
   /about runs the light theme via <html data-theme="light">. */
:root{
  color-scheme:dark;
  --bg:#0B1014;
  --ink:#FFFFFF;
  --cream:#F5F1E9;
  --yellow:#F6CA45;
  --sans:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gutter:56px;
  --measure:760px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.ico{width:15px;height:20px;fill:currentColor;flex:none}

/* ---------- Nav: the landing's furniture, minus the wall ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:34px var(--gutter) 0}
.nav__logo{flex:none}
.nav__logo img{width:220px;height:auto}
.nav__right{display:flex;align-items:center;gap:40px}
.nav a{text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;background:var(--yellow);color:#06060A;
  font-weight:500;white-space:nowrap;padding:10px 18px;font-size:15px;text-decoration:none;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px -10px rgba(246,202,69,.65)}
.btn .ico{width:13px;height:17px}
.back{font-size:15px;white-space:nowrap;color:var(--cream);opacity:.85;transition:opacity .3s}
.back:hover{opacity:1}

/* ---------- Document ---------- */
.doc{padding:0 var(--gutter)}
.doc > *{max-width:var(--measure);margin-left:auto;margin-right:auto}
.head{padding:72px var(--gutter) 0}
h1{font-size:clamp(32px,4.6vw,50px);font-weight:800;line-height:1.06;letter-spacing:-.02em;
   max-width:var(--measure);margin:0 auto}
.doc--second{margin-top:96px;padding-top:56px;border-top:1px solid rgba(255,255,255,.16)}
.doc--second h1{font-size:clamp(28px,4vw,42px)}
.meta{margin:18px auto 0;font-size:15px;color:var(--yellow);font-weight:500;letter-spacing:.02em}
.lead{margin-top:26px;font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:clamp(20px,2.4vw,26px);line-height:1.3;color:var(--cream)}
h2{display:flex;gap:14px;align-items:baseline;
  margin:52px auto 0;font-size:clamp(20px,2.4vw,26px);font-weight:700;line-height:1.2;letter-spacing:-.01em}
.h2__n{flex:none;color:var(--yellow);font-weight:800;font-variant-numeric:tabular-nums}
h3{display:flex;gap:12px;align-items:baseline;
  margin:34px auto 0;font-size:18px;font-weight:700;color:var(--cream)}
.h3__n{flex:none;color:var(--yellow);font-weight:700;font-variant-numeric:tabular-nums}
h4{margin:32px auto 0;font-size:17px;font-weight:700;color:var(--yellow);letter-spacing:.01em}
p{margin-top:18px;font-size:17px;line-height:1.62;color:rgba(245,241,233,.82)}
h2 + p,h3 + p,h4 + p{margin-top:14px}
ul,ol{margin-top:14px;padding-left:0;list-style:none}
li{position:relative;padding-left:26px;margin-top:9px;font-size:17px;line-height:1.55;color:rgba(245,241,233,.82)}
li::before{position:absolute;left:2px;color:var(--yellow)}
/* the source marks its three lists differently -- dot, dash and number */
ul li::before{content:"";top:.62em;width:6px;height:6px;border-radius:50%;background:var(--yellow);opacity:.85}
ul.dash li::before{content:"–";top:0;width:auto;height:auto;border-radius:0;background:none;opacity:1;font-weight:700}
ol{counter-reset:item}
ol li{counter-increment:item}
ol li::before{content:counter(item) ".";top:0;font-weight:700;font-variant-numeric:tabular-nums}
.doc a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.doc a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}

/* ---------- Footer: same as the landing's ---------- */
.foot{display:flex;align-items:center;gap:28px;max-width:calc(var(--measure) + var(--gutter) * 2);
  margin:96px auto 0;padding:18px var(--gutter) 40px;
  border-top:1px solid rgba(255,255,255,.45);
  font-weight:700;font-size:15px;color:var(--cream)}
.foot__mark{width:32px;height:auto;filter:invert(1) brightness(1.1)}
.foot nav{display:flex;gap:24px}
.foot nav a{text-decoration:none;transition:opacity .3s}
.foot nav a:hover{opacity:.65}
.foot p{margin:0 0 0 auto;font-weight:400;font-size:15px;color:var(--cream)}

@media (max-width:1100px){ :root{--gutter:40px} .nav__logo img{width:190px} }
@media (max-width:720px){
  :root{--gutter:20px}
  .nav{padding-top:22px;gap:12px}
  .nav__logo img{width:150px}
  .nav__right{gap:14px}
  .back{font-size:13px}
  .head{padding-top:48px}
  .doc--second{margin-top:72px;padding-top:44px}
  h2{margin-top:42px;gap:10px}
  p,li{font-size:16px}
  .foot{flex-wrap:wrap;gap:14px 24px;margin-top:72px}
  .foot nav,.foot p{flex-basis:100%}
  .foot p{margin-left:0}
}
@media (max-width:420px){ .nav__logo img{width:128px} .btn{font-size:12px;padding:8px 12px} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }

/* ---------- Light theme: /about is cream, the way the landing used to be ---------- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F1E9;
  --ink:#1B151A;
  --cream:#1B151A;      /* the footer/nav text colour, inverted for cream */
}
[data-theme="light"] p,[data-theme="light"] li{color:rgba(27,21,26,.78)}
[data-theme="light"] .foot{border-top-color:rgba(27,21,26,.28)}
[data-theme="light"] .foot__mark{filter:none}   /* symbol-dark.svg is already dark */
/* there is no dark version of the full lockup -- logo-dark.svg is the wordmark
   without the symbol, and a different ratio -- so invert the white one */
.nav__logo--invert{filter:invert(1)}
[data-theme="light"] .doc a{color:#1B151A;text-decoration-color:rgba(27,21,26,.45)}

/* ---------- /about ---------- */
/* same 1180px box as .about__grid, so the eyebrow keeps its left edge
   flush with the headline once the viewport is wider than the grid */
.label{max-width:1180px;margin:0 auto;font-weight:800;font-size:13px;letter-spacing:.02em;text-transform:uppercase}
.about{padding:0 var(--gutter)}
.about__grid{max-width:1180px;margin:28px auto 0;
  display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.h-big{font-weight:700;font-size:clamp(34px,3.9vw,56px);line-height:.95;letter-spacing:-.02em}
.h-big em{font-family:var(--serif);font-style:italic;font-weight:700;font-size:1.02em;letter-spacing:-.01em}
.about__text p{margin-top:0;font-size:clamp(17px,1.4vw,20px);line-height:1.3;max-width:510px}
.about__text .h-big + p{margin-top:36px}
.about__text p + p{margin-top:1.2em}
.people{display:flex;align-items:center;gap:14px;margin-top:28px;font-size:13px;line-height:1.2;font-weight:500}
.people img{width:220px}
.polaroid{justify-self:center;width:min(440px,100%)}
.polaroid img{width:100%;transform-origin:50% 60%;animation:sway 9s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.cta{margin:72px auto 0;text-align:center}
.btn--dark{background:var(--ink);color:#fff;padding:20px 44px;font-size:22px;gap:14px}
.btn--dark .ico{width:19px;height:25px}
.btn--dark:hover{box-shadow:0 14px 30px -12px rgba(27,21,26,.6)}

@media (max-width:900px){
  .about__grid{grid-template-columns:1fr;gap:40px}
  .polaroid{width:314px;order:-1}
}
@media (max-width:720px){
  .about__grid{margin-top:20px;gap:32px}
  .btn--dark{font-size:18px;padding:16px 34px}
  .btn--dark .ico{width:16px;height:21px}
  .cta{margin-top:52px}
  .people img{width:180px}
}