:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#ffffff; --ink:#231b1b; --muted:#6a6060; --line:rgba(35,27,27,.14);
  --blush:#fbeaea; --frame:#f6f1f1;
  --c-blue:#3342d6; --c-gold:#dca84a; --c-maroon:#6b2a2a; --c-mint:#6be08f; --c-magenta:#e832e8;
  --f-display:"Instrument Serif","Times New Roman",Georgia,serif;
  --f-serif:"Newsreader",Georgia,serif; --f-mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --paper:#fbf8f1; --paper-ink:#1b1a17; --paper-muted:#5a564d; --stamp:#2b3fa8; --focus:var(--c-blue);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .18  0 0 0 0 .12  0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --f-body:"Archivo",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#171314; --ink:#f4ecec; --muted:#ab9f9f; --line:rgba(244,236,236,.16);
    --blush:#2a1d20; --frame:#221b1c; --c-maroon:#d98a8a; --c-blue:#7b88ff;
  }
}
:root[data-theme="dark"]{
  --bg:#171314; --ink:#f4ecec; --muted:#ab9f9f; --line:rgba(244,236,236,.16);
  --blush:#2a1d20; --frame:#221b1c; --c-maroon:#d98a8a; --c-blue:#7b88ff;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(72px + env(safe-area-inset-top,0px));scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f-body)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--c-blue);outline-offset:3px;border-radius:4px}
.wrap{width:min(1080px,100% - 40px);margin-inline:auto}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;height:64px}
.nav .name{font:700 15px var(--f-body);text-decoration:none;letter-spacing:.01em}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-size:15px;padding:8px 0;border-bottom:1px solid transparent}
.nav ul a:hover{border-color:currentColor}

/* hero — the one loud thing on the page */
.hero{padding:clamp(40px,8vw,96px) 0 clamp(48px,8vw,110px);text-align:center}
.hero h1{margin:0;font:400 clamp(3.4rem,15.4vw,12.4rem)/.92 var(--f-display);letter-spacing:-.025em;display:flex;justify-content:center}
.hero h1 span{display:inline-block;animation:rise .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes rise{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}

/* about */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,6vw,80px);align-items:center;padding-bottom:clamp(72px,10vw,140px)}
.about .copy{max-width:46ch}
.about p{margin:0 0 1.1em}
.about .lead{font:400 clamp(1.5rem,3vw,2.1rem)/1.25 var(--f-display)}
.about img{width:min(100%,380px);justify-self:center}
.role{margin-top:1.6em;font:italic 400 1.5rem/1.1 var(--f-display)}

/* section heads */
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(32px,5vw,64px);padding-bottom:20px;border-bottom:1px solid var(--line)}
.sec-head h2{margin:0;font:400 clamp(2.6rem,7vw,5rem)/1 var(--f-display);letter-spacing:-.015em}
.sec-head p{margin:0;color:var(--muted);max-width:34ch}

/* tools */
.tools{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,6vw,80px);align-items:center;padding-block:clamp(72px,10vw,140px) clamp(72px,10vw,130px)}
.tools img{width:min(100%,340px);justify-self:center}
.tools h2{margin:0 0 .5em;font:400 clamp(2.2rem,5vw,3.4rem)/1.05 var(--f-display)}
.tools p{margin:0 0 1em;max-width:52ch}
.stackgrid{margin:2em 0 0;display:grid;grid-template-columns:max-content 1fr;gap:10px 28px}
.stackgrid dt{color:var(--muted)}
.stackgrid dd{margin:0}

/* footer */
footer{background:var(--blush);padding:clamp(48px,7vw,88px) 0 calc(40px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px 40px}
.brand{font:400 2rem/1 var(--f-display)}
.brand em{display:block;margin-top:.25em}
footer ul{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0;align-self:end}
footer small{color:var(--muted);align-self:end}

/* lightbox */
dialog{border:0;padding:0;background:transparent;max-width:min(94vw,1200px);max-height:92vh;overflow:visible}
dialog::backdrop{background:rgba(15,10,10,.82)}
dialog img{max-height:88vh;width:auto;max-width:100%;border-radius:10px;margin:auto}
dialog .x{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#231b1b;font-size:22px;line-height:1;cursor:pointer}

@media (max-width:760px){
  .about,.tools{grid-template-columns:1fr}
  .pbody{grid-template-columns:1fr}
  .tab{left:var(--xs);font-size:18px;padding:0 26px;max-width:calc(100% - var(--xs) - 8px)}
  .about img{order:-1;width:min(70%,260px)}
  .tools img{width:min(60%,240px)}
  footer .wrap{grid-template-columns:1fr}
  .nav ul{gap:18px}
}
@media (max-width:600px){.fkind{display:none}}
@media (prefers-reduced-motion:reduce){
  .hero h1 span{animation:none}
  .folders.intro .folder{animation:none}
  html{scroll-behavior:auto}
  .folder .pin,.panel{transition:none}
}
/* folder stack */
.stack{margin-top:64px}
.folder{position:relative;background:var(--c);color:var(--fk);border-radius:14px 14px 0 0}
.folder:last-child{border-radius:14px}
.fh{margin:0;font:inherit}
.head{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:14px;width:100%;height:40px;padding:0 18px;background:none;border:0;border-radius:14px 14px 0 0;cursor:pointer;font:400 12px var(--f-mono);color:inherit;text-align:right}
.head:focus-visible{outline:3px solid var(--fk);outline-offset:-7px}
.tab{position:absolute;left:var(--x);bottom:100%;display:flex;min-width:0;max-width:calc(100% - var(--x) - 8px);height:26px;align-items:center;padding:0 32px;background:var(--c);color:var(--fk);font:400 20px/1 var(--f-display);text-align:left;transition:transform .2s ease;clip-path:polygon(0 100%,14px 100%,26px 0,calc(100% - 26px) 0,calc(100% - 14px) 100%,100% 100%)}
.tab>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.head:hover .tab{transform:translateY(-3px)}
.chev{display:inline-block;font-size:18px;line-height:1;transition:transform .25s ease}
.folder.open .chev{transform:rotate(45deg)}
.panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s ease}
.folder.open .panel{grid-template-rows:1fr}
.panel-inner{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .38s}
.folder.open .panel-inner{visibility:visible;transition-delay:0s}
.panel-body{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,2.4fr) minmax(130px,1fr);gap:24px;padding:10px 18px 48px}
.pmargin{font:400 12px/1.8 var(--f-mono)}
.plead{margin:0;max-width:34ch;font:400 clamp(24px,2.8vw,32px)/1.2 var(--f-display)}
.pabout p{margin:0 0 1em;max-width:56ch;font:400 20px/1.6 var(--f-serif)}
.pact{display:flex;align-items:flex-end;justify-content:flex-end}
.btn{background:none;border:1px solid currentColor;color:inherit;padding:10px 16px;border-radius:999px;font:500 12px var(--f-mono);cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--fk);color:var(--c)}
.btn:focus-visible{outline:3px solid var(--fk);outline-offset:3px}
.clist{list-style:none;margin:0;padding:0;max-width:520px;font:400 14px var(--f-mono)}
.clist li{display:flex;gap:20px;padding:10px 0;border-bottom:1px solid rgba(128,128,128,.5);border-bottom-color:color-mix(in srgb,currentColor 35%,transparent)}
.clist .cl{min-width:84px;opacity:.85}
.panel a{color:inherit;text-underline-offset:3px}
.off{opacity:.65}
.stack.intro .folder{animation:frise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*60ms)}
@keyframes frise{from{opacity:0;transform:translateY(46px)}}

/* dossier */
.dossier{padding-bottom:40px}
.dossier.enter .board{animation:slideup .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes slideup{from{opacity:0;transform:translateY(32px)}}
.dos-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin:0 0 34px}
h1:focus{outline:none}
.board{position:relative;margin-right:46px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(16px,3vw,40px);align-items:start;padding:clamp(16px,3vw,36px);background:var(--c);color:var(--fk);border-radius:14px}
.left{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.drag{position:relative;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg));cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.drag.dragging{cursor:grabbing}
@media (pointer:coarse){.drag{touch-action:auto}}
.pink{width:100%;margin-right:-48px;padding:28px 28px 24px;background:#eba3b6;color:#2a1119;box-shadow:0 14px 30px rgba(0,0,0,.28)}
.pink h3{margin:0 0 14px;font:italic 400 clamp(34px,3.6vw,46px)/1 var(--f-display)}
.pink ul{list-style:none;margin:0;padding:0;font:400 17px/1.45 var(--f-serif)}
.pink li{padding:10px 0;border-top:1px solid rgba(42,17,25,.28)}
.noteW{width:250px;max-width:100%;margin:-34px 0 0 36px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.32))}
.note{padding:34px 20px 24px;background:#f8d94a;color:#16130f;font:400 12px/1.7 var(--f-mono);clip-path:polygon(0 7%,5% 3%,10% 8%,16% 2%,22% 7%,29% 3%,35% 8%,42% 2%,49% 7%,56% 3%,63% 8%,70% 2%,77% 7%,84% 3%,91% 8%,100% 4%,100% 100%,0 100%)}
.note h3{margin:0 0 10px;font:500 22px/1 var(--f-mono)}
.note ul{list-style:none;margin:0;padding:0}
.note li{padding:6px 0;border-top:1px dashed rgba(22,19,15,.45)}
.note a{color:inherit;text-underline-offset:3px}
.note em{display:block;font-style:normal;opacity:.6}
.clip{position:absolute;top:-14px;right:20px;z-index:2;pointer-events:none}
.paper{position:relative;z-index:1;display:grid;grid-template-columns:130px minmax(0,1fr);gap:28px;padding:38px 36px 48px 66px;background-color:var(--paper);background-image:var(--grain);color:var(--paper-ink);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.holes{position:absolute;left:20px;top:30px;bottom:30px;width:14px;background:radial-gradient(circle,var(--c) 0 5px,transparent 5.5px) center top/14px 68px repeat-y}
.margin{padding-top:46px;font:400 11.5px/1.8 var(--f-mono);color:var(--paper-muted)}
.pbd{position:relative;min-width:0}
.tagbox{position:absolute;top:0;right:0;padding:3px 8px;border:1px solid var(--stamp);color:var(--stamp);font:400 11px var(--f-mono)}
.paper h2{margin:44px 0 26px;font:italic 400 clamp(36px,4.6vw,58px)/1.02 var(--f-display);letter-spacing:-.005em}
.paper p{margin:0 0 1.1em;max-width:58ch;font:400 19px/1.7 var(--f-serif)}
.stamp{position:absolute;right:30px;bottom:26px;width:100px;height:100px;color:var(--stamp);opacity:.82;transform:rotate(-14deg);mix-blend-mode:multiply;pointer-events:none}
.sidetabs{position:absolute;right:-46px;top:64px;display:flex;flex-direction:column;gap:10px}
.stab{display:flex;justify-content:center;width:46px;padding:20px 0;border:0;border-radius:0 14px 14px 0;background:var(--tc);color:var(--tk);cursor:pointer;font:400 20px/1 var(--f-display);transition:transform .2s ease}
.stab span{writing-mode:vertical-rl}
.stab:hover{transform:translateX(4px)}
.stab:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.pn{display:none;gap:10px;margin-top:14px;flex-wrap:wrap}
.pn button{flex:1 1 200px;padding:14px 16px;border:0;border-radius:10px;background:var(--tc);color:var(--tk);font:500 12px var(--f-mono);cursor:pointer;text-align:left}


@media (max-width:900px){
  .board{grid-template-columns:1fr;margin-right:0}
  .pink{margin-right:0}
  .noteW{margin:-22px 0 22px 16px}
  .paper{grid-template-columns:1fr;gap:6px;padding:30px 20px 120px 46px}
  .holes{left:14px}
  .margin{padding-top:0;display:flex;flex-wrap:wrap;gap:2px 14px;margin-bottom:6px}
  .paper h2{margin-top:36px}
  .sidetabs{display:none}
  .pn{display:flex}
  .panel-body{grid-template-columns:1fr;gap:14px;padding:6px 16px 48px}
  .pact{justify-content:flex-start}
}
@media (max-width:600px){
  .tab{left:var(--xs);font-size:18px;padding:0 26px}
  .logo span{display:none}
  .navlink,.nav-r button{padding:9px 7px}
  .stack{margin-top:56px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

*{border-radius:0!important}
[hidden]{display:none!important}
.crumbs{margin:30px 0 10px;font:400 12px var(--f-mono);color:var(--muted)}
.crumb-link{background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px}
.dossier h1{margin:0;font:400 clamp(56px,10vw,124px)/.92 var(--f-display);letter-spacing:-.015em}
.dossier{padding-bottom:60px}
#dossier{display:none}
body.on-file #dossier{display:block}
body.on-file main>section:not(#dossier),body.on-file footer{display:none}
.stab{clip-path:polygon(0 0,100% 14px,100% calc(100% - 14px),0 100%)}
.pshot{display:block;width:100%;max-width:58ch;margin:1.6em 0 0;padding:0;border:2px solid var(--c);background:#fff;cursor:zoom-in}
.pshot img{width:100%}
.pbtn{border:1px solid currentColor}

.tagline{margin:26px 0 0;font:400 clamp(13px,2vw,17px) var(--f-mono);color:var(--muted)}
.tagline b{color:var(--c-blue);font-weight:500}
.cur{display:inline-block;width:.6em;height:1.1em;background:var(--ink);vertical-align:-.2em;margin-left:4px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.codecard{margin:1.8em 0 0;background:#0f1115;color:#d7dae0;border-left:4px solid var(--c-blue);font:400 13.5px/1.75 var(--f-mono);overflow-x:auto}
.codecard .bar{display:flex;gap:6px;padding:10px 14px;background:#191c22}
.codecard .bar i{width:9px;height:9px;background:#454b57}
.codecard pre{margin:0;padding:14px 18px 18px}
.codecard .k{color:#c792ea}.codecard .s{color:#c3e88d}.codecard .p{color:#82aaff}.codecard .c{color:#6b7280}
.ghbtn{display:inline-block;margin-top:1.4em;padding:11px 20px;border:2px solid var(--ink);text-decoration:none;font:500 14px var(--f-mono)}
.ghbtn:hover{background:var(--ink);color:var(--bg)}
@media (prefers-reduced-motion:reduce){.cur{animation:none}}
.pshot.tall{max-width:240px}

/* LogoLoop (vanilla port of React Bits LogoLoop) */
.loopband{padding:0 0 clamp(56px,8vw,96px);overflow:hidden}
.logoloop{position:relative;width:100%;--logoloop-gap:48px;--logoloop-logoHeight:40px;--logoloop-fadeColor:var(--bg);padding:6px 0}
.logoloop__track{display:flex;width:max-content;will-change:transform;user-select:none;position:relative;z-index:0}
.logoloop__list{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.logoloop__item{flex:0 0 auto;margin-right:var(--logoloop-gap);line-height:1}
.tl{display:inline-flex;align-items:center;gap:12px;font:500 18px var(--f-mono);color:var(--ink);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.tl svg{flex:none;display:block}
.tl i{width:var(--logoloop-logoHeight);height:var(--logoloop-logoHeight);display:grid;place-items:center;background:var(--b);color:var(--f);font:700 14px var(--f-mono);font-style:normal}
.logoloop--scale-hover .logoloop__item:hover .tl{transform:scale(1.2)}
.logoloop--fade::before,.logoloop--fade::after{content:'';position:absolute;top:0;bottom:0;width:clamp(24px,8%,120px);pointer-events:none;z-index:10}
.logoloop--fade::before{left:0;background:linear-gradient(to right,var(--logoloop-fadeColor) 0%,rgba(0,0,0,0) 100%)}
.logoloop--fade::after{right:0;background:linear-gradient(to left,var(--logoloop-fadeColor) 0%,rgba(0,0,0,0) 100%)}
@media (prefers-reduced-motion:reduce){.logoloop__track{transform:none!important}.logoloop{overflow-x:auto}}

/* engineering approach */
.eng{padding:clamp(48px,8vw,104px) 0}
.eng-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:clamp(20px,3vw,32px)}
.eng-card{border-top:2px solid var(--ink);padding:18px 0 8px;display:flex;flex-direction:column;gap:14px}
.eng-n{font:400 12px var(--f-mono);color:var(--muted);letter-spacing:.08em}
.eng-card h3{margin:0;font:400 clamp(1.7rem,3vw,2.2rem)/1.05 var(--f-display);letter-spacing:-.01em}
.eng-card p{margin:0;max-width:52ch}
.eng-flow{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0;padding:0;list-style:none;counter-reset:s}
.eng-flow li{counter-increment:s;background:var(--frame);padding:8px 18px 8px 14px;font:500 12.5px var(--f-mono);clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%)}
.eng-flow li:last-child{background:var(--ink);color:var(--bg)}
.eng-ev{font-size:.95rem;color:var(--muted)}
.eng-ev b,.eng-why b{color:var(--ink);font-weight:500}
.eng a{color:inherit;text-underline-offset:3px}
.eng a:hover{color:var(--c-blue)}
.eng a:focus-visible,.eng-link:focus-visible{outline:2px solid var(--c-blue);outline-offset:3px}
.eng-diagram{margin:0;display:flex;flex-direction:column;gap:8px}
.eng-diagram figcaption{font:400 12px var(--f-mono);color:var(--muted)}
.eng-node{border:1.5px solid var(--ink);padding:8px 12px;font:500 13px var(--f-mono);background:var(--bg)}
.eng-node small{display:block;font:400 11.5px var(--f-body);color:var(--muted);margin-top:2px}
.eng-root{background:var(--ink);color:var(--bg)}.eng-root small{color:inherit;opacity:.75}
.eng-branches{display:grid;gap:8px;margin-left:16px;padding-left:14px;border-left:1.5px solid var(--ink)}
.eng-sub{margin-top:clamp(56px,8vw,96px)}
.eng-h3{margin:0;font:400 clamp(2.2rem,5vw,3.4rem)/1 var(--f-display);letter-spacing:-.015em}
.eng-evidence{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:clamp(20px,3vw,32px)}
.eng-item{border:1.5px solid var(--ink);padding:clamp(18px,3vw,26px);display:flex;flex-direction:column;gap:14px;background:var(--bg)}
.eng-item header{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.eng-item h4{margin:0;font:400 1.6rem/1.1 var(--f-display)}
.eng-item p{margin:0;font-size:.97rem}
.eng-tag{background:var(--c-blue);color:#fff;font:500 11.5px var(--f-mono);padding:3px 10px;letter-spacing:.04em}
.eng code{font-family:var(--f-mono)}
.eng-code{margin:0;padding:14px 16px;background:var(--frame);border-left:3px solid var(--c-blue);font:400 12.5px/1.7 var(--f-mono);overflow-x:auto}
.eng-code .c{color:var(--muted)}
.eng-pipe{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:6px}
.eng-pipe>span{align-self:center;font-family:var(--f-mono)}
.eng-why{color:var(--muted)}
.eng-link{margin-top:auto;align-self:flex-start;font:500 14px var(--f-mono);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
@media (prefers-color-scheme:dark){.eng-flow li:last-child,.eng-root{background:var(--ink);color:var(--bg)}}
@media (max-width:560px){.nav ul{flex-wrap:wrap;justify-content:flex-end;gap:4px 14px}.nav a{font-size:13px}}

/* engineering: stacked sheets */
.eng-grid{display:block}
.eng-sheet{--ink:var(--paper-ink);--muted:var(--paper-muted);--bg:var(--paper);--frame:#efe9db;position:relative;margin-bottom:20px;background:var(--paper);color:var(--paper-ink);box-shadow:0 -12px 28px rgba(0,0,0,.10)}
.eng-band{height:54px;box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:0 clamp(16px,3vw,28px);background:var(--c);color:var(--k)}
.eng-band h3{margin:0;font:400 clamp(1.25rem,2.4vw,1.7rem)/1 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eng-band .eng-n{color:inherit;opacity:.8}
.eng-body{padding:clamp(20px,3.5vw,36px) clamp(16px,3vw,28px) clamp(24px,4vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:16px clamp(24px,5vw,64px);align-items:start}
.eng-body>p:first-child{grid-column:1;grid-row:1/span 4;font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:none}
.eng-body>:not(:first-child){grid-column:2}
@media (max-width:760px){.eng-body{grid-template-columns:1fr}.eng-body>p:first-child{grid-row:auto}.eng-body>:not(:first-child){grid-column:1}}
@media (min-width:900px) and (min-height:720px){.eng-sheet{position:sticky;top:calc(76px + var(--i)*54px)}}
/* hero title in the project colors */
.l1{color:#7a1149}
.l2{color:#f0601f}
.l3{color:#0e7a5a}
.l4{color:#d92f1c}
.l5{color:#5a2587}
.l6{color:#1f44d6}
.l7{color:#e0679b}
.l8{color:#7a1149}
.l9{color:#f0601f}
@media (prefers-color-scheme:dark){.hero h1 span{filter:brightness(1.55)}}


/* mascot beside Technical Evidence */
.eng-sub{position:relative;display:block!important;padding-right:clamp(0px,22vw,230px)}
.eng-sub>p{margin-top:10px}
.eng-mascot{position:absolute;right:0;bottom:0;width:clamp(120px,19vw,200px);height:auto;pointer-events:none}
@media (max-width:700px){.eng-sub{padding-right:0;padding-top:110px}.eng-mascot{width:110px;top:0;bottom:auto}}
footer a{display:inline-flex;align-items:center;gap:8px}
footer .fi{flex:none}