/* Englang article — Journal design. Same fonts and tokens as the home page. */
@font-face{font-family:Newsreader;src:url('/landing/newsreader.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:Hanken;src:url('/landing/hanken-grotesk.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{--paper:#f6f6f4;--ink:#1b1b1b;--muted:#5f5f5b;--line:#c9c9c4;--slate:#3b5a8c;--serif:Newsreader,Georgia,"Times New Roman",serif;--sans:Hanken,"Helvetica Neue",Arial,sans-serif;scroll-behavior:smooth;scroll-padding-top:40px}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
::selection{background:#d9e2f2}
a{color:inherit;text-underline-offset:4px;text-decoration-color:var(--line)}
a:hover{text-decoration-color:var(--ink)}
button{font:inherit;cursor:pointer;color:inherit}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--slate)}
a:focus-visible,button:focus-visible{outline:2px solid var(--slate);outline-offset:4px}
.shell{max-width:1200px;width:calc(100% - 96px);margin-inline:auto}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.link-mark{width:1.05em;height:1.05em;margin-left:.45em;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:2.25;flex:none}
a:has(>.link-mark){white-space:nowrap}
.link-mark-up{transform:rotate(-90deg)}
.skip-link{position:absolute;top:-100px;left:24px;background:var(--ink);color:var(--paper);padding:12px 16px;z-index:10}
.skip-link:focus{top:12px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:500 26px/1 var(--serif);letter-spacing:-.02em}
.brand-mark{width:34px;height:34px;flex:none}
.brand-mark img{width:100%;height:100%}
.site-header{position:relative}
.navigation{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:500;color:var(--muted)}
.navigation a{text-decoration:none}
.navigation a:hover,.navigation a[aria-current="page"]{color:var(--ink)}
.navigation .nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);padding:11px 16px;font-size:13px;font-weight:600;border:0}
.menu-toggle{display:none;width:44px;height:44px;border:0;background:none;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.menu-toggle span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .2s,opacity .2s}
.menu-open .menu-toggle span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-open .menu-toggle span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media(max-width:640px){.menu-toggle{display:flex}.navigation{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);z-index:40;font-size:16px}.menu-open .navigation{display:flex}.navigation a{padding:16px 0;border-top:1px solid var(--line);color:var(--ink)}.navigation .nav-cta{margin:12px 0 18px;justify-content:center;padding:14px}}
.eyebrow,.small-label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.article-hero{padding:32px 0 48px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr);gap:64px;align-items:center}
.article-hero h1{font-size:clamp(44px,5.6vw,80px);margin:0 0 24px}
.deck{font-family:var(--serif);font-size:clamp(22px,2.2vw,28px);line-height:1.35;letter-spacing:-.01em;max-width:30em;color:var(--muted)}
.hero-visual{display:flex;flex-direction:column;align-items:center;min-width:0}
.hero-phone{display:block;width:220px;background:#111;border:3px solid #111;border-radius:26px;overflow:hidden;line-height:0;box-shadow:0 22px 44px rgba(27,27,27,.16)}
.hero-phone img{border-radius:22px}
.hero-visual figcaption{font-size:13px;line-height:1.6;color:var(--muted);text-align:center;margin-top:20px;max-width:260px}
.hero-visual figcaption span{display:block}
.reading-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:80px;padding-top:56px;align-items:start}
.contents{position:sticky;top:32px;border-top:1px solid var(--ink);padding-top:14px}
.contents ol{list-style:none;margin:14px 0 0;padding:0}
.contents li{margin-bottom:10px}
.contents a{display:flex;gap:12px;color:var(--muted);font-size:14px;line-height:1.5;text-decoration:none}
.contents a:hover{color:var(--ink)}
.prose{min-width:0;max-width:680px}
.prose p{margin:0 0 22px;font-size:18px;line-height:1.7}
.prose .lead{font-size:21px;line-height:1.6}
.prose .lead::first-letter{font:400 4.6em/.8 var(--serif);float:left;padding:.12em .14em 0 0;color:var(--slate)}
.prose a{text-decoration-color:var(--line)}
.prose h2{font-size:clamp(34px,3.6vw,46px);margin:52px 0 22px;scroll-margin-top:40px}
.prose section:first-of-type h2{margin-top:36px}
.prose .section-number{display:block;font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.prose blockquote{margin:36px 0;border-left:3px solid var(--slate);padding:6px 0 6px 24px;font:400 30px/1.25 var(--serif);letter-spacing:-.01em}
.prose .projects-intro{margin-bottom:30px}
.project-gallery{grid-column:1/-1;margin:8px 0 12px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:36px 0 32px;min-width:0}
.gallery-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:32px}
.gallery-heading p{font-size:13px;color:var(--muted)}
.project-columns{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.project-card{min-width:0}
.project-card-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}
.project-card h3{font-size:36px;line-height:1.1}
.project-card h3 a{text-decoration:none}
.project-card h3 a:hover{text-decoration:underline}
.project-card h3 .link-mark{width:.6em;height:.6em;margin-left:.3em;vertical-align:.02em}
.platform{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;border:1px solid var(--line);padding:6px 10px;color:var(--muted);white-space:nowrap}
.project-description{font-size:15px;line-height:1.6;color:var(--muted);margin-bottom:22px;max-width:40ch}
.screens{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.shot{min-width:0}
.shot-link{display:block;background:#111;border:3px solid #111;border-radius:22px;overflow:hidden;line-height:0;box-shadow:0 14px 30px rgba(27,27,27,.14);transition:transform .2s}
.shot-link:hover{transform:translateY(-3px)}
.shot-link img{width:100%;height:auto;border-radius:18px}
.shot figcaption{font-size:13px;line-height:1.55;color:var(--muted);margin-top:12px}
.gallery-note{font-size:13px;line-height:1.7;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;margin-top:28px}
.after-gallery{grid-column:2}
.chapter-tail{padding-bottom:40px}
.end-note{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;padding-top:22px;margin-top:34px;color:var(--muted);font-size:14px}
.tweet-screenshot{margin:28px 0 32px;width:100%;max-width:480px}
.tweet-screenshot>a{display:block;background:#fff;border:1px solid var(--line)}
.tweet-screenshot img{width:100%;height:auto}
.tweet-screenshot figcaption,.talk-card figcaption{margin-top:12px;font-size:13px;line-height:1.7;color:var(--muted)}
.talk-card{margin:28px 0 32px;width:100%;max-width:480px}
.talk-card>a{display:block;position:relative;border:1px solid var(--line);background:#fff;text-decoration:none}
.talk-thumb{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.talk-thumb img{width:100%;height:100%;object-fit:cover}
.talk-thumb .play-circle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(246,246,244,.94);color:var(--ink);display:flex;align-items:center;justify-content:center}
.talk-thumb .play-circle svg{width:22px;height:22px;fill:currentColor;stroke:none;margin-left:3px}
.talk-body{display:block;padding:16px 18px;font-size:14px;color:var(--muted);line-height:1.5}
.talk-body strong{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.closing{margin-top:56px;border-top:1px solid var(--ink)}
.closing-inner{padding:64px 0 56px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.closing h2{font-size:clamp(40px,5.2vw,68px)}
.closing p{font-size:18px;color:var(--muted);margin-top:14px}
.visit-link{display:inline-flex;align-items:center;gap:14px;flex-shrink:0;background:var(--ink);color:var(--paper);padding:15px 22px;text-decoration:none;font-size:15px;font-weight:600;line-height:1}
.visit-link .link-mark{margin-left:0}
.wordmark{display:none}
.site-footer{border-top:1px solid var(--line)}
.footer-inner{display:flex;justify-content:space-between;gap:24px;padding-block:28px 44px;font-size:13px;color:var(--muted)}
.footer-inner a{color:var(--ink)}
dialog{width:min(820px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border:1px solid var(--ink);padding:18px 20px 20px;background:var(--paper);color:var(--ink);overflow:auto}
dialog::backdrop{background:rgba(27,27,27,.55)}
.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.dialog-header p{font-size:14px;color:var(--muted)}
.dialog-close{border:1px solid var(--line);background:transparent;width:44px;height:44px;font-size:24px;line-height:1;flex-shrink:0}
.dialog-image{max-height:calc(100dvh - 150px);width:auto;max-width:100%;margin:auto;border:3px solid #111;border-radius:22px;background:#111}
.modal-open{overflow:hidden}
@media(max-width:1100px){.shell{width:calc(100% - 64px)}.hero-grid{gap:40px}.reading-layout{grid-template-columns:170px minmax(0,1fr);gap:48px}.project-columns{gap:32px}.screens{gap:14px}.project-card-head{flex-wrap:wrap;gap:10px}}
@media(max-width:800px){.shell{width:calc(100% - 48px)}.site-header{height:76px}.article-hero{padding-top:28px}.hero-grid{grid-template-columns:minmax(0,1fr) 180px;gap:28px}.hero-phone{width:170px;border-radius:22px}.hero-phone img{border-radius:18px}.contents{display:none}.reading-layout{display:block;max-width:680px;padding-top:40px}.project-gallery{margin:28px 0}.project-columns{gap:28px}.project-card h3{font-size:30px}.project-card-head{display:block}.platform{display:inline-block;margin-top:8px}.after-gallery{padding-top:0}.closing-inner{flex-direction:column;align-items:flex-start}}
@media(max-width:560px){.shell{width:calc(100% - 40px)}.brand{font-size:23px}.brand-mark{width:30px;height:30px}.article-hero{padding:24px 0 36px}.hero-grid{grid-template-columns:1fr;gap:28px}.article-hero h1{margin:0 0 20px}.deck{font-size:20px}.hero-visual{margin:0 auto;width:100%}.hero-phone{width:180px}.reading-layout{padding-top:32px}.prose p{font-size:17px}.prose .lead{font-size:19px}.prose h2{font-size:34px;margin-top:40px}.prose blockquote{font-size:25px;padding-left:18px;margin:28px 0}.project-gallery{padding:28px 0 24px}.gallery-heading{display:block;padding-bottom:18px;margin-bottom:22px}.gallery-heading p{margin-top:8px}.project-columns{grid-template-columns:1fr;gap:32px}.project-card+.project-card{border-top:1px solid var(--line);padding-top:28px}.project-card-head{display:flex;flex-wrap:nowrap}.platform{margin-top:0}.screens{gap:12px}.end-note{flex-direction:column;gap:10px}.closing-inner{padding:44px 0 40px}.closing h2{font-size:40px}.footer-inner{flex-direction:column;gap:10px}dialog{padding:12px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*{transition:none!important}.shot-link:hover{transform:none}}
@media print{.contents,.navigation,.menu-toggle,.hero-visual,.closing,dialog{display:none}.shell{width:100%;max-width:none}.reading-layout{display:block;padding-top:20px}.article-hero{padding:20px 0}.hero-grid{display:block}.article-hero h1{font-size:52px}.prose h2{break-after:avoid}.project-gallery{break-inside:avoid}.screens img{max-height:280px;object-fit:contain}}