/* ============ tokens ============ */
:root{
  --paper:#F0EDE6;
  --sheet:#FFFFFF;
  --ink:#16130F;
  --ink-2:#4A433B;
  --ink-3:#857C70;
  --teal:#1D5A52;
  --rule:#D9D3C7;
  --night:#14110E;

  --display:"Instrument Serif",Georgia,serif;
  --body:"Figtree",system-ui,-apple-system,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;

  --gut:clamp(1.25rem,4vw,4rem);
  --maxw:78rem;
}
/* Light palette only. The diagrams carry fixed colours, so the page does not
   follow the OS dark preference. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px;border-radius:2px;
}
/* headings are focused programmatically after navigation; the .flash wash is the
   visual cue, so suppress the ring there */
h2[tabindex]:focus,h2[tabindex]:focus-visible,
h4[tabindex]:focus,h4[tabindex]:focus-visible{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============ type ============ */
.d1,.d2,.d3{font-family:var(--display);font-weight:400;letter-spacing:-.012em;line-height:1.02}
.d1{font-size:clamp(2.9rem,7.4vw,5.6rem)}
.d2{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.06}
.d3{font-size:clamp(1.6rem,2.9vw,2.3rem);line-height:1.12}
.d1 em,.d2 em,.d3 em{font-style:italic;color:var(--teal)}
.hero-body .d1 em{font-size:.7em;display:inline-block;line-height:1.04;margin-top:.22em}
.lab{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.lede{font-size:1.0625rem;line-height:1.62;color:var(--ink-2);max-width:34rem}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.band{padding-block:clamp(3.5rem,7vw,6.5rem)}
.band + .band{border-top:1px solid var(--rule)}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--body);font-size:.9375rem;font-weight:600;
  padding:.72rem 1.2rem;border-radius:999px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;
  transition:transform .14s ease,background .14s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* ============ hero ============ */
.hero{display:grid;grid-template-columns:minmax(0,38%) minmax(0,62%);min-height:min(92vh,56rem)}
.hero-art{position:relative;background:var(--night);overflow:hidden}
.hero-art picture{display:block;width:100%;height:100%}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
[hidden]{display:none !important}
.hero-art .ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.6rem;text-align:center;
  color:#8C8375;padding:2rem;
}
.hero-art .ph span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase}
.hero-body{
  background:var(--paper);
  padding:clamp(2rem,5vw,4.5rem) clamp(1.25rem,4vw,4rem) clamp(2.5rem,5vw,4rem);
  display:flex;flex-direction:column;justify-content:center;
}
.status{display:inline-flex;align-items:flex-start;gap:.5rem;margin-bottom:1.6rem}
.status .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--teal);margin-top:.42rem;flex:0 0 auto}
.hero h1{margin:0 0 1.2rem}
.hero .lede{margin:0 0 1.7rem}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;margin-bottom:2.6rem}
.cta-alt{
  font-family:var(--body);font-size:.9375rem;font-weight:600;
  color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:.15rem;
}
.cta-alt span{font-size:.9em}
.cta-alt:hover{color:var(--ink);border-bottom-color:var(--ink)}

.xp{border-top:1px solid var(--rule);padding-top:1.1rem}
.xp-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.4rem}
.xp-row{
  display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--rule);
}
.xp-row:last-child{border-bottom:none}
.xp-when{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);padding-top:.15rem}
.xp-what b{font-weight:600;font-size:.9375rem}
.xp-what span{display:block;color:var(--ink-2);font-size:.875rem}

/* ============ marquee ============ */
.strip{border-block:1px solid var(--rule);overflow:hidden;background:var(--paper)}
.strip-track{display:flex;gap:2.5rem;align-items:center;padding:1rem 0;width:max-content;animation:slide 44s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none}.strip{overflow-x:auto}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip-item{display:flex;align-items:baseline;gap:.6rem;white-space:nowrap}
.strip-item .n{font-family:var(--display);font-size:1.5rem}
.strip-item .t{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.strip-dot{width:.3rem;height:.3rem;border-radius:50%;background:var(--rule);flex:0 0 auto}

/* ============ ask ============ */
.ask-band{background:var(--sheet)}
.ask-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.6rem}
.ask-row{display:flex;align-items:baseline;gap:.9rem;border-bottom:1.5px solid var(--teal);padding-bottom:.5rem;max-width:40rem}
.ask-row input{
  flex:1 1 auto;min-width:0;background:transparent;border:0;padding:.2rem 0;
  font-family:var(--display);font-size:clamp(1.3rem,2.6vw,1.85rem);color:var(--ink);
}
.ask-row input::placeholder{color:var(--ink-3);font-style:italic}
.ask-row input:focus{outline:none}
.ask-row button{
  flex:0 0 auto;background:none;border:0;cursor:pointer;color:var(--teal);
  font-family:var(--body);font-weight:600;font-size:.9375rem;padding:.2rem;
}
.ask-note{margin:.8rem 0 0;font-size:.875rem;color:var(--ink-3);max-width:38rem;line-height:1.55}
.ask-starters{margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.45rem}
.ask-starters button{
  font-family:var(--body);font-size:.8125rem;cursor:pointer;
  background:transparent;border:1px solid var(--rule);border-radius:999px;
  padding:.38rem .8rem;color:var(--ink-2);
}
.ask-starters button:hover{border-color:var(--teal);color:var(--teal)}
.ask-answer{margin-top:1.8rem;max-width:44rem}
.ask-answer:empty{display:none}
.ask-card{border-left:2px solid var(--teal);padding-left:1.2rem}
.ask-card .asked{margin:0 0 .5rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.ask-card .ans{margin:0 0 1rem;font-size:1.0625rem;line-height:1.62}
.ask-card .srcs,.ask-card .related{margin:0;font-size:.8125rem;color:var(--ink-3);line-height:2.1}
.ask-card .related{margin-top:.4rem}
.ask-card .srcs a{color:var(--teal);margin-right:1rem;text-underline-offset:.2em}
.ask-card .related button{
  font-family:var(--body);font-size:.8125rem;cursor:pointer;background:none;
  border:0;border-bottom:1px solid var(--rule);color:var(--teal);padding:0;margin-right:.9rem;
}
.no-js .ask-wrap{display:none}

/* ============ work cards ============ */
.sec-head{margin-bottom:2.4rem;max-width:46rem}
.sec-head .d2{margin:.6rem 0 .8rem}
.work{display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.4rem)}
.wcard{
  display:grid;grid-template-columns:minmax(0,41%) minmax(0,59%);
  background:var(--sheet);border:1px solid var(--rule);border-radius:4px;
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease;
}
.wcard:nth-child(even){grid-template-columns:minmax(0,59%) minmax(0,41%)}
.wcard:nth-child(even) .wcard-text{order:2}
.wcard:nth-child(even) .wcard-art{order:1}
.wcard:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(20,17,14,.07)}
@media (prefers-reduced-motion:reduce){.wcard{transition:none}.wcard:hover{transform:none}}
.wcard-text{padding:clamp(1.5rem,2.6vw,2.4rem);display:flex;flex-direction:column}
.wcard-text .d3{margin:.65rem 0 .6rem}
.wcard-text p{margin:0;color:var(--ink-2);font-size:.9375rem;line-height:1.6}
.wcard-result{margin-top:auto;padding-top:1.8rem}
.wcard-result .n{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.05;display:block}
.wcard-result .n small{font-size:.5em;font-family:var(--body);font-weight:500;color:var(--ink-2)}
.wcard-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}
.tag{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:999px;padding:.3rem .6rem;color:var(--ink-3)}
.wcard-art{background:var(--paper);display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden}
.wcard-art.dark{background:#14110E}
.wcard-art svg{width:100%;height:auto;color:var(--ink)}
.wcard-open{margin-top:1.2rem;font-size:.875rem;font-weight:600;color:var(--teal)}

/* ============ about ============ */
.about{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.about-art{border:1px solid var(--rule);background:var(--sheet);aspect-ratio:4/5;overflow:hidden;position:relative}
.about-art img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.about-art .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink-3);padding:1rem}
.about-cap{display:flex;justify-content:space-between;gap:1rem;margin-top:.6rem}
.stats{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);margin:2rem 0 1.8rem}
.stat .n{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1}
.stat .lab{display:block;margin-top:.3rem}
.facts{border-top:1px solid var(--rule)}
.fact{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--rule);align-items:baseline}
.fact .lab{padding-top:.1rem}
.fact .v{font-size:.9375rem}
.fact .v b{font-weight:600}
.fact .v span{color:var(--ink-3)}

/* ============ recommendations ============ */
.recs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.4rem}
.rec{background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:clamp(1.4rem,2.4vw,2rem);display:flex;flex-direction:column}
.rec blockquote{margin:0 0 1.3rem;font-family:var(--display);font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.32}
.rec .who{margin-top:auto;display:flex;flex-direction:column;gap:.15rem}
.rec .who b{font-weight:600;font-size:.9375rem}
.rec .who span{font-size:.8125rem;color:var(--ink-3)}
.rec .rel{margin-top:.7rem}

/* ============ contact ============ */
.contact{max-width:40rem}
.contact-art{background:var(--sheet);border:1px solid var(--rule);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:2rem}
.contact-list{border-top:1px solid var(--rule);margin-top:1.6rem}
.contact-list a{
  display:grid;grid-template-columns:2.5rem 1fr auto;gap:1rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--rule);text-decoration:none;
}
.contact-list a:hover .cl-what{color:var(--teal)}
.cl-what{font-family:var(--display);font-size:1.3rem}
.cl-meta{font-size:.8125rem;color:var(--ink-3)}

/* ============ footer ============ */
.foot{background:var(--night);color:#E9E3D7;padding-block:clamp(2.5rem,5vw,4rem)}
.foot .mega{font-family:var(--display);font-size:clamp(3rem,13vw,10rem);line-height:.92;margin:0 0 1.2rem;color:#E9E3D7}
.foot hr{border:0;border-top:1px solid rgba(233,227,215,.22);margin:0 0 1.6rem}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:1.6rem}
.foot .lab{color:rgba(233,227,215,.55)}
.foot ul{list-style:none;margin:.5rem 0 0;padding:0}
.foot li{margin-bottom:.35rem}
.foot a{color:#E9E3D7;text-decoration:none;font-size:.9375rem}
.foot a:hover{color:#57A294}
.foot-cta p{margin:.55rem 0 1.1rem;font-size:.9375rem;line-height:1.5;color:rgba(233,227,215,.78)}
.foot .btn-dark{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--body);font-size:.9375rem;font-weight:600;
  padding:.62rem 1.15rem;border-radius:999px;
  background:#E9E3D7;color:var(--night);text-decoration:none;
  transition:transform .14s ease;
}
.foot .btn-dark:hover{transform:translateY(-1px);color:var(--night)}
@media (prefers-reduced-motion:reduce){.foot .btn-dark{transition:none}.foot .btn-dark:hover{transform:none}}
.foot .note{margin-top:1.8rem;font-size:.8125rem;color:rgba(233,227,215,.5);max-width:40rem;line-height:1.6}

/* ============ case study views ============ */
.view{display:none}
.view.on{display:block}
.no-js .view{display:block}
#view-home{display:none}
#view-home.on{display:block}
.cs{max-width:42rem;margin:0 auto}
.cs-back{
  display:inline-flex;align-items:center;gap:.35rem;
  margin-bottom:1.6rem;font-size:.875rem;color:var(--teal);text-decoration:none;
}
.cs-back svg{width:.85em;height:.85em;flex:none}
.loopfig{margin:1.6rem 0 1.1rem;max-width:36rem}
.loopfig svg{width:100%;height:auto;display:block}
.cs-back:hover{color:var(--ink)}
.topbar .tb-left{display:flex;align-items:center;gap:.9rem;min-width:0}
.topbar .tb-back{
  display:inline-flex;align-items:center;gap:.3rem;flex:none;
  color:var(--teal);font-size:.875rem;
  border-right:1px solid var(--rule);padding-right:.9rem;
}
.topbar .tb-back svg{width:.85em;height:.85em}
.topbar .tb-back:hover{color:var(--ink)}

/* supporting detail at the end of a case study */
.body .margin-col{
  margin-top:3rem;padding-top:1.7rem;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem;
}
.body .margin-col aside.note{margin:0}
.cs .standfirst{font-size:1.125rem;line-height:1.62;color:var(--ink-2);margin:1rem 0 1.8rem}
.onthispage{border-block:1px solid var(--rule);padding:.9rem 0;margin:0 0 2.4rem;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}
.onthispage a{font-size:.8125rem;color:var(--teal);text-decoration:none;border-bottom:1px solid var(--rule)}
.body{font-size:1.0625rem;line-height:1.68}
.body h4{
  font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1.2;
  margin:2.8rem 0 .8rem;padding-top:1.1rem;border-top:1px solid var(--rule);scroll-margin-top:5.5rem;
}
.body h4:first-child{margin-top:.4rem;border-top:none;padding-top:0}
.body p{margin:0 0 1.05rem}
.body ul{margin:0 0 1.05rem;padding-left:1.15rem}
.body li{margin-bottom:.5rem}
.body .run-in{font-weight:600}
.body code{font-family:var(--mono);font-size:.875em;background:var(--sheet);padding:.1em .35em;border-radius:3px}
.body .pull{
  font-family:var(--display);font-size:1.55rem;line-height:1.26;
  border-left:2px solid var(--teal);padding-left:1.2rem;margin:2rem 0;color:var(--ink);
}
.body aside.note{
  background:var(--sheet);border:1px solid var(--rule);border-left:2px solid var(--teal);
  padding:1rem 1.1rem;margin:1.8rem 0;font-size:.9375rem;line-height:1.55;color:var(--ink-2);
}
.body aside.note b{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal);margin-bottom:.35rem;font-weight:500}

figure.fig{margin:2.2rem 0}
figure.fig.lead-fig{margin:0 0 2.4rem}
figure.fig img{width:100%;height:auto;display:block;background:var(--paper)}
.wcard-art img{width:100%;height:auto;display:block}
figure.fig .scroller{overflow-x:auto}
figure.fig svg{width:100%;height:auto;min-width:34rem;color:var(--ink)}
figure.fig figcaption{margin-top:.9rem;font-size:.875rem;line-height:1.6;color:var(--ink-3)}
figure.matrix{margin:2.2rem 0}
figure.matrix table{width:100%;border-collapse:collapse;font-size:.8125rem;line-height:1.4}
figure.matrix caption{text-align:left;font-size:.875rem;color:var(--ink-3);padding-bottom:.8rem;line-height:1.55}
figure.matrix th,figure.matrix td{border:1px solid var(--rule);padding:.6rem .55rem;vertical-align:top;text-align:left}
figure.matrix thead th{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;border-top:none}
figure.matrix thead th:first-child{border-left:none}
figure.matrix tbody th{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;white-space:nowrap;border-left:none}
figure.matrix td .method{display:block}
figure.matrix td .count{display:block;margin-top:.3rem;color:var(--teal);font-weight:600}
figure.matrix td.empty{color:var(--ink-3);opacity:.5}
figure.matrix figcaption{margin-top:.8rem;font-size:.875rem;color:var(--ink-3);line-height:1.55}

.flash{animation:flash 1.8s ease both}
@keyframes flash{0%{background:rgba(29,90,82,.13)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.flash{animation:none;box-shadow:inset 3px 0 0 var(--teal)}}

/* ============ reveal ============ */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ============ topbar on case views ============ */
.topbar{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem}
.topbar a{text-decoration:none;font-size:.9375rem}
.topbar .nm{font-family:var(--display);font-size:1.25rem}
.topbar nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.topbar nav a{color:var(--ink-2);font-size:.875rem}
.topbar nav a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--teal)}

/* ============ responsive ============ */
@media (max-width:60rem){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-art{aspect-ratio:1/1;max-height:24rem}
  .hero-art img{object-position:50% 12%}
  .wcard,.wcard:nth-child(even){grid-template-columns:1fr}
  .wcard:nth-child(even) .wcard-text{order:1}
  .wcard:nth-child(even) .wcard-art{order:2}
  .about{grid-template-columns:1fr}
  .about-art{max-width:14rem;aspect-ratio:1}
}
@media (max-width:52rem){
  /* narrow screens: the bar carries one job, getting back to the overview */
  .topbar .nm{display:none}
  .topbar nav{display:none}
  .topbar .tb-back{border-right:none;padding-right:0;font-size:.9375rem}
  .topbar .wrap{justify-content:flex-start}
}
@media (max-width:40rem){
  .xp-row{grid-template-columns:5.6rem 1fr;gap:.7rem}
  .fact{grid-template-columns:6.5rem 1fr;gap:.7rem}
  figure.fig figcaption::before{content:"Scroll the diagram sideways. ";color:var(--teal)}
}