:root { --accent:#e69a48;--accent-soft:#fff0c9;--ink:#514a53;--muted:#928991;--paper:#fffdf8;--ease:cubic-bezier(.2,.75,.2,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0;color:var(--ink);background:#fffaf2;font-family:"DM Sans","Noto Sans SC",sans-serif; }
a { color:inherit;text-decoration:none; }
button { color:inherit;font:inherit; }
.reading-progress { position:fixed;z-index:100;top:0;left:0;right:0;height:3px;background:rgba(80,62,73,.08); }.reading-progress span { display:block;width:0;height:100%;background:linear-gradient(90deg,#f2b151,#59cbe2); }
.article-nav { position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;width:min(900px,calc(100% - 48px));height:74px;margin:auto;border-bottom:1px solid rgba(83,67,79,.11); }
.article-brand { display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.17em; }.article-brand span { display:grid;place-items:center;width:34px;height:34px;border:3px solid #fff;border-radius:50%;color:#564b53;background:#ffd15f;box-shadow:0 6px 18px rgba(86,62,70,.13);font-weight:700; }.article-back { color:#7f747d;font-size:9px;letter-spacing:.08em;transition:color .25s,transform .25s; }.article-back:hover { color:var(--accent);transform:translateX(-4px); }
main { width:min(1040px,calc(100% - 48px));margin:auto; }
.article-masthead { position:relative;isolation:isolate;max-width:900px;height:430px;margin:34px auto 58px;overflow:hidden;border-radius:8px;background:#423d45;box-shadow:0 20px 52px rgba(62,48,57,.18); }
.article-masthead::after { content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(25,22,29,.86),rgba(27,23,31,.52) 54%,rgba(27,23,31,.12)),linear-gradient(0deg,rgba(26,22,29,.82),transparent 65%);pointer-events:none; }
.article-cover { position:absolute;z-index:0;inset:0;margin:0; }.article-cover img { display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.04);transform:scale(1.01); }.article-cover figcaption { position:absolute;z-index:3;right:20px;top:18px;max-width:260px;color:rgba(255,255,255,.62);font-size:7px;letter-spacing:.06em;text-align:right; }
.article-hero { position:absolute;z-index:2;left:0;right:0;bottom:0;display:grid;grid-template-columns:140px minmax(0,1fr);grid-template-areas:"kicker title" "meta lead";column-gap:34px;row-gap:16px;padding:34px 38px 36px; }
.article-kicker { grid-area:kicker;align-content:start;display:grid;gap:10px;padding-top:7px;border-top:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.66);font-size:8px;letter-spacing:.15em; }.article-kicker span { justify-self:start;padding:6px 9px;border-radius:4px;color:#544b51;background:#ffd15f;font-weight:700; }.article-hero h1 { grid-area:title;max-width:630px;margin:0;color:#fff;font:900 40px/1.28 "Zen Maru Gothic","Noto Sans SC",sans-serif;letter-spacing:0;text-shadow:0 8px 28px rgba(0,0,0,.3); }.article-hero>p { grid-area:lead;max-width:610px;margin:0;color:rgba(255,255,255,.76);font-size:12px;line-height:1.85; }.article-meta { grid-area:meta;align-content:start;display:grid;gap:9px;margin:0;padding-top:1px;color:rgba(255,255,255,.62);font-size:7px;letter-spacing:.08em; }.article-meta span { display:flex;align-items:baseline;gap:5px; }.article-meta b { color:#fff;font-size:10px; }
.article-layout { display:grid;grid-template-columns:minmax(0,620px) 210px;justify-content:space-between;max-width:900px;margin:auto;gap:52px;align-items:start; }
.article-body { min-width:0;color:#625a62;font-family:"Noto Sans SC",sans-serif; }.article-body .article-opening { margin:0 0 50px;padding:25px 0 25px 28px;border-left:3px solid var(--accent);color:#5a5159;font:500 18px/2 "Zen Maru Gothic","Noto Sans SC",sans-serif; }.article-section { scroll-margin-top:30px; }.article-section h2 { margin:62px 0 22px;color:#514951;font:700 28px/1.45 "Zen Maru Gothic","Noto Sans SC",sans-serif; }.article-section h2 span { display:block;margin-bottom:8px;color:var(--accent);font:500 8px DM Sans,sans-serif;letter-spacing:.17em; }.article-section p { margin:0 0 22px;font-size:14px;line-height:2.15; }.article-body blockquote { margin:48px 0;padding:33px 38px;color:#61565e;background:linear-gradient(135deg,#fff4cf,#e7f8fb);font:700 20px/1.85 "Zen Maru Gothic","Noto Sans SC",sans-serif;box-shadow:inset 3px 0 var(--accent); }.article-body blockquote small { display:block;margin-top:15px;color:#a0959c;font:400 8px DM Sans,sans-serif;letter-spacing:.15em; }
.article-aside { position:sticky;top:30px;display:grid;gap:28px;padding-left:28px;border-left:1px solid rgba(83,67,79,.11); }.article-toc>span,.article-note>span { color:var(--accent);font-size:7px;letter-spacing:.17em; }.article-toc>b { display:block;margin:7px 0 17px;font:700 16px "Zen Maru Gothic","Noto Sans SC",sans-serif; }.article-toc nav { display:grid;gap:4px; }.article-toc a { padding:8px 0;color:#948a92;font-size:9px;line-height:1.5;transition:color .25s,transform .25s; }.article-toc a:hover,.article-toc a.active { color:#594f58;transform:translateX(4px); }
.article-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px; }.article-actions button { display:grid;justify-items:center;gap:5px;padding:12px 5px;border:1px solid rgba(92,73,82,.1);border-radius:6px;background:#fff;cursor:pointer;transition:transform .25s,background .25s; }.article-actions button:hover { background:var(--accent-soft);transform:translateY(-2px); }.article-actions button span { color:var(--accent);font-size:15px; }.article-actions button b { font-size:8px; }.article-actions button.saved span { color:#db7d31; }.article-note { padding:20px;background:#fff;border-top:3px solid #65cadd;box-shadow:0 10px 28px rgba(75,58,67,.07); }.article-note p { margin:10px 0 0;color:#887d85;font-size:9px;line-height:1.9; }
.article-next { max-width:900px;margin:90px auto 70px;padding:30px 0;border-block:1px solid rgba(83,67,79,.12); }.article-next>span { color:var(--accent);font-size:7px;letter-spacing:.19em; }.article-next a { display:grid;grid-template-columns:1fr auto;align-items:center;margin-top:17px;transition:transform .3s var(--ease); }.article-next a:hover { transform:translateX(7px); }.article-next small { grid-column:1;color:#9c9299;font-size:8px; }.article-next b { grid-column:1;margin-top:7px;font:700 clamp(23px,3vw,34px)/1.4 "Zen Maru Gothic","Noto Sans SC",sans-serif; }.article-next i { grid-column:2;grid-row:1/3;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;color:#564c55;background:#ffd15f;font-size:17px;font-style:normal; }
.article-footer { display:flex;justify-content:space-between;width:min(1080px,calc(100% - 48px));margin:auto;padding:30px 0 46px;border-top:1px solid rgba(83,67,79,.11);color:#a0969d;font-size:7px;letter-spacing:.13em; }
body[data-accent="blue"] { --accent:#54bdd3;--accent-soft:#e2f6fa; } body[data-accent="pink"] { --accent:#df8ca8;--accent-soft:#ffe8ef; } body[data-accent="green"] { --accent:#66b991;--accent-soft:#e2f3e9; }
@media(max-width:820px){.article-nav,main,.article-footer{width:calc(100% - 36px)}.article-nav{height:68px}.article-brand b{display:none}.article-masthead{height:500px;margin:18px auto 42px}.article-masthead::after{background:linear-gradient(0deg,rgba(24,20,28,.94),rgba(25,21,29,.25) 82%)}.article-cover figcaption{top:15px;right:15px;max-width:190px}.article-hero{display:block;padding:25px 22px 27px}.article-kicker{display:flex;align-items:center;gap:12px;padding:0;border-top:0}.article-hero h1{margin:15px 0 12px;font-size:30px;line-height:1.3}.article-hero>p{font-size:11px;line-height:1.8}.article-meta{display:flex;flex-wrap:wrap;gap:11px 17px;margin-top:16px;padding:0}.article-layout{grid-template-columns:1fr;gap:50px}.article-body .article-opening{font-size:16px;padding-left:20px}.article-section h2{font-size:24px}.article-section p{font-size:13px}.article-body blockquote{margin:38px 0;padding:26px 23px;font-size:17px}.article-aside{position:static;padding:25px 0 0;border-left:0;border-top:1px solid rgba(83,67,79,.11)}.article-next{margin-top:70px}.article-next i{width:44px;height:44px}.article-footer{padding-bottom:110px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important}}

/* Compact editorial masthead */
main { width:min(1120px,calc(100% - 48px)); }
.article-nav { width:min(980px,calc(100% - 48px)); }
.article-masthead { display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);max-width:980px;height:auto;min-height:350px;margin:38px auto 72px;overflow:visible;color:var(--ink);background:#fffdf8;box-shadow:0 22px 58px rgba(62,48,57,.12); }
.article-masthead::after { content:none; }
.article-cover { position:relative;inset:auto;min-height:350px;overflow:hidden;border-radius:8px 0 0 8px; }
.article-cover img { height:100%;filter:saturate(.9) contrast(1.02);transform:none;transition:transform .8s var(--ease); }
.article-masthead:hover .article-cover img { transform:scale(1.025); }
.article-cover figcaption { left:18px;right:18px;top:auto;bottom:16px;max-width:none;padding:9px 11px;border-radius:4px;color:rgba(255,255,255,.82);background:rgba(35,30,37,.52);backdrop-filter:blur(8px);text-align:left; }
.article-hero { position:relative;inset:auto;display:flex;flex-direction:column;justify-content:center;padding:46px 48px; }
.article-kicker { display:flex;align-items:center;gap:13px;padding:0;border:0;color:#9b9098;font-size:8px; }
.article-kicker::after { content:"";flex:1;height:1px;background:rgba(83,67,79,.12); }
.article-kicker span { flex:none;color:#554b51;background:#ffd15f; }
.article-hero h1 { max-width:560px;margin:24px 0 15px;color:#504850;font-size:clamp(30px,3.25vw,44px);line-height:1.3;text-shadow:none; }
.article-hero>p { max-width:560px;margin:0;color:#877d85;font-size:11px;line-height:1.9; }
.article-meta { display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:27px;padding-top:20px;border-top:1px dashed rgba(83,67,79,.13);color:#a1979e; }
.article-meta b { color:#5b525a; }
.article-layout { max-width:900px; }

@media(max-width:820px){
  .article-nav,main,.article-footer{width:calc(100% - 36px)}
  .article-masthead{display:block;min-height:0;margin:18px auto 48px;border-radius:7px;overflow:hidden}
  .article-cover{height:225px;min-height:0;border-radius:0}
  .article-cover figcaption{left:13px;right:13px;bottom:12px}
  .article-hero{display:flex;padding:29px 23px 30px}
  .article-hero h1{margin:20px 0 13px;font-size:30px}
  .article-hero>p{font-size:11px}
  .article-meta{display:flex;margin-top:22px;padding-top:17px}
}

/* Markdown article content */
.article-section h3{margin:35px 0 16px;color:#5a5159;font:700 20px/1.5 "Zen Maru Gothic","Noto Sans SC",sans-serif}.article-section ul,.article-section ol{margin:0 0 25px;padding-left:24px}.article-section li{margin:8px 0;font-size:14px;line-height:2}.article-section a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}.article-section img{display:block;max-width:100%;height:auto;margin:30px auto;border-radius:6px}.article-section pre{max-width:100%;margin:28px 0;padding:20px;overflow:auto;border-radius:6px;color:#f7f2ed;background:#37333a;font-size:12px;line-height:1.8}.article-section :not(pre)>code{padding:2px 6px;border-radius:4px;color:#b5662f;background:#fff0d1;font-size:.9em}.article-section table{width:100%;margin:28px 0;border-collapse:collapse;font-size:12px}.article-section th,.article-section td{padding:10px;border:1px solid rgba(83,67,79,.13);text-align:left}