/* The services and packages pages (29 Sep): Ink's case-study layout (site.css: page-head, cs-hero, cs-list),
   with a header that works without the menu script, packages that stack instead of swiping, and the closing ask. */
.sub .cs-hero{background:var(--ground)}
.sub .cs-hero h1 + .lede{margin-top:var(--s4)}
.sub .cs-hero .lede + .lede{margin-top:var(--s3)}
.sub .cs-hero h1{max-width:none}
.sub .sec-head h2{max-width:16em}
.sub .head-side{display:flex;flex-direction:column;gap:var(--s2)}
.sub .head-side .tag{margin-top:0}
.sub .sec-head .to-page,.sub .to-page{margin-top:var(--s6)}
.sub .cs-list{margin-top:var(--s6)}
.sub .cs-list b{align-self:start}
.sub .cs-list li > h3{align-self:start}
.sub .cs-list div > h3 + p{margin-top:8px}
.sub .cs-list .tag{margin-top:0;margin-bottom:4px}
.sub .dash{margin-top:var(--s6);display:grid;gap:var(--s2);max-width:40em}
.sub .dash li{position:relative;padding-left:26px;color:var(--ink-2);font-size:clamp(1.02rem,.95rem + .3vw,1.18rem)}
.sub .dash li::before{content:"";position:absolute;left:0;top:.78em;width:14px;height:2px;background:currentColor}
/* 12 Oct: 1.5px snapped to one or two pixel rows on 1x screens by where each line fell, so some dashes drew lighter;
   two whole pixels there, 1.5px (three device pixels) on sharper screens */
@media (min-resolution:2dppx){.sub .dash li::before{height:1.5px}}
/* the three packages side by side, stacked on narrow screens (never a carousel here) */
.pk-grid{margin-top:var(--s6);display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:var(--s4);align-items:stretch}
@media (min-width:1101px){.pk-grid{gap:var(--s3)}}
@media (max-width:900px){.pk-grid{grid-template-columns:1fr;gap:var(--s3)}}
.pk-grid .pack.sig .pick{margin:0 0 var(--s3)}
/* closing ask */
.sub .start .ways{margin-top:var(--s5);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5)}
.sub .start .addr{margin-top:var(--s4);color:var(--ink-3);font-size:.95rem}
/* header: "Get a quote" stays on every width beside the menu, and the lockup shrinks on phones */
@media (max-width:560px){
  .sub .masthead .lockup svg{height:46px}
  .sub .nav .btn{display:inline-flex;min-height:44px;padding:0 16px;font-size:.9rem}
}
/* the blog (guides until 5 Oct): the index at /blog/ and each post. A reading column beside an "on this page" list,
   in the cs-list's 3/9 split; every word is in the HTML and nothing here depends on the script. */
.post-hero h1{max-width:15em}
/* 30 Oct 2026: the two or three words that carry a post's title get the home hero's aurora brush underline, drawn in on open */
/* It hugs the baseline and crosses the g and y tails: lower, it cut into the next line's tall letters (Vish, 30 Oct) */
.post-hero h1 .ul{position:relative;white-space:nowrap}
.post-hero h1 .ul::after{content:"";position:absolute;left:-.03em;right:-.08em;bottom:.16em;height:.14em;pointer-events:none;
  background:linear-gradient(90deg,#36d7ff,#6d52f5 50%,#e062e6);
  -webkit-mask:var(--brush) 0 50% / 100% 100% no-repeat;mask:var(--brush) 0 50% / 100% 100% no-repeat}
@keyframes ul-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:no-preference){.js-motion .post-hero h1 .ul::after{animation:ul-draw 1.05s cubic-bezier(.65,0,.35,1) .6s both}}
.post .byline{margin-top:12px;font-size:.92rem;color:var(--ink-3)}
.post-top{background:var(--ground)}
/* band B (Vish, 30 Oct: "make it B for now"): by day, posts whose cover is see-through (clip-alpha) open on the page's own paper, #f4f1ea;
   the phone masthead too (site.css paints it --ground under 1100px); the rest keep --ground until their clips are recorded see-through too, since theirs have the old colour inside. Night keeps its ground. */
html:not([data-theme="night"]) body:has(.post-cover.clip-alpha) .page-head,html:not([data-theme="night"]) body:has(.post-cover.clip-alpha) .page-head .masthead,html:not([data-theme="night"]) .post-top:has(.post-cover.clip-alpha){background:var(--paper)}
/* the hero sits on the band's ground and over the cover's empty top-left, so the card's last row clears a 1440x900 fold */
.sub .post-hero{position:relative;z-index:1;background:none;padding-bottom:0}
.sub .post-hero .lede + .lede{margin-top:12px}
/* the cover runs off the left edge like the home page's branch, and its wash fades out on the right */
.post-cover{margin:0;max-width:1200px;-webkit-mask-image:linear-gradient(90deg,#000 97%,transparent);mask-image:linear-gradient(90deg,#000 97%,transparent)}
.post-cover img{display:block;width:100%;height:auto;aspect-ratio:1600/808}
.post-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--s5) clamp(24px,5vw,80px);padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(56px,7vw,104px);align-items:start}
.post-toc{position:sticky;top:var(--s5)}
.post-toc .eyebrow{margin-bottom:var(--s2)}
.post-toc ol{display:grid;gap:2px;font-size:.95rem}
.post-toc a{display:inline-block;padding:6px 0;color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.post-toc a:hover,.post-toc a:focus-visible{color:var(--ink);border-bottom-color:var(--a3)}
.post-body{max-width:40em;color:var(--ink-2);font-size:clamp(1.04rem,.98rem + .25vw,1.16rem);line-height:1.7}
.post-body h2{margin-top:clamp(56px,6vw,88px);color:var(--ink);font-size:clamp(2rem,1.4rem + 1.8vw,3rem);line-height:1.05;letter-spacing:-.018em;scroll-margin-top:var(--s5)}
.post-body section:first-child h2{margin-top:0}
.post-body h3{margin-top:var(--s6);color:var(--ink);font-size:clamp(1.45rem,1.2rem + .7vw,1.85rem);line-height:1.15}
.post-body h2 + p,.post-body h3 + p{margin-top:var(--s3)}
.post-body p + p,.post-body ul + p,.post-body ol + p,.post-body p + ul,.post-body p + ol{margin-top:1.05em}
.post-body a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:rgba(109,82,245,.6)}
.post-body a:hover{text-decoration-color:var(--a3)}
.post-body .cite{font-size:.88em;color:var(--ink-3)}
.post-body .cite a{color:var(--ink-3)}
.post-points{display:grid;gap:var(--s3);margin-top:var(--s4)}
.post-points li{position:relative;padding-left:26px}
.post-points li::before{content:"";position:absolute;left:0;top:.8em;width:14px;height:2px;background:currentColor;opacity:.8}
.post-steps{counter-reset:step;margin-top:var(--s4)}
.post-steps > li{counter-increment:step;display:grid;grid-template-columns:2.4rem minmax(0,1fr);column-gap:var(--s3);padding:var(--s4) 0;border-top:1px solid var(--rule)}
.post-steps > li:last-child{border-bottom:1px solid var(--rule)}
.post-steps > li::before{content:counter(step);grid-row:1 / span 9;font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--ink)}
.post-steps > li > *{grid-column:2}
.post-steps > li > h3{margin-top:0}
.post-steps > li > p + p{margin-top:1.05em}
.post-faq h3{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule)}
.post-close{margin-top:clamp(48px,5vw,72px);padding:var(--s4) 0 0;border-top:1.5px solid var(--ink);color:var(--ink);font-size:1.08em}
.post-sources ol{margin-top:var(--s4);display:grid;gap:var(--s2);counter-reset:src;font-size:.9rem;line-height:1.5;color:var(--ink-3)}
.post-sources li{counter-increment:src;position:relative;padding-left:2em}
.post-sources li::before{content:counter(src) ".";position:absolute;left:0;color:var(--ink-3)}
.post-sources > p{font-size:.95rem;color:var(--ink-3)}
@media (max-width:900px){
  .post-grid{grid-template-columns:1fr}
  .post-toc{position:static;padding-bottom:var(--s4);border-bottom:1px solid var(--rule)}
}
.post-body .nw{white-space:nowrap}
/* wide screens: the cover tucks up beside the short byline, its card starting just under the lede, and is drawn a little smaller so the whole card clears a 1440x900 fold */
@media (min-width:1100px){.post-cover{margin-top:-36px;max-width:940px}}
/* 1200 px and up: the cover sits at the right edge of the content area, the card in the empty right column; the cut trunk fades in on the left */
@media (min-width:1200px){.post-cover{margin-top:-60px;margin-left:auto;margin-right:calc(max(0px,(100% - var(--max)) / 2) + var(--gut));-webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 28%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent 2%,#000 28%,#000 97%,transparent)}}
/* 1200 to 1439 px: the lede's last line runs under the card, so the card cannot rise; the cover is drawn smaller instead so the card clears an 800 px tall screen */
@media (min-width:1200px) and (max-width:1439px){.post-cover{margin-top:-36px;max-width:780px}}
/* a cover that moves as the post opens (28 Oct, one post first, day only): the clip lies over the still and shows once
   it plays; the still is hidden only while the clip is due (the post's script marks .clip-on or .clip-off) */
.post-cover.has-clip{position:relative}
.post-clip{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;aspect-ratio:1600/808;opacity:0;pointer-events:none}
.post-cover.clip-on .post-clip{opacity:1}
/* when the clip ends it fades out over the still it ends on, so the page rests on the still (its paper is clear, so
   no box shows; a video's paper can only come within a level of the band) */
.post-cover.clip-on.clip-end .post-clip{opacity:0;transition:opacity .4s}
.post-cover.clip-off .post-clip{display:none}
@media (min-width:1100px){html.js-motion .post-cover.has-clip:not(.clip-on):not(.clip-off) img{opacity:0}}
@media (max-width:1099px){.post-clip{display:none}}
/* see-through clip (30 Oct; one copy here since 2 Nov instead of one per post): the clip carries no paper, so the
   drawing still hides while it plays (the wash stays), and when it ends the still takes over at once instead of a
   fade, so the two never show doubled */
@media (min-width:1100px){.post-cover.clip-alpha.clip-on:not(.clip-end) picture img{opacity:0}}
.post-cover.clip-alpha.clip-on.clip-end .post-clip{transition:none}
/* a cover marked .clip-hold (its clip has data-rest; pages.js) stays on the clip's last frame, with no swap to the still (Vish, 4 Nov) */
.post-cover.clip-hold.clip-on.clip-end .post-clip{opacity:1;transition:none}
@media (min-width:1100px){.post-cover.clip-alpha.clip-hold.clip-on picture img{opacity:0}}
@media (max-width:600px){.post-cover{-webkit-mask-image:none;mask-image:none}.post-cover img,.post-list .pl-art img{aspect-ratio:840/580}}

/* the blog index (5 Oct): posts newest first. The newest is drawn large, cover beside its words; the rest sit in a
   grid of cards beneath it (three across, two on tablets, one on phones), so the page holds many posts. */
.blog-sec{padding-top:clamp(24px,4vw,56px)}
.post-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) clamp(24px,3vw,40px)}
.post-list > li{position:relative;display:flex;flex-direction:column;gap:var(--s3)}
.post-list.lead > li:first-child{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s4) clamp(24px,4vw,64px);align-items:center;padding:var(--s5) 0 var(--s6);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
/* each card carries an ink frame (7 Oct), hidden: Vish did not want four borders. By day a card has no box; on hover it
   rises and one aurora line draws in along its foot, left to right (her ask, 7 Oct). The night look draws its own lit
   card. The title's link covers the whole card in both looks. */
.post-list .frame-ink{display:none}
/* 24 Oct: by day each post now sits in a card, Vish: "a faint border separating each card that gets highlighted when it's
   hovered over, but keep the bottom ... line and the aurora border on hover". The lighter paper inside a faint hairline
   that darkens on hover; the rise and the aurora line along the foot stay, drawn inside the card's rounded edge. */
html:not([data-theme="night"]) .post-list > li{padding:var(--s3) var(--s3) var(--s4);background:var(--paper-2);border:1px solid rgba(28,26,23,.1);border-radius:12px;overflow:hidden;transition:transform .5s var(--out),border-color .3s}
html:not([data-theme="night"]) .post-list.lead > li:first-child{padding:clamp(16px,2.4vw,32px);border:1px solid rgba(28,26,23,.1)}
/* and on hover a light ink line draws itself round the card, Vish: "the ink border goes from left, clockwise, and meets
   the Aurora border at the bottom towards the right". pages.js shapes each card's line (bottom left, up, across, down
   to the bottom right) and marks the card .inked; the line draws over the same time as the aurora line, so they meet */
html:not([data-theme="night"]) .post-list > li.inked > .frame-ink{display:block}
html:not([data-theme="night"]) .post-list > li > .frame-ink path{stroke-width:1.6;opacity:.42;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--out)}
html:not([data-theme="night"]) .post-list > li:is(:hover,:focus-within) > .frame-ink path{stroke-dashoffset:0}
html:not([data-theme="night"]) .post-list > li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--aurora);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--out)}
html:not([data-theme="night"]) .post-list > li:hover,html:not([data-theme="night"]) .post-list > li:focus-within{transform:translateY(-4px)}
html:not([data-theme="night"]) .post-list > li:hover::after,html:not([data-theme="night"]) .post-list > li:focus-within::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){html:not([data-theme="night"]) .post-list > li,html:not([data-theme="night"]) .post-list > li::after,html:not([data-theme="night"]) .post-list > li > .frame-ink path{transition:none}html:not([data-theme="night"]) .post-list > li:hover{transform:none}}
.post-list > li > :not(.frame-ink){position:relative;z-index:2}
.post-list :is(h2,h3) a::after{content:"";position:absolute;inset:0;z-index:3}
.pl-art img{display:block;width:100%;height:auto;aspect-ratio:1600/808}
.pl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:.88rem;color:var(--ink-3)}
.sub .post-list :is(h2,h3){margin-top:var(--s2);font-size:clamp(1.35rem,1.15rem + .6vw,1.75rem);line-height:1.12;max-width:none}
.sub .post-list.lead > li:first-child h2{font-size:clamp(1.9rem,1.3rem + 1.8vw,3rem);line-height:1.05}
.post-list :is(h2,h3) a{text-decoration:none}
.post-list :is(h2,h3) a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.post-list :is(h2,h3) + p{margin-top:var(--s2);color:var(--ink-2);max-width:34em}
@media (max-width:900px){.post-list{grid-template-columns:1fr 1fr}.post-list.lead > li:first-child{grid-template-columns:1fr}}
@media (max-width:600px){.post-list{grid-template-columns:1fr}}
/* on phones the day cards stand in one column with nothing between them, so a faint line parts each from the next
   (Vish, 7 Oct); the night look's lit cards are parted already */
@media (max-width:600px){html:not([data-theme="night"]) .post-list:not(.lead) > li:not(:last-child){border-bottom:1px solid rgba(28,26,23,.1)}}
/* a post's label (Guide, Deep dive): a small hairline capsule, on the index and in the post's byline */
.kind{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(28,26,23,.32);color:var(--ink);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.byline .kind{margin-right:8px}

/* the post's contents (5 Oct). With the script (.toc-live) the section being read is marked and the others muted;
   without it the list is a plain list of links. Wide screens: sticky beside the text. Phones: a small bar at the top
   names the current section and opens the list. */
.toc-live .post-toc ol{gap:0;border-left:1px solid var(--rule)}
.toc-live .post-toc a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-bottom:0;border-left:2px solid transparent;color:var(--ink-3);transition:color .2s ease,border-color .2s ease}
.toc-live .post-toc a:hover{color:var(--ink)}
.toc-live .post-toc a[aria-current]{color:var(--ink);font-weight:600;border-left-color:var(--a3)}
.toc-bar{display:none}
@media (max-width:900px){
  .toc-bar{display:block;position:fixed;top:0;left:0;right:0;z-index:30;background:rgba(244,241,234,.96);box-shadow:0 1px 0 var(--rule);transform:translateY(-102%);visibility:hidden;transition:transform .3s var(--out),visibility 0s linear .3s}
  .toc-bar.on{transform:none;visibility:visible;transition:transform .3s var(--out)}
  .toc-now{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 var(--gut);background:none;border:0;font:500 .92rem var(--sans);color:var(--ink);text-align:left;cursor:pointer}
  .toc-k{flex:none;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
  .toc-cur{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .toc-now i{flex:none;width:8px;height:8px;margin-right:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
  .toc-now[aria-expanded="true"] i{transform:translateY(2px) rotate(225deg)}
  .toc-pop{padding:4px var(--gut) 14px;display:grid;border-top:1px solid var(--rule)}
  .toc-pop a{display:block;padding:10px 0;color:var(--ink-3);text-decoration:none}
  .toc-pop a[aria-current]{color:var(--ink);font-weight:600}
  .post-body h2{scroll-margin-top:72px}
}
.toc-bar[hidden],.toc-pop[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.toc-bar,.toc-bar.on,.toc-live .post-toc a,.toc-now i{transition:none}}
/* the services page's Grow step: its link to the blog */
.sub .cs-list .more{margin-top:4px}
/* the blog index with many posts (5 Oct): jump links to each group, and the groups as plain sections, so they work
   without the script */
.blog-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)}
.blog-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(28,26,23,.32);color:var(--ink);font-size:.95rem;text-decoration:none}
.blog-jump a:hover,.blog-jump a:focus-visible{box-shadow:inset 0 0 0 1.5px var(--a3)}
.blog-jump span{margin-left:6px;color:var(--ink-3)}
/* search (3 Nov) */
.blog-find{margin-top:var(--s4);max-width:420px}
.blog-find[hidden]{display:none}
.blog-find label{display:block;margin-bottom:6px;font-size:.95rem;color:var(--ink-2)}
.blog-find input{box-sizing:border-box;width:100%;min-height:44px;padding:0 18px;border:0;border-radius:99px;background:transparent;box-shadow:inset 0 0 0 1px rgba(28,26,23,.32);color:var(--ink);font:inherit;font-size:16px}
.blog-find input:focus-visible{outline:0;box-shadow:inset 0 0 0 1.5px var(--a3)}
.blog-find-n{margin:6px 0 0;min-height:1.5em;font-size:.9rem;color:var(--ink-3)}
.post-social{margin-top:var(--s4);color:var(--ink-2)}
.blog-sec + .blog-sec{padding-top:clamp(56px,7vw,104px)}
.blog-sec .sec-head{margin-bottom:clamp(32px,4vw,56px)}
.blog-sec[id]{scroll-margin-top:var(--s4)}
/* code and tables in posts (5 Oct). A code block scrolls inside itself on a phone, never the page (the column may
   shrink below its longest line, hence min-width:0 on the grid item); a wide table
   scrolls in its own frame; inline code may break anywhere so it never pushes the column wider. */
.post-grid > .post-body{min-width:0}
.post-body code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.84em;padding:.08em .34em;border-radius:4px;background:rgba(28,26,23,.06);color:var(--ink);overflow-wrap:anywhere}
.post-body pre{max-width:100%;margin:var(--s4) 0 0;padding:var(--s3) var(--s4);overflow-x:auto;background:var(--paper-2);border:1px solid var(--rule);border-left:2px solid var(--a3);border-radius:6px;font-size:.86rem;line-height:1.6;tab-size:2}
.post-body pre code{padding:0;background:none;font-size:inherit;white-space:pre;overflow-wrap:normal}
.post-body pre + p{margin-top:var(--s4)}
.post-table{margin:var(--s5) 0 0}
.post-table-scroll{max-width:100%;overflow-x:auto;background:var(--paper-2);border:1px solid var(--rule);border-radius:6px}
.post-table-scroll:focus-visible{outline:2px solid var(--a3);outline-offset:2px}
.post-body table{width:100%;min-width:620px;border-collapse:collapse;font-size:.86rem;line-height:1.45;color:var(--ink-2)}
.post-body caption{max-width:calc(100vw - 2 * var(--gut) - 2px);box-sizing:border-box;padding:var(--s2) var(--s3) 0;text-align:left;font-size:.86rem;color:var(--ink-3)}
.post-body th,.post-body td{padding:10px var(--s3);text-align:left;vertical-align:top}
.post-body thead th{border-bottom:1px solid var(--ink);color:var(--ink);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.post-body tbody tr + tr td{border-top:1px solid var(--rule)}
/* the judges' fixes (5 Oct): a table marked .stack fits its column on every screen, and on phones becomes one card per
   row, each cell headed by its column name (data-label); on phones a code block wraps its long lines in smaller type,
   so nothing hides past the right edge */
.post-body table.stack{min-width:0}
.post-body .stack thead th{white-space:normal}
@media (max-width:600px){
  .post-body pre{padding:var(--s3) 12px;font-size:12px}
  .post-body pre code{white-space:pre-wrap;overflow-wrap:anywhere}
  .post-body table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .post-body table.stack,.post-body .stack tbody,.post-body .stack tr,.post-body .stack td{display:block}
  .post-body .stack tr{padding:6px 0}
  .post-body .stack tr + tr{border-top:1px solid var(--ink)}
  .post-body .stack td,.post-body .stack tbody tr + tr td{display:grid;grid-template-columns:8.5em 1fr;gap:12px;padding:5px var(--s3);border-top:0}
  .post-body .stack td::before{content:attr(data-label);color:var(--ink-3);font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.9}
  .post-body .stack td:empty{display:none}
  .post-body table.stack caption{display:block}
}
/* the posts of 5 Oct: their drawings reach further left than the Guide's, so on wide screens the cover starts under
   the byline instead of tucking up beside it, and never sits under a line of text */
@media (min-width:1100px){.post-cover.flat{margin-top:var(--s5)}}
/* wide screens by day (28 Oct): the whole opening on one screen. Vish: "it was better below. You just had to move
   the entire thing up ... It's okay if it overlaps a bit on the right section. Just make sure that it looks seamless
   on one frame." The opening is as before (the words top left, the wide cover below at the right), moved up: the
   band is one screen tall less the masthead, and the cover takes the room left under the words, sized by that
   height, and rises --pull into the empty space beside the lede. Each post's --pull (set on its figure, 100px unless
   the post says less) was measured so that only bare paper lies under any line of text at 1920x1080, 1710x980,
   1536x864, 1440x900, 1366x768, 1280x800 and 1280x720. The cover's edges are not faded (Vish, 28 Oct: "I would
   recommend not blurring it unless it's actively overlapping the text"); where a drawn part of a cover does lie
   under a line of the words at a given screen size, pages.js fades the cover softly there and nowhere else. The
   cover itself is drawn on clear paper (cover-hero-*.webp: the cover with its paper made transparent), so the band
   is its paper and no box or tone step shows (a lossy webp can only bring its own paper within a level of the band).
   Night gets the covers with their own paper (deploy/_worker.js swaps the file names), so night is unchanged. The
   title is held to 8% of the screen's height and the space above the crumb is halved, so short laptop screens keep a
   good-sized cover. */
/* the cover's colour wash (28 Oct). Vish: "make sure the blur looks complete ... Let it feel complete like a cloud."
   On wide screens by day the cover comes in two layers: the wash, painted whole from the cover's own source with its
   edges feathered (cover-wash.webp, placed by --wl, --wt and --ww as shares of the cover), and the drawing above it on
   clear paper with only the branch's starting ends faded (cover-bare-*.webp). The wash may run past the cover and under
   the text, which stays above it. Phones, screens under 1100px and night keep the single cover; the worker drops both
   day layers at night. */
.post-cover .post-wash{display:none}
@media (min-width:1100px){
  html:not([data-theme="night"]) .post-top{display:flex;flex-direction:column;height:calc(100svh - 68px - clamp(14px,2vw,26px) - 16px)}
  html:not([data-theme="night"]) .sub .post-top > .post-hero{flex:none;padding-top:clamp(16px,2vw,32px)}
  html:not([data-theme="night"]) .post-top .post-hero h1{font-size:min(clamp(2.6rem,1.6rem + 3.6vw,5.4rem),8svh)}
  html:not([data-theme="night"]) .post-top > .post-cover,html:not([data-theme="night"]) .post-top > .post-cover.flat{flex:1 1 0;min-height:0;align-self:flex-end;
    display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:1600/808;width:auto;max-width:940px;
    margin:calc(-1 * var(--pull,100px)) calc(max(0px,(100% - var(--max)) / 2) + var(--gut)) 0 0;
    -webkit-mask-image:none;mask-image:none}
  html:not([data-theme="night"]) .post-top > .post-cover picture{display:block}
  html:not([data-theme="night"]) .post-top{overflow-x:clip}
  html:not([data-theme="night"]) .post-art,html:not([data-theme="night"]) .post-art > picture{position:relative}
  html:not([data-theme="night"]) .post-cover .post-wash{display:block;position:absolute;left:var(--wl);top:var(--wt);width:var(--ww);height:auto;aspect-ratio:auto;max-width:none;pointer-events:none}
}
/* 1100 to 1199 px: the lede runs nearly to the right margin, so the cover rises at most 40px */
@media (min-width:1100px) and (max-width:1199px){html:not([data-theme="night"]) .post-top > .post-cover,html:not([data-theme="night"]) .post-top > .post-cover.flat{margin-top:calc(-1 * min(var(--pull,100px),40px))}}
/* the day or night switch (6 Oct): every page carries both (deploy/switch.py adds them); by day the moon shows, and
   /night/pages.css shows the sun once the worker marks the page night */
html:not([data-theme="night"]) .to-day{display:none!important}
/* Ao on the blog's opening (6 Oct): the Ink home's hero, unchanged art (the owl, his toes, the wash behind him, the plum
   branch, its bough and tip). Every layer is drawn as a background, so the night look (v2-dusk/pages.css) can swap in its
   own art without the day pictures loading. Positions are the home's, measured as fractions of the owl's width (--w).
   By day (7 Oct) he sits on the left as on the home, his branch running in from the screen's left edge so its cut ends
   are never seen, and the intro moves to his right; on phones and tablets he moves below the intro, still at the left
   edge. The night look keeps him on the right. */
.has-ao{position:relative;overflow-x:clip;--w:min(330px,24vw)}
.has-ao .wrap{position:relative;z-index:1}
.ao-perch{position:absolute;z-index:0;right:max(var(--gut),(100% - var(--max)) / 2 + var(--gut));top:clamp(8px,1.6vw,28px);width:var(--w);height:calc(var(--w) * 1.23);pointer-events:none}
.ao-perch i{position:absolute;display:block;background:no-repeat 0 0/100% 100%}
.ao-perch .halo,.ao-perch .moon{display:none}
.ao-perch .wash{left:calc(var(--w) * .03);top:calc(var(--w) * .099);width:calc(var(--w) * .94);height:calc(var(--w) * .94);opacity:.5;mix-blend-mode:multiply;background-image:url(img/wash/aurora.webp);
  -webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent);mask-image:radial-gradient(closest-side,#000 45%,transparent)}
.ao-perch .perch{left:calc(var(--w) * -.3189);top:calc(var(--w) * .6733);width:calc(var(--w) * 1.2433);height:calc(var(--w) * .5589);background-image:url(img/plum-desk.webp)}
.ao-perch .owl{left:0;top:0;width:var(--w);height:calc(var(--w) * 1.1);background-image:url(img/sumi-owl-900.webp);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 95%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 95%,transparent)}
.ao-perch .toe{left:calc(var(--w) * .3222);top:calc(var(--w) * .9378);width:calc(var(--w) * .1889);height:calc(var(--w) * .0389);background-image:url(img/sumi-toe.webp)}
.ao-perch .shut{left:calc(var(--w) * .2778);top:calc(var(--w) * .4806);width:calc(var(--w) * .2406);height:calc(var(--w) * .1561);background-image:url(img/sumi-eyes-shut-900.webp);opacity:0}
.ao-perch .shut.on{opacity:1}
.ao-perch .bough{left:calc(var(--w) * -.3772);top:calc(var(--w) * .1061);width:calc(var(--w) * .4967);height:calc(var(--w) * .1961);background-image:url(img/plum-desk-bough.webp)}
.ao-perch .tip{left:calc(var(--w) * .0939);top:calc(var(--w) * .2394);width:calc(var(--w) * .1083);height:calc(var(--w) * .0255);background-image:url(img/plum-desk-tip.webp)}
/* by day: the owl's box starts .152 of his width in from the left edge, as on the home, which puts the branch's and the
   bough's cut ends past the edge; the intro starts just past his box, as the home's copy does */
@media (min-width:901px){
  html:not([data-theme="night"]) .has-ao{--w:min(380px,26vw);min-height:calc(var(--w) * 1.3)}
  html:not([data-theme="night"]) .ao-perch{right:auto;left:calc(var(--w) * .152);top:calc(50% - var(--w) * .63)}
  html:not([data-theme="night"]) .has-ao .wrap{max-width:none;margin:0;padding-left:calc(var(--w) * 1.152 + 40px)}
  html:not([data-theme="night"]) .has-ao .wrap > *{max-width:40em}
}
@media (max-width:900px){
  .has-ao{--w:min(52vw,250px)}
  .ao-perch{position:relative;right:auto;top:auto;margin:var(--s4) calc(var(--gut) + var(--w) * .05) 0 auto}
  html:not([data-theme="night"]) .ao-perch{margin:var(--s4) 0 0 calc(var(--w) * .152)}
}
@media (prefers-reduced-motion:no-preference){.js-motion .ao-perch{animation:ao-perch-in 1.2s var(--out) .3s both}}
@keyframes ao-perch-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* the privacy policy (7 Oct): a post's prose, with headings a size down */
.legal .post-body h2{font-size:clamp(1.5rem,1.25rem + .8vw,2rem);margin-top:clamp(40px,5vw,64px)}
.legal .sec{padding-top:clamp(32px,4vw,56px)}
/* the AI visibility page (12 Oct): links inside answers and a source after a sentence, as on the blog */
.answer .dash a,.answer .lede a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:rgba(109,82,245,.6)}
.answer .dash a:hover,.answer .lede a:hover{text-decoration-color:var(--a3)}
.answer .cite{font-size:.88em;color:var(--ink-3)}
.answer .cite a{color:var(--ink-3)}
.answer h2 a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.12em;text-decoration-color:rgba(109,82,245,.6)}
.answer h2 a:hover{text-decoration-color:var(--a3)}
/* the AI visibility page's blog list (12 Oct): each post's category after its title, quieter */
.answer .topic-list .cat,.answer .topic-list .cat a{color:var(--ink-3)}
/* the blog's topic and category pages (12 Oct): the list of other pages, the current one marked */
.topic-nav .dash a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:rgba(109,82,245,.6)}
.topic-nav .dash a[aria-current]{text-decoration:none;font-weight:600}
/* the blog's category picker (12 Oct): the blog's own capsules (as the Deep dives and Articles links), the chosen one
   in ink like the Get a quote button; one swipeable row on phones. Every chip is a link; pages.js filters in place. */
.cat-bar{padding-top:clamp(28px,3.5vw,48px)}
.blog-sec + .cat-bar{padding-top:clamp(40px,5vw,72px)}
.cat-pick ul{display:flex;flex-wrap:wrap;gap:6px 6px;margin:0;padding:0;list-style:none}
.cat-pick a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(28,26,23,.32);color:var(--ink);font-size:.88rem;text-decoration:none;white-space:nowrap;transition:box-shadow .3s,background-color .3s,color .3s}
.cat-pick .n{color:var(--ink-3);font-size:.86em;font-variant-numeric:tabular-nums;transition:color .3s}
.cat-pick a:hover,.cat-pick a:focus-visible{box-shadow:inset 0 0 0 1.5px var(--a3)}
.cat-pick a[aria-current]{background:var(--ink);color:var(--paper);box-shadow:none}
.cat-pick a[aria-current] .n{color:rgba(244,241,234,.72)}
@media (max-width:600px){
  .cat-pick ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:4px var(--gut);-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .cat-pick ul::-webkit-scrollbar{display:none}
}
@media (prefers-reduced-motion:reduce){.cat-pick a,.cat-pick .n{transition:none}}
.post-list > li[hidden],.blog-sec[hidden],.blog-jump[hidden]{display:none}
/* the blog index's dividers (12 Oct): the home's ink strokes between its sections; their reaction to the pointer is in
   site.css and rules.js, shared by every page */
.ink-rule[hidden]{display:none}
.ink-rule + .blog-sec{padding-top:clamp(56px,7vw,104px)}
/* 23 Oct (jury): on topic and category pages the posts eyebrow is an h2 (the cards are h3), drawn exactly as the eyebrow it was */
.sec .sec-note h2.eyebrow{font-size:.78rem;line-height:inherit;letter-spacing:.16em;word-spacing:normal;max-width:none;text-wrap:wrap}

/* ===== Cards on the inner pages (24 Oct 2026) =====
   Vish, on the services page: "All things that go into the website I think it's best to keep them in the regular UI,
   which is the cards. For both day and night." Then, on the first version, which had borrowed the home's column and
   step layouts: "keep the way it is and put it in the card." So each section keeps its own layout (the rows with
   their rules, the large numerals, the lists) and the whole of it sits in one of the day home's cards (.ao-card in
   site.css: the sumi ink frame, the lighter paper, the lift on hover; cards.js redraws the frame with squircle
   corners and fills it). The question and its lede stay above the card. The night look is in /night/pages.css. */
.sub .ao-in>svg+:not(svg){margin-top:0}
.sub .ao-in>.to-page:last-child{margin-bottom:0}

/* rows: the page's own rows, with the rule between them; the card's edge stands in for the rule above the first
   and below the last, and its padding for their outer spacing */
.sub .ao-rows .cs-list{margin-top:0}
.sub .ao-rows .cs-list li:first-child{border-top:0;padding-top:0}
.sub .ao-rows .cs-list li:last-child{border-bottom:0;padding-bottom:0}

/* Brand and website: the tag, sentence and three points in one card, as the home's lead band holds the same words;
   on wide screens the tag and sentence on the left, the points on the right */
.sub .ao-lead-in .dash{margin-top:var(--s5)}
@media (min-width:901px){
  .sub .ao-lead-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(32px,5vw,80px);align-items:start}
  .sub .ao-lead-in .dash{margin-top:0}
}
/* a card holding a list of points, a section's head (Changes), or the closing ask (the home's contact card) */
.sub .ao-note .dash{margin-top:0}
.sub .ao-head-in,.sub .ao-ask{margin-top:0}
.sub .ao-ask .ways{margin-top:var(--s5)}
.sub .ao-ask .addr{margin-bottom:0}
/* the privacy policy (24 Oct): each of its sections in its own card, "separate cards for each thing" (Vish); each heading
   starts at its card's top */
.sub .ao-legal{max-width:46em}
.sub .ao-legal > section + section{margin-top:var(--s4)}
.legal .ao-legal h2{margin-top:0}

/* the packages: the home's squircle corner on the two ink-framed packages (cards.js draws it, and clips the colour
   wash to it); without the script they keep a plain line in the same corner */
.pk-grid>.pack{border-radius:var(--sq);corner-shape:squircle}
.pk-grid>.pack.sq{overflow:visible}
.pk-grid>.pack:not(.sq):not(.sig){outline:1.6px solid rgba(28,26,23,.4);outline-offset:-.8px}
/* night takes the day layout on every article page (4 Nov, Vish; first on the Bing post): no frame, the bare art and its wash, placed as the day
   rules in pages.css place them. Everything is scoped by html[data-theme] so the day rules stay the only day rules. */
html[data-theme="night"] .post-top > .post-cover,html[data-theme="night"] .post-top > .post-cover.flat{margin:0;max-width:1200px;border-radius:0;overflow:visible;box-shadow:none}
html[data-theme="night"] .post-top > .post-cover::after{display:none}
html[data-theme="night"] .post-top > .post-cover img{filter:none}
html[data-theme="night"] .post-cover .post-wash{display:none}
@media (min-width:1100px){
  html[data-theme="night"] .post-top{display:flex;flex-direction:column;height:calc(100svh - 68px - clamp(14px,2vw,26px) - 16px);overflow-x:clip}
  html[data-theme="night"] .sub .post-top > .post-hero{flex:none;padding-top:clamp(16px,2vw,32px)}
  html[data-theme="night"] .post-top .post-hero h1{font-size:min(clamp(2.6rem,1.6rem + 3.6vw,5.4rem),8svh)}
  html[data-theme="night"] .post-top > .post-cover,html[data-theme="night"] .post-top > .post-cover.flat{flex:1 1 0;min-height:0;align-self:flex-end;
    display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:1600/808;width:auto;max-width:940px;
    margin:calc(-1 * var(--pull,100px)) calc(max(0px,(100% - var(--max)) / 2) + var(--gut)) 0 0}
  html[data-theme="night"] .post-top > .post-cover picture{display:block}
  html[data-theme="night"] .post-art,html[data-theme="night"] .post-art > picture{position:relative}
  html[data-theme="night"] .post-cover .post-wash{display:block;position:absolute;left:var(--wl);top:var(--wt);width:var(--ww);height:auto;aspect-ratio:auto;max-width:none;pointer-events:none}
}
@media (min-width:1100px) and (max-width:1199px){html[data-theme="night"] .post-top > .post-cover,html[data-theme="night"] .post-top > .post-cover.flat{margin-top:calc(-1 * min(var(--pull,100px),40px))}}
/* night only (4 Nov, Vish): the bottom of the art fades softly instead of ending in a flat cut, and one overlay carries the
   moonlight on the branch and the dimmer cards. Same cover picture and same clip as day; day never shows or loads the
   overlay. The overlay names its files in the post's own page. While the clip plays only the moonlight shows
   (.post-art::after, its own file): the card dim sits at each card's final place, so over the clip it drew dark boxes
   on the sky before the cards arrived. The whole overlay fades in as the clip ends, so the cards dim once they have landed. */
.post-moon{display:none}
/* the whole cloud at night (4 Nov, Vish: "it's okay if it crosses the border of the invisible card"): the same wash as day,
   running past the cover. The cover's edge masks would cut it, so night has none. Phones place their own wash per post. */
html[data-theme="night"] .post-top > .post-cover,html[data-theme="night"] .post-top > .post-cover.flat{-webkit-mask-image:none;mask-image:none}
@media (min-width:601px){
  html[data-theme="night"] .post-top{overflow-x:clip}
  html[data-theme="night"] .post-art > picture{position:relative;display:block}
  html[data-theme="night"] .post-cover .post-wash{display:block;position:absolute;left:var(--wl);top:var(--wt);width:var(--ww);height:auto;aspect-ratio:auto;max-width:none;pointer-events:none}
}
@media (max-width:600px){
  html[data-theme="night"] .post-top{overflow-x:clip}
  html[data-theme="night"] .post-art > picture{position:relative;display:block}
  html[data-theme="night"] .post-art::before{content:"";position:absolute;pointer-events:none;background:center/100% 100% no-repeat}
}
html[data-theme="night"] .post-art{position:relative}
html[data-theme="night"] .post-moon{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;background:center/100% 100% no-repeat}
html[data-theme="night"] .post-art > picture,html[data-theme="night"] .post-moon,html[data-theme="night"] .post-clip{-webkit-mask-image:linear-gradient(to bottom,#000 91%,rgba(0,0,0,.72) 94%,rgba(0,0,0,.28) 97.5%,transparent);mask-image:linear-gradient(to bottom,#000 91%,rgba(0,0,0,.72) 94%,rgba(0,0,0,.28) 97.5%,transparent)}
@media (min-width:1100px){
  html.js-motion[data-theme="night"] .post-cover.has-clip:not(.clip-off):not(.clip-end) .post-moon{opacity:0}
  html.js-motion[data-theme="night"] .post-cover.has-clip .post-art::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-position:center;background-size:100% 100%;background-repeat:no-repeat;opacity:0;-webkit-mask-image:linear-gradient(to bottom,#000 91%,rgba(0,0,0,.72) 94%,rgba(0,0,0,.28) 97.5%,transparent);mask-image:linear-gradient(to bottom,#000 91%,rgba(0,0,0,.72) 94%,rgba(0,0,0,.28) 97.5%,transparent)}
  html.js-motion[data-theme="night"] .post-cover.has-clip.clip-on:not(.clip-end) .post-art::after{opacity:1}
  html.js-motion[data-theme="night"] .post-cover.has-clip.clip-end .post-moon,html.js-motion[data-theme="night"] .post-cover.has-clip.clip-end .post-art::after{transition:opacity .45s}
  html.js-motion[data-theme="night"] .post-cover.clip-hold.has-clip.clip-end .post-moon,html.js-motion[data-theme="night"] .post-cover.clip-hold.has-clip.clip-end .post-art::after{transition:opacity .3s}
}