@font-face{font-family:'Literata';font-style:normal;font-weight:500 800;font-display:swap;src:url('/assets/fonts/literata-var.woff2?v=7478e1920209') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/figtree-var.woff2?v=4ba7d3d09669') format('woff2')}
@font-face{font-family:'Red Hat Mono';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/redhatmono-var.woff2?v=f0c8d8a580be') format('woff2')}
:root{
 --pink:#ff186b;--pink-deep:#c4004a;--ink:#1d1a1c;--ink2:#57505a;--paper:#fbf8f6;--card:#ffffff;
 --line:#e8dfe2;--soft:#f4eef0;--dark:#1d0f17;
 --v1:#d8efe9;--v2:#fbe7c6;--v3:#e6defa;--v4:#e7e5e4;
 --serif:'Literata',Georgia,'Times New Roman',serif;
 --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
 --mono:'Red Hat Mono',ui-monospace,Consolas,monospace;
 --col:74ch;--wide:min(1100px,94vw);
}
*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;font:400 1.0625rem/1.66 var(--sans);color:var(--ink);background:var(--paper)}
h1,h2,h3{font-family:var(--serif);line-height:1.18;letter-spacing:-.012em;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(1.95rem,4.4vw,3.05rem);font-weight:750;margin:.15em 0 .35em}
h2{font-size:clamp(1.4rem,2.6vw,1.95rem);font-weight:700;margin:0 0 .55em}
h3{font-size:1.14rem;font-weight:650;margin:1.2em 0 .35em}
p{margin:.62em 0}
a{color:var(--pink-deep);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--dark)}
img{max-width:100%;height:auto;display:block}
code,.shf-mono{font-family:var(--mono);font-size:.9em}
.shf-skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;z-index:99}
.shf-skip:focus{left:8px}
:focus-visible{outline:3px solid var(--pink-deep);outline-offset:2px;border-radius:4px}

/* header */
.shf-head{background:var(--card);border-bottom:1px solid var(--line)}
.shf-head-in{max-width:var(--wide);margin:0 auto;display:flex;align-items:center;gap:14px 20px;padding:8px 16px;flex-wrap:wrap}
.shf-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:48px;min-width:0}
.shf-brand img{width:105px;height:25px;object-fit:contain;flex:none}
.shf-brand span{font:600 .8rem/1.15 var(--sans);color:var(--ink2);max-width:13ch}
.shf-nav{display:flex;flex-wrap:wrap;gap:2px;margin-left:auto}
.shf-nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:4px 11px;border-radius:8px;font:600 .94rem var(--sans);color:var(--ink);text-decoration:none}
.shf-nav a:hover{background:var(--soft)}
.shf-nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--pink)}
@media(max-width:960px){.shf-nav{margin-left:0}}

/* hero */
.shf-hero{max-width:var(--wide);margin:0 auto;padding:38px 16px 22px}
.shf-hero h1{max-width:22ch}
.shf-lede{font-size:1.15rem;color:var(--ink2);max-width:62ch;margin:.2em 0 1.05em}
.shf-search{display:flex;max-width:760px;background:var(--card);border:2px solid var(--ink);border-radius:12px;overflow:hidden}
.shf-search label{position:absolute;left:-9999px}
.shf-search input{flex:1;border:0;background:transparent;padding:16px 18px;min-height:58px;font:400 1.06rem var(--sans);color:var(--ink)}
.shf-search input:focus{outline:3px solid var(--pink-deep);outline-offset:-3px}
.shf-search button{border:0;background:var(--pink);color:var(--dark);font:700 1.02rem var(--sans);padding:0 28px;min-height:58px;cursor:pointer}
.shf-search button:hover{background:var(--pink-deep);color:#fff}
.shf-strip{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:12px;font-size:.95rem}
.shf-strip a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink2)}

/* sub-page head + ruler */
.shf-crumbs{font:500 .84rem var(--mono);color:var(--ink2)}
.shf-crumbs a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--ink2)}
.shf-ruler{position:relative;max-width:760px;margin:14px 0 6px;padding:0 0 30px}
.shf-ruler-bar{position:relative;height:16px;border-radius:8px;background:repeating-linear-gradient(90deg,#efe6ea 0 calc(100%/18 - 1px),#d9ccd2 calc(100%/18 - 1px) calc(100%/18))}
.shf-ruler-on{position:absolute;top:0;bottom:0;border-radius:8px;background:var(--pink)}
.shf-ruler-ticks{position:absolute;left:0;right:0;top:20px;height:16px;font:500 .74rem var(--mono);color:var(--ink2)}
.shf-ruler-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.shf-ruler-ticks span:first-child{transform:none}
.shf-ruler-ticks span:last-child{transform:translateX(-100%)}
.shf-ruler-cap{font:500 .82rem var(--mono);color:var(--ink2);margin:0}

/* main sections: 每个 section 都是 main 的直接子元素 */
main{display:block}
.shf-sec{max-width:var(--wide);margin:0 auto;padding:34px 16px;border-top:1px solid var(--line)}
.shf-sec.is-first{border-top:0}
.shf-col{max-width:var(--col)}
.shf-ticket{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;margin:0 0 10px;padding:5px 12px 5px 10px;border:1px dashed #b9a9b0;border-radius:6px;background:var(--card);font:600 .78rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.shf-ticket::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pink)}
.shf-ticket.v1{background:var(--v1)}.shf-ticket.v2{background:var(--v2)}.shf-ticket.v3{background:var(--v3)}.shf-ticket.v4{background:var(--v4)}

/* split: 图 55 / 文 45；图在左时列宽跟着换 */
.shf-split{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:32px;align-items:stretch}
.shf-split.img-left{grid-template-columns:minmax(0,55fr) minmax(0,45fr)}
.shf-split.img-left>figure{order:-1}
.shf-split>.shf-txt{display:flex;flex-direction:column;justify-content:center}
.shf-split>.shf-txt>*:first-child{margin-top:0}
figure{margin:20px 0}
.shf-split>figure{margin:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.shf-split>figure img{flex:1 1 auto;min-height:0;width:100%;height:100%;object-fit:contain;background:#fff}
.shf-split>figure figcaption{padding:9px 14px 11px;border-top:1px solid var(--line)}
.shf-wide{margin:22px 0}
.shf-wide img{width:100%;border:1px solid var(--line);border-radius:12px;background:#fff}
figcaption{font-size:.87rem;line-height:1.5;color:var(--ink2);padding-top:8px}
@media(max-width:860px){.shf-split,.shf-split.img-left{grid-template-columns:1fr}.shf-split.img-left>figure{order:0}}

/* four-version cards (2x2, 不做三等宽横排) */
.shf-quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:var(--wide);margin:18px 0}
.shf-quad article{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.shf-quad article.v1{border-top:6px solid #7cc4b3}.shf-quad article.v2{border-top:6px solid #e8b65a}
.shf-quad article.v3{border-top:6px solid #a690e6}.shf-quad article.v4{border-top:6px solid #a8a29e}
.shf-quad h3{margin:.1em 0 .4em}
.shf-quad blockquote{margin:.5em 0;padding:8px 12px;border-left:3px solid var(--line);background:var(--paper);font-size:.96rem}
.shf-quad .src{font:500 .8rem var(--mono);color:var(--ink2)}
@media(max-width:760px){.shf-quad{grid-template-columns:1fr}}

/* tables */
.shf-tablewrap{overflow-x:auto;max-width:var(--col);margin:16px 0}
table{border-collapse:collapse;width:100%;font-size:.95rem;background:var(--card)}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--soft);font-weight:650}
td.num,th.num{white-space:nowrap;font-family:var(--mono);font-size:.9em}
table a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}

/* quotes, notes */
.shf-quote{max-width:var(--col);margin:14px 0;padding:12px 16px;border-left:4px solid var(--pink);background:var(--card);border-radius:0 10px 10px 0}
.shf-quote p{margin:.2em 0}
.shf-quote cite{display:block;font:500 .8rem var(--mono);font-style:normal;color:var(--ink2);margin-top:6px}
.shf-note{max-width:var(--col);padding:12px 16px;background:var(--soft);border-radius:10px;font-size:.97rem}
ul.shf-list,ol.shf-list{max-width:var(--col);padding-left:1.25em}
ul.shf-list li,ol.shf-list li{margin:.32em 0}
.shf-next{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px}
.shf-next a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
p>a:only-child{display:inline-flex;align-items:center;min-height:44px}

/* category wall */
.shf-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0 4px;padding:0;list-style:none}
.shf-wall li{margin:0}
.shf-wall a{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink)}
.shf-wall a:hover{border-color:var(--pink)}
.shf-wall img{width:100%;aspect-ratio:814/392;object-fit:cover;background:#f2eef0}
.shf-wall b{display:block;padding:9px 12px 0;font:650 1rem var(--sans)}
.shf-wall small{display:block;padding:2px 12px 11px;color:var(--ink2);font-size:.86rem;line-height:1.4}
.shf-wall .tag{display:inline-block;margin:0 12px 10px;padding:2px 8px;border-radius:5px;background:var(--soft);font:500 .72rem var(--mono);color:var(--ink2);align-self:flex-start}
@media(max-width:980px){.shf-wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.shf-wall{grid-template-columns:1fr}}

/* planner tool */
.shf-planner{max-width:var(--col);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.shf-planner .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.shf-planner label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:.93rem}
.shf-planner input{min-height:46px;padding:8px 10px;border:1.5px solid #b9a9b0;border-radius:8px;font:400 1rem var(--sans);background:#fff;color:var(--ink)}
.shf-planner button{margin-top:14px;min-height:46px;padding:0 20px;border:0;border-radius:8px;background:var(--dark);color:#fff;font:700 1rem var(--sans);cursor:pointer}
.shf-out{margin-top:16px}
.shf-out table{font-size:.92rem}
.shf-out .ok{color:#0b6b4f;font-weight:650}.shf-out .bad{color:#a3003d;font-weight:650}.shf-out .meh{color:#7a5200;font-weight:650}
@media(max-width:640px){.shf-planner .row{grid-template-columns:1fr}}

/* cta */
.shf-cta{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:9px;background:var(--pink);color:var(--dark);font-weight:700;text-decoration:none}
.shf-cta:hover{background:var(--pink-deep);color:#fff}

/* footer */
.shf-foot{margin-top:30px;background:var(--dark);color:#eadde3}
.shf-foot-in{max-width:var(--wide);margin:0 auto;padding:30px 16px 26px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:22px}
.shf-foot h2{font:700 .95rem var(--sans);color:#fff;margin:0 0 6px}
.shf-foot a{color:#ffd0e0;display:inline-flex;align-items:center;min-height:44px}
.shf-foot ul{list-style:none;margin:0;padding:0}
.shf-foot p{font-size:.9rem;margin:.4em 0}
.shf-foot :focus-visible{outline-color:#ffd0e0}
.shf-foot .shf-legal{grid-column:1/-1;border-top:1px solid #3d2a34;padding-top:12px;font-size:.84rem;color:#cdbcc4}
@media(max-width:860px){.shf-foot-in{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.shf-foot-in{grid-template-columns:1fr}}