:root{
  --paper: #E7EBFB;
  --paper-2: #DCEEFB;
  --ink: #2A2361;
  --ink-soft: #5B5296;
  --wash: #9A8FCB;
  --seal: #B23A2E;
  --seal-soft: rgba(178,58,46,0.10);
  --neon-cyan: #00D9E8;
  --violet: #7C3AED;
  --accent-blue: #2563EB;
  --hair: rgba(42,35,97,0.14);
  --maxw: 760px;
  --sidebar-w: 340px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  color: var(--ink);
  font-family: 'Comfortaa', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}

.bg-wash{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(52% 46% at 14% 8%, rgba(0,217,232,0.30), transparent 62%),
    radial-gradient(46% 42% at 88% 12%, rgba(178,58,46,0.20), transparent 60%),
    radial-gradient(60% 55% at 50% 105%, rgba(124,58,237,0.20), transparent 62%),
    linear-gradient(160deg, #EAEEFC 0%, #E4E7FB 45%, #E3DFF7 100%);
}

a{color:inherit; text-decoration:none;}

canvas#bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

/* ---------- shared page shell ---------- */
.page{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-top: 15vh;
  padding-right: 9vw;
  padding-bottom: 9rem;
  padding-left: 9vw;
}
html.sidebar-open .page{ padding-left: calc(var(--sidebar-w) + 9vw); }

.stamp-number{
  position:absolute;
  top:-6vh;
  right:-1vw;
  font-family:'Bree Serif', serif;
  font-size: min(30vw, 26rem);
  line-height:1;
  color: var(--ink);
  opacity:0.05;
  z-index:0;
  pointer-events:none;
  user-select:none;
}

.content{
  position:relative;
  z-index:2;
  max-width: var(--maxw);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:.7em;
  font-family:'Comfortaa', sans-serif;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.7rem;
  color: var(--seal);
  margin-bottom: 1.4rem;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background: var(--seal);
  box-shadow: 0 0 8px 1px var(--seal);
}

h1{
  font-family:'Bree Serif', serif;
  font-weight:400;
  font-size: clamp(2rem, 4.6vw, 3.35rem);
  line-height:1.18;
  margin: 0 0 1.6rem;
  max-width: 14ch;
}

.lede{
  font-family:'Comfortaa', sans-serif;
  font-weight:300;
  font-size: 1.08rem;
  line-height:1.85;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 0 1.2rem;
}

.body-block{margin-top:.4rem;}
.body-block p{
  font-family:'Comfortaa', sans-serif;
  font-weight:300;
  font-size: 1.05rem;
  line-height:1.85;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 0 1.1rem;
}

/* ---------- example / quote treatments ---------- */
.card{
  margin-top: 2rem;
  border-left: 3px solid var(--seal);
  background: var(--seal-soft);
  padding: 1.25rem 1.5rem;
  border-radius: 2px 16px 2px 16px;
  max-width: 60ch;
}
.card .row{
  display:flex;
  gap:.85rem;
  align-items:flex-start;
  font-family:'Comfortaa', sans-serif;
  font-size:.98rem;
  line-height:1.7;
  margin: .35rem 0;
}
.card .row + .row{ margin-top:.6rem; padding-top:.6rem; border-top:1px dashed var(--hair);}
.card .dot{
  flex:0 0 auto;
  width:.55rem; height:.55rem; border-radius:50%;
  margin-top:.5em;
  background: var(--wash);
}
.card .row.better .dot{ background: var(--seal); box-shadow: 0 0 6px 0 var(--seal); }
.card .label{
  flex:0 0 auto;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.68rem;
  color: var(--wash);
  min-width:6.4em;
  padding-top:.15em;
}
.card .row.better .label{ color: var(--seal); }
.card .text{ color: var(--ink); font-weight:400; }
.card .text em{ font-style:normal; color:var(--ink-soft); }

.quote{
  margin-top:2rem;
  max-width:58ch;
  font-family:'Comfortaa', sans-serif;
  font-size:1.02rem;
  line-height:1.75;
  color: var(--ink);
  padding: 1.1rem 0 1.1rem 1.6rem;
  border-left: 3px solid var(--wash);
}

.flow{
  margin-top:1.6rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem;
  max-width:60ch;
}
.flow .step{
  font-family:'Comfortaa', sans-serif;
  font-weight:600;
  font-size:.92rem;
  background: rgba(255,255,255,0.45);
  border:1px solid var(--hair);
  padding:.45rem .9rem;
  border-radius: 999px;
  color: var(--ink);
}
.flow .arrow{ color: var(--seal); font-size:1rem; }
.flow-label{
  font-family:'Comfortaa', sans-serif;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.72rem;
  color: var(--wash);
  margin: 1.5rem 0 -.6rem;
}

.levels{ list-style:none; margin:1.6rem 0 0; padding:0; max-width:60ch; counter-reset: lvl;}
.levels li{
  display:flex; gap:1rem; align-items:baseline;
  padding: .8rem 0;
  border-top:1px dashed var(--hair);
  font-family:'Comfortaa', sans-serif;
}
.levels li:first-child{ border-top:none; }
.levels .num{
  font-family:'Bree Serif', serif;
  font-size:1.4rem;
  color: var(--seal);
  min-width:1.4em;
}
.levels .lvl-title{ font-weight:700; color:var(--ink); margin-right:.4em; }
.levels .lvl-desc{ color:var(--ink-soft); font-weight:300; }

.questions{ list-style:none; margin:1.7rem 0 0; padding:0; max-width:56ch; }
.questions li{
  font-family:'Comfortaa', sans-serif;
  font-size:1rem;
  line-height:1.7;
  color:var(--ink);
  padding: .55rem 0 .55rem 1.6rem;
  position:relative;
}
.questions li::before{
  content:"問";
  position:absolute; left:0; top:.5rem;
  font-family:'Bree Serif', serif;
  font-size:.85rem;
  color: var(--seal);
  opacity:.75;
}

.closing{
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hair);
  max-width: 60ch;
}
.closing .flow-label{ margin-top:0; }
.closing .flow{ margin-top: .6rem; margin-bottom: 1.1rem; }
.closing .final-line{
  margin-top:1.3rem;
  font-family:'Bree Serif', serif;
  font-size: 1.2rem;
  line-height:1.5;
  color: var(--ink);
}

/* ---------- code blocks ---------- */
.codeblock{
  margin-top: 1.7rem;
  max-width: 62ch;
  background: rgba(255,255,255,0.62);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 1.05rem 1.3rem;
  overflow-x: auto;
}
.codeblock code{
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: .82rem;
  line-height: 1.65;
  color: var(--ink-soft);
  white-space: pre;
}

/* ---------- principle / takeaway callouts ---------- */
.principle{
  margin-top: 2rem;
  max-width: 60ch;
  padding: 1.3rem 1.5rem;
  border-left: 3px solid var(--seal);
  background: var(--seal-soft);
  border-radius: 2px 16px 2px 16px;
}
.principle-label{
  font-family:'Comfortaa', sans-serif;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.64rem;
  color: var(--seal);
  margin-bottom:.55rem;
}
.principle-text{
  font-family:'Bree Serif', serif;
  font-size: 1.14rem;
  line-height:1.5;
  color: var(--ink);
}

.takeaway{
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--hair);
  max-width: 60ch;
}
.takeaway-label{
  font-family:'Comfortaa', sans-serif;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.62rem;
  color: var(--wash);
  margin-bottom:.5rem;
}
.takeaway-text{
  font-family:'Bree Serif', serif;
  font-size: 1.06rem;
  line-height:1.5;
  color: var(--ink);
}

/* ---------- pill rows (tag-like sets, no arrows) ---------- */
.pillrow{
  margin-top: 1.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  max-width:62ch;
}
.pillrow .pill{
  font-family:'Comfortaa', sans-serif;
  font-weight:600;
  font-size:.8rem;
  background: rgba(255,255,255,0.4);
  border:1px solid var(--hair);
  padding:.4rem .85rem;
  border-radius: 999px;
  color: var(--ink-soft);
}

/* ---------- generic bullet list ---------- */
.bullets{
  list-style:none;
  margin: 1.6rem 0 0;
  padding:0;
  max-width: 58ch;
}
.bullets li{
  font-family:'Comfortaa', sans-serif;
  font-size:1rem;
  line-height:1.7;
  color: var(--ink-soft);
  padding: .38rem 0 .38rem 1.4rem;
  position:relative;
}
.bullets li::before{
  content:"";
  position:absolute;
  left:0; top:.85rem;
  width:.4rem; height:.4rem;
  border-radius:50%;
  background: var(--seal);
}

.subhead-label{ margin-top:1.8rem; }
.body-block + .subhead-label,
.card + .subhead-label,
.codeblock + .subhead-label,
.pillrow + .subhead-label,
.bullets + .subhead-label{ margin-top:2rem; }

/* ---------- grouped headers (toc / sidebar) ---------- */
.toc-group{
  font-family:'Comfortaa', sans-serif;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.7rem;
  color: var(--seal);
  margin: 2.2rem 0 .3rem;
  padding: 0 .2rem;
}
.toc-group:first-child{ margin-top:0; }
.sidebar-group{
  font-family:'Comfortaa', sans-serif;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.64rem;
  color: var(--seal);
  margin: 1.3rem 0 .2rem;
  padding: 0 1.5rem;
  opacity:.85;
}
.sidebar-group:first-child{ margin-top:.4rem; }

/* ---------- synthesis / connector diagram (final page) ---------- */
.summary-wrap{
  position:relative;
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3rem;
  margin-top: 1.8rem;
  max-width: 900px;
}
.summary-connectors{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}
.summary-principles{ position:relative; z-index:1; }
.summary-principles ol{ list-style:none; margin:0; padding:0; }
.summary-principles li{
  display:flex;
  gap:.65rem;
  align-items:baseline;
  font-family:'Comfortaa', sans-serif;
  font-size:.82rem;
  line-height:1.5;
  color: var(--ink-soft);
  padding: .42rem 0;
  border-top: 1px dashed var(--hair);
}
.summary-principles li:first-child{ border-top:none; }
.summary-principles li .n{
  font-family:'Bree Serif', serif;
  font-size:.78rem;
  color: var(--seal);
  min-width:1.7em;
  opacity:.75;
  flex:0 0 auto;
}
.summary-themes{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1.15rem;
}
.theme-card{
  padding: 1rem 1.2rem;
  border-radius: 4px 14px 4px 14px;
  background: rgba(255,255,255,0.62);
  border: 1px solid var(--hair);
  border-left: 4px solid var(--theme-color, var(--seal));
}
.theme-card .theme-name{
  font-family:'Bree Serif', serif;
  font-size: 1.08rem;
  color: var(--ink);
}
.theme-card .theme-desc{
  font-family:'Comfortaa', sans-serif;
  font-size:.82rem;
  line-height:1.55;
  color: var(--ink-soft);
  margin-top:.35rem;
}

@media (max-width: 760px){
  .summary-wrap{ grid-template-columns: 1fr; gap: 2rem; }
  .summary-connectors{ display:none; }
  .summary-themes{ justify-content:flex-start; }
}

/* ---------- motif (live spirograph) ---------- */
.motif{
  position:fixed;
  right: -4vw;
  bottom: -6vw;
  width: min(42vw, 480px);
  height: min(42vw, 480px);
  z-index:1;
  opacity:.5;
  pointer-events:none;
}

/* ---------- sidebar (inner pages) ----------
   Defaults OPEN on desktop and pushes .page/.sitenav aside via padding-left
   (no transition on that padding — snapping instantly avoids a mid-flight
   layout if the page is captured/rendered right after first paint).
   Collapses to an overlay drawer under 861px, default CLOSED there.
   State lives as a single class on <html>: "sidebar-open".
*/
.sidebar-toggle{
  position:fixed;
  top:1.5rem;
  left:1.5rem;
  z-index:22;
  width:2.7rem;
  height:2.7rem;
  border-radius:50%;
  background: rgba(255,255,255,0.7);
  border:1px solid var(--hair);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color: var(--ink);
  opacity:1;
  pointer-events:auto;
  transition: background .2s ease, color .2s ease;
}
.sidebar-toggle svg{ width:1.05rem; height:1.05rem; }
.sidebar-toggle:hover{ background: rgba(255,255,255,0.85); color: var(--seal); }
html.sidebar-open .sidebar-toggle{ opacity:0; pointer-events:none; }

.sidebar-backdrop{
  position:fixed; inset:0;
  background: rgba(42,35,97,0.22);
  backdrop-filter: blur(2px);
  opacity:0;
  pointer-events:none;
  transition: opacity .3s ease;
  z-index:20;
  display:none;
}

.sidebar{
  position:fixed;
  top:0; left:0; bottom:0;
  width: var(--sidebar-w);
  background: linear-gradient(165deg, rgba(234,238,252,0.99), rgba(227,223,247,0.99));
  border-right:1px solid var(--hair);
  box-shadow: 8px 0 40px rgba(42,35,97,0.12);
  z-index:21;
  display:flex;
  flex-direction:column;
  padding: 1.6rem 0;
  transform: translateX(-104%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
html.sidebar-open .sidebar{ transform: translateX(0); }

.sidebar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 1.5rem 1.1rem;
  margin-bottom:.4rem;
  border-bottom: 1px dashed var(--hair);
}
.sidebar-title{
  font-family:'Bree Serif', serif;
  font-size:1.05rem;
  color: var(--ink);
}
.sidebar-close{
  background:none;
  border:none;
  font-size:1.5rem;
  line-height:1;
  color: var(--wash);
  cursor:pointer;
  padding:.2rem .4rem;
  font-family:'Comfortaa', sans-serif;
}
.sidebar-close:hover{ color: var(--seal); }

.sidebar-list{
  overflow-y:auto;
  flex:1;
  padding-bottom: .5rem;
}
.sidebar-list ol{
  list-style:none;
  margin:0;
  padding:0;
}
.sidebar-list a{
  display:flex;
  gap:.9rem;
  align-items:baseline;
  padding:.68rem 1.5rem;
  font-family:'Comfortaa', sans-serif;
  font-size:.85rem;
  color: var(--ink-soft);
  transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.sidebar-list a:hover{
  background: rgba(255,255,255,0.5);
  color: var(--seal);
  padding-left: 1.75rem;
}
.sidebar-list .num{
  font-family:'Bree Serif', serif;
  font-size:.85rem;
  color: var(--seal);
  min-width:2ch;
  opacity:.8;
  flex:0 0 auto;
}
.sidebar-list li.current a{
  color: var(--ink);
  font-weight:700;
  background: var(--seal-soft);
  border-radius: 0 999px 999px 0;
}
.sidebar-list li.current .num{ color: var(--seal); opacity:1; }

/* Desktop: sidebar pushes content, no backdrop, defaults open via inline
   head script (see PAGE_TEMPLATE) so there's no flash before JS runs. */
@media (min-width: 861px){
  html.sidebar-open .sitenav{ padding-left: calc(var(--sidebar-w) + 2rem); }
}

/* Mobile/tablet: overlay drawer, defaults closed, backdrop enabled. */
@media (max-width: 860px){
  html.sidebar-open .page{ padding-left: 7vw; }
  .sidebar{ width: min(340px, 84vw); }
  .sidebar-backdrop{ display:block; }
  html.sidebar-open .sidebar-backdrop{ opacity:1; pointer-events:auto; }
  .sidebar-toggle{ top:1rem; left:1rem; width:2.4rem; height:2.4rem; }
}

/* ---------- nav ---------- */
.sitenav{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1.1rem 2rem;
  font-family:'Comfortaa', sans-serif;
  background: linear-gradient(to top, rgba(234,238,252,0.9) 45%, transparent);
}
.sitenav a{
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.05em;
  color: var(--ink-soft);
  display:flex;
  align-items:center;
  gap:.4em;
  padding:.4em .2em;
  transition: color .2s ease;
}
.sitenav a:hover{ color: var(--seal); }
.sitenav .arrow{
  font-family:'Bree Serif', serif;
  font-size:1.3rem;
  line-height:1;
}
.nav-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
}
.sitenav .index-link{
  display:flex; align-items:center; gap:.5em;
  color: var(--ink);
  font-weight:700;
}
.sitenav .index-link .mark{ color: var(--seal); flex:0 0 auto; }
.sitenav .counter{
  font-size:.75rem;
  color: var(--wash);
  letter-spacing:.1em;
}
.nav-credit{
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--wash);
  opacity:.85;
}
.sitenav .next{ text-align:right; }
.sitenav .prev.disabled, .sitenav .next.disabled{ visibility:hidden; }

@media (max-width: 620px){
  .page{ padding: 12vh 7vw 14vh !important; }
  .sitenav{ padding: .9rem 1.1rem; }
  .sitenav .prev span.label, .sitenav .next span.label{ display:none; }
  .motif{ width: 60vw; height:60vw; right:-10vw; bottom:-10vw; opacity:.35;}
}

/* ---------- landing page ---------- */
.hero{
  position:relative;
  z-index:2;
  padding: 16vh 9vw 4vh;
  max-width: 900px;
}
.hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-bottom:1.6rem;
}
.hero-top .eyebrow{ margin-bottom:0; }
.hero-top .cross-link{ margin-top:0; }
.hero h1{
  max-width: 16ch;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin-bottom: .6rem;
}
.hero .byline{
  font-family:'Comfortaa', sans-serif;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.72rem;
  color: var(--seal);
  margin: 0 0 1.6rem;
}
.hero .lede{ margin-top:.6rem; font-size:1.12rem; }

.cross-link{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin-top:1.6rem;
  padding:.7rem 1.3rem;
  border:1px solid var(--seal);
  border-radius:999px;
  font-family:'Comfortaa', sans-serif;
  font-weight:600;
  font-size:.85rem;
  color: var(--seal);
  transition: background .25s ease, color .25s ease;
}
.cross-link:hover{ background: var(--seal); color: var(--paper); }
.cross-link-arrow{ transition: transform .25s ease; }
.cross-link:hover .cross-link-arrow{ transform: translateX(3px); }

.toc-wrap{
  position:relative;
  z-index:2;
  padding: 1.5rem 9vw 8vh;
  max-width: 900px;
}
.toc{
  list-style:none;
  margin:0;
  padding:0;
}
.toc li{ border-top: 1px dashed var(--hair); }
.toc li:last-child{ border-bottom: 1px dashed var(--hair); }
.toc a{
  display:flex;
  align-items:baseline;
  gap:1.4rem;
  padding: 1.15rem .2rem;
  transition: padding-left .25s ease, color .25s ease;
}
.toc a:hover{ padding-left: .9rem; color: var(--seal); }
.toc .toc-num{
  font-family:'Bree Serif', serif;
  font-size:1rem;
  color: var(--seal);
  min-width:2ch;
  opacity:.9;
}
.toc .toc-title{
  font-family:'Bree Serif', serif;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight:400;
  color: var(--ink);
}
.toc a:hover .toc-title{ color: var(--seal); }
.toc .toc-arrow{
  margin-left:auto;
  font-family:'Bree Serif', serif;
  color: var(--wash);
  opacity:0;
  transform: translateX(-6px);
  transition: opacity .25s ease, transform .25s ease;
}
.toc a:hover .toc-arrow{ opacity:1; transform:translateX(0); color:var(--seal); }

.footline{
  position:relative; z-index:2;
  padding: 0 9vw 2vh;
  max-width:900px;
  font-family:'Comfortaa', sans-serif;
  font-size:1.15rem;
  font-weight:700;
  color: var(--ink);
}
.footline-credit{
  position:relative; z-index:2;
  padding: 0 9vw 8vh;
  max-width:900px;
  font-family:'Comfortaa', sans-serif;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.62rem;
  color: var(--wash);
  opacity:.8;
}