/* Layout: a studio showcase in pages, sorted by line of work: Studio (content), Labs (products), Academy
   (training). The home page stays abstract and type-led: a slogan beside the studio's two-character mark,
   who the studio works for, the three lines, how it works, the founder in two lines. Project names appear
   only inside a line's page, as evidence. Serif headlines, cream ground, one warm accent, dark top.
   Chinese by default, English on the switch. */
:root{
  --ink:#0f2233;        /* dark surfaces */
  --ink-2:#17324a;
  --paper:#f6f1e6;      /* page ground */
  --paper-2:#fbf8f2;    /* alternating bands */
  --card:#fffdf8;
  --text:#1b2632;
  --muted:#5d6975;
  --faint:#8a94a0;
  --line:#e3dccb;
  --accent:#c9792b;     /* the one warm accent */
  --accent-deep:#96561a;
  --on-dark:#f1eada;
  --on-dark-muted:#a9b7c4;
  --on-dark-line:#ffffff24;
  --ok-ink:#1f7a55; --ok-bg:#dff1e6;
  --wip-ink:#2a5fae; --wip-bg:#e1eaf8;
  --plan-ink:#6b6455; --plan-bg:#ece6d8;
  --serif:"Source Serif 4","Noto Serif SC","Songti SC","STSong",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:var(--serif);line-height:1.25;text-wrap:balance}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,100% - 64px);margin-inline:auto}
.kicker{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep)}
.kicker::before{content:"";display:inline-block;width:28px;height:1px;margin-right:12px;vertical-align:middle;background:currentColor;opacity:.6}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border:0;border-radius:999px;font-size:15px;font-weight:650;white-space:nowrap;cursor:pointer}
.btn.solid{background:var(--accent);color:#fff}
.btn.solid:hover{background:var(--accent-deep)}
.btn.line{background:none;box-shadow:inset 0 0 0 1px currentColor}
.btn.off{background:var(--plan-bg);color:var(--plan-ink);cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:6px;padding:1px 10px;border-radius:999px;font-size:12.5px;font-weight:650;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.live{color:var(--ok-ink);background:var(--ok-bg)}
.chip.wip{color:var(--wip-ink);background:var(--wip-bg)}
.chip.plan{color:var(--plan-ink);background:var(--plan-bg)}

/* ---------- dark top: bar with the tabs, then the hero or the page title ---------- */
.skin{--fg:var(--on-dark);--fg-muted:var(--on-dark-muted);--hair:var(--on-dark-line);--on-fg:var(--ink);--hover:#ffffff14;color:var(--fg)}
.topbar{position:sticky;top:0;z-index:30;background:var(--ink);border-bottom:1px solid var(--hair)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.brand i{position:relative;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
.brand i::after{content:"";position:absolute;right:-3px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.tabs{display:flex;gap:2px;margin-left:auto;font-size:15px}
.tabs a{padding:7px 14px;border-radius:999px;white-space:nowrap;opacity:.84}
.tabs a:hover{opacity:1;background:var(--hover)}
.tabs a[aria-current=page]{opacity:1;background:var(--fg);color:var(--on-fg);font-weight:650}
.lang{display:inline-flex;padding:3px;border:0;border-radius:999px;background:none;box-shadow:inset 0 0 0 1px var(--hair);font-size:12.5px;font-weight:700;cursor:pointer}
.lang span{padding:2px 10px;border-radius:999px;opacity:.62}
html:not([data-lang=en]) .lang [data-l=zh],html[data-lang=en] .lang [data-l=en]{background:var(--fg);color:var(--on-fg);opacity:1}
.nav .btn{min-height:40px;padding:0 18px;font-size:14px}

.hero{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(60% 70% at 78% 34%,#1f4460 0,#1f446000 70%),linear-gradient(165deg,var(--ink) 0,#0a1826 100%)}
.hero-main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:64px 72px}
.hero .kicker{color:var(--accent)}
.hero h1{margin-top:22px;font-size:clamp(34px,4.05vw,58px);font-weight:900;letter-spacing:.01em;line-height:1.28}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{max-width:33em;margin-top:26px;font-size:17px;line-height:1.95;color:var(--fg-muted)}
.hero .lede b{color:var(--fg);font-weight:650}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.page-head{padding-block:52px 64px}
.page-head h1{margin-top:18px}
.page-head .lede{margin-top:18px;max-width:40em}

/* the works, laid out like prints on a table, with the orbit mark behind */
.stage{position:relative;aspect-ratio:1/.86;min-width:0}
.stage::before,.stage::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;translate:-50% -50%;box-shadow:inset 0 0 0 1px var(--hair)}
.stage::before{width:78%;aspect-ratio:1}
.stage::after{width:112%;aspect-ratio:1}
.stage .spark{position:absolute;left:89%;top:11%;width:14px;height:14px;border-radius:50%;background:var(--accent)}
.print{position:absolute;margin:0;border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 30px 60px -24px #000000a6,0 0 0 1px #ffffff1f}
.print img{width:100%;height:100%;object-fit:cover}
.print img{object-position:top left}
.print.a{left:0;top:15%;width:74%;aspect-ratio:1440/900;rotate:-2.5deg}
.print.b{right:0;top:0;width:44%;aspect-ratio:1440/900;rotate:4deg}
.print.c{right:4%;bottom:0;width:50%;aspect-ratio:16/9;rotate:2deg}

/* what is on the bench right now */
.now{border-top:1px solid var(--hair)}
.now-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:start;padding-block:26px 34px}
.now-label{padding-top:2px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted)}
.now ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;position:relative}
.now ol::before{content:"";position:absolute;left:5px;right:0;top:5px;height:1px;background:var(--hair)}
.now li{position:relative;padding-top:24px}
.now li::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 1.5px var(--fg-muted)}
.now li.on::before{background:var(--accent);box-shadow:0 0 0 4px #c9792b33}
.now b{display:block;font-family:var(--serif);font-size:17px;font-weight:700;line-height:1.4}
.now span{font-size:13px;color:var(--fg-muted)}

/* ---------- sections ---------- */
section{padding-block:80px}
.band{background:var(--paper-2);border-block:1px solid var(--line)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:36px}
.head h2{margin-top:14px;font-size:clamp(30px,3.4vw,44px);font-weight:700}
.head p{color:var(--muted);max-width:32em}

/* home: one wide row per thing the studio does */
.areas{border-top:1px solid var(--line)}
.area{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:60px;align-items:center;padding-block:56px;border-bottom:1px solid var(--line)}
.area:nth-child(even) .area-pic{order:-1}
.area .n{font-family:var(--serif);font-size:44px;font-weight:600;line-height:1;color:var(--accent)}
.area h3{margin:16px 0 10px;font-size:clamp(26px,2.7vw,36px)}
.area p{color:var(--muted);max-width:30em}
.area .items{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.area .items span{padding:2px 12px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px}
.enter{display:inline-block;margin-top:24px;padding-bottom:2px;font-weight:650;color:var(--accent-deep);border-bottom:1.5px solid currentColor}
.area:hover .enter,.teaser:hover .enter{color:var(--accent)}
.area-pic{position:relative;min-width:0;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:#e9eef6;box-shadow:0 0 0 1px var(--line),0 26px 50px -36px #3a2a1080;transition:translate .25s}
.area:hover .area-pic{translate:0 -4px}
.area-pic img{width:100%;height:100%;object-fit:cover;object-position:top center}
.area-pic.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);background:#eaf0fb}
.area-pic.duo img:first-child{object-fit:contain;object-position:bottom center;padding-top:14px}
.area-pic.duo img:last-child{object-position:center}
.area-pic.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--line)}
.area-pic.split img{object-position:top left}
.area-pic.panel{aspect-ratio:auto;padding:14px 34px;background:linear-gradient(170deg,var(--ink) 0,#0a1826 100%);color:var(--on-dark)}
.area-pic.panel li{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:20px;align-items:baseline;padding-block:20px}
.area-pic.panel li + li{border-top:1px solid var(--on-dark-line)}
.area-pic.panel b{font-family:var(--serif);font-size:20px}
.area-pic.panel span{font-size:14.5px;color:var(--on-dark-muted)}
.teaser{display:grid;grid-template-columns:150px minmax(0,1fr);gap:40px;align-items:center}
.teaser h2{margin-top:10px;font-size:clamp(28px,3vw,38px)}
.teaser p.say{margin-top:10px;color:var(--muted);max-width:36em}
.teaser .enter{margin-top:16px}

/* pages: cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.card{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px var(--line),0 18px 36px -30px #3a2a1059}
.card.wide{grid-column:1/-1;flex-direction:row;min-height:300px}
.card .shot{position:relative;aspect-ratio:16/10;background:#e9eef6;overflow:hidden}
.card.wide.text{min-height:0}
.card.wide .shot{flex:0 0 44%;aspect-ratio:auto;min-height:260px}
.card.wide .shot img,.card.wide .shot video{position:absolute;inset:0}
.card .shot img,.card .shot video{width:100%;height:100%;object-fit:cover;object-position:top center}
.card .shot.film{background:var(--ink)}
.card .shot.film video{object-fit:contain;object-position:center}
.card .shot.fit{background:#eaf0fb}
.card .shot.fit img{object-fit:contain;object-position:center}
.card .shot .tag{position:absolute;left:12px;bottom:12px;padding:1px 9px;border-radius:6px;background:#0f2233cc;color:#fff;font-size:12px;pointer-events:none}
.card .shot video + .tag{bottom:auto;top:12px}
.card .body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:24px 26px 26px;min-width:0}
.card .top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.card h4{font-size:21px;line-height:1.35}
.card .role{font-size:13px;color:var(--faint);letter-spacing:.02em}
.card p{font-size:15px;color:var(--muted);line-height:1.8}
.card p.note{font-size:13px;color:var(--faint)}
.card .more{display:flex;gap:10px;margin-top:6px;width:100%}
.card .more img{flex:1 1 0;min-width:0;aspect-ratio:16/11;object-fit:cover;border-radius:8px}
.cast{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.cast img{width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.flow{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;font-size:13px}
.flow li{padding:1px 10px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.flow li + li::before{content:"→";margin:0 8px 0 -4px;color:var(--faint)}
.card .go{margin-top:10px;min-height:40px;padding:0 18px;font-size:14px}
.sub{margin:60px 0 20px;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.next3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.next3 li{padding:22px 24px 24px;border-radius:16px;border:1.5px dashed #cfc6b1;color:var(--muted);font-size:14.5px}
.next3 b{display:block;margin:12px 0 2px;font-family:var(--serif);font-size:19px;color:var(--text)}
.empty{padding:30px 30px;border-radius:16px;border:1.5px dashed #cfc6b1;color:var(--muted)}
.empty b{display:block;margin-bottom:4px;font-family:var(--serif);font-size:19px;color:var(--text)}

/* light-travel scale, drawn to scale: 100% = 30.07 AU */
.au-box{width:100%;overflow-x:auto;padding-bottom:2px}
.au{position:relative;min-width:560px;height:128px;margin-inline:8px 12px}
.au::before{content:"";position:absolute;left:0;right:0;top:63px;height:2px;background:linear-gradient(90deg,var(--accent),var(--line) 12%)}
.au i{position:absolute;top:64px;left:calc(var(--x) * 1%);width:var(--w,8px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--k,var(--faint))}
.au span{position:absolute;left:calc(var(--x) * 1%);font-size:12.5px;line-height:1.5;color:var(--faint);white-space:nowrap;translate:-50% 0}
.au span b{display:block;font-family:var(--serif);font-size:15.5px;color:var(--text)}
.au span.up{top:4px}.au span.down{top:80px}
.au span.first{translate:-8px 0}.au span.last{translate:-100% 0;text-align:right}

/* training */
.offers{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}
.offer:first-child{grid-row:span 2}
.offer{padding:28px 28px 30px;border-radius:16px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 18px 36px -30px #3a2a1059}
.offer h3{margin:14px 0 8px;font-size:23px}
.offer p{font-size:15px;color:var(--muted)}
.offer ul{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:12px;font-size:14.5px}
.offer li b{display:block;font-weight:650}
.offer li span{color:var(--faint);font-size:13.5px}
.talk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.talk p{font-family:var(--serif);font-size:21px}

/* founder */
.about{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:64px;align-items:start}
.portrait{aspect-ratio:4/5;border-radius:18px;display:grid;place-items:center;text-align:center;color:var(--faint);font-size:14px;
  background:repeating-linear-gradient(135deg,#efe8d8 0 14px,#f4eee0 14px 28px);box-shadow:inset 0 0 0 1px var(--line)}
.portrait b{display:block;font-family:var(--serif);font-size:20px;color:var(--muted)}
.portrait.small{aspect-ratio:1;border-radius:50%;font-size:12px}
img.portrait{display:block;height:auto;object-fit:cover;background:none;box-shadow:0 0 0 1px var(--line),0 24px 48px -34px #3a2a1066}
.portrait.mark-only{background:linear-gradient(165deg,var(--ink) 0,#0a1826 100%);box-shadow:none}
.portrait .glyph{position:relative;width:34%;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 2px var(--on-dark)}
.portrait.small .glyph{width:42%}
.portrait .glyph::after{content:"";position:absolute;right:-8%;top:6%;width:28%;aspect-ratio:1;border-radius:50%;background:var(--accent)}
.portrait.small b{font-size:16px}
.about h2{font-size:clamp(32px,3.6vw,46px)}
.about .title{margin-top:6px;color:var(--muted)}
.about .prose{display:grid;gap:14px;margin-top:22px;max-width:38em;font-size:16.5px}
.path{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.path li{position:relative;padding-left:22px}
.path li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--faint)}
.path li.on::before{background:var(--accent);box-shadow:none}
.path .when{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--faint)}
.path b{display:block;font-family:var(--serif);font-size:18px}
.path p{font-size:14px;color:var(--muted)}
.skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px;margin-top:28px}
.skills dt{font-size:13px;color:var(--faint);margin-bottom:6px}
.skills dd{display:flex;flex-wrap:wrap;gap:6px}
.skills dd span{padding:1px 11px;border-radius:999px;background:var(--card);font-size:13.5px;box-shadow:inset 0 0 0 1px var(--line)}

/* contact */
.contact{text-align:center}
.contact h2{margin-top:16px;font-size:clamp(34px,4.4vw,58px);font-weight:700}
.contact p{max-width:30em;margin:18px auto 0;color:var(--muted)}
.contact .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.ways{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;margin-top:30px;font-size:14.5px;color:var(--muted)}
.ways b{margin-right:8px;color:var(--text);font-weight:650}
.ways em{font-style:normal;color:var(--faint)}

footer{background:var(--ink);color:var(--on-dark-muted);font-size:13.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 32px;align-items:center;justify-content:space-between;padding-block:34px}
footer .brand{color:var(--on-dark);font-size:18px}

@media (max-width:1060px){
  .nav .btn{display:none}
}
@media (max-width:980px){
  .nav{padding-block:12px 8px}
  .lang{margin-left:auto}
  .tabs{order:5;flex-basis:100%;margin-left:-8px;margin-right:-8px;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .hero-main{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:36px 56px}
  .stage{width:min(100%,560px);margin-inline:auto}
  .page-head{padding-block:36px 44px}
  .now-in{grid-template-columns:minmax(0,1fr);gap:18px}
  .now ol{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
  .now ol::before{display:none}
  section{padding-block:60px}
  .head{grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:28px}
  .area{grid-template-columns:minmax(0,1fr);gap:26px;padding-block:44px}
  .area .area-pic,.area:nth-child(even) .area-pic{order:-1}
  .offers,.next3{grid-template-columns:minmax(0,1fr)}
  .offer:first-child{grid-row:auto}
  .about{grid-template-columns:minmax(0,1fr);gap:32px}
  .portrait{width:min(100%,300px)}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 40px)}
  .tabs a{padding:6px 11px;font-size:14.5px}
  .cards,.path,.skills{grid-template-columns:minmax(0,1fr)}
  .card.wide{flex-direction:column;min-height:0}
  .card.wide .shot{flex:none;aspect-ratio:16/11;min-height:0}
  .now ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .area-pic.panel{padding:8px 22px}
  .area-pic.panel li{grid-template-columns:minmax(0,1fr);gap:2px;padding-block:16px}
  .teaser{grid-template-columns:minmax(0,1fr);gap:22px}
  .portrait.small{width:120px}
  .talk{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.area-pic{transition:none}}

/* ---------- v5: type-led hero mark, lines of work, principles ---------- */
.brand small{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.14em;opacity:.6;margin-left:2px}
.tabs a b{font-weight:inherit}
.tabs a span{margin-left:6px;font-size:13px;opacity:.7}
.mark{position:relative;aspect-ratio:1/.78;min-width:0;display:grid;place-items:center}
.mark::before,.mark::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;translate:-50% -50%;box-shadow:inset 0 0 0 1px var(--hair)}
.mark::before{width:70%;aspect-ratio:1}
.mark::after{width:104%;aspect-ratio:1}
.mark .spark{position:absolute;left:86%;top:13%;width:14px;height:14px;border-radius:50%;background:var(--accent)}
.mark .glyphs{position:relative;font-family:"Noto Serif SC","Songti SC",serif;font-weight:900;font-size:clamp(110px,15.5vw,236px);line-height:1;letter-spacing:.02em;white-space:nowrap;color:var(--fg)}
.mark .sub-mark{position:absolute;left:50%;bottom:9%;translate:-50% 0;font-size:12px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:var(--fg-muted);white-space:nowrap}
.now ol.three-up{grid-template-columns:repeat(3,minmax(0,1fr))}
.now li.on::before{background:var(--accent);box-shadow:none}
.lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.lob{display:flex;flex-direction:column;align-items:flex-start;padding:36px 36px 8px 0;min-width:0}
.lob + .lob{padding-left:36px;border-left:1px solid var(--line)}
.lob .n{font-family:var(--serif);font-size:44px;font-weight:600;line-height:1;color:var(--accent)}
.lob h3{margin-top:20px;font-size:34px;letter-spacing:.01em}
.lob .what{margin-top:2px;font-weight:650;color:var(--text)}
.lob p.say{margin-top:12px;color:var(--muted);font-size:15.5px}
.lob ul{margin:18px 0 6px;display:grid;gap:7px;font-size:14.5px}
.lob li{position:relative;padding-left:18px}
.lob li::before{content:"";position:absolute;left:0;top:.86em;width:8px;height:1.5px;background:var(--accent)}
.lob .chip{margin-top:8px}
.lob .enter{margin-top:auto}
.lob .enter-wrap{margin-top:auto;padding-top:18px}
.lob:hover .enter{color:var(--accent)}
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pick .shot{aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#e9eef6;box-shadow:0 0 0 1px var(--line),0 18px 36px -30px #3a2a1059;transition:translate .25s}
.pick:hover .shot{translate:0 -4px}
.pick img{width:100%;height:100%;object-fit:cover;object-position:top left}
.pick b{display:block;margin-top:16px;font-family:var(--serif);font-size:20px;line-height:1.35}
.pick span{font-size:13.5px;color:var(--faint)}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
.principles li::before{content:"";display:block;width:34px;height:2px;margin-bottom:20px;background:var(--accent)}
.principles h3{font-size:clamp(22px,2.1vw,27px);line-height:1.4}
.principles p{margin-top:10px;color:var(--muted);font-size:15.5px}
.cap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 22px;align-items:baseline;margin:64px 0 24px;padding-top:30px;border-top:1px solid var(--line)}
.cap.first{margin-top:0;padding-top:0;border-top:0}
.cap .n{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1;color:var(--accent)}
.cap h2{font-size:clamp(24px,2.5vw,32px)}
.cap p{grid-column:2;max-width:42em;color:var(--muted)}
.next3{margin-top:22px}
@media (max-width:980px){
  .mark{width:min(100%,460px);margin-inline:auto}
  .lines,.principles,.picks{grid-template-columns:minmax(0,1fr)}
  .lob,.lob + .lob{padding:30px 0 26px;border-left:0}
  .lob + .lob{border-top:1px solid var(--line)}
  .principles{gap:34px}
  .now ol.three-up{grid-template-columns:minmax(0,1fr);row-gap:18px}
}
@media (max-width:640px){
  .brand small{display:none}
  .tabs a span{display:none}
  .tabs{justify-content:space-between}
  .tabs a{padding:6px 7px}
  .cap{grid-template-columns:minmax(0,1fr);margin-top:48px}
  .cap p{grid-column:1}
}
@media (prefers-reduced-motion:reduce){.pick .shot{transition:none}}
/* hero picture: frontier AI goes in, the engine in the middle, three useful things come out */
.engine{min-width:0}
.engine svg{display:block;width:100%;height:auto;overflow:visible}
.engine .ln{fill:none;stroke:var(--fg);stroke-opacity:.3;stroke-width:1.2}
.engine .ln.out{stroke-opacity:.66;stroke-width:1.8}
.engine .dot{fill:var(--fg);fill-opacity:.6}
.engine .dot.o{fill:none;stroke:var(--fg);stroke-opacity:.55;stroke-width:1.2}
.engine .core{fill:var(--fg);fill-opacity:.06}
.engine .ring{fill:none;stroke:var(--fg);stroke-width:2}
.engine .ring.dash{stroke-opacity:.5;stroke-dasharray:3 8;transform-box:fill-box;transform-origin:center;animation:eng-spin 48s linear infinite}
.engine .amber{fill:var(--accent)}
.engine .spark-in{fill-opacity:.85}
.engine .t-main{font-family:var(--serif);font-weight:700;font-size:27px;fill:var(--fg)}
.engine .t-big{font-size:38px}
.engine .t-sub{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;fill:var(--fg-muted)}
.engine .pill .t-sub{font-size:11.5px;letter-spacing:.1em}
.engine .t-note{font-family:var(--sans);font-size:14.5px;fill:var(--fg-muted)}
.engine .pill rect{fill:var(--fg);fill-opacity:.07;stroke:var(--fg);stroke-opacity:.5;stroke-width:1.2;transition:stroke .2s,fill-opacity .2s}
.engine a.pill{cursor:pointer}
html[data-lang=en] .engine .pill .t-sub{display:none}
.engine a.pill:hover rect,.engine a.pill:focus-visible rect{stroke:var(--accent);stroke-opacity:1;fill-opacity:.12}
@keyframes eng-spin{to{rotate:360deg}}
@media (max-width:980px){.engine{width:min(100%,560px);margin-inline:auto}}
@media (max-width:640px){.engine .pill .t-sub{display:none}.engine .t-sub{font-size:17px;letter-spacing:.06em}.engine .t-note{font-size:17px}.engine .t-main{font-size:30px}.engine .t-big{font-size:40px}}
@media (prefers-reduced-motion:reduce){.engine .ring.dash{animation:none}}

/* ---------- Insights: find, filter, list ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.finder{display:grid;gap:16px;padding:26px 28px;border-radius:18px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.search{display:block;position:relative}
.search::before{content:"";position:absolute;left:20px;top:50%;width:15px;height:15px;translate:0 -60%;border-radius:50%;box-shadow:inset 0 0 0 2px var(--faint)}
.search::after{content:"";position:absolute;left:33px;top:50%;width:8px;height:2px;translate:0 5px;rotate:45deg;background:var(--faint);border-radius:2px}
.search input{width:100%;min-height:54px;padding:0 20px 0 52px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:17px;color:var(--text);-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:2px solid var(--accent);outline-offset:2px}
.filter{display:grid;grid-template-columns:4.6em minmax(0,1fr);gap:12px;align-items:baseline}
.f-label{font-size:13px;color:var(--faint)}
.f-chips{display:flex;flex-wrap:wrap;gap:8px}
.f-chips button{padding:4px 14px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;line-height:1.7;color:var(--text);cursor:pointer}
.f-chips button small{margin-left:6px;font-size:12px;color:var(--faint)}
.f-chips button:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.f-chips button[aria-pressed=true]{background:var(--ink);color:var(--on-dark);box-shadow:none}
.f-chips button[aria-pressed=true] small{color:var(--on-dark-muted)}
.f-chips button:disabled{opacity:.45;cursor:default;box-shadow:inset 0 0 0 1px var(--line)}
.ins-count{margin:26px 0 14px;font-size:14px;color:var(--faint)}
.posts{display:grid;gap:18px}
.card.wide.post{min-height:220px;color:inherit;transition:translate .2s,box-shadow .2s}
.card.wide.post:hover{translate:0 -3px;box-shadow:0 0 0 1px var(--accent),0 22px 40px -30px #3a2a1080}
.card.wide.post .shot{flex:0 0 34%;min-height:0}
.card.wide.post .shot img{object-position:center}
.post h4{font-size:23px;line-height:1.4}
.post .p-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.post .p-tags span{padding:1px 11px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--muted)}
mark{padding:0 1px;border-radius:3px;background:#f3d9b4;color:inherit}
#ins-none{margin-top:6px}
#ins-none .btn{margin-top:14px;min-height:38px;font-size:14px}
@media (max-width:640px){
  .finder{padding:20px}
  .filter{grid-template-columns:minmax(0,1fr);gap:6px}
  .card.wide.post .shot{flex:none}
}
@media (prefers-reduced-motion:reduce){.card.wide.post{transition:none}}