@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/inter-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Mono";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-italic.woff2) format("woff2")}

/* Palette: Kundalino kit v2.0 (D2) + alba (D6), ratified 4.11.2026 */
:root{
  --night:#0E1A2B; --shala:#16263D; --line:#2E4A6B; --celeste:#A9D8F2; --light:#F4F1EA; --alba:#FFE2C6;
  --bg:var(--night); --glow:transparent; --dot:var(--light);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --m:clamp(20px,6vw,96px); --gut:clamp(12px,2vw,28px);
  --ease:cubic-bezier(.4,0,.2,1); --slow:cubic-bezier(.16,1,.3,1);
  --hair:1px solid rgba(46,74,107,.7);
}
html[data-phase="rest"]{--bg:#0B1524;--glow:rgba(169,216,242,.05);--dot:var(--celeste)}
html[data-phase="dawn"]{--bg:var(--night);--glow:rgba(255,226,198,.11);--dot:var(--alba)}
html[data-phase="awake"]{--bg:#122136;--glow:rgba(244,241,234,.08);--dot:var(--light)}
html[data-phase="dream"]{--bg:var(--night);--glow:rgba(169,216,242,.09);--dot:var(--light)}

*{box-sizing:border-box}
html{background:var(--bg);transition:background-color 1.8s var(--ease)}
body{margin:0;color:var(--light);font-family:var(--sans);font-weight:300;font-size:18px;line-height:1.55;
  font-feature-settings:"kern","liga","calt";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:radial-gradient(90% 60% at 64% 18%,var(--glow),transparent 70%) no-repeat;min-height:100vh}
a{color:var(--celeste);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s}
a:hover,a:focus-visible{border-color:var(--celeste)}
:focus-visible{outline:2px solid var(--celeste);outline-offset:4px;border-radius:2px}
p{margin:0 0 1em;text-wrap:pretty}
.mono{font-family:var(--mono);font-size:13px;line-height:1.5;letter-spacing:.03em;color:var(--celeste);font-feature-settings:"tnum"}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:var(--shala);padding:8px 12px;z-index:9}

/* the grid: twelve columns, flush left, ragged right */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:0 var(--m);max-width:1520px;margin:0 auto}
.lab{grid-column:2/5}
.body{grid-column:5/12}

/* the spine: attention rises while you read */
.spine{position:fixed;left:calc(var(--m) * .45);top:14vh;bottom:16vh;width:1px;background:linear-gradient(to top,rgba(169,216,242,.3),rgba(169,216,242,.05));z-index:2;pointer-events:none}
.spine .bead{position:absolute;left:-4px;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--dot);box-shadow:0 0 14px 4px rgba(244,241,234,.22);transition:background 1.6s var(--ease);top:100%}
.spine svg{position:absolute;left:-14px;bottom:-40px;width:29px;height:29px;overflow:visible}
.spine path{fill:none;stroke:var(--celeste);stroke-width:1;opacity:.6}

/* hero */
.hero{min-height:100vh;min-height:100svh;grid-template-rows:auto 1fr auto auto;padding-top:28px;padding-bottom:8vh}
.meta{grid-column:2/13;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));column-gap:var(--gut);align-items:baseline;border-bottom:var(--hair);padding-bottom:12px}
.meta > *{margin:0}
.meta .m1{grid-column:1/4}.meta .m2{grid-column:4/8}.meta .m3{grid-column:8/12}
.meta button{all:unset;cursor:pointer;color:var(--celeste);border-bottom:1px dashed var(--line)}
.meta button:focus-visible{outline:2px solid var(--celeste);outline-offset:3px}
.stage{grid-column:2/13;align-self:end;margin:12vh 0 0}
.word{width:100%;max-width:1180px;height:auto;display:block;overflow:visible;margin-left:-1.4%}
.word .letters{fill:var(--celeste)}
.word .spiral{fill:none;stroke:var(--celeste);stroke-width:1.1;opacity:.24;vector-effect:non-scaling-stroke}
.word .mover{transition:transform 2.6s var(--slow)}
.word .dot{fill:var(--dot);transition:fill 1.6s var(--ease),opacity 1.6s var(--ease)}
.word .halo{transform-box:fill-box;transform-origin:center;animation:breathe 7s ease-in-out infinite;transition:opacity 1.6s var(--ease)}
@keyframes breathe{0%,100%{opacity:.6;transform:scale(.86)}50%{opacity:1;transform:scale(1.1)}}
.word .ring{fill:none;stroke:var(--light);stroke-width:2.4;stroke-dasharray:1.1 5.5;stroke-linecap:round;opacity:0;transition:opacity 1.6s var(--ease)}
html[data-phase="dream"] .word .ring{opacity:1}
html[data-phase="dream"] .word .dot{opacity:0}
html[data-phase="rest"] .word .halo{opacity:0;animation:none}
.dotbtn{cursor:pointer}
.tag{grid-column:5/12;font-size:clamp(26px,3.6vw,48px);line-height:1.12;letter-spacing:-.018em;margin:5vh 0 0;text-wrap:balance}
.cue{grid-column:5/12;margin:22px 0 0}

/* sections */
section{padding:clamp(72px,11vw,160px) 0 0}
.rule{grid-column:2/13;border-top:var(--hair);margin-bottom:28px}
.lab .n{display:block;color:var(--light);margin-bottom:4px}
.h{font-size:clamp(38px,5.6vw,80px);line-height:1.02;letter-spacing:-.028em;font-weight:300;margin:0 0 .55em;text-wrap:balance}
.lead{font-size:clamp(21px,2.3vw,28px);line-height:1.38;letter-spacing:-.01em;max-width:30ch}
.measure{max-width:62ch}

.phases{grid-column:2/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);margin:36px 0 0;padding:0;list-style:none}
.phases li{margin:0;display:flex}
.phases button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;height:100%;padding:18px 0 8px;border-top:1px solid var(--line);transition:border-color .4s}
.phases button:hover{border-top-color:var(--celeste)}
.phases button[aria-pressed="true"]{border-top-color:var(--light)}
.phases button:focus-visible{outline:2px solid var(--celeste);outline-offset:6px}
.phases svg{width:64px;height:64px;display:block;margin-bottom:18px;border-radius:50%}
.phases b{display:block;font-weight:300;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.02em;line-height:1.05}
.phases .mono{display:block;margin:8px 0 10px}
.phases .t{display:block;font-size:16px;line-height:1.45;max-width:22ch}
.program{grid-column:5/12;margin-top:36px}

.pages{grid-column:5/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gut);list-style:none;margin:8px 0 0;padding:0}
.pages li{border-top:1px solid var(--line);padding-top:16px}
.pages .mono{display:block;margin-bottom:10px}
.pages b{display:block;font-weight:400;font-size:22px;letter-spacing:-.01em;margin-bottom:8px}
.pages .t{display:block;font-size:16px;line-height:1.5}
.soon{grid-column:5/12;margin-top:28px}

.ety{grid-column:5/13;margin:8px 0 34px;border-collapse:collapse;width:100%}
.ety td{border-top:1px solid var(--line);padding:14px 0 12px;vertical-align:baseline}
.ety td:first-child{font-size:clamp(28px,3.4vw,46px);letter-spacing:-.02em;width:46%;line-height:1.1}
.ety tr:last-child td:first-child{color:var(--celeste)}
.ety td.mono{padding-left:var(--gut)}

.plain{list-style:none;margin:0;padding:0}
.plain li{font-size:clamp(21px,2.3vw,28px);line-height:1.3;letter-spacing:-.01em;padding:12px 0;border-top:1px solid var(--line)}
.plain li[hidden]{display:none}
.plain li:first-child{border-top:0;padding-top:0}

.colophon{grid-column:5/12;max-width:66ch}
footer{padding:clamp(72px,10vw,140px) 0 64px}
details summary{cursor:pointer;list-style:none;display:inline-block;border-bottom:1px dashed var(--line)}
details summary::-webkit-details-marker{display:none}
details[open] summary{margin-bottom:12px}
details p{font-family:var(--sans);font-size:15px;letter-spacing:0;color:var(--light);max-width:62ch}

@media (max-width:860px){
  body{font-size:17px}
  .lab,.body,.tag,.cue,.program,.pages,.ety,.soon,.colophon,.stage,.meta,.rule,.phases{grid-column:1/-1}
  .lab{margin-bottom:18px}
  .meta{grid-template-columns:1fr;row-gap:4px}.meta .m1,.meta .m2,.meta .m3{grid-column:1/-1}
  .phases{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .pages{grid-template-columns:1fr;row-gap:22px}
  .ety td:first-child{width:52%}
  .spine{left:8px}
  .spine svg{width:15px;height:15px;left:-7px;bottom:-26px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* --- v0.3: shared header for inner pages, notebook ------------------------------------ */
.top{padding-top:28px}
.top .meta a{border:0}
.mini{display:block;width:clamp(150px,18vw,220px);margin:8vh 0 0}
.mini .word{margin-left:-3%}
.crumb{grid-column:2/13;margin:18px 0 0}
.note-h{grid-column:5/12;font-size:clamp(40px,6.2vw,92px);line-height:1;letter-spacing:-.03em;font-weight:300;margin:6vh 0 .35em;text-wrap:balance}
.note-meta{grid-column:5/12;display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 6vh}
.note-glyph{grid-column:2/5;align-self:start;margin-top:6vh}
.note-glyph svg{width:clamp(56px,6vw,88px);height:auto;border-radius:50%;display:block}
.note-body{grid-column:5/11;max-width:62ch}
.note-body h3{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--celeste);margin:2.4em 0 .8em}
.note-body ol{padding-left:1.4em;margin:0 0 1em}.note-body ol li{margin:0 0 .5em}
.note-body .limit{border-left:2px solid var(--line);padding-left:16px}
.sources{grid-column:5/11;list-style:none;margin:28px 0 0;padding:0;max-width:66ch}
.sources li{border-top:1px solid var(--line);padding:10px 0}
.pager{grid-column:2/13;display:flex;justify-content:space-between;gap:20px;border-top:var(--hair);margin-top:72px;padding-top:16px}
.toc{grid-column:2/13;width:100%;border-collapse:collapse;margin-top:12px}
.toc th{font-family:var(--mono);font-weight:400;font-size:13px;color:var(--celeste);text-align:left;padding:0 0 10px;border-bottom:var(--hair)}
.toc td{padding:18px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.toc td.n{font-family:var(--mono);font-size:13px;color:var(--celeste);width:12%}
.toc td.t{font-size:clamp(22px,2.6vw,34px);letter-spacing:-.015em;line-height:1.15}
.toc td.t a{color:var(--light);border:0}.toc td.t a:hover{color:var(--celeste)}
.toc td.r{font-family:var(--mono);font-size:13px;color:var(--celeste);width:22%}
.toc svg{width:30px;height:30px;border-radius:50%;vertical-align:middle}
.toc td.g{width:6%}
.notes-links{grid-column:5/12;list-style:none;margin:28px 0 0;padding:0}
.notes-links li{border-top:1px solid var(--line);padding:12px 0;font-size:clamp(19px,2vw,24px)}
.notes-links a{color:var(--light);border:0}.notes-links a:hover{color:var(--celeste)}
.notes-links .mono{margin-right:14px}
.lost{grid-column:5/12;margin-top:10vh}
@media (max-width:860px){
  .note-h,.note-meta,.note-glyph,.note-body,.sources,.pager,.toc,.notes-links,.crumb,.lost{grid-column:1/-1}
  .note-glyph{margin-top:5vh}.note-h{margin-top:18px}
  .toc td.r,.toc th.r{display:none}
}
/* proposal K05: in "period" mode the coil rests at the full stop */
html[data-mark="period"][data-phase="rest"] .word .spiral{opacity:0}
html[data-mark="period"][data-phase="rest"] .word .dot{fill:var(--celeste)}
/* v0.3 fix: .grid resets padding; restore vertical rhythm */
section.grid{padding-top:clamp(72px,11vw,160px)}
article.grid{padding-top:4vh}
footer.grid{padding-top:clamp(72px,10vw,140px);padding-bottom:64px}
header.top{padding-top:28px}

/* v0.4 candidate: ripple and sound toggle */
.word .ripple{fill:none;stroke:var(--light);stroke-width:1.2;vector-effect:non-scaling-stroke}
.meta #sound{all:unset;cursor:pointer;color:var(--celeste);border-bottom:1px dashed var(--line)}
.meta #sound[aria-pressed="true"]{color:var(--light);border-bottom-color:var(--light)}
.meta #sound:focus-visible{outline:2px solid var(--celeste);outline-offset:3px}
.eco td:first-child{font-size:clamp(22px,2.6vw,34px);width:34%}
.eco a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.eco a:hover,.eco a:focus-visible{border-bottom-color:var(--celeste)}
.eco tr:last-child td:first-child{color:var(--light)}