/* Shell for the section pages: tokens, nav, hero, the sticky tab bar with its year picker, the year
   blocks with their news photos and rows, footer.
   Flat: a white page, near-black type, hairlines instead of cards, one rose accent. */
:root{
 color-scheme:light;
 --bg:#fff;--fill:#f5f5f7;
 --ink:#1d1d1f;--ink-2:#424245;--gray:#6e6e73;--gray-2:#86868b;
 --line:#e5e5ea;--line-2:#d2d2d7;
 --accent:#bc486a;
 --r:8px;--r-art:4px;
 --gutter:clamp(16px,4vw,48px);--max:1120px;--bar-h:52px;
 --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
 --font-ja:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;
 --font-brand:Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font);line-break:strict;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,select{font:inherit;color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
[lang=ja]{font-family:var(--font-ja)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ext{flex:none;width:9px;height:9px}

.site-nav,main,footer{width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto}
.skip{position:fixed;z-index:40;left:16px;top:10px;padding:8px 14px;border-radius:var(--r);background:var(--ink);color:#fff;font-size:14px;transform:translateY(-180%)}
.skip:focus{transform:none}
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;font-size:13px}
.brand{display:inline-flex;align-items:flex-start;gap:5px;color:#3d594d;font:700 22px/1 var(--font-brand);letter-spacing:-.04em;white-space:nowrap}
.brand span{margin-top:1px;color:var(--accent);font:700 9px/1 var(--font);letter-spacing:.2em}
.nav-back{color:var(--ink-2);transition:color .15s}
.nav-back:hover{color:var(--accent)}

.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end;gap:48px;padding:48px 0 64px}
.hero h1{margin:0;font:700 clamp(48px,7vw,80px)/1.05 var(--font);letter-spacing:-.01em}
.hero .door-label{margin:14px 0 0;color:var(--gray);font-size:clamp(17px,1.8vw,21px);line-height:1.4}
.hero-photo{margin:0}
.hero-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);background:var(--fill)}
.credit{display:flex;justify-content:flex-end;margin-top:10px;color:var(--gray);font-size:12px}
.credit a,.photos figcaption a{display:inline-flex;align-items:center;gap:4px;transition:color .15s}
.credit a:hover,.photos figcaption a:hover{color:var(--accent)}

/* Tabs on the left, a year select on the right; full-bleed so content never shows beside it. */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:24px;height:var(--bar-h);margin-inline:calc(50% - 50vw);padding-inline:max(var(--gutter),calc(50vw - var(--max) / 2));border-block:1px solid var(--line);background:#fffffff0;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.tabs{display:flex;flex:1;gap:28px;min-width:0;height:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;flex:none;height:100%;padding:0;border:0;background:none;color:var(--gray);font-size:14px;cursor:pointer;transition:color .15s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-pressed=true]{color:var(--ink)}
.tabs button[aria-pressed=true]::after{content:"";position:absolute;inset:auto 0 -1px;height:2px;background:var(--accent)}
.select{flex:none;height:32px;padding:0 30px 0 12px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236e6e73' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center/10px 6px;color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color .15s}
.select:hover{border-color:var(--gray-2)}
.jump{position:relative;flex:none}
.jump-btn{min-width:92px;text-align:left;white-space:nowrap}
.jump-btn[aria-expanded=true]{border-color:var(--gray-2)}
.jump-grid{position:absolute;top:calc(100% + 10px);right:0;z-index:20;display:grid;grid-template-columns:repeat(5,64px);gap:4px;max-height:calc(100dvh - var(--bar-h) - 24px);padding:8px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line-2);border-radius:12px;background:#fff;box-shadow:0 10px 30px #0000001a}
.jump-grid button{height:36px;padding:0;border:0;border-radius:var(--r);background:none;font-size:14px;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .15s}
.jump-grid button:hover{background:var(--fill)}
.jump-grid button[aria-current=true]{background:var(--accent);color:#fff}
.jump-grid button:disabled{background:none;color:var(--line-2);cursor:default}

/* One block per year: the year stays beside its block on desktop and pins under the bar on phones. */
.year{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 40px;padding:56px 0;border-top:1px solid var(--line);scroll-margin-top:var(--bar-h)}
.timeline>.year:first-child{border-top:0}
.year>h2{position:sticky;top:calc(var(--bar-h) + 40px);align-self:start;margin:0;font:600 40px/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.year-body{display:grid;gap:40px;min-width:0;max-width:880px}

/* News photos, each captioned with what it shows and a link to where it ran. */
.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px 16px;max-width:720px}
.photos figure{margin:0}
.photos img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);background:var(--fill)}
.photos figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:10px;color:var(--gray);font-size:13px;line-height:1.45}
.photos figcaption span{min-width:0;color:var(--ink-2);text-wrap:pretty}
.photos figcaption a{flex:none}

/* Hairline rows: date, title, a gray tag on the right. */
.rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:2px 20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.row time{color:var(--gray);font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}
.row time span{display:block}
.row b{font-size:15px;font-weight:400;line-height:1.5;overflow-wrap:anywhere;text-wrap:pretty}
.row small{color:var(--gray);font-size:13px;white-space:nowrap}

/* A title with more text behind it (the 2020 book, an interview) opens the reader over the page; its
   chevron points the way the text comes. */
.open{display:inline;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;line-height:inherit;text-align:left;cursor:pointer;transition:color .15s}
.open::after{content:"";display:inline-block;width:6px;height:6px;margin:0 2px 0 6px;border-right:1.4px solid var(--gray-2);border-bottom:1.4px solid var(--gray-2);transform:translateY(-1px) rotate(-45deg);transition:border-color .15s,transform .2s}
.open:hover{color:var(--accent)}
.open:hover::after{border-color:var(--accent);transform:translate(2px,-1px) rotate(-45deg)}
/* A source link with a full translation behind it gets a 全文 button beside it. */
.full{display:inline-flex;align-items:center;flex:none;margin:0 0 0 8px;padding:0 8px;border:1px solid #e8c3cf;border-radius:999px;background:#fff;color:var(--accent);font-size:12px;line-height:20px;cursor:pointer;vertical-align:1px;transition:background-color .15s,border-color .15s}
.full:hover{border-color:var(--accent);background:#fbe9ef}
.src{display:inline-flex;flex:none;align-items:center;flex-wrap:wrap;gap:4px 0}
.photos figcaption .src{min-width:auto;color:var(--gray)}

.bk-sm{color:var(--gray);font-size:14px;line-height:1.75}
.bk-sm span{margin-right:8px;color:var(--gray-2);font-size:12px}

/* Benito, her dog: gray and quiet in a row's tag, himself on hover, and a tip says what he opens. */
.bn{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;margin:-8px -7px -8px 3px;padding:0;border:0;border-radius:50%;background:none;vertical-align:middle;cursor:pointer;--dog-ink:#9a9aa0;--dog-tongue:#f2bccb;transition:background-color .15s}
.bn-dog{display:block;width:22px;height:22px}
.bn .bn-dog{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.bn:hover,.bn:focus-visible{--dog-ink:var(--ink);--dog-tongue:#e8879f;background:#fbe9ef}
.bn:hover .bn-dog{transform:rotate(-10deg) scale(1.06)}
@media (hover:hover){
 .bn::after{content:attr(aria-label);position:absolute;right:-4px;bottom:calc(100% + 4px);z-index:6;padding:6px 10px;border:1px solid #1d1d1f12;border-radius:10px;background:#f0f0f2d9;-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);color:var(--ink-2);font-size:12px;font-weight:400;line-height:1.5;white-space:nowrap;box-shadow:0 8px 20px -14px #1d1d1f66;opacity:0;transform:translateY(3px);pointer-events:none;transition:opacity .15s,transform .15s}
 .bn:hover::after,.bn:focus-visible::after{opacity:1;transform:none}
}
/* His box: the note first, then the interviews and diaries it was written from. */
.ai{margin:0 0 20px;padding:14px 18px 16px;border-radius:12px;background:var(--fill)}
.rd-body .ai-h{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--gray);font-size:12px;letter-spacing:.04em}
.ai-h .bn-dog{width:26px;height:26px;--dog-face:var(--fill)}
.ai:has(.is-busy) .bn-dog{animation:bn-think .9s ease-in-out infinite alternate;transform-origin:50% 70%}
@keyframes bn-think{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.rd-body .ai-text p{margin:0 0 10px}
.rd-body .ai-note{margin:2px 0 0;color:var(--gray);font-size:12px;line-height:1.6}
.rd-body .ai-wait{margin:0;color:var(--gray);font-size:14px;line-height:1.75}
.rd-body .ai-ask{margin:10px 0 0;font-size:13px}
.ai-ask button{padding:0;border:0;background:none;color:var(--accent);cursor:pointer}
.ai-ask button::after{content:" ›"}
.ai-ask button:hover{text-decoration:underline;text-underline-offset:3px}
.ctx-body>.rd-rel{margin:0;padding:0;border:0}
.rd-body .ctx-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:24px 0 8px}
.ctx-h span{color:var(--gray);font-size:12px;font-weight:400}
.ctx{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.ctx li{padding:12px 0;border-bottom:1px solid var(--line)}
.rd-body .ctx-when{margin:0 0 2px;color:var(--gray);font-size:12px;line-height:1.6;font-variant-numeric:tabular-nums}
.rd-body .ctx-t{margin:0;font-size:15px;line-height:1.6}
.ctx .open{font-size:15px;line-height:1.6}
.rd-body .ctx .bk-sm{margin:4px 0 0;color:var(--ink-2);font-size:14px;line-height:1.75}
.rd-body .ctx-more{margin:10px 0 0;font-size:13px}
.ctx-more a{color:var(--accent)}
/* The picture an article ran with, beside its entry in 心声 · 访谈 and in an event's panel. */
.pic{float:right;width:136px;margin:4px 0 8px 18px;aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:var(--fill)}
.pic img{display:block;width:100%;height:100%;object-fit:cover}
.doc>div,.ctx li{display:flow-root}
.ctx .pic{width:108px;margin-left:14px}
.ctx-more a::after{content:" ›"}
.ctx-more a:hover{text-decoration:underline;text-underline-offset:3px}

/* A row the address names: in view, and marked for a moment. */
.row,.work{scroll-margin-block:calc(var(--bar-h) + 72px)}
.row.is-target>time,.row.is-target>b,.work.is-target>b{color:var(--accent)}
.row.is-target,.work.is-target{animation:is-target 2.6s ease-out}
@keyframes is-target{0%,35%{background:#fbe9ef}}
/* Blocks named by a word, not a year: the periods before the debut and the undated. */
.year>h2.word{font-size:32px;letter-spacing:0}
.year>h2 small{display:block;margin-top:10px;color:var(--gray);font-size:13px;font-weight:400;letter-spacing:0}

footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:80px;padding:24px 0 40px;border-top:1px solid var(--line);color:var(--gray);font-size:12px}
footer .brand{font-size:18px}
footer p{margin:0;line-height:1.7}

@media (max-width:760px){
 .site-nav{height:52px}
 .hero{grid-template-columns:1fr;gap:28px;padding:28px 0 40px}
 .bar{gap:12px}
 .tabs{gap:20px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
 .tabs button:last-child{margin-right:24px}
 .jump-grid{grid-template-columns:repeat(4,minmax(0,1fr));width:min(296px,100vw - 2 * var(--gutter))}
 .year{grid-template-columns:1fr;padding:0 0 40px;border-top:0}
 .year>h2{top:var(--bar-h);z-index:5;margin-inline:calc(-1 * var(--gutter));padding:14px var(--gutter) 10px;border-bottom:1px solid var(--line);background:#fffffff0;font-size:26px;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
 .year-body{gap:28px;padding-top:24px}
 .photos{grid-template-columns:1fr}
 .row{grid-template-columns:76px minmax(0,1fr);gap:2px 12px;padding:12px 0}
 .row small{grid-column:2;white-space:normal}
 .pic,.ctx .pic{float:none;width:100%;margin:2px 0 12px;aspect-ratio:16/9}
 .year>h2.word{font-size:24px}
 .year>h2 small{display:inline;margin:0 0 0 10px}
 footer{margin-top:56px;padding:20px 0 32px}
 footer p{order:3;width:100%}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none!important;animation:none!important}
}