/* 「做法」頁共用樣式：基底、篩選、閱讀層、版面切換列 */
:root{--cream:#FBF4E8;--ink:#2B1F18;--tan:#F27A2E;--sage:#A9BE93;--lav:#C3B2EA;--bg:#EBD98F;--line:rgba(43,31,24,.34)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{font-family:"Bricolage Grotesque","Noto Sans TC","PingFang TC",sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}
.mono{font-size:12px;letter-spacing:.08em;font-weight:500}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.45;z-index:50;mix-blend-mode:multiply}
#fc{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
main{position:relative;z-index:1}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes rise{from{opacity:0;transform:translateY(46px)}}
[hidden]{display:none!important}

/* 篩選 */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{background:none;border:1px solid var(--line);padding:.55em 1.1em;cursor:pointer;transition:.25s}
.chips button:hover{border-color:currentColor}
.chips button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* X 追蹤連結 */
.follow{display:inline-flex;gap:.6em;align-items:center;font-weight:700;position:relative;padding:.4em 0}
.follow i.ic{width:18px;height:18px;background:currentColor;-webkit-mask:url(https://cdn.jsdelivr.net/npm/simple-icons@13.21.0/icons/x.svg) center/contain no-repeat;mask:url(https://cdn.jsdelivr.net/npm/simple-icons@13.21.0/icons/x.svg) center/contain no-repeat}
.follow em{font-style:normal;display:inline-block;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.follow:hover em{transform:translateX(5px)}.follow:hover{color:#6a3a14}

/* 版面切換（比較用） */
.sw{position:fixed;left:3.2vw;bottom:2.6vh;z-index:70;display:flex;gap:6px;align-items:center;background:var(--ink);color:var(--cream);padding:6px 8px 6px 14px;border-radius:99px}
.sw span{opacity:.6;margin-right:4px}
.sw a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;transition:.25s}
.sw a:hover{background:rgba(251,244,232,.18)}.sw a.on{background:var(--cream);color:var(--ink)}

/* 閱讀層 */
#rd{position:fixed;inset:0;z-index:55;background:var(--cream);overflow-y:auto;transform:translateY(102%);transition:transform .75s cubic-bezier(.7,0,.2,1);visibility:hidden}
#rd.on{transform:none;visibility:visible}
#rd .cl{position:fixed;top:calc(3.2vh + 56px);right:3.2vw;z-index:2;background:none;border:0;cursor:pointer;padding:.6em 0;font-weight:700}
#rd .cl:hover{color:var(--tan)}
.rd-in{padding:20vh 3.2vw 14vh}
.rd-h{display:grid;grid-template-columns:1fr minmax(0,640px) 1fr;column-gap:3vw}
.rd-h>div{grid-column:2}
.rd-h .meta{display:flex;align-items:baseline;gap:1.4em;flex-wrap:wrap;line-height:1;margin-bottom:3vh;opacity:.7}
.rd-h .meta b{color:var(--tan);opacity:1;font-weight:500}
.rd-h h1,.rd-h h2{font-weight:500;font-size:clamp(34px,4.6vw,76px);letter-spacing:-.045em;line-height:1.12}
.rd-h .sum{margin-top:3vh;font-size:clamp(16px,1.3vw,21px);line-height:1.8;opacity:.78}
.rd-b{display:grid;grid-template-columns:1fr minmax(0,640px) 1fr;column-gap:3vw;margin-top:8vh;row-gap:2.4em}
.rd-b p{grid-column:2;font-size:clamp(16px,1.15vw,19px);line-height:2}
.rd-b aside{grid-column:3;align-self:start;font-size:12.5px;line-height:1.7;letter-spacing:.02em;padding-left:1em;border-left:1.5px solid var(--tan);max-width:15em;margin-top:.4em;opacity:.85}
.rd-b .p{display:contents}
.rd-s{grid-column:2;margin-top:5vh;padding-top:3vh;border-top:1.5px solid var(--line);display:flex;gap:1.6em;flex-wrap:wrap;align-items:center}
.rd-s button,.rd-s a{background:none;border:0;cursor:pointer;font-weight:700;padding:.5em 0;position:relative}
.rd-s button:hover,.rd-s a:hover{color:var(--tan)}
.rd-s small{opacity:.55;margin-left:auto}
.rd-nx{grid-column:2;margin-top:9vh}
.rd-nx button{background:none;border:0;cursor:pointer;text-align:left}
.rd-nx .mono{opacity:.6;display:block;margin-bottom:.8em}
.rd-nx b{font-weight:500;font-size:clamp(24px,2.8vw,44px);letter-spacing:-.04em;line-height:1.2;display:block;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.rd-nx button:hover b{transform:translateX(8px)}
.toast{position:fixed;left:50%;bottom:6vh;transform:translate(-50%,30px);background:var(--ink);color:var(--cream);padding:.8em 1.4em;border-radius:99px;z-index:80;opacity:0;pointer-events:none;transition:.4s cubic-bezier(.3,1.5,.5,1)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.rd-h,.rd-b{grid-template-columns:1fr}.rd-h>div,.rd-b p,.rd-s,.rd-nx{grid-column:1}.rd-b aside{grid-column:1;max-width:none}}
.rd-cv{margin-top:6vh;aspect-ratio:4/3;overflow:hidden;border:1.5px solid var(--ink);background:var(--bg)}
.rd-cv img{width:100%;height:100%;object-fit:cover;display:block}

/* 內文的其他區塊：小標、圖、影片、清單、程式碼（皆在中欄） */
.rd-b .p>:not(aside){grid-column:2}
.rd-b h2{font-weight:500;font-size:clamp(22px,1.9vw,32px);letter-spacing:-.035em;line-height:1.3;margin-top:1.4em}
.rd-b h3{font-weight:600;font-size:clamp(17px,1.3vw,21px);letter-spacing:-.02em;margin-top:1em}
.rd-b figure img{display:block;width:100%;height:auto;border:1.5px solid var(--ink)}
.rd-b figcaption{margin-top:.9em;opacity:.65;line-height:1.6}
.rd-b .vid{position:relative;aspect-ratio:16/9;border:1.5px solid var(--ink);background:var(--ink)}
.rd-b .vid iframe,.rd-b .vid video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.rd-b ul,.rd-b ol{padding-left:1.4em;font-size:clamp(16px,1.15vw,19px);line-height:2}
.rd-b pre{background:var(--ink);color:var(--cream);padding:1.2em 1.4em;overflow-x:auto;font-size:13.5px;line-height:1.7}
.rd-b p a,.rd-b li a{border-bottom:1.5px solid var(--tan)}
.rd-nx a{display:block}.rd-nx a:hover b{transform:translateX(8px)}
@media(max-width:900px){.rd-b .p>:not(aside){grid-column:1}}

/* 單篇文章頁（/how/<id>/）：閱讀層直接當整頁 */
.article,.article body{background:var(--cream)}
#rd.page{position:relative;inset:auto;transform:none;visibility:visible;overflow:visible;transition:none;min-height:100vh}