:root{
  --black:#0b0b0d;
  --black-2:#060607;
  --white:#fff;
  --ink:#212529;
  --grey:#a3a3a3;
  --grey-2:#6c757d;
  --line:#c9c9c9;
  --hair:#d9dde1;
  --blue:#8C5A00;
  --gold:#D6A85A;
  --gold-2:#DEB97B;
  --gold-pale:#E6CB9C;
  --blue-dark:#6B4400;
  --ph:#707070;
  --serif:"Palatino Linotype","Book Antiqua",Palatino,"Iowan Old Style",Georgia,serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --head:60px;
  --max:1170px;
  --gutter:clamp(20px,4vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-dark)}
img{max-width:100%;display:block}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

.lo-head{position:fixed;inset:0 0 auto 0;height:var(--head);background:var(--black);z-index:60;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 20px}
.lo-burger{justify-self:start;display:inline-flex;align-items:center;gap:14px;background:none;border:0;padding:8px 4px;cursor:pointer;color:var(--white);font:15px/1 var(--sans)}
.lo-burger .bars{position:relative;width:22px;height:14px;display:block}
.lo-burger .bars span{position:absolute;left:0;width:22px;height:1.5px;background:var(--white);transition:transform .3s ease,opacity .2s ease,top .3s ease}
.lo-burger .bars span:nth-child(1){top:0}
.lo-burger .bars span:nth-child(2){top:6px}
.lo-burger .bars span:nth-child(3){top:12px}
body.menu-open .lo-burger .bars span:nth-child(1){top:6px;transform:rotate(45deg)}
body.menu-open .lo-burger .bars span:nth-child(2){opacity:0}
body.menu-open .lo-burger .bars span:nth-child(3){top:6px;transform:rotate(-45deg)}
.lo-logo{justify-self:center;display:inline-flex;align-items:center;gap:12px;color:var(--white);text-decoration:none;
  font-family:"Barlow",var(--sans);font-weight:600;letter-spacing:.3em;text-transform:uppercase;font-size:.84rem}
.lo-logo:hover{color:var(--white)}
.lo-logo img{width:30px;height:29px}
.lo-logo i{font-style:normal;color:var(--gold)}
.lo-head .right{justify-self:end;font:15px/1 var(--serif)}
.lo-head .right a{color:var(--white)}
.lo-head .right a:hover{color:var(--gold-pale)}
.lo-head{transition:height .25s ease}
.lo-head.over{background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.32) 62%,rgba(0,0,0,0) 100%);height:96px;align-items:start;padding-top:22px}
.lo-head.over .lo-logo{font-size:1.02rem;gap:14px}
.lo-head.over .lo-logo img{width:40px;height:39px}
.lo-head.over.solid{background:var(--black);height:var(--head);align-items:center;padding-top:0}
.lo-head.over.solid .lo-logo{font-size:.84rem;gap:12px}
.lo-head.over.solid .lo-logo img{width:30px;height:29px}
body.home main{padding-top:0}

.lo-menu{position:fixed;top:var(--head);left:0;bottom:0;width:300px;max-width:100vw;background:var(--black);z-index:59;
  transform:translateX(-100%);transition:transform .35s ease,width .25s ease;display:flex;visibility:hidden}
body.menu-open .lo-menu{transform:none;visibility:visible}
body.panel-open .lo-menu{width:600px}
.lo-main,.lo-panel{flex:0 0 300px;width:300px;overflow-y:auto;padding:22px 0 30px;display:flex;flex-direction:column}
.lo-panel{background:var(--black-2);border-left:1px solid #2a2a2a}
.lo-panel[hidden]{display:none}
.lo-menu a{display:block;padding:10px 25px;font:16px/24px var(--serif);color:var(--white)}
.lo-open,.lo-back{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 25px;background:none;border:0;cursor:pointer;text-align:left;font:16px/24px var(--serif);color:var(--white)}
.lo-open::after{content:"";flex:0 0 auto;width:7px;height:7px;margin-left:16px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);opacity:.75}
.lo-open[aria-expanded="true"]::after{transform:rotate(-135deg)}
.lo-open[aria-expanded="true"],.lo-open.here{font-weight:700}
.lo-back{display:none;justify-content:flex-start;gap:12px;font:14px/24px var(--sans);color:var(--grey)}
.lo-back::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(-135deg)}
.lo-menu a:hover,.lo-open:hover,.lo-back:hover{color:var(--gold-pale)}
.lo-menu a[aria-current="page"]{font-weight:700}
[id]{scroll-margin-top:calc(var(--head) + 24px)}
.lo-menu .gap{height:44px}.lo-menu .follow{margin-top:auto;padding:24px 25px 0;font:13px/1.6 var(--sans);color:var(--grey)}
.lo-menu .follow a{display:inline;padding:0;font:inherit;color:var(--grey);margin-right:16px}
.lo-menu .follow a:hover{color:var(--white)}
.lo-scrim{position:fixed;inset:var(--head) 0 0 0;background:rgba(0,0,0,.18);z-index:58;opacity:0;pointer-events:none;transition:opacity .3s ease}
body.menu-open .lo-scrim{opacity:1;pointer-events:auto}

main{padding-top:var(--head)}

.lo-h{font:400 clamp(1.7rem,2.6vw,2.3rem)/1.2 var(--serif);letter-spacing:.008em;margin:0 0 14px;color:var(--ink)}
.lo-sub{font:clamp(1.02rem,1.3vw,1.15rem)/1.5 var(--sans);color:var(--grey-2);margin:0 0 36px;max-width:60ch}
.band{padding:clamp(64px,8vw,110px) 0}
.band.dark{background:var(--black);color:var(--white)}
.band.dark .lo-h{color:var(--white)}
.band.dark .lo-sub{color:#b9bec4}
.band.grey{background:#f4f4f4}

.pill{display:inline-block;font:16px/1 var(--serif);border-radius:100px;padding:10px 30px 9px;border:1px solid transparent;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.pill.blue{background:var(--gold);color:#0b0b0d}
.pill.blue:hover{background:var(--gold-2);color:#0b0b0d}
.pill.white{background:var(--white);color:var(--ink)}
.pill.white:hover{background:#ececec;color:var(--ink)}
.pill.line{background:transparent;color:var(--white);border-color:rgba(255,255,255,.7)}
.pill.line:hover{background:var(--white);color:var(--ink)}

.lo-foot{background:var(--black);color:#9a9a9a;font:13px/1.6 var(--sans)}
.foot-social{display:flex;justify-content:center;gap:14px;padding:16px 0;border-top:1px solid #2c2c2c}
.foot-social a{width:38px;height:38px;border-radius:50%;background:#2e2e2e;display:grid;place-items:center;transition:background .15s ease}
.foot-social a:hover{background:var(--gold)}
.foot-social a:hover svg{fill:#0b0b0d}
.foot-social svg{width:16px;height:16px;fill:#fff}
.foot-legal{display:flex;justify-content:center;padding:14px 20px 18px;background:#121212;border-top:1px solid #262626;text-align:center}
.foot-legal a{color:#9a9a9a;margin-left:14px;padding-left:14px;border-left:1px solid #444}
.foot-legal a:hover{color:#fff}

.pg-top{padding-top:clamp(40px,5vw,64px);padding-bottom:0}
.pg-top h1{font:400 clamp(2.2rem,3.4vw,3rem)/1.1 var(--serif);margin:0;color:var(--ink);text-align:left}
.pg-top+.pg-head{padding-top:clamp(36px,4.5vw,64px)}
.pg-top-band{background:var(--black)}
.pg-top-band .pg-top{padding-bottom:clamp(28px,3.5vw,44px)}
.pg-top-band .pg-top h1{color:#fff}

.pg-head{padding-top:clamp(48px,6vw,72px);padding-bottom:clamp(44px,5vw,72px);text-align:center}
.pg-title{font:400 clamp(1.9rem,2.6vw,2.31rem)/1.2 var(--serif);letter-spacing:.008em;margin:0 0 clamp(28px,3vw,40px);color:var(--ink)}
.pg-line{position:relative;height:1px;background:var(--hair);margin:0 0 clamp(36px,4.5vw,56px)}
.pg-line::after{content:"";position:absolute;left:25%;right:25%;top:-.5px;height:2px;background:var(--gold)}
.pg-statement{font:400 clamp(1.6rem,3vw,2.5rem)/1.25 var(--serif);max-width:26ch;margin:0 auto 16px;color:var(--ink)}
.pg-lede{font:clamp(1rem,1.3vw,1.12rem)/1.6 var(--sans);color:var(--grey-2);max-width:62ch;margin:0 auto}
.lo-label{font:400 1.25rem/1 var(--serif);color:#8f8f8f;margin:0 0 18px}
.band.dark .lo-label{color:#9b9b9b}
.lo-statement{font:400 clamp(1.6rem,2.8vw,2.4rem)/1.25 var(--serif);margin:0 0 28px;max-width:28ch}
.split2{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:clamp(28px,6vw,90px);align-items:start}
.split2+.split2{margin-top:clamp(40px,5vw,64px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--hair)}
.band.dark .split2+.split2{border-top-color:#333}
.split2 h2{font:400 clamp(1.4rem,2vw,1.75rem)/1.2 var(--serif);margin:0}
.split2 p{margin:0 0 16px;max-width:62ch}
.split2 .big{font:400 clamp(1.35rem,2vw,1.7rem)/1.35 var(--serif);margin:0 0 14px}
@media (max-width:760px){.split2{grid-template-columns:1fr}.pg-line::after{left:12%;right:12%}}

.draft{display:inline-block;align-self:flex-start;font:11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#e0b25b;border:1px solid rgba(224,178,91,.6);border-radius:3px;padding:4px 6px;margin:0 0 14px}

.lo-head.over .right{margin-top:10px}
.lo-head.over.solid .right{margin-top:0}
@media (max-width:600px){
  .lo-head .right{display:none}
  .lo-menu,body.panel-open .lo-menu{width:100vw}
  .lo-main,.lo-panel{flex-basis:100%;width:100%}
  body.panel-open .lo-main{display:none}
  .lo-panel{border-left:0}
  .lo-back{display:flex;margin-bottom:8px}
  .lo-logo{letter-spacing:.24em;font-size:.78rem}
  .lo-burger .label{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lo-menu,.lo-scrim,.lo-burger .bars span,.pill{transition:none}
}

/* the header's year mark: 19 [logo] 24 */
.lo-logo.lo-year{gap:12px;letter-spacing:.04em;text-transform:none;font:400 1.3rem/1 var(--serif)}
.lo-logo.lo-year .yr{display:inline-block;font-variant-numeric:lining-nums}
.lo-head.over .lo-logo.lo-year{font-size:1.6rem;gap:16px}
.lo-head.over.solid .lo-logo.lo-year{font-size:1.3rem;gap:12px}
/* the light-cone logo in the header; black ground screened out */
.lo-logo img.logo-img{width:auto;height:30px;mix-blend-mode:screen}
.lo-head.over .lo-logo img.logo-img{width:auto;height:44px}
.lo-head.over.solid .lo-logo img.logo-img{width:auto;height:30px}
/* the logo's near-black ground crushed to black (screened out), its lines brightened, sized up */
.lo-logo img.logo-img{height:36px;filter:contrast(1.5) brightness(1.3)}
.lo-head.over .lo-logo img.logo-img{height:56px}
.lo-head.over.solid .lo-logo img.logo-img{height:36px}
/* the logo is a transparent PNG; no blend or filter needed */
.lo-logo img.logo-img{mix-blend-mode:normal;filter:none}
/* the landing image's credit, visible with the image (NASA's credit line) */
.hero .credit{position:absolute;right:var(--gutter);bottom:14px;z-index:3;margin:0;font:11px/1.4 var(--sans);color:rgba(255,255,255,.62);text-align:right;max-width:70vw}
.hero .credit a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:2px}
.hero .credit a:hover{color:var(--gold-pale)}
@media (max-width:600px){.hero .credit{right:auto;left:var(--gutter);bottom:10px;font-size:10px}}
/* the year mark on every page's header; sized for the solid 60 px header */
.lo-head:not(.over) .lo-logo.lo-year{font-size:1.25rem;gap:12px}
/* the hero's three lines, a slow crossfade; still under reduced motion */
.hero .cap-seq{display:grid}
.hero .cap-item{grid-area:1/1;opacity:0;transition:opacity 1.6s ease}
.hero .cap-item.on{opacity:1}
.hero .cap-item .h1like{font:400 clamp(1.9rem,3.4vw,2.9rem)/1.15 var(--serif);letter-spacing:.01em;margin:0 0 12px;text-shadow:0 1px 18px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.hero .cap-item{transition:none}}
/* the secondary grey made neutral (was #6c757d, a cool slate beside the gold); 5.1:1 with white */
:root{--grey-2:#6e6e6e}
/* the outgoing line fades out before the next fades in (0.9 s each), never overlapping */
.hero .cap-item{transition:opacity .9s ease}
.hero .cap-item.on{transition:opacity .9s ease .9s}
/* the primary buttons black with gold highlights */
.pill.blue{background:#0b0b0d;color:var(--gold);border-color:var(--gold)}
.pill.blue:hover{background:#1c1708;color:var(--gold-pale);border-color:var(--gold-pale)}
/* the About page's vision note carries the site's logo, on a near-black tile as in the header */
.mark-note img.logo-tile{width:auto;height:40px;margin-top:0;padding:7px 10px;background:#0b0b0d;border-radius:6px;box-sizing:content-box}
/* the vision note's logo in black on the white band (img/logo-lightcone-ink.png) */
.mark-note img.logo-ink{width:auto;height:44px;margin-top:0}