/* Notes pages (DL-089). Tokens, header, buttons and footer copied from the home page (index.html, round
   2026-10-03 neko home) so the Notes read as part of the same site; the article column is a calm 680px reading measure.
   Brand: DL-056 colours, DL-057 body font, DL-092 headings (Helvetica Neue), DL-097 logo. Pages are generated by build.py. */
:root{
  --white:#fff; --blush:#fffdfe; --linen:#fefafb; --linen-2:#fcf5f8; --line:#f3ecef; /* DL-125: light pink ground (was linen #f6f2ed, line #e8e2da) */
  --ink:#111111; --body:#26262a; --mute:#5f5b55;
  --rasp:#bb4470; --rasp-hover:#99385c; --rasp-soft:#f7e9ee; --rasp-dark:#cf7c9b;
  --head:"Geist", "Helvetica Neue", Helvetica, Arial, sans-serif; /* DL-126 (2026-10-27): Geist for headings and body, after sierra.ai (replaces DL-092 Helvetica Neue) */
  --serif:var(--head); /* old name, kept so any rule still using it resolves */
  --sans:"Geist", system-ui, -apple-system, sans-serif; /* DL-126, replaces DL-057 Source Sans 3 */
  --wrap:1240px; --gut:clamp(20px,4vw,48px);
  --r-frame:28px; --r-card:20px;
  --shadow:0 30px 70px -40px rgba(17,17,17,.38), 0 2px 6px rgba(17,17,17,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--blush);color:var(--body);font-family:var(--sans);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.center{text-align:center}
:focus-visible{outline:2px solid var(--rasp);outline-offset:3px}

/* Type */
.h2{font-family:var(--head);font-weight:400;font-size:clamp(40px,4.7vw,68px);line-height:1.12;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.lede{font-size:19px;line-height:1.55;color:var(--body);max-width:36rem}
.center .lede{margin-left:auto;margin-right:auto}
.eyebrow{font:600 13px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--rasp);margin-bottom:18px}

/* Logo (DL-097): the Vela Systems lockup Fahad picked on 2026-10-04 (Brand/Logo/), replacing the DL-058 tile. In the header
   it sits in a white glass pill so it reads over every frame of the hero film; in the footer it stands plain and larger */
.logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.logo img{height:40px;width:auto}
.top .logo{padding:0}
footer .logo img{height:60px}
@media (max-width:600px){ .top .logo img{height:34px} }
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:500 17px/1 var(--sans);padding:15px 22px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:background .25s,color .25s}
.btn svg{width:16px;height:16px}
.btn-rasp{background:var(--rasp);color:#fff}
.btn-rasp:hover{background:var(--rasp-hover)}

/* Floating header (as on the home page, no top bar) */
.top{position:fixed;left:0;right:0;top:22px;z-index:50;transition:top .35s ease;pointer-events:none}
.top.up{top:12px}
/* Header bar (Fahad 2026-10-04, DL-099): clear over the page; turns white while the mouse is up in it, clear again when it
   leaves (mouse only, so touch screens never get a stuck white bar). The logo sits on it with no pill. */
.top::before{content:"";position:absolute;left:0;right:0;top:-22px;bottom:-16px;z-index:-1;background:rgba(255,255,255,.97);box-shadow:0 1px 0 rgba(17,17,17,.06);opacity:0;transition:opacity .3s ease,top .35s ease,bottom .35s ease;pointer-events:none}
.top.up::before{top:-12px;bottom:-12px}
@media (hover:hover){ .top::before{pointer-events:auto} .top:hover::before{opacity:1} }
.top .row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gut)}
.top .row > *{pointer-events:auto}
.top nav{display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.78);backdrop-filter:blur(14px);box-shadow:0 6px 24px -12px rgba(17,17,17,.25)}
.top nav a{font-weight:500;font-size:16px;text-decoration:none;color:var(--ink);padding:9px 14px;border-radius:999px;transition:background .2s}
.top nav a:hover{background:rgba(17,17,17,.06)}
.top .cta{justify-self:end;padding:13px 20px;font-size:16px}
.top .logo{justify-self:start}

/* A note */
.note{padding:136px 0 0}
.note .wrap{max-width:calc(760px + 2 * var(--gut))}
.note-banner{margin-bottom:24px;font-size:15px;color:var(--rasp);border:1px dashed var(--rasp);border-radius:12px;padding:10px 14px}
.note-banner code{font-size:14px}
.note-back a{font:500 15px var(--sans);color:var(--body);text-decoration:none}
.note-back a::before{content:"\2190  "}
.note-back a:hover{text-decoration:underline;text-underline-offset:4px}
.note-cover{margin:22px 0 40px;aspect-ratio:21/9;border-radius:var(--r-frame);display:grid;place-items:center;background:radial-gradient(120% 120% at 25% 15%,#fff 0%,#fdf1f6 42%,#f3dce6 100%);font:400 clamp(56px,8vw,104px)/1 var(--head);letter-spacing:-.03em;color:var(--ink)}
.note-h1{font:400 clamp(40px,5.4vw,72px)/1.06 var(--head);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.note-lede{margin-top:20px;font-size:21px;line-height:1.5;color:var(--body);max-width:40rem}
.note-by{margin-top:18px;font-size:14px;color:var(--body);padding-top:16px;border-top:1px solid var(--line)}
.note-body{margin-top:40px;max-width:680px;font-size:19px;line-height:1.68;color:var(--body)}
.note-body p{margin-top:20px}
.note-body h2{margin-top:44px;font:400 28px/1.2 var(--head);letter-spacing:-.01em;color:var(--ink)}
.note-body strong{color:var(--ink);font-weight:600}
.note-body ul{margin:16px 0 0 22px}
.note-body a{color:var(--rasp);text-underline-offset:3px}

/* The list of notes and the cards (same cards as the home page row) */
.notes-index{padding:136px 0 0}
.notes-index .note-lede{margin-bottom:8px}
.nr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(40px,5vw,56px);list-style:none;text-align:left}
.nr-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;border-radius:var(--r-card);border:1px solid var(--line);background:var(--white);padding:10px 10px 24px;transition:box-shadow .3s,transform .3s}
.nr-card:hover{box-shadow:0 18px 40px -26px rgba(17,17,17,.4);transform:translateY(-2px)}
.nr-cover{aspect-ratio:16/10;border-radius:14px;display:grid;place-items:center;background:radial-gradient(120% 120% at 25% 15%,#fff 0%,#fdf1f6 42%,#f3dce6 100%);font:400 clamp(34px,3.4vw,48px)/1 var(--head);letter-spacing:-.02em;color:var(--ink)}
.nr-meta{display:flex;gap:10px;align-items:center;margin:18px 14px 0;font-size:14px;color:var(--body)}
.nr-draft{font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--rasp);border:1px dashed var(--rasp);border-radius:999px;padding:4px 8px}
.nr-title{margin:8px 14px 0;font:500 22px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.nr-sum{margin:8px 14px 0;font-size:16.5px;color:var(--body)}
.note-empty{grid-column:1/-1;color:var(--body)}

/* Closing block (as the home page's) */
.note-talk{margin:clamp(96px,12vw,160px) 12px 0;border-radius:var(--r-frame);background:linear-gradient(160deg,var(--linen) 0%,var(--linen-2) 100%);padding:clamp(72px,10vw,140px) 0}
.note-talk .lede{margin-top:22px}
.note-talk .go{display:flex;justify-content:center;margin-top:36px}

/* Footer (as on the home page) */
footer{padding:72px 0 40px;font-size:16px}
footer .top-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;align-items:start}
footer .tag{margin-top:16px;color:var(--body);max-width:22rem}
footer h4{font:600 13px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:8px}
footer ul a{text-decoration:none;color:var(--body)}
footer ul a:hover{text-decoration:underline;text-underline-offset:4px}
.legal{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:20px;margin-top:56px;color:var(--body);font-size:14px}

/* Reveal: short rise */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

@media (max-width:1100px){ .top nav a{padding:9px 10px} }
@media (max-width:900px){
  .top{top:18px}
  .top .row{grid-template-columns:1fr auto;padding:0 18px}
  .top nav{display:none}
  .nr-grid{grid-template-columns:1fr}
  footer .top-row{grid-template-columns:1fr 1fr}
  footer .top-row > div:first-child{grid-column:1/-1}
}
@media (max-width:600px){
  body{font-size:17px}
  .top{top:14px}
  .note,.notes-index{padding-top:108px}
  .note-cover{aspect-ratio:16/10;margin-bottom:28px}
  .note-body{font-size:18px}
  .note-talk{margin:96px 8px 0}
  .legal{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .nr-card,.nr-card:hover{transition:none;transform:none}
}

/* DL-110: bylined articles — reading time and reference list */
.note-by strong{color:var(--ink);font-weight:600}
.note-read{margin-left:14px;padding-left:14px;border-left:1px solid var(--line);color:var(--mute)}
.note-body h2.refs-h{margin-top:64px;padding-top:32px;border-top:1px solid var(--line);font:600 13px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.note-body ul.refs{list-style:none;margin:20px 0 0;padding:0;font-size:14.5px;line-height:1.5}
.note-body ul.refs li{margin-top:14px}
.note-body ul.refs .ref{display:block;color:var(--mute);text-decoration:none}
.note-body ul.refs .ref-who{color:var(--ink)}
.note-body ul.refs em{font-style:italic}
.note-body ul.refs a.ref:hover{color:var(--rasp)}
.note-body ul.refs a.ref:hover .ref-who{color:var(--rasp)}

/* DL-111: THE BLOG LAID OUT LIKE CLAIM 3000'S GUIDES (Fahad, 2026-10-21: "design the articles page like what we did for
   claims 3000"). Articles: one left-aligned column on white on the page gutter (the logo's edge, DL-099), no cover
   banner; the title, "Written by" with the portrait, name and role, a grey line of date and reading time, the draft
   mark, then the text at reading size; sources at the foot and an All posts button. Index: eyebrow with a raspberry
   rule, heading, then cards with a numbered cover, title, author, date, intro and "Read the post". */
.art{padding:136px var(--gut) 0;color:var(--ink)}
.art-head,.art-body{max-width:900px}
.art-h1{font:400 clamp(40px,5vw,72px)/1.06 var(--head);letter-spacing:-.025em;color:var(--ink);max-width:22ch;text-wrap:balance}
.art-by{display:block}
.art-by-l{display:block;margin-top:44px;font:600 15px/20px var(--sans);color:var(--ink)}
.art-author{display:flex;align-items:center;gap:16px;margin-top:14px}
.art-author img{flex:none;width:64px;height:64px;object-fit:cover;background:#fff} /* DL-176: pencil sketch, uncropped (no circle, no border) */
.art-author b{display:block;font:600 18px/24px var(--sans);color:var(--ink)}
.art-role{display:block;font-size:15.5px;line-height:22px;color:var(--mute)}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:32px;font-size:16px;line-height:22px;color:var(--mute)}
.art-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.art-gate{display:inline-block;margin-top:18px;padding:7px 11px;border-radius:4px;background:var(--rasp-soft);color:var(--rasp);font:600 12.5px/16px var(--sans);letter-spacing:.11em;text-transform:uppercase}
.art-body{margin-top:64px;font-size:20px;line-height:34px;color:var(--ink)}
.art-body p{margin-top:24px}
.art-body h2{margin-top:56px;font:400 clamp(26px,2.4vw,34px)/1.2 var(--head);letter-spacing:-.015em;color:var(--ink)}
.art-body h2+p{margin-top:18px}
.art-body li{margin:10px 0}
/* Sources at the foot, as Claim 3000's */
.art-body h2.refs-h{margin-top:72px;padding-top:0;border-top:0;font:400 clamp(26px,2.4vw,34px)/1.2 var(--head);letter-spacing:-.015em;text-transform:none;color:var(--ink)}
.art-body .refs-note{margin-top:14px;font-size:16px;line-height:25px;color:var(--mute)}
.art-body ul.refs{margin-top:18px;font-size:15.5px;line-height:24px}
.art-body ul.refs li{margin:0;padding:12px 0;border-top:1px solid var(--line)}
.art-body ul.refs li:last-child{border-bottom:1px solid var(--line)}
.btn-line{background:transparent;color:var(--ink);border:1px solid rgba(17,17,17,.22);font-size:15px;padding:12px 20px}
.btn-line:hover{border-color:var(--ink)}
.art-back{margin-top:44px}

/* The index */
.gi{padding:136px var(--gut) 0;color:var(--ink)}
.gi-eyebrow{width:fit-content;font:400 15px/22px var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--ink)}
.gi-eyebrow::after{content:"";display:block;height:3px;margin-top:12px;background:var(--rasp)}
.gi-h{margin-top:26px;font:400 clamp(36px,4.2vw,56px)/1.1 var(--head);letter-spacing:-.02em;color:var(--ink);max-width:20ch}
.gi-lede{margin-top:18px;font-size:19px;line-height:1.55;color:var(--body);max-width:38rem}
.ga{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;list-style:none;padding:0;max-width:1340px}
.ga-card{display:flex}
.ga-link{display:flex;flex-direction:column;width:100%;border:1px solid rgba(17,17,17,.14);border-radius:12px;overflow:hidden;background:#fff;color:var(--ink);text-decoration:none;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.ga-link:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(17,17,17,.12)}
.ga-cover{position:relative;display:grid;place-items:center;aspect-ratio:16/10;background:radial-gradient(120% 120% at 25% 15%,#fff 0%,#fdf1f6 42%,#f3dce6 100%);overflow:hidden}
.ga-word{font:400 clamp(40px,3.6vw,56px)/1 var(--head);letter-spacing:-.03em;color:var(--ink);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ga-link:hover .ga-word{transform:scale(1.05)}
.ga-tag{position:absolute;left:18px;top:18px;padding:6px 10px;border-radius:2px;background:#fff;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ga-in{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:26px 28px 28px}
.ga-h{font:400 23px/1.25 var(--head);letter-spacing:-.01em;color:var(--ink)}
.art-by-sm{margin-top:18px}
.art-by-sm .art-author{margin-top:0;gap:12px}
.art-by-sm .art-author img{width:40px;height:40px}
.art-by-sm .art-author b{font-size:15px;line-height:20px}
.art-by-sm .art-role{font-size:14px;line-height:19px}
.ga-date{margin-top:16px;font-size:14px;line-height:19px;color:var(--mute)}
.ga-intro{margin-top:10px;margin-bottom:22px;font-size:15.5px;line-height:24px;color:var(--body)}
.ga-go{display:inline-flex;align-items:center;gap:10px;margin-top:auto;font:600 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ga-go i{width:20px;height:2px;background:var(--rasp);transition:width .3s cubic-bezier(.2,.7,.2,1)}
.ga-link:hover .ga-go i{width:36px}
.ga-in .art-gate{margin-top:18px}
@media (max-width:1023px){.ga{grid-template-columns:1fr 1fr}}
@media (max-width:767px){
  .art,.gi{padding-top:104px}
  .art-h1{font-size:38px}
  .art-by-l{margin-top:30px}
  .art-author img{width:56px;height:56px}
  .art-meta{margin-top:24px;font-size:15px}
  .art-body{margin-top:40px;font-size:17.5px;line-height:29px}
  .art-body h2{margin-top:40px;font-size:26px}
  .ga{grid-template-columns:1fr;margin-top:32px}
  .ga-in{padding:22px}
}

/* DL-117: photo covers and the article photo */
.ga-photo img,.nr-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ga-photo .ga-tag{z-index:1}
.ga-link:hover .ga-photo img,.nr-card:hover .nr-photo img{transform:scale(1.04)}
.nr-photo{position:relative;overflow:hidden}
.art-photo{max-width:900px;margin:44px 0 0}
.art-photo img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:24px}
.art-photo + .art-body{margin-top:48px}
@media (max-width:600px){.art-photo{margin-top:30px}.art-photo img{border-radius:16px;aspect-ratio:4/3}.art-photo + .art-body{margin-top:32px}}

/* DL-177 (Fahad, 2026-10-29: "put the picture behind the heading like a hero banner"): the post's photo is a rounded
   banner across the page width under the menu, the title and date bottom left in white over a soft shade (as the home
   hero and the Products panel); "Written by" with the sketch portrait follows under the banner. Replaces .art-photo. */
.art.art-has-hero{padding-top:104px}
.art-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;min-height:clamp(440px,68vh,680px);display:flex;align-items:flex-end;background:#e9e3e6}
.art-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.art-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(14,12,12,.66) 0%,rgba(14,12,12,.42) 32%,rgba(14,12,12,.12) 62%,rgba(14,12,12,0) 80%)}
.art-hero-in{padding:clamp(28px,4vw,56px);max-width:1000px}
.art-hero .art-h1{color:#fff;font-size:clamp(34px,4.4vw,64px);max-width:20ch;text-shadow:0 2px 24px rgba(0,0,0,.18)}
.art-hero .art-meta{margin-top:20px;color:rgba(255,255,255,.88)}
.art-head-after .art-by-l{margin-top:40px}
.art-has-hero .art-body{margin-top:48px}
@media (max-width:600px){
  .art.art-has-hero{padding-top:88px}
  .art-hero{border-radius:20px;min-height:460px}
  .art-hero::after{background:linear-gradient(to top,rgba(14,12,12,.7) 0%,rgba(14,12,12,.52) 40%,rgba(14,12,12,.26) 72%,rgba(14,12,12,.06) 92%)} /* long titles climb higher on phones */
  .art-hero-in{padding:22px 20px 24px}
  .art-hero .art-meta{margin-top:14px}
  .art-head-after .art-by-l{margin-top:30px}
  .art-has-hero .art-body{margin-top:32px}
}


/* DL-180: the article banner photos are made wide (about 21:9, media/blog/wide/); on desktop the banner keeps the full
   page width and takes the photo's exact shape, so it fits with nothing cropped. Smaller screens keep DL-177's height. */
@media (min-width:901px){.art-hero{min-height:0;aspect-ratio:var(--ar,21/9)}}