:root {
  --ink: #132027;
  --muted: #687479;
  --paper: #f7f6f2;
  --surface: #ffffff;
  --line: #e6e8e5;
  --accent: #e36c3e;
  --accent-soft: #fff0e8;
  --sage: #a2b5a4;
  --dark: #15242b;
  --display: "Noto Serif SC", serif;
  --body: "DM Sans", "Noto Sans SC", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.shell { min-height: 100vh; }
.topbar { align-items: center; background: rgba(247,246,242,.9); border-bottom: 1px solid var(--line); display: flex; height: 76px; justify-content: space-between; padding: 0 clamp(22px, 5vw, 84px); position: sticky; top: 0; backdrop-filter: blur(16px); z-index: 10; }
.brand { align-items: center; display: flex; gap: 13px; }
.mark { align-items: center; background: var(--ink); border-radius: 10px; color: white; display: flex; font-family: var(--display); font-size: 20px; font-weight: 700; height: 38px; justify-content: center; width: 38px; }
.brand-copy strong { display: block; font-size: 14px; letter-spacing: .02em; }
.brand-copy span { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.nav { align-items: center; display: flex; gap: 30px; }
.nav button { background: none; border: 0; color: var(--muted); font-size: 13px; padding: 28px 0; position: relative; }
.nav button:hover, .nav button.active { color: var(--ink); }
.nav button.active::after { background: var(--accent); bottom: -1px; content: ""; height: 2px; left: 0; position: absolute; right: 0; }
.toolbar { align-items: center; display: flex; gap: 9px; }
.icon-btn { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); display: inline-flex; height: 36px; justify-content: center; width: 36px; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] {
  --ink: #e7eeeb;
  --muted: #9baaa8;
  --paper: #101a1d;
  --surface: #172326;
  --line: #2a3a3d;
  --accent-soft: #3a2924;
  --sage: #526b60;
  --dark: #0b1214;
}
[data-theme="dark"] .topbar { background: rgba(16,26,29,.9); }
[data-theme="dark"] .mark { background: #dbe7e2; color: #102024; }
[data-theme="dark"] .hero-visual { background: #233936; }
[data-theme="dark"] .ghost-btn, [data-theme="dark"] .icon-btn { background: transparent; color: var(--ink); }
[data-theme="dark"] .filter.active, [data-theme="dark"] .filter:hover { background: #dbe7e2; border-color: #dbe7e2; color: #102024; }
[data-theme="dark"] .panel, [data-theme="dark"] .metric, [data-theme="dark"] .modal { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .field input, [data-theme="dark"] .field textarea, [data-theme="dark"] .field select { background: #101a1d; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .admin { background: #0d1719; }
[data-theme="dark"] .post-card { border-color: var(--line); }
[data-theme="dark"] .bar { background: #5d786c; }
[data-theme="dark"] .bar:nth-child(2n) { background: var(--accent); }

.main { margin: 0 auto; max-width: 1270px; padding: 0 28px 80px; }
.hero { display: grid; gap: 50px; grid-template-columns: 1.07fr .93fr; min-height: 470px; padding: 84px 0 68px; }
.eyebrow { align-items: center; color: var(--accent); display: flex; font-family: var(--mono); font-size: 11px; gap: 12px; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { background: var(--accent); content: ""; height: 1px; width: 34px; }
h1, h2, h3, p { margin: 0; }
.hero h1 { font-family: var(--display); font-size: clamp(42px, 5vw, 72px); letter-spacing: -.055em; line-height: 1.09; margin: 24px 0 24px; max-width: 650px; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero-lede { color: var(--muted); font-size: 16px; line-height: 1.9; max-width: 500px; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; }
.primary-btn, .ghost-btn { border-radius: 5px; font-size: 13px; padding: 13px 19px; }
.primary-btn { background: var(--accent); border: 1px solid var(--accent); color: white; }
.primary-btn:hover { background: #c9552d; }
.ghost-btn { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.ghost-btn:hover { border-color: var(--ink); }
.hero-visual { align-self: center; background: #dde3dc; border-radius: 2px; height: 328px; overflow: hidden; position: relative; }
.hero-visual::after { background: linear-gradient(180deg, transparent 42%, rgba(11,27,25,.55)); content: ""; inset: 0; position: absolute; }
.hero-visual img { height: 100%; object-fit: cover; width: 100%; }
.visual-note { bottom: 21px; color: white; font-family: var(--mono); font-size: 10px; left: 24px; letter-spacing: .08em; position: absolute; z-index: 1; }
.visual-stamp { align-items: center; background: #f1b87c; border-radius: 50%; color: #513421; display: flex; font-family: var(--display); font-size: 14px; height: 66px; justify-content: center; line-height: 1.3; position: absolute; right: 22px; top: 22px; transform: rotate(10deg); width: 66px; z-index: 1; }

.section-head { align-items: end; border-top: 1px solid var(--line); display: flex; justify-content: space-between; padding: 26px 0 21px; }
.section-head h2 { font-family: var(--display); font-size: 26px; letter-spacing: -.04em; }
.section-head span { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.filters { display: flex; gap: 8px; margin-bottom: 30px; }
.filter { background: transparent; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); font-size: 12px; padding: 8px 14px; }
.filter.active, .filter:hover { background: var(--ink); border-color: var(--ink); color: white; }
.post-grid { display: grid; gap: 30px 26px; grid-template-columns: repeat(3, 1fr); }
.post-card { border-top: 1px solid var(--ink); display: flex; flex-direction: column; min-height: 365px; padding-top: 15px; transition: transform .2s ease; }
.post-card:hover { transform: translateY(-5px); }
.post-card.featured { grid-column: span 2; display: grid; gap: 26px; grid-template-columns: 1.12fr .88fr; }
.post-image { background: #d3dbd5; height: 190px; overflow: hidden; }
.featured .post-image { height: 250px; }
.post-image img { height: 100%; object-fit: cover; transition: transform .4s; width: 100%; }
.post-card:hover .post-image img { transform: scale(1.04); }
.post-meta { align-items: center; color: var(--muted); display: flex; font-family: var(--mono); font-size: 10px; gap: 10px; margin-top: 17px; }
.tag { color: var(--accent); }
.post-card h3 { font-family: var(--display); font-size: 22px; letter-spacing: -.035em; line-height: 1.42; margin: 11px 0 10px; }
.featured h3 { font-size: 29px; }
.post-card p { color: var(--muted); font-size: 13px; line-height: 1.75; }
.read-more { color: var(--ink); font-size: 12px; margin-top: auto; padding-top: 18px; }
.read-more::after { color: var(--accent); content: "  ↗"; }

.about { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 45px; grid-template-columns: .7fr 1.3fr; margin-top: 88px; padding: 54px 0 0; }
.portrait { background: var(--sage); height: 176px; overflow: hidden; position: relative; width: 176px; }
.portrait::before { border: 1px solid rgba(255,255,255,.55); content: ""; inset: 14px; position: absolute; }
.portrait span { bottom: 20px; color: white; font-family: var(--display); font-size: 35px; left: 26px; position: absolute; }
.about h2 { font-family: var(--display); font-size: 31px; margin: 12px 0 14px; }
.about p { color: var(--muted); font-size: 14px; line-height: 1.9; max-width: 620px; }
.about-links { display: flex; gap: 18px; margin-top: 20px; }
.about-links a { color: var(--muted); font-family: var(--mono); font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-family: var(--mono); font-size: 10px; justify-content: space-between; margin-top: 80px; padding-top: 20px; }

.admin { background: #eef0ed; min-height: calc(100vh - 76px); }
.admin-shell { display: grid; grid-template-columns: 225px 1fr; margin: 0 auto; max-width: 1350px; min-height: calc(100vh - 76px); }
.admin-side { background: var(--dark); color: #aebbb9; padding: 31px 18px; }
.admin-side .side-label { color: #657678; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; margin: 22px 12px 10px; text-transform: uppercase; }
.side-nav { display: flex; flex-direction: column; gap: 3px; }
.side-nav button { background: transparent; border: 0; border-radius: 5px; color: inherit; font-size: 12px; padding: 12px; text-align: left; }
.side-nav button.active, .side-nav button:hover { background: #253b40; color: white; }
.side-nav button span { margin-right: 11px; opacity: .75; }
.admin-content { padding: 44px clamp(24px, 5vw, 64px); }
.admin-title { align-items: start; display: flex; justify-content: space-between; margin-bottom: 37px; }
.admin-title h1 { font-family: var(--display); font-size: 31px; letter-spacing: -.04em; }
.admin-title p { color: var(--muted); font-size: 12px; margin-top: 8px; }
.admin-date { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.metric-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin-bottom: 38px; }
.metric { background: white; border: 1px solid #e2e6e1; padding: 18px 19px; }
.metric-label { color: var(--muted); font-size: 11px; }
.metric-value { font-family: var(--display); font-size: 29px; margin: 13px 0 8px; }
.metric-note { color: #5a9472; font-family: var(--mono); font-size: 10px; }
.admin-grid { display: grid; gap: 28px; grid-template-columns: 1.35fr .65fr; }
.panel { background: white; border: 1px solid #e2e6e1; padding: 21px; }
.panel-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 20px; }
.panel h2 { font-size: 14px; font-weight: 600; }
.panel-link { background: none; border: 0; color: var(--accent); font-size: 11px; }
.table { width: 100%; }
.table-row { align-items: center; border-top: 1px solid #edf0ed; display: grid; gap: 12px; grid-template-columns: 1fr 90px 84px; padding: 15px 0; }
.table-row.header { border-top: 0; color: var(--muted); font-family: var(--mono); font-size: 9px; padding-top: 0; text-transform: uppercase; }
.table-row strong { font-family: var(--display); font-size: 13px; font-weight: 600; }
.table-row small { color: var(--muted); display: block; font-size: 10px; margin-top: 5px; }
.status { background: #e7f2e9; border-radius: 10px; color: #528160; font-size: 10px; padding: 5px 9px; text-align: center; width: max-content; }
.chart { align-items: end; display: flex; gap: 9px; height: 176px; padding: 12px 3px 0; }
.bar { background: #bed0c1; flex: 1; position: relative; }
.bar:nth-child(2n) { background: var(--accent); }
.bar span { bottom: -20px; color: var(--muted); font-family: var(--mono); font-size: 8px; left: 50%; position: absolute; transform: translateX(-50%); }
.chart-caption { border-top: 1px solid #edf0ed; color: var(--muted); font-size: 11px; margin-top: 28px; padding-top: 12px; }
.quick-list { display: flex; flex-direction: column; gap: 13px; }
.quick { align-items: center; border-bottom: 1px solid #edf0ed; display: flex; gap: 11px; padding-bottom: 13px; }
.quick:last-child { border-bottom: 0; padding-bottom: 0; }
.quick-avatar { align-items: center; background: var(--accent-soft); color: var(--accent); display: flex; font-size: 12px; height: 31px; justify-content: center; width: 31px; }
.quick p { font-size: 11px; line-height: 1.5; }
.quick small { color: var(--muted); display: block; font-size: 10px; }

.overlay { align-items: center; background: rgba(16,28,32,.45); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 20; }
.modal { background: var(--paper); max-width: 660px; padding: 28px; width: 100%; }
.modal-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; margin-bottom: 25px; padding-bottom: 17px; }
.modal h2 { font-family: var(--display); font-size: 23px; }
.close { background: none; border: 0; color: var(--muted); font-size: 22px; }
.form-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: span 2; }
.field label { color: var(--muted); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.field input, .field textarea, .field select { background: white; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); outline: 0; padding: 11px 12px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
.login-modal { max-width: 400px; padding: 34px; position: relative; }
.login-brand { align-items: center; display: flex; gap: 12px; margin-bottom: 36px; }
.login-brand strong { display: block; font-family: var(--display); font-size: 17px; }
.login-brand small { color: var(--muted); display: block; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; margin-top: 4px; }
.login-modal h2 { font-family: var(--display); font-size: 29px; margin-bottom: 7px; }
.login-hint { color: var(--muted); font-size: 12px; margin-bottom: 26px; }
.login-modal form { display: flex; flex-direction: column; gap: 17px; }
.login-submit { margin-top: 4px; width: 100%; }
.login-error { color: #c6533b; font-size: 11px; min-height: 14px; margin: -3px 0 -8px; }
.login-close { position: absolute; right: 18px; top: 14px; }

.article { margin: 0 auto; max-width: 850px; padding: 70px 0; }
.article .article-meta { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.article h1 { font-family: var(--display); font-size: clamp(38px, 5vw, 62px); letter-spacing: -.06em; line-height: 1.18; margin: 21px 0; }
.article .lead { color: var(--muted); font-size: 16px; line-height: 1.9; margin-bottom: 35px; max-width: 650px; }
.article-cover { height: 370px; margin-bottom: 38px; overflow: hidden; }
.article-cover img { height: 100%; object-fit: cover; width: 100%; }
.article-body { font-family: var(--display); font-size: 17px; line-height: 2.05; }
.article-body p { margin: 20px 0; }
.article-body h2 { font-size: 27px; margin: 45px 0 16px; }
.back { background: none; border: 0; color: var(--muted); font-family: var(--mono); font-size: 10px; margin-bottom: 35px; padding: 0; }

.hidden { display: none !important; }
@media (max-width: 850px) {
  .nav { display: none; }
  .hero { gap: 30px; grid-template-columns: 1fr; padding-top: 55px; }
  .hero-visual { height: 260px; }
  .post-grid { grid-template-columns: 1fr 1fr; }
  .post-card.featured { grid-column: span 2; }
  .admin-shell { grid-template-columns: 70px 1fr; }
  .admin-side { padding: 25px 10px; }
  .admin-side .side-label, .side-nav button b { display: none; }
  .side-nav button { text-align: center; }
  .side-nav button span { margin: 0; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .topbar { height: 64px; padding: 0 16px; }
  .main { padding: 0 18px 50px; }
  .hero h1 { font-size: 43px; }
  .post-grid { grid-template-columns: 1fr; }
  .post-card.featured { display: flex; grid-column: span 1; }
  .featured .post-image { height: 210px; }
  .about { gap: 25px; grid-template-columns: 1fr; }
  .footer { flex-direction: column; gap: 9px; }
  .admin-content { padding: 28px 15px; }
  .admin-title { display: block; }
  .admin-date { display: block; margin-top: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: span 1; }
  .article { padding: 45px 18px; }
  .article-cover { height: 240px; }
}