/* ============================================================
   Sui Learning — palette and type sampled from the cover art
   ============================================================ */

:root{
  /* paper */
  --paper:        #F0E8CE;
  --paper-deep:   #E7DCBB;
  --paper-warm:   #F6F0DC;

  /* ink — the near-black plum of the darkest wings */
  --ink:          #1A0710;
  --ink-soft:     #4A3038;
  --ink-faint:    #7A6069;

  /* the watercolour range */
  --magenta:      #9D0042;
  --magenta-lt:   #DD0061;
  --pink:         #E75690;
  --pink-pale:    #E38BA2;
  --plum:         #340013;
  --purple:       #9353B9;
  --purple-lt:    #B781C9;
  --coral:        #F8A889;
  --peach:        #F7B78C;

  --rule:         rgba(26,7,16,.14);
  --shadow:       28px 34px 60px -28px rgba(52,0,19,.42);

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --brush: 'Caveat Brush', 'Segoe Script', cursive;

  --wrap: 1120px;
  --pad: clamp(20px, 5vw, 48px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(16px,.55vw + 15px,18px);
  line-height:1.72;
  color:var(--ink);
  /* paper grain: seamless fractal noise laid straight over the cover's stock
     colour. No blend mode or fixed layer — those fight sticky/backdrop-filter
     compositing in several browsers. */
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  background-size:180px 180px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap.narrow{ max-width:760px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--magenta); color:var(--paper-warm);
  padding:.7em 1.2em; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2.5px solid var(--magenta); outline-offset:3px; border-radius:2px; }

/* ── type ───────────────────────────────────────────────── */

h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.15; letter-spacing:-.012em; margin:0; }

h1{ font-size:clamp(2.1rem,5.2vw,3.5rem); letter-spacing:-.022em; }
h2{ font-size:clamp(1.75rem,3.4vw,2.6rem); letter-spacing:-.018em; }
h3{ font-size:clamp(1.12rem,1.5vw,1.3rem); }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

em{ font-style:italic; }

a{ color:var(--magenta); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:var(--magenta-lt); }

.eyebrow{
  font-family:var(--brush);
  font-size:clamp(1.05rem,1.5vw,1.32rem);
  color:var(--magenta);
  letter-spacing:.04em;
  margin:0 0 .45em;
}
.center{ text-align:center; }
.section-lede{
  max-width:58ch; margin-inline:auto; color:var(--ink-soft);
  font-size:1.06em;
}

/* ── header ─────────────────────────────────────────────── */

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(240,232,206,.94);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
.site-header.stuck{
  border-bottom-color:var(--rule);
  box-shadow:0 8px 26px -22px rgba(52,0,19,.6);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:68px; }

.wordmark{
  font-family:var(--brush);
  font-size:1.72rem;
  color:var(--ink);
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
}
.wordmark:hover{ color:var(--magenta); }
.wordmark.small{ font-size:1.45rem; }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem); }
.nav a{
  color:var(--ink-soft); text-decoration:none;
  font-size:.94rem; letter-spacing:.005em;
  position:relative; padding-block:.35em;
  white-space:nowrap;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:.1em;
  height:1.5px; background:var(--magenta); transition:right .28s ease;
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ right:0; }

.nav .nav-cta{
  background:var(--magenta); color:var(--paper-warm);
  padding:.5em 1.1em; border-radius:999px; font-size:.9rem;
}
.nav .nav-cta::after{ display:none; }
.nav .nav-cta:hover{ background:var(--plum); color:var(--paper-warm); }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.5rem; }
.nav-toggle span{ display:block; width:23px; height:2px; background:var(--ink); margin:5px 0; transition:.28s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mnav{ display:none; flex-direction:column; padding:0 var(--pad) 1.1rem; border-top:1px solid var(--rule); }
.mnav a{ padding:.85em 0; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule); }
.mnav a:last-child{ border-bottom:0; color:var(--magenta); }

/* ── decorative motifs lifted from the cover ────────────── */

.deco{ position:absolute; pointer-events:none; user-select:none; z-index:0; }

.deco-enso{ width:min(46vw,430px); top:-6%;  right:-9%;  opacity:.55; }
.deco-enso2{ width:min(40vw,330px); bottom:-14%; left:-7%; opacity:.3; }
.deco-b1{ width:min(22vw,180px); top:14%; left:-3%;  opacity:.5;  transform:rotate(-12deg); }
.deco-b2{ width:min(17vw,140px); bottom:9%; right:6%; opacity:.4;  transform:rotate(9deg); }
.deco-b3{ width:min(20vw,165px); top:6%;  right:-2%;  opacity:.32; transform:rotate(14deg); }
.deco-b4{ width:min(19vw,155px); bottom:4%; left:-2%; opacity:.3;  transform:rotate(-8deg); }

@keyframes drift{
  0%,100%{ transform:translate3d(0,0,0) rotate(var(--r,0deg)); }
  50%    { transform:translate3d(6px,-14px,0) rotate(calc(var(--r,0deg) + 3deg)); }
}
.drift{ animation:drift 11s ease-in-out infinite; }
.drift-slow{ animation-duration:16s; animation-delay:-4s; }
.deco-b1{ --r:-12deg; } .deco-b2{ --r:9deg; }
.deco-b3{ --r:14deg; }  .deco-b4{ --r:-8deg; }

@media (prefers-reduced-motion: reduce){
  .drift{ animation:none; }
}

/* ── hero ───────────────────────────────────────────────── */

.hero{ position:relative; padding:clamp(3rem,7vw,6rem) 0 clamp(3.5rem,8vw,7rem); overflow:hidden; }
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr minmax(280px,400px);
  gap:clamp(2rem,6vw,5rem); align-items:center;
}
.hero-copy{ max-width:37rem; }
.hero h1{ margin-bottom:.5em; }
.lede{ font-size:1.12em; color:var(--ink-soft); max-width:34rem; }

.byline{
  font-family:var(--brush); font-size:1.28rem;
  color:var(--magenta); margin:-.15em 0 .9em;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin:2rem 0 1.4rem; }
.hero-meta{ font-size:.9rem; color:var(--ink-faint); letter-spacing:.02em; margin:0; }

.cover-shell{
  position:relative; border-radius:3px; overflow:hidden;
  box-shadow:var(--shadow);
  transform:rotate(-1.6deg);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.cover-shell::after{  /* page-edge sheen down the spine side */
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,255,255,.32) 0 3%, transparent 12%);
  pointer-events:none;
}
.cover-shell:hover{ transform:rotate(0deg) translateY(-6px); }
.cover-shell.small{ transform:rotate(2deg); max-width:270px; }

/* ── buttons ────────────────────────────────────────────── */

.btn{
  display:inline-block; text-decoration:none;
  font-size:.98rem; letter-spacing:.01em; font-weight:500;
  padding:.82em 1.75em; border-radius:999px;
  border:1.5px solid transparent;
  transition:transform .18s, background .22s, color .22s, border-color .22s, box-shadow .22s;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--magenta); color:var(--paper-warm);
  box-shadow:0 12px 26px -14px rgba(157,0,66,.85);
}
.btn-primary:hover{ background:var(--plum); color:var(--paper-warm); box-shadow:0 16px 30px -14px rgba(52,0,19,.8); }

.btn-outline{ border-color:var(--magenta); color:var(--magenta); background:transparent; }
.btn-outline:hover{ background:var(--magenta); color:var(--paper-warm); }

.btn-ghost{ color:var(--ink-soft); border-color:var(--rule); }
.btn-ghost:hover{ border-color:var(--ink); color:var(--ink); }

/* ── premise / stat ─────────────────────────────────────── */

.premise{ padding:clamp(1rem,3vw,2rem) 0 clamp(.5rem,2vw,1rem); }
.stat-row{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.stat{ display:flex; gap:1.4rem; align-items:flex-start; }
.stat-num{
  font-family:var(--brush);
  font-size:clamp(3.6rem,8vw,5.6rem);
  line-height:.82; color:var(--magenta);
  flex:none;
}
.stat-num .pct{ font-size:.5em; vertical-align:super; }
.stat-cap{ font-size:.98em; color:var(--ink-soft); margin:0; padding-top:.4rem; }

.pull{
  margin:0; padding-left:1.6rem;
  border-left:3px solid var(--purple-lt);
}
.pull p{
  font-size:clamp(1.15rem,2vw,1.45rem);
  line-height:1.45; font-style:italic; font-weight:500;
  color:var(--ink);
}
.pull cite{
  display:block; font-style:normal; font-size:.86rem;
  color:var(--ink-faint); letter-spacing:.03em;
}
.pull cite span{ font-style:italic; }
.pull.center{
  border-left:0; padding:1.8rem 0 0; text-align:center;
  border-top:1px solid var(--rule); margin-top:2.6rem;
}
.pull.center p{ max-width:40ch; margin-inline:auto; }

/* ── arc divider ────────────────────────────────────────── */

.divider{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1rem,3vw,1.7rem);
  padding:clamp(.5rem,2vw,1.4rem) var(--pad) clamp(1rem,3vw,2rem);
}
.divider img{ width:72px; opacity:.72; flex:none; }
.divider .rule{ height:1px; width:min(24vw,170px); background:linear-gradient(90deg,transparent,var(--rule)); }
.divider .rule:last-child{ background:linear-gradient(90deg,var(--rule),transparent); }

/* ── generic section ────────────────────────────────────── */

.section{ position:relative; padding:clamp(3rem,5.5vw,4.75rem) 0; overflow:hidden; }
.section > .wrap{ position:relative; z-index:1; }
.section h2{ margin-bottom:.9rem; }
.section .eyebrow.center + h2{ margin-bottom:1.6rem; }

/* ── method cards ───────────────────────────────────────── */

.cards{
  display:grid; gap:clamp(1rem,2.4vw,1.6rem);
  grid-template-columns:1fr;
  max-width:900px; margin:clamp(2rem,4vw,3rem) auto 0;
}
@media (min-width:640px){ .cards{ grid-template-columns:1fr 1fr; } }

.card{
  position:relative;
  background:linear-gradient(160deg, rgba(255,252,242,.92), rgba(246,240,220,.72));
  border:1px solid var(--rule);
  border-radius:14px;
  padding:1.9rem 1.6rem 1.7rem;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
}
.card:hover{
  transform:translateY(-5px);
  border-color:rgba(157,0,66,.3);
  box-shadow:0 22px 40px -26px rgba(52,0,19,.55);
}
.card-num{
  font-family:var(--brush); font-size:1.5rem;
  color:var(--pink); line-height:1; display:block; margin-bottom:.5rem;
}
.card h3{ margin-bottom:.55rem; }
.card p{ font-size:.96em; color:var(--ink-soft); margin:0; }

/* ── the seven parts ────────────────────────────────────── */

.contents{ background:linear-gradient(180deg, transparent, rgba(231,220,187,.5) 22%, rgba(231,220,187,.5) 78%, transparent); }

.parts{ list-style:none; margin:clamp(2rem,4vw,3rem) 0 0; padding:0; max-width:820px; margin-inline:auto; }
.part{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem;
  padding:1.5rem 0; border-top:1px solid var(--rule);
  align-items:baseline;
}
.part:last-child{ border-bottom:1px solid var(--rule); }
.part-n{
  font-family:var(--brush); font-size:1.5rem; color:var(--purple);
  min-width:3.6rem; line-height:1;
}
.part h3{ margin-bottom:.3rem; }
.part p{ margin:0; color:var(--ink-soft); font-size:.97em; }

.part:last-child .part-n{ color:var(--magenta); }
.part:last-child h3{ color:var(--magenta); }

/* ── virtues ────────────────────────────────────────────── */

.virtues{
  list-style:none; padding:0;
  margin:clamp(2rem,4vw,3rem) auto 0; max-width:860px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem .7rem;
}
.virtues li{
  border:1px solid rgba(157,0,66,.28);
  color:var(--magenta);
  border-radius:999px;
  padding:.44em 1.05em;
  font-size:.93rem; letter-spacing:.015em;
  background:rgba(255,252,242,.55);
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.virtues li:hover{
  background:var(--magenta); color:var(--paper-warm);
  border-color:var(--magenta); transform:translateY(-2px);
}

/* ── the world to come ──────────────────────────────────── */

.future{
  background:linear-gradient(180deg, transparent, rgba(183,129,201,.10) 18%, rgba(183,129,201,.10) 82%, transparent);
}
.deco-b5{ width:min(18vw,150px); top:4%; left:-2%; opacity:.28; --r:-10deg; transform:rotate(-10deg); }

/* consume / create */
.fork{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch;
  gap:clamp(.8rem,2vw,1.4rem);
  max-width:920px; margin:clamp(2.2rem,4.5vw,3.2rem) auto 0;
}
.path{
  border-radius:14px; padding:1.7rem 1.6rem 1.6rem;
  border:1px solid var(--rule);
}
.path p{ margin:0; font-size:.97em; }
/* .path .path-label, not .path-label: `.path p` would otherwise win on specificity */
.path .path-label{
  font-family:var(--brush); font-size:1.85rem; line-height:1;
  margin:0 0 .75rem;
}
/* the empty path: cool, faded, no warmth */
.path-consume{ background:rgba(26,7,16,.035); color:var(--ink-faint); }
.path-consume .path-label{ color:var(--ink-faint); }
/* the full path: the cover's own magenta, lifted off the page */
.path-create{
  background:linear-gradient(160deg, rgba(255,252,242,.95), rgba(246,240,220,.8));
  border-color:rgba(157,0,66,.28);
  box-shadow:0 20px 38px -26px rgba(157,0,66,.5);
  color:var(--ink-soft);
}
.path-create .path-label{ color:var(--magenta); }
.fork-or{
  align-self:center; font-family:var(--brush); font-size:1.7rem;
  color:var(--purple); padding:0 .3rem;
}

/* an art, a sport, a science */
.triad-intro{ max-width:640px; margin:clamp(3rem,6vw,4.2rem) auto 0; text-align:center; }
.triad-intro h3{ font-size:clamp(1.3rem,2.2vw,1.6rem); margin-bottom:.6rem; }
.triad-intro p{ color:var(--ink-soft); margin:0; }

.triad{
  list-style:none; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(.8rem,2vw,1.2rem);
  max-width:760px; margin:clamp(1.6rem,3vw,2.2rem) auto 0;
  position:relative;
}
/* a thin thread tying the three together */
.triad::before{
  content:''; position:absolute; left:16%; right:16%; top:50%;
  height:1px; background:linear-gradient(90deg, transparent, var(--purple-lt), transparent);
  z-index:0;
}
.triad li{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  justify-content:center;
  gap:.35rem; padding:1.2rem 1rem;
  background:var(--paper); border:1px solid rgba(147,83,185,.3); border-radius:18px;
}
.triad-kind{
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--purple);
}
.triad-ex{ font-family:var(--brush); font-size:1.25rem; line-height:1.15; color:var(--ink); }

.future-close{ max-width:680px; margin:clamp(3rem,6vw,4.2rem) auto 0; }
.future-close > p{ color:var(--ink-soft); text-align:center; }
.future-cta{ display:flex; justify-content:center; margin-top:1.8rem; }

/* ── who it's for ───────────────────────────────────────── */

.forwho h2{ margin-bottom:1.6rem; }
.forwho p{ color:var(--ink-soft); }

/* ── get the book ───────────────────────────────────────── */

.get{
  background:linear-gradient(170deg, rgba(231,220,187,.7), rgba(240,232,206,.2));
  border-top:1px solid var(--rule);
}
.get-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(200px,290px) 1fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.get-copy h2{ margin-bottom:.25rem; }
.get-sub{
  font-family:var(--brush); font-size:1.35rem;
  color:var(--ink-soft); margin-bottom:1.1rem;
}
.get-author{
  font-size:.95rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 1.1rem;
}
.get-copy > p{ color:var(--ink-soft); max-width:36rem; }
.buy{ display:flex; flex-wrap:wrap; gap:.85rem; margin:1.8rem 0 .7rem; }
.buy-note{ font-size:.86rem; color:var(--ink-faint); margin:0 0 1.2rem; }
.fineprint{ font-size:.9rem; color:var(--ink-faint); margin:0; }

/* ── footer ─────────────────────────────────────────────── */

.site-footer{ border-top:1px solid var(--rule); padding:2.2rem 0; }
.footer-inner{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.footer-meta{ margin:0; font-size:.88rem; color:var(--ink-faint); }

/* ── scroll reveal ──────────────────────────────────────── */

/* Content is visible by default. Only once JS has confirmed it can run do we
   hide it to animate it in — so a script failure can never blank the page. */
.js-reveal .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.js-reveal .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js-reveal .reveal{ opacity:1; transform:none; transition:none; }
}

/* ── responsive ─────────────────────────────────────────── */

@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ margin-inline:auto; }
  .lede{ margin-inline:auto; }
  .hero-actions{ justify-content:center; }
  .hero-cover{ order:-1; max-width:280px; margin-inline:auto; }
  .stat-row{ grid-template-columns:1fr; }
  .get-grid{ grid-template-columns:1fr; text-align:center; }
  .get-cover{ max-width:230px; margin-inline:auto; }
  .get-copy > p{ margin-inline:auto; }
  .buy{ justify-content:center; }
  .cover-shell.small{ transform:rotate(0); }
}

/* The nav collapses to the menu button a little before the rest of the layout
   goes single-column. Six links fit down to ~740px, but with only ~12px to
   spare, which a fallback font or browser zoom would eat. 800px leaves ~45px. */
@media (max-width: 800px){
  .nav{ display:none; }
  .nav-toggle{ display:block; }
  /* :not([hidden]) so the attribute still wins — a bare display:flex here
     would override it and leave the menu permanently open */
  .mnav:not([hidden]){ display:flex; }
}

@media (max-width: 720px){
  .deco-enso{ width:60vw; top:-3%; right:-22%; opacity:.4; }
  .deco-b1,.deco-b2,.deco-b3,.deco-b4{ opacity:.22; }
  .part{ grid-template-columns:1fr; gap:.35rem; }
  .part-n{ font-size:1.25rem; }
  .stat{ flex-direction:column; gap:.4rem; }
  .stat-cap{ padding-top:0; }
  .footer-inner{ justify-content:center; text-align:center; }
  .fork{ grid-template-columns:1fr; }
  .fork-or{ justify-self:center; padding:.1rem 0; }
  .triad{ grid-template-columns:1fr; max-width:320px; }
  .triad::before{ left:50%; right:auto; top:8%; bottom:8%; width:1px; height:auto;
    background:linear-gradient(180deg, transparent, var(--purple-lt), transparent); }
  .deco-b5{ opacity:.18; }
}