/* frankvitetta.co | studio stylesheet */

@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("/fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --night:#0f0e0c;
  --night-lift:#181714;
  --rule:#2f2c27;
  --rule-firm:#6e695e;
  --bone:#ece7dc;
  --ash:#a39d91;
  --acid:#c8f53c;
  --grotesk:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(1.25rem,4.4vw,4.75rem);
  --rail:clamp(12rem,24vw,23rem);
  --pad:clamp(2.75rem,6.2vw,5.75rem);
  --measure:40rem;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:dark;background:var(--night);scroll-padding-top:6rem}
body{
  margin:0;
  background:var(--night);
  color:var(--bone);
  font-family:var(--grotesk);
  font-size:clamp(1.0625rem,1rem + .28vw,1.1875rem);
  font-weight:400;
  line-height:1.6;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
h1,h2,h3{margin:0;font-weight:600;line-height:1.05;letter-spacing:-.03em}
p,ul,ol,dl{margin:0 0 1.15em}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:var(--rule-firm);text-underline-offset:.22em;transition:text-decoration-color .25s var(--ease),color .25s var(--ease)}
a:hover{text-decoration-color:var(--acid)}
:focus-visible{outline:2px solid var(--acid);outline-offset:4px;border-radius:2px}
::selection{background:var(--acid);color:var(--night)}
svg{display:block}
time{font-variant-numeric:tabular-nums}

/* skip link */
.hop{position:absolute;left:var(--gutter);top:-5rem;z-index:40;padding:.6rem 1rem;background:var(--acid);color:var(--night);font-weight:600;text-decoration:none;border-radius:999px}
.hop:focus{top:.8rem}

/* tiny mono label */
.stamp{margin:0;font-family:var(--mono);font-size:.6875rem;font-weight:400;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.stamp a{color:var(--bone);text-decoration-color:var(--rule-firm)}

/* pill button */
.capsule{display:inline-flex;align-items:center;gap:.6em;padding:.62em 1.25em;border:1px solid var(--acid);border-radius:999px;background:var(--acid);color:var(--night);font-family:var(--grotesk);font-size:.9375rem;font-weight:600;line-height:1.2;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.capsule:hover{background:var(--bone);border-color:var(--bone)}
.capsule--here{background:transparent;color:var(--acid)}
.capsule--here:hover{color:var(--night)}
.capsule--large{padding:.85em 1.7em;font-size:1.0625rem}

/* arrow glyph, drawn as an inline svg */
.arrow{flex:none;width:1em;height:1em;transition:transform .45s var(--ease),color .3s var(--ease)}

/* sticky header */
.lintel{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;min-height:4.25rem;padding:.7rem var(--gutter);background:rgba(15,14,12,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.lintel__name{font-size:1.0625rem;font-weight:600;letter-spacing:-.025em;text-decoration:none;white-space:nowrap}
.lintel__list{display:flex;align-items:center;gap:clamp(.85rem,2.6vw,2.5rem);margin:0;padding:0;list-style:none}
.lintel__link{display:inline-block;padding:.35rem 0;font-size:.9375rem;color:var(--ash);text-decoration:none;background:linear-gradient(var(--bone),var(--bone)) 0 100%/0 1px no-repeat;transition:color .25s var(--ease),background-size .4s var(--ease)}
.lintel__link:hover,.lintel__link--here{color:var(--bone)}
.lintel__link:hover,.lintel__link--here{background-size:100% 1px}

/* home: the statement */
.manifesto{display:grid;gap:clamp(2rem,5vw,4rem);padding:clamp(1.5rem,3vw,2.5rem) var(--gutter) clamp(2.5rem,5vw,4.5rem)}
.manifesto__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem}
.manifesto__line{max-width:15ch;font-size:clamp(2.75rem,9.4vw,7rem);font-weight:600;line-height:.94;letter-spacing:-.04em;text-wrap:balance}
.manifesto__mark,.opening__mark{font-style:normal;color:var(--acid)}

/* the structural unit: a hairline bay with a left rail */
.bay{border-top:1px solid var(--rule);padding:var(--pad) var(--gutter)}
.bay__rail{margin-bottom:1.5rem}
.bay__body>:last-child{margin-bottom:0}

/* rail marker: numeral plus heading */
.marker__numeral{display:block;margin:0 0 .5rem;font-family:var(--mono);font-size:clamp(2.75rem,5.4vw,4.75rem);font-weight:200;line-height:1;letter-spacing:-.06em;color:var(--rule-firm);font-variant-numeric:tabular-nums}
.marker__heading{font-size:clamp(1.45rem,2.1vw,1.8rem);letter-spacing:-.03em;text-wrap:balance}

/* running text */
.longread{max-width:var(--measure)}
.longread h3{margin:2.4em 0 .7em;font-size:1.22em;line-height:1.2;letter-spacing:-.02em}
.longread>h3:first-child{margin-top:0}
.longread ul,.longread ol{padding-left:1.2em}
.longread li{margin-bottom:.55em;padding-left:.2em}
.longread li::marker{color:var(--ash);font-family:var(--mono);font-size:.8em}
.longread strong{font-weight:600}
.longread--large{font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem);line-height:1.4;letter-spacing:-.015em;max-width:34em}

/* opening block of every inner page */
.opening{padding:clamp(1.5rem,3vw,2.5rem) var(--gutter) var(--pad)}
.opening__title{max-width:17ch;margin-top:clamp(3rem,9vw,7.5rem);font-size:clamp(2.5rem,7.4vw,5.75rem);font-weight:600;line-height:.96;letter-spacing:-.042em;text-wrap:balance}
.opening__title--long{max-width:20ch;font-size:clamp(2.2rem,6vw,4.75rem)}
.opening__lede{max-width:33em;margin:clamp(1.5rem,3vw,2.5rem) 0 0;font-size:clamp(1.2rem,1.02rem + .85vw,1.55rem);line-height:1.4;letter-spacing:-.012em;color:var(--ash)}
.opening__lede a{color:var(--bone)}

/* breadcrumb trail */
.trail__list{display:flex;flex-wrap:wrap;gap:.25rem .7rem;margin:0;padding:0;list-style:none}
.trail__step+.trail__step::before{content:"/";margin-right:.7rem;color:var(--rule-firm)}
.trail__step[aria-current]{color:var(--bone)}
.trail__list a{color:var(--ash);text-decoration:none}
.trail__list a:hover{color:var(--bone)}

/* numbered index rows */
.docket{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.docket__row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.9rem 1.25rem;padding:1.9rem var(--gutter) 2rem;border-bottom:1px solid var(--rule);transition:background-color .4s var(--ease)}
.docket__row:last-child{border-bottom:0}
.docket__num{grid-column:1/-1;font-family:var(--mono);font-size:.8125rem;font-weight:300;letter-spacing:.08em;color:var(--ash);font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.docket__main{min-width:0;transition:transform .5s var(--ease)}
.docket__title{font-size:clamp(1.6rem,3.5vw,3.15rem);font-weight:500;line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.docket__link{text-decoration:none}
.docket__link::after{content:"";position:absolute;inset:0}
.docket__link:focus-visible{outline:none}
.docket__link:focus-visible::after{outline:2px solid var(--acid);outline-offset:-6px}
.docket__gist{max-width:34em;margin:.85rem 0 0;color:var(--ash)}
.docket__tag{grid-column:1/-1;grid-row:4;display:flex;flex-wrap:wrap;gap:.2rem 1.25rem}
.docket__arrow{align-self:start;margin-top:.2rem;font-size:clamp(1.5rem,2.6vw,2.4rem);color:var(--ash)}
.docket__row:hover,.docket__row:focus-within{background:var(--night-lift)}
.docket__row:hover .docket__num,.docket__row:focus-within .docket__num{color:var(--bone)}
.docket__row:hover .arrow,.docket__row:focus-within .arrow{color:var(--acid);transform:translate(.18em,-.18em)}
.docket-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;padding:clamp(3rem,7vw,6rem) var(--gutter) 1.1rem;border-top:1px solid var(--rule)}
.docket-head__title{font:inherit;letter-spacing:inherit;line-height:inherit}

/* the hire band */
.slab{border-top:1px solid var(--rule);padding:clamp(1.5rem,3vw,2.5rem) var(--gutter) clamp(2.25rem,4.5vw,4rem)}
.slab__line{margin:clamp(2.5rem,7vw,6rem) 0 0;font-size:clamp(2.4rem,12.4vw,13.5rem);font-weight:600;line-height:.9;letter-spacing:-.045em}
.slab__link{display:flex;align-items:center;justify-content:space-between;gap:.2em;text-decoration:none;white-space:nowrap}
.slab__link .arrow{width:.66em;height:.66em}
.slab__link:hover .arrow,.slab__link:focus-visible .arrow{color:var(--acid);transform:translate(.06em,-.06em)}
.slab__aside{max-width:30em;margin:clamp(1.5rem,3vw,2.5rem) 0 0;color:var(--ash)}

/* footer */
.plinth{border-top:1px solid var(--rule);padding:var(--pad) var(--gutter) 2rem}
.plinth__grid{display:grid;gap:2.5rem 2rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.plinth__who{grid-column:1/-1}
.plinth__name{margin:0 0 .5rem;font-size:1.35rem;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.plinth__line{max-width:22em;margin:0;color:var(--ash);font-size:.9375rem}
.plinth__list{margin:.9rem 0 0;padding:0;list-style:none;font-size:.9375rem}
.plinth__list li{margin-bottom:.4rem}
.plinth__link{text-decoration-color:transparent}
.plinth__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem;margin-top:clamp(3rem,7vw,5.5rem);padding-top:1.25rem;border-top:1px solid var(--rule)}

/* note: facts in the rail */
.dossier{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem;margin:0}
.dossier__row{padding:.8rem 0;border-top:1px solid var(--rule)}
.dossier__term{margin:0 0 .15rem}
.dossier__detail{margin:0;font-size:.9375rem}

/* note: the "In brief" summary */
.precis{max-width:calc(var(--measure) + 6rem);padding:clamp(1.5rem,3.2vw,2.75rem);border:1px solid var(--rule-firm);border-top-color:var(--acid)}
.precis__title{margin:0 0 1rem}
.precis__list{margin:0;padding:0;list-style:none;font-size:1.08em;line-height:1.5}
.precis__list li{padding:1.05rem 0;border-top:1px solid var(--rule)}
.precis__list li:last-child{padding-bottom:0}

/* note: dated list */
.chrono{margin:1.4rem 0 2.2rem;padding:0;list-style:none;border-top:1px solid var(--rule)}
.longread .chrono{padding-left:0}
.longread .chrono__item{margin:0;padding:1.05rem 0}
.chrono__item{display:grid;align-items:start;gap:.4rem 1.5rem;border-bottom:1px solid var(--rule)}
.chrono__when{display:flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.75rem;line-height:1.9;letter-spacing:.1em;text-transform:uppercase;color:var(--bone);font-variant-numeric:tabular-nums}
.chrono__when::before{content:"";flex:none;width:.5rem;height:.5rem;border:1px solid var(--ash)}
.chrono__item--passed .chrono__when::before{background:var(--bone);border-color:var(--bone)}
.chrono__what{display:block;font-size:.97em}

/* note: confidence note and sources */
.caveat{max-width:var(--measure);color:var(--ash);font-size:.97em}
.caveat>:last-child{margin-bottom:0}
.refs{max-width:calc(var(--measure) + 4rem);margin:0;padding:0;list-style:none;counter-reset:src;font-size:.9375rem;line-height:1.5}
.refs li{counter-increment:src;display:grid;grid-template-columns:2.4rem minmax(0,1fr);padding:.8rem 0;border-top:1px solid var(--rule)}
.refs li:last-child{border-bottom:1px solid var(--rule)}
.refs li::before{content:counter(src,decimal-leading-zero);padding-top:.2em;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;color:var(--ash)}
.refs a{color:var(--ash);text-decoration-color:var(--rule)}
.refs a:hover{color:var(--bone);text-decoration-color:var(--acid)}

/* plain link rows */
.onward{max-width:calc(var(--measure) + 4rem);margin:0;padding:0;list-style:none}
.onward__item{border-top:1px solid var(--rule)}
.onward__item:last-child{border-bottom:1px solid var(--rule)}
.onward__link{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.05rem 0;font-size:1.08em;font-weight:500;letter-spacing:-.015em;line-height:1.3;text-decoration:none;transition:padding .45s var(--ease)}
.onward__link .arrow{color:var(--ash)}
.onward__link:hover{padding-left:.6rem}
.onward__link:hover .arrow{color:var(--acid);transform:translate(.15em,-.15em)}

/* about: record of facts */
.record{margin:2rem 0 0;border-top:1px solid var(--rule)}
.record__row{display:grid;gap:.2rem 1.5rem;padding:.95rem 0;border-bottom:1px solid var(--rule)}
.record__term{padding-top:.3em}
.record__detail{margin:0}

/* reading list */
.shelves{counter-reset:shelf}
.shelf{margin:0;padding:0;list-style:none;max-width:calc(var(--measure) + 6rem)}
.shelf__item{counter-increment:shelf;display:grid;grid-template-columns:2.6rem minmax(0,1fr);padding:1.35rem 0;border-top:1px solid var(--rule)}
.shelf__item:last-child{border-bottom:1px solid var(--rule)}
.shelf__item::before{content:counter(shelf,decimal-leading-zero);padding-top:.45em;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;color:var(--ash)}
.shelf__entry{min-width:0}
.shelf__name{font-size:1.12em;font-weight:500;line-height:1.25;letter-spacing:-.02em}
.shelf__owner{margin:.4rem 0 .45rem}
.shelf__why{margin:0;color:var(--ash);font-size:.97em}

/* enquiry form */
.ask{display:grid;gap:1.9rem 2.5rem;max-width:52rem}
.ask__trap{display:none}
.ask__field{display:grid;gap:.55rem;min-width:0}
.ask__label{display:flex;justify-content:space-between;gap:1rem}
.ask__input{width:100%;margin:0;padding:.7rem 0 .8rem;border:0;border-bottom:1px solid var(--rule-firm);border-radius:0;background-color:transparent;color:var(--bone);font:inherit;font-size:1.0625rem;line-height:1.4;-webkit-appearance:none;appearance:none;transition:border-color .25s var(--ease)}
.ask__input:hover{border-bottom-color:var(--bone)}
.ask__input:focus-visible{outline:none;border-bottom-color:var(--acid);box-shadow:0 1px 0 0 var(--acid)}
.ask__input--choice{padding-right:1.75rem;background-image:linear-gradient(45deg,transparent 50%,var(--bone) 50%),linear-gradient(135deg,var(--bone) 50%,transparent 50%);background-position:calc(100% - 9px) 55%,calc(100% - 4px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;cursor:pointer}
.ask__input--choice option{background:var(--night-lift);color:var(--bone)}
.ask__input--message{min-height:9.5rem;resize:vertical}
.ask__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;margin-top:.5rem}
.ask__small{flex:1 1 18rem;max-width:30em;margin:0;color:var(--ash);font-size:.875rem;line-height:1.5}
.ask__small a{color:var(--bone)}

@media (max-width:23.9rem){
  .lintel{flex-wrap:wrap}
  .lintel__nav{flex:1 0 100%}
  .lintel__list{justify-content:space-between}
  .lintel__list li:last-child{margin-left:auto}
}
@media (max-width:26rem){
  .lintel__name{font-size:1rem}
  .lintel__link{font-size:.875rem}
  .lintel .capsule{padding:.55em .95em;font-size:.8125rem}
}

@media (min-width:36rem){
  .chrono__item{grid-template-columns:11.5rem minmax(0,1fr)}
  .record__row{grid-template-columns:15rem minmax(0,1fr)}
  .ask{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ask__field--wide,.ask__foot{grid-column:1/-1}
  .plinth__grid{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr))}
  .plinth__who{grid-column:auto}
}

@media (min-width:60rem){
  .bay{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);padding-block:0}
  .bay__rail{margin:0;padding:var(--pad) 2rem var(--pad) 0;border-right:1px solid var(--rule)}
  .bay__body{min-width:0;padding:var(--pad) 0 var(--pad) clamp(2rem,5vw,5.5rem)}
  .dossier{display:block}
  .dossier__row:last-child{border-bottom:1px solid var(--rule)}
  .marker{position:sticky;top:6.25rem}
  .marker__numeral{margin-bottom:1rem}
  .opening__lede{margin-left:calc(var(--rail) + clamp(2rem,5vw,5.5rem))}
  .docket__row{grid-template-columns:var(--rail) minmax(0,1fr) 11rem 4.5rem;gap:0;padding-block:0}
  .docket__num,.docket__main,.docket__tag,.docket__arrow{padding-block:clamp(2rem,3.4vw,3.25rem)}
  .docket__num{grid-column:auto;border-right:1px solid var(--rule);font-size:clamp(1.6rem,3.5vw,3.15rem);font-weight:200;line-height:1.04;letter-spacing:-.06em;color:var(--rule-firm)}
  .docket__main{padding-inline:clamp(2rem,5vw,5.5rem) 2rem}
  .docket__tag{grid-column:auto;grid-row:auto;display:block;padding-top:calc(clamp(2rem,3.4vw,3.25rem) + .55rem)}
  .docket__tag .stamp{display:block}
  .docket__arrow{justify-self:end;margin:0}
  .docket__row:hover .docket__main,.docket__row:focus-within .docket__main{transform:translateX(.7rem)}
  .slab__aside{margin-left:calc(var(--rail) + clamp(2rem,5vw,5.5rem))}
  .plinth__grid{grid-template-columns:var(--rail) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:0}
  .plinth__who{padding-right:2rem}
  .plinth__col{padding-left:clamp(2rem,5vw,5.5rem)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .docket__row:hover .docket__main,.docket__row:focus-within .docket__main,
  .docket__row:hover .arrow,.docket__row:focus-within .arrow,
  .slab__link:hover .arrow,.slab__link:focus-visible .arrow,
  .onward__link:hover .arrow{transform:none}
  .onward__link:hover{padding-left:0}
}

@media print{
  :root{--night:#fff;--night-lift:#fff;--bone:#000;--ash:#333;--rule:#bbb;--rule-firm:#777;--acid:#000}
  html,body{background:#fff}
  .lintel,.hop,.slab,.plinth__grid,.ask{display:none}
  .marker{position:static}
}

/* Touch: every tap target at least 44px high */
.lintel__name,.lintel__link,.docket-head a,.docket-head__title{display:inline-flex;align-items:center;min-height:44px}
.lintel__link{padding:0;background-position:0 calc(50% + .8em)}
.capsule{min-height:44px}
@media (max-width:40rem){.lintel{position:static}}

/* Larger name and a mobile menu (no script: a checkbox drives it) */
.lintel__name{font-size:1.3rem}
.lintel__switch,.lintel__burger{display:none}
@media (max-width:40rem){
.lintel{position:relative;flex-wrap:wrap}
.lintel__name{font-size:1.25rem}
.lintel__burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;border-radius:8px}
.lintel__bars{position:relative;display:block;width:24px;height:2px;background:var(--bone);transition:background .2s var(--ease)}
.lintel__bars::before,.lintel__bars::after{content:"";position:absolute;left:0;width:24px;height:2px;background:var(--bone);transition:transform .25s var(--ease)}
.lintel__bars::before{top:-7px}
.lintel__bars::after{top:7px}
.lintel__switch{display:block;position:absolute;top:.7rem;right:calc(var(--gutter) - 10px);z-index:2;width:44px;height:44px;margin:0;opacity:0;cursor:pointer}
.lintel__switch:focus-visible + .lintel__burger{outline:2px solid var(--acid);outline-offset:2px}
.lintel__switch:checked + .lintel__burger .lintel__bars{background:transparent}
.lintel__switch:checked + .lintel__burger .lintel__bars::before{transform:translateY(7px) rotate(45deg)}
.lintel__switch:checked + .lintel__burger .lintel__bars::after{transform:translateY(-7px) rotate(-45deg)}
.lintel__nav{display:none;flex:1 0 100%;margin-top:.6rem;padding-bottom:.9rem;border-top:1px solid var(--rule)}
.lintel__switch:checked ~ .lintel__nav{display:block}
.lintel__list{flex-direction:column;align-items:stretch;gap:0}
.lintel__list li{border-bottom:1px solid var(--rule)}
.lintel__list li:last-child{margin:1rem 0 0;border-bottom:0}
.lintel__link{display:flex;min-height:3.5rem;font-size:1.3rem;letter-spacing:-.02em;color:var(--bone);background:none}
.lintel .capsule{display:flex;justify-content:center;padding:.85em 1.2em;font-size:1rem}
}

/* hire page: button under the lede */
.opening__action{margin:clamp(1.5rem,3vw,2.25rem) 0 0}
.capsule--large{max-width:100%;white-space:normal}

/* hire page: the numbered process */
.stages{max-width:calc(var(--measure) + 6rem);margin:0;padding:0;list-style:none;counter-reset:stage;border-top:1px solid var(--rule)}
.stages__item{counter-increment:stage;display:grid;grid-template-columns:2.6rem minmax(0,1fr);padding:1.35rem 0;border-bottom:1px solid var(--rule)}
.stages__item::before{content:counter(stage,decimal-leading-zero);padding-top:.45em;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;color:var(--acid)}
.stages__entry{min-width:0}
.stages__name{font-size:1.12em;font-weight:500;line-height:1.25;letter-spacing:-.02em}
.stages__what{max-width:var(--measure);margin:.45rem 0 0;color:var(--ash);font-size:.97em}
.stages__note{max-width:var(--measure);margin:1.5rem 0 0;color:var(--ash);font-size:.97em}

/* hire page: questions and answers, always visible */
.queries{max-width:calc(var(--measure) + 6rem);border-top:1px solid var(--rule)}
.queries__item{padding:1.5rem 0 1.6rem;border-bottom:1px solid var(--rule)}
.queries__ask{font-size:1.22em;font-weight:500;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.queries__reply{max-width:var(--measure);margin:.7rem 0 0;color:var(--ash)}
.queries__reply a{color:var(--bone)}

/* enquiry form: the line above it */
.ask__intro{max-width:var(--measure);margin:0 0 2.5rem}

@media (min-width:60rem){
  .opening__action{margin-left:calc(var(--rail) + clamp(2rem,5vw,5.5rem))}
}

/* outline button, and a row of buttons under a lede */
.capsule--outline{background:transparent;color:var(--acid)}
.capsule--outline:hover{color:var(--night)}
.opening__action{display:flex;flex-wrap:wrap;gap:.75rem 1rem}

/* project pages: a two-column ledger of names and notes */
.ledger{max-width:calc(var(--measure) + 6rem);margin:0;border-top:1px solid var(--rule)}
.ledger__row{display:grid;gap:.25rem 1.5rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
.ledger__key{font-weight:500;letter-spacing:-.015em}
.ledger__key code{font-family:var(--mono);font-size:.8125rem;font-weight:400;letter-spacing:0;color:var(--acid)}
.ledger__note{margin:0;color:var(--ash);font-size:.97em}
.ledger__note a{color:var(--bone)}
.ledger__title{margin:2.4rem 0 1rem;font-size:1.22em;line-height:1.2;letter-spacing:-.02em}

/* project pages: a code sample that scrolls inside its own box */
.snippet{max-width:calc(var(--measure) + 6rem);margin:0 0 1rem;padding:1.1rem 1.25rem;overflow-x:auto;border:1px solid var(--rule-firm);border-left-color:var(--acid);background:var(--night-lift);font-family:var(--mono);font-size:.8125rem;line-height:1.65;color:var(--bone);-webkit-overflow-scrolling:touch}
.snippet code{font:inherit}
.snippet__lead{max-width:var(--measure);margin:0 0 1.5rem}
.snippet__caption{max-width:var(--measure);margin:1rem 0 0;color:var(--ash);font-size:.97em}
.snippet__caption a{color:var(--bone)}
.snippet__caption code{font-family:var(--mono);font-size:.875em}

@media (min-width:36rem){
  .ledger__row{grid-template-columns:15rem minmax(0,1fr)}
}
@media (max-width:26rem){
  .capsule--large{padding:.8em 1.15em;font-size:.9375rem}
}

.slab__link{min-height:44px}

/* research notes: declaration of interest, under the summary box */
.interest{max-width:calc(var(--measure) + 6rem);margin:1.25rem 0 0;padding:1.1rem clamp(1.5rem,3.2vw,2.75rem) 1.2rem;border:1px solid var(--rule);color:var(--ash);font-size:.97em}
.interest__title{margin:0 0 .45rem}
.interest p{margin:0}
.interest a{color:var(--bone)}

/* research notes: a table of counts that scrolls inside its own box when it has to */
.scoresheet{margin:1.6rem 0 2rem;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--rule-firm)}
.scoresheet__table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.4}
.scoresheet__table--wide{min-width:35rem}
.scoresheet__caption{caption-side:top;padding:0 0 .9rem;text-align:left;color:var(--ash);font-size:.875rem;line-height:1.5}
.scoresheet__table th,.scoresheet__table td{padding:.7rem 1rem .7rem 0;border-top:1px solid var(--rule);text-align:left;vertical-align:baseline;font-weight:400}
.scoresheet__table th:last-child,.scoresheet__table td:last-child{padding-right:0}
.scoresheet__table thead th{border-top-color:var(--rule-firm);font-family:var(--mono);font-size:.6875rem;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);vertical-align:bottom}
.scoresheet__table .scoresheet__fig{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.scoresheet__table td.scoresheet__fig{font-size:.875rem;white-space:nowrap}
.scoresheet__table tbody+tbody tr:first-child>*{border-top-color:var(--rule-firm)}
.scoresheet__table .scoresheet__sum>*{font-weight:600;background:var(--night-lift)}
.scoresheet__table .scoresheet__sum th{padding-left:.7rem;box-shadow:inset 2px 0 0 var(--acid)}
.scoresheet__hint{margin:1.6rem 0 -1rem}

/* research notes: horizontal bars, one per outcome. Widths are the shares in the table */
.abacus{margin:1.8rem 0 2.2rem}
.abacus__caption{margin:0 0 1rem}
.longread .abacus__rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.longread .abacus__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.5rem 1rem;margin:0;padding:.85rem 0 .95rem;border-bottom:1px solid var(--rule)}
.abacus__label{font-size:.9375rem}
.abacus__kind{margin-left:.45rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);white-space:nowrap}
.abacus__value{font-family:var(--mono);font-size:.875rem;font-variant-numeric:tabular-nums}
.abacus__track{grid-column:1/-1;display:block;height:.85rem;background:var(--night-lift);border-left:1px solid var(--rule-firm)}
.abacus__bar{display:block;height:100%;border:1px solid var(--bone);background:var(--bone)}
.abacus__bar--split{border-color:var(--acid);background:repeating-linear-gradient(135deg,var(--acid) 0 2px,transparent 2px 6px)}
.abacus__bar--none{width:53.7%}
.abacus__bar--one{width:15.6%}
.abacus__bar--two{width:6%}
.abacus__bar--three{width:5.6%}
.abacus__bar--four{width:19.1%}
.abacus__key{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin:1rem 0 0}
.abacus__entry{display:inline-flex;align-items:center;gap:.55rem}
.abacus__chip{flex:none;width:1.4rem;height:.7rem;border:1px solid var(--bone);background:var(--bone)}
.abacus__chip--split{border-color:var(--acid);background:repeating-linear-gradient(135deg,var(--acid) 0 2px,transparent 2px 6px)}

@media (min-width:36rem){
  .longread .abacus__row{grid-template-columns:13rem minmax(0,1fr) 3.75rem;align-items:center}
  .abacus__track{grid-column:2;grid-row:1}
  .abacus__value{grid-column:3;grid-row:1;text-align:right}
}
@media (min-width:40rem){
  .scoresheet__hint{display:none}
}
@media print{
  .scoresheet{overflow:visible}
  .scoresheet__table--wide{min-width:0}
  .scoresheet__hint{display:none}
}