/* Hand-drawn notebook look: cream paper + brown ink, uneven outlines, offset
   "pressed" shadows and marker highlights. Palette stays on the original tones. */
:root{
  --bg:#faf7f2;--paper:#fffdf9;--paper-2:#f4ede2;
  --ink:#3a281b;--brown:#503726;--text:#40362f;--muted:#7d7166;--line:#d9ccbc;
  --pink:#eeb0a6;--soft-pink:#faeae5;--marker:#f6cfc5;--focus:#9a5b43;
  --hand:"Segoe Print","Bradley Hand","Chalkboard SE","Marker Felt","Comic Sans MS",cursive;
  --wobble:16px 13px 18px 12px/12px 17px 13px 16px;
  --wobble-sm:10px 8px 11px 7px/7px 11px 8px 10px;
  --shadow:3px 3px 0 var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  /* paper grain */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .31 0 0 0 0 .22 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button,input,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button,input{font:inherit}
button,a{color:inherit}
button{cursor:pointer}
a{text-decoration:none}
:focus-visible{outline:2.5px dashed var(--focus);outline-offset:4px}
button:disabled{cursor:wait;opacity:.6}
.container{width:min(1000px,calc(100% - 64px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-80px;left:16px;background:var(--brown);color:#fff;padding:10px 18px;z-index:50;border-radius:8px}
.skip-link:focus{top:12px}

/* icons */
.ic{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ic .ic-fill{fill:var(--marker);stroke:none;opacity:.85}
[data-icon]{display:inline-flex}

/* header */
.site-header{border-bottom:1.5px dashed var(--line)}
.header-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;gap:12px;align-items:center;color:var(--brown)}
.brand-mark{display:flex;justify-content:center;align-items:center;width:40px;height:40px;border:2px solid var(--ink);border-radius:var(--wobble-sm);background:var(--brown);color:var(--bg);box-shadow:2px 2px 0 var(--pink);font-family:Georgia,serif;font-size:32px;font-style:italic;line-height:1;padding-bottom:6px;transform:rotate(-4deg)}
.brand-mark span{color:var(--pink);font-size:26px;padding-top:4px}
/* logo.jpg is a full-body character on white; frame crops to the face */
.brand-mark{position:relative;overflow:hidden}
.brand-logo{display:none}
.brand-mark.has-logo{background:#fff;padding:0;font-size:0}
.brand-mark.has-logo span{display:none}
.brand-mark.has-logo .brand-logo{display:block;position:absolute;width:215%;max-width:none;left:-57.5%;top:-9%}
.brand-name{font-size:15px;font-weight:700;letter-spacing:.2px}
.brand-sub{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:1px}
.header-stat{margin:0;font-family:var(--hand);font-size:13px;color:var(--brown);padding:4px 12px;border:1.5px solid var(--ink);border-radius:var(--wobble-sm);background:var(--paper);transform:rotate(1.5deg)}
.header-stat:empty{display:none}

/* intro */
.intro{padding:44px 0 30px}
.eyebrow{font-family:var(--hand);font-size:14px;color:var(--muted);margin:0 0 6px}
h1{font-size:clamp(30px,4vw,42px);line-height:1.3;letter-spacing:-1px;margin:0;color:var(--brown);font-weight:800}
h1 mark{color:inherit;background:linear-gradient(100deg,transparent 2%,var(--marker) 4%,var(--marker) 94%,transparent 97%) 0 62%/100% 48% no-repeat;padding:0 4px}
.steps{list-style:none;display:flex;flex-wrap:wrap;gap:10px 8px;padding:0;margin:22px 0 0;counter-reset:step}
.steps li{counter-increment:step;display:flex;align-items:center;gap:7px;font-size:13px;color:var(--brown);font-weight:600}
.steps li::before{content:counter(step);font-family:var(--hand);font-size:12px;font-weight:700;width:22px;height:22px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:50% 45% 52% 48%/48% 52% 45% 50%;background:var(--paper)}
.steps li:not(:last-child)::after{content:"";width:26px;height:8px;margin-left:4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 8'%3E%3Cpath d='M1 4.5c6-1.2 13-1.4 22-.6M19.5 1.2c1.3 1 2.5 1.9 3.7 2.8-1.3.9-2.5 1.8-3.6 2.8' fill='none' stroke='%23a3705c' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.steps .step-icon{color:#a3705c}
.steps .ic{width:17px;height:17px}

/* toolbar */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-block:1.5px dashed var(--line);position:sticky;top:0;z-index:5;background:var(--bg)}
.filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chip{display:flex;gap:6px;align-items:center;min-height:38px;padding:6px 12px;border:1.5px solid transparent;border-radius:var(--wobble-sm);background:transparent;color:var(--muted);font-size:13px;white-space:nowrap;transition:background .15s,color .15s,transform .15s}
.chip .ic{width:16px;height:16px}
.chip:hover{color:var(--brown);border-color:var(--line);background:var(--paper)}
.chip.on{color:var(--brown);font-weight:700;border-color:var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--ink);transform:rotate(-1deg)}
.chip-count{font-family:var(--hand);font-size:11px;opacity:.75}
.toolbar-side{display:flex;align-items:center;gap:10px;flex-shrink:0}
.toggle{display:flex;align-items:center;gap:7px;min-height:38px;padding:0 6px;border:0;background:none;color:var(--muted);font-size:13px;white-space:nowrap}
.toggle-box{width:18px;height:18px;border:1.5px solid var(--ink);border-radius:5px 4px 6px 4px;background:var(--paper);display:grid;place-items:center}
.toggle-box .ic{width:15px;height:15px;stroke-width:2.4;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.toggle[aria-pressed="true"]{color:var(--brown);font-weight:600}
.toggle[aria-pressed="true"] .ic{opacity:1;transform:scale(1)}
.search-box{display:flex;align-items:center;gap:8px;width:240px;padding:0 12px;border:1.5px solid var(--ink);border-radius:var(--wobble-sm);background:var(--paper);color:var(--muted)}
.search-box:focus-within{box-shadow:2px 2px 0 var(--ink)}
.search-box .ic{width:17px;height:17px}
.search-box input{width:100%;min-width:0;padding:9px 0;border:0;background:transparent;color:var(--text);font-size:13px;outline:none}
.search-box input::placeholder{color:#a3968a}
.results-summary{font-size:12px;color:var(--muted);margin:16px 0 20px;min-height:20px}

/* feed */
.date-group{margin-bottom:30px}
.date-heading{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-family:var(--hand);font-size:15px;font-weight:700;color:var(--brown)}
.date-heading::after{content:"";flex:1;height:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4C20 2 40 4.4 60 3s40-1.6 59 .2' fill='none' stroke='%23d9ccbc' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.today{font-size:11px;padding:1px 9px;border-radius:var(--wobble-sm);background:var(--pink);color:var(--ink);transform:rotate(-3deg)}

.piece{position:relative;margin-bottom:18px;padding:24px 26px 20px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--wobble);box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.piece:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.piece:nth-child(odd){border-radius:13px 18px 12px 17px/17px 12px 18px 13px}
.piece-overview{display:flex;gap:26px;align-items:flex-start}
.piece-content{flex:1;min-width:0}
.meta{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:10px;font-size:12px;color:var(--muted)}
.platform{display:inline-flex;align-items:center;gap:5px;padding:2px 10px 2px 7px;border:1.5px solid var(--ink);border-radius:var(--wobble-sm);background:var(--soft-pink);color:var(--ink);font-size:12px;font-weight:700}
.platform .ic{width:15px;height:15px}
.platform .ic .ic-fill{fill:var(--paper)}
.platform[data-platform="热点速递"]{background:#e8eddd}
.platform[data-platform="公众号长文"]{background:#efe5d6}
.platform[data-platform="小红书"]{background:#fbdfe5}
.platform[data-platform="X文章"]{background:#e9e5df}
.slot{display:inline-flex;align-items:center;gap:4px;color:var(--brown);font-weight:600}
.slot .ic{width:15px;height:15px}
.stamp{margin-left:auto;font-family:var(--hand);font-size:12px;font-weight:700;color:#a3705c;padding:0 8px;border:1.5px dashed currentColor;border-radius:var(--wobble-sm);transform:rotate(3deg)}
.piece h3{margin:0 0 8px;font-size:21px;line-height:1.45;letter-spacing:-.4px;font-weight:800;color:var(--brown);overflow-wrap:anywhere}
.excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;color:var(--muted);font-size:14px;line-height:1.85;overflow-wrap:anywhere}
.tags{display:flex;gap:4px 10px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:#9a8878}
.cover-button{position:relative;flex-shrink:0;width:108px;aspect-ratio:3/4;padding:0;overflow:hidden;background:var(--paper-2);border:2px solid var(--ink);border-radius:var(--wobble-sm);transform:rotate(2deg);box-shadow:2px 2px 0 var(--pink);transition:transform .2s}
.cover-button:hover{transform:rotate(0) scale(1.03)}
.cover-button img{display:block;width:100%;height:100%;object-fit:cover}
.image-count{position:absolute;right:5px;bottom:5px;padding:1px 7px;border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink);font-family:var(--hand);font-size:11px;font-weight:700}

/* actions */
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1.5px dashed var(--line)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 15px;border:2px solid var(--ink);border-radius:var(--wobble-sm);background:var(--paper);color:var(--ink);font-size:13px;font-weight:700;line-height:1.4;white-space:nowrap;box-shadow:2px 2px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .15s}
.button:hover{background:var(--paper-2)}
.button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.button .ic{width:17px;height:17px}
.button-primary{background:var(--brown);color:#fff8ef}
.button-primary:hover{background:#654530}
.button-primary .ic .ic-fill{fill:#8a5e45}
.button-quiet{border-color:transparent;box-shadow:none;background:transparent;color:var(--muted);font-weight:600;padding-inline:8px}
.button-quiet:hover{background:transparent;color:var(--brown)}
.button-quiet:active{transform:none}
.details-toggle .ic{transition:transform .2s}
.details-toggle[aria-expanded="true"] .ic{transform:rotate(180deg)}
.mark-button{margin-left:auto;border-style:dashed;box-shadow:none;color:var(--muted);font-weight:600}
.mark-button:hover{color:var(--brown);border-style:solid}
.mark-button:active{transform:translate(1px,1px)}

/* posted state */
.piece.is-posted{background:#f8f3eb;border-color:#a39486;box-shadow:3px 3px 0 #cbbfb0}
.piece.is-posted h3{color:#8a7a6c}
.piece.is-posted h3{text-decoration:line-through;text-decoration-color:#c9a597;text-decoration-thickness:2px}
.piece.is-posted .cover-button{filter:saturate(.5);opacity:.75}
.piece.is-posted .stamp{color:#6f7d5e;transform:rotate(-4deg)}
.piece.is-posted .mark-button{border-style:solid;border-color:#7f8d6c;color:#5d6b4d;background:#e8eddd}
.piece.is-posted .mark-button .ic{stroke-width:2.4}

/* details */
.piece-details{margin-top:18px;padding-top:20px;border-top:1.5px dashed var(--line)}
.piece-details[hidden]{display:none}
.section-label{display:inline-block;margin:0 0 12px;font-size:13px;font-weight:700;color:var(--brown);background:linear-gradient(transparent 58%,var(--marker) 58%,var(--marker) 92%,transparent 92%);padding:0 3px}
.body-copy{max-width:760px;margin:0 0 26px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.95;color:var(--text)}
.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.image-tile{margin:0;min-width:0;overflow:hidden;background:var(--paper-2);border:1.5px solid var(--ink);border-radius:var(--wobble-sm)}
.image-tile:nth-child(3n+1){transform:rotate(-.8deg)}
.image-tile:nth-child(3n+2){transform:rotate(.6deg)}
.image-preview{display:block;width:100%;height:180px;padding:0;border:0;background:transparent;overflow:hidden}
.image-preview img{display:block;width:100%;height:100%;object-fit:contain}
.image-tile figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-top:1.5px dashed var(--line);background:var(--paper);font-family:var(--hand);font-size:12px;color:var(--muted)}
.image-tile a{display:inline-flex;align-items:center;gap:4px;padding:3px 2px;color:var(--brown);font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-weight:700}
.image-tile a .ic{width:15px;height:15px}
.image-tile a:hover{text-decoration:underline wavy var(--pink)}

/* empty */
.empty-state{padding:44px 20px 52px;text-align:center;border:2px dashed var(--line);border-radius:var(--wobble);background:#fffdf980}
.empty-icon{display:inline-grid;place-items:center;width:56px;height:56px;border:2px solid var(--ink);border-radius:var(--wobble-sm);background:var(--paper);color:var(--brown);transform:rotate(-4deg)}
.empty-icon .ic{width:28px;height:28px}
.empty-state h3{margin:16px 0 6px;font-size:17px;font-weight:700;color:var(--brown)}
.empty-state p{margin:0 0 18px;font-size:13px;color:var(--muted)}

.site-footer{display:flex;justify-content:space-between;gap:20px;margin-top:40px;padding:22px 0 30px;border-top:1.5px dashed var(--line);font-size:12px;color:var(--muted)}
.site-footer span:first-child{font-family:var(--hand)}

/* lightbox */
.lightbox{width:min(960px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:18px 22px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--wobble);color:var(--text);box-shadow:5px 5px 0 var(--ink)}
.lightbox::backdrop{background:#261c16b3;backdrop-filter:blur(4px)}
body:has(.lightbox[open]){overflow:hidden}
.lightbox-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}
.lightbox-toolbar h2{margin:0;font-size:16px;font-weight:700;color:var(--brown);overflow-wrap:anywhere}
.lightbox-toolbar p{margin:2px 0 0;font-family:var(--hand);font-size:12px;color:var(--muted)}
.icon-button,.lightbox-nav{display:grid;place-items:center;flex-shrink:0;padding:0;border:2px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.icon-button{width:40px;height:40px;border-radius:50% 46% 52% 48%/48% 52% 46% 50%}
.icon-button:hover,.lightbox-nav:hover{background:var(--paper-2)}
.icon-button:active,.lightbox-nav:active{transform:translate(2px,2px);box-shadow:none}
.lightbox-stage{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:12px;padding:10px;background:var(--paper-2);border:1.5px dashed var(--line);border-radius:var(--wobble-sm)}
.lightbox-stage img{display:block;width:100%;height:min(65dvh,700px);object-fit:contain}
.lightbox-nav{width:42px;height:48px;border-radius:var(--wobble-sm)}
.lightbox-nav .ic{width:22px;height:22px}
.lightbox-nav:disabled{visibility:hidden}
.lightbox-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:14px;font-size:12px;color:var(--muted)}

.toast{position:fixed;bottom:28px;left:50%;z-index:100;width:max-content;max-width:calc(100% - 32px);padding:11px 18px;background:var(--brown);color:#fff8ef;border:2px solid var(--ink);border-radius:var(--wobble-sm);box-shadow:3px 3px 0 var(--pink);font-size:13px;opacity:0;pointer-events:none;transform:translate(-50%,14px) rotate(-1deg);transition:opacity .2s,transform .2s}
.toast.visible{opacity:1;transform:translate(-50%,0) rotate(-1deg)}
.noscript{text-align:center;font-size:14px;padding:20px;color:var(--brown)}

@media(max-width:1080px){
  .toolbar{flex-direction:column;align-items:stretch;gap:10px}
  .filters{flex-wrap:nowrap;overflow-x:auto;padding:2px 4px 6px 2px;margin-inline:-2px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .toolbar-side{justify-content:space-between}
  .search-box{flex:1;width:auto}
}
@media(max-width:650px){
  .container{width:calc(100% - 32px)}
  .header-inner{height:64px}
  .brand-mark{width:34px;height:34px;font-size:27px}
  .brand-name{font-size:14px}
  .brand-sub{font-size:10px}
  .header-stat{font-size:12px;padding:3px 9px}
  .intro{padding:28px 0 22px}
  h1{font-size:30px}
  .steps{gap:8px 4px;margin-top:16px}
  .steps li{font-size:12px;gap:5px}
  .steps li:not(:last-child)::after{width:16px;margin-left:2px}
  .steps .step-icon{display:none}
  .toolbar{padding:10px 0}
  .filters{flex-wrap:nowrap;overflow-x:auto;padding:2px 4px 6px 2px;margin-inline:-2px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .chip{font-size:12px;padding:5px 10px}
  .search-box input{font-size:16px}
  .piece{padding:18px 16px 14px}
  .piece-overview{gap:14px}
  .meta{font-size:11px;gap:6px 8px}
  .piece h3{font-size:18px}
  .excerpt{font-size:13px;-webkit-line-clamp:3}
  .cover-button{width:78px}
  .image-count{font-size:10px;padding:0 5px}
  .actions{gap:8px}
  .actions .button-primary,.actions .button-secondary{flex:1}
  .button{padding:8px 11px;font-size:13px;min-height:42px}
  .details-toggle{padding-inline:4px}
  .mark-button{margin-left:auto}
  .body-copy{font-size:14px}
  .images-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .image-preview{height:170px}
  .site-footer{flex-direction:column;gap:6px;margin-top:28px;font-size:11px}
  .lightbox{width:calc(100% - 20px);max-height:calc(100dvh - 20px);padding:14px 12px}
  .lightbox-stage{grid-template-columns:32px minmax(0,1fr) 32px;gap:4px;padding:6px}
  .lightbox-stage img{height:62dvh}
  .lightbox-nav{width:32px;height:44px}
  .lightbox-footer>span{display:none}
  .lightbox-footer{justify-content:flex-end}
  .toast{bottom:20px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}