:root { --ink:#1f2f31; --paper:#f8f4ed; --paper-deep:#efe8dc; --line:#d8d0c3; --red:#d94734; --yellow:#f4ca50; --teal:#8fc6b5; --blue:#c6d7e8; --serif:'Noto Serif SC', serif; --sans:'Source Han Sans SC', sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); }
button, input, select { font:inherit; }
button { color:inherit; cursor:pointer; }
.site-header { height:78px; padding:0 clamp(20px,5vw,78px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(248,244,237,.94); position:sticky; top:0; z-index:10; }
.brand { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px; font:600 20px var(--serif); }
.brand-mark { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--paper); background:var(--red); font:500 15px var(--serif); }
nav { display:flex; gap:28px; margin-left:auto; margin-right:42px; }
.nav-link, .text-link, .back-link { border:0; background:none; padding:7px 0; }
.nav-link { font-size:14px; position:relative; }
.nav-link.active::after { content:''; height:2px; width:100%; position:absolute; left:0; bottom:0; background:var(--red); }
.search-trigger { border:0; background:none; display:flex; gap:8px; align-items:center; font-size:14px; }
.account-trigger { border:1px solid var(--ink); background:transparent; padding:8px 12px; font-size:13px; }
.search-trigger span:first-child { font:28px Georgia; line-height:0; transform:rotate(-20deg); }
.view { display:none; }
.view.active { display:block; }
.hero { min-height:570px; padding:80px clamp(20px,8vw,128px); display:grid; grid-template-columns:minmax(340px,1fr) minmax(320px,.78fr); gap:60px; align-items:center; background:var(--paper-deep); overflow:hidden; }
.eyebrow { margin:0 0 18px; color:var(--red); font:500 11px var(--mono); letter-spacing:1px; }
h1,h2,p { margin-top:0; }
.hero h1, .archive-head h1, .day-head h1, .admin-head h1 { margin-bottom:24px; font:600 clamp(38px,5vw,66px)/1.18 var(--serif); letter-spacing:0; }
.hero-text { max-width:400px; font-size:17px; line-height:1.9; color:#536063; }
.hero-actions { display:flex; gap:20px; align-items:center; margin-top:32px; flex-wrap:wrap; }
.button { border:1px solid var(--ink); padding:13px 19px; background:transparent; font-weight:500; transition:.18s ease; }
.button.primary { background:var(--ink); color:var(--paper); }
.button:hover { transform:translateY(-2px); }
.button span, .text-link span { margin-left:9px; }
.text-button { border:0; padding:13px 0; border-bottom:1px solid var(--ink); }
.hero-art { height:420px; position:relative; transform:rotate(2deg); }
.hero-art::before { content:''; position:absolute; inset:36px -30px -25px 50px; background:var(--yellow); z-index:0; }
.hero-art img { width:77%; height:100%; object-fit:cover; filter:saturate(.8); position:relative; z-index:1; }
.date-stamp { position:absolute; top:28px; right:0; z-index:2; width:105px; height:135px; color:var(--paper); background:var(--red); display:flex; flex-direction:column; justify-content:center; align-items:center; font:500 42px/.72 var(--mono); }
.date-stamp small { margin-top:16px; font-size:11px; letter-spacing:2px; }
.hero-art-caption { position:absolute; bottom:15px; right:-30px; z-index:2; font:500 12px/1.5 var(--mono); transform:rotate(-90deg); transform-origin:left bottom; }
.today-section { max-width:1280px; padding:90px clamp(20px,5vw,78px) 105px; margin:auto; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:35px; gap:20px; }
.section-heading h2 { margin:0; font:600 32px var(--serif); }
.text-link { font-size:14px; border-bottom:1px solid var(--ink); white-space:nowrap; }
.story-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }
.story-card { text-align:left; border:0; border-right:1px solid var(--line); background:transparent; padding:24px 25px 24px 0; min-height:206px; position:relative; transition:.18s ease; }
.story-card + .story-card { padding-left:25px; }
.story-card:last-child { border-right:0; }
.story-card:hover { color:var(--red); }
.story-number { color:#8b9290; font:11px var(--mono); }
.story-card h3 { margin:47px 0 8px; font:600 24px var(--serif); }
.story-card p { color:#677173; font-size:14px; margin:0; }
.story-tag { position:absolute; bottom:24px; right:20px; padding:4px 9px; background:var(--teal); font:10px var(--mono); color:var(--ink); }
.archive-layout,.day-layout,.admin-layout,.messages-layout { max-width:1160px; padding:78px clamp(20px,5vw,78px) 110px; margin:auto; }
.archive-head { max-width:750px; }
.archive-head h1 { font-size:clamp(38px,5vw,62px); }
.archive-head > p:last-child,.admin-head > p:last-child { color:#596567; font-size:16px; line-height:1.8; }
.archive-tools { margin:60px 0 15px; display:flex; align-items:center; gap:18px; }
.month-label,.field-label { font:500 12px var(--mono); }
select,input[type=date] { border:1px solid var(--ink); background:transparent; padding:9px 10px; color:var(--ink); }
.date-list { border-top:2px solid var(--ink); }
.date-row { width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; padding:22px 4px; display:grid; grid-template-columns:140px 1fr 100px 30px; align-items:center; text-align:left; transition:.15s; }
.date-row:hover { background:var(--yellow); padding-left:12px; }
.date-row .date { font:500 14px var(--mono); }.date-row strong { font:600 25px var(--serif); }.date-row small { color:#647073; font-size:13px; }.date-row .arrow { font-size:22px; }
.back-link { font-size:14px; border-bottom:1px solid var(--ink); margin-bottom:53px; }
.day-head { max-width:680px; }.day-head h1 { font-size:52px; margin-bottom:14px; }.day-head p:last-child { color:#617073; font-size:16px; }
.filter-row { border-top:1px solid var(--ink); margin-top:48px; padding:18px 0; display:flex; gap:10px; flex-wrap:wrap; }
.filter-chip { padding:8px 13px; border:1px solid var(--line); background:transparent; font-size:13px; }.filter-chip.selected { color:var(--paper); background:var(--ink); border-color:var(--ink); }.filter-chip span { font:11px var(--mono); }
.all-story-list { border-top:1px solid var(--line); }.list-story { width:100%; border:0; border-bottom:1px solid var(--line); padding:18px 10px 18px 0; background:transparent; display:grid; grid-template-columns:54px 1fr 120px 135px 20px; gap:10px; align-items:center; text-align:left; }.list-story:hover { color:var(--red); background:#f3df9d; }.list-story .index { color:#788180; font:11px var(--mono); }.list-story strong { font:500 21px var(--serif); }.list-story .author,.list-story .tag { font-size:13px; color:#657072; }.list-story .tag { font:11px var(--mono); }.list-story:hover .author,.list-story:hover .tag { color:inherit; }
.reader-view { background:#f6f0e5; min-height:calc(100vh - 78px); }.reader-bar { height:74px; padding:0 clamp(20px,5vw,78px); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }.reader-bar .back-link { margin:0; }.reader-actions { display:flex; gap:9px; align-items:center; }.icon-button,.bookmark { border:1px solid var(--line); background:transparent; padding:7px 10px; font-size:13px; }.bookmark { margin-left:8px; }.bookmark.saved { background:var(--red); color:white; border-color:var(--red); }
.reader-page { max-width:720px; padding:85px 25px 130px; margin:auto; }.reader-meta { display:flex; gap:8px; color:#7e8785; font:11px var(--mono); }.reader-meta span:first-child { color:var(--red); }.reader-page h1 { margin:25px 0 9px; font:600 52px var(--serif); }.reader-author { color:#687473; font-size:15px; }.reader-content { margin-top:58px; font:400 19px/2.15 var(--serif); }.reader-content p { margin-bottom:29px; }.reading-progress { position:fixed; height:3px; bottom:0; left:0; width:100%; background:#e6ddcd; }.reading-progress div { height:100%; width:0; background:var(--red); }
.reader-view.night { background:#1e292a; color:#e9e2d6; }.reader-view.night .reader-bar { border-color:#516061; }.reader-view.night .reader-meta,.reader-view.night .reader-author { color:#bbc0b8; }.reader-view.night .back-link,.reader-view.night .icon-button,.reader-view.night .bookmark { color:#e9e2d6; border-color:#5f6a6a; }
.admin-layout { max-width:1000px; }.admin-head { max-width:650px; }.admin-head h1 { font-size:54px; }.upload-grid { display:grid; grid-template-columns:1.25fr .75fr; border:1px solid var(--ink); margin-top:55px; }.upload-panel { padding:32px; display:flex; flex-direction:column; align-items:start; gap:12px; border-right:1px solid var(--ink); }.drop-zone { width:100%; min-height:240px; margin:13px 0 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px dashed #9aa29b; background:#f3eddf; cursor:pointer; }.drop-zone:hover { background:var(--yellow); }.drop-icon { width:43px; height:43px; display:grid; place-items:center; border-radius:50%; background:var(--teal); font-size:22px; }.drop-zone strong { margin-top:15px; font:500 18px var(--serif); }.drop-zone small { color:#697474; margin-top:6px; }.drop-zone input { position:absolute; width:1px; height:1px; opacity:0; }.upload-notes { background:var(--ink); color:var(--paper); padding:34px 28px; }.note-count { color:var(--yellow); font:500 63px/1 var(--mono); }.upload-notes > p { margin:10px 0 29px; font-size:13px; }.file-list { padding-top:18px; border-top:1px solid #667172; display:flex; flex-direction:column; gap:11px; font-size:13px; color:#d9d4c9; }.file-list span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.admin-tip { border-top:1px solid var(--line); margin-top:42px; padding-top:20px; display:grid; grid-template-columns:150px 1fr; font-size:14px; line-height:1.7; }.admin-tip strong { font-family:var(--serif); }
dialog { border:0; padding:0; background:transparent; width:min(610px, calc(100% - 36px)); }dialog::backdrop { background:rgba(24,34,34,.7); }.search-modal,.account-modal { position:relative; background:var(--paper); padding:48px; }.close-button { position:absolute; right:18px; top:12px; border:0; background:transparent; font-size:30px; }.search-modal label { display:block; font:600 30px var(--serif); }.search-modal input { width:100%; margin:25px 0 10px; font-size:16px; }.search-result { padding:13px 0; width:100%; border:0; border-top:1px solid var(--line); background:transparent; text-align:left; display:flex; justify-content:space-between; }.search-result strong { font-family:var(--serif); }.search-result span { font-size:12px; color:#6c7776; }.account-modal h2 { font:600 34px var(--serif); margin:0 0 25px; }.account-modal form { display:flex; flex-direction:column; gap:8px; }.account-modal input { border:1px solid var(--ink); background:transparent; padding:11px; margin-bottom:0; }.account-modal label { font-size:13px; }.field-hint { color:#687473; font-size:12px; line-height:1.5; margin:0 0 9px; }.account-message { min-height:20px; margin:2px 0 8px; color:var(--red); font-size:13px; }.switch-account { margin-top:18px; padding:0; border:0; border-bottom:1px solid var(--ink); background:transparent; font-size:13px; }.admin-link { display:block; width:max-content; margin-top:24px; color:var(--red); font-weight:700; }.admin-link[hidden] { display:none; }
.messages-layout { max-width:830px; }.message-form { margin:52px 0 45px; border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); padding:22px 0; display:flex; flex-direction:column; gap:12px; }.message-form label { font:500 14px var(--serif); }.message-form textarea { min-height:126px; resize:vertical; border:1px solid var(--ink); padding:12px; color:var(--ink); background:transparent; font:15px/1.65 var(--sans); }.message-form > div { display:flex; justify-content:space-between; align-items:center; gap:18px; }.message-form small { color:#687473; font-size:12px; }.message-list { border-top:1px solid var(--line); }.message-item { padding:22px 0; border-bottom:1px solid var(--line); }.message-item div { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }.message-item strong { font:500 16px var(--serif); }.message-item time { color:#75807f; font:11px var(--mono); }.message-item p { margin:12px 0 0; font:15px/1.75 var(--serif); }.text-muted { color:#687473; font-size:14px; }
@media (max-width:700px) { .site-header { height:64px; }.brand { font-size:17px; }.brand-mark { width:27px;height:27px; } nav { gap:14px; margin:0; }.nav-link { font-size:12px; }.search-word { display:none; }.hero { min-height:auto; padding:55px 24px 67px; grid-template-columns:1fr; gap:42px; }.hero h1 { font-size:43px; }.hero-art { width:86%; height:320px; margin-left:auto; }.today-section,.archive-layout,.day-layout,.admin-layout { padding:55px 24px 70px; }.story-grid { grid-template-columns:1fr; }.story-card,.story-card + .story-card { border-right:0; border-bottom:1px solid var(--line); padding:22px 0; min-height:160px; }.story-card h3 { margin-top:28px; }.story-card:last-child { border-bottom:0; }.section-heading { align-items:start; }.section-heading h2 { font-size:29px; }.text-link { font-size:12px; }.archive-head h1,.admin-head h1,.day-head h1 { font-size:40px; }.date-row { grid-template-columns:92px 1fr 28px; }.date-row small { display:none; }.date-row strong { font-size:20px; }.list-story { grid-template-columns:40px 1fr 18px; }.list-story .author,.list-story .tag { display:none; }.reader-page { padding:58px 24px 100px; }.reader-page h1 { font-size:38px; }.reader-content { font-size:18px; }.reader-actions { gap:5px; }.bookmark { font-size:0; }.bookmark::after { content:'♡'; font-size:16px; }.upload-grid { grid-template-columns:1fr; }.upload-panel { border-right:0; border-bottom:1px solid var(--ink); }.admin-tip { grid-template-columns:1fr; gap:8px; }.search-modal { padding:38px 25px; } }
@media (max-width:700px) { nav .nav-link[data-view="archive"] { display:none; }.messages-layout { padding:55px 24px 70px; }.message-form > div { flex-direction:column; align-items:flex-start; }.message-form .button { align-self:flex-end; } }