/* ═══════════════════════════════════════════════════════════
   Reader Inc. — core design system
   "Ink & Signal" · editorial type · ink canvas · paper inversion
   ═══════════════════════════════════════════════════════════ */

@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@property --sweep{syntax:'<percentage>';initial-value:0%;inherits:false}

:root{
  /* ── ink canvas ── */
  --bg:#08080B;
  --bg-1:#0B0B10;
  --bg-2:#101017;
  --bg-3:#16161F;

  --surf:rgba(255,255,255,.028);
  --surf-2:rgba(255,255,255,.055);
  --surf-3:rgba(255,255,255,.085);
  --bd:rgba(255,255,255,.075);
  --bd-2:rgba(255,255,255,.145);
  --bd-3:rgba(255,255,255,.24);

  --fg:#F6F5F2;          /* warm white — paper, not screen white */
  --fg-2:#9C9CAB;
  --fg-3:#63636F;
  --fg-4:#3C3C46;

  /* ── signal ── */
  --v:#7C5CFF;
  --v-lt:#B9A6FF;
  --v-dk:#5B3FE0;
  --c:#22D3EE;
  --c-lt:#7DE4F5;
  --lime:#B4FF39;
  --amber:#FFB020;
  --rose:#FB7185;

  /* ── paper (inverted sections) ── */
  --paper:#F2EFE7;
  --paper-2:#E8E4DA;
  --ink:#101015;

  --grad:linear-gradient(100deg,#B9A6FF 0%,#8B7CF6 46%,#22D3EE 100%);
  --grad-2:linear-gradient(140deg,#7C5CFF,#22D3EE);
  --glow-v:0 0 80px -20px rgba(124,92,255,.7);
  --glow-c:0 0 80px -20px rgba(34,211,238,.55);

  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:30px; --r-2xl:40px;

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
         "Helvetica Neue",Helvetica,system-ui,sans-serif;
  --serif:ui-serif,"New York","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Monaco,Consolas,monospace;

  --e:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.65,0,.35,1);

  --pad:clamp(20px,4vw,44px);
  --max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 16px/1.6 var(--sans);
  letter-spacing:-.006em;
  font-feature-settings:"cv05" 1,"ss03" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
html{overflow-x:clip}
body{overflow-x:clip}

h1,h2,h3,h4,h5{margin:0;font-weight:590;letter-spacing:-.032em;line-height:1.06;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
::selection{background:rgba(124,92,255,.42);color:#fff}

:focus-visible{outline:2px solid var(--v-lt);outline-offset:3px;border-radius:4px}

/* ── ambient layers ─────────────────────────────────────────
   Restrained: one high directional wash, not a purple fog.    */
.grain{
  position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora b{
  position:absolute;display:block;border-radius:50%;
  filter:blur(110px);opacity:.34;will-change:transform;
}
.aurora b:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-16vw;
  background:radial-gradient(circle,rgba(124,92,255,.5),transparent 66%);animation:drift1 38s var(--e-io) infinite}
.aurora b:nth-child(2){width:38vw;height:38vw;right:-8vw;top:2vh;
  background:radial-gradient(circle,rgba(34,211,238,.26),transparent 66%);animation:drift2 48s var(--e-io) infinite}
.aurora b:nth-child(3){width:54vw;height:32vw;left:26vw;top:58vh;
  background:radial-gradient(circle,rgba(99,102,241,.16),transparent 70%);animation:drift3 56s var(--e-io) infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7vw,5vh,0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-6vw,8vh,0) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-8vw,-6vh,0)}}

.gridbg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 34%,#000 12%,transparent 76%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 34%,#000 12%,transparent 76%);
}

/* ── layout ─────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);position:relative;z-index:2}
section{position:relative;z-index:2;padding-block:clamp(76px,10vw,152px)}
[id]{scroll-margin-top:118px}

/* full-bleed band inside a section */
.bleed{position:relative;z-index:2;width:100vw;margin-inline:calc(50% - 50vw)}

/* ── type utilities ─────────────────────────────────────── */
.tag{
  display:inline-flex;align-items:center;gap:9px;
  font:500 10.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-2);
  padding:8px 14px;border:1px solid var(--bd);border-radius:999px;
  background:var(--surf);backdrop-filter:blur(12px);
}
.tag .dot{width:5px;height:5px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 10px 1px rgba(180,255,57,.8);animation:blip 2.2s var(--e-io) infinite}
@keyframes blip{50%{opacity:.25;transform:scale(.7)}}
.tag .idx{color:var(--v-lt)}
@media (max-width:560px){.tag{font-size:9.5px;letter-spacing:.11em;padding:7px 12px}}

.kicker{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.kicker b{color:var(--v-lt);font-weight:500}

.h1{font-size:clamp(40px,6.1vw,78px);letter-spacing:-.038em;line-height:1.0}
.h2{font-size:clamp(33px,4.9vw,62px);letter-spacing:-.036em;line-height:1.02}
.h3{font-size:clamp(23px,2.5vw,32px);letter-spacing:-.028em;line-height:1.12}
.h4{font-size:19.5px;letter-spacing:-.021em;line-height:1.22}

/* editorial emphasis — a serif italic, not a gradient.
   One confident accent reads better than a rainbow.           */
.gr{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--v-lt);letter-spacing:-.012em;
  padding-inline-end:.03em;
}
.h1 .gr,.h2 .gr{font-size:1.06em;line-height:.9}

.lede{font-size:clamp(16.5px,1.4vw,19.5px);line-height:1.62;color:var(--fg-2);letter-spacing:-.008em}
.dim{color:var(--fg-2)}
.dimmer{color:var(--fg-3)}

/* ── buttons ────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:48px;padding:0 22px;border-radius:999px;
  font-size:14.5px;font-weight:500;letter-spacing:-.008em;white-space:nowrap;
  transition:transform .3s var(--e),background .3s var(--e),border-color .3s var(--e),box-shadow .4s var(--e),color .3s;
  border:1px solid transparent;isolation:isolate;
}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--e)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:scale(.975)}

.btn-p{background:var(--fg);color:#0A0A0D;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 12px 36px -14px rgba(246,245,242,.45)}
.btn-p:hover{box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 48px -14px rgba(246,245,242,.6);transform:translateY(-1px)}

.btn-v{background:var(--grad);color:#0A0A0D;font-weight:560;box-shadow:var(--glow-v)}
.btn-v:hover{transform:translateY(-1px);box-shadow:0 0 92px -14px rgba(124,92,255,.9)}

.btn-g{background:var(--surf);border-color:var(--bd-2);color:var(--fg);backdrop-filter:blur(14px)}
.btn-g:hover{background:var(--surf-2);border-color:var(--bd-3);transform:translateY(-1px)}

.btn-sm{height:38px;padding:0 16px;font-size:13.5px}
.btn-lg{height:56px;padding:0 30px;font-size:15.5px}
.btn-full{width:100%}

/* ── surfaces / cards ───────────────────────────────────── */
.card{
  position:relative;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--bd);
  overflow:hidden;isolation:isolate;
  transition:border-color .4s var(--e),transform .4s var(--e),box-shadow .4s var(--e);
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(124,92,255,.15),transparent 46%);
  transition:opacity .45s var(--e);z-index:-1;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;padding:1px;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(185,166,255,.7),rgba(34,211,238,.22) 40%,transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  transition:opacity .45s var(--e);
}
.card:hover::before,.card:hover::after{opacity:1}
.card:hover{transform:translateY(-2px);box-shadow:0 24px 60px -34px rgba(0,0,0,.9)}
.card-b{padding:clamp(22px,2.4vw,30px)}

.glass{background:rgba(10,10,15,.62);backdrop-filter:blur(22px) saturate(170%);border:1px solid var(--bd)}

/* icon chip inside cards */
.chip-ico{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  border:1px solid var(--bd);color:var(--v-lt);
}
.chip-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* ── artwork frames ─────────────────────────────────────── */
.art{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
.art-frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--bd);background:linear-gradient(180deg,#0C0C12,#08080B);
}
.art-cap{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:15px clamp(18px,2.2vw,28px);
  border-top:1px solid var(--bd);background:rgba(255,255,255,.02);
  font:500 10px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);
}
.art-cap b{color:var(--v-lt);font-weight:500}

/* ── section heading block ──────────────────────────────── */
.shead{max-width:780px;margin-bottom:clamp(38px,4.6vw,64px)}
.shead .kicker{display:block;margin-bottom:20px}
.shead .h2{margin-bottom:20px}
.shead .lede{max-width:62ch}
.shead.mid{margin-inline:auto;text-align:center}
.shead.mid .lede{margin-inline:auto}

/* ── reveal ─────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--e),transform .8s var(--e);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .aurora b,.tag .dot{animation:none}
}

/* ── scroll progress ────────────────────────────────────── */
#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:var(--grad);box-shadow:0 0 12px rgba(124,92,255,.8);transition:width .12s linear}

/* ═══════════════════════════════════════════════════════════
   PAPER — inverted band. Redefines the tokens so every
   component inside flips to ink-on-paper with no new markup.
   ═══════════════════════════════════════════════════════════ */
.paper{
  --bg:var(--paper);
  --bg-1:#EDE9E0;
  --bg-2:#E4E0D5;
  --surf:rgba(16,16,21,.035);
  --surf-2:rgba(16,16,21,.062);
  --surf-3:rgba(16,16,21,.09);
  --bd:rgba(16,16,21,.13);
  --bd-2:rgba(16,16,21,.22);
  --bd-3:rgba(16,16,21,.36);
  --fg:#101015;
  --fg-2:#4E4E5A;
  --fg-3:#7A7A87;
  --fg-4:#A6A6B0;
  --v-lt:#5B3FE0;
  --c-lt:#0E7490;
  background:var(--paper);
  color:var(--fg);
  isolation:isolate;
}
.paper::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.paper .card{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.4));
  box-shadow:0 1px 2px rgba(16,16,21,.05);
}
.paper .card:hover{box-shadow:0 18px 40px -28px rgba(16,16,21,.5)}
.paper .card::before{background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(91,63,224,.09),transparent 46%)}
.paper .card::after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(91,63,224,.45),rgba(14,116,144,.2) 40%,transparent 62%)}
.paper .chip-ico{background:linear-gradient(160deg,rgba(16,16,21,.07),rgba(16,16,21,.02))}
.paper .btn-p{background:var(--ink);color:var(--paper);box-shadow:0 12px 34px -16px rgba(16,16,21,.7)}
.paper .btn-g{background:rgba(255,255,255,.6)}
.paper .btn-g:hover{background:rgba(255,255,255,.9)}
.paper .btn-v{color:#fff;background:linear-gradient(100deg,#5B3FE0,#7C5CFF 50%,#0E7490)}
.paper .tag{background:rgba(255,255,255,.6)}
.paper ::selection{background:rgba(91,63,224,.24);color:var(--ink)}
.paper .gr{color:#5B3FE0}
.paper code{color:#0E7490;background:rgba(14,116,144,.09);border-color:rgba(14,116,144,.22)}
.paper .grain,.paper .aurora{display:none}
.paper>*{position:relative;z-index:1}

/* ── footer ─────────────────────────────────────────────── */
footer{position:relative;z-index:2;border-top:1px solid var(--bd);padding:clamp(52px,6vw,84px) 0 40px}
.fgrid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:clamp(28px,3vw,48px)}
footer h5{font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);margin-bottom:18px}
footer a.fl{display:block;padding:6px 0;font-size:14.5px;color:var(--fg-2);transition:color .25s}
footer a.fl:hover{color:var(--fg)}
.fbase{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--bd);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--fg-3)}

@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}