/* ============================================================
   Between the Frames — stylesheet
   Palette: washi paper, ink pine, indigo sky, moss, saffron
   Type: Fraunces (display) / Schibsted Grotesk (body) / DM Mono (data)
   ============================================================ */

:root{
  /* --- colour --- */
  --paper:      #EEF2EC;
  --paper-2:    #E3EAE2;
  --paper-3:    #D6E0D6;
  --ink:        #16302B;
  --ink-soft:   #42605A;
  --ink-faint:  #7C948E;
  --indigo:     #2F5D8C;
  --indigo-dp:  #1E4266;
  --moss:       #6E9B54;
  --saffron:    #E8B04B;
  --rust:       #BE5B37;
  --sky-top:    #8CC6E5;
  --sky-mid:    #BFE0EA;
  --sky-bot:    #E7F0DE;
  --line:       rgba(22,48,43,.14);
  --line-soft:  rgba(22,48,43,.08);

  /* --- type --- */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- metrics --- */
  --shell: 1180px;
  --read: 68ch;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;
  --shadow-1: 0 1px 2px rgba(22,48,43,.06), 0 6px 18px rgba(22,48,43,.07);
  --shadow-2: 0 2px 6px rgba(22,48,43,.08), 0 18px 40px rgba(22,48,43,.12);
  --ease: cubic-bezier(.22,.68,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,.55vw + 15px,17.5px);
  line-height:1.68;
  letter-spacing:.005em;
  overflow-x:hidden;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(140,198,229,.20), transparent 42%),
    radial-gradient(circle at 88% 22%, rgba(232,176,75,.14), transparent 46%),
    radial-gradient(circle at 50% 96%, rgba(110,155,84,.14), transparent 52%);
  background-attachment:fixed;
}

/* paper grain */
body::after{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }

/* ---------- typography ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 40;
  line-height:1.12;
  letter-spacing:-.018em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.3rem,5.2vw,4rem); }
h2{ font-size:clamp(1.65rem,3vw,2.4rem); margin-top:2.2em; }
h3{ font-size:clamp(1.18rem,1.7vw,1.42rem); margin-top:1.9em; letter-spacing:-.01em; }
h2:first-child,h3:first-child{ margin-top:0; }

p{ margin:0 0 1.15em; }
a{ color:var(--indigo-dp); text-decoration:none; }

.prose a{
  background-image:linear-gradient(var(--indigo),var(--indigo));
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 92%;
  transition:background-size .3s var(--ease), color .3s var(--ease);
}
.prose a:hover{ color:var(--rust); background-image:linear-gradient(var(--rust),var(--rust)); background-size:100% 2px; }

strong{ font-weight:650; }
em{ font-style:italic; }
blockquote{
  margin:2em 0;
  padding:.2em 0 .2em 1.6em;
  border-left:3px solid var(--saffron);
  font-family:var(--display);
  font-size:1.16em;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 30;
  line-height:1.42;
  color:var(--ink-soft);
}
blockquote cite{ display:block; margin-top:.7em; font:500 .62em/1.4 var(--mono); font-style:normal; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }

.eyebrow{
  font:500 .7rem/1 var(--mono);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:flex; align-items:center; gap:.7em;
  margin:0 0 1.1em;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--line); }

.lede{
  font-size:1.16em;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:62ch;
}

/* ---------- shell ---------- */
.shell{ width:min(100% - 2.6rem, var(--shell)); margin-inline:auto; position:relative; z-index:2; }
.narrow{ width:min(100% - 2.6rem, 760px); margin-inline:auto; }
section{ position:relative; }
.band{ padding-block:clamp(3.4rem,7vw,6.2rem); }
.band--tint{ background:linear-gradient(180deg,transparent,rgba(214,224,214,.55) 12%,rgba(214,224,214,.55) 88%,transparent); }

/* ---------- skip link ---------- */
.skip{
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.1rem; border-radius:0 0 var(--r-sm) var(--r-sm);
  transition:top .2s var(--ease);
}
.skip:focus{ top:0; }

/* ---------- header ---------- */
.masthead{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(10px);
  background:rgba(238,242,236,.72);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.masthead.is-stuck{ background:rgba(238,242,236,.93); border-bottom-color:var(--line); box-shadow:0 8px 30px -22px rgba(22,48,43,.6); }
.masthead__in{ display:flex; align-items:center; gap:1.4rem; height:70px; }

.brand{ display:flex; align-items:center; gap:.65rem; color:var(--ink); flex:0 0 auto; }
.brand svg{ width:34px; height:34px; border-radius:9px; box-shadow:var(--shadow-1); }
.brand b{
  font-family:var(--display); font-weight:600; font-size:1.06rem;
  font-variation-settings:"SOFT" 60,"WONK" 1; letter-spacing:-.02em; line-height:1.05;
}
.brand small{ display:block; font:400 .6rem/1.3 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }

.nav{ margin-left:auto; display:flex; align-items:center; gap:.2rem; }
.nav a{
  position:relative; padding:.55rem .72rem; border-radius:var(--r-sm);
  font-size:.9rem; font-weight:500; color:var(--ink-soft);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:.72rem; right:.72rem; bottom:.32rem; height:2px;
  background:var(--saffron); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--ink); }

.menu-btn{
  display:none; margin-left:auto;
  width:44px; height:44px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:transparent; cursor:pointer; padding:0; color:var(--ink);
}
.menu-btn span{ display:block; width:19px; height:1.6px; margin:4px auto; background:currentColor; border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.6px) rotate(-45deg); }

@media (max-width:960px){
  .menu-btn{ display:block; }
  .nav{
    position:fixed; inset:70px 0 auto; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(238,242,236,.98); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    padding:.6rem 1.3rem 1.3rem;
    max-height:calc(100dvh - 70px); overflow:auto;
    clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
    transition:clip-path .42s var(--ease), opacity .28s var(--ease);
  }
  .nav.is-open{ clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; }
  .nav a{ padding:.85rem .2rem; border-bottom:1px solid var(--line-soft); font-size:1.02rem; border-radius:0; }
  .nav a::after{ left:.2rem; right:auto; width:14px; }
}

/* ---------- progress bar ---------- */
.progress{ position:fixed; top:0; left:0; height:2px; z-index:120; width:0;
  background:linear-gradient(90deg,var(--moss),var(--saffron),var(--indigo)); transition:width .1s linear; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; isolation:isolate; }
.hero__sky{ position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 46%,var(--sky-bot) 100%); }
.hero__sky::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 42% at 74% 18%, rgba(255,244,214,.85), transparent 60%);
  animation:sunwash 22s ease-in-out infinite alternate;
}
@keyframes sunwash{ from{ opacity:.55; transform:translate3d(0,0,0) } to{ opacity:1; transform:translate3d(-3%,2%,0) } }

.hero__art{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; }
.hero__art svg{ width:100%; height:100%; }
.layer{ will-change:transform; }

.cloudband{
  position:absolute; left:0; width:100%; filter:blur(.6px);
  animation-name:drift; animation-timing-function:linear; animation-iteration-count:infinite;
  will-change:transform;
}
@keyframes drift{ from{ transform:translateX(-100%) } to{ transform:translateX(100%) } }

.birds{ animation:flap 9s ease-in-out infinite; transform-origin:center; }
@keyframes flap{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(2.2%,-1.6%) } }

.hero__in{ position:relative; padding-block:clamp(5rem,13vh,9rem) clamp(7rem,16vh,11rem); }
.hero h1{ max-width:15ch; }
.hero h1 .ink{ color:var(--ink); }
.hero .lede{ max-width:52ch; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:2rem; font:400 .72rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.hero__meta span{ display:flex; align-items:center; gap:.5rem; }
.hero__meta span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--saffron); }

.scrollcue{ display:inline-flex; align-items:center; gap:.6rem; margin-top:2.6rem; font:500 .72rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.scrollcue i{ width:26px; height:26px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-style:normal; animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(4px) } }

/* page hero (interior) */
.pagehead{ position:relative; overflow:hidden; padding-block:clamp(3.4rem,9vw,5.6rem) clamp(2.4rem,6vw,3.6rem); }
.pagehead::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(140,198,229,.55),rgba(231,240,222,0));
}
.pagehead__wave{ position:absolute; left:0; right:0; bottom:-1px; z-index:-1; height:70px; width:100%; }
.pagehead h1{ max-width:20ch; }

/* ---------- cel card (signature) ---------- */
.cel{
  position:relative;
  background:linear-gradient(180deg,#fff,#FAFCF8);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:2.6rem 1.6rem 1.7rem;
  box-shadow:var(--shadow-1);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  overflow:hidden;
}
/* peg bar: the punched holes at the top of an animation cel */
.cel::before{
  content:""; position:absolute; top:0; left:0; right:0; height:26px;
  background:
    radial-gradient(circle at 22% 13px, #C9D6C9 4.4px, rgba(22,48,43,.14) 5.2px, transparent 5.9px),
    radial-gradient(circle at 50% 13px, #C9D6C9 6.8px, rgba(22,48,43,.14) 7.6px, transparent 8.3px),
    radial-gradient(circle at 78% 13px, #C9D6C9 4.4px, rgba(22,48,43,.14) 5.2px, transparent 5.9px),
    linear-gradient(180deg,rgba(214,224,214,.55),rgba(214,224,214,0));
  border-bottom:1px solid var(--line-soft);
}
.cel:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); border-color:rgba(47,93,140,.32); }
.cel h3{ margin-top:.2rem; }
.cel p:last-child{ margin-bottom:0; }
.cel .frame{ position:absolute; top:5px; right:12px; font:500 .58rem/1 var(--mono); letter-spacing:.14em; color:var(--ink-faint); }

a.cel{ display:block; color:inherit; }
a.cel .more{ display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem; font:500 .74rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--indigo-dp); }
a.cel .more svg{ transition:transform .3s var(--ease); }
a.cel:hover .more svg{ transform:translateX(5px); }

/* ---------- grids ---------- */
.grid{ display:grid; gap:1.4rem; }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }

/* split feature */
.split{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,5vw,4.2rem); align-items:center; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }

.plate{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-2); background:var(--paper-2);
}
.plate svg{ display:block; width:100%; height:auto; }

/* ---------- article layout ---------- */
body.is-article{ --shell:1060px; --read:70ch; }
.article{ display:grid; grid-template-columns:minmax(0,1fr) 205px; gap:clamp(2rem,4vw,3.2rem); align-items:start; }
@media (max-width:960px){ .article{ grid-template-columns:1fr; } .toc{ display:none; } }
.prose{ max-width:var(--read); }
.prose > h2{ scroll-margin-top:100px; }
.prose ul,.prose ol{ margin:0 0 1.3em; padding-left:1.3em; }
.prose li{ margin-bottom:.5em; }
.prose li::marker{ color:var(--moss); }
.prose hr{ border:0; height:1px; background:var(--line); margin:2.8em 0; }

.toc{ position:sticky; top:96px; font-size:.87rem; }
.toc p{ font:500 .66rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1rem; }
.toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.toc a{ display:block; padding:.42rem 0 .42rem 1rem; margin-left:-1px; border-left:2px solid transparent; color:var(--ink-soft); transition:color .25s, border-color .25s, padding-left .25s; }
.toc a:hover,.toc a.is-active{ color:var(--ink); border-left-color:var(--saffron); padding-left:1.25rem; }

/* ---------- callouts, notes, tables ---------- */
.note{
  border:1px solid var(--line); border-left:3px solid var(--indigo);
  background:rgba(255,255,255,.62); border-radius:0 var(--r-md) var(--r-md) 0;
  padding:1.2rem 1.4rem; margin:2em 0; font-size:.95em;
}
.note strong{ display:block; font-family:var(--display); font-size:1.05em; margin-bottom:.35em; }
.note--moss{ border-left-color:var(--moss); }
.note--saffron{ border-left-color:var(--saffron); }

.factbox{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:1.5rem; box-shadow:var(--shadow-1); }
.factbox dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.55rem 1.1rem; font-size:.92rem; }
.factbox dt{ font:500 .68rem/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.factbox dd{ margin:0; }

.tablewrap{ overflow-x:auto; margin:1.8em 0; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; }
table{ border-collapse:collapse; width:100%; font-size:.92rem; }
th,td{ padding:.78rem 1rem; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top; }
th{ font:500 .68rem/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); background:var(--paper-2); }
tr:last-child td{ border-bottom:0; }

/* timeline */
.timeline{ list-style:none; margin:2em 0; padding:0 0 0 1.6rem; border-left:1px solid var(--line); }
.timeline li{ position:relative; padding:0 0 1.6rem .4rem; }
.timeline li::before{ content:""; position:absolute; left:calc(-1.6rem - 5px); top:.55em; width:9px; height:9px; border-radius:50%; background:var(--paper); border:2px solid var(--moss); }
.timeline b{ display:block; font:500 .72rem/1.4 var(--mono); letter-spacing:.12em; color:var(--indigo-dp); }

/* pills */
.pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.4em 0; padding:0; list-style:none; }
.pills li{ font:500 .72rem/1 var(--mono); letter-spacing:.06em; padding:.5rem .8rem; border:1px solid var(--line); border-radius:100px; background:rgba(255,255,255,.6); color:var(--ink-soft); }

/* ---------- forms ---------- */
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font:500 .68rem/1.6 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.35rem; }
.field input,.field textarea,.field select{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.7rem .85rem; transition:border-color .25s, box-shadow .25s;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(47,93,140,.16); }
.field small{ display:block; margin-top:.35rem; color:var(--ink-faint); font-size:.8rem; }

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font:500 .8rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  padding:.9rem 1.4rem; border-radius:100px; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper); cursor:pointer;
  transition:transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--sm{ padding:.66rem 1rem; font-size:.72rem; }

/* ---------- owner placeholders ---------- */
[data-owner]{ font-style:normal; }
.owner-empty{
  display:inline-block; min-width:9ch;
  font:500 .8em/1.5 var(--mono);
  color:var(--ink-faint);
  border:1px dashed rgba(47,93,140,.55);
  border-radius:4px; padding:.05em .5em;
  background:rgba(47,93,140,.05);
}

/* ---------- footer ---------- */
.foot{ margin-top:clamp(3rem,7vw,5.5rem); background:var(--ink); color:#C9D8D2; position:relative; z-index:2; }
.foot__wave{ display:block; width:100%; height:60px; color:var(--ink); }
.foot a{ color:#DCE8E2; }
.foot a:hover{ color:#fff; }
.foot__in{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.2rem; padding-block:3.2rem 2.2rem; }
@media (max-width:860px){ .foot__in{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot__in{ grid-template-columns:1fr; } }
.foot h4{ font:500 .66rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:#7D9C93; margin:0 0 1rem; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:.6rem; font-size:.92rem; }
.foot__brand b{ font-family:var(--display); font-size:1.3rem; color:#fff; font-variation-settings:"SOFT" 60,"WONK" 1; display:block; margin-bottom:.6rem; }
.foot__brand p{ font-size:.92rem; color:#A9BEB7; max-width:36ch; }
.foot__legal{ border-top:1px solid rgba(255,255,255,.12); padding-block:1.4rem 2.4rem; display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; align-items:center; font-size:.82rem; color:#8FA8A0; }
.foot__legal .sep{ margin-inline:auto; }

/* ---------- cookie banner ---------- */
.cookiebar{
  position:fixed; left:50%; bottom:1.1rem; z-index:150;
  width:min(100% - 1.6rem, 940px); transform:translate(-50%,150%);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 24px 60px -18px rgba(22,48,43,.42);
  padding:1.4rem 1.5rem; display:none;
  transition:transform .55s var(--ease), opacity .4s var(--ease);
  opacity:0;
}
.cookiebar.is-shown{ display:block; }
.cookiebar.is-in{ transform:translate(-50%,0); opacity:1; }
.cookiebar h4{ font-family:var(--display); font-size:1.14rem; margin:0 0 .4rem; }
.cookiebar p{ font-size:.9rem; color:var(--ink-soft); margin:0 0 1rem; max-width:70ch; }
.cookiebar__row{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.cookiebar__row .spacer{ flex:1 1 auto; }
@media (max-width:600px){ .cookiebar__row .btn{ flex:1 1 100%; justify-content:center; } .cookiebar__row .spacer{ display:none; } }

.prefs{ margin-top:1.1rem; border-top:1px solid var(--line); padding-top:1rem; display:none; }
.prefs.is-open{ display:block; animation:fadeUp .4s var(--ease); }
.prefs__item{ display:flex; gap:1rem; align-items:flex-start; padding:.7rem 0; border-bottom:1px solid var(--line-soft); }
.prefs__item:last-child{ border-bottom:0; }
.prefs__item b{ display:block; font-size:.94rem; }
.prefs__item span{ font-size:.84rem; color:var(--ink-faint); }
.switch{ margin-left:auto; flex:0 0 auto; position:relative; width:44px; height:25px; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch i{ position:absolute; inset:0; background:var(--paper-3); border-radius:100px; transition:background .25s; pointer-events:none; }
.switch i::after{ content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .28s var(--ease); }
.switch input:checked + i{ background:var(--moss); }
.switch input:checked + i::after{ transform:translateX(19px); }
.switch input:disabled + i{ background:var(--ink-faint); opacity:.5; }
.switch input:focus-visible + i{ box-shadow:0 0 0 3px rgba(47,93,140,.3); }

.cookie-reopen{
  position:fixed; left:1rem; bottom:1rem; z-index:90;
  width:42px; height:42px; border-radius:50%; display:none; place-items:center;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-1); cursor:pointer; color:var(--ink-soft);
  transition:transform .25s var(--ease);
}
.cookie-reopen.is-shown{ display:grid; }
.cookie-reopen:hover{ transform:scale(1.08) rotate(-8deg); color:var(--ink); }

/* ---------- ad slots (clearly labelled, policy-friendly) ---------- */
.adslot{ margin:2.6rem 0; text-align:center; }
/* An empty ad frame reads as an unfinished site to a human reviewer.
   Slots stay hidden until you add the class "is-live" to them. */
.adslot:not(.is-live){ display:none; }
.adslot__label{ font:500 .6rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.5rem; }
.adslot__box{ min-height:90px; border:1px dashed var(--line); border-radius:var(--r-md); display:grid; place-items:center; color:var(--ink-faint); font:400 .78rem/1.5 var(--mono); background:rgba(255,255,255,.4); }

/* ---------- reveal animations ---------- */
.js [data-reveal]{ opacity:0; transform:translateY(22px); }
.js .is-visible[data-reveal]{ animation:fadeUp .8s var(--ease) forwards; }
.js [data-reveal="left"]{ transform:translateX(-26px); }
.js .is-visible[data-reveal="left"]{ animation:fadeSide .8s var(--ease) forwards; }
[data-delay="1"]{ animation-delay:.09s !important; }
[data-delay="2"]{ animation-delay:.18s !important; }
[data-delay="3"]{ animation-delay:.27s !important; }
[data-delay="4"]{ animation-delay:.36s !important; }
[data-delay="5"]{ animation-delay:.45s !important; }

@keyframes fadeUp{ to{ opacity:1; transform:translateY(0) } }
@keyframes fadeSide{ to{ opacity:1; transform:translateX(0) } }

/* page-load sequence */
.pl > *{ opacity:0; animation:fadeUp .9s var(--ease) forwards; }
.pl > *:nth-child(1){ animation-delay:.05s }
.pl > *:nth-child(2){ animation-delay:.16s }
.pl > *:nth-child(3){ animation-delay:.27s }
.pl > *:nth-child(4){ animation-delay:.38s }
.pl > *:nth-child(5){ animation-delay:.49s }

/* view transition-ish fade between pages */
.pagefade{ position:fixed; inset:0; z-index:300; background:var(--paper); pointer-events:none; opacity:0; transition:opacity .32s var(--ease); }
.pagefade.is-on{ opacity:1; }

/* ---------- misc ---------- */
:focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; border-radius:3px; }
::selection{ background:var(--saffron); color:var(--ink); }

.updated{ font:400 .72rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }

.breadcrumb{ font:400 .72rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1.4rem; }
.breadcrumb a{ color:var(--ink-soft); }

.pager{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--line); }
@media (max-width:620px){ .pager{ grid-template-columns:1fr; } }
.pager a{ padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:var(--r-md); background:rgba(255,255,255,.6); transition:border-color .3s, transform .3s var(--ease); }
.pager a:hover{ border-color:var(--indigo); transform:translateY(-3px); }
.pager small{ display:block; font:500 .64rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.4rem; }
.pager b{ font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--ink); }
.pager .next{ text-align:right; }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal],.pl > *{ opacity:1 !important; transform:none !important; }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* ambient flying machine — original silhouette, very slow */
.hero__art svg.flier{
  position:absolute; top:32%; left:0; width:132px; height:auto;
  animation:soar 78s linear infinite;
  opacity:.72;
}
@keyframes soar{
  0%{ transform:translate(-16vw,0) rotate(-2deg) }
  50%{ transform:translate(52vw,-26px) rotate(1.5deg) }
  100%{ transform:translate(120vw,6px) rotate(-1deg) }
}
@media (max-width:700px){ .flier{ width:88px; top:30%; } }

/* Safety net: if the observer never fires (headless renderer, blocked JS,
   crawler with a short budget), everything becomes visible on its own. */
.js [data-reveal]{ animation:failsafeShow 0s linear 3s forwards; }
.js .is-visible[data-reveal]{ animation:fadeUp .8s var(--ease) forwards; }
@keyframes failsafeShow{ to{ opacity:1; transform:none } }