/* thefluxtheory.org: white paper, violet ink, gold foil */
:root{
  --paper:#fcfaf6; --paper-2:#f4f0fa; --ink:#1d1033; --ink-soft:#4f4468;
  --violet:#43238a; --gold:#8f6c1e; --gold-line:#c09a45; --gold-hi:#e9d08c;
  --grid:rgba(67,35,138,.045);
  --btn-bg:#2f1768; --btn-ink:#fcfaf6; --btn-shadow:rgba(47,23,104,.45);
  --focus:#43238a;
  --band-bg:#231048; --band-glow:#351a6c;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#110920; --paper-2:#1a1030; --ink:#f3ede1; --ink-soft:#bdb2d6;
    --violet:#c4abff; --gold:#dcbc6c; --gold-line:#b8954a; --gold-hi:#f0dca0;
    --grid:rgba(196,171,255,.04);
    --btn-bg:#dcbc6c; --btn-ink:#140a26; --btn-shadow:rgba(220,188,108,.3);
    --focus:#dcbc6c;
    --band-bg:#1a1030; --band-glow:#281850;
  }
}
:root[data-theme="dark"]{
  --paper:#110920; --paper-2:#1a1030; --ink:#f3ede1; --ink-soft:#bdb2d6;
  --violet:#c4abff; --gold:#dcbc6c; --gold-line:#b8954a; --gold-hi:#f0dca0;
  --grid:rgba(196,171,255,.04);
  --btn-bg:#dcbc6c; --btn-ink:#140a26; --btn-shadow:rgba(220,188,108,.3);
  --focus:#dcbc6c;
  --band-bg:#1a1030; --band-glow:#281850;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh;
  background-color:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(16px,.95rem + .2vw,18px); line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
body::before{ /* faint graph paper, fading out from the title */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 10%,transparent 70%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 10%,transparent 70%);
}
a{color:inherit}
a:focus-visible{outline:2px solid var(--focus); outline-offset:4px; border-radius:2px}
.wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding-left:clamp(16px,4vw,48px); padding-right:clamp(16px,4vw,48px)}

/* uppercase mono labels, as on fluxmateria.com */
.label,.wordmark,.masthead nav,.byline,.feature-body .meta,h1 .the{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:500; text-transform:uppercase}
.label{
  display:inline-flex; align-items:center; gap:.75em; margin:0;
  letter-spacing:.16em; font-size:.74rem; color:var(--gold);
}
.label::before,.label::after{content:""; width:2.6em; height:1px; background:linear-gradient(90deg,transparent,var(--gold-line))}
.label::after{transform:scaleX(-1)}

/* masthead */
.masthead{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1.4rem; padding-bottom:1.2rem}
.masthead::after{
  content:""; position:absolute; left:clamp(16px,4vw,48px); right:clamp(16px,4vw,48px); bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-line) 12%,var(--gold-line) 88%,transparent);
}
.wordmark{display:inline-flex; align-items:center; gap:.6em; white-space:nowrap; text-decoration:none; letter-spacing:.18em; font-size:.8rem; color:var(--ink)}
.wordmark svg{width:14px; height:14px; color:var(--gold-line)}
.masthead nav{display:flex; gap:1.6rem; letter-spacing:.14em; font-size:.74rem}
.masthead nav a{text-decoration:none; color:var(--ink-soft); transition:color .2s}
.masthead nav a:hover,.masthead nav a[aria-current="page"]{color:var(--violet)}

/* hero: a treatise title page inside a double gold rule */
.hero{display:grid; place-items:center; text-align:center; min-height:min(88vh,860px); padding-top:3.5rem; padding-bottom:3.5rem}
.title-page{
  position:relative; width:100%; max-width:980px;
  padding:clamp(3.4rem,9vh,6rem) clamp(1.2rem,5vw,4rem) clamp(3rem,8vh,5rem);
  background:radial-gradient(ellipse 70% 60% at 50% 42%,var(--paper-2),transparent 75%);
}
.title-page::before{content:""; position:absolute; inset:0; border:1px solid var(--gold-line); pointer-events:none}
.title-page::after{content:""; position:absolute; inset:7px; border:.5px solid color-mix(in srgb,var(--gold-line) 55%,transparent); pointer-events:none}
.corner{position:absolute; width:9px; height:9px; background:var(--gold-line); transform:rotate(45deg)}
.corner.tl{top:-4.5px; left:-4.5px} .corner.tr{top:-4.5px; right:-4.5px}
.corner.bl{bottom:-4.5px; left:-4.5px} .corner.br{bottom:-4.5px; right:-4.5px}
.label.legend{ /* set into the top rule, like a fieldset legend */
  position:absolute; top:-.85em; left:0; right:0; width:max-content; margin:0 auto;
  padding:.1em 1.1em; background:var(--paper); z-index:1;
}
.label.legend::before,.label.legend::after{width:1.2em}
.hero-text{max-width:44em; margin:0 auto}
h1{margin:0; font-weight:600; font-size:clamp(2.9rem,9vw,6.6rem); line-height:1; letter-spacing:-.035em; color:var(--ink)}
h1 .the{display:block; margin-bottom:1.1rem; padding-left:.4em; font-size:.8rem; line-height:1; letter-spacing:.4em; color:var(--ink-soft)}
h1 em{font-style:normal; color:var(--violet)}
.ornament{display:block; width:190px; height:14px; margin:1.5rem auto 1.3rem; color:var(--gold-line)}
.lede{max-width:24em; margin:0 auto; font-size:clamp(1.1rem,2vw,1.38rem); line-height:1.45; color:var(--ink)}
.byline{margin:1.3rem 0 0; font-size:.74rem; letter-spacing:.16em; color:var(--gold)}
.note{max-width:31em; margin:1.7rem auto 0; color:var(--ink-soft); hyphens:auto}
.actions{display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; margin:2rem 0 0}
.btn{
  display:inline-flex; align-items:center; gap:.65em; padding:.7em 1.45em;
  font-size:.95rem; font-weight:500; letter-spacing:.01em; text-decoration:none; border-radius:2px;
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.btn .arrow{transition:transform .25s ease}
.btn:hover .arrow{transform:translateX(4px)}
.btn.primary{background:var(--btn-bg); color:var(--btn-ink); border:1px solid var(--btn-bg); box-shadow:0 10px 26px -14px var(--btn-shadow)}
.btn.primary:hover{transform:translateY(-1px); box-shadow:0 14px 30px -14px var(--btn-shadow)}
.btn.ghost{color:var(--ink); border:1px solid var(--gold-line)}
.btn.ghost:hover{background:var(--paper-2)}

.lede,.note,.section-head p,.platform-lede,.platform-note{text-wrap:balance} /* no lone words on centred lines */

/* staggered entrance */
.reveal{opacity:0; transform:translateY(14px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.reveal:nth-child(1){animation-delay:.05s} .reveal:nth-child(2){animation-delay:.15s}
.reveal:nth-child(3){animation-delay:.25s} .reveal:nth-child(4){animation-delay:.38s}
.reveal:nth-child(5){animation-delay:.5s}  .reveal:nth-child(6){animation-delay:.62s}
.reveal:nth-child(7){animation-delay:.74s}
@keyframes rise{to{opacity:1; transform:none}}

/* companions */
.companions{padding-top:2rem; padding-bottom:5rem}
.section-head{max-width:36em; margin:0 auto 2.6rem; text-align:center}
.section-head h2{margin:.5rem 0 .5rem; font-weight:600; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1; letter-spacing:-.025em}
.section-head p{margin:0; color:var(--ink-soft)}
.feature{
  position:relative; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(1.2rem,3vw,2.6rem); align-items:center;
  padding:clamp(14px,2vw,22px); border:1px solid color-mix(in srgb,var(--gold-line) 55%,transparent);
  background:color-mix(in srgb,var(--paper) 70%,transparent);
}
.feature::before,.feature::after{ /* registration corners, as on a printed plate */
  content:""; position:absolute; width:18px; height:18px; border-color:var(--gold-line); border-style:solid; pointer-events:none;
}
.feature::before{top:-6px; left:-6px; border-width:1px 0 0 1px}
.feature::after{bottom:-6px; right:-6px; border-width:0 1px 1px 0}
.feature-media{display:block; overflow:hidden; line-height:0; outline-offset:4px}
.feature-media img{width:100%; height:auto; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.feature:hover .feature-media img{transform:scale(1.025)}
.feature-body .meta{margin:0; font-size:.72rem; letter-spacing:.14em; color:var(--gold)}
.feature-body :is(h2,h3){margin:.45rem 0 .6rem; font-weight:600; font-size:clamp(1.35rem,2.6vw,1.8rem); line-height:1.2; letter-spacing:-.02em}
.feature-body :is(h2,h3) a{text-decoration:none}
.feature-body :is(h2,h3) a:hover{color:var(--violet)}
.feature-body p{margin:0 0 1.2rem; color:var(--ink-soft)}
.more{display:inline-flex; gap:.5em; align-items:center; text-decoration:none; color:var(--violet); border-bottom:1px solid color-mix(in srgb,var(--gold-line) 70%,transparent); padding-bottom:.1em}
.more .arrow{transition:transform .25s ease}
.feature-body .more-links{display:flex; flex-wrap:wrap; gap:.7rem 1.8rem; margin:0}
.more:hover .arrow{transform:translateX(4px)}

/* essays index */
.page-head{text-align:center; padding-top:clamp(3.2rem,9vh,5.5rem); padding-bottom:2.8rem}
.page-head .label{margin-bottom:1.1rem}
.page-head h1{font-size:clamp(2.6rem,7vw,4.4rem)}
.page-head .lede{max-width:30em}
.essay-list{padding-bottom:2.4rem}
.feature-body .actions{justify-content:flex-start; margin:1.4rem 0 0}
.section-more{margin:2.4rem 0 0; text-align:center}
.archive-note{padding-top:.5rem; padding-bottom:5rem; text-align:center; color:var(--ink-soft)}

/* FluxMateria band */
.platform{
  --band-ink:#f6f1e6; --band-soft:#cdc1e6; --band-gold:#dcbc6c;
  position:relative; z-index:1; padding:clamp(3.8rem,8vw,5.8rem) 0; text-align:center; color:var(--band-ink);
  background:radial-gradient(ellipse 55% 100% at 50% 0%,var(--band-glow),transparent 75%),var(--band-bg);
}
.platform::before,.platform::after{
  content:""; position:absolute; left:0; right:0; height:1px; opacity:.75;
  background:linear-gradient(90deg,transparent,var(--band-gold) 18%,var(--band-gold) 82%,transparent);
}
.platform::before{top:8px} .platform::after{bottom:8px}
.platform .label{color:var(--band-gold)}
.platform h2{margin:.6rem 0 .6rem; font-weight:600; font-size:clamp(2.2rem,5.6vw,3.6rem); line-height:1.05; letter-spacing:-.03em}
.platform-lede{max-width:26em; margin:0 auto; font-size:clamp(1.08rem,2vw,1.3rem); line-height:1.45}
.platform-note{max-width:32em; margin:1rem auto 0; color:var(--band-soft)}
.platform a:focus-visible{outline-color:var(--band-gold)}
.btn.gold{background:var(--band-gold); color:#140a26; border:1px solid var(--band-gold); box-shadow:0 10px 26px -14px rgba(220,188,108,.5)}
.btn.gold:hover{transform:translateY(-1px)}
.btn.outline{color:var(--band-ink); border:1px solid color-mix(in srgb,var(--band-gold) 70%,transparent)}
.btn.outline:hover{background:rgba(255,255,255,.07)}

/* colophon */
.colophon{padding-top:1.6rem; padding-bottom:2.4rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 2.4rem; text-align:center; font-size:.92em; color:var(--ink-soft)}
.colophon::before{
  content:""; position:absolute; top:0; left:clamp(16px,4vw,48px); right:clamp(16px,4vw,48px); height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-line) 12%,var(--gold-line) 88%,transparent);
}
.colophon p{margin:0}
.colophon a{text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--gold-line) 60%,transparent)}
.colophon a:hover{color:var(--violet)}

/* 404 */
.lost{min-height:70vh; display:grid; place-content:center; text-align:center; padding-top:3rem; padding-bottom:3rem}
.lost h1{font-size:clamp(3rem,9vw,6rem)}

@media (max-width:880px){
  .hero{min-height:0; padding-top:2.6rem; padding-bottom:2.6rem}
  .feature{grid-template-columns:1fr}
  .masthead nav{gap:1.1rem}
}
@media (max-width:560px){
  .masthead{flex-direction:column; gap:.45rem; padding-top:1.1rem; padding-bottom:.9rem}
  .masthead nav{gap:1.3rem}
}
@media (max-width:400px){
  .wordmark{letter-spacing:.14em}
  .masthead nav{gap:1rem; letter-spacing:.1em; font-size:.7rem}
}
@media (prefers-reduced-motion: reduce){
  .reveal{animation:none; opacity:1; transform:none}
  .btn,.btn .arrow,.more .arrow,.feature-media img{transition:none}
}