/* ============================================================
   PHĪME v5 · More-Than-Science · Complexity Ecology
   SS Pass · MEANDER · Scroll-materialization system
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --v0:#F5ECD7;--v1:#EAD9BE;--v2:#DFC9A8;
  --s0:#1A1410;--s1:#2A2318;--s2:#3D2B1F;
  --ink:#8A6840;--ink2:#A87D5A;--ink3:#C4A882;
  --myc:#4A7C59;--vio:#6B4E8A;--teal:#2E7D8A;--amb:#C4892A;
  --serif:'EB Garamond',Georgia,serif;
  --mono:'Courier Prime','Courier New',monospace;
  --sans:Arial,Helvetica,sans-serif;
  --max-w:1080px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:17px;scroll-behavior:smooth;background:#F5ECD7;}
body{font-family:Arial,Helvetica,sans-serif;font-size:1rem;line-height:1.68;color:#3D2B1F;background:#F5ECD7;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;padding:0;margin:0;}
svg{display:block;overflow:visible;}

/* Vellum grain overlay */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  opacity:.5;}

/* ── SPINE ── */
.spine{position:fixed;top:0;left:0;width:80px;height:100vh;background:#1A1410;z-index:200;
  display:flex;flex-direction:column;align-items:center;padding:1.4rem 0 0;
  border-right:1px solid rgba(138,104,64,.18);overflow:hidden;}

.spine-stamp{display:flex;align-items:center;justify-content:center;width:50px;height:50px;
  border:1.5px solid rgba(196,160,130,.45);border-radius:2px;overflow:hidden;
  background-image:url('/logo.jpg');
  background-size:contain;background-repeat:no-repeat;background-position:center;
  background-color:#F5ECD7;flex-shrink:0;margin-bottom:1.8rem;
  animation:ps 4s ease-in-out infinite;}
@keyframes ps{0%,100%{box-shadow:0 0 0 0 rgba(196,160,130,0);}50%{box-shadow:0 0 0 4px rgba(196,160,130,.18);}}


.spine-rule{width:30px;height:1px;background:rgba(138,104,64,.25);flex-shrink:0;margin-bottom:1.6rem;}
.spine-nav{display:flex;flex-direction:column;align-items:center;gap:1.8rem;flex:1;}
.spine-link{writing-mode:vertical-rl;transform:rotate(180deg);font-family:Arial,sans-serif;
  font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,236,215,.3);transition:color .25s;white-space:nowrap;}
.spine-link:hover{color:rgba(245,236,215,.7);}
.spine-link.active{color:#C4892A;}
.spine-accent{width:100%;height:4px;display:flex;flex-shrink:0;margin-top:auto;}
.spine-accent .a1{flex:2;background:#2E7D8A;}
.spine-accent .a2{flex:1;background:#C4892A;}
.spine-accent .a3{flex:1;background:#6B4E8A;}

/* ── MAIN ── */
main{margin-left:80px;background:#F5ECD7;min-height:100vh;}

/* ── SECTIONS ── */
.folio{padding:7rem 7%;background:#F5ECD7;}
.folio-sm{padding:3.5rem 7%;background:#F5ECD7;}
.folio-lg{padding:9rem 7% 7rem;background:#F5ECD7;}
.folio-dark{padding:7rem 7%;background:#1A1410;color:#F5ECD7;}
.folio-mid{padding:6rem 7%;background:#EAD9BE;}
.folio-void{padding:9rem 7%;background:#0F0C08;position:relative;overflow:hidden;}
.folio-void::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 50%,rgba(46,125,138,.07) 0%,transparent 60%),
             radial-gradient(ellipse at 80% 30%,rgba(107,78,138,.055) 0%,transparent 60%);
  pointer-events:none;}
.inner{max-width:1080px;margin:0 auto;width:100%;}

.folio-dark .display-xl,.folio-dark .display-lg,.folio-dark .display-md,.folio-dark h1,.folio-dark h2,.folio-dark h3{color:#F5ECD7;}
.folio-dark .eyebrow{color:rgba(245,236,215,.36);}
.folio-dark .italic-lead{color:rgba(245,236,215,.62);}
.folio-dark .body-copy{color:rgba(245,236,215,.57);}

/* ── TYPE ── */
.display-xl{font-family:'EB Garamond',Georgia,serif;font-size:clamp(2.6rem,5vw,4.8rem);font-weight:400;line-height:1.06;letter-spacing:-.01em;color:#1A1410;}
.display-lg{font-family:'EB Garamond',Georgia,serif;font-size:clamp(1.9rem,3.6vw,3.2rem);font-weight:400;line-height:1.1;color:#1A1410;}
.display-md{font-family:'EB Garamond',Georgia,serif;font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:400;line-height:1.2;color:#1A1410;}
.display-sm{font-family:'EB Garamond',Georgia,serif;font-size:clamp(1.05rem,1.6vw,1.45rem);font-weight:400;color:#1A1410;}
.eyebrow{font-family:Arial,sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#8A6840;}
.italic-lead{font-family:'EB Garamond',Georgia,serif;font-style:italic;font-size:clamp(1rem,1.7vw,1.28rem);line-height:1.58;color:#3D2B1F;}
.body-copy{font-family:Arial,sans-serif;font-size:.92rem;line-height:1.75;color:#3D2B1F;}
.fig-caption{font-family:'EB Garamond',Georgia,serif;font-style:italic;font-size:.74rem;color:#8A6840;text-align:center;margin-top:1.2rem;}

/* ── RULES ── */
.rule{border:none;border-top:1px solid rgba(138,104,64,.22);margin:2rem 0;}
.rule-dark{border:none;border-top:1px solid rgba(245,236,215,.14);margin:2rem 0;}
.ra{border:none;border-top:2px solid;margin:0 0 1.8rem;width:38px;}
.ra.t{border-color:#2E7D8A;}.ra.v{border-color:#6B4E8A;}.ra.m{border-color:#4A7C59;}.ra.a{border-color:#C4892A;}
.phime-stripe{display:flex;height:3px;}
.phime-stripe .s1{flex:2;background:#2E7D8A;}.phime-stripe .s2{flex:1;background:#C4892A;}.phime-stripe .s3{flex:1;background:#6B4E8A;}

/* ── ILLUS ── */
.illus{overflow:hidden;border-top:1px solid rgba(138,104,64,.16);border-bottom:1px solid rgba(138,104,64,.16);background:#F5ECD7;}
.illus.mid{background:#EAD9BE;}
.illus-pad{padding:4rem 7%;}

/* ── GRIDS ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;}
.two-col-r{display:grid;grid-template-columns:1.1fr .9fr;gap:5rem;align-items:start;}
.two-col-l{display:grid;grid-template-columns:.9fr 1.1fr;gap:5rem;align-items:start;}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;}
.four-col{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;}

/* ── CARDS ── */
.card{padding:1.8rem 0;border-top:1px solid rgba(138,104,64,.2);}
.card.vm{border-top:2px solid #4A7C59;}.card.vv{border-top:2px solid #6B4E8A;}
.card.vt{border-top:2px solid #2E7D8A;}.card.va{border-top:2px solid #C4892A;}
.card-label{font-family:Arial,sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8A6840;margin-bottom:.55rem;}
.card.vm .card-label{color:#4A7C59;}.card.vv .card-label{color:#6B4E8A;}
.card.vt .card-label{color:#2E7D8A;}.card.va .card-label{color:#C4892A;}
.card-title{font-family:'EB Garamond',Georgia,serif;font-size:1.35rem;font-weight:400;margin-bottom:.4rem;line-height:1.2;color:#1A1410;}
.card-body{font-family:Arial,sans-serif;font-size:.86rem;line-height:1.7;color:#3D2B1F;}

/* ── LINEAGE ── */
.lineage{padding:2.2rem;border-left:3px solid;margin-bottom:1.6rem;}
.lineage.lv{border-color:#6B4E8A;background:rgba(107,78,138,.05);}
.lineage.lt{border-color:#2E7D8A;background:rgba(46,125,138,.05);}
.lineage-code{font-family:Arial,sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.5rem;}
.lineage.lv .lineage-code{color:#6B4E8A;}.lineage.lt .lineage-code{color:#2E7D8A;}
.lineage-title{font-family:'EB Garamond',Georgia,serif;font-size:1.4rem;font-weight:400;margin-bottom:.7rem;}
.lineage-body{font-family:Arial,sans-serif;font-size:.88rem;line-height:1.72;color:#3D2B1F;}

/* ── GRAFF SEED ── */
.graff-seed{font-family:'EB Garamond',Georgia,serif;font-style:italic;font-size:clamp(1rem,1.9vw,1.4rem);line-height:1.6;color:#3D2B1F;border-left:3px solid #C4892A;padding-left:1.6rem;margin:2rem 0;}

/* ── STAT ── */
.stat-xl{font-family:'EB Garamond',Georgia,serif;font-size:clamp(4.5rem,11vw,8.5rem);font-weight:400;color:#C4892A;line-height:1;}

/* ── STAMP ── */
.stamp-xl{display:block;width:110px;height:110px;border:2px solid rgba(46,61,100,.42);border-radius:3px;
  background-image:url('/logo.jpg');
  background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#F5ECD7;padding:4px;}
.stamp-xl img{display:none;}
.stamp-xl.center{margin:0 auto 2.5rem;}

/* ── GALLERY ── */
.gallery{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:360px 360px;gap:3px;overflow:hidden;}
.gallery .ph{overflow:hidden;background:#3D2B1F;}
.gallery .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s ease;}
.gallery .ph:hover img{transform:scale(1.025);}
.gallery .ph-tall{grid-row:1/3;}
.gallery-row{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;overflow:hidden;}
.gallery-row .ph{overflow:hidden;height:260px;background:#3D2B1F;}
.gallery-row .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s ease;}
.gallery-row .ph:hover img{transform:scale(1.025);}
.photo-credit{font-family:Arial,sans-serif;font-size:.6rem;color:#8A6840;letter-spacing:.06em;text-align:right;padding:.5rem 7%;background:#F5ECD7;}

/* ── LOOP / RUNG ── */
.loop-item{padding:1.2rem 1.6rem;border-left:2px solid;margin-bottom:.6rem;background:rgba(0,0,0,.02);}
.loop-item.p1{border-left-color:#C4892A;}.loop-item.p2{border-left-color:#2E7D8A;}
.loop-item.p3{border-left-color:#6B4E8A;}.loop-item.p4{border-left-color:#4A7C59;}
.loop-item .li-ey{font-family:Arial,sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.3rem;}
.loop-item.p1 .li-ey{color:#C4892A;}.loop-item.p2 .li-ey{color:#2E7D8A;}
.loop-item.p3 .li-ey{color:#6B4E8A;}.loop-item.p4 .li-ey{color:#4A7C59;}
.loop-item .li-t{font-family:'EB Garamond',Georgia,serif;font-size:1.2rem;color:#1A1410;}
.loop-item .li-b{font-family:Arial,sans-serif;font-size:.82rem;color:#3D2B1F;line-height:1.65;margin-top:.2rem;}
.rung{padding:1.8rem 0;border-top:1px solid rgba(138,104,64,.18);display:grid;grid-template-columns:130px 1fr;gap:2rem;align-items:start;}
.rung-id{font-family:Arial,sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#2E7D8A;}
.rung-title{font-family:'EB Garamond',Georgia,serif;font-size:1.3rem;font-weight:400;margin-bottom:.35rem;color:#1A1410;}
.rung-body{font-family:Arial,sans-serif;font-size:.86rem;line-height:1.68;color:#3D2B1F;}

/* ── FOOTER ── */
.site-footer{background:#1A1410;padding:3rem 7%;}
.site-footer .inner{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:2rem;}
.footer-wm{font-family:'EB Garamond',Georgia,serif;font-size:.95rem;color:rgba(245,236,215,.7);letter-spacing:.08em;}
.footer-loc{font-family:Arial,sans-serif;font-size:.67rem;color:rgba(245,236,215,.33);margin-top:.25rem;line-height:1.5;}
.site-footer nav a{font-family:Arial,sans-serif;font-size:.67rem;color:rgba(245,236,215,.36);margin-left:1.3rem;transition:color .2s;}
.site-footer nav a:hover{color:rgba(245,236,215,.8);}

/* ═══════════════════════════════════════════════════
   SCROLL MATERIALISATION SYSTEM
   ═══════════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(52px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
.rvl{opacity:0;transform:translateX(-52px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
.rvr{opacity:0;transform:translateX(52px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
.rvs{opacity:0;transform:scale(.88);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
.rvx{opacity:0;transition:opacity 1.4s cubic-bezier(.16,1,.3,1);}
.rv.in,.rvl.in,.rvr.in,.rvs.in,.rvx.in{opacity:1;transform:none;}

/* stagger */
.d1{transition-delay:.09s;}.d2{transition-delay:.18s;}.d3{transition-delay:.27s;}
.d4{transition-delay:.36s;}.d5{transition-delay:.45s;}.d6{transition-delay:.54s;}
.d7{transition-delay:.63s;}.d8{transition-delay:.72s;}

/* SVG paths draw in */
.pd{stroke-dasharray:2000;stroke-dashoffset:2000;transition:stroke-dashoffset 2.2s cubic-bezier(.16,1,.3,1);}
.pd-fast{stroke-dasharray:2000;stroke-dashoffset:2000;transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1);}

/* Node pop */
.ni{opacity:0;transform:scale(0);transition:opacity .45s,transform .45s cubic-bezier(.34,1.56,.64,1);}
.ni.in{opacity:1;transform:scale(1);}

/* Curtain photo reveal */
.cu{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1);}
.cu.in{clip-path:inset(0 0% 0 0);}

/* Manifesto lines */
.ml{opacity:0;transform:translateX(-28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
.ml.in{opacity:1;transform:none;}

/* ═══════════════════════════════════════════════════
   MANIFESTO / MORE-THAN-SCIENCE SECTION
   ═══════════════════════════════════════════════════ */
.manifesto{padding:10rem 7% 8rem;background:#0F0C08;position:relative;overflow:hidden;}
.manifesto::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 15% 50%,rgba(46,125,138,.07) 0%,transparent 55%),
             radial-gradient(ellipse at 85% 25%,rgba(107,78,138,.055) 0%,transparent 55%);
  pointer-events:none;}
.m-line{font-family:'EB Garamond',Georgia,serif;font-size:clamp(1.55rem,3.2vw,2.8rem);font-weight:400;line-height:1.25;color:#F5ECD7;margin-bottom:.15rem;}
.m-line.ind{padding-left:11%;}
.m-line.ind2{padding-left:22%;}
.m-line.huge{font-size:clamp(2.2rem,4.8vw,4.6rem);line-height:1;margin-bottom:.4rem;}
.m-line.dim{color:rgba(245,236,215,.35);font-size:clamp(.85rem,1.4vw,1.15rem);}
.m-line.acc{color:#C4892A;}
.m-line.acc-t{color:#2E7D8A;}
.m-line.acc-v{color:#6B4E8A;}
.m-line.acc-m{color:#4A7C59;}

/* ═══════════════════════════════════════════════════
   COMPLEXITY SCIENCE NODES
   ═══════════════════════════════════════════════════ */
.cx-node{padding:2.5rem;border:1px solid rgba(138,104,64,.22);background:#F5ECD7;position:relative;}
.cx-node::before{content:attr(data-label);position:absolute;top:-.65rem;left:1.4rem;
  font-family:'Courier Prime','Courier New',monospace;font-size:.58rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;background:#F5ECD7;padding:0 .5rem;color:#8A6840;}
.cx-title{font-family:'EB Garamond',Georgia,serif;font-size:1.38rem;font-weight:400;margin-bottom:.55rem;color:#1A1410;}
.cx-body{font-family:Arial,sans-serif;font-size:.84rem;line-height:1.72;color:#3D2B1F;}

/* ═══════════════════════════════════════════════════
   HORIZONTAL CHAIN SCROLL
   ═══════════════════════════════════════════════════ */
.chain-wrap{overflow-x:auto;overflow-y:hidden;background:#0F0C08;padding:5rem 7%;scrollbar-width:none;cursor:grab;user-select:none;}
.chain-wrap::-webkit-scrollbar{display:none;}
.chain-inner{display:flex;gap:0;width:max-content;align-items:stretch;}
.chain-node{width:290px;flex-shrink:0;padding:3rem 3rem 3rem 2rem;border-right:1px solid rgba(138,104,64,.18);}
.chain-node:last-child{border-right:none;}
.chain-num{font-family:'Courier Prime','Courier New',monospace;font-size:.6rem;color:rgba(245,236,215,.28);letter-spacing:.2em;margin-bottom:.9rem;}
.chain-word{font-family:'EB Garamond',Georgia,serif;font-size:3rem;font-weight:400;line-height:1;margin-bottom:.4rem;}
.chain-tag{font-family:Arial,sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.6rem;}
.chain-body{font-family:Arial,sans-serif;font-size:.78rem;color:rgba(245,236,215,.48);line-height:1.65;}
.chain-arrow{padding:3rem 2rem;display:flex;align-items:center;color:rgba(138,104,64,.4);font-size:1.6rem;flex-shrink:0;}
.chain-hint{font-family:'Courier Prime','Courier New',monospace;font-size:.58rem;color:rgba(245,236,215,.22);letter-spacing:.14em;text-align:right;padding:.7rem 7%;background:#0F0C08;}

/* ═══════════════════════════════════════════════════
   NETWORK CANVAS SECTION
   ═══════════════════════════════════════════════════ */
.network-sec{position:relative;background:#1A1410;overflow:hidden;min-height:460px;}
#nc{position:absolute;inset:0;width:100%;height:100%;}
.network-content{position:relative;z-index:2;padding:6rem 7%;}

/* ═══════════════════════════════════════════════════
   PULL QUOTE
   ═══════════════════════════════════════════════════ */
.pull-q{padding:5rem 7%;background:#F5ECD7;border-top:3px solid #C4892A;border-bottom:3px solid #C4892A;text-align:center;}
.pull-q p{font-family:'EB Garamond',Georgia,serif;font-style:italic;font-size:clamp(1.35rem,2.8vw,2.3rem);font-weight:400;line-height:1.4;color:#1A1410;max-width:820px;margin:0 auto;}

/* ═══════════════════════════════════════════════════
   METAPRAXIS LATTICE NODES
   ═══════════════════════════════════════════════════ */
.mp-node{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:box-shadow .4s ease;}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .spine{width:100%;height:52px;flex-direction:row;padding:0 5%;justify-content:space-between;align-items:center;}
  .spine-stamp{width:36px;height:36px;margin-bottom:0;}
  .spine-rule{display:none;}
  .spine-nav{flex-direction:row;gap:1.2rem;flex:unset;}
  .spine-link{writing-mode:horizontal-tb;transform:none;font-size:.58rem;}
  .spine-accent{display:none;}
  main{margin-left:0;padding-top:52px;}
  .two-col,.two-col-r,.two-col-l,.three-col,.four-col{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr;grid-template-rows:auto;}
  .gallery .ph{height:240px;}.gallery .ph-tall{grid-row:auto;height:300px;}
  .gallery-row{grid-template-columns:1fr;}.gallery-row .ph{height:220px;}
  .rung{grid-template-columns:1fr;gap:.3rem;}
  .folio,.folio-sm,.folio-lg,.folio-dark,.folio-mid,.folio-void,.manifesto,.pull-q{padding-left:5%;padding-right:5%;}
  .illus-pad,.photo-credit{padding-left:5%;padding-right:5%;}
  .chain-wrap{padding:3rem 5%;}
  .network-sec{min-height:320px;}
  .site-footer{padding:2.5rem 5%;}
  .site-footer .inner{flex-direction:column;align-items:flex-start;}
  .site-footer nav a{margin-left:0;margin-right:1.1rem;}
  .m-line.ind{padding-left:5%;}.m-line.ind2{padding-left:10%;}
}
@media(max-width:600px){html{font-size:16px;}}

/* ── Card colour variants ── */
.card.v-myc  { border-top-color: #4A7C59; }
.card.v-teal { border-top-color: #2E7D8A; }
.card.v-vio  { border-top-color: #6B4E8A; }
.card.v-amb  { border-top-color: #C4892A; }

/* ── Rule accent — coloured left-rule ── */
.rule-accent {
  width: 32px; height: 3px;
  margin-bottom: 2rem;
}
.rule-accent.teal { background-color: #2E7D8A; }
.rule-accent.myc  { background-color: #4A7C59; }
.rule-accent.amb  { background-color: #C4892A; }
.rule-accent.vio  { background-color: #6B4E8A; }

/* ============================================================
   PHĪME wordmark · custom macron rendering
   ──────────────────────────────────────────────────────────
   EB Garamond's native Ī glyph renders the macron thin and at
   approximately the H-bar height, creating optical confusion
   with the H's middle stroke at large sizes. These rules let
   us draw a precisely-positioned macron bar above the I for
   any wordmark element that wraps its "I" in <span class="ph-i">.
   ============================================================ */

/* Screen-reader-only text — preserves the full "PHĪME" string for
   assistive tech while the visible markup uses custom-styled letters. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Custom macron bar over the I.
   Uses currentColor so the macron inherits whatever colour the
   surrounding wordmark is set to (white in hero, ink in footer). */
.ph-i {
  position: relative;
  display: inline-block;
}
.ph-i::before {
  content: "";
  position: absolute;
  top: -0.04em;
  left: 50%;
  width: 0.5em;
  height: 0.08em;
  background: currentColor;
  transform: translateX(-50%);
  border-radius: 0.5px;
}

/* ── A11Y · Skip-to-content link ──
   Visually hidden until focused; appears top-left for keyboard users
   bypassing the spine nav. Same class name as evidence-chain.css for
   consistency. */
.ec-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #1A1410;
  color: #F5ECD7;
  padding: .8rem 1.2rem;
  font-family: Arial, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 9999;
}
.ec-skip:focus,
.ec-skip:focus-visible {
  left: 1rem;
  top: 1rem;
  outline: 1px solid #C4892A;
  outline-offset: 2px;
}

/* ── SPINE NAV · responsive overflow handling for 7-item nav ── */

/* Desktop / tall screens: vertical nav. If 7 items don't fit in the
   viewport height, allow internal scroll instead of clipping. */
.spine { overflow-y: auto; overflow-x: hidden; }
.spine::-webkit-scrollbar { display: none; }
.spine { scrollbar-width: none; }

/* Mobile / horizontal top-bar nav: allow horizontal swipe-scroll when the
   labels don't fit on narrow viewports. Items never wrap. */
@media (max-width: 900px) {
  .spine-nav {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .spine-nav::-webkit-scrollbar { display: none; }
  .spine-link {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: .56rem;
    letter-spacing: .18em;
  }
}

@media (max-width: 480px) {
  .spine { padding: 0 3%; }
  .spine-nav { gap: .95rem; }
  .spine-link { font-size: .52rem; letter-spacing: .14em; }
}

/* ── "Why we say this" — collapsible citation drawer ──
   Native <details>/<summary>, hidden by default, opens on click.
   Designed to disappear into the page unless a sceptical reader
   leans in. */
.why-drawer {
  margin-top: 1.2rem;
  font-family: Arial, sans-serif;
}
.why-drawer summary {
  cursor: pointer;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #D9A155;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding-bottom: 2px;
  border-bottom: 0.5px solid currentColor;
  list-style: none;
  transition: color .25s ease, border-color .25s ease;
  width: fit-content;
}
.why-drawer summary::-webkit-details-marker { display: none; }
.why-drawer summary::after {
  content: "↓";
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: 0;
  transition: transform .35s ease;
}
.why-drawer[open] summary::after {
  transform: rotate(180deg);
}
.why-drawer summary:hover { color: #F5E6C8; border-color: currentColor; }
.why-drawer summary:focus-visible {
  outline: 1px solid #D9A155;
  outline-offset: 2px;
}
.why-content {
  margin-top: 1.1rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border-left: 2px solid rgba(217, 161, 85, .42);
  background: rgba(245, 241, 232, .05);
  font-size: .85rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 60ch;
}
.why-content p { margin-bottom: .65rem; }
.why-content p:last-child { margin-bottom: 0; }
.why-content em { font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 1.02em; }
.why-content strong { color: var(--ink); }
.why-content a { color: #D9A155; }
.why-content a {
  color: #C4892A;
  border-bottom: 0.5px solid currentColor;
  padding-bottom: 1px;
}
.why-content a:hover { color: #1A1410; }

/* Dark sections (.folio-dark etc.) need lighter colours */
.folio-dark .why-drawer summary,
.network-sec .why-drawer summary {
  color: rgba(245, 236, 215, .55);
}
.folio-dark .why-drawer summary:hover,
.network-sec .why-drawer summary:hover {
  color: rgba(245, 236, 215, .9);
}
.folio-dark .why-content,
.network-sec .why-content {
  border-left-color: rgba(245, 236, 215, .25);
  background: rgba(245, 236, 215, .04);
  color: rgba(245, 236, 215, .72);
}
.folio-dark .why-content strong,
.network-sec .why-content strong { color: #F5ECD7; }

/* ============================================================
   THE CARDIAC · three Points-Chauds (Soil ↔ Gut ↔ Hearth)
   Scroll-driven sticky-canvas. Each stage marker (100vh) flips
   focus to one node, revealing its iti. No autoplay; the
   reader breathes the chain at their own pace.
   ============================================================ */

.cardiac {
  position: relative;
  background: var(--bg);
  border-top: 1px solid rgba(196, 168, 130, .18);
  border-bottom: 1px solid rgba(196, 168, 130, .18);
}
.cardiac-stages {
  /* Stack 3 invisible stage markers, each 100vh tall, that drive scroll
     position. The sticky canvas above them stays visible throughout. */
  position: relative;
}
.cardiac-stage {
  height: 100vh;
  pointer-events: none;
}

.cardiac-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6%;
}

.cardiac-canvas {
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 4rem;
  align-items: center;
}

.cardiac-eyebrow {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #D9A155;
  margin-bottom: 1.4rem;
}

.cardiac-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 1.6rem;
}

.cardiac-title em {
  font-style: italic;
  font-weight: 500;
  color: #E8D9B8;
}

.cardiac-lede {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 1.75vw, 1.36rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 44ch;
  margin-bottom: 2rem;
}

.cardiac-lede .gloss {
  font-style: normal;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: .72em;
  letter-spacing: .12em;
  color: #B89BD9;
  display: block;
  margin-top: .65rem;
}

.cardiac-diagram {
  width: 100%;
  height: auto;
  max-height: 64vh;
  display: block;
}

/* Default node state */
.cardiac-node-ring,
.cardiac-node-dot {
  transition: all .9s cubic-bezier(.16, 1, .3, 1);
}
.cardiac-node-ring { fill: rgba(245, 236, 215, .92); stroke: rgba(217, 161, 85, .55); stroke-width: 1; }
.cardiac-node-dot  { fill: rgba(217, 161, 85, .55); }
.cardiac-node-label {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: .28em;
  text-anchor: middle;
  fill: #D9A155;
  text-transform: uppercase;
  transition: fill .9s cubic-bezier(.16, 1, .3, 1);
}

/* Active node state — when this node's stage is in view */
.cardiac-node.is-active .cardiac-node-ring {
  fill: #1A1410;
  stroke: #C4892A;
  stroke-width: 2.5;
  r: 38;
}
.cardiac-node.is-active .cardiac-node-dot {
  fill: #C4892A;
  r: 6;
}
.cardiac-node.is-active .cardiac-node-label { fill: #C4892A; }

/* Connecting triangle edges */
.cardiac-edge {
  stroke: rgba(217, 161, 85, .42);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  fill: none;
  transition: stroke .9s, stroke-width .9s;
}
.cardiac-edge.is-warm { stroke: rgba(217, 161, 85, .85); stroke-width: 1.6; stroke-dasharray: none; }

/* Central heart */
.cardiac-heart {
  fill: rgba(217, 161, 85, .18);
  stroke: rgba(217, 161, 85, .55);
  stroke-width: .9;
  transform-origin: center;
  transform-box: fill-box;
  animation: cardiac-breath 4.2s ease-in-out infinite;
}
@keyframes cardiac-breath {
  0%, 100% { transform: scale(1);    opacity: .45; }
  50%      { transform: scale(1.18); opacity: .85; }
}
.cardiac-heart-label {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 11px;
  fill: rgba(245, 241, 232, .62);
  text-anchor: middle;
  letter-spacing: .12em;
}

/* iti — text panel, one per node, stacked, one active at a time */
.cardiac-iti-wrap {
  position: relative;
  min-height: 360px;
}
.cardiac-iti {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .65s cubic-bezier(.16, 1, .3, 1),
              transform .65s cubic-bezier(.16, 1, .3, 1);
}
.cardiac-iti.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cardiac-iti-num {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: .65rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(217, 161, 85, .9);
  margin-bottom: 1rem;
}
.cardiac-iti-h {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 1.2rem;
  max-width: 22ch;
}
.cardiac-iti-body {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 44ch;
  margin-bottom: 1.4rem;
}
.cardiac-iti-body strong { color: var(--ink); }
.cardiac-iti-particular {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #C8AED9;
  padding: .9rem 1.1rem;
  border-left: 2px solid rgba(184, 155, 217, .55);
  background: rgba(107, 78, 138, .12);
  max-width: 44ch;
}
.cardiac-iti-particular strong {
  font-style: normal;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #B89BD9;
  display: block;
  margin-bottom: .35rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cardiac-heart { animation: none; }
  .cardiac-node-ring,
  .cardiac-node-dot,
  .cardiac-iti,
  .cardiac-edge { transition: none; }
}

/* Mobile — collapse to vertical stack, no sticky */
@media (max-width: 900px) {
  .cardiac-canvas { grid-template-columns: 1fr; gap: 2.5rem; }
  .cardiac-sticky { position: relative; height: auto; padding: 4rem 6%; }
  .cardiac-stage { height: auto; min-height: 70vh; }
  .cardiac-iti-wrap { min-height: 320px; }
}

/* ============================================================
   REGISTER TOGGLE · Institutional ↔ Romance
   ──────────────────────────────────────────────────────────
   The iti iti method made interface. Default register is the
   institutional voice; one click flips the homepage into
   Movement I of Romance of Converging Currents — Cormorant
   Garamond, violet asides, three-epigraph plinth, in-place
   on the same URL. Both registers held simultaneously,
   neither stripped.
   ============================================================ */

/* The toggle — small, vellum, unobtrusive, top-right fixed */
.register-toggle {
  position: fixed;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 250;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(245, 236, 215, .72);
  background: rgba(26, 20, 16, .82);
  padding: .58rem 1rem;
  border: 1px solid rgba(196, 168, 130, .35);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.register-toggle::before { content: '◆'; color: #6B4E8A; font-size: .85rem; }
.register-toggle:hover {
  color: rgba(245, 236, 215, .98);
  border-color: rgba(196, 168, 130, .65);
  background: rgba(26, 20, 16, .92);
}
.register-toggle:focus-visible {
  outline: 1px solid #C4892A;
  outline-offset: 2px;
}

/* When Romance mode active — toggle reverses chrome */
body.is-romance .register-toggle {
  color: #4E3A6B;
  background: rgba(245, 236, 215, .92);
  border-color: rgba(107, 78, 138, .45);
}
body.is-romance .register-toggle::before { color: #C4892A; }
body.is-romance .register-toggle:hover {
  color: #1A1410;
  border-color: #6B4E8A;
}

/* Register visibility flip */
.register-romance { display: none; }
body.is-romance .register-institutional { display: none; }
body.is-romance .register-romance { display: block; }
body.is-romance { background: #E0CDAE; }

/* ── ROMANCE MODE styling ── */
.register-romance {
  max-width: 820px;
  margin: 3rem auto;
  padding: 5rem 5.5rem 4.5rem;
  background: #F5ECD7;
  box-shadow: 0 1px 0 #A87D5A,
              0 0 0 1px #EAD9BE,
              0 8px 32px rgba(26, 20, 16, .08);
  position: relative;
  font-family: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  font-size: 18px;
  line-height: 1.75;
  color: #1A1410;
}
.register-romance::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right,
    #6B4E8A 0%, #6B4E8A 18%,
    #3D2B1F 18%, #3D2B1F 38%,
    #C4892A 38%, #C4892A 50%,
    #4A7C59 50%, #4A7C59 70%,
    #2E7D8A 70%, #2E7D8A 90%,
    #6B4E8A 90%);
}

/* Masthead */
.r-masthead {
  text-align: center;
  margin-bottom: 3.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 0.5pt solid #1A1410;
  position: relative;
}
.r-masthead::after {
  content: '◆';
  position: absolute;
  bottom: -.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: #F5ECD7;
  color: #6B4E8A;
  padding: 0 .7rem;
  font-size: .9rem;
}
.r-institution {
  font-family: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  font-weight: 600;
  font-size: 2.3rem;
  letter-spacing: .35em;
  color: #1A1410;
  margin: 0 0 .5rem;
  text-indent: .35em;
}
.r-programme {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: .74rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #7B5C3E;
  margin: 0 0 2.2rem;
}
.r-title-master {
  font-family: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 2.8rem;
  line-height: 1.1;
  color: #4E3A6B;
  margin: 1.2rem 0 .7rem;
  letter-spacing: .01em;
}
.r-title-sub {
  font-family: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  font-weight: 400;
  font-size: 1.2rem;
  font-style: italic;
  color: #3D2B1F;
  margin: 0 0 1.5rem;
  letter-spacing: .04em;
}

/* Epigraphs */
.r-epigraphs {
  margin: 3rem 0 3.5rem;
  text-align: center;
}
.r-epigraph {
  font-family: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: #3D2B1F;
  margin: .9rem 0;
  line-height: 1.5;
}
.r-epigraph .attrib {
  display: block;
  font-style: normal;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6B4E8A;
  margin-top: .35rem;
}
.r-epigraphs .rule {
  width: 60px;
  height: 0.5pt;
  background: #A87D5A;
  margin: 1.4rem auto;
}

/* Movements */
.r-movement { margin: 4rem 0; }
.r-movement-marker {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #6B4E8A;
  display: block;
  margin-bottom: .5rem;
}
.r-movement-title {
  font-family: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.85rem;
  color: #1A1410;
  margin: 0 0 1.8rem;
  letter-spacing: .01em;
  line-height: 1.2;
}
.r-movement-title::before {
  content: '';
  display: block;
  width: 40px;
  height: 0.5pt;
  background: #6B4E8A;
  margin-bottom: .9rem;
}
.r-movement p {
  margin: 0 0 1.2rem;
  text-align: justify;
  hyphens: auto;
  font-family: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  font-size: 1.06rem;
  line-height: 1.75;
  color: #1A1410;
}
.r-movement p:first-of-type::first-letter {
  font-family: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  font-weight: 600;
  font-size: 3.4rem;
  float: left;
  line-height: .9;
  padding: .35rem .6rem 0 0;
  color: #4E3A6B;
}
.r-movement em.term {
  font-style: italic;
  color: #4E3A6B;
}
.r-movement strong.named {
  font-weight: 600;
  color: #3D2B1F;
}
.r-aside {
  font-family: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: #4E3A6B;
  border-left: 2px solid #6B4E8A;
  padding: .3rem 0 .3rem 1.2rem;
  margin: 1.5rem 0;
}
.r-section-rule {
  text-align: center;
  margin: 3rem 0;
  color: #A87D5A;
  letter-spacing: 1.2em;
  font-size: .8rem;
}

/* Continue-reading link */
.r-continue {
  text-align: center;
  margin: 3.5rem 0 1rem;
  padding-top: 2rem;
  border-top: 0.5pt solid #A87D5A;
}
.r-continue a {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6B4E8A;
  border-bottom: 1px solid #6B4E8A;
  padding-bottom: 2px;
}
.r-continue a:hover { color: #1A1410; border-color: #1A1410; }
.r-colophon {
  margin-top: 2rem;
  font-family: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  font-style: italic;
  font-size: .92rem;
  color: #3D2B1F;
  text-align: center;
  line-height: 1.65;
}

@media (max-width: 720px) {
  .register-romance { padding: 2.5rem 1.6rem; margin: 1rem; }
  .r-institution { font-size: 1.7rem; letter-spacing: .25em; }
  .r-title-master { font-size: 2rem; }
  .r-movement-title { font-size: 1.4rem; }
  .register-toggle { font-size: .6rem; padding: .45rem .8rem; top: .8rem; right: .8rem; }
}