/* BVL shared theme. Canonical file: products/_shared/theme.css.
   Copied verbatim to each site's public/style.css (fonts/ too) by products/_shared/sync.sh;
   products/_shared/theme.test.mjs fails on drift. Edit here, never in a site copy. Design record: products/DESIGN.md. */

@font-face{font-family:"Archivo";src:url("fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@property --cut{syntax:"<length>";inherits:false;initial-value:0px}

:root{
  color-scheme:light dark;
  --paper:#f5f6f4;--ink:#0f1012;--ink-2:#45484d;--rule:#c9cbc8;--input:#fff;
  --field:var(--ink);--on-field:var(--paper);--facet:#45484d;
  --gutter:clamp(16px,3.4vw,48px);--gap:clamp(16px,2vw,28px);--page:88rem;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --key:3px;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#111214;--ink:#eff0ec;--ink-2:#b4b7bb;--rule:#3a3c40;--facet:#b4b7bb}
}
/* Product colour, set on <body> (landings) or on a home card. */
.stalewatch{--field:#ffcf1a;--on-field:#0f1012;--facet:#d9a200}
.migration-guard{--field:#2a2ed6;--on-field:#fff;--facet:#171a96}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--sans);font-stretch:100%;caret-color:var(--ink);overflow-wrap:break-word;overflow-x:clip}
::selection{background:var(--ink);color:var(--paper)}
h1,h2,h3{margin:0;font-weight:800;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.25rem,1.4rem + 2.6vw,3.5rem);font-stretch:112%}
h2{font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);font-stretch:118%}
h3{font-size:1.5rem;font-stretch:125%}
p,ul,ol,table,pre,form{margin:0 0 1rem}
ul,ol{padding-left:1.25em}
li+li{margin-top:.4rem}
strong{font-weight:700}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:.2em}
a:hover{background:var(--ink);color:var(--paper);text-decoration:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
code{font:.9em var(--mono);padding:.08em .3em;background:color-mix(in srgb,var(--ink) 9%,transparent)}
pre{font:.875rem/1.55 var(--mono);color:var(--paper);background:linear-gradient(315deg,transparent 12px,var(--ink) 0);padding:1rem calc(1.25rem + 12px) 1rem 1.25rem;white-space:pre-wrap;overflow-wrap:anywhere}
pre code{background:none;padding:0}
.muted{color:var(--ink-2)}
.muted,td,.card,footer{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:0;z-index:10;padding:.75rem 1rem;background:var(--ink);color:var(--paper)}
.skip:focus{left:var(--gutter)}

/* Bevel: the brand mark is a 45-degree cut on the bottom-right corner, drawn as a background so focus rings survive. */
.field{--cut:clamp(28px,3vw,44px);color:var(--on-field);background:linear-gradient(315deg,transparent var(--cut),var(--facet) var(--cut) calc(var(--cut) + 10px),var(--field) 0)}
.field{--ink:var(--on-field);--paper:var(--field);color-scheme:light}
.field input[type=checkbox]{accent-color:var(--on-field)}

/* Buttons: one vocabulary for .btn (home), form buttons and the injected .button (pre-order). */
.btn,.button,button{--cut:9px;--fill:var(--on-field);--ring:var(--on-field);--text:var(--field);display:inline-flex;align-items:center;min-height:48px;padding:.65rem 1.4rem .65rem 1.15rem;border:2px solid transparent;font:700 1rem/1.2 var(--sans);font-stretch:112%;letter-spacing:.01em;cursor:pointer;transition:--cut .16s cubic-bezier(.16,1,.3,1)}
.btn,.btn:hover,.button,.button:hover,button{color:var(--text);text-decoration:none;background:linear-gradient(315deg,transparent calc(var(--cut) - 1px),var(--fill) 0) padding-box,linear-gradient(315deg,transparent var(--cut),var(--ring) 0) border-box}
.button{--fill:var(--field);--ring:var(--ink);--text:var(--on-field)}
.btn:hover,.btn:focus-visible,button:hover,button:focus-visible{--cut:18px;--fill:var(--field);--text:var(--on-field)}
.button:hover,.button:focus-visible{--cut:18px;--fill:var(--ink);--text:var(--paper)}

/* Notes: status and limits at full weight inside a keyline frame. */
.note{border:2px solid var(--ink);padding:.9rem 1.1rem;margin:1.5rem 0;font-weight:500}
.note strong{font-weight:800}

/* Forms */
label{display:block;margin:0 0 1rem;font-weight:600}
input[type=email],input[type=text]{display:block;width:100%;max-width:28rem;min-height:48px;margin-top:.35rem;padding:.6rem .75rem;font:400 1.0625rem var(--sans);color:#0f1012;background:var(--input);border:2px solid #0f1012;border-radius:0}
input[type=checkbox]{width:1.25rem;height:1.25rem;margin:.15rem 0 0;accent-color:#0f1012}
label:has(input[type=checkbox]){display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;font-weight:400}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Shell: header, footer, page width */
header,main,footer{width:min(100% - 2*var(--gutter),var(--page));margin-inline:auto}
header{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding-top:clamp(16px,2.5vw,32px)}
.wordmark{--cut:12px;display:inline-flex;align-items:center;min-height:48px;padding:.2rem 1.1rem .2rem .8rem;font:900 1.75rem/1 var(--sans);font-stretch:125%;letter-spacing:.02em;text-decoration:none;color:var(--paper);background:linear-gradient(315deg,transparent var(--cut),var(--ink) 0)}
.wordmark:hover{color:var(--paper);background:linear-gradient(315deg,transparent 18px,var(--ink) 0)}
.tagline{margin:0;font-weight:600;font-stretch:112%}
footer{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.5rem var(--gap);margin-top:clamp(48px,7vw,96px);padding:1rem 0 2.5rem;border-top:var(--key) solid var(--ink);font-size:.9375rem}
footer p{margin:0}
footer a{display:inline-block;min-height:24px}

/* Registration: from 60rem every page on all three sites sits on one 12-column key grid.
   Read label 1-3 / text 4-9; home hero 1-8 / 9-12; cards 1-6 / 7-12; landing copy 1-7 / action 9-12. */
main{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--gap);padding-top:clamp(32px,6vw,80px)}
main>*{min-width:0}
@media (min-width:60rem){main{grid-template-columns:repeat(12,minmax(0,1fr))}main>*{grid-column:1 / -1}}

/* Read pages: hanging section heads on the label columns, calm text column. */
.doc>h1{margin-bottom:1.5rem}
.doc>h1+.muted{margin-bottom:0}
.doc>h2{margin-top:2.75rem;margin-bottom:.75rem;padding-top:.7rem;border-top:var(--key) solid var(--ink)}
.doc>p,.doc>ul,.doc>ol{max-width:34rem}
.doc>.crumb{margin-bottom:1.25rem;font-weight:600;font-stretch:112%}
/* Product mark on Read pages: a bevelled colour block above the title. */
body.stalewatch>.doc::before,body.migration-guard>.doc::before{content:"";display:block;width:clamp(96px,14vw,168px);height:clamp(40px,5vw,64px);margin-bottom:1.5rem;--cut:clamp(14px,1.6vw,22px);background:linear-gradient(315deg,transparent var(--cut),var(--facet) var(--cut) calc(var(--cut) + 6px),var(--field) 0)}
@media (min-width:60rem){
  .doc>*{grid-column:4 / 10}
  .doc>h1{grid-column:1 / 10;max-width:22ch}
  .doc>h1+.muted,.doc>h2,body.stalewatch>.doc::before,body.migration-guard>.doc::before{grid-column:1 / 4}
  .doc>h2{margin-bottom:0;padding-right:1rem}
  .doc>h2+*{margin-top:2.75rem;padding-top:.85rem}
  .doc>.crumb{grid-column:1 / -1}
  body.stalewatch>.doc::before,body.migration-guard>.doc::before{width:auto}
}

table{width:100%;table-layout:fixed;border-collapse:collapse;border-top:var(--key) solid var(--ink)}
th,td{text-align:left;vertical-align:top;padding:.75rem .75rem .75rem 0;border-bottom:1px solid var(--rule)}
th{width:7.5rem;font-weight:700;font-stretch:112%}
@media (min-width:40rem){th{width:11rem}}
td pre{margin:0}

/* Home (bvl.dev) */
.poster>.hero{padding-bottom:clamp(32px,5vw,64px)}
.poster h1{font-size:clamp(2.6rem,1.2rem + 4.8vw,6rem);font-stretch:125%;font-weight:850;line-height:.95;letter-spacing:-.03em;max-width:14ch;margin-bottom:clamp(20px,3vw,36px)}
.hero p{max-width:34rem;font-size:clamp(1.0625rem,1rem + .35vw,1.3125rem)}
.hero p:last-child{font-weight:700;font-stretch:112%}
@media (min-width:60rem){
  .hero,.poster section,.poster .grid{display:grid;grid-template-columns:subgrid;grid-column:1 / -1}
  .hero{grid-template-rows:1fr auto;align-items:end}
  .hero h1{grid-column:1 / 9;grid-row:1 / span 2;margin-bottom:0}
  .hero p{grid-column:9 / 13}
  .hero p:last-child{margin-bottom:.4rem}
  #tools>h2{grid-column:1 / -1}
  .grid>:first-child,#tools>.note{grid-column:1 / 7}
  .grid>:last-child{grid-column:7 / 13}
}
#tools>h2{margin:0 0 var(--gap);padding-top:.7rem;border-top:var(--key) solid var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:var(--gap)}
.card{display:flex;flex-direction:column;padding:clamp(20px,2.6vw,36px) clamp(20px,2.6vw,36px) clamp(36px,4vw,56px)}
.card h3{font-size:clamp(1.9rem,1.3rem + 2vw,3rem);margin-bottom:.9rem}
.card p{max-width:30rem}
.card p:last-child{margin:auto 0 0;padding-top:.75rem}
.card p:nth-of-type(3){font-size:1.25rem;font-weight:700;font-stretch:112%}
.badge{display:inline-block;padding:.15rem .55rem;font-size:.8125rem;font-weight:700;font-stretch:118%;letter-spacing:.06em;text-transform:uppercase;color:var(--field);background:var(--on-field)}
#tools>.note{max-width:44rem}
.split{display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(40px,6vw,72px)}
.split>h2{padding-top:.7rem;border-top:var(--key) solid var(--ink);margin-bottom:1rem}
.split ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--gap)}
.split li{margin:0;padding-top:.7rem;border-top:1px solid var(--ink)}
.split li strong{display:block;font-size:1.25rem;font-weight:800;font-stretch:118%;line-height:1.15;margin-bottom:.35rem}
.split>p{font-size:clamp(1.125rem,1rem + .5vw,1.5rem);font-weight:700;font-stretch:112%}
@media (min-width:60rem){
  .split>h2{grid-column:1 / 4}
  .split>:not(h2){grid-column:4 / 13;padding-top:.85rem;border-top:1px solid var(--ink)}
  .split>ul{display:grid;grid-template-columns:subgrid;border-top:0;padding-top:0}
  .split li{grid-column:span 3}
}

/* Product landings: copy on the left, the colour action block on the right; the injected pre-order block stacks under it. */
.landing{padding-top:0}
.landing>.lede{padding-top:clamp(32px,6vw,72px)}
.landing h1{font-size:clamp(2.25rem,1.2rem + 3.2vw,4.25rem);font-stretch:125%;line-height:.98;letter-spacing:-.03em;max-width:15ch;margin-bottom:clamp(20px,3vw,36px)}
.lede>h1+p,.lede>h1+p+p{max-width:36rem;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem)}
.lede>h2{margin:2.75rem 0 1rem;padding-top:.7rem;border-top:var(--key) solid var(--ink)}
.lede>p,.lede>ul{max-width:34rem}
.lede ol{list-style:none;padding:0;counter-reset:step;max-width:34rem}
.lede ol li{counter-increment:step;position:relative;min-height:3.75rem;margin:0;padding:.85rem 0 .85rem 3.75rem;border-bottom:1px solid var(--rule)}
.lede ol li::before{content:counter(step);position:absolute;left:0;top:.8rem;font-size:2.25rem;font-weight:850;font-stretch:125%;line-height:.9}
.lede .note{max-width:34rem}
.join{margin:0 calc(-1*var(--gutter));padding:clamp(28px,3vw,44px) var(--gutter) clamp(56px,6vw,80px)}
.join h2{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);font-stretch:125%;margin-bottom:1.5rem}
.join form{margin-bottom:1.5rem}
.join>p{font-size:.9375rem}
.landing>p{margin:0}
.landing>.note{margin:1rem 0 0}
.landing>p:has(.button){margin-top:1rem}
@media (min-width:60rem){
  .landing{grid-template-rows:repeat(4,auto) 1fr}
  .landing>.lede{grid-column:1 / 8;grid-row:1 / -1}
  .landing>.join{grid-column:9 / 13;grid-row:1;margin:0 calc(-1*max(var(--gutter),(100vw - var(--page))/2)) 0 0;padding-left:clamp(28px,3vw,44px);padding-top:clamp(32px,6vw,72px)}
  .landing>p,.landing>.note{grid-column:9 / 13}
}
/* Without an injected pre-order block, the action column stays in view while the copy scrolls. */
@media (min-width:60rem) and (min-height:760px){
  .landing:not(:has(#preorder))>.join{grid-row:1 / -1;align-self:start;position:sticky;top:0}
}

@media (prefers-reduced-motion:no-preference){
  .field{animation:cut .7s cubic-bezier(.16,1,.3,1) .15s backwards}
  @keyframes cut{from{--cut:0px}}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Phones: the signup sits at the end of the page, so offer a jump to it near the top. */
@media (min-width:60rem){.jump{display:none}}