/* Story content block — a page-turning storybook (Settings → Story).
   Self-contained: every rule is scoped under .n3i-story so it can't leak into the theme. */
.n3i-story{--n3i-blue:#269CCE;--n3i-navy:#2C2A86;--n3i-ink:#313032;--n3i-muted:#4A4950;--n3i-line:#E4EAEF;--n3i-wash:#E8F5FB;--n3i-teal-ink:#1B6F94;
  box-sizing:border-box;max-width:1240px;margin:0 auto;padding:clamp(12px,2.5vw,32px) clamp(12px,2.5vw,32px) clamp(20px,3vw,40px);
  font-family:Manrope,"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--n3i-ink);-webkit-font-smoothing:antialiased;text-align:left}
.n3i-story *,.n3i-story *::before,.n3i-story *::after{box-sizing:border-box}
.n3i-book{display:grid;perspective:2600px;padding:0 14px 14px 0;position:relative;--n3i-pad:clamp(16px,2.6vw,32px);--n3i-navh:72px;--n3i-art-max:400px}
.n3i-page{grid-area:1/1;position:relative;overflow:hidden;background:#FFFFFF;border:1px solid var(--n3i-line);border-radius:22px;
  padding:var(--n3i-pad) var(--n3i-pad) calc(var(--n3i-pad) + var(--n3i-navh));transform-origin:left center;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:6px 6px 0 -1px #FFFFFF,6px 6px 0 0 var(--n3i-line),12px 12px 0 -1px #FFFFFF,12px 12px 0 0 var(--n3i-line),0 30px 60px -30px rgba(44,42,134,.35);
  display:flex;flex-direction:column;justify-content:center;margin:0}
.n3i-page > .n3i-spread{width:100%}
.n3i-page:not(.is-active):not(.is-under):not(.is-turning-in){visibility:hidden}
.n3i-page::before{content:"";position:absolute;inset:0 auto 0 0;width:34px;background:linear-gradient(90deg,rgba(44,42,134,.07),rgba(44,42,134,0));pointer-events:none}
.n3i-page::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(44,42,134,0) 10%,rgba(44,42,134,.28) 100%);opacity:0;pointer-events:none}
.n3i-page.is-under{z-index:1}
.n3i-page.is-turning-out{z-index:3;animation:n3iTurnOut .75s cubic-bezier(.45,.05,.4,1) forwards}
.n3i-page.is-turning-out::after{animation:n3iShade .75s ease-in forwards}
.n3i-page.is-turning-in{z-index:3;animation:n3iTurnIn .75s cubic-bezier(.2,.6,.35,1) forwards}
.n3i-page.is-turning-in::after{animation:n3iShade .75s ease-out reverse forwards}
@keyframes n3iTurnOut{from{transform:rotateY(0)}to{transform:rotateY(-96deg)}}
@keyframes n3iTurnIn{from{transform:rotateY(-96deg)}to{transform:rotateY(0)}}
@keyframes n3iShade{from{opacity:0}to{opacity:1}}
@keyframes n3iFadeOut{from{opacity:1}to{opacity:0}}
@keyframes n3iFadeIn{from{opacity:0}to{opacity:1}}

.n3i-spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,4.5vw,64px);align-items:center}
.n3i-spread--org{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.n3i-spread--org .n3i-text{gap:10px;max-width:none}
.n3i-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:2px}
@media (min-width:861px){.n3i-foot{flex-wrap:nowrap}.n3i-foot .n3i-tags,.n3i-foot .n3i-link{white-space:nowrap}}
.n3i-foot .n3i-tags{margin:0}.n3i-foot .n3i-link{margin:0;align-self:auto}
.n3i-spread--hub{grid-template-columns:minmax(0,.62fr) minmax(0,1.6fr);gap:clamp(16px,3vw,40px)}
.n3i-art{background:var(--n3i-wash);border-radius:24px;overflow:hidden;padding:clamp(4px,.8vw,10px);display:flex;align-items:center;justify-content:center}
.n3i-art svg{display:block;width:100%;height:auto;max-height:var(--n3i-art-max);border-radius:20px}
.n3i-art img{display:block;width:100%;height:auto;max-height:var(--n3i-art-max);object-fit:cover;border-radius:24px}
.n3i-art:has(> img){padding:0}
.n3i-art--hub{background:transparent;padding:0}
.n3i-art--hub svg{max-height:340px}
.n3i-text{display:flex;flex-direction:column;gap:10px;max-width:34em}
.n3i-kicker{margin:0;font-weight:700;font-size:15px;color:var(--n3i-teal-ink)}
.n3i-year{margin:0;font-family:Sora,"Segoe UI",system-ui,sans-serif;font-weight:800;font-size:clamp(36px,4.6vw,60px);line-height:.95;letter-spacing:-.03em;color:var(--n3i-blue)}
.n3i-story .n3i-h1,.n3i-story .n3i-h2{margin:0;font-family:Sora,"Segoe UI",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;color:var(--n3i-navy);outline:none}
.n3i-story .n3i-h1{font-size:clamp(36px,5.6vw,68px);line-height:1.04}
.n3i-story .n3i-h2{font-size:clamp(26px,2.8vw,36px);line-height:1.1}
.n3i-story .n3i-h3{margin:6px 0 0;font-family:Sora,"Segoe UI",system-ui,sans-serif;font-weight:700;font-size:18px;color:var(--n3i-ink)}
.n3i-lead{margin:0;font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:var(--n3i-muted)}
.n3i-body{margin:0;font-size:16px;line-height:1.5;color:var(--n3i-muted)}
.n3i-body--strong{font-size:clamp(18px,1.6vw,20px);font-weight:600;line-height:1.5;color:var(--n3i-ink)}
.n3i-helps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.n3i-helps li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;margin:0;padding:0}
.n3i-helps li::before{content:none}
.n3i-tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--n3i-teal-ink);display:inline-flex;align-items:center;justify-content:center;margin-top:-1px}
.n3i-tags{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.n3i-tags li{padding:4px 10px;border-radius:999px;background:#EEEDF7;color:var(--n3i-navy);font-size:12px;font-weight:700;margin:0}
.n3i-tags li::before{content:none}
.n3i-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.n3i-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border:1.5px solid var(--n3i-navy);border-radius:10px;background:var(--n3i-navy);color:#FFFFFF;
  font-family:Sora,"Segoe UI",system-ui,sans-serif;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .2s cubic-bezier(.2,.7,.2,1),transform .1s}
.n3i-btn:hover{background:#1F1D66;border-color:#1F1D66;color:#FFFFFF}
.n3i-btn:active{transform:scale(.98)}
.n3i-btn--ghost{background:#FFFFFF;color:var(--n3i-navy)}
.n3i-btn--ghost:hover{background:#EEEDF7;color:var(--n3i-navy);border-color:var(--n3i-navy)}
.n3i-link{align-self:flex-start;margin-top:4px;min-height:36px;padding:0;border:0;background:none;color:var(--n3i-teal-ink);font:700 14px Manrope,"Segoe UI",system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;display:inline-flex;align-items:center}
.n3i-story :focus-visible{outline:3px solid var(--n3i-blue);outline-offset:3px;border-radius:8px}
.n3i-place{cursor:pointer;outline:none}
.n3i-place .n3i-ring{transition:fill-opacity .2s,stroke-opacity .2s;stroke:var(--n3i-blue);stroke-width:3;stroke-opacity:0}
.n3i-place:hover .n3i-ring{fill-opacity:1;stroke-opacity:.35}
.n3i-place:focus-visible .n3i-ring{fill-opacity:1;stroke-opacity:1}
.n3i-flow{stroke-dasharray:4 9;stroke-linecap:round;animation:n3iFlow 1.4s linear infinite}
@keyframes n3iFlow{to{stroke-dashoffset:-26}}
.n3i-hublist{display:none;list-style:none;margin:0;padding:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.n3i-hublist li{margin:0;padding:0}
.n3i-hublist li::before{content:none}
.n3i-hublist .n3i-btn{width:100%;padding:8px 12px;font-size:14px;text-align:center}
/* Controls sit inside the page frame, pinned to its bottom edge (above the turning pages). */
.n3i-nav{position:absolute;z-index:5;left:0;right:14px;bottom:14px;display:flex;align-items:center;gap:16px;margin:0;padding:0 var(--n3i-pad) calc(var(--n3i-pad) * .55)}
.n3i-navbtn{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 16px;border:1px solid var(--n3i-line);border-radius:12px;background:#FFFFFF;color:var(--n3i-navy);
  font:700 15px Sora,"Segoe UI",system-ui,sans-serif;cursor:pointer}
.n3i-navbtn:hover:not(:disabled){border-color:var(--n3i-navy)}
.n3i-navbtn:disabled{opacity:.4;cursor:default}
.n3i-progress{flex:1 1 auto;min-width:0}
.n3i-bar{height:6px;border-radius:999px;background:var(--n3i-line);overflow:hidden}
.n3i-bar-fill{height:100%;width:0;background:var(--n3i-blue);border-radius:999px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.n3i-count{margin:8px 0 0;text-align:center;font-size:14px;color:var(--n3i-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n3i-spread--hub .n3i-h1{font-size:clamp(34px,4.4vw,56px)}
@media (max-width:1200px) and (min-width:861px){.n3i-spread--org{grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr)}.n3i-helps li{font-size:15px}}
@media (max-width:860px){.n3i-spread,.n3i-spread--hub,.n3i-spread--org{grid-template-columns:1fr}.n3i-text{max-width:none}}
@media (max-width:700px){.n3i-hublist{display:grid}.n3i-place{pointer-events:none}}
@media (max-width:480px){.n3i-navbtn span{display:none}.n3i-navbtn{padding:0 12px}.n3i-book{padding:0 8px 8px 0}.n3i-nav{right:8px;bottom:8px;gap:10px}
  .n3i-page{box-shadow:4px 4px 0 -1px #FFFFFF,4px 4px 0 0 var(--n3i-line),0 20px 40px -24px rgba(44,42,134,.35)}}
@media (prefers-reduced-motion:reduce){
  .n3i-page.is-turning-out{animation:n3iFadeOut .2s linear forwards}
  .n3i-page.is-turning-in{animation:n3iFadeIn .2s linear forwards}
  .n3i-page.is-turning-out::after,.n3i-page.is-turning-in::after{animation:none}
  .n3i-flow{animation:none}.n3i-bar-fill{transition:none}}
/* First page: enlarge the N3i logo in the middle of the hub diagram (scaled about the centre of the white circle (600,385 in the diagram)). */
.n3i-book > .n3i-page:first-child .n3i-hub > use{transform-box:view-box;transform-origin:600px 385px;transform:translateY(-12px) scale(1.3)}

/* ── Mobile: compact teaser that opens full screen (swipe to turn pages) ── */
.n3i-close,.n3i-open,.n3i-hint{display:none}
html.n3i-story-lock,html.n3i-story-lock body{overflow:hidden}
@media (max-width:700px){
  /* Teaser: just the cover, no controls, no organisation buttons — tap anywhere to open. */
  .n3i-story:not(.is-open){cursor:pointer}
  .n3i-story:not(.is-open) .n3i-nav,.n3i-story:not(.is-open) .n3i-hublist{display:none}
  .n3i-story:not(.is-open) .n3i-art svg{max-height:220px}
  .n3i-story:not(.is-open) .n3i-open{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:14px;border:0;border-radius:10px;background:var(--n3i-navy);color:#fff;font:700 15px Sora,"Segoe UI",system-ui,sans-serif;cursor:pointer}
  /* Full screen */
  .n3i-story.is-open{position:fixed;inset:0;z-index:100000;max-width:none;margin:0;background:#F9F9F9;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding:max(56px,calc(env(safe-area-inset-top) + 48px)) 12px max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
  .n3i-story.is-open .n3i-book{flex:1 0 auto;--n3i-art-max:260px}
  .n3i-story.is-open .n3i-page{min-height:calc(100dvh - 140px)}
  .n3i-story.is-open .n3i-close{display:flex;position:fixed;top:max(10px,env(safe-area-inset-top));right:12px;z-index:100001;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--n3i-line);border-radius:50%;background:#fff;color:var(--n3i-navy);font-size:26px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(44,42,134,.18)}
  .n3i-story.is-open .n3i-hint{display:block;margin:10px 0 0;text-align:center;font-size:12px;color:var(--n3i-muted)}
}
/* Mobile: no "Learn more" button on the first page (the teaser's Open button / swiping take its place). */
@media (max-width:860px){.n3i-book > .n3i-page:first-child .n3i-actions{display:none}}
/* Desktop: a little breathing room to the left of the first page's text. */
@media (min-width:861px){
  /* Text column keeps its original width (~28%) PLUS the padding, so the lines wrap as before. */
  .n3i-book > .n3i-page:first-child .n3i-spread--hub{grid-template-columns:calc(28% + clamp(16px,3vw,48px)) minmax(0,1fr)}
  .n3i-book > .n3i-page:first-child .n3i-text{padding-left:clamp(16px,3vw,48px);max-width:none}
  /* Let the hub diagram fill the whole right-hand side of the page (no height cap). */
  .n3i-book > .n3i-page:first-child .n3i-art{align-self:stretch;margin:calc(var(--n3i-pad) * -.5) calc(var(--n3i-pad) * -.5) calc(var(--n3i-pad) * -.5) 0}
  .n3i-book > .n3i-page:first-child .n3i-art svg{max-height:none;width:100%;height:100%}
}

/* Desktop: "Flick through the story" label that follows the mouse over the content. */
.n3i-flick{display:none}
@media (hover:hover) and (min-width:701px){
  .n3i-story .n3i-page{cursor:grab;-webkit-user-select:none;user-select:none}
  .n3i-story.is-dragging .n3i-page{cursor:grabbing}
  .n3i-story .n3i-page a,.n3i-story .n3i-page button,.n3i-story .n3i-place{cursor:pointer}
  .n3i-flick{display:flex;align-items:center;gap:8px;position:fixed;z-index:99999;pointer-events:none;padding:8px 16px;border-radius:999px;background:var(--n3i-navy);color:#fff;
    font:700 13px Sora,"Segoe UI",system-ui,sans-serif;white-space:nowrap;box-shadow:0 8px 24px rgba(44,42,134,.3);opacity:0;transform:translate(18px,18px) scale(.92);transition:opacity .15s,transform .15s}
  .n3i-flick.is-on{opacity:1;transform:translate(18px,18px) scale(1)}
  .n3i-story.is-dragging .n3i-flick{opacity:0}
}