/* ═══ NU 123 ═══════════════════════════════════════════════════════════════════
   Colour comes from nu123_strip.pdf: one brand teal (#549CB2, measured), black type,
   white ground. The logo's tell is the thin circle that rings "NU" and breaks out of
   the strip — that ring is reused as the site's recurring mark: on the header, on the
   category rules, on the card hover. It is the one thing i11 does not have, and it is
   what keeps this from reading as a copy of it.
   ═════════════════════════════════════════════════════════════════════════════ */
:root{
  --brand:#549CB2;
  --brand-ink:#31707F;   /* darkened brand — the raw teal fails contrast on white */
  --ink:#0B0B0C;
  --muted:#6A7278;
  --line:#E4E8EA;
  --bg:#fff;
  --wrap:1180px;
  --e:cubic-bezier(.22,1,.36,1);
}


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Heebo',system-ui,sans-serif;font-weight:400;
  font-size:clamp(16px,1.05vw,17px);line-height:1.75;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── header ─────────────────────────────────────────────────────────────────── */
.hd{
  background:var(--brand);color:#000;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 clamp(16px,4vw,44px);height:clamp(64px,7vw,94px);
  position:sticky;top:0;z-index:50;
}
.hd__mark{display:inline-flex;align-items:center;position:relative;flex:0 0 auto;direction:ltr}
.hd__word{
  font-weight:900;font-size:clamp(1.5rem,2.6vw,2.15rem);letter-spacing:-.01em;
  line-height:1;color:#000;position:relative;z-index:1;
}
.hd__word i{color:#fff;font-style:normal;padding:0 .06em}
/* The ring belongs around "NU" — the left end of the wordmark. The wordmark itself is
   LTR inside an RTL page, so inset-inline-start resolves to the RIGHT and put the ring
   around the "3" instead. Use a physical left. */
.hd__circle{
  position:absolute;left:-.34em;top:50%;
  width:2.05em;height:2.05em;margin-top:-1.02em;
  border:1.5px solid rgba(255,255,255,.92);border-radius:50%;
  font-size:clamp(1.5rem,2.6vw,2.15rem);pointer-events:none;
}
.hd__nav{display:flex;gap:clamp(10px,1.8vw,26px);flex-wrap:wrap;justify-content:flex-end}
.hd__nav a{
  font-weight:500;font-size:clamp(.86rem,1.05vw,1rem);color:#08272F;
  padding:.35em 0;border-bottom:2px solid transparent;transition:border-color .2s var(--e)
}
.hd__nav a:hover,.hd__nav a:focus-visible{border-color:#fff}

/* ── homepage ───────────────────────────────────────────────────────────────── */
.home{max-width:var(--wrap);margin:0 auto;padding:clamp(26px,4vw,54px) clamp(16px,4vw,28px) 60px}
.sec{margin-bottom:clamp(38px,5vw,64px)}
.sec__h{
  font-size:clamp(1.25rem,2vw,1.6rem);font-weight:900;margin:0 0 18px;
  display:flex;align-items:center;gap:.6em;
}
.sec__h>span{order:0}
.sec__h::after{content:"";flex:1;height:1px;background:var(--line);order:2}
/* order:0 keeps the ring hard against its heading; without it flex order put the rule
   between them and the ring floated off at the far edge */
.sec__h::before{
  content:"";width:.62em;height:.62em;border:1.5px solid var(--brand);border-radius:50%;
  flex:0 0 auto;order:1;
}

/* ── featured (newest) ──────────────────────────────────────────────────────── */
.ft1{
  display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;
  margin-bottom:clamp(30px,4vw,52px);
  transition:transform .28s var(--e),box-shadow .28s var(--e),border-color .28s var(--e);
}
.ft1:hover{transform:translateY(-3px);border-color:var(--brand);
  box-shadow:0 18px 40px -20px rgba(11,11,12,.36)}
.ft1__img{display:block;aspect-ratio:16/10;background:#EDF2F4;overflow:hidden}
.ft1__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--e)}
.ft1:hover .ft1__img img{transform:scale(1.03)}
.ft1__txt{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(20px,3vw,38px);gap:.55em}
.ft1__top{display:flex;align-items:baseline;gap:.6em;
  font-size:.76rem;font-weight:700;letter-spacing:.07em}
.ft1__ttl{font-size:clamp(1.3rem,2.3vw,1.85rem);font-weight:900;line-height:1.24;
  letter-spacing:-.015em}
.ft1__lead{font-size:.96rem;color:var(--muted);line-height:1.65}
@media(max-width:760px){
  .ft1{grid-template-columns:1fr}
  .ft1__img{aspect-ratio:16/9}
}

/* auto-fit, not repeat(3,1fr): with the newest article promoted to the featured slot the
   grid often holds 2 cards, and fixed tracks left an empty third column gaping open.
   320px floor caps it at 3 across inside the 1180px wrap. */
.grid{display:grid;gap:clamp(16px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}

.cd{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  transition:transform .28s var(--e),box-shadow .28s var(--e),border-color .28s var(--e);
}
.cd:hover{transform:translateY(-3px);border-color:var(--brand);
  box-shadow:0 14px 32px -18px rgba(11,11,12,.34)}
.cd__img{display:block;aspect-ratio:16/10;background:#EDF2F4;overflow:hidden}
.cd__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--e)}
.cd:hover .cd__img img{transform:scale(1.04)}
.cd__top{
  display:flex;align-items:baseline;gap:.6em;margin:14px 16px 0;
  font-size:.74rem;font-weight:700;letter-spacing:.07em;
}
.cd__cat{color:var(--brand-ink)}
.cd__date{color:var(--muted);font-weight:500;letter-spacing:0;margin-inline-start:auto}
.cd__ttl{display:block;margin:5px 16px 0;font-size:1.06rem;font-weight:700;line-height:1.38}
.cd__lead{display:block;margin:7px 16px 16px;font-size:.9rem;color:var(--muted);line-height:1.6}

/* ── article ────────────────────────────────────────────────────────────────── */
.ar{max-width:760px;margin:0 auto;padding:0 clamp(16px,4vw,24px) 70px}
.ar__hero{margin:0 calc(-1 * clamp(16px,4vw,24px)) clamp(20px,3vw,30px)}
.ar__hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ar__cat{
  margin:0 0 .4em;font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--brand-ink)
}
.ar h1{
  font-size:clamp(1.7rem,4.2vw,2.7rem);font-weight:900;line-height:1.18;
  letter-spacing:-.02em;margin:0 0 .5em;
}
.ar__lead{
  font-size:clamp(1.06rem,1.55vw,1.22rem);font-weight:500;line-height:1.65;
  color:#2A3339;margin:0 0 1.5em;padding-inline-start:.85em;
  border-inline-start:3px solid var(--brand);
}
.ar h2{
  font-size:clamp(1.2rem,2vw,1.45rem);font-weight:700;line-height:1.35;
  margin:1.9em 0 .5em;
}
.ar p{margin:0 0 1.15em}
.ar__fig{margin:1.8em 0}
.ar__fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.ar__meta{
  display:flex;align-items:center;gap:.6em;flex-wrap:wrap;
  margin:0 0 1.4em;font-size:.84rem;color:var(--muted)
}
.ar__sp{color:#B6BFC4}
/* paid editorial must read as paid editorial at a glance, not as a footnote */
.ar__promo{
  background:#EDF3F5;color:var(--brand-ink);border:1px solid #CFE0E6;
  border-radius:4px;padding:.15em .55em;font-size:.78rem;font-weight:700;letter-spacing:.03em
}
.ar__disc{
  margin:2.2em 0 0;padding-top:1.1em;border-top:1px solid var(--line);
  font-size:.8rem;line-height:1.7;color:var(--muted)
}
.ar__back{margin:1.8em 0 0;font-size:.94rem}
.ar__back a{color:var(--brand-ink);font-weight:500;border-bottom:1px solid currentColor}

/* ── legal pages ────────────────────────────────────────────────────────────── */
.lg{max-width:760px;margin:0 auto;padding:clamp(26px,4vw,48px) clamp(16px,4vw,24px) 70px}
.lg h1{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:900;letter-spacing:-.02em;margin:0 0 .25em}
.lg__upd{margin:0 0 2em;font-size:.84rem;color:var(--muted)}
.lg h2{font-size:clamp(1.08rem,1.7vw,1.25rem);font-weight:700;margin:2em 0 .5em}
.lg p{margin:0 0 1em}
.lg ul{margin:0 0 1.2em;padding-inline-start:1.15em}
.lg li{margin:0 0 .4em}

/* ── footer ─────────────────────────────────────────────────────────────────── */
.ft{background:var(--brand);margin-top:40px}
.ft__in{
  max-width:var(--wrap);margin:0 auto;padding:26px clamp(16px,4vw,28px);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.ft__mark{font-weight:900;font-size:1.3rem;color:#000;line-height:1}
.ft__mark i{color:#fff;font-style:normal;padding:0 .06em}
.ft__tag{color:#08272F;font-size:.92rem}
.ft__nav{display:flex;gap:clamp(12px,2vw,22px);flex-wrap:wrap;margin-inline-start:auto}
.ft__nav a{
  color:#08272F;font-size:.9rem;font-weight:500;
  border-bottom:1px solid rgba(8,39,47,.35);padding-bottom:1px;
  transition:border-color .2s var(--e)
}
.ft__nav a:hover,.ft__nav a:focus-visible{border-color:#08272F}
.ft__soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:1px solid rgba(8,39,47,.35);border-radius:50%;
  color:#08272F;border-bottom-width:1px;
  transition:background .2s var(--e),border-color .2s var(--e)
}
.ft__soc:hover,.ft__soc:focus-visible{background:rgba(255,255,255,.5);border-color:#08272F}
/* the legal strip is black, not teal: it bookends the black ticker at the top, and the
   small print needs far more contrast than 8px of dark-on-teal would give it */
.ft__legal{background:#0B0B0C;color:#98A3A9}
.ft__legal>*{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,28px);
  font-size:.76rem;line-height:1.7}
.ft__legal>p:first-child{padding-top:18px}
.ft__copy{padding-bottom:20px;padding-top:8px;color:#6E787D}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── ticker ─────────────────────────────────────────────────────────────────── */
.tk{
  background:#0B0B0C;color:#DCE4E7;font-size:.78rem;
  display:flex;align-items:center;gap:.7em;
  padding:7px clamp(16px,4vw,44px);letter-spacing:.01em;
}
.tk__dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:0 0 auto}
.tk__tag{color:#8A959B;margin-inline-start:auto}
@media(max-width:600px){.tk__tag{display:none}}

/* ── lead form ──────────────────────────────────────────────────────────────── */
.lf{
  margin:2.6em 0 .5em;padding:clamp(20px,3vw,30px);
  border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:10px;
  background:#F8FAFB;
}
.lf__h{margin:0;font-size:clamp(1.15rem,1.9vw,1.4rem);font-weight:900}
.lf__sub{margin:.3em 0 1.1em;color:var(--muted);font-size:.94rem}
.lf__row{display:flex;gap:12px;flex-wrap:wrap}
.lf__row label{flex:1 1 200px;display:flex;flex-direction:column;gap:.32em}
.lf label span{font-size:.84rem;font-weight:500;color:#374349}
.lf input[type=text],.lf input[type=tel]{
  /* 16px is not cosmetic: iOS Safari zooms into any focused input below it */
  font:inherit;font-size:16px;padding:.62rem .8rem;border:1px solid #CFD8DC;
  border-radius:8px;background:#fff;color:var(--ink);
}
.lf input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(84,156,178,.22)}
/* honeypot. NOT left:-9999px — the page is RTL, where leftward overflow is scrollable,
   so that pushed scrollWidth to 10389px on a 390px phone. Clip it in place instead. */
.lf__hp{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
/* RTL: the box belongs to the left of the sentence it agrees to */
.lf__consent{
  display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;
  gap:.5rem;margin:.9em 0 .2em;font-size:.86rem;cursor:pointer;
}
.lf__consent input{width:16px;height:16px;min-width:16px;margin:0;accent-color:var(--brand);cursor:pointer}
.lf__err{min-height:1.2em;margin:.45em 0 0;color:#B3261E;font-size:.85rem}
.lf__btn{
  margin-top:.5em;width:100%;padding:.8rem;border:0;border-radius:8px;cursor:pointer;
  background:var(--brand);color:#04222B;font:inherit;font-weight:700;font-size:1.02rem;
  transition:filter .2s var(--e),transform .16s var(--e);
}
.lf__btn:hover{filter:brightness(1.07)}
.lf__btn:active{transform:scale(.985)}
.lf__btn:disabled{opacity:.55;cursor:default}
.lf__ok{margin:.7em 0 0;color:#0A7D55;font-weight:500;font-size:.94rem;min-height:1.2em}
.lf__note{margin:.8em 0 0;font-size:.78rem;line-height:1.6;color:var(--muted)}
.lf__note a{color:var(--brand-ink);border-bottom:1px solid currentColor}

/* Announced to screen readers, absent for everyone else. The design has no room for a
   visible h1 on the homepage, but a page with no h1 breaks the heading hierarchy the
   accessibility statement promises. Same clip trick as the honeypot — no RTL overflow. */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0
}

/* ── skip link ──────────────────────────────────────────────────────────────── */
/* off-screen via translate, not left:-9999px — this page is RTL, where leftward
   overflow is scrollable and would widen the document */
.skip{
  position:fixed;top:0;inset-inline-start:0;z-index:100;
  background:#0B0B0C;color:#fff;padding:.7em 1.2em;font-weight:700;
  transform:translateY(-120%);transition:transform .18s var(--e)
}
.skip:focus{transform:translateY(0)}

/* every interactive element needs a visible focus ring for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--brand-ink);outline-offset:2px
}