@font-face{font-family:'Lora';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/lora-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/lora-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lora';font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/lora-latin-wght-italic.woff2) format('woff2')}
:root{
  --paper:#FAF6EE; --ink:#24182E; --purple:#350176; --purple-dark:#54307F; --grey:#4A3D5C;
  --orange:#E39A00; --orange-text:#8A5200; --lilac:#EFE6F7; --lilac-soft:#F5EFF9; --apricot:#FBE9D9; --line:#DDD2E6;
  --serif:'Lora','Iowan Old Style',Georgia,serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  /* colours the diagrams use */
  --cds-text-primary:var(--ink); --cds-text-secondary:var(--grey); --cds-chart-axis:#4A3D5C;
  --cds-chart-categorical-1:var(--purple); --cds-chart-categorical-2:var(--orange); --cds-chart-categorical-3:#9B4FB5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.125rem;line-height:1.7}
img{max-width:100%;height:auto}
a{color:var(--purple);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--purple-dark)}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:4px}
.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}
.skip{position:absolute;left:12px;top:-60px;background:var(--purple);color:var(--paper);padding:12px 18px;border-radius:8px;z-index:100}
.skip:focus{top:12px;color:var(--paper)}

.site-header{position:sticky;top:0;z-index:50;background:rgba(250,246,238,.97);border-bottom:1px solid var(--line)}
.bar{max-width:760px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--serif);font-weight:600;font-size:1.125rem;min-height:48px}
.brand:hover{color:var(--purple)}
.brand img{border-radius:50%}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;text-decoration:none;font-weight:600;font-size:1.05rem;border-radius:8px}
nav a:hover{background:var(--lilac)}
nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px}

main{max-width:760px;margin:0 auto;padding:32px 16px 24px}
h1,h2,h3{font-family:var(--serif);line-height:1.25;color:var(--ink);font-weight:600}
h1{font-size:2.8rem;margin:0 0 8px}
h2{font-size:1.75rem;margin:56px 0 16px}
h3{font-size:1.35rem;margin:40px 0 12px;color:var(--purple)}
.num{color:var(--orange-text);margin-right:4px}
p{margin:0 0 1.15em;max-width:40rem}
.page-head{margin-bottom:24px}
.plain{font-size:1.35rem;color:var(--grey);margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 26px;background:var(--purple);color:var(--paper);text-decoration:none;font-weight:600;border-radius:12px;border:2px solid var(--purple)}
.btn:hover{background:var(--purple-dark);border-color:var(--purple-dark);color:var(--paper)}
.btn-second{background:transparent;color:var(--purple)}
.btn-second:hover{background:var(--lilac);color:var(--purple-dark)}
.buttons{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 0}
.textlink{font-weight:600}
.next{margin:48px 0 8px}
.back{margin:24px 0 0;font-size:.95rem}

/* handwritten notes */
.note{margin:8px auto 28px;padding:18px 22px;border-radius:6px;box-shadow:0 3px 10px rgba(36,24,46,.13);max-width:560px}
.note img{display:block;width:100%;height:auto}
.note-lilac{background:var(--lilac)}
.note-apricot{background:var(--apricot)}
.tilt-left{transform:rotate(-1.6deg)}
.tilt-right{transform:rotate(1.6deg)}
.note.big{max-width:600px}
.note.small{max-width:260px;padding:14px 18px}
.note.sticky{max-width:280px;margin-bottom:36px}

/* home */
.hero{text-align:center;padding-top:8px}
.hero h1{font-size:2.8rem;margin-top:16px}
.tagline{font-family:var(--serif);font-size:1.35rem;color:var(--purple);margin:0 auto 20px;letter-spacing:.02em}
.hero .lead{max-width:30rem;margin:0 auto}
.hero .buttons{justify-content:center;max-width:none}
.about-block p{max-width:none}
.about-block{text-align:center;margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.about-block .note{margin-bottom:12px}
.lead{font-family:var(--serif);font-size:1.35rem;line-height:1.55}

/* manifesto */
.spaced{text-align:center;letter-spacing:.3em;text-transform:uppercase;font-weight:600;font-size:.95rem;color:var(--purple);margin:28px auto 36px;max-width:none}
.opener{font-family:var(--serif);font-size:1.35rem;color:var(--ink)}
.pull{font-family:var(--serif);font-size:1.75rem;color:var(--purple);margin:28px 0}
.close{font-family:var(--serif);font-size:1.75rem;color:var(--purple);margin:44px 0 8px}
.hi{font-family:var(--serif);font-size:1.75rem;margin-bottom:20px}
.pairline{font-family:var(--serif);font-size:1.35rem;margin-bottom:.4em;color:var(--ink)}
.pairline+.pairline{margin-bottom:1.4em}
.endline{font-family:var(--serif);font-size:1.35rem;color:var(--ink);margin-top:36px}

/* framework */
.panel{background:var(--lilac-soft);border-left:5px solid var(--purple);border-radius:0 12px 12px 0;padding:18px 22px 6px;margin:20px 0 28px}
.panel p{max-width:none}
.step{padding-left:8px}
.contents{background:var(--lilac-soft);border-radius:12px;padding:18px 24px;margin:8px 0 12px}
.contents h2{font-size:1.125rem;margin:0 0 8px;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--grey)}
.contents ol{margin:0;padding-left:1.3em}
.contents li{margin:2px 0}
.contents a{display:inline-block;padding:6px 0;font-weight:600}
.footnote{font-size:.95rem;color:var(--grey);margin-top:40px;border-top:1px solid var(--line);padding-top:16px}
sup a{text-decoration:none;font-weight:700;padding:0 2px}

.diagram{margin:28px 0 32px;padding:0}
.diagram .scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#FFFDF9;padding:12px}
.diagram svg{display:block;width:100%;min-width:620px;height:auto}
.diagram svg text{font-family:var(--sans)}
.tablewrap{overflow-x:auto;margin:8px 0 28px;border-radius:12px;border:1px solid var(--line)}
.tablelabel{margin:28px 0 4px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:1.05rem;line-height:1.5;background:#FFFDF9}
th,td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{background:var(--lilac);font-weight:700}
tbody th{background:var(--lilac-soft);font-weight:400;width:22%}
tr:last-child th,tr:last-child td{border-bottom:0}

/* footer */
.site-footer{max-width:760px;margin:40px auto 0;padding:28px 16px 48px;border-top:1px solid var(--line);color:var(--grey)}
.site-footer p{font-size:.95rem;line-height:1.6;max-width:40rem}
.site-footer a{color:var(--purple);font-weight:600}
.small{font-size:.95rem}
.to-top{position:fixed;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;background:var(--purple);color:var(--paper);display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:1.35rem;box-shadow:0 3px 10px rgba(36,24,46,.25);z-index:60}
.to-top:hover{background:var(--purple-dark);color:var(--paper)}
.to-top[hidden]{display:none}

@media (max-width:520px){
  body{font-size:1.05rem}
  h1{font-size:2.1rem}
  .hero h1{font-size:2.1rem}
  h2{font-size:1.35rem;margin-top:44px}
  .brand span{font-size:1.05rem}
  nav a{padding:0 9px}
  .note{padding:12px 14px}
  .panel{padding:14px 16px 4px}
}
@media print{.site-header,.to-top,.skip{display:none}body{background:#fff}}

/* v2: lines only on key ideas, no fills, no cards on diagrams */
.panel{background:none;border-left:4px solid var(--purple);border-radius:0;padding:2px 0 2px 20px;margin:20px 0 28px}
.panel p:last-child{margin-bottom:.6em}
.contents{background:none;border:1px solid var(--line);max-width:34rem;padding:16px 22px}
.contents ol{columns:2;column-gap:28px}
.contents li{break-inside:avoid}
.contents li:nth-child(5){break-before:column}
.diagram .scroll{border:0;background:none;padding:0}
table.divide td:nth-child(2),table.divide th:nth-child(2){border-right:2px solid var(--line)}
.storylink{text-align:center;margin:20px auto 0;max-width:none}
.mail{font-size:1.35rem;font-family:var(--serif)}
.mail a{color:var(--purple);font-weight:600}
.side{display:block}
.side .note.sticky{max-width:280px}
@media (min-width:900px){
  main.wide{max-width:960px}
  .side{display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;align-items:start}
  .side .note{position:sticky;top:96px;margin:8px 0 0}
}
@media (max-width:520px){.contents ol{columns:1}.contents li:nth-child(5){break-before:auto}}

/* v3: home note smaller, taped, rough edge; footer */
.note.rough{background:none;box-shadow:none;position:relative;max-width:340px;padding:26px 28px 22px;transform:rotate(-2.2deg);filter:drop-shadow(0 4px 7px rgba(36,24,46,.22));margin:22px auto 24px}
.note.rough::before{content:"";position:absolute;inset:0;background:var(--lilac);clip-path:polygon(1% 3%,12% 0,31% 2%,50% 0,71% 3%,88% 0,100% 2%,99% 24%,100% 47%,98% 71%,100% 96%,84% 100%,63% 98%,44% 100%,24% 98%,8% 100%,0 97%,2% 74%,0 50%,2% 26%)}
.note.rough img{position:relative;z-index:1}
.note.tape::after{content:"";position:absolute;top:-14px;left:50%;width:96px;height:28px;margin-left:-48px;transform:rotate(3deg);background:rgba(240,214,140,.78);box-shadow:0 1px 2px rgba(36,24,46,.15);z-index:2;clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,100% 0,96% 22%,100% 40%,96% 60%,100% 80%,96% 100%,10% 100%,6% 88%,3% 100%,0 90%,3% 50%)}
.foot-tag{font-family:var(--serif);font-size:1.35rem;color:var(--purple);margin:0 0 12px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 20px;max-width:none}
.foot-links a{color:var(--purple);font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.site-footer .foot-tag{font-size:1.35rem}

/* v4: ripped paper, stuck down, off-centre */
.note.rough{max-width:350px;margin:26px auto 26px;margin-left:calc(50% - 190px);transform:rotate(-3.4deg);padding:34px 30px 26px 36px}
.note.rough::before{clip-path:polygon(0 6%,5% 2%,9% 5%,16% 0,24% 3%,33% 1%,41% 4%,52% 0,60% 3%,71% 1%,80% 4%,89% 0,96% 3%,100% 1%,98% 14%,100% 29%,97% 43%,100% 58%,98% 72%,100% 87%,97% 100%,88% 97%,79% 100%,69% 98%,58% 100%,47% 97%,37% 100%,26% 98%,15% 100%,6% 97%,0 100%,2% 84%,0 70%,3% 55%,0 41%,2% 27%,0 15%)}
.note.tape::after{left:30%;top:-16px;transform:rotate(-7deg);width:104px}
.note.rough img{transform:rotate(1.2deg) translateX(4px)}
@media (max-width:520px){.note.rough{margin-left:auto;max-width:300px}}

/* v5: notes stacked on every page; vertical tape; footer rows */
.side{display:block}
.side .note,.side-text .note{position:static}
.note.rough.note-apricot::before{background:var(--apricot)}
.note.rough.w-sm{max-width:290px;margin-left:calc(50% - 120px)}
.note.rough.w-md{max-width:390px}
.note.rough.w-lg{max-width:470px}
.note.rough.shift-r{margin-left:calc(50% - 180px)}
.note.rough.shift-l{margin-left:calc(50% - 235px)}
.note.rough.w-sm.shift-r{margin-left:calc(50% - 95px)}
.note.rough.w-lg.shift-r{margin-left:calc(50% - 215px)}
.note.tape::after{width:30px;height:94px;top:-34px;left:24%;margin-left:0;transform:rotate(9deg);clip-path:polygon(0 4%,25% 0,50% 5%,75% 0,100% 3%,97% 30%,100% 55%,96% 80%,100% 97%,75% 100%,50% 95%,25% 100%,0 96%,4% 70%,0 45%,3% 20%)}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;margin-bottom:12px}
.foot-top p{margin:0;max-width:none}
.foot-links{margin:0}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;max-width:none}
.foot-bottom a{color:var(--purple);font-weight:600}
.mpls{margin-bottom:10px}
@media (max-width:520px){
  .note.rough,.note.rough.w-sm,.note.rough.w-md,.note.rough.w-lg,.note.rough.shift-r,.note.rough.shift-l,.note.rough.w-sm.shift-r,.note.rough.w-lg.shift-r{margin-left:auto;margin-right:auto;max-width:300px}
}
.note.tape::after{height:76px;top:-48px;left:26%}
.site-footer .foot-bottom,.site-footer .foot-top p{max-width:none}

/* v7 */
.site-footer .foot-tag{font-size:1.125rem}
.site-footer p.disclaimer{font-size:.95rem;line-height:1.6;max-width:none;color:var(--grey)}
.brand{font-size:1.35rem}
.brand span{font-size:1.35rem;letter-spacing:.005em}
.note.tape::after{height:54px;top:-30px;left:50%;margin-left:-15px;transform:rotate(4deg)}
@media (max-width:520px){.brand span{font-size:1.35rem}}
@media (max-width:520px){
  .bar{padding:6px 12px;gap:2px}
  nav ul{gap:0}
  nav a{padding:0 7px;font-size:.95rem}
  .brand span{font-size:1.35rem}
}
@media (max-width:520px){.site-header{position:static}}
.contact-page .page-head{margin-bottom:48px}

/* ---- v8 design pass ---- */
main{max-width:720px;margin-left:auto;margin-right:auto}
.side,.side-text{display:block}
.page-head{text-align:center}
.page-head h1{font-size:2.8rem}
h1{position:relative}
.page-head h1::after{content:"";display:block;width:84px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--purple) 0 70%,#E39A00 70% 100%);margin:12px auto 0}
h2{font-size:2.1rem;color:var(--purple);margin:64px 0 18px;padding-bottom:10px;border-bottom:3px solid var(--lilac);position:relative}
h2::after{content:"";position:absolute;left:0;bottom:-3px;width:56px;height:3px;background:#E39A00}
.contents h2{border:0;padding:0;color:var(--grey);font-size:1.125rem;margin:0 0 8px}
.contents h2::after{display:none}
.close{text-align:center!important;font-size:1.75rem;margin:56px 0 8px}
.bubble{position:relative;border-radius:22px;padding:18px 24px;margin:28px 0;max-width:none}
.bubble p,.bubble .pairline{margin:0}
.bubble .pairline+.pairline{margin-top:8px}
.bubble-lilac{background:var(--lilac)}
.bubble-apricot{background:var(--apricot)}
.bubble-lilac::after,.bubble-apricot::after{content:"";position:absolute;left:30px;bottom:-14px;border:14px solid transparent;border-bottom:0;border-top-color:currentColor}
.bubble-lilac::after{border-top-color:var(--lilac)}
.bubble-apricot::after{border-top-color:var(--apricot)}
p.pull.bubble{text-align:center;font-size:1.75rem}
p.pull.bubble::after{left:50%;margin-left:-14px}
p.lead.bubble{font-size:1.35rem}
strong{background:linear-gradient(transparent 58%,#FFE08A 58% 92%,transparent 92%);padding:0 2px;font-weight:700}
.diagram strong,table strong,.sr-only strong{background:none;padding:0}
.note.rough.w-xs{max-width:230px;margin-left:calc(50% - 90px)}
.note.rough.w-lg{max-width:560px}
.note.rough.w-lg.shift-r{margin-left:calc(50% - 250px)}
.brand img{width:56px;height:56px}
.sign{text-align:center;margin:0}
.sign img{width:92px;height:auto}
.about-logo{text-align:center;margin:28px 0 0}
.about-logo img{width:200px;height:auto;max-width:60%}
.strip{list-style:none;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:0;margin:28px auto 8px;max-width:640px}
.strip li{flex:1 1 170px;background:#fff;border:2px solid var(--lilac);border-radius:16px;padding:12px 14px;font-weight:600;text-align:center;min-height:48px;display:flex;align-items:center;justify-content:center}
.strip li:last-child{background:var(--apricot);border-color:#F1CBA8}
.strip a{text-decoration:none;color:var(--ink)}
.strip li:hover{border-color:var(--purple)}
table.divide td:nth-child(3),table.divide th:nth-child(3){border-left:3px solid var(--purple)}
.diagram.d-bubbles svg{min-width:0;max-width:560px;margin:0 auto;display:block}
@media (max-width:520px){.page-head h1{font-size:2.1rem}h2{font-size:1.75rem}.note.rough.w-xs,.note.rough.w-lg.shift-r{margin-left:auto}}

/* ---- v9 cleaner, modern ---- */
.page-head h1::after{display:none}
h2{border:0;padding:0;margin:60px 0 14px;font-size:2.1rem;color:var(--purple)}
h2::after{display:none}
.contents h2{font-size:1.125rem;margin:0 0 8px}
.bubble{border-radius:18px;padding:14px 20px;margin:24px 0;width:fit-content;max-width:100%;font-family:var(--sans);font-size:1.05rem;line-height:1.65;color:var(--ink)}
.bubble::after{display:none!important}
.bubble .pairline{font-family:var(--sans);font-size:1.05rem;font-weight:600;margin:0}
.bubble .pairline+.pairline{margin-top:4px}
p.bubble{margin:24px 0}
.lead{font-family:var(--serif);font-size:1.35rem;line-height:1.55;color:var(--ink);text-align:left}
p.pull{font-family:var(--serif);font-size:1.75rem;color:var(--purple);text-align:center;margin:36px 0}
.about-text p,.side-text p{max-width:none}
.brand{gap:12px}
.brand img{border-radius:0;width:62px;height:auto}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm small{font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.38em;text-transform:uppercase;color:var(--grey);margin-bottom:3px}
.brand .wm b{font-family:var(--serif);font-weight:700;font-size:1.75rem;letter-spacing:.01em;color:var(--purple)}
.brand span.wm{font-size:inherit}
@media (max-width:520px){.brand .wm b{font-size:1.35rem}.brand img{width:48px}}
.note.rough.w-xs{margin-left:auto;margin-right:auto}

/* ---- v10 centred heads, plain opener ---- */
.page-head{text-align:center;margin-bottom:36px}
.page-head h1,.page-head .plain{max-width:none;margin-left:auto;margin-right:auto;text-align:center;width:100%}
.page-head h1{margin-bottom:14px}
.page-head .plain{margin-top:0}
.pairline{font-family:var(--serif);font-size:1.35rem;line-height:1.5;margin:0 0 .3em}
.pairline+.pairline{margin-bottom:1.4em;color:var(--purple)}
.brand img{width:66px}
.brand .wm small{text-align:justify;text-align-last:justify;letter-spacing:0;padding-left:2px;padding-right:2px;font-size:.8rem;word-spacing:0}
.brand .wm small{display:block}
.brand .wm b{display:block;padding-left:0}

/* ---- v11 ---- */
.note.rough,.note.rough.w-sm,.note.rough.w-md,.note.rough.w-lg,.note.rough.w-xs{margin-left:auto;margin-right:auto}
.hero .buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:36px 0 20px}
.hero .buttons .btn{font-size:1.35rem;min-width:240px;padding:20px 32px;border-radius:14px;justify-content:center;text-align:center}
.hero .storylink{margin:18px 0 8px}
.soon{margin:28px 0 0;text-align:center}
.soon span{display:inline-block;padding:8px 18px;border-radius:999px;background:var(--apricot);color:#7A3A00;font-weight:600;font-size:.95rem}
.diagram .scroll{background:linear-gradient(180deg,#F7F1FC,#FDF3EA);border-radius:20px;padding:18px 14px}
.diagram.d-bubbles svg{max-width:640px}
.js .d-bubbles .b{opacity:0;transform:translateY(14px) scale(.96);transform-box:fill-box;transform-origin:left center}
.js .d-bubbles.in .b{animation:pop .55s cubic-bezier(.2,1.2,.4,1) forwards;animation-delay:calc(var(--i,0)*.55s)}
@keyframes pop{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .d-bubbles .b{opacity:1;transform:none;animation:none!important}}
.hero p,.hero .lead,.hero .soon,.hero .storylink,.hero .tagline{max-width:none;margin-left:auto;margin-right:auto;text-align:center}
.hero .lead{max-width:32rem}
.hero .soon{margin-top:28px}

/* ---- v12 chat cluster animation ---- */
.js .d-bubbles .b{opacity:0;transform:translateX(-40px) scale(.85);transform-box:fill-box;transform-origin:left bottom}
.js .d-bubbles .b.r{transform:translateX(40px) scale(.85);transform-origin:right bottom}
.js .d-bubbles.in .b{animation:pop2 .7s cubic-bezier(.2,1.5,.4,1) forwards;animation-delay:calc(var(--i,0)*.5s)}
.js .d-bubbles.in .b.em{animation:emo 1s ease-out forwards;animation-delay:calc(var(--i,0)*.5s)}
@keyframes pop2{60%{opacity:1}to{opacity:1;transform:none}}
@keyframes emo{0%{opacity:0;transform:scale(.2) rotate(-25deg)}60%{opacity:1;transform:scale(1.35) rotate(12deg)}100%{opacity:1;transform:none}}
.diagram.d-bubbles svg{max-width:640px}
@media (prefers-reduced-motion:reduce){.js .d-bubbles .b,.js .d-bubbles.in .b{opacity:1;transform:none;animation:none!important}}

/* ---- v13 logo palette: violet + gold, sunrise on Home ---- */
:root{--purple:#350176;--purple-dark:#26015A;--orange:#E39A00;--orange-text:#8A5200;--apricot:#FFF0CC;--lilac:#EFE6F7;--lilac-soft:#F6F1FC;--cds-chart-categorical-1:#350176;--cds-chart-categorical-2:#E39A00}
h2{color:var(--purple)}
.brand .wm b{color:var(--purple)}
.diagram .scroll{background:none;padding:0;border-radius:0}
.diagram svg{max-width:820px;margin:0 auto;display:block}
.hero-sun{background:linear-gradient(160deg,#25005A 0%,#3B0F7C 52%,#6A2F9A 78%,#E8962A 100%);color:#fff;border-radius:32px;padding:40px 24px 44px;margin:8px 0 24px}
.hero-sun h1,.hero-sun .lead{color:#fff}
.hero-sun .tagline{color:#FFE08A}
.hero-sun .btn{background:#fff;color:var(--purple);border-color:#fff}
.hero-sun .btn-second{background:transparent;color:#fff;border:2px solid #fff}
.hero-sun .textlink{color:#fff}
.hero-sun .soon span{background:var(--apricot);color:#4A2A00}
.keyline{background:var(--lilac);border-radius:28px;padding:26px 28px;text-align:center;font-size:1.75rem;line-height:1.5;margin:32px 0;max-width:none}
.keyline .ul{text-decoration:underline;text-decoration-color:#FDB117;text-decoration-thickness:.17em;text-underline-offset:.15em;text-decoration-skip-ink:none}
/* chats, hand drawn + animated */
.chats{display:flex;flex-direction:column;gap:34px;margin:28px 0}
.convo{display:flex;flex-direction:column;gap:5px;max-width:540px}
.convo.r{align-self:flex-end}
.chats .b1{margin:0;padding:16px 24px;font-size:1.35rem;line-height:1.3;font-weight:600;max-width:92%;border-radius:34px 28px 30px 12px/30px 34px 26px 14px;--rot:-1.4deg;transform:rotate(var(--rot))}
.chats .b1.me{background:linear-gradient(135deg,#350176,#6B3FB5);color:#fff;box-shadow:0 8px 18px rgba(53,1,118,.22)}
.chats .b1.re{background:#FFF0CC;color:#350176;align-self:flex-start;margin-left:34px;border-radius:28px 36px 14px 30px/34px 28px 30px 12px;--rot:1.2deg;box-shadow:0 8px 18px rgba(253,177,23,.28)}
.convo.r .b1.me{--rot:1.4deg;align-self:flex-end;border-radius:28px 34px 12px 30px/34px 30px 14px 26px}
.convo.r .b1.re{--rot:-1.2deg;align-self:flex-end;margin-left:0;margin-right:34px;border-radius:36px 28px 30px 14px/28px 34px 12px 30px}
@keyframes pop{0%{opacity:0;transform:translateY(26px) scale(.7) rotate(var(--rot))}60%{opacity:1;transform:translateY(-6px) scale(1.06) rotate(var(--rot))}100%{opacity:1;transform:translateY(0) scale(1) rotate(var(--rot))}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -4px}}
.chats.play .b1{animation:pop .8s cubic-bezier(.2,1.4,.4,1) backwards,bob 4.5s ease-in-out infinite;animation-delay:var(--d,0s),calc(var(--d,0s) + 1.2s)}
@media (prefers-reduced-motion:reduce){.chats.play .b1{animation:none}}
/* things to remember */
.remember{background:var(--lilac);border-radius:32px;padding:30px 24px;margin:36px 0}
.rem-title{font:700 1.6rem/1.2 var(--serif);color:var(--purple);margin:0 0 18px;text-align:center;max-width:none}
.rem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.rem-grid .card{background:#fff;border-radius:22px;padding:24px 20px;min-width:0}
.rem-grid .cn{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#350176;color:#fff;font:700 1.15rem var(--serif);margin-bottom:14px}
.rem-grid .card:nth-child(2) .cn{background:#FDB117;color:#350176}.rem-grid .card:nth-child(3) .cn{background:#6B3FB5}.rem-grid .card:nth-child(4) .cn{background:#E39A00;color:#350176}
.rem-grid h4{font:700 1.2rem/1.25 var(--serif);color:var(--purple);margin:0 0 10px}
.rem-grid p{margin:0 0 8px;font-size:1.05rem;line-height:1.55;max-width:none}
/* tables as one card per row */
.tbl-title{font:700 1.15rem var(--serif);color:var(--purple);margin:28px 0 8px}
.tablewrap{overflow:visible}
.tablewrap table{display:block;border:0;width:100%;min-width:0}
.tablewrap thead{position:absolute;left:-9999px}
.tablewrap tbody{display:grid;gap:14px}
.tablewrap tr{display:grid;grid-template-columns:minmax(0,.8fr) repeat(auto-fit,minmax(0,1fr));gap:0;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.tablewrap th[scope=row],.tablewrap td{display:block;padding:18px 20px;border:0;background:none;font-size:1.05rem;line-height:1.55;text-align:left}
.tablewrap th[scope=row]{font:700 1.1rem/1.3 var(--serif);color:var(--purple);background:var(--lilac-soft)}
.tablewrap td+td{border-left:1px solid var(--line)}
.tablewrap td::before,.tablewrap th[scope=row]::before{content:attr(data-label);display:block;font:700 .75rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
@media (max-width:700px){.tablewrap tr{grid-template-columns:1fr}.tablewrap td+td{border-left:0;border-top:1px solid var(--line)}}
.tablewrap tr{display:flex;grid-template-columns:none}
.tablewrap th[scope=row]{flex:0 0 22%}
.tablewrap td{flex:1 1 0;min-width:0}
.tablewrap th[scope=row]::before{display:none}
@media (max-width:700px){.tablewrap tr{display:block}.tablewrap th[scope=row]{display:block}}
.tablewrap table.divide td,.tablewrap table.divide th{border-left:0}
.tablewrap table.divide td+td{border-left:1px solid var(--line)}
.rem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:520px){.rem-grid{grid-template-columns:1fr}}
@media (max-width:700px){.tablewrap th[scope=row]{width:auto!important;flex:none}}

/* ---- v14 ---- */
strong{background:none;padding:0;font-weight:700;text-decoration:underline;text-decoration-color:#FDB117;text-decoration-thickness:.13em;text-underline-offset:.14em;text-decoration-skip-ink:none}
.keyline strong,.diagram strong,table strong{text-decoration:none}
.pairline,.pairline.hi{font-family:var(--serif);font-size:1.35rem;line-height:1.5;margin:0 0 .35em;font-weight:400;color:var(--ink)}
.pairline+.pairline{margin-bottom:.35em}
.pairline:nth-of-type(3){color:var(--purple);margin-bottom:1.4em}
.lined{border-left:4px solid var(--purple);padding-left:20px;max-width:none}
.remember{width:min(900px,calc(100vw - 32px));position:relative;left:50%;transform:translateX(-50%)}
.rem-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){.rem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.rem-grid{grid-template-columns:1fr}}
/* time of day rows */
.tod tr:nth-child(1) th[scope=row]{background:#FFE08A;color:#350176}
.tod tr:nth-child(2) th[scope=row]{background:#E3D4F5;color:#350176}
.tod tr:nth-child(3) th[scope=row]{background:#350176;color:#fff}
.tod tr:nth-child(1){border-color:#FDB117}.tod tr:nth-child(2){border-color:#B79AE0}.tod tr:nth-child(3){border-color:#350176}
/* examples table pops */
.stackrows th[scope=row]{background:#350176;color:#fff}
.stackrows td::before{display:inline-block;padding:5px 10px;border-radius:999px;font-size:.8rem;margin-bottom:10px}
.stackrows td:nth-child(2)::before{background:#EFE6F7;color:#350176}
.stackrows td:nth-child(3)::before{background:#FFF0CC;color:#6B4200}
.stackrows td:nth-child(4)::before{background:#FDB117;color:#350176}
.stackrows td:nth-child(4){background:#FFF8E6}
.stackrows td::before{white-space:nowrap;letter-spacing:.05em;font-size:.8rem}
.pairline+.pairline{color:var(--ink)}.pairline+.pairline+.pairline{color:var(--purple)}
.ic{vertical-align:-7px;margin-right:10px;flex:none}
.tod th[scope=row]{display:flex;align-items:center;flex-wrap:wrap}
.tod tr:nth-child(1) .ic{color:#350176}.tod tr:nth-child(2) .ic{color:#350176}.tod tr:nth-child(3) .ic{color:#FDB117}
.stackrows td::before{white-space:normal;text-wrap:balance;border-radius:14px;line-height:1.25;max-width:9rem}
.tod th[scope=row]{flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;flex-wrap:nowrap}
.tod .ic{width:40px;height:40px;margin:0;vertical-align:0}

/* ---- v15 footer band, energy columns ---- */
.site-footer{background:#EFE6F7;border-top:0;margin-top:56px;box-shadow:0 0 0 100vmax #EFE6F7;clip-path:inset(0 -100vmax)}
.tod td:nth-child(2){background:#F1EAFA}
.tod td:nth-child(3){background:#FFF3CF}
.tod td:nth-child(2)::before{background:#350176;color:#fff}
.tod td:nth-child(3)::before{background:#FDB117;color:#350176}
.tod td::before{display:inline-block;padding:5px 10px;border-radius:999px;font-size:.72rem;margin-bottom:10px}
.tod td::before{display:block;width:fit-content;margin-bottom:10px}

/* ---- v16 Home: violet header and hero to the footer ---- */
.home{background:#FAF6EE}
.home main{max-width:none;padding:0}
.home .site-footer{margin-top:0}
.home .site-header{background:#25005A;border-bottom:0}
.home .brand img{content:url(/assets/logo-sun-light.png)}
.home .brand .wm small{color:#D9C8F0}
.home .brand .wm b{color:#fff}
.home nav a{color:#fff}
.home nav a:hover{background:rgba(255,255,255,.14)}
.home nav a[aria-current=page]{color:#fff}
.hero-home{background:linear-gradient(175deg,#25005A 0%,#2F0A6E 55%,#4A1C96 82%,#B5762E 100%);color:#fff;padding:30px 20px 76px;margin:0;border-radius:0;max-width:none}
.hero-home h1,.hero-home .lead{color:#fff}
.hero-home .tagline{color:#FFE08A}
.hero-home .btn{background:#FDB117;color:#350176;border-color:#FDB117}
.hero-home .btn-second{background:transparent;color:#fff;border:2px solid #fff}
.hero-home .textlink{color:#fff}
.hero-home .soon span{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.55)}
.site-footer p.disclaimer,.site-footer .mpls{font-size:.8rem;line-height:1.55}
.tod tr:nth-child(2) th[scope=row]{background:#fff;border-right:1px solid var(--line)}
.tod tr:nth-child(2) .ic{color:#E39A00}
.hero .buttons .btn{min-width:250px;width:250px}
@media (max-width:520px){.hero .buttons{gap:12px;margin:28px 0 14px}.hero .buttons .btn{width:min(100%,280px);min-width:0;padding:14px 20px;font-size:1.05rem;border-radius:12px}}

/* v17: Go deeper boxes */
.toc-deep{margin:10px 0 0;font-size:.95rem;color:var(--grey)}
.toc-deep a{display:inline-block;padding:4px 0;font-weight:600}
.godeeper{margin-top:56px;padding-top:36px;border-top:1px solid var(--line)}
.godeeper h2{margin-bottom:4px}
.gd-intro{color:var(--grey);margin:0 0 22px}
.deep{background:var(--lilac-soft);border:1px solid var(--line);border-radius:18px;margin:0 0 16px;overflow:hidden}
.deep[open]{background:#fff;border-color:var(--purple)}
.deep summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;min-height:44px}
.deep summary::-webkit-details-marker{display:none}
.deep summary:hover .dtitle{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:5px;text-decoration-thickness:3px}
.deep summary:focus-visible{outline:3px solid var(--orange);outline-offset:-3px;border-radius:18px}
.dtext{display:flex;flex-direction:column;gap:4px}
.dtitle{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--purple);line-height:1.3}
.dtease{font-size:.95rem;color:var(--grey);line-height:1.5}
.dplus{flex:none;position:relative;width:40px;height:40px;border-radius:50%;background:var(--orange)}
.dplus::before,.dplus::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:3px;margin:-1.5px 0 0 -8px;background:var(--purple);border-radius:2px}
.dplus::after{transform:rotate(90deg)}
.deep[open] .dplus::after{transform:rotate(0)}
.dbody{padding:4px 24px 28px;border-top:1px solid var(--line)}
@media (max-width:520px){.deep summary{padding:18px 16px}.dbody{padding:4px 16px 24px}.dtitle{font-size:1.125rem}}
.godeeper h2{margin-bottom:20px}

/* v18 polish */
p{text-wrap:pretty}
.num{color:var(--purple)}
.toc-label{margin:12px 0 2px;font-size:1rem;color:var(--grey)}
.contents ol.deepol{columns:1}
/* time of day: white cells, coloured circles */
.tod tr:nth-child(n) th[scope=row]{background:#fff;border-right:1px solid var(--line);align-items:center;justify-content:center}
.tod tr:nth-child(n){border-color:var(--line)}
.todc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:92px;height:92px;border-radius:50%}
.todc strong{font:700 .9rem/1 var(--sans);text-decoration:none;background:none}
.tod .todc .ic{width:30px;height:30px}
.tod tr:nth-child(1) .todc{background:#FDB117;color:#350176}
.tod tr:nth-child(2) .todc{background:#F28A2E;color:#2A1200}
.tod tr:nth-child(3) .todc{background:#350176;color:#fff}
.tod tr:nth-child(1) .todc .ic{color:#350176}
.tod tr:nth-child(2) .todc .ic{color:#2A1200}
.tod tr:nth-child(3) .todc .ic{color:#FDB117}
@media (max-width:700px){.tod th[scope=row]{align-items:flex-start!important;justify-content:flex-start!important}.todc{width:80px;height:80px}}
/* examples: step pills once, above the table */
.exhead{display:none}
@media (min-width:701px){
  .exhead{display:flex;margin:8px 1px -2px}
  .exhead .sp{flex:0 0 22%}
  .exhead span:not(.sp){flex:1 1 0;min-width:0;padding:0 20px}
  .exhead b{display:inline-block;padding:7px 14px;border-radius:999px;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
  .exhead .p1{background:#EFE6F7;color:#350176}
  .exhead .p2{background:#FFF0CC;color:#6B4200}
  .exhead .p3{background:#FDB117;color:#350176}
  .stackrows td::before{display:none}
}
/* label colours in comparison tables */
.divide:not(.tod) td:nth-child(2)::before{color:#8A5200;content:"\25CF  " attr(data-label)}
.divide:not(.tod) td:nth-child(3)::before{color:var(--purple);content:"\25CF  " attr(data-label)}
.divide:not(.tod) th[scope=row]{border-left:5px solid #FDB117}
.contents ol,.contents ol.deepol{columns:1}.contents li:nth-child(5){break-before:auto}

/* v19 tidy */
.dtease{color:#54307F}
.footnote{color:#3B2D4D}
.toc-label{color:#54307F}
.tablewrap{border:0;background:none;box-shadow:none;border-radius:0}
.tablewrap table,.tablewrap tbody{background:none;border:0;box-shadow:none}
.tod td:nth-child(2)::before{color:#fff!important;content:attr(data-label)!important}
.tod td:nth-child(3)::before{color:#350176!important;content:attr(data-label)!important}

/* v20 batch */
.note-gold.rough::before{background:#FFD968}
.note.rough.sq{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;max-width:330px;padding:26px;margin-left:auto;margin-right:auto}
.note.rough.sq img{width:auto;max-width:100%;max-height:100%;height:auto;margin:0 auto}
.hero-home .note.rough.sq{max-width:270px}
.note.rough.spaced{margin-top:60px!important;margin-bottom:52px!important}
.note.rough.w-xs{max-width:210px}
.opener{color:#C25E00}
.beat{font-family:var(--serif);font-size:1.75rem;line-height:1.35;color:var(--purple);margin:20px 0 28px}
.q{font-family:var(--serif);font-size:1.35rem;color:var(--purple);margin:28px 0 10px}
.keyline .ul{background:none}
.hello{background:var(--lilac);border-radius:24px;padding:22px 26px 14px;margin:8px 0 32px;border-left:6px solid #FDB117}
.side-text .lined{background:var(--lilac-soft);border-radius:0 16px 16px 0;padding:16px 20px;border-left-color:var(--purple);margin:24px 0}
.side-text .lined+p+.about-note+p+.lined,.side-text .lined:nth-of-type(2){background:#FFF0CC;border-left-color:#FDB117}
.endcard{background:#FFF0CC;border-radius:20px;padding:22px 26px;text-align:center;margin-top:40px}
.godeeper h2,.toc-label{color:#C25E00}
/* feeling examples */
.feel{display:grid;gap:18px;margin:20px 0 28px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 22px 8px}
.fcard h4{display:inline-block;font:700 1.2rem var(--serif);color:var(--purple);background:var(--lilac);padding:6px 18px;border-radius:999px;margin:0 0 10px}
.fcard ol{list-style:none;margin:0;padding:0}
.fcard li{display:flex;gap:18px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}
.fcard li b{flex:0 0 160px;font:700 .8rem/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;padding:8px 12px;border-radius:12px}
.fcard li span{flex:1;font-size:1.05rem;line-height:1.55}
.fcard .b0{background:#EFE6F7;color:#350176}
.fcard .b1,.fcard .b2{background:#FDB117;color:#350176}
.fcard .b3,.fcard .b4{background:#350176;color:#fff}
@media (max-width:600px){.fcard li{flex-direction:column;gap:8px}.fcard li b{flex:none}}
/* things to remember 2x2 inside boxes */
.dbody .remember{width:auto;left:0;transform:none;margin:24px 0}
.dbody .rem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:440px){.dbody .rem-grid{grid-template-columns:1fr}}
/* close button */
.dclose-wrap{margin:28px 0 0;text-align:center}
.dclose{font:700 1rem var(--sans);color:var(--purple);background:#fff;border:2px solid var(--purple);border-radius:999px;padding:10px 22px;cursor:pointer;min-height:44px}
.dclose:hover{background:var(--lilac)}
.dclose:focus-visible{outline:3px solid #E39A00;outline-offset:2px}

/* v21 titles + close underline */
.eyebrow{font:700 .8rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#C25E00;margin:0 0 10px;text-align:center}
.close,p.close{text-decoration:underline;text-decoration-color:#FDB117;text-decoration-thickness:.13em;text-underline-offset:.18em;text-decoration-skip-ink:none}

/* v22 home fits the first screen */
.note-gold.rough::before{background:#FFF0CC}
.hero-home{min-height:calc(100svh - 66px);padding:26px 20px 34px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-home .note.rough.sq{max-width:210px;padding:18px;margin:14px auto 10px}
.hero-home h1{margin-top:6px;margin-bottom:6px}
.hero-home .tagline{margin:0 0 10px}
.hero-home .lead{margin-bottom:0}
.hero-home .buttons{margin:22px 0 10px}
.hero .buttons .btn,.hero-home .buttons .btn{width:272px;min-width:272px;padding:14px 18px;white-space:nowrap}
.hero-home .storylink{margin:10px 0 6px}
.hero-home .soon{margin-top:14px}
@media (max-width:640px){.hero-home{padding:10px 16px 32px}.hero .buttons .btn,.hero-home .buttons .btn{width:min(100%,290px);min-width:0;white-space:normal}}

/* v23 one type scale: .8 .95 1.05 1.125 1.35 1.75 2.1 2.8 */
.beat{font-size:1.35rem;margin:16px 0 24px}
.todc strong{font-size:.95rem}
.dclose,.toc-label,.contents em{font-size:1.05rem}
.tablewrap th[scope=row]{font-size:1.125rem}
.tbl-title,.rem-grid .cn{font-size:1.125rem}
.rem-grid h4,.fcard h4{font-size:1.125rem}
.rem-title{font-size:1.75rem}
.tablewrap td::before{font-size:.8rem}
.tod td::before{font-size:.8rem}

/* v24 home note tighter, stronger glow */
.hero-home .note.rough.sq{aspect-ratio:1.12/1;max-width:262px;padding:16px 18px;margin:12px auto 8px}
.hero-home .note.rough.sq img{width:100%;max-height:none}
.hero-home{background:radial-gradient(ellipse 85% 42% at 50% 100%,rgba(253,177,23,.55),rgba(253,177,23,0) 70%),linear-gradient(175deg,#25005A 0%,#2F0A6E 38%,#4A1C96 66%,#8A4A8E 88%,#C9803A 100%)}
.hero-home .note.rough.sq{aspect-ratio:1.4/1;max-width:280px;padding:12px 18px}

.hero-home .note.rough.sq{aspect-ratio:1/1;max-width:236px;padding:14px 16px;margin:10px auto 8px}

.hl{background:linear-gradient(transparent 8%,#FFE08A 8%,#FFE08A 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:2px 6px;border-radius:4px}
.hl strong{color:var(--ink)}
.note.rough.sq.spaced{max-width:300px;padding:22px}

/* v25 */
.nw{white-space:nowrap}
.chats .b1{width:fit-content;text-wrap:balance}
.remember{background:#350176;padding:32px 26px}
.rem-title{color:#fff}
.rem-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (max-width:560px){.rem-grid{grid-template-columns:1fr!important}}
.remember.lilac{background:var(--lilac)}
.remember.lilac .rem-title{color:var(--purple)}

/* v26 post-it style C: curled corner, soft lift shadow, no tape */
.note.rough{filter:none;transform:rotate(-2deg)}
.note.rough::before{clip-path:none;border-radius:2px;background:linear-gradient(170deg,#F6EFFC 0%,#E6D9F3 100%);box-shadow:0 14px 14px -10px rgba(36,24,46,.45)}
.note.rough.note-apricot::before{background:linear-gradient(170deg,#FFEFDD 0%,#FFD9B0 100%)}
.note-gold.rough::before{background:linear-gradient(170deg,#FFF6DA 0%,#FFEBB8 100%)}
.note.rough::after,.note.tape::after{content:"";position:absolute;right:0;bottom:0;top:auto;left:auto;width:42px;height:42px;margin:0;transform:none;clip-path:none;box-shadow:-3px -3px 6px rgba(36,24,46,.15);background:linear-gradient(135deg,#D9C8EC 50%,#FAF6EE 50%);z-index:2}
.note.rough.note-apricot::after{background:linear-gradient(135deg,#F2C79A 50%,#FAF6EE 50%)}
.note-gold.rough::after{background:linear-gradient(135deg,#EAD8A2 50%,#FAF6EE 50%)}
.note.rough img{transform:none}

.note.rough.sq.offc{max-width:300px;padding:30px 34px;transform:translateX(16px) rotate(-2.5deg)}
@media (max-width:520px){.note.rough.sq.offc{transform:translateX(8px) rotate(-2.5deg);max-width:280px}}

/* v27 sunrise haze */
.hero-home{background:radial-gradient(ellipse 62% 430px at 50% 770px,rgba(255,190,80,.95) 0%,rgba(244,134,72,.75) 30%,rgba(200,86,118,.42) 58%,rgba(120,50,150,.16) 82%,rgba(74,28,150,0) 100%),linear-gradient(175deg,#25005A 0%,#2F0A6E 55%,#4A1C96 82%,#B5762E 100%)}
.hero-home .lead,.hero-home h1,.hero-home .tagline{text-shadow:0 1px 8px rgba(37,0,90,.55)}

/* v28 smaller home note, more air */
.hero-home .note.rough.sq{max-width:196px;padding:12px 14px;margin:14px auto 22px}

/* v29 even sunrise arc: symmetric, peaks in the middle, no corner dips */
.hero-home{background:
 radial-gradient(ellipse 80% 62% at 50% 100%,rgba(255,190,80,.95) 0%,rgba(240,124,40,.82) 26%,rgba(176,84,40,.4) 52%,rgba(96,40,130,.2) 78%,rgba(74,28,150,0) 100%),
 linear-gradient(0deg,rgba(214,112,42,.6) 0%,rgba(110,48,120,.25) 14%,rgba(74,28,150,0) 30%),
 linear-gradient(180deg,#25005A 0%,#2F0A6E 55%,#44198F 100%)}
.hero-home .soon span{background:rgba(37,0,90,.42);border-color:rgba(255,255,255,.6)}
.hero-home .textlink,.hero-home .btn-second{text-shadow:0 1px 6px rgba(37,0,90,.5)}

/* v30 tighter home */
.hero-home{justify-content:flex-start;padding-top:clamp(20px,5vh,56px)}
.hero-home .note.rough.sq{margin:8px auto 14px}
.hero-home .buttons{margin:16px 0 6px}
.hero-home .storylink{margin:6px 0 4px}
.hero-home .soon{margin-top:10px}
.hero-home h1{margin-top:2px;margin-bottom:2px}
.hero-home .tagline{margin:0 0 6px}
.hero-home{padding-top:clamp(20px,8vh,100px)}

/* v31 sunrise at the end of every page except Home: same dome, much fainter */
body{overflow-x:clip}
.sunrise-end{position:relative;top:56px;z-index:-1;height:356px;margin-top:-356px;margin-bottom:0;pointer-events:none;width:min(100vw,1500px);left:50%;margin-left:calc(min(100vw,1500px)/-2);background:radial-gradient(ellipse 62% 100% at 50% 100%,rgba(253,177,23,.34) 0%,rgba(244,150,60,.2) 30%,rgba(230,150,80,.08) 62%,rgba(250,246,238,0) 100%)}
.home .sunrise-end{display:none}
.note.rough.sq img[src*="note-try"]{max-width:82%;transform:translate(-3%,-4%)}

.note.rough:not(.offc){transform:rotate(var(--tilt,-2deg))}

.note.rough:not(.offc){transform:translateX(var(--dx,0)) rotate(var(--tilt,-2deg))}
@media (max-width:520px){.note.rough:not(.offc){transform:translateX(calc(var(--dx,0)*.5)) rotate(var(--tilt,-2deg))}}