/* Octa Cultures · the website · styles (13 Oct 2026).
   Every value is Octa Cultures' own, from its approved Brand Book v2 (Part 1 · The Interface) and its UI Element Library v1:
   night #0A0A0E, panel #111119, cream #F2F0E9, the eight Culture colours (ring order) and the eight aspect colours.
   No other colour is used. Type: Playfair Display names, Plus Jakarta Sans explains, IBM Plex Mono labels (hosted weights only). */
@import url('../assets/fonts/fonts.css');
:root{
  --bg:#0A0A0E; --card:#111119; --card2:#14141F; --text:#F2F0E9;
  --line:rgba(242,240,233,.10); --line2:rgba(242,240,233,.20); --soft:rgba(242,240,233,.80); --muted:rgba(242,240,233,.62);
  --grid:rgba(242,240,233,.04);
  --serif:'Playfair Display',Georgia,serif; --sans:'Plus Jakarta Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --human:#505679; --animal:#D6826C; --plant:#96C27B; --insect:#F3D99C; --fungi:#BC896A; --algae:#43B7AB; --aquatic:#3C94B1; --bacteria:#A495C1;
  --human-l:#C7CBF5; --animal-l:#F4B6A5; --plant-l:#C9E6B5; --insect-l:#FFE9B8; --fungi-l:#E6CBB5; --algae-l:#9FE3DA; --aquatic-l:#9CCFE3; --bacteria-l:#D6CCEB;
  --spiritual:#EA9244; --mental:#D8D8D8; --ecological:#8C8958; --economic:#FACF5E; --political:#6A8C99; --social:#DA614B; --biological:#8C7058; --technological:#7B6580;
  --ecological-l:#DCD89A; --economic-l:#FFE9A8; --biological-l:#E3C3A0;
  --wrap:1200px; --pad:20px; --radius:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:300 16.5px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* the octagon grid: eight columns and a line every 100 px, cream at 4 %, fixed behind everything */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px),linear-gradient(to bottom,var(--grid) 1px,transparent 1px);
  background-size:12.5% 100%,100% 100px}
a{color:inherit;text-underline-offset:3px}
a:hover{color:var(--text)}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:6px}
b,strong{font-weight:600;color:var(--text)}
img,svg{max-width:100%}
.skip{position:absolute;left:-999px;top:10px;z-index:60;background:var(--text);color:var(--bg);padding:9px 14px;border-radius:999px;text-decoration:none;font:500 13px var(--mono)}
.skip:focus{left:12px}
.wrap{width:min(var(--wrap),100% - 2*var(--pad));margin:0 auto}
.read{max-width:84ch}
.wrap.read{max-width:none}
.wrap.read>*:not(.links){max-width:84ch}

/* the ring: 8 × 45° from 12 o'clock, R 46 % / r 20 %, turning clockwise once every 20 s */
@keyframes ocSpin{to{transform:rotate(360deg)}}
.ring{display:block;flex:none;animation:ocSpin 20s linear infinite;transform-origin:50% 50%}

/* top bar */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-height:44px}
.brand .ring{width:30px;height:30px}
.brand b{font:400 20px/1 var(--serif);letter-spacing:.005em}
.nav{display:flex;gap:4px;align-items:center}
.nav a{font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:999px;min-height:40px;display:inline-flex;align-items:center}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text);background:var(--card)}
.nav a.cta{border:1px solid var(--line2);color:var(--text);margin-left:6px}
.menu{display:none;background:none;border:1px solid var(--line2);color:var(--text);border-radius:999px;font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;min-height:40px;cursor:pointer}
@media (max-width:820px){
  .menu{display:inline-flex;align-items:center}
  .nav{display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--pad) 16px}
  .nav.open{display:flex}
  .nav a{padding:14px 12px;font-size:13px}
  .nav a.cta{margin:6px 0 0;justify-content:center}
}

/* type */
.eyebrow{font:400 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0 0 .45em;line-height:1.12}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,4.2vw,3rem)}
h3{font-size:clamp(1.3rem,2.3vw,1.6rem);line-height:1.25}
h4{font:600 15px/1.4 var(--sans);margin:0 0 6px}
p{margin:0 0 1em}
.lead{font-size:clamp(1.08rem,1.6vw,1.25rem);line-height:1.6;color:var(--soft);max-width:44em}
.muted{color:var(--muted)}
.tag{font-family:var(--serif);font-style:italic;font-weight:400}
.small{font-size:.92rem}

/* sections */
.hero{padding:clamp(56px,10vw,120px) 0 clamp(40px,6vw,64px)}
.hero .ring{width:100px;height:100px;margin-bottom:28px}
.sec{padding:clamp(48px,8vw,96px) 0;border-top:1px solid var(--line)}
.sec-head{max-width:52em;margin-bottom:28px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.3rem,3vw,2.3rem)}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;position:relative}
.card h3{font-size:1.35rem}
.card .num{font:400 12px var(--mono);letter-spacing:.14em;color:var(--muted);display:block;margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.card.edge{border-top:3px solid var(--c,var(--line2))}

/* buttons: one pill system */
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line2);font:500 14px var(--sans);text-decoration:none;color:var(--text);background:transparent;cursor:pointer}
.btn:hover{border-color:var(--text)}
.btn.primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn.primary:hover{background:transparent;color:var(--text)}
.links{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:18px}
.links a{font:500 14px var(--sans);text-decoration:none;border-bottom:1px solid var(--line2);padding:8px 0 2px;display:inline-block}
.links a:hover{border-color:var(--text)}

/* stat row */
.stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.stat{border:1px solid var(--line);border-radius:14px;padding:14px 18px;min-width:132px;background:color-mix(in srgb,var(--card) 70%,transparent)}
.stat b{display:block;font:400 2rem/1.1 var(--serif)}
.stat span{font:400 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* the eight Cultures / aspects as chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:999px;padding:6px 13px;font:400 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.chips li i{width:10px;height:10px;border-radius:50%;background:var(--c)}

/* lists */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{padding-left:22px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--c,var(--line2))}
.def{display:grid;gap:12px}
.def > div{border-left:2px solid var(--c,var(--line2));padding:4px 0 4px 16px}
ol.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:10px}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
ol.steps li::before{content:counter(s,decimal-leading-zero);font:400 13px var(--mono);color:var(--muted);padding-top:3px}

/* aspects */
.aspects{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.aspect{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--c);border-radius:14px;padding:16px 18px}
.aspect h4{display:flex;align-items:center;gap:8px;font:400 12.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ct,var(--c));margin-bottom:8px}
.aspect p{margin:0;font-size:.97rem;color:var(--soft)}

/* scales */
.scales{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:16px 0 18px;padding:0;list-style:none}
.scales li{font:400 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line2);border-radius:999px;padding:7px 12px}
.scales li + li::before{content:"→";margin-right:10px;color:var(--muted)}
.scales li.beyond{border-style:dashed;color:var(--muted)}

/* "go deeper" blocks */
details.deeper{margin-top:22px;background:var(--card2);border:1px solid var(--line);border-radius:16px}
details.deeper summary{cursor:pointer;list-style:none;padding:16px 20px;min-height:44px;display:flex;align-items:center;gap:10px;font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
details.deeper summary::-webkit-details-marker{display:none}
details.deeper summary::before{content:"+";font:400 18px var(--mono);width:18px}
details.deeper[open] summary::before{content:"−"}
details.deeper .in{padding:0 20px 20px}

/* tables */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.97rem}
th{font:400 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line2)}
td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}

/* footnote, FAQ */
.foot-note{font-size:.9rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:18px}
.faq{display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px}
.faq summary{cursor:pointer;padding:16px 18px;min-height:44px;font:500 15.5px var(--sans);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details p{padding:0 18px 16px;margin:0;color:var(--soft)}

/* placeholders the copy leaves open: shown as they are, never filled in */
.tbd{font:400 .9em var(--mono);color:var(--economic-l);border:1px dashed color-mix(in srgb,var(--economic) 60%,transparent);border-radius:6px;padding:0 6px;white-space:normal}

/* pre-launch notes: preview only (data-prelaunch) — taken out at launch, with the sign-offs */
.prelaunch{border:1px dashed color-mix(in srgb,var(--social) 70%,transparent);background:color-mix(in srgb,var(--social) 8%,var(--bg));border-radius:14px;padding:14px 16px;font-size:.93rem;color:var(--soft);margin:0 0 18px}
.prelaunch b{color:var(--text)}
.prebar{background:color-mix(in srgb,var(--social) 14%,var(--bg));border-bottom:1px solid color-mix(in srgb,var(--social) 45%,transparent);font:400 12px/1.5 var(--mono);letter-spacing:.06em;color:var(--text);text-align:center;padding:8px var(--pad)}

/* the form */
form.contact{display:grid;gap:16px}
.field label{display:block;font:400 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:7px}
.field .opt{text-transform:none;letter-spacing:0;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;font:400 16px var(--sans);color:var(--text);background:var(--card2);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;min-height:46px}
.field textarea{min-height:150px;resize:vertical;line-height:1.55}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--text)}
.field .help{font-size:.88rem;color:var(--muted);margin-top:6px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* the diamond of the four forces holding the web of the eight Cultures */
.diagram{margin:22px 0 4px}
.diagram svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
.diagram text{font-family:var(--mono);font-size:11px;letter-spacing:.12em;fill:var(--soft);text-transform:uppercase}

/* footer */
footer.site{border-top:1px solid var(--line);padding:42px 0 54px;margin-top:20px}
footer.site .wrap{display:grid;gap:16px}
footer.site .id{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
footer.site .id .ring{width:26px;height:26px}
footer.site .id b{font:400 19px var(--serif)}
footer.site .id .tag{color:var(--soft)}
footer.site nav{display:flex;flex-wrap:wrap;gap:4px 18px}
footer.site nav a{font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:8px 0;min-height:36px;display:inline-flex;align-items:center}
footer.site nav a:hover{color:var(--text)}
footer.site .seed{font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--soft);display:inline-flex;align-items:center;min-height:36px;justify-self:start}
@media (max-width:560px){ .hero .ring{width:72px;height:72px} .stat{flex:1 1 40%;min-width:0} .card{padding:18px} .panel{padding:20px 18px} }

/* ═══ Full of life (owner, 13 Oct 2026: "a more dramatic entry · video and green imagery · plants and animals and bacteria and fungi
   and insects in every corner · full of life"). The forest film and its stills; the eight Cultures drawn in the corners, moving. ═══ */
.sec{position:relative;overflow:hidden}
.sec > .wrap{position:relative;z-index:1}
.life{position:absolute;z-index:0;pointer-events:none;width:clamp(56px,8vw,112px);height:clamp(56px,8vw,112px);opacity:.62}
.life.tr{top:clamp(10px,2vw,22px);right:clamp(8px,2.4vw,30px)}
.life.bl{bottom:clamp(8px,1.6vw,18px);left:clamp(6px,2vw,24px);opacity:.5}
.life svg,.cg svg,.frieze svg{width:100%;height:100%;display:block;overflow:visible}
.life svg *,.cg svg *,.frieze svg *{vector-effect:non-scaling-stroke}
.card{overflow:hidden}
.cg{position:absolute;top:12px;right:12px;width:34px;height:34px;opacity:.55;pointer-events:none}
.card h3{padding-right:38px}
/* how each Culture moves */
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes wave{0%,100%{transform:skewX(-6deg)}50%{transform:skewX(6deg)}}
@keyframes flutter{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.55)}}
@keyframes hover{0%,100%{translate:0 0}50%{translate:6px -8px}}
@keyframes breathe{0%,100%{opacity:.55;filter:drop-shadow(0 0 0 transparent)}50%{opacity:1;filter:drop-shadow(0 0 6px rgba(230,203,181,.55))}}
@keyframes drift{0%{transform:translate(0,0) rotate(0)}33%{transform:translate(5px,-4px) rotate(8deg)}66%{transform:translate(-4px,3px) rotate(-6deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes swim{0%,100%{transform:translateX(-6px) rotate(-2deg)}50%{transform:translateX(8px) rotate(2deg)}}
@keyframes glide{0%,100%{transform:translateY(0) scaleY(1)}25%{transform:translateY(-5px) scaleY(.82)}50%{transform:translateY(-2px) scaleY(1)}75%{transform:translateY(3px) scaleY(.9)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.life-plant{transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
.life-algae{transform-origin:50% 100%;animation:wave 5s ease-in-out infinite}
.life-insect{transform-origin:50% 50%;animation:flutter .9s ease-in-out infinite}
.life .life-insect,.frieze .life-insect{animation:flutter .9s ease-in-out infinite,hover 7s ease-in-out infinite}
.life-fungi{animation:breathe 5.5s ease-in-out infinite}
.life-bacteria{animation:drift 9s ease-in-out infinite}
.life-aquatic{animation:swim 4.6s ease-in-out infinite}
.life-animal{animation:glide 3.2s ease-in-out infinite}
.life-human{animation:bob 6s ease-in-out infinite}
.cg .life-insect{animation-duration:1.1s}

/* the film: the first screen of the site */
.hero.film{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0;overflow:hidden;border-bottom:1px solid var(--line);isolation:isolate}
.film-media{position:absolute;inset:0;z-index:-2;background:var(--bg)}
.film-media video,.film-media img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.14);transition:opacity 2.6s ease,transform 9s cubic-bezier(.2,.6,.2,1)}
.film.in .film-media video,.film.in .film-media img{opacity:1;transform:scale(1)}
.film-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to bottom,rgba(10,10,14,.55) 0%,rgba(10,10,14,.12) 30%,rgba(10,10,14,.35) 58%,rgba(10,10,14,.92) 88%,#0A0A0E 100%),
  radial-gradient(120% 80% at 50% 110%,rgba(10,10,14,.75),transparent 60%)}
.film .wrap{padding:clamp(120px,22vh,240px) 0 clamp(54px,9vh,96px)}
.film .eyebrow{color:var(--plant-l);opacity:0;transition:opacity 1.2s ease 1.4s}
.film h1{font-size:clamp(2.7rem,7.4vw,6rem);max-width:13em;text-shadow:0 2px 30px rgba(10,10,14,.55)}
.film h1 .w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(10px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1.1s ease;transition-delay:calc(1.1s + var(--i) * 90ms)}
.film .lead,.film .btns,.film .stats{opacity:0;transform:translateY(14px);transition:opacity 1.2s ease,transform 1.2s ease}
.film .lead{transition-delay:2.3s;color:var(--text);text-shadow:0 1px 18px rgba(10,10,14,.7)} .film .btns{transition-delay:2.6s} .film .stats{transition-delay:2.9s}
.film .ring{width:clamp(76px,9vw,112px);height:clamp(76px,9vw,112px);margin-bottom:24px;opacity:0;scale:.6;transition:opacity 1.4s ease .5s,scale 1.8s cubic-bezier(.2,.7,.2,1) .5s}
.film.in .eyebrow,.film.in h1 .w,.film.in .lead,.film.in .btns,.film.in .stats{opacity:1;transform:none;filter:none}
.film.in .ring{opacity:1;scale:1}
.film .stat{background:rgba(10,10,14,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.scroll-cue{position:absolute;left:50%;bottom:16px;translate:-50% 0;width:44px;justify-content:flex-end;font:400 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;opacity:0;transition:opacity 1s ease 3.4s}
.film.in .scroll-cue{opacity:.8}
.scroll-cue::after{content:"";width:1px;height:26px;background:linear-gradient(var(--plant-l),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* spores and pollen rising through the light, in the eight Culture colours */
.spores{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.spores i{position:absolute;bottom:-12px;width:var(--s);height:var(--s);border-radius:50%;background:var(--c);opacity:0;box-shadow:0 0 10px var(--c);animation:rise var(--t) linear infinite;animation-delay:var(--d)}
@keyframes rise{0%{transform:translate(0,0);opacity:0}12%{opacity:.75}80%{opacity:.5}100%{transform:translate(var(--x),-105vh);opacity:0}}
.film .life{opacity:.8;z-index:0}

/* the green stills: each page opens in the forest */
.hero.still{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line);padding:clamp(110px,18vw,190px) 0 clamp(48px,7vw,80px)}
.still-img{position:absolute;inset:-4%;z-index:-2;background:center/cover no-repeat;animation:kenburns 26s ease-in-out infinite alternate}
.hero.still::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(10,10,14,.45),rgba(10,10,14,.62) 45%,rgba(10,10,14,.95) 92%,#0A0A0E)}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.5%,-1%)}}
.hero.still .eyebrow{color:var(--plant-l)}
.hero.still .lead{color:var(--text)}
.hero.still .life{z-index:0;opacity:.75}
/* a band of forest between sections */
.band{position:relative;height:clamp(220px,38vw,420px);background-position:center;background-size:cover;background-repeat:no-repeat;border-top:1px solid var(--line);overflow:hidden}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#0A0A0E,rgba(10,10,14,.08) 30%,rgba(10,10,14,.08) 70%,#0A0A0E)}
.band .spores{z-index:1}
/* the eight together, at the foot of every page */
.frieze{display:flex;gap:clamp(10px,3vw,34px);align-items:flex-end;flex-wrap:wrap;padding-bottom:8px}
.frieze .cr{width:clamp(30px,5vw,48px);height:clamp(30px,5vw,48px);opacity:.75}
@media (max-width:560px){ .life{width:52px;height:52px;opacity:.5} .life.bl{opacity:.38} .cg{width:28px;height:28px} .card h3{padding-right:30px} }
@media (prefers-reduced-motion:reduce){
  .film-media video{display:none} .film-media img,.film .ring,.film .eyebrow,.film h1 .w,.film .lead,.film .btns,.film .stats,.scroll-cue{opacity:1!important;transform:none!important;filter:none!important;scale:1!important;translate:none}
  .spores{display:none}
}
html:not(.js) .film *{opacity:1!important;transform:none!important;filter:none!important;scale:1!important}

/* the eight Cultures in the theme itself (owner, 13 Oct 2026: "I need the 8 cultures to be present in the design of the theme") */
.band8{display:flex;height:2px;width:100%}
.band8 i{flex:1}
.top .band8{position:absolute;left:0;right:0;bottom:-1px}
footer.site{padding-top:0;border-top:0} footer.site .band8{margin-bottom:38px}
.sec[data-culture] .eyebrow{display:inline-flex;align-items:center;gap:10px}
.sec[data-culture] .eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--cb);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb) 25%,transparent)}
.sec[data-culture] h2::after{content:"";display:block;width:56px;height:2px;margin-top:.45em;background:linear-gradient(90deg,var(--cb),var(--cl))}
.panel h2::after{display:none!important}
.card[data-culture]{border-top:2px solid var(--cb)}
.card[data-culture]:hover{border-color:color-mix(in srgb,var(--cb) 60%,var(--line2));border-top-color:var(--cb)}
.sec[data-culture] .ticks li::before{background:var(--cl)}
.sec[data-culture] ol.steps li::before{color:var(--cl)}
.sec[data-culture] .links a{border-bottom-color:color-mix(in srgb,var(--cb) 70%,transparent)}
.stats .stat:nth-child(1){border-bottom:2px solid var(--plant)} .stats .stat:nth-child(2){border-bottom:2px solid var(--insect)} .stats .stat:nth-child(3){border-bottom:2px solid var(--aquatic)}
::selection{background:rgba(150,194,123,.35)}
.btn.primary:hover{border-color:var(--plant-l);color:var(--plant-l)}

/* Octa Curriculum on the Curriculum page (14 Oct 2026): the eight curricula, each in its aspect's colour, in the curriculum's order */
.cu8{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.cu{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--c);border-radius:16px;padding:20px 20px 16px;display:flex;flex-direction:column;min-width:0}
.cu h3{display:flex;align-items:baseline;gap:10px;font-size:1.35rem;color:var(--ct,var(--text));margin-bottom:6px}
.cu .no{font:400 12px var(--mono);letter-spacing:.14em;color:var(--muted)}
.cu .q{font:italic 400 1.12rem/1.45 var(--serif);color:var(--text)}
.cu p{color:var(--soft);font-size:.96rem}
.cu .foot{margin:auto 0 0;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--line);font:400 12.5px var(--mono);letter-spacing:.06em;color:var(--muted)}
.cu .foot a{color:var(--ct,var(--text));min-height:24px;display:inline-flex;align-items:center}
/* a bright photo (snow, sky) under the words: a deeper shade on the side the words sit */
.hero.still.bright::after{background:linear-gradient(to right,rgba(10,10,14,.6),rgba(10,10,14,0) 72%),linear-gradient(to bottom,rgba(10,10,14,.55),rgba(10,10,14,.7) 45%,rgba(10,10,14,.95) 92%,#0A0A0E)}

/* ═══ The Ring of Life · the home page's first screen (the owner, 14 Oct 2026: "something strong … impacting"; "I need the film
   it's good, but I need more impact"; "These numbers I do not like"). The approved mark at monumental size over the film, turning;
   the eight Cultures named around it; one headline; the numbers in a band of their own below. Colours: the book's only. ═══ */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero.film.rol{align-items:center}
.rol .film-shade.rol-shade{background:
  linear-gradient(90deg,rgba(10,10,14,.82) 0%,rgba(10,10,14,.55) 34%,rgba(10,10,14,.12) 64%,rgba(10,10,14,.2) 100%),
  linear-gradient(to bottom,rgba(10,10,14,.5) 0%,transparent 22%,transparent 70%,rgba(10,10,14,.85) 94%,#0A0A0E 100%)}
/* the ring: the size of the screen, on the right, half the film showing through its heart */
.rol-orbit{--S:min(74svh,54vw);position:absolute;right:calc(var(--S) * -0.04);top:calc(50% - 6px);width:var(--S);height:var(--S);margin-top:calc(var(--S) / -2);z-index:0;pointer-events:none}
.rol-in{width:100%;height:100%;opacity:0;transform:rotate(-40deg) scale(.82);transition:opacity 1.6s ease .2s,transform 2.6s cubic-bezier(.16,.8,.2,1) .2s}
.rol.in .rol-in{opacity:1;transform:none}
.rol-spin{position:relative;width:100%;height:100%;animation:rol-turn 90s linear infinite}
@keyframes rol-turn{to{transform:rotate(360deg)}}
.rol-ring{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 30px 80px rgba(0,0,0,.55))}
.rol-ring .seg{opacity:0;transform-origin:50px 50px;transform:scale(.9);transition:opacity .9s ease,transform 1.4s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.45s + var(--i) * 110ms)}
.rol.in .rol-ring .seg{opacity:.72;transform:none}   /* the owner, 14 Oct 2026: "can you make the logo more bit transparent" (was .93) */
.rol-ring .seg{stroke:rgba(10,10,14,.45);stroke-width:.22}
.rol-ring .sheen{pointer-events:none;opacity:0;transition:opacity 1.6s ease 1.6s}.rol.in .rol-ring .sheen{opacity:1}
.rol-ring .hair{fill:none;stroke:rgba(242,240,233,.28);stroke-width:.18;opacity:0;transition:opacity 1.6s ease 1.6s}
.rol.in .rol-ring .hair{opacity:1}
/* the eight names, each on its own Culture, always upright while the ring turns */
.rol-name{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(var(--S) * -0.33)) rotate(calc(-1 * var(--a)))}
.rol-name b{position:absolute;left:0;top:0;transform:translate(-50%,-50%)}
.rol-name i{display:block;font:600 clamp(10px,.95vw,13px)/1 var(--mono);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--t,#0A0A0E);white-space:nowrap;
  animation:rol-turn 90s linear infinite reverse;opacity:0;transition:opacity 1s ease;transition-delay:calc(1.7s + var(--i) * 90ms)}
.rol.in .rol-name i{opacity:1}
/* the words: one headline, very large, rising out of a line each */
.rol .wrap.rol-copy{position:relative;z-index:1;padding:clamp(110px,16vh,180px) 0 clamp(80px,12vh,130px)}
.rol-k{display:inline-flex;align-items:center;gap:10px;color:var(--plant-l)!important;opacity:0;transition:opacity 1.2s ease .6s}
.rol-k::before{content:"";width:34px;height:1px;background:currentColor}
.rol-h{font-size:clamp(3rem,8.2vw,8.4rem);line-height:.96;letter-spacing:-.018em;margin:.28em 0 .34em;max-width:none;text-shadow:0 4px 50px rgba(10,10,14,.55)}
.rol-h .ln{display:block;overflow:hidden;padding:.02em 0 .1em}
.rol-h .ln>span{display:inline-block;transform:translateY(108%);transition:transform 1.3s cubic-bezier(.16,.8,.2,1);transition-delay:calc(.9s + var(--i) * 150ms)}
.rol-h em{font-style:italic;color:var(--plant-l)}
.rol-line{font:italic 400 clamp(1.15rem,1.7vw,1.5rem)/1.4 var(--serif);color:var(--soft);max-width:30em;margin:0 0 28px;opacity:0;transform:translateY(12px);transition:opacity 1.2s ease 1.9s,transform 1.2s ease 1.9s}
.rol-btns{opacity:0;transform:translateY(12px);transition:opacity 1.2s ease 2.15s,transform 1.2s ease 2.15s}
.rol-btns .btn{min-height:50px;padding:0 26px;font-size:15px}
.rol.in .rol-k,.rol.in .rol-line,.rol.in .rol-btns{opacity:1;transform:none}
.rol.in .rol-h .ln>span{transform:none}
/* the band below: the words of the copy, large; then the numbers, without boxes */
.rol-band{position:relative;padding:clamp(64px,10vw,130px) 0 clamp(56px,8vw,110px);border-bottom:1px solid var(--line)}
.rol-lead{font:300 clamp(1.35rem,2.3vw,2.05rem)/1.45 var(--sans);color:var(--text);max-width:34em;margin:0}
.stats.big{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(44px,6vw,80px);border-top:1px solid var(--line)}
/* the numbers everywhere: no boxes — a large figure, its word, a thin line of colour */
.stats{gap:0 clamp(24px,4vw,56px)}
.stat,.film .stat{border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:16px 0 0;min-width:0;position:relative}
.stats .stat:nth-child(n){border-bottom:0}
.stat b{font:400 clamp(2.4rem,4vw,3.2rem)/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em;color:var(--text)}
.stat span{display:block;margin-top:10px}
.stat .bar{display:flex;gap:3px;margin-top:14px;width:min(160px,80%)}
.stat .bar i{flex:1;height:3px;border-radius:2px}
.stats.big .stat{padding:clamp(22px,3vw,36px) clamp(16px,2.6vw,36px) 0 0}
.stats.big .stat + .stat{padding-left:clamp(16px,2.6vw,36px);border-left:1px solid var(--line)}
.stats.big .stat b{font-size:clamp(3.6rem,9vw,8.5rem);line-height:.9}
.stats.big .stat span{font-size:12px;letter-spacing:.22em}
/* phones: the ring rises behind the words, larger than the screen; the names rest */
@media (max-width:760px){
  .hero.film.rol{align-items:flex-end}
  .rol-orbit{--S:132vw;right:-46vw;top:6svh;margin-top:0;opacity:.62}
  .rol-name{display:none}
  .rol .film-shade.rol-shade{background:linear-gradient(to bottom,rgba(10,10,14,.35) 0%,rgba(10,10,14,.2) 30%,rgba(10,10,14,.78) 62%,#0A0A0E 100%)}
  .rol-h{font-size:clamp(2.7rem,12.5vw,4rem)}
  .stats.big{grid-template-columns:1fr}
  .stats.big .stat + .stat{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .stats.big .stat{padding:22px 0 18px;display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:18px}
  .stats.big .stat b{font-size:4.2rem;grid-row:span 2}
  .stats.big .stat span{margin:0 0 6px} .stats.big .stat .bar{margin:0 0 10px}
}
@media (prefers-reduced-motion:reduce){
  .rol-in,.rol-ring .seg,.rol-ring .hair,.rol-name i,.rol-k,.rol-line,.rol-btns,.rol-h .ln>span{opacity:1!important;transform:none!important}
  .rol-ring .seg{opacity:.72!important} .rol-spin,.rol-name i{animation:none!important}
}
html:not(.js) .rol .rol-in,html:not(.js) .rol .rol-ring .seg,html:not(.js) .rol-h .ln>span{opacity:1!important;transform:none!important}

/* The three pillars triangle, as the Global Atlas draws it (home · "One framework for the whole of life.", 14 Oct 2026): its own
   styles come with it; here only the atlas's own tokens are given to it, so it looks exactly as it does there. */
.atlas-tri{--cream:#F2F0E9;--border:rgba(242,240,233,0.08);--font-sans:'Plus Jakarta Sans',sans-serif;--font-serif:'Playfair Display',serif;--font-mono:'IBM Plex Mono',monospace;--radius-lg:20px;color:var(--cream)}
.atlas-tri .tri-section{padding-top:2rem}
.atlas-tri .tri-panel-title{color:var(--cream)}
/* on narrow screens the triangle's corner labels reach past its drawing: give them room inside the screen */
@media (max-width:700px){ .atlas-tri .tri-diagram{padding:0 16%} }
/* the Global Atlas's eight scales and eight aspects on the Methodology page (14 Oct 2026): their own styles come with them */
.atlas-kit .oad-section{padding:1.5rem 0 1rem;border-top:0}
.atlas-kit .oad-wrap{padding:0;max-width:none}
.atlas-kit .osd-section{padding:.5rem 0 1rem}
.atlas-kit .osd-panel-title,.atlas-kit .oad-panel-title{color:var(--cream)}

/* Methodology · Go deeper: the four forces holding the web of the eight cultures (14 Oct 2026). The curriculum's two banner diagrams
   (the Ecological four-forces diamond and the Biological 8 Cultures orbit) as one drawing; colours from the book only. */
.fw{margin:26px 0 4px;display:grid;gap:14px;justify-items:center}
.fw-stage{width:100%;max-width:600px;aspect-ratio:1;border-radius:22px;background:radial-gradient(circle at 50% 50%,rgba(158,212,131,.06),transparent 62%),var(--card);border:1px solid var(--line);overflow:hidden}
.fw-svg{display:block;width:100%;height:100%}
.fw-fl{font:500 13px var(--mono);letter-spacing:.2em}
.fw-cl{font:500 10.5px var(--mono);letter-spacing:.14em;fill:var(--soft);text-transform:uppercase;pointer-events:none}
.fw-emo{font-size:22px;pointer-events:none}
.fw-force,.fw-cult,.fw-life{cursor:pointer;outline:none;transition:opacity .35s}
.fw-force:focus-visible,.fw-cult:focus-visible,.fw-life:focus-visible{outline:none}
.fw-force:focus-visible>circle:last-of-type,.fw-cult:focus-visible circle:nth-of-type(2){stroke:#F2F0E9;stroke-width:3}
.fw-cult .fw-halo{transition:opacity .3s}
.fw-cult.on .fw-halo{opacity:.3}
.fw-cult.dim,.fw-force.dim{opacity:.32}
.fw-force.on{filter:drop-shadow(0 0 14px rgba(242,240,233,.25))}
.fw-read{max-width:600px;width:100%;text-align:center;min-height:4.2em}
.fw-read b{display:block;font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:4px}
.fw-read span{font:400 17px/1.55 var(--serif);color:var(--text)}
.fw-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fw-legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:7px;vertical-align:middle}
@media (max-width:560px){ .fw-fl{font-size:15px} .fw-cl{font-size:12px} .fw-stage{border-radius:16px} }

/* Methodology · 02 / Aspects: the four forces of each aspect, in Octa Curriculum's own words (14 Oct 2026).
   The curriculum's four-pillars diamond in the book's §08 grammar; colours from the book only. */
.af{margin:22px 0 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.2rem,3vw,2.2rem);--ac:var(--text);--cc:var(--text)}
.af-head h3{margin:0 0 .3em}
.af-head p{margin:0;color:var(--soft);max-width:62ch}
.af-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.af-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--soft);font:400 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.af-tab span{font-size:16px;letter-spacing:0}
.af-tab:hover{border-color:var(--ci);color:var(--text)}
.af-tab[aria-selected="true"]{background:color-mix(in srgb,var(--c) 22%,transparent);border-color:var(--c);color:var(--ci)}
.af-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(16px,3vw,36px);align-items:start;margin-top:10px}
.af-stage{border-radius:22px;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--cc) 9%,transparent),transparent 60%),var(--bg);border:1px solid var(--line);overflow:hidden}
.af-svg{display:block;width:100%;height:auto}
.af-breath{fill:var(--cc);fill-opacity:.16;stroke:var(--cc);stroke-opacity:.5;stroke-width:1.5}
.af-mid{cursor:pointer}
.af-cw{font:500 12px var(--mono);letter-spacing:.22em}
.af-n{cursor:pointer;outline:none;transition:opacity .35s}
.af-n .af-core{transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-box:fill-box;transform-origin:center}
.af-n:hover .af-core{transform:scale(1.05)}
.af-n.on .af-core{transform:scale(1.08)}
.af-n .af-sel{opacity:0;transition:opacity .3s;transform-box:fill-box;transform-origin:center}
.af-n.on .af-sel{opacity:1;animation:afspin 16s linear infinite}
.af-n:focus-visible .af-sel{opacity:.8}
.af-n.dim{opacity:.45}
.af-emo{font-size:28px;pointer-events:none}
.af-lab{font:500 12.5px var(--mono);letter-spacing:.16em;pointer-events:none}
.af-edge,.af-spoke{transition:opacity .45s}
.af-edge.dim,.af-spoke.dim{opacity:.25}
@keyframes afspin{to{transform:rotate(360deg)}}
.af-side{min-height:300px}
.af-side .af-k{margin:0 0 4px;font:500 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase}
.af-side h4{margin:0 0 .45em;font:500 clamp(1.4rem,2.4vw,1.8rem)/1.2 var(--serif)}
.af-side p{margin:0 0 .8em}
.af-motif{font:italic 400 1.08rem/1.5 var(--serif);color:var(--soft)}
.af-q b{display:block;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.af-chips{display:flex;flex-wrap:wrap;gap:6px}
.af-chips span{font:400 12px var(--mono);letter-spacing:.06em;padding:5px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 60%,transparent);background:color-mix(in srgb,var(--c) 12%,transparent)}
.af-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.af-list button{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--text);font:400 12.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:left;cursor:pointer}
.af-list button:hover{border-color:var(--line2)}
.af-list i,.af-with i{flex:none;width:10px;height:10px;border-radius:50%}
.af-list small{flex-basis:100%;padding-left:20px;font:300 13px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.af-with{margin:14px 0 10px;border-top:1px solid var(--line);padding-top:12px}
.af-with>span{display:block;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.af-with ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.af-with li{display:grid;grid-template-columns:10px 1fr;column-gap:10px;font-size:14.5px;line-height:1.55;color:var(--soft)}
.af-with li i{margin-top:6px}
.af-wn{display:block;margin-bottom:2px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.af-src{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.af-back{min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--soft);font:400 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.af-back:hover{color:var(--text);border-color:var(--text)}
.af-plain{margin-top:14px;columns:2 320px;column-gap:28px}
.af-plain h4{margin:.8em 0 .3em}
.af-plain ul{margin:0;padding-left:1.1em;font-size:14.5px;color:var(--soft)}
.af.js .af-plain{display:none}
.af:not(.js) .af-body,.af:not(.js) .af-tabs{display:none}
@media (max-width:860px){ .af-body{grid-template-columns:1fr} .af-stage{max-width:520px;width:100%;margin:0 auto} .af-side{min-height:0} }
@media (max-width:560px){ .af-tab{padding:8px 11px;font-size:11px} .af-lab{font-size:17px;letter-spacing:.1em} .af-cw{font-size:16px} .af-emo{font-size:32px} }
@media (prefers-reduced-motion:reduce){ .af-n.on .af-sel{animation:none} }

/* Home · 846 ecoregions: the map of Earth's ecoregions, its colours, and why the work is hard (14 Oct 2026).
   The map is a picture of RESOLVE Ecoregions 2017 in its own colours; the legend's shades are in the book from v5 (Palette 8). */
.eco-map{margin-top:clamp(40px,6vw,72px)}
.em-fig{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--line)}
.em-fig figcaption a{color:var(--text);white-space:nowrap}
.em-fig figcaption{padding:12px 18px;border-top:1px solid var(--line);font:400 11.5px/1.6 var(--mono);letter-spacing:.06em;color:var(--muted)}
.em-text{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);margin-top:clamp(28px,4vw,44px);align-items:start}
.em-read h3{margin:0 0 .5em;font:500 clamp(1.5rem,2.6vw,2.1rem)/1.2 var(--serif)}
.em-read p{color:var(--soft)}
.em-legend{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.em-legend li{border-bottom:1px solid var(--line)}
.em-legend li>button,.em-legend li.em-rock{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:12px;width:100%;min-height:40px;padding:7px 6px;font:inherit;font-size:14px;color:var(--soft);text-align:left;background:none;border:0;border-radius:8px;cursor:pointer}
.em-legend li.em-rock{cursor:default}
.em-legend li>button:hover{background:rgba(242,240,233,.05);color:var(--text)}
.em-legend li>button.on{background:rgba(242,240,233,.09);color:var(--text);box-shadow:inset 2px 0 0 var(--text)}
.em-strip{display:flex;height:12px;border-radius:3px;overflow:hidden}
.em-strip i{flex:1;opacity:.74}
.em-rock .em-strip{width:16px}
.em-name small{color:var(--muted);font-size:12px}
.em-n{font:500 12px var(--mono);letter-spacing:.08em;color:var(--text)}
.em-serious{margin-top:clamp(36px,5vw,60px);padding:clamp(22px,3.5vw,40px);border-radius:var(--radius);background:var(--card);border:1px solid var(--line);border-left:3px solid var(--aquatic)}
.em-serious .em-big{margin:.35em 0 .5em;font:500 clamp(1.5rem,3vw,2.3rem)/1.2 var(--serif);color:var(--text)}
.em-serious p:last-child{margin:0;color:var(--soft);max-width:62ch}
@media (max-width:860px){ .em-text{grid-template-columns:1fr} }
@media (max-width:560px){ .em-legend li>button,.em-legend li.em-rock{grid-template-columns:60px 1fr auto;font-size:13.5px} .em-fig{border-radius:14px} }

/* Home · the Atlas's map, interactive (14 Oct 2026): toolbar, map, card, realm chips. Colours: the book's tokens; the map's own data colours. */
.em-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}
.em-find{flex:1 1 260px;display:block}
.em-find input{width:100%;min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid var(--line2);background:var(--bg);color:var(--text);font:300 15px var(--sans)}
.em-find input::placeholder{color:var(--muted)}
.em-acts{display:flex;flex-wrap:wrap;gap:6px}
.em-act{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--soft);font:400 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.em-act i{width:8px;height:8px;border-radius:50%;opacity:.45}
.em-act.on{color:var(--text);border-color:rgba(242,240,233,.45)} .em-act.on i{opacity:1}
.em-act:hover{color:var(--text)}
.em-wrap{position:relative;display:grid;grid-template-columns:1fr}
.em-fig.em-open .em-wrap{grid-template-columns:minmax(0,1fr) 340px}
.em-map{position:relative;z-index:0;isolation:isolate;height:clamp(360px,64vh,640px);background:var(--bg)}  /* its own stacking layer: Leaflet's panes (z 400–1000) stay inside the map, under the header */
.em-map.leaflet-container{background:var(--bg);font-family:var(--sans)}
.em-poster{display:block;width:100%;height:100%;object-fit:cover}
.em-map.em-live .em-poster{display:none}
.em-loading{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);margin:0;padding:6px 12px;border-radius:999px;background:rgba(10,10,14,.8);font:400 11px var(--mono);letter-spacing:.1em;color:var(--soft)}
.em-map .leaflet-control-zoom a{background:rgba(17,17,25,.92);color:var(--text);border-color:var(--line2);width:36px;height:36px;line-height:34px}
.em-map .leaflet-control-zoom a:hover{background:rgba(242,240,233,.1)}
.em-map .leaflet-control-attribution{display:block!important;background:rgba(10,10,14,.7);color:var(--muted);font:400 10px var(--mono)}
.em-map .leaflet-control-attribution a{color:var(--soft)}
.em-tt{background:rgba(17,17,25,.95);color:var(--text);border:1px solid var(--line2);border-radius:8px;font:400 12.5px var(--sans);box-shadow:none;padding:5px 9px}
.em-tt::before{display:none}
.em-card{position:relative;max-height:clamp(360px,64vh,640px);overflow:auto;padding:22px 22px 20px;border-left:1px solid var(--line);background:var(--card2)}
.em-card[hidden]{display:none}
.em-card h4{margin:.1em 0 .4em;font:500 1.45rem/1.2 var(--serif);padding-right:30px}
.em-k{margin:0;font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.em-biome{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:14px;color:var(--soft)}
.em-biome i{flex:none;width:14px;height:14px;border-radius:4px;opacity:.85}
.em-card dl{margin:0;display:grid;gap:2px}
.em-row{display:grid;grid-template-columns:118px 1fr;gap:10px;padding:6px 0;border-top:1px solid var(--line);font-size:14px}
.em-row dt{font:400 11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.em-row dd{margin:0;color:var(--text)}
.em-oe{margin-top:16px}
.em-oe .em-k{margin-bottom:6px}
.em-src{margin:10px 0 0;font:400 11.5px/1.5 var(--mono);color:var(--muted)}
.em-src a{color:var(--soft)}
.em-more{display:inline-flex;margin-top:14px;min-height:44px;align-items:center;color:var(--text);font:500 13px var(--sans)}
.em-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--text);font-size:20px;line-height:1;cursor:pointer}
.em-realms{display:flex;flex-wrap:wrap;gap:6px;padding:12px;border-top:1px solid var(--line)}
.em-realm{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--soft);font:400 13px var(--sans);cursor:pointer}
.em-realm:hover{border-color:var(--line2);color:var(--text)}
.em-realm{transition:opacity .25s,border-color .25s,background .25s}
.em-realm.on{border-color:var(--text);background:rgba(242,240,233,.1);color:var(--text)}
.em-realms.has-sel .em-realm:not(.on){opacity:.4}
.em-realms.has-sel .em-realm:not(.on):hover{opacity:.75}
.em-legend.has-sel li>button:not(.on){opacity:.45}
.em-rid,.em-rc{font:500 11px var(--mono);letter-spacing:.06em;color:var(--muted)}
.em-rc{color:var(--text)}
.em-stats{margin:0;padding:10px 14px;border-top:1px solid var(--line);font:400 12px var(--mono);letter-spacing:.06em;color:var(--soft);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.em-stats b{color:var(--text);font-weight:500}
.em-hint{margin-left:auto;color:var(--muted)}
@media (max-width:860px){ .em-fig.em-open .em-wrap{grid-template-columns:1fr} .em-card{border-left:0;border-top:1px solid var(--line);max-height:none} .em-map{height:58vh;min-height:340px} .em-hint{margin-left:0} }

/* Mission · 04 / The global goals (14 Oct 2026): the bridge to the UN Sustainable Development Goals, with the UN's own icons.
   The icons are the UN's files, shown whole and unchanged: square, never rounded, recoloured, cropped or dimmed. A chosen Goal is marked
   by a ring around the icon, outside it. Everything else uses the page's own tokens and the aspect colours. */
.sdg-key{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px}
.sdg-fit{display:inline-flex;align-items:center;gap:7px;margin:0;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.sdg-fit::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line2)}
.sdg-fit-core::before{background:var(--plant)} .sdg-fit-strong::before{background:var(--algae)} .sdg-fit-part::before{background:var(--insect)}
.sdg-fit-diff::before{background:var(--animal)} .sdg-fit-none::before{background:transparent;border:1px solid var(--soft)}
.sdg-key .sdg-fit{padding:5px 10px;border:1px solid var(--line);border-radius:999px}
.sdg-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px}
.sdg-tile{display:flex;flex-direction:column;gap:8px;width:100%;padding:0;background:none;border:0;color:var(--text);cursor:pointer;text-align:left}
.sdg-tile img{display:block;width:100%;height:auto;outline:2px solid transparent;outline-offset:4px;transition:outline-color .2s,transform .2s}
.sdg-tile:hover img{transform:translateY(-2px)}
.sdg-tile.on img{outline-color:var(--text)}
.sdg-tile:focus-visible{outline:none} .sdg-tile:focus-visible img{outline-color:var(--soft)}
.sdg-tfit{font-size:10px;letter-spacing:.06em;line-height:1.3}
.sdg-tfit.sdg-fit{font-size:10px}
.sdg-detail{margin-top:26px}
.sdg-d{display:grid;grid-template-columns:minmax(160px,260px) 1fr;gap:clamp(18px,3vw,40px);align-items:start;padding:clamp(18px,3vw,32px);background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.sdg-d+.sdg-d{margin-top:16px}
#global-goals.js .sdg-d:not(.on){display:none}
#global-goals.js .sdg-d+.sdg-d{margin-top:0}
.sdg-d-icon{display:block;width:100%;height:auto}
.sdg-d-text h3{margin:.3em 0 .5em;font:500 clamp(1.5rem,2.6vw,2.1rem)/1.2 var(--serif)}
.sdg-d-text h4{margin:1.2em 0 .4em;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sdg-d-text p{margin:0 0 .6em;color:var(--soft)}
.sdg-un{margin:0;padding:12px 16px;border-left:2px solid var(--line2);background:rgba(242,240,233,.03)}
.sdg-un p{margin:0;font:400 1.08rem/1.5 var(--serif);color:var(--text)}
.sdg-un cite{display:block;margin-top:6px;font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--muted)}
.sdg-tg{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sdg-tg li{padding:8px 0;border-top:1px solid var(--line);color:var(--soft);font-size:15px}
.sdg-tg b{display:inline-block;min-width:3.4em;margin-right:8px;font:500 12px var(--mono);color:var(--text)}
.sdg-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:16px}
.sdg-meta-k{margin-right:4px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sdg-asp{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line2);font:400 12px var(--mono);letter-spacing:.06em;color:var(--soft)}
.sdg-asp::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.sdg-see{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;color:var(--text);font:500 14px var(--sans)}
.sdg-diff{margin-top:22px}
.sdg-diff h3{margin-top:0}
.sdg-note{margin:16px 0 0;font-size:13.5px}
@media (max-width:700px){ .sdg-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .sdg-tfit{display:none} .sdg-d{grid-template-columns:1fr} .sdg-d-icon{max-width:180px} }

/* ── The living symbols glow (14 Oct 2026). The owner: "more animations with gradient glowing neon colors when I hover over life symbols".
   On hover each symbol takes its culture's moving neon gradient (defs in life.py: the culture's colour and light shade with a sister
   culture's, all from the book), glows in the same colours, and moves the way it lives. Still for reduced motion. ── */
.life,.cg,.frieze .cr{pointer-events:auto}
.life svg,.cg svg,.frieze .cr svg{transition:filter .35s ease,opacity .35s ease;transform-box:fill-box}
.life{transition:opacity .35s ease}
.life:hover,.frieze .cr:hover{opacity:1}
.cg{transition:opacity .35s ease}
.card:hover .cg,.cg:hover{opacity:1}
.life-plant{--gl:#C9E6B5;--gb:#96C27B} .life-animal{--gl:#F4B6A5;--gb:#D6826C} .life-insect{--gl:#FFE9B8;--gb:#F3D99C} .life-fungi{--gl:#E6CBB5;--gb:#BC896A}
.life-algae{--gl:#9FE3DA;--gb:#43B7AB} .life-aquatic{--gl:#9CCFE3;--gb:#3C94B1} .life-bacteria{--gl:#D6CCEB;--gb:#A495C1} .life-human{--gl:#C7CBF5;--gb:#505679}
.life:hover svg,.cg:hover svg,.card:hover .cg svg,.frieze .cr:hover svg{filter:drop-shadow(0 0 2px var(--gl)) drop-shadow(0 0 8px var(--gl)) drop-shadow(0 0 18px var(--gb))}
.life:hover .life-plant,.cg:hover .life-plant,.card:hover .cg .life-plant,.frieze .cr:hover .life-plant{stroke:url(#neon-plant)}
.life:hover .life-animal,.cg:hover .life-animal,.card:hover .cg .life-animal,.frieze .cr:hover .life-animal{stroke:url(#neon-animal)}
.life:hover .life-insect,.cg:hover .life-insect,.card:hover .cg .life-insect,.frieze .cr:hover .life-insect{stroke:url(#neon-insect)}
.life:hover .life-fungi,.cg:hover .life-fungi,.card:hover .cg .life-fungi,.frieze .cr:hover .life-fungi{stroke:url(#neon-fungi)}
.life:hover .life-algae,.cg:hover .life-algae,.card:hover .cg .life-algae,.frieze .cr:hover .life-algae{stroke:url(#neon-algae)}
.life:hover .life-aquatic,.cg:hover .life-aquatic,.card:hover .cg .life-aquatic,.frieze .cr:hover .life-aquatic{stroke:url(#neon-aquatic)}
.life:hover .life-bacteria,.cg:hover .life-bacteria,.card:hover .cg .life-bacteria,.frieze .cr:hover .life-bacteria{stroke:url(#neon-bacteria)}
.life:hover .life-human,.cg:hover .life-human,.card:hover .cg .life-human,.frieze .cr:hover .life-human{stroke:url(#neon-human)}
/* how each one moves when it wakes */
.life:hover .v-fish,.frieze .cr:hover .v-fish,.card:hover .v-fish{animation:dart 1.1s cubic-bezier(.3,.1,.2,1) infinite}
.life:hover .v-turtle,.frieze .cr:hover .v-turtle,.card:hover .v-turtle{animation:paddle 1.6s ease-in-out infinite}
.life:hover .v-jelly,.frieze .cr:hover .v-jelly,.card:hover .v-jelly{animation:pulse 1.2s ease-in-out infinite}
.life:hover .v-butterfly,.frieze .cr:hover .v-butterfly,.card:hover .v-butterfly{animation:flutter .32s ease-in-out infinite}
.life:hover .v-bee,.frieze .cr:hover .v-bee,.card:hover .v-bee{animation:buzz .5s linear infinite}
.life:hover .v-dragonfly,.frieze .cr:hover .v-dragonfly,.card:hover .v-dragonfly{animation:zig 1.4s ease-in-out infinite}
.life:hover .v-frog,.frieze .cr:hover .v-frog,.card:hover .v-frog{animation:hop .9s cubic-bezier(.3,0,.3,1) infinite}
.life:hover .v-monkey,.frieze .cr:hover .v-monkey,.card:hover .v-monkey{transform-origin:45% 12%;animation:mswing 1.3s ease-in-out infinite}
.life:hover .v-gorilla,.frieze .cr:hover .v-gorilla,.card:hover .v-gorilla{transform-origin:50% 100%;animation:thump .7s ease-in-out infinite}
.life:hover .v-jaguar,.frieze .cr:hover .v-jaguar,.card:hover .v-jaguar{animation:prowl 1.6s ease-in-out infinite}
.life:hover .v-toucan,.frieze .cr:hover .v-toucan,.card:hover .v-toucan,.life:hover .v-bird,.frieze .cr:hover .v-bird,.card:hover .v-bird{animation:tilt 1.2s ease-in-out infinite}
.life:hover .v-banana,.frieze .cr:hover .v-banana,.card:hover .v-banana,.life:hover .v-sprout,.frieze .cr:hover .v-sprout,.card:hover .v-sprout,
.life:hover .v-fern,.frieze .cr:hover .v-fern,.card:hover .v-fern{transform-origin:15% 95%;animation:rustle 1.1s ease-in-out infinite}
.life:hover .v-palm,.frieze .cr:hover .v-palm,.card:hover .v-palm,.life:hover .v-kapok,.frieze .cr:hover .v-kapok,.card:hover .v-kapok,
.life:hover .v-mangrove,.frieze .cr:hover .v-mangrove,.card:hover .v-mangrove,.life:hover .v-conifer,.frieze .cr:hover .v-conifer,.card:hover .v-conifer,
.life:hover .v-acacia,.frieze .cr:hover .v-acacia,.card:hover .v-acacia{transform-origin:50% 95%;animation:treesway 1.8s ease-in-out infinite}
.life:hover .v-kelp,.frieze .cr:hover .v-kelp,.card:hover .v-kelp,.life:hover .v-strands,.frieze .cr:hover .v-strands,.card:hover .v-strands{transform-origin:50% 100%;animation:wave 1.4s ease-in-out infinite}
.life:hover .v-diatom,.frieze .cr:hover .v-diatom,.card:hover .v-diatom{animation:spin 6s linear infinite}
.life:hover .v-mushroom,.frieze .cr:hover .v-mushroom,.card:hover .v-mushroom,.life:hover .v-tall,.frieze .cr:hover .v-tall,.card:hover .v-tall,
.life:hover .v-bracket,.frieze .cr:hover .v-bracket,.card:hover .v-bracket{animation:puff 1.3s ease-in-out infinite}
.life:hover .v-rods,.frieze .cr:hover .v-rods,.card:hover .v-rods,.life:hover .v-spiral,.frieze .cr:hover .v-spiral,.card:hover .v-spiral,
.life:hover .v-chain,.frieze .cr:hover .v-chain,.card:hover .v-chain{animation:wiggle .8s ease-in-out infinite}
.life:hover .v-person,.frieze .cr:hover .v-person,.card:hover .v-person,.life:hover .v-together,.frieze .cr:hover .v-together,.card:hover .v-together{animation:swing 1.4s ease-in-out infinite}
@keyframes dart{0%{transform:translateX(0)}35%{transform:translateX(14%)}50%{transform:translateX(12%) rotate(-4deg)}100%{transform:translateX(0)}}
@keyframes paddle{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(6%,-3%) rotate(4deg)}}
@keyframes pulse{0%,100%{transform:scale(1,1)}40%{transform:scale(1.08,.9) translateY(-4%)}70%{transform:scale(.95,1.06) translateY(-8%)}}
@keyframes buzz{0%{transform:translate(0,0)}25%{transform:translate(3%,-3%) rotate(3deg)}50%{transform:translate(-2%,2%)}75%{transform:translate(2%,3%) rotate(-3deg)}100%{transform:translate(0,0)}}
@keyframes zig{0%,100%{transform:translate(0,0)}25%{transform:translate(8%,-6%)}50%{transform:translate(-6%,-10%)}75%{transform:translate(4%,-4%)}}
@keyframes hop{0%,100%{transform:translateY(0) scale(1,1)}20%{transform:translateY(2%) scale(1.06,.92)}50%{transform:translateY(-22%) scale(.96,1.05)}80%{transform:translateY(0) scale(1.04,.95)}}
@keyframes mswing{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes thump{0%,100%{transform:scale(1)}20%{transform:scale(1.06,.96)}40%{transform:scale(1)}60%{transform:scale(1.06,.96)}}
@keyframes prowl{0%,100%{transform:translateX(-6%)}50%{transform:translateX(8%) translateY(2%)}}
@keyframes treesway{0%,100%{transform:rotate(0)}30%{transform:rotate(4deg)}70%{transform:rotate(-3deg)}}
@keyframes tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg) translateY(-3%)}}
@keyframes rustle{0%,100%{transform:rotate(0)}30%{transform:rotate(6deg)}65%{transform:rotate(-4deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes puff{0%,100%{transform:scale(1)}50%{transform:scale(1.1) translateY(-3%)}}
@keyframes wiggle{0%,100%{transform:translateX(0) skewX(0)}33%{transform:translateX(4%) skewX(6deg)}66%{transform:translateX(-4%) skewX(-6deg)}}
@keyframes swing{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg) translateY(-2%)}}
.frieze{row-gap:14px}
.frieze .cr{transition:transform .3s ease}
.frieze .cr:hover{transform:translateY(-4px)}

/* ── The jungle canopy and the creatures that cross (14 Oct 2026; chosen: "Rich"). Wide screens only; behind the words. ── */
.canopy{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;display:none}
.cn{position:absolute;width:240px;height:340px;opacity:.55;overflow:visible}
.cn *{vector-effect:non-scaling-stroke}
.cn .cn-fill{fill:var(--plant);fill-opacity:.16}
.cn-tl{top:56px;left:0;transform:translateY(calc(var(--sy,0) * -0.06px))}
.cn-tr{top:56px;right:0;transform:scaleX(-1) translateY(calc(var(--sy,0) * -0.04px))}
.cn-bl{bottom:0;left:0;transform:translateY(calc(var(--sy,0) * 0.03px))}
.cn-br{bottom:0;right:0;transform:scaleX(-1) translateY(calc(var(--sy,0) * 0.05px))}
.cn-sway{transform-box:view-box;animation:cnsway 10s ease-in-out infinite}
.cn-sway.b,.cn-sway.d{animation-name:cnsway2}
.cn-monkey{transform-box:view-box;animation:cnmonkey 3.4s ease-in-out infinite}
@keyframes cnmonkey{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
.cn-monkey *{vector-effect:non-scaling-stroke}
@keyframes cnsway{0%,100%{transform:rotate(0)}50%{transform:rotate(2.6deg)}}
@keyframes cnsway2{0%,100%{transform:rotate(0)}50%{transform:rotate(-3.2deg)}}
@media (min-width:1280px){ .canopy{display:block} }
.fauna{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.flyer{position:absolute;left:0;top:0;width:42px;height:42px;will-change:transform}
.flyer .fl-in{display:block;width:100%;height:100%;transform:scaleX(var(--flip,1))}
.flyer svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 3px var(--gl)) drop-shadow(0 0 10px var(--gb))}
.flyer svg path,.flyer svg circle{vector-effect:non-scaling-stroke}
.flyer .life-insect{animation:flutter .28s ease-in-out infinite}
.flyer .life-animal{animation:glide 1.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .canopy .cn-sway,.flyer svg{animation:none!important} .fauna{display:none} }

/* Action · "Nature gets paid first" (owner, 14 Oct 2026): the line under the stakeholders, in the Plant colour of the book */
.nature-first{margin:18px 0 0;font:500 clamp(1.3rem,2.4vw,1.75rem)/1.25 var(--serif);color:var(--plant-l)}
.nature-first b{font-weight:500;color:inherit}

/* ── Newsroom and Media Kit (14 Oct 2026). The owner: "I need using our brand to create the News room and the Media Kit please".
   Only the book's colours: the base, the 8 Cultures and their light shades; the day plate is cream #F2F0E9 for the Day lock-ups. ── */
.nr-hero,.mk-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.nr-empty{display:flex;gap:22px;align-items:center;max-width:760px;padding:28px}
.nr-empty .nr-ring .ring{width:72px;height:72px;display:block;animation:rol-turn 20s linear infinite}
.nr-empty h3{font:400 clamp(1.5rem,2.6vw,2rem)/1.2 var(--serif);margin:0 0 6px}
.nr-empty p{margin:0}
.nr-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:860px}
.nr-item{display:block;text-decoration:none;color:inherit}
.nr-item time{font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--plant-l)}
.nr-item h3{font:400 1.6rem/1.2 var(--serif);margin:8px 0}
.nr-item:hover{border-color:var(--line2)}
.nr-go{font:500 14px var(--sans)}
.mk-logos{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-bottom:22px}
.mk-logo{margin:0;padding:0;overflow:hidden}
.mk-plate{height:170px;display:flex;align-items:center;justify-content:center;padding:26px;background:var(--bg);border-bottom:1px solid var(--line)}
.mk-plate img{max-width:100%;max-height:100%;display:block}
.mk-logo.day .mk-plate{background:#F2F0E9}
.mk-plate .mk-ring{width:112px;height:112px;animation:rol-turn 20s linear infinite}
.mk-logo figcaption{padding:16px 20px 14px}
.mk-logo h3{font-size:1.1rem;margin:0}
.mk-logo .links{margin-top:6px}
.mk-rules{margin-bottom:8px}
.mk-boiler p{color:var(--soft)}
.mk-boiler .btn{min-height:38px;margin-top:6px}
.mk-facts{margin:28px 0 0;display:grid;border-top:1px solid var(--line);max-width:980px}
.mk-facts div{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:12px 0;border-bottom:1px solid var(--line)}
.mk-facts dt{font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.mk-facts dd{margin:0}
.frieze.mk-syms{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;padding:0;align-items:stretch}
.mk-syms .cr.mk-sym{width:auto;height:auto;opacity:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;color:inherit}
.mk-syms .cr.mk-sym:hover{border-color:var(--line2)}
.mk-syms .cr.mk-sym svg{width:56px;height:56px;margin-bottom:6px}
.mk-sym span{font:500 13px var(--sans);text-align:center}
.mk-sym small{font:400 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (max-width:640px){ .mk-facts div{grid-template-columns:1fr;gap:4px} .nr-empty{flex-direction:column;align-items:flex-start} }

/* ── Twenty more living symbols (14 Oct 2026). The owner: "I need more please let's add another 20", "Like Polar Beer Wheal Pigune Uni Corn".
   How each new one moves when it wakes; the firefly blinks its lantern. ── */
.life:hover .v-ant,.frieze .cr:hover .v-ant,.card:hover .v-ant{animation:prowl 1.2s ease-in-out infinite}
.life:hover .v-crab,.frieze .cr:hover .v-crab,.card:hover .v-crab{animation:prowl 1.4s ease-in-out infinite}
.life:hover .v-polarbear,.frieze .cr:hover .v-polarbear,.card:hover .v-polarbear{animation:prowl 1.8s ease-in-out infinite}
.life:hover .v-ladybird,.frieze .cr:hover .v-ladybird,.card:hover .v-ladybird{animation:buzz .6s linear infinite}
.life:hover .v-firefly,.frieze .cr:hover .v-firefly,.card:hover .v-firefly{animation:blink 1.2s ease-in-out infinite}
.life:hover .v-morel,.frieze .cr:hover .v-morel,.card:hover .v-morel{animation:puff 1.3s ease-in-out infinite}
.life:hover .v-puffball,.frieze .cr:hover .v-puffball,.card:hover .v-puffball{animation:puff 1.3s ease-in-out infinite}
.life:hover .v-mycelium,.frieze .cr:hover .v-mycelium,.card:hover .v-mycelium{animation:puff 1.3s ease-in-out infinite}
.life:hover .v-stromatolite,.frieze .cr:hover .v-stromatolite,.card:hover .v-stromatolite{animation:puff 1.3s ease-in-out infinite}
.life:hover .v-sealettuce,.frieze .cr:hover .v-sealettuce,.card:hover .v-sealettuce{transform-origin:50% 100%;animation:wave 1.4s ease-in-out infinite}
.life:hover .v-volvox,.frieze .cr:hover .v-volvox,.card:hover .v-volvox{animation:spin 6s linear infinite}
.life:hover .v-whale,.frieze .cr:hover .v-whale,.card:hover .v-whale{animation:paddle 1.6s ease-in-out infinite}
.life:hover .v-octopus,.frieze .cr:hover .v-octopus,.card:hover .v-octopus{animation:pulse 1.2s ease-in-out infinite}
.life:hover .v-seahorse,.frieze .cr:hover .v-seahorse,.card:hover .v-seahorse{animation:bob 1.4s ease-in-out infinite}
.life:hover .v-penguin,.frieze .cr:hover .v-penguin,.card:hover .v-penguin{transform-origin:50% 100%;animation:swing 1.4s ease-in-out infinite}
.life:hover .v-unicorn,.frieze .cr:hover .v-unicorn,.card:hover .v-unicorn{animation:tilt 1.2s ease-in-out infinite}
.life:hover .v-cocci,.frieze .cr:hover .v-cocci,.card:hover .v-cocci{animation:wiggle .8s ease-in-out infinite}
.life:hover .v-child,.frieze .cr:hover .v-child,.card:hover .v-child{animation:hop .9s cubic-bezier(.3,0,.3,1) infinite}
.life:hover .v-elder,.frieze .cr:hover .v-elder,.card:hover .v-elder{animation:swing 1.4s ease-in-out infinite}
.life:hover .v-family,.frieze .cr:hover .v-family,.card:hover .v-family{animation:swing 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* ── Our sponsors (14 Oct 2026). The owner: "Write here our sponsors", then: "The cultures are our sponsors". The footer's living
   symbols are introduced as our sponsors; js/wild.js shuffles them (a new order every visit, ever changing, wilder with more symbols). ── */
footer.site .sponsors{display:grid;gap:4px;margin-bottom:6px}
footer.site .sponsors .eyebrow{margin:0;color:var(--plant-l)}
footer.site .sp-line{margin:0;font:italic 400 clamp(1.05rem,1.5vw,1.25rem)/1.45 var(--serif);color:var(--soft);max-width:44em}
.frieze.wild .cr{rotate:var(--jr,0deg);scale:var(--js,1);translate:0 var(--jy,0px);
  transition:transform .3s ease,rotate 1.2s cubic-bezier(.2,.8,.2,1),scale 1.2s cubic-bezier(.2,.8,.2,1),translate 1.2s cubic-bezier(.2,.8,.2,1)}

/* ===== The living symbols pop up all over the site (15 Oct 2026; js/wild.js; Brand Book v9 §07 "Our sponsors · all over the site").
   The owner: "I need them to pop up in random places". Each pops in, glows and moves the way it lives, then pops out. Only in empty
   space (the script tests the place first); under the top bar; no click of its own. Nothing for reduced motion or narrow screens. */
.popl{position:absolute;left:0;top:0;width:100%;height:0;overflow:visible;z-index:30;pointer-events:none}
.popl .cr{position:absolute;display:block;pointer-events:none;opacity:.92;transform-origin:50% 60%}
.popl .cr svg{width:100%;height:100%;display:block;overflow:visible;transform-box:fill-box}
.popl .cr svg *{vector-effect:non-scaling-stroke}
.popl .cr.pop-in{animation:popin .55s cubic-bezier(.2,1.6,.4,1) both}
.popl .cr.pop-out{animation:popout .4s cubic-bezier(.5,0,.8,.4) both}
@keyframes popin{0%{opacity:0;transform:scale(0) rotate(0)}60%{opacity:1;transform:scale(1.18) rotate(var(--pr))}100%{opacity:.92;transform:scale(1) rotate(var(--pr))}}
@keyframes popout{0%{opacity:.92;transform:scale(1) rotate(var(--pr))}100%{opacity:0;transform:scale(0) rotate(calc(var(--pr) * -1))}}
.popl .cr{opacity:1}
.popl .cr svg{filter:drop-shadow(0 0 2px var(--gl)) drop-shadow(0 0 8px var(--gl)) drop-shadow(0 0 18px var(--gb))}
.popl .cr .life-plant{stroke:url(#neon-plant)}
.popl .cr .life-animal{stroke:url(#neon-animal)}
.popl .cr .life-insect{stroke:url(#neon-insect)}
.popl .cr .life-fungi{stroke:url(#neon-fungi)}
.popl .cr .life-algae{stroke:url(#neon-algae)}
.popl .cr .life-aquatic{stroke:url(#neon-aquatic)}
.popl .cr .life-bacteria{stroke:url(#neon-bacteria)}
.popl .cr .life-human{stroke:url(#neon-human)}
.popl .cr .v-fish{animation:dart 1.1s cubic-bezier(.3,.1,.2,1) infinite}
.popl .cr .v-turtle{animation:paddle 1.6s ease-in-out infinite}
.popl .cr .v-jelly{animation:pulse 1.2s ease-in-out infinite}
.popl .cr .v-butterfly{animation:flutter .32s ease-in-out infinite}
.popl .cr .v-bee{animation:buzz .5s linear infinite}
.popl .cr .v-dragonfly{animation:zig 1.4s ease-in-out infinite}
.popl .cr .v-frog{animation:hop .9s cubic-bezier(.3,0,.3,1) infinite}
.popl .cr .v-monkey{transform-origin:45% 12%;animation:mswing 1.3s ease-in-out infinite}
.popl .cr .v-gorilla{transform-origin:50% 100%;animation:thump .7s ease-in-out infinite}
.popl .cr .v-jaguar{animation:prowl 1.6s ease-in-out infinite}
.popl .cr .v-toucan,.popl .cr .v-bird{animation:tilt 1.2s ease-in-out infinite}
.popl .cr .v-banana,.popl .cr .v-sprout,.popl .cr .v-fern{transform-origin:15% 95%;animation:rustle 1.1s ease-in-out infinite}
.popl .cr .v-palm,.popl .cr .v-kapok,.popl .cr .v-mangrove,.popl .cr .v-conifer,.popl .cr .v-acacia{transform-origin:50% 95%;animation:treesway 1.8s ease-in-out infinite}
.popl .cr .v-kelp,.popl .cr .v-strands{transform-origin:50% 100%;animation:wave 1.4s ease-in-out infinite}
.popl .cr .v-diatom{animation:spin 6s linear infinite}
.popl .cr .v-mushroom,.popl .cr .v-tall,.popl .cr .v-bracket{animation:puff 1.3s ease-in-out infinite}
.popl .cr .v-rods,.popl .cr .v-spiral,.popl .cr .v-chain{animation:wiggle .8s ease-in-out infinite}
.popl .cr .v-person,.popl .cr .v-together{animation:swing 1.4s ease-in-out infinite}
.popl .cr{transform:translateY(-4px)}
.popl .cr .v-ant{animation:prowl 1.2s ease-in-out infinite}
.popl .cr .v-crab{animation:prowl 1.4s ease-in-out infinite}
.popl .cr .v-polarbear{animation:prowl 1.8s ease-in-out infinite}
.popl .cr .v-ladybird{animation:buzz .6s linear infinite}
.popl .cr .v-firefly{animation:blink 1.2s ease-in-out infinite}
.popl .cr .v-morel{animation:puff 1.3s ease-in-out infinite}
.popl .cr .v-puffball{animation:puff 1.3s ease-in-out infinite}
.popl .cr .v-mycelium{animation:puff 1.3s ease-in-out infinite}
.popl .cr .v-stromatolite{animation:puff 1.3s ease-in-out infinite}
.popl .cr .v-sealettuce{transform-origin:50% 100%;animation:wave 1.4s ease-in-out infinite}
.popl .cr .v-volvox{animation:spin 6s linear infinite}
.popl .cr .v-whale{animation:paddle 1.6s ease-in-out infinite}
.popl .cr .v-octopus{animation:pulse 1.2s ease-in-out infinite}
.popl .cr .v-seahorse{animation:bob 1.4s ease-in-out infinite}
.popl .cr .v-penguin{transform-origin:50% 100%;animation:swing 1.4s ease-in-out infinite}
.popl .cr .v-unicorn{animation:tilt 1.2s ease-in-out infinite}
.popl .cr .v-cocci{animation:wiggle .8s ease-in-out infinite}
.popl .cr .v-child{animation:hop .9s cubic-bezier(.3,0,.3,1) infinite}
.popl .cr .v-elder{animation:swing 1.4s ease-in-out infinite}
.popl .cr .v-family{animation:swing 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce),(max-width:699px){.popl{display:none}}
/* ===== The home map's own background (15 Oct 2026, js/basemap.js; Natural Earth). Names in the book's type and colours. */
.oc-labels .ocl{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;translate:-50% -50%;color:rgba(242,240,233,.62);
  text-shadow:0 0 2px #0A0A0E,0 0 5px #0A0A0E,0 0 9px #0A0A0E;line-height:1}
.oc-labels .ocl-o{font:italic 400 14px var(--serif);letter-spacing:.14em}
.oc-labels .ocl-s{font:italic 400 12px var(--serif);letter-spacing:.06em}
.oc-labels .ocl-c{font:400 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,240,233,.8)}
.oc-labels .ocl-k,.oc-labels .ocl-p{translate:0 -50%;font:400 11px var(--sans);display:flex;align-items:center;gap:4px}
.oc-labels .ocl-k{color:rgba(242,240,233,.8)}
.oc-labels .ocl i{width:4px;height:4px;border-radius:50%;background:rgba(242,240,233,.8);flex:none}
.oc-labels .ocl-k i{width:5px;height:5px;background:none;border:1px solid rgba(242,240,233,.8)}

/* ===== Day and night (15 Oct 2026; js/theme.js). The owner: a light/dark switch, "do not use Cercent for the dark use full moon".
   The switch: the sun (day) and the full moon (night), in the top bar. Night is the default and the brand's own ground.
   Day uses the Octa day paper the atlas already uses, and nothing else: paper #ECE4D2, ink #211C15 (rgb 48,41,31 for lines and
   faded words), raised surfaces rgba(255,253,248,.66/.96), fields #FBF7EE, bars rgba(240,234,222,.94); deep day colours of the
   aspects from the UI Library (Economic #9A6E08). The Cultures keep their colours on day paper; words take the day ink (book rule).
   Films and photos stay night: their words sit on dark pictures; the atlas diagrams stand on a night stage. */
.theme{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line2);border-radius:999px;margin-left:4px;flex:none}
.theme .th{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:0;background:none;
  color:var(--muted);cursor:pointer;padding:0;transition:background .2s,color .2s}
.theme .th:hover{color:var(--text)}
.theme .th[aria-pressed="true"]{background:var(--card2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
@media (max-width:860px){.theme{margin-left:0}}

html[data-octa-theme="day"]{
  --bg:#ECE4D2; --card:rgba(255,253,248,.66); --card2:rgba(255,253,248,.96); --text:#211C15;
  --line:rgba(48,41,31,.16); --line2:rgba(48,41,31,.28); --soft:rgba(48,41,31,.88); --muted:rgba(48,41,31,.74);
  --grid:rgba(48,41,31,.07);
  --human-l:#211C15; --animal-l:#211C15; --plant-l:#211C15; --insect-l:#211C15; --fungi-l:#211C15; --algae-l:#211C15; --aquatic-l:#211C15; --bacteria-l:#211C15;
  --ecological-l:#56532B; --economic-l:#9A6E08; --biological-l:#5A4226;
  color-scheme:light}
html[data-octa-theme="day"] body{background:var(--bg);color:var(--text)}
html[data-octa-theme="day"] [style*="--cl"]{--cl:#211C15!important}
html[data-octa-theme="day"] b,html[data-octa-theme="day"] strong{color:var(--text)}
html[data-octa-theme="day"] .card,html[data-octa-theme="day"] .em-card{box-shadow:0 2px 10px rgba(48,41,31,.07)}
html[data-octa-theme="day"] .top{background:rgba(240,234,222,.94)}
@media (max-width:860px){html[data-octa-theme="day"] .nav{background:#ECE4D2}}
html[data-octa-theme="day"] .btn.primary{background:#211C15;color:#ECE4D2;border-color:#211C15}
html[data-octa-theme="day"] .btn.primary:hover{background:transparent;color:#211C15;border-color:#211C15}
html[data-octa-theme="day"] .mk-logo.day .mk-plate{background:#FBF7EE}
/* the living symbols keep their Culture's colour on day paper (the light shades are for night) */
html[data-octa-theme="day"] .life-human{stroke:var(--human)} html[data-octa-theme="day"] .life-animal{stroke:var(--animal)}
html[data-octa-theme="day"] .life-plant{stroke:var(--plant)} html[data-octa-theme="day"] .life-insect{stroke:var(--insect)}
html[data-octa-theme="day"] .life-fungi{stroke:var(--fungi)} html[data-octa-theme="day"] .life-algae{stroke:var(--algae)}
html[data-octa-theme="day"] .life-aquatic{stroke:var(--aquatic)} html[data-octa-theme="day"] .life-bacteria{stroke:var(--bacteria)}
/* the home map on day paper */
html[data-octa-theme="day"] .em-map .leaflet-control-zoom a,html[data-octa-theme="day"] .em-tt{background:#FBF7EE;color:#211C15;border-color:rgba(48,41,31,.28)}
html[data-octa-theme="day"] .em-map .leaflet-control-zoom a:hover{background:#F0EADE}
html[data-octa-theme="day"] .em-map .leaflet-control-attribution,html[data-octa-theme="day"] .em-loading{background:rgba(251,247,238,.85);color:rgba(48,41,31,.74)}
html[data-octa-theme="day"] .em-legend li>button:hover{background:rgba(48,41,31,.05)}
html[data-octa-theme="day"] .em-legend li>button.on,html[data-octa-theme="day"] .em-realm.on{background:rgba(48,41,31,.08)}
html[data-octa-theme="day"] .em-act.on{border-color:rgba(48,41,31,.55)}
html[data-octa-theme="day"] .sdg-un{background:rgba(48,41,31,.03)}
html[data-octa-theme="day"] .oc-labels .ocl{color:rgba(48,41,31,.74);text-shadow:0 0 2px #FBF7EE,0 0 5px #FBF7EE,0 0 9px #FBF7EE}
html[data-octa-theme="day"] .oc-labels .ocl-c,html[data-octa-theme="day"] .oc-labels .ocl-k{color:rgba(48,41,31,.88)}
html[data-octa-theme="day"] .oc-labels .ocl i{background:rgba(48,41,31,.88)}
html[data-octa-theme="day"] .oc-labels .ocl-k i{background:none;border-color:rgba(48,41,31,.88)}
/* films, photos and the Ring of Life stay night: their words sit on dark pictures */
html[data-octa-theme="day"] :is(.film,.hero.still,.band,.rol,.tri-section,.osd-section,.oad-section){
  --bg:#0A0A0E; --card:#111119; --card2:#14141F; --text:#F2F0E9;
  --line:rgba(242,240,233,.10); --line2:rgba(242,240,233,.20); --soft:rgba(242,240,233,.80); --muted:rgba(242,240,233,.62); --grid:rgba(242,240,233,.04);
  --human-l:#C7CBF5; --animal-l:#F4B6A5; --plant-l:#C9E6B5; --insect-l:#FFE9B8; --fungi-l:#E6CBB5; --algae-l:#9FE3DA; --aquatic-l:#9CCFE3; --bacteria-l:#D6CCEB;
  --ecological-l:#DCD89A; --economic-l:#FFE9A8; --biological-l:#E3C3A0;
  color:var(--text)}
html[data-octa-theme="day"] :is(.film,.hero.still,.band,.rol,.tri-section,.osd-section,.oad-section) :is(b,strong){color:var(--text)}
html[data-octa-theme="day"] :is(.film,.hero.still,.band,.rol,.tri-section,.osd-section,.oad-section) .life-human{stroke:#C7CBF5} html[data-octa-theme="day"] :is(.film,.hero.still,.band,.rol,.tri-section,.osd-section,.oad-section) .life-animal{stroke:#F4B6A5}
html[data-octa-theme="day"] :is(.film,.hero.still,.band,.rol,.tri-section,.osd-section,.oad-section) .life-plant{stroke:#C9E6B5} html[data-octa-theme="day"] :is(.film,.hero.still,.band,.rol,.tri-section,.osd-section,.oad-section) .life-insect{stroke:#FFE9B8}
html[data-octa-theme="day"] :is(.film,.hero.still,.band,.rol,.tri-section,.osd-section,.oad-section) .life-fungi{stroke:#E6CBB5} html[data-octa-theme="day"] :is(.film,.hero.still,.band,.rol,.tri-section,.osd-section,.oad-section) .life-algae{stroke:#9FE3DA}
html[data-octa-theme="day"] :is(.film,.hero.still,.band,.rol,.tri-section,.osd-section,.oad-section) .life-aquatic{stroke:#9CCFE3} html[data-octa-theme="day"] :is(.film,.hero.still,.band,.rol,.tri-section,.osd-section,.oad-section) .life-bacteria{stroke:#D6CCEB}
html[data-octa-theme="day"] :is(.film,.hero.still,.band,.rol,.tri-section,.osd-section,.oad-section) .btn.primary{background:#F2F0E9;color:#0A0A0E;border-color:#F2F0E9}
/* the atlas's own diagrams (the three goals, the scales, the eight aspects) are drawn for night: on day paper they stand on a night stage */
html[data-octa-theme="day"] :is(.tri-section,.osd-section,.oad-section){background:#0A0A0E}
/* the night lock-ups are shown on night, the day ones on day paper, in either theme */
html[data-octa-theme="day"] .mk-logo:not(.day) .mk-plate{background:#0A0A0E}
.em-map .leaflet-control-zoom a.leaflet-disabled{background:rgba(17,17,25,.92);color:var(--muted);opacity:.45}
html[data-octa-theme="day"] .em-map .leaflet-control-zoom a.leaflet-disabled{background:#FBF7EE;color:rgba(48,41,31,.74)}

/* ===== The Octa Diagram of the eight cultures, from the atlas's Pillar 01 · Cultures (15 Oct 2026; build/atlas-octa-diagram.html).
   The atlas's own variables, as for the three goals triangle; on day paper it stands on a night stage. */
.atlas-octd{--cream:#F2F0E9;--border:rgba(242,240,233,0.08);--font-sans:'Plus Jakarta Sans',sans-serif;--font-serif:'Playfair Display',serif;--font-mono:'IBM Plex Mono',monospace;--radius-lg:20px;--radius-sm:10px;color:var(--cream);margin-top:clamp(28px,4vw,48px)}
html[data-octa-theme="day"] .atlas-octd{background:#0A0A0E;border-radius:20px;padding:clamp(16px,3vw,32px)}

/* ===== Sign in to Octa Curriculum (15 Oct 2026; sign-in.html). The button is Octa Platform's own (vendor/octa-signin/), night by
   default and its day style on day paper; the box sits in a card. */
.signin-box{margin:30px 0 22px;padding:clamp(20px,3vw,30px);max-width:520px;display:flex;flex-direction:column;gap:14px}
.signin-box p{margin:0;font-size:.95rem}
.signin-more{margin-top:8px}
html[data-octa-theme="day"] .octa-signin{--os-bg:#F2F0E9;--os-fg:#121319;--os-bd:rgba(18,19,25,.18);--os-hover:#E7E4DA;--os-men:#4A4842}
.signin .signin-more{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:820px}
@media (max-width:700px){.signin .signin-more{grid-template-columns:1fr}}