@font-face{font-family:Atkinson Hyperlegible Next Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/atkinson-hyperlegible-next-latin-ext-wght-normal-C6vrW8VD.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Atkinson Hyperlegible Next Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/atkinson-hyperlegible-next-latin-wght-normal-BcXVPD7q.woff2) format("woff2-variations");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:Atkinson Hyperlegible Next Variable;font-style:italic;font-display:swap;font-weight:200 800;src:url(/assets/atkinson-hyperlegible-next-latin-ext-wght-italic-Cigfgs4r.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Atkinson Hyperlegible Next Variable;font-style:italic;font-display:swap;font-weight:200 800;src:url(/assets/atkinson-hyperlegible-next-latin-wght-italic-DC5MiAaX.woff2) format("woff2-variations");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{--paper: #f5f2ea;--grid: rgb(60 50 30 / .045);--grid-size: 28px;--card: #ffffff;--browser-bar: #eeece6;--ink: #18181a;--ink-2: #55555a;--ink-3: #8b8b90;--line: #e1dfd8;--accent: #c2412d;--tile: #ecdcbc;--tile-edge: #cdb78e;--tile-ink: #2a2116;--shadow: 0 1px 2px rgb(24 24 26 / .05), 0 10px 30px -14px rgb(24 24 26 / .22);--font: "Atkinson Hyperlegible Next Variable", system-ui, sans-serif;--gutter: clamp(16px, 4vw, 40px);--max: 1160px;color-scheme:light}@media(prefers-color-scheme:dark){:root{--paper: #131314;--grid: rgb(255 255 255 / .035);--card: #1c1c1e;--browser-bar: #242427;--ink: #ededea;--ink-2: #a9a9ad;--ink-3: #737378;--line: #2d2d30;--accent: #ec7a62;--tile: #d9c7a3;--tile-edge: #a8916a;--shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -16px rgb(0 0 0 / .7);color-scheme:dark}}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size);background-position:center top;background-attachment:fixed;color:var(--ink);font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased}img{display:block;max-width:100%}a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}a:hover{color:var(--accent)}button{font:inherit;color:inherit}h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.15}p{margin:0}::selection{background:var(--accent);color:#fff}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}.wrap--wide{max-width:1320px}.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.site-header__inner{display:flex;align-items:center;justify-content:space-between;height:64px}.site-nav{display:flex;gap:clamp(18px,3vw,32px);font-size:15px}.site-nav a{text-decoration:none;color:var(--ink-2)}.site-nav a:hover{color:var(--ink)}.tiles{display:flex;gap:3px;text-decoration:none}.tile{position:relative;width:28px;height:28px;display:grid;place-items:center;background:var(--tile);color:var(--tile-ink);border-radius:4px;box-shadow:inset 0 -2px 0 var(--tile-edge);font-weight:700;font-size:16px;line-height:1;transition:transform .2s ease}.tile sub{position:absolute;right:3px;bottom:3px;font-size:7px;font-weight:600;line-height:1}.tiles:hover .tile:nth-child(1){transform:translateY(-2px) rotate(-3deg)}.tiles:hover .tile:nth-child(2){transform:translateY(-3px);transition-delay:.03s}.tiles:hover .tile:nth-child(3){transform:translateY(-2px) rotate(3deg);transition-delay:.06s}.intro{display:flex;align-items:center;gap:clamp(16px,2.5vw,28px);padding-top:clamp(40px,6vw,72px)}.intro__photo{flex:none;width:clamp(72px,9vw,104px);aspect-ratio:1;object-fit:cover;border-radius:50%}.intro h1{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.03em}.intro p{margin-top:6px;color:var(--ink-2);font-size:clamp(16px,1.5vw,18px);line-height:1.5}section+section{margin-top:clamp(88px,11vw,140px)}section.intro+section{margin-top:clamp(40px,5vw,64px)}.section-title{font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink);padding-bottom:14px;margin-bottom:8px;border-bottom:1px solid var(--line)}.frame{margin:0;border-radius:10px;overflow:hidden;background:var(--card);box-shadow:var(--shadow);outline:1px solid var(--line);outline-offset:-1px}.frame img{width:100%;height:auto}.frame--phone{border-radius:22px}.links{display:flex;flex-wrap:wrap;gap:8px 24px}.links a{font-weight:500}.facts{color:var(--ink-3);font-size:15px}.featured{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}.featured__cover{display:block;text-decoration:none;color:inherit;transition:transform .35s ease}.browser{border-radius:12px;overflow:hidden;background:var(--card);outline:1px solid var(--line);outline-offset:-1px;box-shadow:0 2px 4px #18181a0a,0 24px 48px -24px #18181a59}.browser__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:36px;padding:0 14px;background:var(--browser-bar);border-bottom:1px solid var(--line)}.browser__dots{display:flex;gap:6px}.browser__dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}.browser__url{font-size:12px;color:var(--ink-3);padding:3px 14px;border-radius:6px;background:var(--card);min-width:220px;text-align:center}.browser img{width:100%;height:auto}.featured__cover:hover{transform:translateY(-3px)}.featured__text h2{font-size:clamp(36px,4.4vw,56px);letter-spacing:-.035em;line-height:1}.featured__summary{margin-top:16px;color:var(--ink-2);font-size:18px;line-height:1.55}.featured .facts{margin-top:20px}.featured .links{margin-top:16px}.featured__strip{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr .29fr;gap:clamp(12px,2vw,24px);align-items:stretch}.featured__strip .frame--phone{position:relative}.featured__strip .frame--phone img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:top}.index{display:grid;grid-template-columns:1fr 380px;gap:clamp(24px,4vw,56px);align-items:start}.index__list{list-style:none;margin:0;padding:0}.index__row{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:20px 0;cursor:zoom-in;display:grid;grid-template-columns:170px 1fr auto;column-gap:20px;row-gap:4px;align-items:baseline}.index__name{font-size:22px;font-weight:600;letter-spacing:-.02em;transition:color .15s}.index__kind{color:var(--ink-3);font-size:15px}.index__desc{grid-column:2 / 4;color:var(--ink-2);font-size:15px;max-width:56ch}.index__go{grid-row:1;grid-column:3;color:var(--ink-3);font-size:14px}.index__thumb{display:none}.index__row:hover .index__name{color:var(--accent)}@media(min-width:901px){.index__row.is-active .index__name{color:var(--accent)}}.index__preview{position:sticky;top:96px;aspect-ratio:4 / 3;margin-top:20px;border-radius:10px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}.index__preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.02);transition:opacity .25s ease,transform .4s ease}.index__preview img.is-shown{opacity:1;transform:none}.lightbox{position:fixed;inset:0;z-index:50;display:grid;grid-template-rows:auto 1fr auto;background:#101011f2;color:#ededea;padding:16px var(--gutter)}.lightbox__bar{display:flex;align-items:center;gap:16px;justify-content:space-between;font-weight:600}.lightbox__bar span:nth-child(2){color:#9a9a9f;font-weight:400;font-size:14px}.lightbox__close,.lightbox__nav button{background:none;border:1px solid #4a4a4e;border-radius:6px;height:40px;padding:0 16px;cursor:pointer}.lightbox__close:hover,.lightbox__nav button:hover{background:#ededea;color:#131314}.lightbox__stage{margin:16px 0;display:grid;place-items:center;min-height:0}.lightbox__stage img{max-height:100%;max-width:100%;object-fit:contain;border-radius:6px}.lightbox__nav{display:flex;justify-content:center;gap:12px}.about__grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(32px,6vw,96px);margin-top:24px}.about__copy p{font-size:clamp(19px,1.9vw,22px);line-height:1.5;letter-spacing:-.01em}.about__copy p+p{margin-top:1em}.about__side{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:10px;align-content:start;font-size:15px;color:var(--ink-2)}.about__side a{color:var(--ink-2)}.about__side a:hover{color:var(--accent)}.site-footer{margin-top:clamp(104px,12vw,160px);padding:clamp(40px,6vw,64px) 0 32px;border-top:1px solid var(--line)}.site-footer__lede{font-size:clamp(26px,3.4vw,40px);font-weight:600;line-height:1.15;max-width:24ch;letter-spacing:-.03em}.site-footer .links{margin-top:24px}.site-footer__fine{margin-top:64px;font-size:13px;color:var(--ink-3)}.case__head{padding-top:clamp(32px,6vw,64px);padding-bottom:clamp(32px,5vw,48px)}.back{display:inline-block;margin-bottom:40px;text-decoration:none;color:var(--ink-2);font-size:15px}.case h1{font-size:clamp(56px,10vw,120px);line-height:.92;letter-spacing:-.055em;font-weight:700}.case__lede{font-size:clamp(19px,2.2vw,24px);line-height:1.4;color:var(--ink-2);margin-top:20px;max-width:40ch;letter-spacing:-.01em}.case__facts{margin-top:24px;color:var(--ink-3);font-size:15px;max-width:70ch}.case__facts a{color:var(--ink-2)}.case__toc{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:32px;padding-bottom:14px;border-bottom:1px solid var(--line)}.case__toc a{text-decoration:none;font-size:15px;color:var(--ink-2)}.case__toc a:hover{color:var(--accent)}.step{display:grid;grid-template-columns:180px 1fr;column-gap:clamp(24px,4vw,64px)}section.step{margin-top:clamp(64px,9vw,112px)}.step__label{font-size:15px;font-weight:600;color:var(--accent);padding-top:8px}.step__body{max-width:64ch}.step__body h2{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.03em;margin-bottom:18px}.step__body p{color:var(--ink-2)}.step__body p+p{margin-top:1em}.step__media{grid-column:1 / -1;margin-top:40px;display:grid;gap:clamp(12px,2vw,24px)}.step__media.is-pair{grid-template-columns:1fr 1fr}.step__media.is-split{grid-template-columns:1fr .3fr;align-items:start}.marks{grid-template-columns:repeat(12,1fr);margin-top:20px;padding:clamp(16px,2vw,24px);background:var(--card);border-radius:10px;box-shadow:var(--shadow);gap:clamp(8px,1.5vw,16px)}.resume-box{display:grid;grid-template-columns:180px 1fr;column-gap:clamp(24px,4vw,64px)}section.resume-box{margin-top:clamp(80px,10vw,128px)}.resume-box ul{margin:0;padding:0 0 0 20px;display:grid;gap:12px;max-width:72ch;color:var(--ink-2)}.resume-box li::marker{color:var(--accent)}@media(min-width:901px){.step__media:not(.is-pair):not(.is-split):not(.marks){grid-column:2}}@media(max-width:900px){.featured,.about__grid,.index{grid-template-columns:1fr}.index__preview{display:none}.index__row{grid-template-columns:88px 1fr auto;column-gap:16px}.index__thumb{display:block;grid-row:1 / 4;width:88px;aspect-ratio:4 / 3;object-fit:cover;object-position:top;border-radius:6px;align-self:start}.index__kind{grid-column:2}.index__desc{grid-column:2 / 4}.step,.resume-box{grid-template-columns:1fr}.step__label{padding-top:0;margin-bottom:8px}.marks{grid-template-columns:repeat(6,1fr)}}@media(max-width:640px){body{font-size:16px}.site-nav{gap:16px;font-size:14px}.featured__strip{grid-template-columns:1fr .42fr}.featured__strip>:first-child{grid-column:1 / -1}.step__media.is-pair{grid-template-columns:1fr}.index__go{display:none}.index__row{grid-template-columns:88px 1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
