/* ============================================================
   pauliglesia.com
   One person, refracted. Five sides, five colours, one spectrum.
   ============================================================ */

:root{
  --bg:#08090C;
  --bg-lift:#101218;
  --ink:#EFEBE3;
  --ink-2:#9C9CA6;
  --ink-3:#838390;
  --line:rgba(239,235,227,.13);

  /* Five hues at one chroma (OKLCH C=0.142) and one lightness (L=0.620),
     except Light, which sits at 0.680 because yellow genuinely is lighter.
     Worst contrast on --bg is 5.08:1; min hue separation is 42 degrees. */
  --indigo:#657FDB;  --indigo-rgb:101,127,219;
  --cannabis:#309E59;    --cannabis-rgb:48,158,89;
  --sound:#BB61A4;   --sound-rgb:187,97,164;
  --light:#C88B00;   --light-rgb:200,139,0;
  --world:#CE5E62;   --world-rgb:206,94,98;

  /* unlit state: the vat still reads indigo, so hovering Indigo intensifies
     rather than switching hue */
  --accent:#7A83B3;
  --accent-rgb:122,131,179;

  --spectrum:linear-gradient(90deg,
    rgba(101,127,219,0)   0%,
    rgba(101,127,219,1)  15%,
    rgba(48,158,89,1)    33%,
    rgba(187,97,164,1)   50%,
    rgba(200,139,0,1)    67%,
    rgba(206,94,98,1)    85%,
    rgba(206,94,98,0)   100%);

  --display:"Fraunces",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --bleed:clamp(12px,1.6vw,24px);
  --maxw:1320px;

  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
canvas{display:block}

/* ---------- atmosphere ---------- */
.grain{
  position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ghost{
  position:fixed;z-index:0;pointer-events:none;
  left:50%;top:52%;transform:translate(-50%,-50%);
  font-family:var(--display);font-size:26vw;line-height:.8;letter-spacing:-.04em;
  color:var(--accent);opacity:0;white-space:nowrap;
  transition:opacity .5s ease,color .9s ease;
}
.ghost.on{opacity:.11}

/* ---------- shell ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}
[id]{scroll-margin-top:96px}
.label{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:18px 0;
  padding-top:calc(18px + env(safe-area-inset-top,0px));
  background:linear-gradient(to bottom,rgba(8,9,12,.92),rgba(8,9,12,0));
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;width:100%;
  padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.wordmark{
  font-family:var(--display);font-size:19px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px;white-space:nowrap;
}
.wordmark .pip{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  transition:background .9s ease,transform .5s var(--ease);
}
.wordmark:hover .pip{transform:scale(1.8)}
.nav-links{display:flex;gap:26px}
.nav-links a{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);transition:color .25s ease;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink)}
.nav-cta{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;
  transition:border-color .3s ease,color .3s ease;white-space:nowrap;
  will-change:transform;
}
.nav-cta:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- hero + the vat ---------- */
.hero-shell{position:relative;isolation:isolate}
.hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  opacity:0;transition:opacity 1.2s ease;
}
.hero-canvas.live{opacity:1}
/* Fallback ground when WebGL is unavailable: the vat, painted in CSS. */
.hero-shell::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 55% at 62% 38%,rgba(var(--accent-rgb),.20),transparent 68%),
    radial-gradient(45% 50% at 22% 72%,rgba(var(--accent-rgb),.10),transparent 70%);
  transition:background .9s ease;
}
.hero-shell::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;
  background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none;
}
.hero{
  min-height:100vh;
  min-height:clamp(560px,86svh,860px);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:140px 72px;position:relative;z-index:2;
}
.hero .eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:34px}
.hero .eyebrow .rule{width:44px;height:1px;background:var(--line)}
h1{
  font-family:var(--display);
  font-size:clamp(38px,7.4vw,104px);
  line-height:.98;letter-spacing:-.032em;font-weight:300;
  max-width:16ch;text-wrap:balance;
}
h1 em{font-style:italic;font-weight:300}
h1 .shift{color:var(--accent);transition:color .9s ease}
.lede{
  margin-top:34px;max-width:54ch;
  font-size:clamp(15px,1.7vw,19px);line-height:1.65;color:var(--ink-2);
}
.lede strong{color:var(--ink);font-weight:400}
.scroll-cue{margin-top:auto;padding-top:56px;display:flex;align-items:center;gap:12px}
.scroll-cue .stem{
  width:1px;height:34px;background:linear-gradient(var(--accent),transparent);
  transition:background .9s ease;transform-origin:top;
}

/* word-level entrance — only armed by JS, so no-JS renders the final state */
h1 .w,.lede .w{display:inline-block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em;vertical-align:top}
h1 .w-i,.lede .w-i{display:inline-block}
html.js .hero-pre h1 .w-i,
html.js .hero-pre .lede .w-i{transform:translateY(110%)}
html.js .hero-go h1 .w-i,
html.js .hero-go .lede .w-i{transform:none;transition:transform 1.05s var(--ease)}
html.js .hero-pre .eyebrow,html.js .hero-pre .scroll-cue{opacity:0}
html.js .hero-go .eyebrow,html.js .hero-go .scroll-cue{opacity:1;transition:opacity .9s ease .5s}

/* ---------- dispersion: the light the prism throws ----------
   A hairline of split light with the glow it casts onto the page below,
   rather than five hard-edged blocks of flat colour. */
.dispersion{
  position:relative;z-index:2;pointer-events:none;
  height:clamp(96px,12vw,168px);
  margin-bottom:calc(-1 * clamp(44px,6vw,86px));
}
.dispersion::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1.5px;
  background:var(--spectrum);
}
.dispersion::after{
  content:"";position:absolute;inset:0;
  background:var(--spectrum);opacity:.28;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),transparent 78%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),transparent 78%);
}

/* ---------- side rail ---------- */
.rail{
  position:fixed;inset-inline-end:max(18px,env(safe-area-inset-end,18px));top:50%;
  transform:translateY(-50%);z-index:45;
  display:flex;flex-direction:column;gap:14px;align-items:flex-end;
}
.rail a{display:flex;align-items:center;gap:10px;padding:3px 0}
.rail-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);opacity:0;transform:translateX(6px);
  transition:opacity .35s ease,transform .35s var(--ease),color .35s ease;
}
.rail-dot{
  width:22px;height:2px;border-radius:2px;background:var(--ink-3);opacity:.5;
  transition:width .4s var(--ease),background .4s ease,opacity .4s ease;
}
.rail a:hover .rail-label,.rail a:focus-visible .rail-label,.rail a.on .rail-label{opacity:1;transform:none;color:var(--ink-2)}
.rail a:hover .rail-dot,.rail a:focus-visible .rail-dot{width:34px;opacity:1;background:var(--c)}
.rail a.on .rail-dot{width:40px;opacity:1;background:var(--c)}

/* ---------- sides ---------- */
.sides{padding-block:clamp(70px,9vw,120px) 0;position:relative}
/* the section sits in its own faint pool of the lit colour */
.sides::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:0 calc(-1 * var(--gutter));
  background:radial-gradient(58% 40% at 50% 24%,rgba(var(--accent-rgb),.075),transparent 72%);
  transition:background .9s ease;
}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:8px;
}
/* the sides' header rule carries the whole spectrum */
.sides .section-head{border-bottom-color:transparent;position:relative}
.sides .section-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--spectrum);opacity:.55;
}
.section-head h2{
  font-family:var(--display);font-size:clamp(24px,3.2vw,38px);
  letter-spacing:-.02em;font-weight:300;
}
.sides-deck{perspective:1100px}

.side{
  display:grid;
  grid-template-columns:56px minmax(150px,240px) minmax(0,1fr) 40px;
  align-items:center;gap:clamp(14px,2.5vw,36px);
  padding:clamp(26px,3.4vw,40px) 0;
  position:relative;isolation:isolate;
  transform-style:preserve-3d;
  transition:transform .5s var(--ease);
  will-change:transform;
}
/* the light a row throws when it is lit, following the pointer */
.side::before{
  content:"";position:absolute;z-index:-1;inset:0 calc(-1 * var(--bleed));
  background:
    radial-gradient(440px 210px at var(--mx,18%) var(--my,50%),rgba(var(--c-rgb),.20),transparent 70%),
    linear-gradient(90deg,rgba(var(--c-rgb),.10),transparent 58%);
  opacity:0;transition:opacity .5s ease;border-radius:4px;
}
.side:hover::before,.side:focus-visible::before{opacity:1}

/* every row's rule is a length of its own colour, so reading down the list
   walks the same spectrum the prism casts above it */
.side::after{
  content:"";position:absolute;left:calc(-1 * var(--bleed));right:calc(-1 * var(--bleed));
  bottom:0;height:1px;
  background:linear-gradient(90deg,
    rgba(var(--c-rgb),.50) 0%,rgba(var(--c-rgb),.16) 30%,var(--line) 58%,var(--line) 100%);
  transition:background .5s ease;
}
.side:hover::after,.side:focus-visible::after{
  background:linear-gradient(90deg,
    rgba(var(--c-rgb),1) 0%,rgba(var(--c-rgb),.42) 42%,rgba(var(--c-rgb),.08) 78%,transparent 100%);
}

/* a filament at the left edge, lit end to end */
.side-rail{
  position:absolute;inset-inline-start:calc(-1 * var(--bleed));top:14%;bottom:14%;width:2px;
  background:linear-gradient(to bottom,transparent,var(--c) 20%,var(--c) 80%,transparent);
  transform:scaleY(0);transform-origin:center;
  transition:transform .5s var(--ease);
}
.side:hover .side-rail,.side:focus-visible .side-rail{transform:scaleY(1)}

.side .idx{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:rgba(var(--c-rgb),.62);transition:color .4s ease;
}
.side:hover .idx,.side:focus-visible .idx{color:var(--c)}
.side-name{
  font-family:var(--display);font-size:clamp(30px,5vw,58px);
  line-height:1;letter-spacing:-.03em;font-weight:300;display:block;
  transition:color .4s ease,text-shadow .4s ease,transform .5s var(--ease);
}
/* prism split: the name disperses into its own colour edges */
.side:hover .side-name,.side:focus-visible .side-name{
  color:var(--c);
  text-shadow:-.018em 0 rgba(255,70,140,.42),.018em 0 rgba(70,190,255,.42);
}
.side-kicker{
  display:block;margin-top:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.side-desc{font-size:15px;line-height:1.6;color:var(--ink-2);max-width:46ch}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tags li{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:4px 9px;
  transition:border-color .4s ease,color .4s ease,transform .4s var(--ease);
}
.side:hover .tags li,.side:focus-visible .tags li{
  border-color:rgba(var(--c-rgb),.45);color:var(--ink-2);
  box-shadow:inset 0 0 14px rgba(var(--c-rgb),.10);
}
.side .arrow{
  font-family:var(--mono);font-size:17px;color:var(--ink-3);justify-self:end;
  transition:transform .4s var(--ease),color .4s ease;
}
.side:hover .arrow,.side:focus-visible .arrow{transform:translate(4px,-4px);color:var(--c)}

/* ---------- now ---------- */
.now{padding-block:clamp(80px,10vw,140px)}
.now-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);perspective:1000px}
.now-card{
  background:var(--bg);padding:clamp(22px,2.6vw,34px);min-height:200px;
  display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;
  transition:background .4s ease,transform .5s var(--ease);
  transform-style:preserve-3d;will-change:transform;
}
.now-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(var(--accent-rgb),.16),transparent 70%);
  transition:opacity .4s ease;
}
.now-card:hover{background:var(--bg-lift)}
.now-card:hover::after{opacity:1}
.now-card h3{font-family:var(--display);font-size:22px;font-weight:300;letter-spacing:-.01em;line-height:1.25}
.now-card p{font-size:14px;line-height:1.6;color:var(--ink-2)}
.now-card .meta{margin-top:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- close ---------- */
.close{padding-block:clamp(70px,8vw,110px) clamp(60px,7vw,90px);border-top:1px solid var(--line)}
.close h2{
  font-family:var(--display);font-size:clamp(30px,5.6vw,68px);
  line-height:1.03;letter-spacing:-.03em;font-weight:300;max-width:17ch;text-wrap:balance;
}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.btn{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:14px 22px;border-radius:999px;border:1px solid var(--line);
  display:inline-flex;align-items:center;gap:10px;will-change:transform;
  transition:border-color .3s ease,background .3s ease,color .3s ease;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}

footer{border-top:1px solid var(--line);padding-block:30px 40px}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.socials{display:flex;flex-wrap:wrap;gap:20px}
.socials a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-2);transition:color .3s ease}
.socials a:hover{color:var(--accent)}

/* ---------- lens cursor ---------- */
.lens{
  position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;
  pointer-events:none;z-index:95;opacity:0;
  border:1px solid rgba(239,235,227,.45);
  -webkit-backdrop-filter:blur(1.5px) saturate(1.7) brightness(1.12);
  backdrop-filter:blur(1.5px) saturate(1.7) brightness(1.12);
  transition:width .35s var(--ease),height .35s var(--ease),
             border-color .35s ease,opacity .3s ease,background .35s ease;
  will-change:transform;
}
.lens.awake{opacity:1}
.lens.wide{width:76px;height:76px;border-color:var(--accent);background:rgba(var(--accent-rgb),.07)}

/* ---------- reveal ---------- */
.rise{transition:opacity .8s ease,transform .8s var(--ease)}
.rise.armed{opacity:0;transform:translateY(22px)}

/* ---------- responsive ---------- */
@media (max-width:1180px){ .rail{display:none} }
@media (max-width:900px){
  .nav-links{display:none}
  .now-grid{grid-template-columns:1fr}
  .side{
    grid-template-columns:40px 1fr 28px;
    grid-template-areas:"idx name arrow" ". body body";
    row-gap:14px;
  }
  .side .idx{grid-area:idx;align-self:start;padding-top:8px}
  .side .side-head{grid-area:name}
  .side .side-body{grid-area:body}
  .side .arrow{grid-area:arrow;align-self:start}
  .ghost{font-size:44vw}
}
@media (max-width:560px){
  .side{grid-template-columns:28px 1fr 22px;grid-template-areas:"idx name arrow" "body body body"}
  .side .idx{padding-top:6px}
  .hero{min-height:clamp(520px,82svh,760px)}
}
@media (hover:none){ .lens{display:none} }

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rise.armed{opacity:1;transform:none}
  .ghost,.lens{display:none}
  html.js .hero-pre h1 .w-i,
  html.js .hero-pre .lede .w-i{transform:none}
  html.js .hero-pre .eyebrow,html.js .hero-pre .scroll-cue{opacity:1}
}

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


/* ============================================================
   Languages: English, French, Spanish, Mandarin, Arabic

   Fraunces and Inter cover Latin only, so the other two scripts
   get faces that actually have the glyphs. Those stylesheets are
   injected by i18n.js only when their locale is chosen -- a CJK
   face is megabytes and nobody reading English should pay for it.
   ============================================================ */

:root[data-script="han"]{
  --display:"Noto Serif SC","Songti SC","Source Han Serif SC",serif;
  --sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB",sans-serif;
  --mono:"Noto Sans Mono CJK SC",ui-monospace,monospace;
}
:root[data-script="arabic"]{
  --display:"Noto Kufi Arabic","Amiri","Geeza Pro",serif;
  --sans:"IBM Plex Sans Arabic","Noto Sans Arabic","Geeza Pro",sans-serif;
  --mono:"IBM Plex Sans Arabic",ui-monospace,monospace;
}
/* Arabic sits taller on the line and does not want letter-spacing */
:root[data-script="arabic"] body{line-height:1.75}
:root[data-script="arabic"] .label,
:root[data-script="arabic"] .world-kicker,
:root[data-script="arabic"] .chapter-eyebrow,
:root[data-script="arabic"] .side-kicker,
:root[data-script="arabic"] .nav-links a,
:root[data-script="arabic"] .nav-cta,
:root[data-script="arabic"] .btn{letter-spacing:0;text-transform:none}
:root[data-script="han"] .label,
:root[data-script="han"] .side-kicker,
:root[data-script="han"] .nav-links a{letter-spacing:.06em;text-transform:none}

/* Right to left: the few things a logical property cannot carry */
:root[dir="rtl"] .side .arrow,
:root[dir="rtl"] .next-world a span[aria-hidden],
:root[dir="rtl"] .back span[aria-hidden]{transform:scaleX(-1)}
:root[dir="rtl"] .side:hover .arrow,
:root[dir="rtl"] .side:focus-visible .arrow{transform:scaleX(-1) translate(4px,-4px)}
/* gradients that run from the reading edge inward have to turn round */
:root[dir="rtl"] .side::after{
  background:linear-gradient(270deg,
    rgba(var(--c-rgb),.50) 0%,rgba(var(--c-rgb),.16) 30%,var(--line) 58%,var(--line) 100%);
}
:root[dir="rtl"] .side:hover::after,
:root[dir="rtl"] .side:focus-visible::after{
  background:linear-gradient(270deg,
    rgba(var(--c-rgb),1) 0%,rgba(var(--c-rgb),.42) 42%,rgba(var(--c-rgb),.08) 78%,transparent 100%);
}
:root[dir="rtl"] .side::before{
  background:
    radial-gradient(440px 210px at var(--mx,82%) var(--my,50%),rgba(var(--c-rgb),.20),transparent 70%),
    linear-gradient(270deg,rgba(var(--c-rgb),.10),transparent 58%);
}
:root[dir="rtl"] .scroll-cue .stem{transform:scaleX(-1)}

/* the switcher */
.lang-switch{display:flex;align-items:center;gap:2px}
.lang-opt{
  appearance:none;background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--ink-3);padding:5px 6px;border-radius:3px;
  transition:color .25s ease,background .25s ease;
}
.lang-opt:hover{color:var(--ink)}
.lang-opt[aria-current="true"]{color:var(--c,var(--accent));background:rgba(var(--accent-rgb),.10)}
@media (max-width:620px){ .lang-switch{display:none} }

/* Text that exists for a screen reader, or for a script to read a
   translated string out of, without taking up room on the page. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}