@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700;800&family=Noto+Serif+SC:wght@600;700;900&display=swap');

:root { --ink:#09172a; --ink-soft:#152943; --orange:#ff5a1f; --paper:#fff; --mist:#eff3f6; --text:#172334; --muted:#607085; --line:#dce2e8; --shell:1200px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--text); font-family:"Noto Sans SC", Arial, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.shell { width:min(calc(100% - 80px),var(--shell)); margin-inline:auto; }
.site-header { background:var(--ink); color:white; position:sticky; top:0; z-index:10; box-shadow:0 1px 0 rgba(255,255,255,.08); }
.nav-wrap { height:76px; display:flex; align-items:center; justify-content:space-between; }
.wordmark { font-family:"DM Mono",monospace; letter-spacing:.04em; font-size:20px; font-weight:500; color:#fff; }
.wordmark span { color:var(--orange); }
.primary-nav { display:flex; align-items:stretch; height:100%; gap:34px; }
.primary-nav a { display:flex; align-items:center; position:relative; color:#d5dde8; font-size:14px; font-weight:600; transition:color .2s ease; }
.primary-nav a:hover,.primary-nav a.active { color:#fff; }
.primary-nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--orange); }
.menu-toggle { display:none; border:0; background:transparent; padding:8px 0; }
.menu-toggle span { display:block; width:26px; height:2px; margin:6px 0; background:white; }
.hero { display:grid; grid-template-columns:50% 50%; min-height:550px; align-items:center; overflow:hidden; }
.hero-copy { padding:70px 0 76px; position:relative; z-index:1; }
.accent-rule { width:50px; height:4px; background:var(--orange); margin-bottom:32px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { color:var(--ink); }
h1 { font:900 clamp(37px,4.2vw,63px)/1.24 "Noto Serif SC",serif; letter-spacing:-.045em; margin-bottom:26px; }
.hero-copy>p { max-width:420px; color:#556375; font-size:16px; line-height:1.9; margin-bottom:34px; }
.text-link { color:var(--orange); font-weight:700; display:inline-flex; gap:13px; align-items:center; border-bottom:2px solid var(--orange); padding-bottom:7px; }
.text-link span { font-size:22px; line-height:.6; transition:transform .2s ease; }.text-link:hover span { transform:translateX(5px); }
.hero-visual { height:100%; min-height:550px; background:var(--ink); overflow:hidden; position:relative; }
.hero-visual::before { content:""; position:absolute; inset:0 auto 0 0; width:19%; z-index:1; background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.88) 28%,transparent 100%); }
.hero-visual img { display:block; width:100%; height:100%; min-height:550px; object-fit:cover; object-position:65% center; }
.writing { padding:105px 0 116px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:28px; border-bottom:1px solid var(--line); padding-bottom:22px; }
.section-kicker { color:var(--orange); text-transform:uppercase; letter-spacing:.12em; font:500 11px/1 "DM Mono",monospace; margin-bottom:13px; }
.section-head h2,.about h2,.subscribe h2 { font:800 clamp(26px,2.3vw,36px)/1.25 "Noto Serif SC",serif; letter-spacing:-.04em; margin-bottom:0; }
.quiet { color:var(--muted); font-size:14px; line-height:1.65; max-width:335px; margin-bottom:0; text-align:right; }
.article-list { margin-top:4px; }
.article-row { display:grid; grid-template-columns:72px 1fr 32px; align-items:center; gap:20px; padding:31px 5px 32px; border-bottom:1px solid var(--line); transition:padding .25s ease, background .25s ease; }
.article-row:hover { padding-left:16px; padding-right:16px; background:#fafbfd; }
.article-index { color:var(--orange); font:500 13px/1 "DM Mono",monospace; align-self:start; padding-top:8px; }
.article-meta { color:#778595; font-size:12px; margin-bottom:9px; }.article-row h3 { font:700 22px/1.45 "Noto Serif SC",serif; letter-spacing:-.025em; margin-bottom:7px; }.article-row p:not(.article-meta) { color:var(--muted); font-size:14px; line-height:1.75; margin-bottom:0; }
.arrow-link { font-size:28px; color:var(--orange); text-align:right; transition:transform .2s ease; }.article-row:hover .arrow-link { transform:translateX(5px); }
.topics { padding:89px 0 82px; background:var(--ink); color:white; position:relative; overflow:hidden; }.topics::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:27px 27px; mask-image:linear-gradient(90deg,transparent,black 25%,black 75%,transparent); }
.topics .shell { position:relative; }.section-head-invert { border-color:rgba(255,255,255,.18); }.section-head-invert h2 { color:white; }.section-head-invert .quiet { color:#b1bdca; }
.topic-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:38px; }.topic { padding:0 25px 0 0; margin-right:25px; min-height:190px; border-right:1px solid rgba(255,255,255,.28); position:relative; }.topic:last-child { border:0; margin-right:0; }.topic-number { color:var(--orange); font:500 12px/1 "DM Mono",monospace; }.topic h3 { color:white; font:700 19px/1.45 "Noto Serif SC",serif; margin:19px 0 8px; }.topic p { color:#bdc7d3; font-size:13px; line-height:1.8; margin:0; }.topic-arrow { position:absolute; bottom:0; left:0; color:var(--orange); font-size:24px; transition:transform .2s ease; }.topic:hover .topic-arrow { transform:translate(4px,-4px); }
.about { display:grid; grid-template-columns:1fr 1fr; gap:96px; padding:104px 0 112px; }.about-copy { border-right:1px solid var(--line); padding-right:82px; }.about h2,.subscribe h2 { font-size:29px; margin-bottom:20px; }.about-copy>p:last-child { color:#59687a; font-size:15px; line-height:2; margin:0; }.subscribe { padding-top:1px; }.subscribe label { display:block; font-size:13px; font-weight:600; margin:24px 0 8px; }.subscribe-row { display:flex; }.subscribe input { min-width:0; flex:1; height:48px; padding:0 14px; border:1px solid #bdc8d3; border-right:0; font:14px "Noto Sans SC",sans-serif; color:var(--ink); outline-color:var(--orange); }.subscribe button { border:0; background:var(--orange); color:white; padding:0 25px; font:700 14px "Noto Sans SC",sans-serif; cursor:pointer; transition:background .2s ease; }.subscribe button:hover { background:#e64a13; }.form-note { color:#7b8796; font-size:12px; margin:10px 0 0; }
.site-footer { background:var(--ink); color:#c6d1de; padding:34px 0; }.footer-wrap { display:flex; align-items:end; justify-content:space-between; gap:30px; }.site-footer .wordmark { display:inline-block; font-size:16px; margin-bottom:11px; }.site-footer p { font-size:12px; margin:0; color:#acb9c8; }.footer-wrap>p { white-space:nowrap; }
@media (max-width:850px) { .shell { width:min(calc(100% - 40px),var(--shell)); }.nav-wrap { height:66px; }.menu-toggle { display:block; }.primary-nav { display:none; position:absolute; top:66px; right:0; left:0; height:auto; padding:11px 20px 20px; background:var(--ink); border-top:1px solid rgba(255,255,255,.12); flex-direction:column; gap:0; }.primary-nav.open { display:flex; }.primary-nav a { padding:13px 0; }.primary-nav a.active::after { right:auto; width:26px; }.hero { min-height:0; grid-template-columns:1fr; }.hero-copy { padding:72px 0 44px; }.hero-visual,.hero-visual img { min-height:330px; height:330px; }.hero-visual::before { width:30%; }.writing { padding:70px 0 78px; }.section-head { align-items:start; flex-direction:column; }.quiet { text-align:left; }.topic-grid { grid-template-columns:repeat(2,1fr); gap:36px 0; }.topic:nth-child(2) { border-right:0; margin-right:0; }.topic:nth-child(-n+2) { min-height:165px; }.about { grid-template-columns:1fr; gap:50px; padding:75px 0; }.about-copy { border:0; border-bottom:1px solid var(--line); padding:0 0 48px; }.footer-wrap { align-items:start; flex-direction:column; }.footer-wrap>p { white-space:normal; } }
@media (max-width:540px) { .shell { width:calc(100% - 32px); }.hero-copy { padding-top:55px; }.accent-rule { margin-bottom:24px; }.hero-copy>p { font-size:14px; }.hero-visual,.hero-visual img { min-height:260px; height:260px; }.article-row { grid-template-columns:35px 1fr 20px; gap:10px; padding:23px 0; }.article-row h3 { font-size:18px; }.article-row p:not(.article-meta) { font-size:13px; }.arrow-link { font-size:21px; }.topic-grid { grid-template-columns:1fr; gap:0; }.topic,.topic:nth-child(2) { border-right:0; border-bottom:1px solid rgba(255,255,255,.24); margin:0; padding:20px 0 27px; min-height:0; }.topic:last-child { border-bottom:0; }.topic h3 { margin:12px 0 5px; }.topic-arrow { right:0; left:auto; bottom:24px; }.about h2,.subscribe h2 { font-size:25px; }.subscribe-row { flex-direction:column; gap:8px; }.subscribe input { border-right:1px solid #bdc8d3; }.subscribe button { height:47px; }.site-footer { padding:28px 0; } }