/* ===========================================================
   kolmck.net — "Blue Screen"
   The subject's own interface as the page's structural material.
   Palette roles, three named widths, one figure system.
   =========================================================== */

:root{
  /* --- palette: 5 members with a job, + one derived rule tint --- */
  --navy:      #05072b;   /* panel / masthead ground */
  --ground:    #0b1049;   /* page ground (the editor blue, graded down) */
  --ink:       #edeaf6;   /* ink */
  --accent:    #ffd335;   /* accent — saturated yellow */
  --secondary: #22c7da;   /* secondary — saturated cyan, owns a full band */
  --rule:      #545a9e;   /* derived from the ground: rules only, 3px double */
  --prose-ink: #d5d2e8;
  --quiet:     #9a9ec9;
  --dim:       #7c81bb;
  --hairline:  #2c3170;

  /* --- section accents (from the content plan) --- */
  --sec: var(--accent);

  /* --- three named widths --- */
  --prose:    60ch;
  --breakout: 100%;
  --gut:      20px;

  /* --- type --- */
  --display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body:    "Public Sans", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-body: 17px;
  --fs-prose: 17.5px;
  --fs-cap: 15px;
  --fs-credit: 12px;
  --fs-label: 12px;
  --para-gap: 1.05em;
  --insert-gap: 32px;
}

[data-section="pascal"]        { --sec:#8f95d6; }
[data-section="delphi"]        { --sec:#ffd335; }
[data-section="after-borland"] { --sec:#22c7da; }
[data-section="people"]        { --sec:#f08a63; }
[data-section="versions"]      { --sec:#f08a63; }

@media (min-width:768px){  :root{ --gut:32px; --prose:62ch; } }
@media (min-width:1024px){ :root{ --gut:40px; --breakout:920px; --fs-body:17.5px; --fs-prose:18px; } }
@media (min-width:1280px){ :root{ --gut:52px; --breakout:1120px; --prose:66ch; --fs-body:18px; --fs-prose:19px; --fs-cap:15.5px; --insert-gap:40px; } }
/* --- real rules above the desktop cap: the page gains, it does not just gain margin --- */
@media (min-width:1600px){ :root{ --gut:64px; --breakout:1400px; --prose:70ch; --fs-body:19px;   --fs-prose:20px;   --fs-cap:16px;   --fs-credit:12.5px; --insert-gap:48px; } }
@media (min-width:1920px){ :root{ --gut:76px; --breakout:1760px; --prose:74ch; --fs-body:20.5px; --fs-prose:21.5px; --fs-cap:17px;   --fs-credit:13px;   --insert-gap:56px; } }
@media (min-width:2560px){ :root{ --gut:96px; --breakout:2280px; --prose:78ch; --fs-body:22px;   --fs-prose:23px;   --fs-cap:18px;   --fs-credit:14px;   --insert-gap:64px; } }

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

html{ background:var(--ground); }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:var(--fs-body); line-height:1.6;
  -webkit-text-size-adjust:100%; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--accent); }
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
code{ font-family:var(--mono); font-size:.9em; background:rgba(84,90,158,.22); padding:.08em .32em; border-radius:2px; }

/* ---------- layout primitives: three named widths ---------- */
.wrap{ max-width:var(--breakout); margin-inline:auto; padding-inline:var(--gut); }
.measure{ max-width:var(--prose); margin-inline:auto; padding-inline:var(--gut); }
.bleed{ width:100%; }

.dbl{ border-top:3px double var(--rule); }
.dbl-b{ border-bottom:3px double var(--rule); }
.label{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--quiet); }
.label--accent{ color:var(--accent); }
.label--sec{ color:var(--sec); }
.ico{ width:1.15em; height:1.15em; flex:none; vertical-align:-.16em; }

/* ---------- masthead ---------- */
.masthead{ background:var(--navy); }
.masthead .wrap{ padding-block:20px 0; }
.mast-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:14px; }
.wordmark{ display:flex; align-items:center; gap:clamp(10px,1vw,20px); }
.wordmark .name{ font-family:var(--display); font-weight:700; font-size:clamp(30px,4.4vw,68px); line-height:.86; letter-spacing:-.035em; }
.wordmark .name b{ color:var(--accent); font-weight:700; }
.colophon-mark{ width:clamp(32px,4.8vw,76px); height:clamp(32px,4.8vw,76px); color:var(--secondary); flex:none; }
.mast-line{ font-family:var(--mono); font-size:clamp(11.5px,.95vw,17px); line-height:1.5; color:var(--quiet); max-width:44ch; }
@media (min-width:1024px){ .mast-line{ text-align:right; } }
.masthead--compact .wordmark .name{ font-size:clamp(24px,2.3vw,44px); }
.masthead--compact .colophon-mark{ width:clamp(26px,2.6vw,50px); height:clamp(26px,2.6vw,50px); }
.foot-bottom .colophon-mark{ width:clamp(21px,2vw,40px); height:clamp(21px,2vw,40px); }
.masthead--compact .mast-top{ align-items:center; padding-bottom:12px; }

.nav{ border-top:3px double var(--rule); }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 26px; padding-block:14px; }
@media (min-width:1600px){ .nav ul{ gap:10px 40px; } }
.nav a{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:clamp(12.5px,1vw,19px); letter-spacing:.1em; text-transform:uppercase; color:var(--quiet); }
.nav a:hover{ color:var(--accent); }
.nav a[aria-current="page"]{ color:var(--ink); }
.nav a[aria-current="page"] .ico{ color:var(--sec); }
.nav .sep{ flex:1 1 0; min-width:0; }

/* CSS-only hamburger */
.navtoggle{ position:absolute; opacity:0; width:0; height:0; }
.navbtn{ display:flex; align-items:center; gap:10px; padding:12px 0; cursor:pointer; font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--quiet); }
.navbtn svg{ width:20px; height:20px; }
@media (max-width:767px){
  .nav ul{ display:none; flex-direction:column; padding-block:4px 18px; gap:0; }
  .nav ul li{ border-top:1px solid var(--hairline); }
  .nav ul li a{ padding:13px 0; font-size:14px; }
  .nav .sep{ display:none; }
  .navtoggle:checked ~ ul{ display:flex; }
}
@media (min-width:768px){ .navbtn{ display:none; } }

/* ---------- figure system: four treatments, one drawing system ----------
   1 .fig-bleed  full-bleed band, mat rule at the bottom edge
   2 .fig-plate  photograph on a navy mat, double rule beneath
   3 .fig-offset breakout figure pushed to one side, caption stepped out
   4 .fig-inset  small inset, prose runs beside it, accent bar
   Caption is sized by the caption: its own measure, never the image's height.
------------------------------------------------------------------------ */
figure{ margin:0; }
.figcap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 20px; padding-top:12px; }
.figcap .cap{ flex:1 1 34ch; min-width:0; font-size:var(--fs-cap); line-height:1.5; color:var(--prose-ink); }
.figcap .cred{ flex:0 1 auto; font-family:var(--mono); font-size:var(--fs-credit); line-height:1.5; color:var(--dim); white-space:normal; }
@media (min-width:1024px){ .figcap .cred{ margin-left:auto; text-align:right; max-width:38ch; } }

.fig-bleed img{ width:100%; height:clamp(240px,44vw,1180px); object-fit:cover; border-bottom:4px solid var(--rule); }
.fig-bleed .figcap{ max-width:var(--breakout); margin-inline:auto; padding-inline:var(--gut); }

.fig-plate .mat{ background:var(--navy); padding:10px; border-bottom:3px double var(--rule); }
.fig-plate img{ width:100%; aspect-ratio:16/10; object-fit:cover; }

.fig-offset img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-bottom:4px solid var(--rule); }
/* the offset figure starts on the prose edge and breaks out to the container edge,
   so it aligns with the text on one side instead of floating free of both */
@media (min-width:1024px){
  .fig-offset{ display:grid; grid-template-columns:1fr; }
  .artbody > figure.fig-offset--right{ grid-column:prose-start / wide-end; }
  .artbody > figure.fig-offset--left{ grid-column:wide-start / prose-end; }
  .fig-offset .holder, .fig-offset .figcap{ width:100%; margin-left:0; }
}

.fig-inset{ border-left:3px solid var(--sec); padding-left:14px; margin-block:8px 18px; }
.fig-inset img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.fig-inset .figcap{ padding-top:10px; }
.fig-inset .figcap .cap{ flex:1 1 100%; }
.fig-inset .figcap .cred{ flex:1 1 100%; margin-left:0; text-align:left; }
@media (min-width:1024px){
  .fig-inset{ float:right; width:min(46%,340px); margin:6px 0 20px 32px; }
}
@media (min-width:1600px){ .fig-inset{ width:min(42%,420px); margin-left:44px; } }

/* ---------- homepage bands ---------- */
.band{ padding-block:clamp(40px,4.6vw,140px); }
.band--tight{ padding-block:clamp(26px,2.6vw,70px); }
.band--navy{ background:var(--navy); }
.band--cyan{ background:var(--secondary); color:#04223a; }
.band--cyan a{ color:#04223a; }
.band--cyan a:hover{ color:#062f4f; }

/* lead */
.lead-band{ position:relative; border-top:3px double var(--rule); border-bottom:3px double var(--rule); }
.lead-band img{ width:100%; height:clamp(340px,50vw,1180px); object-fit:cover; }
.lead-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(5,7,43,.97) 0%,rgba(5,7,43,.93) 20%,rgba(5,7,43,.74) 40%,rgba(5,7,43,.28) 68%,rgba(5,7,43,.04) 90%); }
.lead-copy{ position:absolute; left:0; right:0; bottom:clamp(20px,2.6vw,72px); }
.lead-scrim--top{ background:linear-gradient(to bottom,rgba(5,7,43,.97) 0%,rgba(5,7,43,.93) 30%,rgba(5,7,43,.76) 52%,rgba(5,7,43,.34) 76%,rgba(5,7,43,.06) 95%); }
.lead-copy .wrap{ display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px,3vw,80px); flex-wrap:wrap; }
.lead-copy h2{ font-size:clamp(26px,4.4vw,140px); line-height:.99; letter-spacing:-.032em; max-width:26ch; }
.lead-note{ font-family:var(--mono); font-size:clamp(12px,.95vw,19px); line-height:1.55; color:#c6c3e2;
  border-left:2px solid var(--accent); padding-left:16px; width:min(100%,clamp(200px,17vw,420px)); }
.lead-note .slotname{ display:block; margin-top:10px; font-size:.82em; color:var(--dim); }

/* numeral plate band — letterforms as the mark */
.plates{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:clamp(22px,2.6vw,68px); }
.plate{ border-top:3px double var(--rule); padding-top:16px; }
.plate .num{ font-family:var(--display); font-weight:700; font-size:clamp(46px,6vw,160px); line-height:.84; letter-spacing:-.045em; color:var(--accent); }
.plate:nth-child(even) .num{ color:var(--secondary); }
.plate p{ margin-top:14px; font-size:clamp(13.5px,1vw,20px); line-height:1.5; color:#c6c3e2; max-width:32ch; }

/* section head */
.sechead{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-bottom:18px; border-bottom:1px solid var(--hairline); margin-bottom:clamp(22px,2.4vw,60px); }
.sechead h2{ font-size:clamp(20px,2.1vw,50px); letter-spacing:-.02em; }

/* three-column feature strip, unequal — lead entry twice the room */
.strip{ display:grid; gap:clamp(24px,2.6vw,64px); grid-template-columns:1fr; }
@media (min-width:900px){ .strip{ grid-template-columns:2fr 1fr 1fr; align-items:start; } }
.strip .entry h3{ font-size:clamp(18px,1.5vw,34px); line-height:1.14; letter-spacing:-.018em; margin-top:14px; }
.strip .entry--lead h3{ font-size:clamp(24px,2.6vw,58px); line-height:1.06; letter-spacing:-.026em; }
.strip .entry p{ margin-top:10px; font-size:clamp(13.5px,.95vw,19px); line-height:1.5; color:var(--quiet); max-width:42ch; }
.strip .entry--lead p{ font-size:clamp(15px,1.15vw,23px); color:var(--prose-ink); }

/* two-up editorial pair */
.pair{ display:grid; gap:clamp(24px,2.8vw,72px); grid-template-columns:1fr; }
@media (min-width:900px){ .pair{ grid-template-columns:1fr 1fr; } }
.pair h3{ font-size:clamp(19px,1.7vw,38px); line-height:1.12; letter-spacing:-.02em; margin-top:16px; }
.pair p{ margin-top:10px; font-size:clamp(14px,1vw,20px); line-height:1.52; color:var(--quiet); max-width:44ch; }

/* quiet colour line */
.quietline{ display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(24px,3vw,80px); flex-wrap:wrap; }
.quietline p{ flex:1 1 22ch; max-width:34ch; font-family:var(--display); font-weight:700;
  font-size:clamp(26px,3.4vw,88px); line-height:1.03; letter-spacing:-.03em; }
.quietline a{ font-family:var(--mono); font-size:clamp(12.5px,.95vw,20px); letter-spacing:.12em; text-transform:uppercase;
  border-bottom:2px solid currentColor; padding-bottom:6px; }

/* people strip — portrait crops, name and role only, kept compact */
.people{ display:grid; gap:clamp(12px,1.3vw,30px); grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr)); }
.person img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-bottom:3px solid var(--rule); }
.person .nm{ font-family:var(--display); font-weight:700; font-size:clamp(14.5px,1.02vw,22px); line-height:1.14; margin-top:10px; letter-spacing:-.015em; }
.person .ro{ font-family:var(--mono); font-size:clamp(10.5px,.72vw,15px); line-height:1.4; color:var(--quiet); margin-top:4px; }

/* section plates (three parts) */
.rows{ display:flex; flex-direction:column; }
.rowlink{ display:grid; grid-template-columns:1fr; gap:16px; align-items:center;
  border-top:3px double var(--rule); padding-block:clamp(20px,2.2vw,58px); }
.rowlink:last-child{ border-bottom:3px double var(--rule); }
@media (min-width:900px){
  .rowlink{ grid-template-columns:auto clamp(180px,19vw,470px) 1fr auto; gap:clamp(20px,2.6vw,68px); }
}
.rowlink .no{ font-family:var(--mono); font-size:clamp(12px,.85vw,18px); color:var(--dim); }
.rowlink img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-bottom:4px solid var(--rule); }
.rowlink h3{ font-size:clamp(19px,2.1vw,50px); line-height:1.1; letter-spacing:-.022em; }
.rowlink .tag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:clamp(11.5px,.85vw,18px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--sec); }

/* ---------- supporters colophon ---------- */
.colophon{ background:var(--navy); border-top:3px double var(--rule); }
.colophon .wrap{ padding-block:clamp(24px,2.2vw,54px); }
.colophon-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:clamp(16px,1.4vw,30px); }
.colophon-head .colophon-mark{ width:26px; height:26px; }
.colophon-head .cname{ font-family:var(--display); font-weight:700; font-size:clamp(17px,1.3vw,26px); letter-spacing:-.02em; }
.sponsor-groups{ display:grid; gap:clamp(18px,1.6vw,36px); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.sponsor-group > .label{ display:block; padding-bottom:10px; border-bottom:1px solid var(--hairline); margin-bottom:12px; }
.sponsor-row{ display:grid; grid-template-columns:repeat(auto-fit,300px); gap:10px; justify-content:start; }
.sponsor{ display:flex; align-items:center; justify-content:center;
  width:300px; height:92px; padding:16px; background:#020318; border:1px solid var(--hairline); }
.sponsor:hover{ border-color:var(--rule); }
.sponsor img{ max-height:56px; max-width:100%; width:auto; height:auto; object-fit:contain; }
@media (max-width:560px){
  .sponsor-row{ grid-template-columns:1fr; }
  .sponsor{ width:100%; height:88px; }
  .sponsor img{ max-height:56px; }
}

/* ---------- footer ---------- */
.footer{ background:var(--navy); border-top:3px double var(--rule); }
.footer .wrap{ padding-block:clamp(28px,3vw,74px); }
/* one row, the icons doing the work */
.foot-secs{ display:grid; gap:20px clamp(16px,1.6vw,40px); grid-template-columns:repeat(3,1fr);
  padding-bottom:clamp(22px,2.4vw,54px); }
@media (min-width:820px){ .foot-secs{ grid-template-columns:repeat(6,1fr); } }
.foot-secs a{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(10px,.9vw,18px); }
.foot-secs a .ico{ width:clamp(30px,2.8vw,56px); height:clamp(30px,2.8vw,56px); vertical-align:baseline; }
.foot-secs .fs-name{ font-family:var(--display); font-weight:700; font-size:clamp(14px,1.05vw,22px); letter-spacing:-.02em; line-height:1.15; }
.foot-secs .fs-blurb{ display:none; }
.foot-secs a[href$="/category/pascal/"] .ico{ color:#8f95d6; }
.foot-secs a[href$="/category/delphi/"] .ico{ color:#ffd335; }
.foot-secs a[href$="/category/after-borland/"] .ico{ color:#22c7da; }
.foot-secs a[href$="/category/people/"] .ico{ color:#f08a63; }
.foot-secs a[href$="/category/versions/"] .ico{ color:#f08a63; }
.foot-secs a[href$="/archive/"] .ico{ color:#9a9ec9; }
.foot-secs a:hover .ico{ color:var(--ink); }
.foot-bottom{ border-top:1px solid var(--hairline); padding-top:clamp(18px,1.8vw,40px);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:flex-end; }
.foot-bottom .mast-line{ text-align:left; }

/* ---------- article page ---------- */
.artbody{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gut),1fr)
    [wide-start] minmax(0, calc((var(--breakout) - var(--prose)) / 2))
    [prose-start] min(var(--prose), calc(100% - 2 * var(--gut))) [prose-end]
    minmax(0, calc((var(--breakout) - var(--prose)) / 2)) [wide-end]
    minmax(var(--gut),1fr) [full-end];
  row-gap:var(--para-gap);
  padding-block:clamp(30px,3.4vw,90px) clamp(40px,4vw,110px);
}
.artbody > *{ grid-column:prose; }
.artbody > .br-wide{ grid-column:wide-start / wide-end; }
.artbody > .br-full{ grid-column:full; }
.artbody > p{ font-size:var(--fs-prose); line-height:1.65; color:var(--prose-ink); }
.artbody > p strong{ color:var(--ink); }
.artbody > h2{
  font-size:clamp(21px,2vw,46px); line-height:1.14; letter-spacing:-.022em;
  margin-top:calc(var(--insert-gap) * .75); padding-top:14px; border-top:3px double var(--rule);
}
.artbody > .br-wide, .artbody > .br-full{ margin-block:var(--insert-gap); }
.artbody > .br-full + p, .artbody > .br-wide + p{ margin-top:0; }
.artbody a:not(.entity-ref){ color:var(--accent); border-bottom:1px solid rgba(255,211,53,.4); }
.artbody a:not(.entity-ref):hover{ border-bottom-color:var(--accent); }
.artbody ul{ color:var(--prose-ink); font-size:var(--fs-prose); line-height:1.6; }

.arthead{ padding-top:clamp(24px,2.6vw,64px); }
.arthead .kicker{ display:inline-flex; align-items:center; gap:9px; }
.arthead h1{ font-size:clamp(28px,3.5vw,96px); line-height:1.01; letter-spacing:-.032em; margin-top:14px; max-width:26ch; }
.arthead .standfirst{ margin-top:clamp(16px,1.6vw,34px); max-width:56ch;
  font-size:clamp(16px,1.35vw,28px); line-height:1.5; color:var(--prose-ink); }
.arthead .crumbs{ margin-top:clamp(18px,1.8vw,38px); font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim); display:flex; gap:10px; flex-wrap:wrap; }

/* plate breaker — the Notes-for-Design material as a full-bleed band */
.breaker{ background:var(--navy); border-top:3px double var(--rule); border-bottom:3px double var(--rule);
  padding-block:clamp(28px,3vw,72px); }
.breaker > .wrap > .label{ display:flex; align-items:center; gap:9px; margin-bottom:clamp(16px,1.6vw,34px); }
.breaker--cyan{ background:#071a3f; }

/* timeline / chronology */
.timeline{ list-style:none; margin:0; padding:0; display:grid; gap:0; background:transparent; }
.timeline li{ display:grid; grid-template-columns:1fr; gap:4px; padding:14px 0;
  border-top:1px solid var(--hairline); }
@media (min-width:768px){
  .timeline li{ grid-template-columns:minmax(140px,26%) 1fr; gap:0 clamp(18px,2vw,48px); align-items:baseline; padding:16px 0; }
}
@media (min-width:1600px){ .timeline li{ grid-template-columns:minmax(180px,24%) 1fr; } }
.timeline .t-when{ font-family:var(--mono); font-size:clamp(12.5px,.95vw,19px); letter-spacing:.04em; color:var(--accent); line-height:1.45; }
.timeline .t-what{ font-size:clamp(14px,1.02vw,21px); line-height:1.5; color:var(--prose-ink); }

/* stat plates — rules live on the items, so an incomplete last row leaves space, not a tile */
.statrow{ display:grid; gap:0; background:transparent; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.statblock{ padding:18px 20px 20px 0; display:flex; flex-direction:column; gap:10px;
  border-top:1px solid var(--hairline); }
.statblock .stat-num{ font-family:var(--display); font-weight:700; font-size:clamp(30px,3.2vw,80px);
  line-height:.9; letter-spacing:-.04em; color:var(--accent); }
.statblock:nth-child(even) .stat-num{ color:var(--secondary); }
.statblock .stat-label{ font-size:clamp(13px,.95vw,19px); line-height:1.45; color:var(--prose-ink); max-width:34ch; }

/* keyed list (generic Notes material) — label and value, one row each, like the chronology */
.keylist{ list-style:none; margin:0; padding:0; display:grid; gap:0; background:transparent;
  grid-template-columns:1fr; }
.keylist li{ display:grid; grid-template-columns:1fr; gap:4px; padding:14px 0;
  border-top:1px solid var(--hairline); }
@media (min-width:768px){
  .keylist li{ grid-template-columns:minmax(170px,30%) 1fr; gap:0 clamp(18px,2vw,48px); align-items:baseline; padding:16px 0; }
}
@media (min-width:1600px){ .keylist li{ grid-template-columns:minmax(220px,28%) 1fr; } }
.keylist li.k-solo{ grid-template-columns:1fr; }
.keylist .k-key{ font-family:var(--mono); font-size:clamp(12.5px,.95vw,19px); letter-spacing:.04em;
  color:var(--sec); line-height:1.45; }
.keylist .k-val{ font-size:clamp(14px,1.02vw,21px); line-height:1.5; color:var(--prose-ink); }

/* ---------- article components (styleguide set) ---------- */
.lead{ font-size:clamp(17px,1.4vw,29px); line-height:1.48; color:var(--ink); }
.pullquote{ margin:0; border-top:3px double var(--rule); border-bottom:3px double var(--rule); padding-block:clamp(20px,2vw,44px); }
.pullquote p{ font-family:var(--display); font-weight:700; font-size:clamp(21px,2.2vw,52px);
  line-height:1.1; letter-spacing:-.026em; color:var(--ink); max-width:34ch; }
.blockquote{ margin:0; border-left:3px solid var(--sec); padding-left:clamp(16px,1.6vw,34px); }
.blockquote p{ font-size:clamp(16px,1.3vw,26px); line-height:1.5; color:var(--ink); }
.blockquote cite{ display:block; margin-top:12px; font-family:var(--mono); font-size:var(--fs-credit); font-style:normal; color:var(--dim); }
.callout{ background:var(--navy); border-top:4px solid var(--sec); padding:clamp(18px,1.8vw,38px); }
.callout p{ font-size:clamp(15px,1.1vw,22px); line-height:1.55; color:var(--prose-ink); }
.note{ font-family:var(--mono); font-size:clamp(13px,.95vw,18px); line-height:1.6; color:var(--quiet);
  border-left:2px solid var(--rule); padding-left:14px; }

.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.versus, .datatable{ border-collapse:collapse; width:100%; min-width:520px; font-size:clamp(13.5px,1vw,20px); }
.versus caption, .datatable caption{ text-align:left; padding-bottom:12px; font-family:var(--mono);
  font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--quiet); }
.versus th, .versus td, .datatable th, .datatable td{ text-align:left; padding:12px 18px 12px 0; border-bottom:1px solid var(--hairline); vertical-align:top; }
.versus th, .datatable th{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); border-bottom:3px double var(--rule); }
.versus td, .datatable td{ color:var(--prose-ink); }

.chart figcaption{ padding-top:12px; font-size:var(--fs-cap); color:var(--prose-ink); }
.chart svg{ width:100%; height:auto; overflow:visible; }
.chart .ax{ font-family:var(--mono); font-size:11px; fill:var(--quiet); }
.chart .vl{ font-family:var(--mono); font-size:11px; fill:var(--accent); }

.article-figure img{ width:100%; height:auto; border-bottom:4px solid var(--rule); }
.article-figure figcaption{ padding-top:12px; font-size:var(--fs-cap); line-height:1.5; color:var(--prose-ink); }
.gallery{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.gallery figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-bottom:3px solid var(--rule); }
.gallery figcaption{ padding-top:9px; font-size:var(--fs-credit); font-family:var(--mono); color:var(--dim); }

.profile-grid{ display:grid; gap:clamp(16px,1.6vw,36px); grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.profile-card{ background:var(--navy); border-top:4px solid var(--sec); padding:clamp(16px,1.4vw,30px);
  display:flex; flex-direction:column; gap:10px; }
.profile-card .p-photo{ width:100%; aspect-ratio:4/5; object-fit:cover; margin-bottom:6px; }
.profile-card.no-photo{ border-top-color:var(--rule); }
.profile-card h3{ font-size:clamp(17px,1.25vw,26px); line-height:1.16; letter-spacing:-.018em; }
.profile-card .p-role{ font-family:var(--mono); font-size:var(--fs-credit); letter-spacing:.06em; color:var(--accent); }
.profile-card p{ font-size:clamp(13.5px,.95vw,19px); line-height:1.5; color:var(--prose-ink); }
.profile-card .p-links{ margin-top:auto; padding-top:8px; font-family:var(--mono); font-size:var(--fs-credit); }
.profile-card .p-attr{ font-family:var(--mono); font-size:var(--fs-credit); color:var(--dim); }

.org-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.org-card{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px;
  align-items:center; background:var(--navy); border:1px solid var(--hairline); padding:14px; }
.org-card .org-logo{ grid-row:1 / span 2; width:44px; height:44px; object-fit:contain; }
.org-card.no-logo{ grid-template-columns:1fr; }
.org-card .org-name{ font-family:var(--display); font-weight:700; font-size:clamp(15px,1.05vw,21px); letter-spacing:-.015em; }
.org-card .org-host{ font-family:var(--mono); font-size:var(--fs-credit); color:var(--dim); }
.entity-ref{ color:var(--secondary); border-bottom:1px solid rgba(34,199,218,.4); }

.further-grid, .related-links{ display:grid; gap:0; background:transparent;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); list-style:none; margin:0; padding:0; }
.further-grid a, .related-links a{ display:flex; flex-direction:column; gap:8px; background:var(--navy);
  padding:clamp(16px,1.4vw,32px); min-height:100%; box-shadow:0 0 0 1px var(--hairline); }
.related-links li{ display:flex; }
.related-links li a{ width:100%; }
.further-grid a .rl-sec, .related-links a .rl-sec{ font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--sec); }
.further-grid a .rl-t, .related-links a .rl-t{ font-family:var(--display); font-weight:700;
  font-size:clamp(16px,1.2vw,25px); line-height:1.18; letter-spacing:-.018em; }

/* ---------- category / section pages ---------- */
.secopen{ position:relative; border-bottom:3px double var(--rule); }
.secopen img{ width:100%; height:clamp(260px,42vw,1000px); object-fit:cover; }
.secopen .lead-scrim{ background:linear-gradient(to top,rgba(5,7,43,.95) 0%,rgba(5,7,43,.55) 40%,rgba(5,7,43,.08) 74%); }
.secopen .sc{ position:absolute; left:0; right:0; bottom:clamp(20px,2.4vw,64px); }
.secopen h1{ font-size:clamp(30px,4vw,110px); line-height:1; letter-spacing:-.035em; max-width:20ch; }
.secopen .sent{ margin-top:clamp(14px,1.4vw,30px); max-width:60ch; font-size:clamp(15px,1.3vw,27px); line-height:1.48; color:var(--prose-ink); }
.secopen .kicker{ display:inline-flex; align-items:center; gap:9px; margin-bottom:14px; }

.cat-list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(28px,3vw,72px) clamp(24px,2.6vw,64px);
  grid-template-columns:1fr; }
@media (min-width:760px){ .cat-list{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1920px){ .cat-list{ grid-template-columns:repeat(3,1fr); } }
.cat-list > li{ display:flex; }
.cat-list > li > a{ display:flex; flex-direction:column; width:100%; }
.cat-list .ci{ width:100%; aspect-ratio:16/10; object-fit:cover; border-bottom:4px solid var(--rule); }
.cat-list .ct{ font-family:var(--display); font-weight:700; font-size:clamp(18px,1.5vw,32px);
  line-height:1.14; letter-spacing:-.02em; margin-top:16px; min-height:2.28em; }
.cat-list .cb{ margin-top:10px; font-size:clamp(13.5px,1vw,20px); line-height:1.5; color:var(--quiet); }
.cat-list .cm{ margin-top:auto; padding-top:14px; font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--sec); }
/* lead entry gets more room */
@media (min-width:760px){
  .cat-list > li.ci-lead{ grid-column:1 / -1; }
  .cat-list > li.ci-lead > a{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(20px,2.6vw,64px); align-items:end; }
  .cat-list > li.ci-lead .ct{ font-size:clamp(24px,2.8vw,62px); line-height:1.04; letter-spacing:-.028em; margin-top:0; min-height:0; }
  .cat-list > li.ci-lead .cb{ font-size:clamp(15px,1.15vw,23px); color:var(--prose-ink); }
  .cat-list > li.ci-lead .ci{ aspect-ratio:16/9; }
}

/* archive register */
.reg{ width:100%; border-collapse:collapse; }
.reg th, .reg td{ text-align:left; padding:14px 18px 14px 0; border-bottom:1px solid var(--hairline); vertical-align:top; }
.reg th{ font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); border-bottom:3px double var(--rule); }
.reg .rt{ font-family:var(--display); font-weight:700; font-size:clamp(15px,1.1vw,23px); letter-spacing:-.015em; line-height:1.2; }
.reg .rs{ font-family:var(--mono); font-size:var(--fs-credit); letter-spacing:.1em; text-transform:uppercase; color:var(--sec); white-space:nowrap; }
.reg .rb{ font-size:clamp(13px,.9vw,18px); line-height:1.45; color:var(--quiet); }
@media (max-width:700px){ .reg .hide-s{ display:none; } }

/* utility */
.stack-s > * + *{ margin-top:10px; }
.hero404{ padding-block:clamp(60px,8vw,200px); }
.hero404 h1{ font-size:clamp(34px,5vw,120px); letter-spacing:-.035em; line-height:1; }
.hero404 p{ margin-top:20px; font-size:clamp(16px,1.3vw,26px); color:var(--prose-ink); max-width:44ch; }
.hero404 .back{ display:inline-flex; margin-top:28px; font-family:var(--mono); font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; border-bottom:2px solid var(--accent); padding-bottom:6px; color:var(--accent); }

/* styleguide only */
.sg-sec{ padding-block:clamp(26px,2.6vw,60px); border-top:3px double var(--rule); }
.sg-sec > h2{ font-size:clamp(19px,1.6vw,34px); margin-bottom:22px; letter-spacing:-.02em; }
.sg-note{ font-family:var(--mono); font-size:12px; color:var(--dim); margin-bottom:16px; letter-spacing:.06em; }

/* prose run — a paragraph pair that carries a floated inset */
.prose-run{ display:block; }
.prose-run::after{ content:""; display:block; clear:both; }
.prose-run > p{ font-size:var(--fs-prose); line-height:1.65; color:var(--prose-ink); }
.prose-run > p + p{ margin-top:var(--para-gap); }
.prose-run > p strong{ color:var(--ink); }
.prose-run a:not(.entity-ref){ color:var(--accent); border-bottom:1px solid rgba(255,211,53,.4); }
.prose-run a:not(.entity-ref):hover{ border-bottom-color:var(--accent); }

/* article head — kicker and headline sit on the breakout edge, prose steps in */
.arthead .wrap{ padding-top:clamp(26px,3vw,80px); padding-bottom:clamp(20px,2.2vw,52px); }
.arthead .standfirst{ max-width:52ch; }
.artbody > .prose-run{ grid-column:prose; }

/* second inset, floated the other way — short pieces carry two floats instead of two breakers */
@media (min-width:1024px){
  .fig-inset--left{ float:left; margin:6px 32px 20px 0; border-left:0; border-right:3px solid var(--sec); padding-left:0; padding-right:14px; }
}
@media (min-width:1600px){ .fig-inset--left{ margin-right:44px; } }

/* paired plate — a fifth figure moment, two photographs at unequal width sharing one seam */
.figpair{ display:grid; gap:clamp(20px,2.2vw,52px); grid-template-columns:1fr; }
@media (min-width:760px){ .figpair{ grid-template-columns:1.35fr 1fr; align-items:start; } }
.figpair .mat{ background:var(--navy); padding:10px; border-bottom:3px double var(--rule); }
.figpair img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.figpair figure:nth-child(2) img{ aspect-ratio:4/3; }

/* each section label in its own accent, from the content plan */
.nav a[href$="/category/pascal/"]{ color:#8f95d6; }
.nav a[href$="/category/delphi/"]{ color:#ffd335; }
.nav a[href$="/category/after-borland/"]{ color:#22c7da; }
.nav a[href$="/category/people/"]{ color:#f08a63; }
.nav a[href$="/category/versions/"]{ color:#f08a63; }
.nav a[href$="/archive/"]{ color:#9a9ec9; }
.nav a:hover{ color:var(--ink); }
.nav a[aria-current="page"]{ border-bottom:2px solid currentColor; padding-bottom:4px; }

/* ============ PHONE COMPACTION ============
   The masthead strapline is repeated verbatim in the footer, so the phone
   drops it rather than spending three lines on it at the top of every page.
   Band rhythm tightens; insertion gaps do NOT (they stay >= 24px). */
@media (max-width:560px){
  .masthead .mast-line{ display:none; }
  .masthead .wrap{ padding-block:16px 0; }
  .mast-top{ padding-bottom:10px; }
  .nav ul li a{ padding:14px 0; }

  .band{ padding-block:32px; }
  .band--tight{ padding-block:24px; }
  .sechead{ padding-bottom:14px; margin-bottom:20px; }

  .lead-band img{ height:300px; }
  .lead-copy{ bottom:16px; }
  .lead-copy .wrap{ gap:14px; }
  .lead-note{ font-size:11.5px; padding-left:12px; }

  .plates{ gap:18px; }
  .plate{ padding-top:12px; }
  .plate .num{ font-size:44px; }
  .plate p{ margin-top:10px; }

  .strip{ gap:22px; }
  .pair{ gap:22px; }
  .quietline{ gap:18px; }
  .people{ gap:12px; }

  .arthead .wrap{ padding-top:20px; padding-bottom:16px; }
  .arthead h1{ margin-top:10px; }
  .arthead .standfirst{ margin-top:14px; }
  .arthead .crumbs{ margin-top:16px; }
  .artbody{ padding-block:26px 34px; }
  .artbody > h2{ padding-top:12px; }
  .breaker{ padding-block:24px; }
  .fig-bleed img{ height:230px; }

  .secopen img{ height:250px; }
  .secopen .sc{ bottom:16px; }
  .cat-list{ gap:26px; }
  .cat-list .ct{ margin-top:12px; min-height:0; }

  .colophon .wrap{ padding-block:20px; }
  .footer .wrap{ padding-block:24px; }
  .foot-secs{ gap:16px 12px; padding-bottom:18px; }
  .foot-bottom{ padding-top:16px; }
  .reg th, .reg td{ padding:11px 14px 11px 0; }
}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.colophon-head{flex-wrap:wrap!important}
.colophon-head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-grid-fill: fixed px columns leave a dead strip at wide widths — the tiles
   must stretch, and a tile with its own fixed width has to give that up too */
.sponsor-row{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;justify-content:stretch!important}
.sponsor-row>[data-partner],.sponsor-row>*>[data-partner]{width:auto!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-blurb-contrast: the design never coloured .sponsor-blurb because its bar was
   marks-only; our copy would inherit the page's dark ink onto a dark tile. */
.sponsor .sponsor-blurb{color:rgba(255,255,255,.82)}
.sponsor .sponsor-name{color:rgba(255,255,255,.95)}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-row .sponsor.sponsor img{height:51px!important;display:block!important;width:100%!important}

/* op-money-columns: the supporters block ran one tile per row — 9 tiles,
   825px at 390, 12% of the whole page. Two columns bring it to
   540px (35% shorter). Checked before writing: no new overflow, smallest mark still
   132px wide, longest blurb 0 lines, tile heights 85-85px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-row), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:10px!important}
    .sponsor-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-row > * *{min-width:0!important;max-width:100%}
    .sponsor-row img,.sponsor-row svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .sponsor-row (3 tiles), .sponsor-row (3 tiles), .sponsor-row (3 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sponsor-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsor-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsor-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 700; margin: 0px; text-wrap: balance;}
.strip .entry h2:where(.rt-h3){font-size: clamp(18px, 1.5vw, 34px); line-height: 1.14; letter-spacing: -0.018em; margin-top: 14px;}
.strip .entry--lead h2:where(.rt-h3){font-size: clamp(24px, 2.6vw, 58px); line-height: 1.06; letter-spacing: -0.026em;}
.pair h2:where(.rt-h3){font-size: clamp(19px, 1.7vw, 38px); line-height: 1.12; letter-spacing: -0.02em; margin-top: 16px;}
h1:where(.rt-h2){font-family: var(--display); font-weight: 700; margin: 0px; text-wrap: balance;}
.lead-copy h1:where(.rt-h2){font-size: clamp(26px, 4.4vw, 140px); line-height: 0.99; letter-spacing: -0.032em; max-width: 26ch;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > div.mat > img,
  body > div.bleed.lead-band > img,
  body > div.secopen > img,
  body > figure.bleed.fig-bleed > img,
  div.people > a.person > img,
  div.prose-run > figure.fig-inset > img,
  div.strip > a.entry > img,
  div.strip > a.entry.entry--lead > img,
  figure > div.mat > img,
  figure.br-wide.fig-offset.fig-offset--right > div.holder > img,
  li > a > img.ci,
  li.ci-lead > a > img.ci){height:auto}
/* op-img-dims:end */