/* ============================================================
   DESIGN DIRECTION — "Azure & Paper"
   An institutional, editorial blue identity. The one bold move
   is the deep prussian-blue masthead field; everything else sits
   on airy blue-tinted paper with azure accents and sky (لبني)
   tints. No decorative gradients, no grid wallpaper, no mono
   caps labels — color does the work.
   Type: Spectral (EN display) · El Messiri (AR display) ·
   IBM Plex Sans / IBM Plex Sans Arabic (body)
   ============================================================ */

:root {
  /* light */
  --paper:   #EDF4FB;
  --surface: #FFFFFF;
  --sky:     #D4E8F8;   /* لبني — sky tint */
  --sky-2:   #E6F2FC;
  --ink:     #0E2F4C;   /* deep sky-blue text */
  --muted:   #47637C;
  --faint:   #7C93A8;
  --line:    #CCE0F0;
  --line-2:  #B7D4EA;
  --blue:    #1E7FB8;   /* sky azure */
  --blue-ink:#176496;
  --label:   #176496;   /* small blue labels: kickers, factsheet labels, years — WCAG AA 5.74:1 */
  --faint-text: #56708A; /* footer line — WCAG AA */
  --link-line: underline; /* footer link: not colour alone */
  --btn-bg:  #176496;   /* filled buttons on paper (Send) — white text 6.36:1 */
  --accent:  #2490CE;
  --on-accent:#FFFFFF;

  --ff-display: "Spectral", Georgia, "Times New Roman", serif;
  --ff-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1140px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-e: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #06182A;
    --surface: #0C2740;
    --sky:     #123A5A;
    --sky-2:   #0E2E49;
    --ink:     #E4F0FA;
    --muted:   #9FBAD2;
    --faint:   #5E7C96;
    --line:    #1B3B59;
    --line-2:  #284D6E;
    --blue:    #5BB4E8;
    --blue-ink:#92CFF0;
    --label:   #5BB4E8;
    --faint-text: #8BA5BC;
    --btn-bg:  #5BB4E8;
    --link-line: none;
    --accent:  #53AEE6;
    --on-accent:#06131F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:   #06182A;
  --surface: #0C2740;
  --sky:     #123A5A;
  --sky-2:   #0E2E49;
  --ink:     #E4F0FA;
  --muted:   #9FBAD2;
  --faint:   #5E7C96;
  --line:    #1B3B59;
  --line-2:  #284D6E;
  --blue:    #5BB4E8;
  --blue-ink:#92CFF0;
  --label:   #5BB4E8;
  --faint-text: #8BA5BC;
  --btn-bg:  #5BB4E8;
  --link-line: none;
  --accent:  #53AEE6;
  --on-accent:#06131F;
  color-scheme: dark;
}

/* deep-blue masthead field — fixed in both themes (brand field) */
.hero, .post-hero {
  --h-bg:    #0D4C78;
  --h-bg-2:  #0A3B60;
  --h-fg:    #EAF6FF;
  --h-muted: #AED2EC;
  --h-line:  rgba(255,255,255,.17);
  --h-chip:  rgba(255,255,255,.28);
  --h-accent:#7FD0F5;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--ff-body); font-size: 1.0625rem; line-height: 1.7;
  overflow-x: hidden;
}
[dir="rtl"] { --ff-display: "El Messiri", "Noto Kufi Arabic", serif;
              --ff-body: "IBM Plex Sans Arabic", system-ui, sans-serif; }

h1, h2, h3 { font-family: var(--ff-display); font-weight: 600; line-height: 1.16; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter) var(--gutter-e); }

.kicker { color: var(--label); font-weight: 600; font-size: .92rem; letter-spacing: .01em; display: inline-block; margin-bottom: .55rem; }
[dir="rtl"] .kicker { font-size: 1rem; }

/* =================== HEADER =================== */
header.site {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in oklab, var(--paper) 85%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
body::before { content:""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top,0px); background: var(--paper); z-index: 21; }
.nav { display: flex; align-items: center; gap: 1.1rem; min-height: 66px; }
.brand { font-family: var(--ff-display); font-weight: 600; font-size: 1.18rem; text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); }
.brand .mk { width: 32px; height: 32px; flex: none; color: var(--blue); }
.links { display: flex; gap: 1.35rem; margin-inline-start: auto; }
.links a { text-decoration: none; color: var(--muted); font-size: .95rem; font-weight: 500; transition: color .18s; }
.links a:hover { color: var(--blue); }
.tools { display: flex; align-items: center; gap: .5rem; margin-inline-start: 1rem; }
.btn-ghost { font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; background: transparent; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 3px; padding: .42rem .6rem; line-height: 1; transition: border-color .18s, color .18s; }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }

/* =================== HERO =================== */
.hero { background: linear-gradient(180deg, var(--h-bg), var(--h-bg-2)); color: var(--h-fg); position: relative; overflow: hidden; }
.hero-inner { padding-block: clamp(3.2rem, 8vw, 6rem) 0; }
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 2.5rem; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.hero .kicker { color: var(--h-accent); }
.hero-main { max-width: 44ch; }
.hero h1 { font-size: clamp(2.8rem, 7.4vw, 5.1rem); font-weight: 600; letter-spacing: -0.015em; color: #fff; }
[dir="rtl"] .hero h1 { letter-spacing: 0; font-weight: 700; }
.hero .role { margin-top: 1.15rem; font-size: clamp(1.05rem, 2.2vw, 1.28rem); color: var(--h-fg); font-weight: 500; max-width: 40ch; }
.hero .lede { margin-top: 1.1rem; color: var(--h-muted); max-width: 48ch; }
.hero .creds { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.cred-chip { font-size: .82rem; font-weight: 500; color: var(--h-fg); border: 1px solid var(--h-chip); border-radius: 100px; padding: .34rem .78rem; }
.hero-cta { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.btn { font: inherit; font-weight: 600; font-size: .96rem; cursor: pointer; text-decoration: none; border-radius: 3px;
  padding: .72rem 1.3rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; transition: background .18s, border-color .18s, color .18s; }
.btn-primary { background: #fff; color: #0C2B49; }
.btn-primary:hover { background: var(--h-accent); color: #06233c; }
.btn-line { background: transparent; color: var(--h-fg); border-color: var(--h-chip); }
.btn-line:hover { border-color: #fff; }

.hero-seal { flex: none; width: clamp(110px, 17vw, 180px); height: auto; color: var(--h-accent); opacity: .92; }
@media (max-width: 780px) { .hero-seal { display: none; } }

.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--h-line); }
.hstat { padding: 1.5rem 1.2rem 1.7rem; border-inline-start: 1px solid var(--h-line); }
.hstat:first-child { border-inline-start: 0; padding-inline-start: 0; }
.hstat .n { font-family: var(--ff-display); font-size: clamp(2rem, 4.2vw, 2.7rem); font-weight: 600; line-height: 1; color: #fff; }
.hstat .n small { font-size: .42em; color: var(--h-accent); margin-inline-start: .2em; font-weight: 600; }
.hstat .l { color: var(--h-muted); font-size: .84rem; margin-top: .6rem; line-height: 1.45; }

/* =================== SECTIONS =================== */
section { padding-block: clamp(3.2rem, 6.5vw, 5.5rem); }
section + section { border-top: 1px solid var(--line); }
.sec-head { margin-bottom: 2.6rem; max-width: 62ch; }
.sec-head h2 { font-size: clamp(1.8rem, 3.8vw, 2.6rem); font-weight: 600; }
[dir="rtl"] .sec-head h2 { font-weight: 700; }
.sec-head .sub { color: var(--muted); margin-top: .8rem; }

/* about */
.about-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.about-body p + p { margin-top: 1.15rem; }
.about-body .big { font-size: 1.24rem; line-height: 1.6; }
.factsheet { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; overflow: hidden; }
.factsheet .row { padding: .95rem 1.15rem; border-bottom: 1px solid var(--line); }
.factsheet .row:last-child { border-bottom: 0; }
.factsheet .k { color: var(--label); font-size: .8rem; font-weight: 600; margin-bottom: .2rem; }
.factsheet .v { font-weight: 500; font-size: .96rem; }

/* expertise */
.exp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.exp { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1.8rem 1.7rem; transition: border-color .2s, transform .2s; }
.exp:hover { border-color: var(--blue); transform: translateY(-2px); }
.exp .dot { width: 30px; height: 30px; border-radius: 7px; background: var(--sky); color: var(--blue); display: grid; place-items: center; margin-bottom: 1rem; }
.exp .dot svg { width: 17px; height: 17px; }
.exp h3 { font-size: 1.24rem; }
.exp p { color: var(--muted); font-size: .96rem; margin-top: .6rem; }

/* leadership */
.lead { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: baseline; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.lead:first-child { border-top: 1px solid var(--line); }
.lead h3 { font-size: 1.2rem; font-family: var(--ff-body); font-weight: 600; }
.lead .org { color: var(--muted); font-size: .93rem; margin-top: .25rem; }
.pill { font-size: .78rem; font-weight: 600; color: var(--blue-ink); white-space: nowrap; background: var(--sky); border-radius: 100px; padding: .3rem .75rem; align-self: center; }

/* publications */
.pubs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pub { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; padding: 1.25rem .6rem; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .16s; border-radius: 4px; }
.pub:hover { background: var(--sky-2); }
.pub .yr { font-weight: 600; color: var(--label); font-size: .92rem; min-width: 3.2ch; }
.pub .mid h3 { font-size: 1.12rem; font-family: var(--ff-body); font-weight: 600; }
.pub .mid .meta { color: var(--muted); font-size: .9rem; margin-top: .2rem; }
.pub .type { font-size: .78rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line-2); border-radius: 100px; padding: .28rem .7rem; white-space: nowrap; }

/* training library */
.train-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.track h3 { font-size: 1.2rem; margin-bottom: 1.1rem; display: flex; align-items: center; gap: .6rem; }
.track h3 .bar { width: 4px; height: 1.1em; background: var(--blue); border-radius: 2px; }
.tags { display: flex; flex-wrap: wrap; gap: .55rem; }
.tag { background: var(--surface); border: 1px solid var(--line-2); border-radius: 100px; padding: .48rem .9rem; font-size: .9rem; font-weight: 500; color: var(--ink); transition: border-color .18s, background .18s; }
.tag:hover { border-color: var(--blue); background: var(--sky-2); }

/* events / news */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; transition: border-color .2s, transform .2s, box-shadow .2s; }
.card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 10px 30px -18px rgba(12,43,73,.5); }
.media { aspect-ratio: 16 / 10; position: relative; }
.media--a { background: linear-gradient(135deg, #0C2B49, #1A5C8C 70%, #2E86C9); }
.media--b { background: linear-gradient(135deg, #123a52, #2E86C9 130%); }
.media--c { background: linear-gradient(135deg, #0E3747, #227a9a); }
.media--d { background: linear-gradient(135deg, #0C2B49, #3a5a8a); }
.media--e { background: linear-gradient(135deg, #15425f, #4a90c4); }
.media--f { background: linear-gradient(135deg, #103044, #1f6f96); }
.media .chip { position: absolute; inset-block-start: .75rem; inset-inline-start: .75rem; z-index: 2; font-size: .72rem; font-weight: 600;
  background: rgba(255,255,255,.92); color: #0C2B49; padding: .28rem .62rem; border-radius: 100px; }
.media .play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.media .play svg { width: 50px; height: 50px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); }
.card .body { padding: 1.15rem 1.2rem 1.35rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card .date { font-size: .84rem; color: var(--faint-text); font-weight: 500; }
.card h3 { font-size: 1.12rem; font-family: var(--ff-body); font-weight: 600; line-height: 1.35; }
.card p { color: var(--muted); font-size: .9rem; }
.card .more { margin-top: auto; font-size: .88rem; font-weight: 600; color: var(--label); }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: .8rem; }
.gal { position: relative; border-radius: 8px; overflow: hidden; }
.gal.big { grid-column: span 2; grid-row: span 2; }
.gal .cap { position: absolute; inset-block-end: 0; inset-inline: 0; padding: 1.4rem .9rem .8rem; color: #fff; font-size: .85rem; font-weight: 500;
  background: linear-gradient(to top, rgba(8,20,33,.82), transparent); z-index: 2; }
.gal::after { content:""; position:absolute; inset:0; background-image:
  linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 28px 28px; }
.g1 { background: linear-gradient(135deg, #0C2B49, #1A5C8C); }
.g2 { background: linear-gradient(135deg, #15425f, #2E86C9); }
.g3 { background: linear-gradient(135deg, #0E3747, #227a9a); }
.g4 { background: linear-gradient(135deg, #123a52, #3a6ea5); }
.g5 { background: linear-gradient(135deg, #103044, #1f6f96); }
.g6 { background: linear-gradient(135deg, #0C2B49, #4a90c4); }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.mailrow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.3rem; border: 1px solid var(--line-2); border-radius: 6px; padding: .75rem .95rem; background: var(--surface); }
.mailrow .addr { font-weight: 500; }
.copy-btn { margin-inline-start: auto; }
[dir="rtl"] .copy-btn { margin-inline-start: 0; margin-inline-end: auto; }
.chan { margin-top: 1.4rem; display: flex; flex-direction: column; }
.chan a { color: var(--muted); text-decoration: none; display: inline-flex; gap: .6rem; padding: .4rem 0; transition: color .16s; }
.chan a:hover { color: var(--blue); }
.chan a .ic { color: var(--label); font-weight: 600; min-width: 1.5em; }
form .field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
form label { font-size: .85rem; font-weight: 600; color: var(--muted); }
form input, form textarea { font: inherit; font-size: .95rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 5px; padding: .68rem .8rem; width: 100%; }
form input:focus, form textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
form textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.note { font-size: .83rem; color: var(--faint-text); margin-top: .65rem; }
.form-ok { display: none; border: 1px solid var(--blue); background: var(--sky-2); color: var(--ink); border-radius: 5px; padding: 1rem; font-size: .92rem; margin-top: 1rem; }

/* footer */
footer.site { border-top: 1px solid var(--line); padding-block: 2.6rem 3rem; background: var(--surface); }
.foot { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.fnav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.fnav a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.fnav a:hover { color: var(--blue); }
.cr { color: var(--faint-text); font-size: .85rem; }
.cr a { color: var(--label); text-decoration: var(--link-line); }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }

/* responsive */
@media (max-width: 920px) {
  .about-grid, .contact-grid, .train-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hstat:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .hstat { border-top: 1px solid var(--h-line); }
  .hstat:nth-child(1), .hstat:nth-child(2) { border-top: 0; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gal.big { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 760px) { .links { display: none; } }
@media (max-width: 600px) {
  .exp-grid, .cards, .form-row { grid-template-columns: 1fr; }
  .lead { grid-template-columns: 1fr; }
  .pill { justify-self: start; }
  .pub { grid-template-columns: auto 1fr; }
  .pub .type { display: none; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* =================== ADDITIONS (production wiring) ===================
   Additive only: none of these change the approved look when media is absent. */
:root { --danger: #B42318; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --danger: #F97066; } }
:root[data-theme="dark"] { --danger: #F97066; }

/* real images, when the dashboard provides them, sit over the gradient fallback */
.media img, .gal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gal img { z-index: 1; }

/* contact form states */
.form-err { display: none; border: 1px solid var(--danger); background: var(--surface); color: var(--ink); border-radius: 5px; padding: 1rem; font-size: .92rem; margin-top: 1rem; }
button[disabled] { opacity: .7; cursor: default; }

/* honeypot: hidden from people, visible to naive bots */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* sections / links switched off from the dashboard */
[hidden] { display: none !important; }

/* home cards: "Read more" is a link to the post page — same look as the design's label */
.card a.more { text-decoration: none; }
.card a.more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =================== POST PAGES (/posts/<slug>, /ar/posts/<slug>) + 404 ===================
   Same tokens as the home page: the deep-blue masthead field for the header, paper + surface below. */
.post-hero { background: linear-gradient(180deg, var(--h-bg), var(--h-bg-2)); color: var(--h-fg); }
.post-hero-inner, .post-main { max-width: 860px; }
.post-hero-inner { padding-block: clamp(2rem, 5vw, 3.2rem) clamp(2.6rem, 6vw, 4rem); }
.post-hero.has-lead .post-hero-inner { padding-bottom: clamp(6rem, 14vw, 9.5rem); }
.post-back { display: flex; width: fit-content; align-items: center; gap: .45rem; color: var(--h-muted); text-decoration: none;
  font-size: .92rem; font-weight: 500; margin-bottom: clamp(1.4rem, 3vw, 2rem); transition: color .18s; }
.post-back:hover { color: #fff; }
.post-chip { display: block; width: fit-content; font-size: .75rem; font-weight: 600; background: rgba(255,255,255,.92); color: #0C2B49;
  padding: .28rem .7rem; border-radius: 100px; margin-bottom: 1rem; }
.post-hero h1 { font-size: clamp(2rem, 5.2vw, 3.3rem); font-weight: 600; letter-spacing: -0.01em; color: #fff; max-width: 26ch; }
[dir="rtl"] .post-hero h1 { font-weight: 700; letter-spacing: 0; }
.post-lede { margin-top: 1rem; color: var(--h-muted); font-size: clamp(1.02rem, 2vw, 1.18rem); max-width: 60ch; }
.post-meta { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: .3rem .6rem; color: var(--h-fg); font-size: .93rem; font-weight: 500; }
.post-meta .sep { color: var(--h-accent); }

.post-main { padding-block: clamp(2.4rem, 5vw, 3.4rem) clamp(3rem, 7vw, 5rem); }
.post-hero.has-lead + .post-main { padding-top: 0; }
.post-hero.has-lead + .post-main > :first-child { margin-top: calc(-1 * clamp(4.6rem, 11vw, 7.5rem)); position: relative; }
.post-cover { margin: 0 0 clamp(2rem, 4vw, 2.8rem); }
.post-cover img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  box-shadow: 0 22px 44px -28px rgba(6,24,42,.6); }

/* video: a facade over our own cover/gradient; the player loads only after a click */
.post-video { margin-bottom: clamp(2rem, 4vw, 2.8rem); }
.post-main > .post-video:not(:first-child) { margin-top: .4rem; }
.post-video .media { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; box-shadow: 0 22px 44px -28px rgba(6,24,42,.6); }
.video-facade { text-decoration: none; cursor: pointer; }
.video-facade::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, rgba(6,24,42,.6)); }
.video-facade .play svg { width: 68px; height: 68px; transition: transform .2s; }
.video-facade:hover .play svg, .video-facade:focus-visible .play svg { transform: scale(1.07); }
.video-label { position: absolute; inset-inline-start: 1.1rem; inset-block-end: .95rem; z-index: 2; color: #fff; font-weight: 600; font-size: .95rem; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-video .note { margin-top: .6rem; }

/* body: the safe Markdown subset */
.post-body { font-size: 1.08rem; line-height: 1.8; }
.post-body > * + * { margin-top: 1.1rem; }
.post-body > :first-child { margin-top: 0; }
.post-body h2 { font-size: clamp(1.45rem, 3vw, 1.8rem); margin-top: 2.2rem; }
.post-body h3 { font-size: 1.25rem; margin-top: 1.8rem; }
.post-body a { color: var(--blue); text-underline-offset: 3px; }
.post-body ul, .post-body ol { margin: 0; padding-inline-start: 1.4rem; }
.post-body li + li { margin-top: .35rem; }
.post-body blockquote { margin-inline: 0; padding-inline-start: 1.1rem; border-inline-start: 3px solid var(--blue); color: var(--muted); }
.post-body strong { font-weight: 600; }

/* in-post photos */
.post-gallery { padding-block: clamp(2rem, 4vw, 2.6rem) 0; margin-top: clamp(2.4rem, 5vw, 3.2rem); border-top: 1px solid var(--line); }
.post-gallery h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); margin-bottom: 1.2rem; }
.post-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.post-photos figure { margin: 0; }
.post-photos a { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--sky); }
.post-photos img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.post-photos a:hover img { transform: scale(1.03); }
.post-photos figcaption { margin-top: .45rem; font-size: .85rem; color: var(--muted); line-height: 1.5; }
.post-foot { margin-top: clamp(2.6rem, 5vw, 3.4rem); padding-top: 1.4rem; border-top: 1px solid var(--line); }
.post-foot a { display: inline-flex; gap: .45rem; color: var(--blue); font-weight: 600; text-decoration: none; }
.post-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 404 / 503 */
.status-hero { padding-block: 3rem; min-height: calc(100svh - 13rem); display: flex; align-items: center; }
.status-hero .post-hero-inner { width: 100%; }
.status-hero .btn { margin-top: 1.6rem; }

/* lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: rgba(4,14,26,.9); }
.lightbox img { display: block; max-width: min(1100px, 92vw); max-height: 80vh; width: auto; height: auto; margin-inline: auto; border-radius: 6px; }
.lightbox-cap { margin-top: .7rem; text-align: center; color: #EAF6FF; font-size: .92rem; }
.lightbox .btn-ghost { position: fixed; z-index: 2; color: #fff; border-color: rgba(255,255,255,.45); background: rgba(6,24,42,.55); font-size: 1.1rem; padding: .55rem .75rem; }
.lightbox .btn-ghost:hover { border-color: #fff; color: #fff; }
.lightbox-close { top: 1rem; inset-inline-end: 1rem; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); }
.lightbox-prev { inset-inline-start: 1rem; }
.lightbox-next { inset-inline-end: 1rem; }

/* formerly inline style attributes in the template (moved here for the Content-Security-Policy; same values,
   and :hover included so the button behaves exactly as with the inline style, which overrode hover rules) */
.about-body { margin-top: 1.3rem; }
.btn.btn-send, .btn.btn-send:hover { background: var(--btn-bg); color: var(--on-accent); }
.status-alt { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--h-line); }
.status-alt h2 { font-size: 1.4rem; color: #fff; margin-bottom: .4rem; }
.status-alt a { color: var(--h-accent); }

/* visually hidden, still read by screen readers and search engines */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* post pages: text-size links in the darker ink of the same blue (WCAG AA 4.5:1 on paper; light and dark) */
.post-body a, .post-foot a { color: var(--blue-ink); }
.post-video .note { color: var(--muted); }