/* Benjamin Trost portfolio. One stylesheet, IBM Plex Sans, 4px spacing scale. */
@font-face{font-family:"IBM Plex Sans";font-weight:100 700;font-style:normal;src:url(/assets/fonts/IBMPlexSans-var.woff2) format("woff2");font-display:swap}

:root{
  --font:"IBM Plex Sans",sans-serif;
  --ink:#1d2029;
  --muted:#49505d;
  --soft:#f2f4f7;
  --line:rgba(29,32,41,.12);
  --paper:#fff;
  --night:#0d0f14;
  --accent:#e76d1a;          /* brand orange: display type, shapes, fills */
  --accent-ink:#b8500b;      /* small orange text: 4.9:1 on white. Display type and fills keep --accent */
  --accent-wash:rgba(231,109,26,.12);
  --on-night:rgba(255,255,255,.8);
  --scrim:linear-gradient(90deg,rgba(13,15,20,.92) 0%,rgba(13,15,20,.7) 45%,rgba(13,15,20,.1) 100%);
  --scrim-v:linear-gradient(to bottom,rgba(13,15,20,.7) 0%,rgba(13,15,20,.12) 36%,rgba(13,15,20,.12) 56%,rgba(13,15,20,.8) 100%);
  --lift:0 20px 40px -24px rgba(29,32,41,.35);
  --pad:max(24px,calc((100vw - 1200px)/2.5));    /* content margin, every section but the hero */
  --pad-hero:max(24px,calc((100vw - 1200px)/4)); /* hero text keeps its original inset */
  --pad-edge:max(24px,calc((100vw - 1200px)/2));  /* footer keeps the old margin */
  --hero-ink:#151515;
  --hero-muted:#6b6862;
  --r:12px;
  --r-lg:16px;
  --r-sm:8px;
  --gap:12px;
  --col:32px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--font);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.3;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
.dark :focus-visible,.btn-acc:focus-visible{outline-color:var(--paper)}
a:active,button:active{opacity:.75}
html.no-scroll{overflow:hidden}

/* type */
.h2{font-size:48px;line-height:1.1;font-weight:500;letter-spacing:-.025em}
.h2--center{text-align:center}
.h4{font-size:28px;line-height:1.2;font-weight:500;letter-spacing:-.01em}
.hl{color:var(--accent)}

.pill{display:flex;width:fit-content;align-items:center;gap:8px;font-size:12px;font-weight:600;line-height:1.6;padding:4px 12px 4px 8px;border-radius:100px;background:var(--soft)}
.pill i{width:4px;height:4px;border-radius:50%;background:var(--accent)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:48px;height:72px;padding:0 32px;background:var(--paper);border-bottom:1px solid var(--line);transition:transform .4s var(--ease)}
.nav--hide{transform:translateY(-110%)}
.nav__logo img{height:42px;width:auto}
.nav__links{display:flex;margin-left:auto;gap:32px;font-size:15px;font-weight:500;letter-spacing:.025em;text-transform:uppercase;line-height:1;color:var(--hero-muted)}
.nav__links a{position:relative;padding:6px 0;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent-ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.nav__links a:hover,.nav__links a.is-on{color:var(--accent-ink)}
.nav__links a:hover::after,.nav__links a.is-on::after{transform:scaleX(1)}
.nav__burger{display:none}
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}

/* links and buttons */
.link-arrow{display:inline-flex;flex-direction:column;gap:12px;font-size:20px;line-height:1.3;width:max-content;max-width:100%}
.link-arrow span{display:inline-flex;align-items:center;gap:16px}
.link-arrow span::after{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--arrow-ne) center/contain no-repeat;mask:var(--arrow-ne) center/contain no-repeat;transition:transform .3s var(--ease)}
.link-arrow:hover span::after{transform:translate(2px,-2px)}
.link-arrow__bar{display:block;height:4px;width:100%;border-radius:4px;background:var(--accent);transform:scaleX(.16);transform-origin:0 50%;transition:transform .35s var(--ease)}
.link-arrow:hover .link-arrow__bar{transform:scaleX(1)}
:root{
  --arrow-ne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 12 12 2M4 2h8v8'/%3E%3C/svg%3E");
  --arrow-e:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M1 6h14M10 1l5 5-5 5'/%3E%3C/svg%3E");
}
.btn-dark,.btn-text{display:inline-flex;align-items:center;gap:12px;font-weight:500;font-size:16px}
.btn-dark::after,.btn-text::after{content:"";width:16px;height:12px;background:currentColor;-webkit-mask:var(--arrow-e) center/contain no-repeat;mask:var(--arrow-e) center/contain no-repeat;transition:transform .3s var(--ease)}
.btn-dark{background:var(--hero-ink);color:var(--paper);padding:12px 24px;letter-spacing:.025em;transition:background .25s,color .25s}
.btn-dark:hover{background:var(--accent);color:var(--ink)}
.btn-text{color:var(--hero-muted);transition:color .2s}
.btn-text:hover{color:var(--accent-ink)}
.btn-dark:hover::after,.btn-text:hover::after{transform:translateX(4px)}
.btn-acc{display:inline-block;margin-top:28px;background:var(--accent);color:var(--ink);font-size:20px;font-weight:500;padding:12px 28px;border-radius:100px;white-space:nowrap;transition:transform .25s,background .25s,color .25s}
.btn-acc:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.btn-acc:active{transform:translateY(1px)}

/* hero */
.hero2{position:relative;min-height:100svh;overflow:hidden;background:var(--paper)}
.hero2::before{content:"";position:absolute;left:44vw;top:50%;width:70vw;height:70vw;transform:translate(-30%,-50%);border-radius:50%;background:radial-gradient(circle,var(--soft) 0,var(--paper) 62%);pointer-events:none}
.hero2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:max(18%,150px);z-index:1;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--paper) 35%,transparent) 30%,color-mix(in srgb,var(--paper) 75%,transparent) 60%,color-mix(in srgb,var(--paper) 94%,transparent) 85%,var(--paper) 100%)}
/* image sits on the bottom of the hero (the fade hides its cut edge); width = smaller of 87.8vw and what keeps its 16:9 height under the nav */
.hero2{--hw:min(87.8vw,150svh)}
.hero2__img{position:absolute;left:calc(59.8vw - var(--hw)/2);bottom:0;width:var(--hw);max-width:none;height:auto;will-change:transform}
.hero2__txt{position:absolute;left:max(6.7vw,var(--pad-hero));top:calc(50% - 116px);z-index:2}
.dark,.kd-dark,.feat__txt,.kd-info--ink{--accent-ink:#e76d1a}
.btn-text,.arrow-link{min-height:44px}
.foot__cols a{display:inline-block;padding:13px 0}
.link-arrow{min-height:44px}
.nav__burger{min-width:44px;min-height:44px}
.foot__cols div{gap:0}
.hero2__line{margin-top:20px;max-width:27ch;font-size:18px;line-height:1.45;color:var(--hero-muted);animation:rise .9s .3s var(--ease) both}
.pj__brief{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.pj__brief dt{font-size:12px;font-weight:600;line-height:1.6;color:var(--accent-ink)}
.pj__brief dd{margin-top:4px;font-size:16px;line-height:1.5;max-width:38ch}
@media(max-width:760px){.pj__brief{grid-template-columns:1fr;gap:20px}}
.hero2__label{font-size:14px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--hero-muted);line-height:1.33}
.hero2__name{font-weight:700;font-size:clamp(52px,6.22vw,89.6px);line-height:1;letter-spacing:-.03em;text-transform:uppercase;color:var(--hero-ink);margin-top:24px}
.hero2__name span{display:block;color:var(--accent)}
.hero2__cta{display:flex;align-items:center;gap:16px;margin-top:44px}

/* home sections */
.sec{padding:0 var(--pad)}
.sec-head2{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--col)}
.sec-head2 .h2{margin-top:16px}
.feat{margin-top:140px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:stretch}
.feat__txt{position:relative;isolation:isolate;overflow:hidden;color:var(--paper);background:var(--night);border-radius:var(--r-lg);padding:48px;display:flex;flex-direction:column;justify-content:space-between;min-height:560px}
.feat__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.feat__blur{position:absolute;inset:-10%;z-index:-3;width:120%;height:120%;object-fit:cover;filter:blur(40px) saturate(1.05)}
.feat__txt::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--scrim-v)}
.feat__txt .pill{background:var(--paper);color:var(--ink)}
.feat__txt .h2{margin-top:20px;font-size:64px;letter-spacing:-.03em}
.feat__sub{font-size:24px;line-height:1.2;letter-spacing:-.01em;margin-top:16px}
.feat__p{color:var(--on-night);font-size:18px;line-height:1.4;max-width:440px}
.feat__bottom .link-arrow{margin-top:24px}
.feat__txt :focus-visible{outline-color:var(--paper)}
.feat__img{border-radius:var(--r-lg);overflow:hidden;background:var(--soft);transition:box-shadow .4s}
.feat__img img{width:100%;height:100%;object-fit:cover}
.feat:hover .feat__img{box-shadow:var(--lift)}

.works2{padding-top:152px}
.wgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);margin-top:56px}
.wk{display:block}
.wk__img{position:relative;aspect-ratio:1.18;background:var(--soft);border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center;transition:box-shadow .4s}
.wk__img img{width:76%;height:76%;object-fit:contain}
.wk__img--cover img{width:100%;height:100%;object-fit:cover}
.wk:hover .wk__img{box-shadow:var(--lift)}
.wk__meta{display:flex;justify-content:space-between;align-items:baseline;padding:16px 4px 0}
.wk__meta .h4{transition:color .25s}
.wk:hover .wk__meta .h4{color:var(--accent-ink)}
.wk__meta span{font-size:14px;color:var(--muted)}


.lab{font-size:14px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--hero-muted);line-height:1.33}
.lab--accent{color:var(--accent-ink)}
.corner{display:block;width:28px;height:26px;background:linear-gradient(var(--accent),var(--accent)) left top/28px 4px no-repeat;border-radius:4px}
.prof{padding:152px var(--pad) 0}
.prof__grid{display:grid;grid-template-columns:minmax(0,458px) minmax(0,1fr);gap:96px;align-items:end;margin-top:24px}
.prof__img{aspect-ratio:458/420;overflow:hidden}
.prof__img img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;mix-blend-mode:multiply}
.prof__txt{align-self:center}
.prof__txt h2{font-size:40px;line-height:1.25;font-weight:700;letter-spacing:-.02em;color:var(--hero-ink)}
.prof__txt p{margin-top:16px;max-width:560px;font-size:16px;line-height:1.5;color:var(--hero-muted)}
.meta3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col);margin-top:32px;max-width:640px}
.meta3 dt{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--hero-muted)}
.meta3 dd{font-size:16px;font-weight:500;color:var(--hero-ink);margin-top:4px}
.chipbox{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}
.chipbox span{font-size:14px;font-weight:500;color:var(--hero-muted);background:var(--soft);border-radius:100px;padding:8px 16px}
.prof__rule{margin-top:32px;padding-top:20px}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:500;color:var(--hero-ink)}
.arrow-link::after{content:"";width:16px;height:12px;background:var(--accent);-webkit-mask:var(--arrow-e) center/contain no-repeat;mask:var(--arrow-e) center/contain no-repeat;transition:transform .3s var(--ease)}
.arrow-link:hover::after{transform:translateX(4px)}

.ab{padding:120px var(--pad) 0}
.ab__head{padding-bottom:24px;border-bottom:1px solid var(--line)}
.ab__head h1{font-size:80px;line-height:1.1;font-weight:700;letter-spacing:-.03em;color:var(--hero-ink);margin-top:8px}
.ab__grid{display:grid;grid-template-columns:minmax(0,445px) minmax(0,1fr);gap:96px;margin-top:64px;align-items:start}
.ab__img{aspect-ratio:445/480;overflow:hidden;margin-top:24px}
.ab__img img{width:100%;height:100%;object-fit:cover;object-position:50% 36%;mix-blend-mode:multiply}
.meta2{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;margin-top:32px}
.meta2 dt{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--hero-muted)}
.meta2 dd{font-size:16px;font-weight:500;color:var(--hero-ink);margin-top:4px}
.ab__txt h2{font-size:18px;font-weight:600;color:var(--hero-ink);line-height:1.5}
.ab__txt h2:not(:first-child){margin-top:40px}
.ab__txt p{margin-top:16px;font-size:16px;line-height:1.6;color:var(--hero-muted);max-width:590px}
.principles{margin-top:24px}
.principles li{display:grid;grid-template-columns:32px 1fr;gap:0;padding:16px 0;border-bottom:1px solid var(--line)}
.principles li:first-child{padding-top:0}
.principles li:last-child{border-bottom:0}
.principles b{font-size:14px;font-weight:700;color:var(--accent-ink);padding-top:2px}
.principles strong{display:block;font-size:16px;font-weight:600;color:var(--hero-ink)}
.principles span{display:block;font-size:16px;line-height:1.5;color:var(--hero-muted);margin-top:4px}
.ab__txt .arrow-link{margin-top:32px}
.ab__sec{margin-top:96px}
.ab__sec h2{font-size:24px;line-height:1.3;font-weight:700;letter-spacing:-.02em;color:var(--hero-ink);margin-top:16px}
.skills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col);margin-top:32px}
.skills h3{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--hero-ink)}
.skills li{font-size:16px;line-height:1.5;color:var(--hero-muted);margin-top:8px}
.skills li:first-of-type{margin-top:16px}
.edu{margin-top:32px;border-top:1px solid var(--line)}
.edu__row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--col);padding:32px 0;border-bottom:1px solid var(--line)}
.edu__row strong{display:block;font-size:16px;font-weight:600;color:var(--hero-ink)}
.edu__row small{display:block;font-size:14px;line-height:1.5;color:var(--accent-ink);margin-top:4px}
.edu__row p{font-size:16px;line-height:1.5;color:var(--hero-muted);max-width:560px}

.cta2{display:flex;flex-direction:column;align-items:center;text-align:center;padding:220px var(--pad) 0}
.cta2 .h2{margin-top:24px;max-width:520px}
.cta2__links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 32px;margin-top:20px}
.cta2 p{margin-top:20px;max-width:380px;color:var(--muted);font-size:20px;line-height:1.4}

.foot{padding:200px var(--pad) 28px}
.foot__top{display:flex;justify-content:space-between;align-items:flex-start}
.foot__top img{height:48px;width:auto}
.foot__top p{margin-top:20px;color:var(--muted);font-size:16px}
.foot__cols{display:grid;grid-template-columns:392px 104px;font-size:14px;font-weight:600}
.foot__cols div{display:flex;flex-direction:column;gap:8px}
.foot__cols a:hover{color:var(--accent-ink)}
.foot__bottom{display:flex;justify-content:space-between;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}

/* project pages */
.pj,.listing{padding:160px var(--pad) 0}
.pj__top{display:flex;justify-content:space-between;gap:var(--col);align-items:flex-start}
.pj__title{font-size:64px;line-height:1.1;font-weight:600;letter-spacing:-.03em}
.pj__sub{font-size:20px;line-height:1.4;color:var(--muted);margin-top:20px;max-width:440px}
.pj__meta{display:flex;gap:44px;flex-wrap:wrap;margin-top:56px}
.pj__meta small{display:block;font-size:12px;font-weight:600;line-height:1.6;color:var(--accent-ink)}
.pj__meta span{font-size:16px}
.pj__cover{margin-top:56px;border-radius:var(--r-lg);overflow:hidden;background:var(--soft);aspect-ratio:var(--ar,16/9)}
.pj__cover img{width:100%;height:100%;object-fit:cover}
.pj__cover--contain img{object-fit:contain;padding:3%}
.listing .pj__title{max-width:720px}

.ch{padding-top:152px}
.ch--row{display:grid;grid-template-columns:minmax(300px,500px) minmax(0,880px);justify-content:space-between;gap:var(--col);align-items:start}
.ch--flip{grid-template-columns:minmax(0,880px) minmax(300px,500px)}
.ch--flip .ch__txt{order:2}
.ch__txt{max-width:500px}
.ch__txt h2{font-size:36px;line-height:1.1;font-weight:500;letter-spacing:-.02em}
.ch__txt .tag{font-size:14px;font-weight:600;color:var(--accent-ink);margin-top:12px}
.ch__txt p{font-size:20px;line-height:1.4;color:var(--muted);margin-top:20px}
.ch__txt p.note{font-size:16px;margin-top:16px}
.ch__txt blockquote{position:relative;font-size:28px;line-height:1.2;letter-spacing:-.02em;font-weight:500;margin-top:32px;padding-top:24px}
.ch__txt blockquote::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;background:var(--accent)}
.ch__after{margin-top:56px}
.ch__after>.m{max-width:1000px}
.ch__stack{margin-top:56px;display:grid;gap:var(--gap);max-width:1000px}

.m{border-radius:var(--r);overflow:hidden;background:var(--soft)}
.m img,.m video{width:100%;height:auto;display:block}
.m--c{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3}
.m--c img{width:auto;height:auto;max-width:90%;max-height:90%;object-fit:contain;padding:0}
.m--t{display:flex;align-items:center;justify-content:center;padding:6%}
.m--t img{width:100%;height:auto;max-height:560px;object-fit:contain}
.gal:has(.m--t){align-items:stretch}
.cmp .m--t{aspect-ratio:1;padding:0}
.cmp .m--t img{width:auto;max-width:84%;max-height:84%}
.m--tall{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4}
.m--tall img{width:auto;height:auto;max-width:86%;max-height:88%;object-fit:contain}
.gal{display:grid;gap:var(--gap);align-items:start}
.gal--1{grid-template-columns:minmax(0,1fr)}.gal--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.gal--3{grid-template-columns:repeat(3,minmax(0,1fr))}.gal--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gal:not(.gal--flex) .m:not(.m--t):not(.m--tall):not(.m--frame) img{width:auto;max-width:100%;height:auto;max-height:640px;margin-inline:auto}

.spec{margin-top:56px;border-bottom:1px solid var(--line)}
.spec__row{display:grid;grid-template-columns:256px minmax(0,1fr);gap:var(--col);padding:20px 0;border-top:1px solid var(--line)}
.spec__row small{font-size:12px;font-weight:600;color:var(--accent-ink);padding-top:4px}
.spec__row span{font-size:20px;line-height:1.3}
.cmp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:56px}
.cmp--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cmp--6{grid-template-columns:repeat(3,minmax(0,1fr))}
.cmp article{background:var(--soft);border-radius:var(--r-sm);padding:24px;display:flex;flex-direction:column;gap:8px}
.cmp article.is-me{background:var(--ink);color:var(--paper)}
.cmp article.is-me b{color:var(--accent)}
.cmp h3{font-size:20px;font-weight:500;letter-spacing:-.01em}
.cmp b{font-weight:500;font-size:28px;letter-spacing:-.03em}
.cmp small{font-size:12px;font-weight:600;color:var(--accent-ink)}
.cmp article.is-me small{color:var(--accent)}
.cmp li{font-size:14px;line-height:1.4;padding:4px 0}
.cmp p{font-size:14px;line-height:1.4;color:var(--muted)}
.cmp .m{margin-bottom:8px;background:var(--paper)}
.cmp--2 .m{aspect-ratio:1.6}
.cmp--2 .m img{width:100%;height:100%;object-fit:cover}
.cmp--2 p{font-size:16px}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:56px}
.cols3 article{background:var(--soft);border-radius:var(--r-sm);padding:28px;min-height:224px}
.cols3 h3{font-size:20px;font-weight:500;margin-bottom:16px;color:var(--accent-ink)}
.cols3 li{font-size:16px;line-height:1.4;color:var(--muted);padding:4px 0}
.sw{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px}
.sw div{text-align:center;font-size:12px}
.sw i{display:block;width:56px;height:56px;border-radius:50%;margin-bottom:8px;box-shadow:inset 0 0 0 1px var(--line)}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:40px}
.quotes q{position:relative;display:block;font-size:18px;line-height:1.4;padding:48px 24px 24px;border-radius:var(--r-sm);background:var(--soft);quotes:none}
.quotes q::before{content:"";position:absolute;left:24px;top:24px;width:12px;height:12px;background:var(--accent)}

.dark{background-image:var(--scrim),var(--bg);position:relative;border-radius:var(--r-lg);overflow:hidden;color:var(--paper);background-color:var(--night);background-size:100% 100%,auto 100%;background-position:center,right center;background-repeat:no-repeat;padding:72px;min-height:560px;display:flex;flex-direction:column;justify-content:flex-end}
.dark h2{font-size:44px;line-height:1.1;font-weight:500;letter-spacing:-.02em;max-width:560px}
.dark p{font-size:20px;line-height:1.4;color:var(--on-night);max-width:560px;margin-top:20px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px;max-width:640px}
.chips span{font-size:14px;padding:8px 16px;border-radius:100px;border:1px solid var(--accent);color:var(--paper)}

.arch{padding-top:172px}
.arch__grid{columns:3;column-gap:var(--gap);margin-top:56px}
.arch__grid figure{break-inside:avoid;margin-bottom:var(--gap);border-radius:var(--r);overflow:hidden;background:var(--soft);transition:box-shadow .4s}
.arch__grid figure:hover{box-shadow:var(--lift)}
.arch__grid img{width:100%;height:auto;display:block}
.arch__grid .cut img{padding:8%}
.next{display:flex;justify-content:space-between;align-items:flex-end;padding:152px var(--pad) 0}
.next .h2{margin-top:16px;transition:color .25s}
.next:hover .h2{color:var(--accent-ink)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}
.filters button{font-size:14px;padding:8px 16px;border-radius:100px;border:1px solid var(--line);white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.filters button:hover{border-color:var(--ink)}
.filters button.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* motion */
@keyframes pgin{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes heroimg{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:none}}
@keyframes coverin{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
body{animation:pgin .5s ease both;transition:opacity .26s ease}
body.is-leaving{opacity:0}
.hero2__img{animation:heroimg 1.5s var(--ease) both}
.hero2__label{animation:rise .9s .15s var(--ease) both}
.hero2__name{animation:rise 1s .3s var(--ease) both}
.hero2__cta{animation:rise 1s .5s var(--ease) both}
.pj__title{animation:rise .9s .1s var(--ease) both}
.pj__sub,.pj__meta{animation:rise .9s .25s var(--ease) both}
.pj__cover img{animation:coverin 1.6s .2s var(--ease) both}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal .m img,.js .reveal.about__img img,.js .reveal.feat__img img{transform:scale(1.07);transition:transform 1.6s var(--ease)}
.js .reveal.in .m img,.js .reveal.in.about__img img,.js .reveal.in.feat__img img{transform:none}
.js .reveal.in .gal .m:nth-child(2) img{transition-delay:.1s}
.js .reveal.in .gal .m:nth-child(3) img{transition-delay:.2s}
.js .reveal.in .gal .m:nth-child(4) img{transition-delay:.3s}
.js .reveal.in .gal .m:nth-child(n+5) img{transition-delay:.4s}
.wgrid .wk:nth-child(even){transition-delay:.1s}
.anim-off *,.anim-off *::before,.anim-off *::after{animation:none!important}
.anim-off .reveal{opacity:1!important;transform:none!important;transition:none!important}
.anim-off .reveal .m img,.anim-off .reveal.about__img img,.anim-off .reveal.feat__img img{transform:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.reveal .m img{opacity:1!important;transform:none!important}
}

/* tablet */
@media(max-width:1100px){
  .wlist{grid-template-columns:minmax(0,1fr)}
  .prof__grid,.ab__grid{gap:48px}
  .skills{grid-template-columns:1fr 1fr;gap:40px var(--col)}
  .h2{font-size:40px}
  .feat,.wgrid,.ch--row,.ch--flip{grid-template-columns:minmax(0,1fr)}
  .ch--flip .ch__txt{order:0}
  .feat__txt{min-height:520px;gap:48px}
  .feat__img{aspect-ratio:4/3}
  .ch{padding-top:112px}.arch,.next{padding-top:120px}

  .cmp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cols3,.quotes,.cmp--6{grid-template-columns:minmax(0,1fr)}
  .arch__grid{columns:2}
  .pj__cover{aspect-ratio:16/9}
}

/* phone */
@media(max-width:760px){
  .tabs{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--r-lg)}
  .tabs button{padding:14px 8px;font-size:12px}
  .wc{grid-template-columns:minmax(0,1fr);min-height:0}
  .wc__img{aspect-ratio:4/3}
  .wc__txt{gap:48px}
  .wgrid .wk__img{aspect-ratio:1.4}
  .nav{gap:0;justify-content:space-between;height:64px;padding:0 20px}
  .nav__logo img{height:36px}
  .prof{padding-top:92px}
  .prof__grid,.ab__grid{grid-template-columns:1fr;gap:32px}
  .prof__img{max-width:380px}
  .prof__txt h2{font-size:32px}
  .meta3{grid-template-columns:1fr 1fr}
  .ab{padding-top:96px}
  .ab__head h1{font-size:48px}
  .ab__grid{margin-top:40px}
  .skills{grid-template-columns:1fr 1fr;gap:32px 20px}
  .edu__row{grid-template-columns:1fr;gap:12px}
  :root{--pad:20px}
  body{font-size:16px}
  .nav{padding:12px 20px}
  .nav__logo img{height:24px}
  .nav__burger{display:flex;flex-direction:column;justify-content:center;gap:8px;width:40px;height:40px;align-items:flex-end;position:relative;z-index:3}
  .nav__burger span{display:block;height:2px;width:26px;background:var(--ink);transform-origin:100% 50%;transition:transform .35s var(--ease)}
  .nav__burger span+span{transform:scaleX(.62)}
  .nav--open .nav__burger span+span{transform:none}
  .nav--open .nav__burger span:first-child{transform:translateY(5px) rotate(45deg)}
  .nav--open .nav__burger span:last-child{transform:translateY(-5px) rotate(-45deg)}
  .nav__logo{position:relative;z-index:3}
  .nav__links{position:fixed;inset:0;z-index:2;background:var(--paper);flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding:0 24px;font-size:40px;font-weight:500;letter-spacing:-.04em;line-height:1.15}
  .js .nav__links{transform:translateY(-100%);transition:transform .55s cubic-bezier(.7,0,.2,1);visibility:hidden}
  .js .nav--open .nav__links{transform:none;visibility:visible}
  .nav__links a::after{display:none}
  .nav__links a.is-on{color:var(--accent-ink)}

  .hero2{min-height:auto;padding:104px 20px 24px;display:flex;flex-direction:column}
  .hero2::before{display:none}
  .hero2__txt{position:static;order:1}
  .hero2__name{font-size:clamp(48px,15vw,72px);margin-top:16px}
  .hero2__cta{margin-top:28px;flex-wrap:wrap;gap:16px}
  .hero2__img{position:static;order:2;width:128%;margin:8px -14% 0;translate:none!important}

  .feat{margin-top:72px}
  .feat__txt{padding:28px;gap:36px}
  .feat__txt .h2{font-size:44px}
  .feat__sub{font-size:20px}.feat__p{font-size:16px}
  .works2{padding-top:92px}
  .sec-head2{flex-direction:column;align-items:flex-start;gap:20px}
  .wgrid{margin-top:32px}
  .wk__meta{flex-direction:column;gap:4px}.wk__meta .h4{font-size:24px}
  .cta2{padding-top:120px}
  .cta2 p{font-size:18px}
  .btn-acc{font-size:16px;padding:12px 20px;white-space:normal;word-break:break-all}
  .foot{padding:112px 20px 28px}
  .foot__top{flex-direction:column;gap:40px}
  .foot__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot__bottom{flex-direction:column;gap:8px;margin-top:40px}

  .pj,.listing{padding-top:104px}
  .pj__title{font-size:40px}
  .pj__top{flex-direction:column}
  .pj__sub{font-size:18px}
  .pj__meta{gap:24px 32px;margin-top:32px}
  .pj__cover{aspect-ratio:4/3;margin-top:32px}
  .ch{padding-top:80px}.ch--row{gap:28px}
  .ch__txt h2{font-size:28px}
  .ch__txt p{font-size:18px}.ch__txt blockquote{font-size:24px}
  .gal{gap:8px}
  .gal--2{grid-template-columns:minmax(0,1fr)}.gal--3,.gal--4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cmp,.cmp--6,.cmp--2,.cols3,.quotes{grid-template-columns:minmax(0,1fr)}
  .cmp{margin-top:32px}
  .spec{margin-top:32px}
  .spec__row{grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0}
  .spec__row span{font-size:18px}
  .dark{padding:28px;min-height:480px}
  .dark h2{font-size:32px}.dark p{font-size:18px}
  .arch{padding-top:92px}
  .arch__grid{columns:2;column-gap:8px;margin-top:32px}
  .arch__grid figure{margin-bottom:8px}
  .next{flex-direction:column;align-items:flex-start;gap:28px;padding-top:92px}
}

/* two- and three-up rows: same cap as the galleries */
.duo,.trio{align-items:start}
.duo .m img,.trio .m img{width:auto;max-width:100%;height:auto;max-height:640px;margin-inline:auto}

/* work page: category tabs, count line, two-column project cards */
.tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:40px;padding:4px;background:var(--soft);border-radius:100px}
.tabs button{padding:16px 12px;font-size:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-radius:100px;transition:background .2s,color .2s}
.tabs button:hover{color:var(--ink)}
.tabs button.is-on{background:var(--paper);color:var(--accent);box-shadow:0 2px 10px -4px rgba(29,32,41,.25)}
.wcount{display:flex;justify-content:space-between;align-items:baseline;margin:32px 0 16px;font-size:14px;color:var(--muted)}
.wcount #wfilter{color:var(--accent);letter-spacing:.1em;text-transform:uppercase}
.wlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap) 40px}
.wc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;min-height:280px;padding:0;border-radius:var(--r)}
.wc__img{transition:box-shadow .4s}
.wc:hover .wc__img{box-shadow:var(--lift)}
.wc.is-hidden{display:none}
.wc__txt{display:flex;flex-direction:column;justify-content:space-between;padding:12px 12px 8px 4px}
.wc__no,.wc__cat{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wc__cat{margin-top:12px}
.wc__title{font-size:24px;line-height:1.15;font-weight:700;letter-spacing:-.01em;text-transform:uppercase;color:var(--hero-ink);transition:color .25s}
.wc:hover .wc__title{color:var(--accent)}
.wc__img{position:relative;overflow:hidden;border-radius:var(--r);background:var(--soft)}
.wc__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%}
.wc__img--cover img{object-fit:cover;padding:0}

/* home: shorter project thumbnails */
.wgrid{margin-top:40px}
.wgrid .wk__img{aspect-ratio:1.5}

/* archive: four columns on laptop and up */
@media(min-width:1200px){.arch__grid{columns:4}}

/* final overrides (must stay at the end of the file so they win over the base rules above) */
@media(max-width:1100px){
  .wlist{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .tabs{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--r-lg)}
  .tabs button{padding:14px 8px;font-size:12px}
  .wc{grid-template-columns:minmax(0,1fr);min-height:0}
  .wc__img{aspect-ratio:4/3}
  .wc__txt{gap:40px}
  .wgrid .wk__img{aspect-ratio:1.3}
  .m--tall{aspect-ratio:2/3}
  .gal:not(.gal--flex) .m:not(.m--t):not(.m--tall):not(.m--frame) img,.duo .m img,.trio .m img{max-height:460px}
  .m--t img{max-height:420px}
}

/* tool roll layouts: wide text+photo row, centered cards, horizontal rows, equal frames */
.ch--wide{grid-template-columns:minmax(300px,500px) minmax(0,1fr);align-items:center}
.m--bare{background:none;border-radius:var(--r);overflow:hidden}
.m--bare img{width:100%;height:auto}
.cols3--center{margin-top:0}
.cols3--center article{min-height:0;padding:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.cols3--center h3{margin-bottom:8px}
.cols3--center li{padding:2px 0}
.cols3--one{grid-template-columns:minmax(0,1fr);margin-top:var(--gap)}
.gal--hz{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.m--frame{aspect-ratio:1}
.m--frame.m--wide{aspect-ratio:2/1}
.m--frame img{width:100%;height:100%;object-fit:cover}
.gal--flex{display:flex;gap:var(--gap);align-items:flex-start}
.gal--flex .m{min-width:0}
.gal--flex .m img{width:100%;height:auto}
@media(max-width:1100px){
  .ch--wide{grid-template-columns:minmax(0,1fr)}
  .gal--hz{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .gal--flex{flex-direction:column}
  .gal--flex .m{flex:none!important;width:100%}
  .cols3--center article{padding:20px}
}

.ch__txt p .links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:8px}
.ch__txt .links .arrow-link{font-size:18px}

@media(max-width:760px){.m--frame.m--wide{aspect-ratio:16/10}.dark{background-size:100% 100%,cover;background-position:center,62% center}}

/* onn. competitors on phones: compact horizontal rows, picture on the right */
@media(max-width:760px){
  .cmp--watch{gap:8px}
  .cmp--watch article{display:grid;grid-template-columns:minmax(0,1fr) 104px;grid-template-areas:'name img' 'price img' 'list img' 'pos img';grid-template-rows:auto auto auto 1fr;column-gap:16px;row-gap:2px;padding:16px;align-items:start}
  .cmp--watch h3{grid-area:name;font-size:18px}
  .cmp--watch b{grid-area:price;font-size:24px}
  .cmp--watch ul{grid-area:list;margin-top:6px}
  .cmp--watch li{font-size:13px;padding:2px 0}
  .cmp--watch small{grid-area:pos;margin-top:8px}
  .cmp--watch .m{grid-area:img;align-self:center;width:104px;height:104px;aspect-ratio:1;margin:0;padding:0}
  .cmp--watch .m img{width:auto;height:auto;max-width:88%;max-height:88%}
}

.arch__grid .on-white{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}

/* annotated figure */
.anno{margin:0}
.anno__stage{position:relative;aspect-ratio:2/1;background:var(--soft);border-radius:var(--r-lg);overflow:hidden}
.anno__box{position:absolute;left:17.675%;top:0;width:64.65%;height:100%}
.anno__box img{width:100%;height:100%;object-fit:contain}
.anno__dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--paper);font-size:0}
.anno__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.anno__lines line{stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.55}
.anno__label{position:absolute;width:15.2%;font-size:15px;line-height:1.35;font-weight:500;color:var(--ink)}
.anno__label b{display:block;font-size:12px;font-weight:600;color:var(--accent);margin-bottom:4px}
.anno__label--l{left:1.8%}
.anno__label--r{left:83%}
.anno__list{display:none}
@media(max-width:1100px){.anno__label{font-size:13px}.anno__label b{font-size:11px}}
@media(max-width:760px){
  .anno__stage{aspect-ratio:1827/1413}
  .anno__box{left:0;width:100%}
  .anno__label,.anno__lines{display:none}
  .anno__dot{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:12px;font-weight:600;color:var(--ink);display:grid;place-items:center;box-shadow:0 0 0 3px var(--paper)}
  .anno__dot::after{content:attr(data-n)}
  .anno__list{display:grid;gap:12px;margin:16px 0 0;padding:0;list-style:none;counter-reset:n}
  .anno__list li{counter-increment:n;display:grid;grid-template-columns:28px 1fr;font-size:16px;line-height:1.4;color:var(--ink)}
  .anno__list li::before{content:counter(n);width:22px;height:22px;border-radius:50%;background:var(--accent);font-size:12px;font-weight:600;display:grid;place-items:center}
}

/* sketch tiles: equal frames, nothing cropped */
.m--sk{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:4%}
.m--sk img{width:100%;height:100%;object-fit:contain}
@media(max-width:760px){.gal--2:has(.m--sk){grid-template-columns:minmax(0,1fr)}}

/* research diagrams: full width so the small text stays readable */
.read-stack{display:grid;gap:var(--gap)}
.m--read{display:flex;justify-content:center;padding:2.5%}
.m--read img{width:100%;max-width:1536px;height:auto}
.m--read2{width:100%;max-width:960px;margin-inline:auto}
@media(max-width:760px){.m--read{padding:3%}}
@media(max-width:760px){
  .read-stack .m--read:first-child{overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}
  .read-stack .m--read:first-child img{min-width:780px}
}

/* stacked rows of pictures that share a height, capped so sketches stay readable but not huge */
.duorow{display:grid;gap:var(--gap);max-width:1000px;margin-inline:auto}

/* equal square tiles, nothing cropped */
.m--sq{display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:5%}
.m--sq img{width:100%;height:100%;object-fit:contain}

.ch--flip.ch--wide{grid-template-columns:minmax(0,1fr) minmax(300px,500px);align-items:center}
@media(max-width:1100px){.ch--flip.ch--wide{grid-template-columns:minmax(0,1fr)}}

/* Florence furniture page: story told in images, text on the vertical center of each image group */
.fl{display:grid;gap:var(--gap);max-width:1040px;width:100%}
.fl .m{position:relative;background:var(--soft)}
.fl .m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-height:none}
.fl--refs{grid-template-columns:1fr 1fr}
.fl--refs .m{aspect-ratio:4/5}
.fl--pair{grid-template-columns:.671fr 1.15fr}
.fl--pair .m:first-child{aspect-ratio:1696/2528}
.fl--mosaic{grid-template-columns:3fr 4fr;grid-template-rows:1fr 1fr}
.fl--mosaic .m:first-child{grid-row:1/3;aspect-ratio:1696/2528}
.fl--quad{grid-template-columns:1fr 1fr}
.fl--quad .m{aspect-ratio:4/3}
.fl--lead{grid-template-columns:1fr 1fr}
.fl--lead .m:first-child{grid-column:1/3;aspect-ratio:16/10}
.fl--lead .m:not(:first-child){aspect-ratio:4/3}
.fl--side{grid-template-columns:7fr 5fr;grid-template-rows:1fr 1fr}
.fl--side .m:first-child{grid-row:1/3;aspect-ratio:1.155/1}
.fl--side.fl--rev{grid-template-columns:5fr 7fr}
.fl--rev .m:first-child{grid-area:1/2/3/3}
.fl--rev .m:nth-child(2){grid-area:1/1}
.fl--rev .m:nth-child(3){grid-area:2/1}
.fl--sheet{max-width:760px}
.fl--sheet .m{background:#fff;border:1px solid var(--line)}
.fl--sheet .m img{position:static;height:auto;object-fit:contain;padding:2%}
.fl--narrow{max-width:560px}
.fl--sk .m{background:#fff;border:1px solid var(--line)}
.ch--sheet{padding-top:48px}
.ch--sheet .ch__txt h2{font-size:24px}
.ch--sheet .ch__txt p{font-size:16px;margin-top:12px}
.mats{display:grid;gap:0;max-width:1040px;width:100%}
.mats__row{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.mats__row:first-child{border-top:0;padding-top:0}
.mats__row:last-child{padding-bottom:0}
.mats__row .m{position:relative;aspect-ratio:4/3}
.mats__row .m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mats__row b{display:block;font-size:24px;font-weight:500;letter-spacing:-.01em}
.mats__row p{font-size:17px;line-height:1.4;color:var(--muted);margin-top:8px;max-width:40ch}
@media(min-width:1101px){
  .ch--fl{grid-template-columns:minmax(280px,400px) minmax(0,1fr);gap:72px;align-items:center;justify-content:normal}
  .ch--fl.ch--flip{grid-template-columns:minmax(0,1fr) minmax(280px,400px)}
  .ch--fl:not(.ch--flip) .fl,.ch--fl:not(.ch--flip) .mats{justify-self:end}
}
@media(max-width:760px){
  .fl--pair,.fl--mosaic,.fl--lead,.fl--side,.fl--side.fl--rev{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .fl--pair .m:first-child,.fl--mosaic .m:first-child{grid-row:auto;aspect-ratio:3/4}
  .fl--pair .m:last-child{aspect-ratio:4/3}
  .fl--mosaic .m:not(:first-child){aspect-ratio:16/9}
  .fl--lead .m:first-child{grid-column:auto}
  .fl--side .m:first-child,.fl--rev .m:first-child,.fl--rev .m:nth-child(2),.fl--rev .m:nth-child(3){grid-area:auto}
  .fl--side .m:first-child{aspect-ratio:1.155/1}
  .fl--side .m:not(:first-child){aspect-ratio:4/3}
  .mats__row{grid-template-columns:104px 1fr;gap:16px}
  .mats__row b{font-size:20px}.mats__row p{font-size:15px}
}

/* home: ideas in motion (sketch timelapse) */
.motion{padding-top:152px}
.motion__frame{margin-top:40px;border-radius:var(--r-lg);overflow:hidden;background:#000;aspect-ratio:1568/936;max-width:1100px;margin-inline:auto}
.motion__vid{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:1100px){.motion{padding-top:112px}}
@media(max-width:760px){.motion{padding-top:80px}.motion__frame{margin-top:28px}}

/* KeyShot Director project page */
.pj--kd .pj__sub{max-width:600px}
.pj--kd .pj__cover{aspect-ratio:1248/720}
.pj__cover picture{display:block;width:100%;height:100%}
.kd-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:32px}
.kd-actions .btn-acc,.kd-os__cta .btn-acc{margin-top:0}
.kd-glance__lab{font-size:12px;margin-bottom:16px}
.kd-glance{margin-top:0}
.kd-glance .spec__row{grid-template-columns:132px minmax(0,1fr);gap:24px}
.kd-glance .spec__row span{line-height:1.4}
.kd-head+*{margin-top:48px}
.kd-note{font-size:14px;line-height:1.5;color:var(--muted);margin-top:16px;max-width:640px}
.kd-tags{display:flex;flex-wrap:wrap;gap:8px}
.kd-tags span{font-size:14px;font-weight:500;line-height:1.5;padding:8px 16px;border-radius:100px;background:var(--soft);color:var(--muted)}
.kd-dark{display:grid;grid-template-columns:minmax(0,580px) minmax(0,420px);justify-content:space-between;align-items:center;gap:48px;padding:72px;border-radius:var(--r-lg);background:var(--night);color:var(--paper);overflow:hidden}
.kd-dark .pill{background:var(--paper);color:var(--ink)}
.kd-dark h2{font-size:44px;line-height:1.1;font-weight:500;letter-spacing:-.02em;margin-top:20px}
.kd-dark p{font-size:20px;line-height:1.4;color:var(--on-night);margin-top:20px}
.kd-dark .chips{margin-top:20px}
.kd-rig{width:100%;height:auto;display:block}
.kd-rig text{font:400 12px/1 var(--font);fill:rgba(255,255,255,.8)}
.kd-caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 12px}
.kd-card{display:flex;flex-direction:column;gap:16px;min-height:330px;padding:32px;border:1px solid var(--line);border-radius:var(--r-lg)}
.kd-card b{font-size:12px;font-weight:600;line-height:1.6;color:var(--accent-ink)}
.kd-card h3{font-size:28px;line-height:1.2;font-weight:500;letter-spacing:-.01em}
.kd-card p{font-size:18px;line-height:1.5;color:var(--muted)}
.kd-card .kd-tags{margin-top:auto}
.kd-shots{display:grid;gap:48px}
.kd-shot figcaption{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:16px}
.kd-shot h3{font-size:20px;line-height:1.3;font-weight:500}
.kd-shot figcaption p{font-size:16px;line-height:1.5;color:var(--muted);text-align:right;max-width:560px}
.kd-shot picture{display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--soft)}
.kd-shot img{display:block;width:100%;height:auto}
.kd-steps{list-style:none;border-bottom:1px solid var(--line)}
.kd-steps li{display:grid;grid-template-columns:64px minmax(0,360px) minmax(0,1fr);gap:32px;align-items:start;padding:32px 0;border-top:1px solid var(--line)}
.kd-steps b{font-size:12px;font-weight:600;line-height:1.6;color:var(--accent-ink);padding-top:6px}
.kd-steps h3{font-size:28px;line-height:1.2;font-weight:500;letter-spacing:-.01em}
.kd-steps p{font-size:18px;line-height:1.4;color:var(--muted);max-width:520px;margin-bottom:20px}
.kd-stats{display:grid;grid-template-columns:repeat(4,minmax(0,260px));justify-content:space-between}
.kd-stats i{display:block;width:28px;height:4px;border-radius:4px;background:var(--accent);margin-bottom:12px}
.kd-stats b{display:block;font-size:64px;line-height:1.1;font-weight:500;letter-spacing:-.03em}
.kd-stats span{display:block;margin-top:12px;font-size:16px;line-height:1.5;color:var(--muted)}
.kd-lim{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.kd-info{padding:24px;border-radius:var(--r-sm);background:var(--soft)}
.kd-info small{display:block;font-size:12px;font-weight:600;line-height:1.6;letter-spacing:.1em;color:var(--accent-ink)}
.kd-info h3{font-size:20px;line-height:1.3;font-weight:500;margin-top:8px}
.kd-info p{font-size:16px;line-height:1.5;color:var(--muted);margin-top:8px}
.kd-info--ink{background:var(--ink);color:var(--paper)}
.kd-info--ink p{color:var(--on-night)}
.kd-os{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:64px;align-items:start;padding:56px;border:1px solid var(--line);border-radius:var(--r-lg)}
.kd-os .h2{margin-top:20px}
.kd-os__txt>p{font-size:20px;line-height:1.4;color:var(--muted);margin-top:20px}
.kd-os .kd-tags{margin-top:20px}
.kd-os__cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:20px}
.kd-os__run .lab{font-size:12px;margin-bottom:16px}
.kd-os__run ol{list-style:none;border-bottom:1px solid var(--line)}
.kd-os__run li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;padding:20px 0;border-top:1px solid var(--line);font-size:18px;line-height:1.4}
.kd-os__run li b{font-size:12px;font-weight:600;line-height:1.6;color:var(--accent-ink);padding-top:4px}
@media(max-width:1100px){
  .kd-dark{grid-template-columns:minmax(0,1fr);padding:56px}
  .kd-rig{max-width:420px;margin-inline:auto}
  .kd-caps{grid-template-columns:minmax(0,1fr)}
  .kd-card{min-height:0}
  .kd-shot figcaption{flex-direction:column;align-items:flex-start;gap:8px}
  .kd-shot figcaption p{text-align:left}
  .kd-steps li{grid-template-columns:64px minmax(0,1fr)}
  .kd-steps li>div{grid-column:2}
  .kd-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}
  .kd-lim{grid-template-columns:minmax(0,1fr)}
  .kd-os{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media(max-width:760px){
  .pj--kd .pj__cover{aspect-ratio:335/470}
  .kd-head+*{margin-top:32px}
  .kd-dark{padding:32px 28px;gap:24px}
  .kd-dark h2{font-size:28px}
  .kd-dark p{font-size:18px}
  .kd-card{padding:28px}
  .kd-card h3,.kd-steps h3{font-size:24px}
  .kd-steps li{grid-template-columns:40px minmax(0,1fr);gap:8px 16px;padding:24px 0}
  .kd-steps li>div{grid-column:1/-1}
  .kd-glance .spec__row{grid-template-columns:minmax(0,1fr);gap:4px}
  .kd-os{padding:28px}
  .kd-os__txt>p{font-size:18px}
}