:root {
  color-scheme: light;
  --paper: #f3efe6;
  --paper-deep: #e9e2d5;
  --ink: #1c211f;
  --ink-soft: #62655f;
  --line: rgba(28, 33, 31, .17);
  --accent: #b53a2d;
  --accent-soft: #d86b51;
  --night: #1b211f;
  --night-soft: #252d2a;
  --white: #fbf8f1;
  --serif: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  --sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.paper-noise { position: fixed; inset: 0; z-index: 20; opacity: .12; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 14px; color: white; background: var(--accent); transform: translateY(-150%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 4px; }

.site-header { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; width: min(calc(100% - 48px), var(--max)); min-height: 96px; margin: auto; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: 12px; }
.wordmark > span:last-child { display: flex; align-items: baseline; gap: 7px; }
.wordmark strong { font-size: 19px; letter-spacing: .04em; }.wordmark small { color: var(--ink-soft); font-family: var(--serif); }
.seal { display: grid; place-items: center; width: 38px; height: 38px; color: var(--paper); background: var(--accent); font-family: Georgia, serif; font-size: 19px; font-style: italic; }
.seal.small { width: 34px; height: 34px; font-size: 16px; }
nav { display: flex; align-items: center; gap: clamp(20px, 3.5vw, 52px); }
nav a { position: relative; padding: 12px 0; color: #454944; font-size: 13px; letter-spacing: .06em; }
nav a::after { position: absolute; right: 0; bottom: 5px; left: 0; height: 1px; background: var(--accent); content: ""; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.theme-toggle { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; cursor: pointer; transition: background .2s, color .2s; }
.theme-toggle:hover { color: var(--paper); background: var(--ink); }

main { overflow: hidden; }
.hero { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1.2fr) minmax(280px, .8fr) 80px; align-items: center; gap: clamp(18px, 4vw, 64px); width: min(calc(100% - 48px), var(--max)); min-height: 680px; margin: auto; padding: 72px 0 88px; }
.hero-index { align-self: start; padding-top: 9px; color: var(--accent); font-family: Georgia, serif; font-size: 13px; writing-mode: vertical-rl; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 38px; color: var(--ink-soft); font-size: 10px; font-weight: 650; letter-spacing: .19em; }.eyebrow span { width: 38px; height: 1px; background: var(--accent); }
h1 { max-width: 730px; margin: 0; font-family: var(--serif); font-size: clamp(44px, 5.8vw, 78px); font-weight: 500; line-height: 1.22; letter-spacing: -.055em; }
h1 em { color: var(--accent); font-style: normal; }
.lead { max-width: 600px; margin: 38px 0 34px; color: var(--ink-soft); font-family: var(--serif); font-size: 17px; line-height: 2; }
.read-link { display: inline-flex; align-items: center; gap: 52px; padding: 12px 0; border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 650; letter-spacing: .08em; }.read-link span { font-size: 18px; transition: transform .2s; }.read-link:hover span { transform: translate(4px, 4px); }
.hero-art { position: relative; aspect-ratio: 1; min-width: 280px; }
.orbit { position: absolute; border: 1px solid var(--line); border-radius: 50%; }.orbit-one { inset: 10%; }.orbit-two { inset: 28%; border-style: dashed; animation: spin 30s linear infinite; }
.hero-art::before,.hero-art::after { position: absolute; background: var(--line); content: ""; }.hero-art::before { top: 50%; right: 0; left: 0; height: 1px; }.hero-art::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.sun { position: absolute; top: 36%; left: 36%; width: 28%; height: 28%; border-radius: 50%; background: var(--accent); box-shadow: 28px 25px 0 -8px var(--paper-deep); }
.art-label { position: absolute; z-index: 2; padding: 4px 8px; color: var(--ink-soft); background: var(--paper); font-size: 9px; letter-spacing: .16em; }.art-label.top { top: 7%; left: 49%; }.art-label.bottom { right: 2%; bottom: 15%; }
.hero-aside { color: var(--ink-soft); font-family: var(--serif); font-size: 12px; line-height: 2; writing-mode: vertical-rl; }
@keyframes spin { to { transform: rotate(360deg); } }

.section { padding: 110px max(24px, calc((100vw - var(--max)) / 2)); scroll-margin-top: 20px; }
.section-heading { display: grid; grid-template-columns: 130px minmax(260px, .75fr) minmax(280px, .6fr); align-items: end; gap: 38px; padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.section-heading > div { display: flex; align-items: center; gap: 13px; }.section-number { color: var(--accent); font-family: Georgia, serif; font-size: 13px; }.section-heading > div p { margin: 0; color: var(--ink-soft); font-size: 9px; letter-spacing: .16em; }
.section h2 { margin: 0; font-family: var(--serif); font-size: clamp(34px, 4vw, 54px); font-weight: 500; letter-spacing: -.04em; }.section-heading > p { margin: 0; color: var(--ink-soft); font-family: var(--serif); font-size: 14px; line-height: 1.8; }
.notes-list { border-bottom: 1px solid var(--line); }.note { position: relative; display: grid; grid-template-columns: 180px 1fr 60px; gap: 28px; padding: 42px 6px; border-bottom: 1px solid var(--line); transition: padding .25s, background .25s; }.note:last-child { border-bottom: 0; }.note:hover { padding-right: 20px; padding-left: 20px; background: rgba(255,255,255,.22); }
.note-meta { display: flex; flex-direction: column; gap: 10px; color: var(--ink-soft); font-size: 10px; letter-spacing: .12em; }.note-meta span { color: var(--accent); }.note-body h3 { margin: 0 0 13px; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; }.note-body p { max-width: 720px; margin: 0; color: var(--ink-soft); font-family: var(--serif); font-size: 14px; line-height: 1.9; }.note-mark { align-self: center; color: var(--line); font-family: Georgia, serif; font-size: 36px; font-style: italic; }

.topics-section { color: var(--white); background: var(--night); }.section-heading.inverse { border-color: rgba(255,255,255,.18); }.inverse .section-number { color: #e57a5e; }.inverse > div p,.inverse > p { color: #aeb6b1; }
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); }.topic-grid article { position: relative; min-height: 330px; padding: 40px 28px; border-right: 1px solid rgba(255,255,255,.15); overflow: hidden; }.topic-grid article:last-child { border-right: 0; }.topic-grid article > span { color: #e57a5e; font-family: Georgia, serif; font-size: 12px; }.topic-grid h3 { margin: 80px 0 20px; font-family: var(--serif); font-size: 26px; font-weight: 500; }.topic-grid p { color: #aeb6b1; font-family: var(--serif); font-size: 13px; line-height: 1.9; }.topic-grid small { position: absolute; bottom: 36px; color: #69736e; font-size: 9px; letter-spacing: .16em; }.topic-grid article::after { position: absolute; right: -50px; bottom: -70px; width: 150px; height: 150px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ""; transition: transform .5s, border-color .5s; }.topic-grid article:hover::after { border-color: var(--accent-soft); transform: scale(1.35); }

.project-board { display: grid; grid-template-columns: 1fr 300px; gap: 26px; padding-top: 42px; }.project-main { display: grid; grid-template-columns: minmax(250px, .9fr) 1.1fr; align-items: center; min-height: 390px; border: 1px solid var(--line); }.project-main > div:last-child { padding: 42px; }.project-tag { color: var(--accent); font-size: 9px; font-weight: 650; letter-spacing: .16em; }.project-main h3 { margin: 22px 0 18px; font-family: var(--serif); font-size: 40px; font-weight: 500; }.project-main p:not(.project-tag) { color: var(--ink-soft); font-family: var(--serif); font-size: 14px; line-height: 1.9; }.project-visual { position: relative; align-self: stretch; min-height: 300px; overflow: hidden; background: var(--paper-deep); }.project-visual::before { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.8%, rgba(28,33,31,.12) 50%, transparent 50.2%),linear-gradient(transparent 49.8%, rgba(28,33,31,.12) 50%, transparent 50.2%); background-size: 48px 48px; content: ""; }.project-visual > i { position: absolute; right: 18%; bottom: 17%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }.signal { position: absolute; top: 50%; left: 50%; z-index: 2; border: 1px solid var(--ink); border-radius: 50%; transform: translate(-50%,-50%); }.s1 { width: 42px; height: 42px; background: var(--ink); }.s2 { width: 120px; height: 120px; }.s3 { width: 230px; height: 230px; opacity: .5; }.project-state { display: flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 11px; }.project-state i { width: 7px; height: 7px; border-radius: 50%; background: #3a9d68; box-shadow: 0 0 0 5px rgba(58,157,104,.13); }
.project-note { display: flex; flex-direction: column; justify-content: space-between; padding: 36px; color: var(--white); background: var(--accent); }.project-note > span { font-size: 9px; letter-spacing: .16em; opacity: .75; }.project-note blockquote { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1.75; }.project-note p { margin: 0; font-family: Georgia, serif; font-size: 11px; font-style: italic; opacity: .72; }

.about-section { display: grid; grid-template-columns: .65fr 1fr .55fr; gap: clamp(36px, 6vw, 90px); align-items: start; border-top: 1px solid var(--line); }.about-title > span { display: block; margin-bottom: 22px; color: var(--accent); font-size: 9px; letter-spacing: .17em; }.about-copy p { margin: 0 0 20px; color: var(--ink-soft); font-family: var(--serif); font-size: 15px; line-height: 2; }.about-sign { padding-top: 18px; border-top: 1px solid var(--ink); }.about-sign strong,.about-sign span { display: block; }.about-sign strong { font-family: Georgia, serif; font-size: 30px; font-style: italic; font-weight: 500; }.about-sign span { margin-top: 7px; color: var(--ink-soft); font-family: var(--serif); font-size: 11px; }

footer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 40px; width: min(calc(100% - 48px), var(--max)); min-height: 150px; margin: auto; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; }.footer-brand { display: flex; align-items: center; gap: 12px; }.footer-brand strong,.footer-brand small { display: block; }.footer-brand strong { color: var(--ink); font-size: 13px; }.footer-brand small { margin-top: 4px; font-family: var(--serif); }.filing { padding: 8px 12px; border: 1px solid var(--line); transition: color .2s, border-color .2s; }.filing:hover,.filing:focus-visible { color: var(--accent); border-color: var(--accent); }

[data-theme="dark"] { color-scheme: dark; --paper: #1c211f; --paper-deep: #272d2a; --ink: #f0ece3; --ink-soft: #adb3ae; --line: rgba(240,236,227,.17); --night: #111513; --night-soft: #1a201d; --white: #f8f4eb; }
[data-theme="dark"] .topic-grid article,[data-theme="dark"] .topics-section { background: #111513; }[data-theme="dark"] .note:hover { background: rgba(255,255,255,.035); }[data-theme="dark"] .sun { box-shadow: 28px 25px 0 -8px #303733; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 34px 1fr minmax(240px,.65fr); min-height: 600px; }.hero-aside { display: none; }.section-heading { grid-template-columns: 100px 1fr; }.section-heading > p { grid-column: 2; }.topic-grid { grid-template-columns: repeat(2,1fr); }.topic-grid article:nth-child(2) { border-right: 0; }.topic-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.15); }.project-board { grid-template-columns: 1fr; }.project-note { min-height: 250px; }.about-section { grid-template-columns: 1fr 1.4fr; }.about-sign { grid-column: 2; }
}
@media (max-width: 720px) {
  .site-header { width: min(calc(100% - 32px), var(--max)); min-height: 78px; }.wordmark small { display: none; }nav { order: 3; width: 100%; justify-content: space-between; gap: 10px; }.site-header { flex-wrap: wrap; padding: 14px 0 10px; }.theme-toggle { width: 38px; height: 38px; }.hero { grid-template-columns: 1fr; width: min(calc(100% - 32px), var(--max)); min-height: auto; padding: 80px 0; }.hero-index { display: none; }.hero-art { width: min(82vw,350px); margin: 35px auto 0; }.section { padding: 80px 16px; }.section-heading { grid-template-columns: 1fr; gap: 18px; }.section-heading > p { grid-column: 1; }.section-heading > div { order: -1; }.note { grid-template-columns: 1fr; gap: 18px; padding: 32px 4px; }.note-meta { flex-direction: row; justify-content: space-between; }.note-mark { display: none; }.topic-grid { grid-template-columns: 1fr; }.topic-grid article { min-height: 270px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }.topic-grid h3 { margin-top: 52px; }.project-main { grid-template-columns: 1fr; }.project-main > div:last-child { padding: 30px 24px; }.project-visual { min-height: 270px; }.about-section { grid-template-columns: 1fr; }.about-sign { grid-column: 1; }.footer-brand { grid-column: 1 / -1; }footer { grid-template-columns: 1fr; gap: 16px; padding: 34px 0; width: calc(100% - 32px); }.filing { width: max-content; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }