@font-face{font-family:"Playfair Display";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/face-1.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/face-2.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/face-3.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/face-4.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/face-5.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/face-6.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/face-7.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/face-8.woff2) format("woff2")}
/* Octa News · front page (design v2, 20 Oct 2026) · the Brand Book v1.0 tokens: Octa Production's book, the House's day paper, the eight aspects.
   The map's sea, land and borders are Octa Maps' own (maps/builder/styles.mjs). */
:root{--bg:#121319;--card:rgba(242,240,233,.03);--line:rgba(242,240,233,.12);--ink:#F2F0E9;--ink3:rgba(242,240,233,.66);
  --sea:#21282f;--land:#121319;--border:#434447;--sel:#222228;
  --serif:"Playfair Display",Georgia,serif;--sans:"Plus Jakarta Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--ribh:58px;color-scheme:dark}
html[data-theme="day"]{--bg:#F2F0E9;--card:rgba(18,19,25,.035);--line:rgba(18,19,25,.14);--ink:#121319;--ink3:rgba(18,19,25,.68);
  --sea:#cfd6d4;--land:#F2F0E9;--border:#bcbbb7;--sel:#e2e1da;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:128px}body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}svg{display:block}:focus-visible{outline:2px solid #EA9244;outline-offset:3px}button{font:inherit;color:inherit}
.only-day{display:none}html[data-theme="day"] .only-day{display:contents}html[data-theme="day"] .only-night{display:none}.only-night{display:contents}
.w{width:min(1240px,100% - 40px);margin:0 auto}
.sample{padding:0 16px;background:var(--card);border-bottom:1px solid var(--line);text-align:center;font:400 .62rem/2.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
/* the line above the masthead */
.util{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font:400 .66rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.util .sp{flex:1}.util a{text-decoration:none}.util a:hover{color:var(--ink)}
.octa-theme{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:inline-grid;place-items:center;cursor:pointer;padding:0}
/* the masthead */
.mast{display:grid;justify-items:center;gap:10px;padding:34px 0 26px;text-align:center}
.mast .lk{display:flex;align-items:center;gap:18px;text-decoration:none}.mast .lk svg{width:66px;height:66px}
.mast h1{margin:0;font:600 clamp(3rem,8vw,5.6rem)/.95 var(--serif);letter-spacing:-.01em}.mast h1 em{font-style:italic;font-weight:400}
.mast .line{font:400 1.2rem var(--serif);font-style:italic;color:var(--ink3);margin:0}
.mast .issue{font:400 .66rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.mast .issue b{font-weight:500;color:var(--ink)}
/* the eight aspects, always at the top */
.rib{position:sticky;top:0;z-index:11;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rib .w{display:flex;align-items:center;gap:10px;padding:9px 0}
.rib .tabs{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}.rib .tabs::-webkit-scrollbar{display:none}
.rib a{flex:none;display:inline-flex;align-items:center;border:1px solid transparent;border-radius:999px;padding:6px 12px 6px 9px;text-decoration:none}
.rib a:hover{border-color:var(--line)}.rib a.on{border-color:var(--ink)}
.rib .mini{display:none;align-items:center;gap:8px;margin-right:6px;padding-right:12px;border-right:1px solid var(--line);flex:none}.rib .mini svg{width:22px;height:22px}.rib .mini b{font:600 1rem var(--serif)}.rib .mini em{font-weight:400}
.rib.stuck .mini{display:flex}
.tag{display:inline-flex;align-items:center;gap:7px;font:500 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.tag svg{width:15px;height:15px}.tag b{font-weight:500;color:var(--c)}html[data-theme="day"] .tag b{color:var(--ink)}
/* the level and the timeline — under the ribbon, they choose what the whole page shows */
.ctlbar{position:sticky;top:var(--ribh);z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.ctl{display:flex;align-items:center;gap:12px 26px;padding:9px 0;flex-wrap:wrap}
.grp{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tlg{margin-left:auto}
.lab{font:500 .58rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.segs{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.segs button,.tl button,.near,.btn{border:0;background:transparent;cursor:pointer;border-radius:999px;padding:6px 12px;font:500 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);display:inline-flex;align-items:center;gap:7px}
.segs button:hover,.tl button:hover,.near:hover{color:var(--ink)}
.segs button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
#place{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font:.82rem var(--sans);max-width:220px}#place[hidden]{display:none}
.near{border:1px solid var(--line)}.loc{font:400 .6rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.tl{display:inline-flex;align-items:center;gap:6px}.tl .track{display:inline-flex;align-items:center}
.tl .seg{width:22px;height:0;border-top:1px solid var(--ink3);flex:none}.tl .seg.f{border-top-style:dashed}
.tl button[aria-pressed="true"]{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tl .c{font-weight:400;opacity:.7}
.g{width:11px;height:11px;flex:none}
.st{display:inline-flex;align-items:center;gap:6px;font:500 .58rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.st-active{color:var(--ink)}
.st-active .g{animation:breathe 2.4s ease-in-out infinite}@keyframes breathe{50%{opacity:.45}}
/* stories */
.story{display:grid;gap:12px;text-decoration:none;align-content:start;min-width:0}.story .sb{display:grid;gap:8px}
.kick{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.story .h{font:600 1.32rem/1.2 var(--serif)}.story .d{color:var(--ink3);font-size:.96rem}
.story .meta{font:400 .6rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.story:hover .h{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.story.xl .h{font-size:clamp(2rem,4.2vw,3.3rem);line-height:1.06;letter-spacing:-.005em}.story.xl .d{font:400 1.2rem/1.5 var(--serif);font-style:italic}
.story.s{padding:14px 0;border-top:1px solid var(--line)}.story.s .h{font-size:1.08rem}
.pic{position:relative;display:block;width:100%;border-radius:10px;overflow:hidden;background:#202128}.pic svg{width:100%;height:100%}
.pic .pl{position:absolute;left:10px;bottom:8px;font:400 .54rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#F2F0E9;opacity:.65;font-style:normal}
/* the cover */
.cover{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:34px;padding:30px 0 34px;border-bottom:1px solid var(--line)}
.cover.one{grid-template-columns:minmax(0,1fr)}.cover.one .story.xl{max-width:900px}
.cover aside{display:grid;align-content:start}.kick-t{display:block;font:500 .62rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);padding-bottom:10px;margin:0}
.cover aside .story.m .pic{aspect-ratio:16/9!important}
.cover.none{grid-template-columns:1fr;padding:60px 0}.cover.none .h{font:600 2rem/1.2 var(--serif);margin:0 0 18px}.btn{border:1px solid var(--ink);color:var(--ink)}
/* the map */
.mapsec{padding:30px 0 34px;border-bottom:1px solid var(--line)}
.mh{display:flex;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;margin-bottom:16px}.mh>div:first-child{flex:1;min-width:240px}
.mapsec h2,.eight h2,.sec-h h2{font:600 1.6rem var(--serif);margin:0}.sub{color:var(--ink3);margin:2px 0 0;font-size:.92rem}
.legend{display:flex;gap:8px 16px;flex-wrap:wrap;font:500 .58rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .lc i{width:24px;height:8px;border-radius:4px;background:linear-gradient(90deg,#8C8958 0 12.5%,#8C7058 0 25%,#FACF5E 0 37.5%,#6A8C99 0 50%,#DA614B 0 62.5%,#7B6580 0 75%,#D8D8D8 0 87.5%,#EA9244 0)}
html[data-theme="day"] .legend .lc i{background:linear-gradient(90deg,#8C8958 0 12.5%,#8C7058 0 25%,#FACF5E 0 37.5%,#6A8C99 0 50%,#DA614B 0 62.5%,#7B6580 0 75%,#4A4842 0 87.5%,#EA9244 0)}
.mgrid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:22px}
.map{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--sea)}
.map>svg{position:absolute;inset:0;width:100%;height:100%}.map .sea{fill:var(--sea)}
.map .land path{fill:var(--land);stroke:var(--border);stroke-width:.7;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:fill .3s}.map .land path.sel{fill:var(--sel)}
.pins{position:absolute;inset:0}
.pin{position:absolute;width:26px;height:26px;margin:calc(-13px + var(--dy,0px)) 0 0 calc(-13px + var(--dx,0px));padding:0;border:0;background:none;cursor:pointer;color:var(--c);transition:transform .15s}
.pin svg{width:26px;height:26px;overflow:visible}html[data-theme="day"] .pin{color:var(--cd)}
.pin .plate{fill:var(--bg);stroke:var(--line);stroke-width:1}
.pin .ring{fill:none;stroke:currentColor;stroke-width:1.4;transform-origin:12px 12px;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.pin:hover,.pin.hot,.pin[aria-expanded="true"]{transform:scale(1.35);z-index:2}
.mplace{position:absolute;left:12px;top:10px;font:500 .6rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px 10px;pointer-events:none}
.credit{position:absolute;right:10px;bottom:7px;font:400 .52rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.pop{position:absolute;z-index:3;width:min(300px,80%);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 30px 12px 14px;display:grid;gap:6px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.pop[hidden]{display:none}.pop .h{font:600 1.05rem/1.25 var(--serif);text-decoration:none}.pop .h:hover{text-decoration:underline}.pop .meta{font:400 .58rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.pop .x{position:absolute;right:6px;top:4px;border:0;background:none;cursor:pointer;color:var(--ink3);font-size:1.1rem;line-height:1;padding:4px}
.mlist{list-style:none;margin:0;padding:0;display:grid;align-content:start;max-height:0;min-height:100%;overflow:auto;border-top:1px solid var(--line)}
.mlist button{width:100%;text-align:left;display:grid;grid-template-columns:4px minmax(0,1fr);gap:4px 12px;padding:10px 4px 10px 0;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer}
.mlist .sw{grid-row:1/3;border-radius:2px;background:var(--c)}html[data-theme="day"] .mlist .sw{background:var(--cd)}
.mlist .h{font:600 .95rem/1.3 var(--serif)}.mlist .m{display:flex;gap:10px;align-items:center;font:400 .58rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.mlist button:hover .h,.mlist button.hot .h{text-decoration:underline;text-underline-offset:4px}.mlist .none{padding:14px 0;color:var(--ink3);font-size:.92rem}
/* the week in eight */
.eight{padding:30px 0;border-bottom:1px solid var(--line)}.eight .sub{margin-bottom:18px}
.e8{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.e8 a{display:grid;gap:10px;align-content:start;border:1px solid var(--line);border-radius:14px;padding:14px;text-decoration:none;min-height:190px;position:relative;overflow:hidden}
.e8 a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c)}html[data-theme="day"] .e8 a::after{background:var(--cd)}
.e8 a.empty{opacity:.55}.e8 a:hover{border-color:var(--ink3)}.e8 a>.only-night>svg,.e8 a>.only-day>svg{width:34px;height:34px}.e8 .n{font:500 .62rem var(--mono);letter-spacing:.16em;color:var(--c)}html[data-theme="day"] .e8 .n{color:var(--ink)}
.e8 .nm{font:600 1rem var(--serif)}.e8 .t{font-size:.82rem;color:var(--ink3);line-height:1.4}
/* the eight sections */
.sec{padding:36px 0 30px;border-bottom:1px solid var(--line)}
.sec-h{display:flex;align-items:center;gap:14px;margin-bottom:20px}.sec-h>.only-night>svg,.sec-h>.only-day>svg{width:44px;height:44px}
.sec-h .n{font:500 .7rem var(--mono);letter-spacing:.2em;color:var(--c)}html[data-theme="day"] .sec-h .n{color:var(--ink)}
.sec-h h2{font-size:2rem}.sec-h .sp{flex:1}.sec-h .all{font:400 .62rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);text-decoration:none}
.sec .grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:26px}
.sec.flip .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr)}.sec.flip .grid>.lead{order:3}
.sec .grid.n2,.sec.flip .grid.n2,.sec .grid.n1,.sec.flip .grid.n1{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.sec.flip .grid.n2>.lead,.sec.flip .grid.n1>.lead{order:0}.sec .grid.n1{align-items:end}
.sec.empty{padding:20px 0 18px}.sec.empty .sec-h{margin-bottom:4px}.sec.empty .sec-h>.only-night>svg,.sec.empty .sec-h>.only-day>svg{width:34px;height:34px}.sec.empty .sec-h h2{font-size:1.5rem}
.sec .more,.sec .quiet{margin:0;color:var(--ink3);font:400 1.05rem/1.5 var(--serif);font-style:italic}
.sec .lead .h{font-size:1.75rem}
.brief{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 26px;border-top:1px solid var(--line)}
.brief li{padding:12px 0;font-size:.92rem;border-bottom:1px solid var(--line)}.brief li span{display:flex;align-items:center;gap:6px;font:400 .58rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:3px}
/* the foot */
.how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;padding:34px 0;border-bottom:1px solid var(--line)}
.how h3{font:600 1.1rem var(--serif);margin:0 0 6px}.how p{margin:0;color:var(--ink3);font-size:.92rem}.how .tlx{display:grid;gap:8px;margin-top:10px}.how .tlx .st{gap:8px;line-height:1.4}
.foot{display:flex;align-items:center;gap:14px;padding:26px 0 40px;flex-wrap:wrap}.foot svg{width:34px;height:34px}.foot b{font:600 1.3rem var(--serif)}.foot em{font-weight:400}
.foot .fam{font:400 .62rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}.foot .sp{flex:1}.foot nav{display:flex;gap:16px;font-size:.86rem}.foot nav a{text-decoration:none;color:var(--ink3)}.foot nav a:hover{color:var(--ink)}
@media(max-width:1100px){.e8{grid-template-columns:repeat(4,minmax(0,1fr))}.how{grid-template-columns:1fr 1fr}.tlg{margin-left:0}}
@media(max-width:860px){.cover{grid-template-columns:1fr}.sec .grid,.sec.flip .grid,.sec .grid.n2,.sec.flip .grid.n2{grid-template-columns:1fr 1fr}.sec .grid>.lead,.sec.flip .grid>.lead{grid-column:1/-1;order:0}.brief{grid-template-columns:1fr}
  .mgrid{grid-template-columns:1fr}.mlist{max-height:320px;min-height:0}.map{aspect-ratio:4/3}}
@media(max-width:560px){.w{width:calc(100% - 32px)}.util .hide{display:none}.mast{padding:24px 0 18px}.mast .lk svg{width:46px;height:46px}.mast .lk{gap:12px}.e8{grid-template-columns:repeat(2,minmax(0,1fr))}.e8 a{min-height:160px}
  .sec .grid,.sec.flip .grid,.sec .grid.n2,.sec.flip .grid.n2,.sec .grid.n1,.sec.flip .grid.n1{grid-template-columns:1fr}.sec .story.m{grid-template-columns:110px minmax(0,1fr);gap:12px}.sec .story.m .pic{aspect-ratio:1/1!important}.sec .story.m .d{display:none}.sec .lead.story.m{display:grid;grid-template-columns:1fr}.sec .lead.story.m .pic{aspect-ratio:16/9!important}.sec .lead .d{display:block}
  .sec-h .all .x{display:none}.sec-h .all{white-space:nowrap}.sec-h h2{font-size:1.6rem}.story.xl .h{font-size:2rem}.how{grid-template-columns:1fr}
  .ctlbar{position:static}html{scroll-padding-top:64px}.ctl{gap:12px}.grp{width:100%;gap:8px}.lab{width:100%}.segs{width:100%}.segs button{flex:1;justify-content:center;padding:7px 4px}
  #place{flex:1;max-width:none}.tl{flex-wrap:wrap}.tl .seg{width:8px}.tl button{padding:6px 7px;gap:5px;letter-spacing:.1em}.map{aspect-ratio:1/1}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}

/* the article (Octa News Brand Book v1.0, section 09) */
.art{max-width:720px;margin:0 auto;padding:28px 22px}
.art .h{font:600 clamp(2rem,4vw,3rem)/1.1 var(--serif);margin:12px 0 12px}
.art .deck{font:400 1.25rem/1.5 var(--serif);font-style:italic;color:var(--ink3);margin:0 0 16px}
.art .by{display:flex;gap:14px;flex-wrap:wrap;font:.64rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin-bottom:18px}
.art figure{margin:0 0 18px}
.art figcaption{font-size:.8rem;color:var(--ink3);margin-top:6px}
.art figcaption .mono{font-size:.7rem}
.art p{font-size:1.06rem;line-height:1.75}
.art p.first::first-letter{font:600 3.4rem/.8 var(--serif);float:left;margin:6px 8px 0 0;color:var(--c)}
.art blockquote{margin:22px 0;padding:0 0 0 18px;border-left:3px solid var(--c);font:400 1.35rem/1.45 var(--serif);font-style:italic}
.art .sources{list-style:none;counter-reset:s;margin:0;padding:0;border-top:1px solid var(--line)}
.art .sources li{counter-increment:s;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.art .sources li::before{content:counter(s);font:500 .74rem var(--mono);color:var(--ink3)}
.art .sources small{display:block;font:.68rem var(--mono);color:var(--ink3)}
.art .how{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:20px;background:var(--card)}
.art .how b{font:500 .66rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);display:block;margin-bottom:6px}
.art .how p{margin:0;font-size:.92rem;color:var(--ink3)}
.art sup.s{font:500 .66rem var(--mono);color:var(--ink3)}
.art{padding-top:34px;padding-bottom:50px}.art .how{display:block}.art h3{font:600 1.1rem var(--serif);margin:28px 0 10px}.art sup.s a,.art .sources a{text-decoration:none}.art .sources a:hover{text-decoration:underline}
.list{padding:36px 0 50px}.list h1{font:600 2rem var(--serif);margin:0 0 18px}.list .eds{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.list .eds li{padding:14px 0;border-bottom:1px solid var(--line)}.list .eds a{font:600 1.3rem var(--serif);text-decoration:none}.list .eds span{font:400 .62rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-left:12px}.list p{color:var(--ink3)}