/* Glow Journal. The same faces, palette and boxy black-and-white language as
   glowresearch.shop, kept to what this site uses rather than a copy of the
   store's whole stylesheet. */
@font-face{ font-family:'Sora'; font-style:normal; font-weight:300 800; font-display:swap; src:url('../assets/fonts/sora.woff2') format('woff2'); }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../assets/fonts/space-grotesk.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:500 600; font-display:swap; src:url('../assets/fonts/fraunces-normal.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400 600; font-display:swap; src:url('../assets/fonts/jetbrains-mono.woff2') format('woff2'); }

:root{
  --bg:#0a0a0a; --text:#f7f7f5; --dim:#a3a3a1; --line:rgba(255,255,255,.14);
  --font-display:'Space Grotesk','Sora',Arial,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); }
body{ margin:0; background:var(--bg); color:var(--text); font-family:'Sora',system-ui,sans-serif; font-weight:500; line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:var(--font-display); }
a{ color:inherit; }

/* ---------- journal pages ---------- */
.jr-wrap{ max-width: 860px; margin: 0 auto; padding: 0 20px; }
.jr-head{ border-bottom:1px solid var(--line); }
.jr-head .jr-wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px; }
.jr-logo{ font-family:'Fraunces',Georgia,serif; font-size:1.45rem; font-weight:600; text-decoration:none; display:inline-flex; align-items:baseline; gap:6px; }
.jr-logo .spark{ font-size:.62em; }
.jr-logo small{ font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); font-weight:400; }
.jr-nav a{ font-size:.9rem; text-decoration:none; padding:9px 14px; border:1px solid var(--line); }
.jr-nav a:hover{ border-color:#fff; }
.jr-main{ padding: clamp(48px, 9vw, 96px) 0; }
.jr-kicker{ display:block; font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:12px; }
.jr-main h1{ margin:0 0 14px; font-size:clamp(2rem,6vw,3rem); letter-spacing:-.035em; line-height:1.05; }
.jr-lede{ margin:0 0 40px; max-width:56ch; color:var(--dim); font-size:1.02rem; }
.jr-list{ border-top:1px solid var(--line); }
.jr-empty{ padding:28px 0; border-bottom:1px solid var(--line); color:var(--dim); }

/* The document viewer's Close button sits outside the gate box, so the box's
   button rule does not reach it; set it here to match. */
.vf-doc-close{
  background:#fff; color:#0a0a0a; border:1px solid #fff; border-radius:0; cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.vf-doc-close:hover{ background:#e6e6e3; }

/* ---------- the offer page (index.html) ----------
   One centred column on black: the logo, the offer, three small figures, the
   form. The store's language: mono eyebrow, display headline with one
   outlined word, square boxes, nothing else. */
.of{ display:flex; justify-content:center; padding: clamp(40px, 8vh, 80px) 18px 32px; }
.of-col{ width:100%; max-width: 440px; text-align:center; }
.of-logo{ font-family:'Fraunces',Georgia,serif; font-size:1.9rem; font-weight:600; display:inline-flex; align-items:center; gap:3px; }
.of-logo .spark{ font-size:.62em; }
.of-eyebrow{ display:block; margin: 26px 0 12px; font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.of-title{ margin:0 0 14px; font-size: clamp(2.4rem, 11vw, 3.6rem); font-weight:600; letter-spacing:-.045em; line-height:1; }
.of-outline{ color:transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,.85); }
.of-lede{ margin:0 auto 26px; max-width: 36ch; font-size:.98rem; line-height:1.6; color:rgba(255,255,255,.68); }

.of-stats{ display:flex; border:1px solid rgba(255,255,255,.16); margin-bottom: 20px; }
.of-stat{ flex:1; padding: 14px 8px; }
.of-stat + .of-stat{ border-left:1px solid rgba(255,255,255,.16); }
.of-stat[hidden]{ display:none; }
.of-stat strong{ display:block; font-family:var(--font-display); font-size:1.25rem; font-weight:600; letter-spacing:-.01em; font-variant-numeric: tabular-nums; }
.of-stat span{ display:block; margin-top:4px; font-family:'JetBrains Mono',monospace; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }

/* the form box as on /verify, minus its own logo: the page already has one */
.of-gate{ text-align:left; }
.of-gate .vf-logo{ display:none; }
.of-gate .vf-kicker{ margin-top:0; }


/* ---------- footer, every page ----------
   The store's links in its mono uppercase, and the offer terms in plain
   words. Terms and Privacy open in place (js/gate.js on the offer page); the
   rest go to the store, through the gate for a reader who has not entered. */
.gj-foot{ border-top:1px solid rgba(255,255,255,.12); background:#0a0a0a; margin-top: clamp(40px, 8vh, 72px); }
.gj-foot-in{ max-width: 860px; margin:0 auto; padding: 40px 20px 48px; }
.gj-foot-logo{ font-family:'Fraunces',Georgia,serif; font-size:1.6rem; font-weight:600; display:inline-flex; align-items:center; gap:3px; }
.gj-foot-logo .spark{ font-size:.62em; }
.gj-foot-links{ display:flex; flex-wrap:wrap; gap: 14px 28px; margin: 26px 0 22px; }
.gj-foot-links a{ font-family:'JetBrains Mono',monospace; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); text-decoration:none; }
.gj-foot-links a:hover{ color:#fff; }
.gj-foot-note{ margin:0; max-width: 62ch; font-size:.86rem; line-height:1.65; color:rgba(255,255,255,.45); }