/* ULP 子頁共用樣式：courses、courses_detail、news、news_detail、contact。
   index.html 不用這個檔：它由 work/add-interactions.mjs 產生，CSS 全部內嵌。
   這裡的頁首、頁尾、課卡、階段標籤是從 index 複製的，改的時候 index（改 work/index.pre-interactions.html）要一起改。
   顏色只用 tokens.css 的變數，不寫色碼；例外是 .bg-ctg／.bg-ft 模糊色塊（取自原站的裝飾漸層）與 --stage-* 標籤色。 */

/* 原站 Latin 字型 urw-din 為商用字型，改用 DIN 風格的 Barlow；IBM Plex Serif 為開源字型。中文沿用系統字型蘋方 */
@font-face{font-family:'Barlow';font-weight:400;font-display:block;src:url(fonts/Barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;font-display:block;src:url(fonts/Barlow-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Serif';font-weight:500;font-display:block;src:url(fonts/IBMPlexSerif-500.woff2) format('woff2')}

/* ---------- 本站 token（同 index.html；選擇器不要改成 :root，這段排在 tokens.css 後面，會蓋過 brand／moss） ---------- */
:root{
  --sans:"Barlow","PingFang TC","Noto Sans TC","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"IBM Plex Serif",serif;
  /* 學程階段的類別色，三套主題共用 */
  --stage-foundation:#2f6bff; --stage-agama:#ea5449; --stage-prajna:#ff6b00; --stage-lotus:#1e9747;
}
/* --backdrop：.bgx 模糊色塊的透明度。原站的深灰、深藍光暈放在淺色底上像髒污，所以 brand 是 0 */
[data-theme=ink]{
  --backdrop:1;
  /* 保留原站的深色：底色、頁首、白底深字的主要按鈕 */
  --bg:#030303; --surface:#17191c; --accent:#fff; --accent-hover:#e4e4e4; --on-accent:#232629;
}
[data-theme=brand]{--backdrop:0}
[data-theme=moss]{--backdrop:.3}

/* ---------- 基本 ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{font:400 14px/23.8px var(--sans);color:var(--text);letter-spacing:.3px;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0}
svg{display:block}
img{display:block;max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[id]{scroll-margin-top:64px}
/* 不讓瀏覽器在連字號後斷行，否則手機上會變成「Micro- / Programs」 */
.nobr{white-space:nowrap}
.wrap{max-width:1440px;margin:0 auto;padding:0 80px}

/* 模糊色塊：.fx::before 繼承 .bg-* 的漸層再模糊，四邊再用遮罩淡出成柔光 */
.fx{position:relative;overflow:hidden}
.fx::before{content:"";position:absolute;inset:calc(var(--b,12px) * -2);background:inherit;filter:blur(var(--b,12px))}
.fx>*{position:relative}
.bgx{opacity:var(--backdrop,1)}
.sec{position:relative;background:var(--bg);overflow:hidden}
.sec>*{position:relative}
.sec>.bgx{position:absolute;left:0;top:0;width:100%;-webkit-mask-image:radial-gradient(closest-side,black 35%,transparent);mask-image:radial-gradient(closest-side,black 35%,transparent)}
.bg-ctg{background:linear-gradient(90deg,rgb(15,15,15),rgb(25,25,25),rgb(32,32,32),rgb(35,35,35),rgb(35,35,35),rgb(32,32,32),rgb(26,26,26),rgb(16,16,16)) 0 0.00%/100% 33.333% no-repeat,linear-gradient(90deg,rgb(19,19,19),rgb(19,19,19),rgb(19,19,19),rgb(35,35,35),rgb(32,32,32),rgb(19,19,19),rgb(19,19,19),rgb(19,19,19)) 0 50.00%/100% 33.333% no-repeat,linear-gradient(90deg,rgb(9,9,9),rgb(9,9,9),rgb(9,9,9),rgb(22,22,22),rgb(17,17,17),rgb(9,9,9),rgb(9,9,9),rgb(9,9,9)) 0 100.00%/100% 33.333% no-repeat;--b:24px}
.bg-ft{background:linear-gradient(90deg,rgb(24,40,78),rgb(16,26,48),rgb(8,13,23),rgb(4,6,8),rgb(3,3,3),rgb(3,3,3),rgb(3,3,3),rgb(3,3,3),rgb(3,3,3),rgb(3,3,3),rgb(3,3,3),rgb(4,4,4),rgb(4,4,4),rgb(3,3,3)) 0 0.00%/100% 16.667% no-repeat,linear-gradient(90deg,rgb(19,33,66),rgb(48,54,67),rgb(41,43,48),rgb(15,15,16),rgb(3,3,3),rgb(3,3,3),rgb(3,3,3),rgb(3,3,3),rgb(3,3,3),rgb(9,13,19),rgb(3,3,3),rgb(16,17,18),rgb(21,22,25),rgb(11,13,18)) 0 20.00%/100% 16.667% no-repeat,linear-gradient(90deg,rgb(13,21,37),rgb(7,11,19),rgb(4,6,8),rgb(3,3,3),rgb(3,3,3),rgb(3,4,5),rgb(4,6,12),rgb(6,10,23),rgb(9,17,38),rgb(13,23,53),rgb(13,26,61),rgb(13,27,66),rgb(12,27,66),rgb(9,24,63)) 0 40.00%/100% 16.667% no-repeat,linear-gradient(90deg,rgb(16,20,30),rgb(11,14,19),rgb(20,24,33),rgb(26,31,43),rgb(29,32,40),rgb(23,38,79),rgb(34,54,103),rgb(34,56,111),rgb(29,52,107),rgb(24,45,96),rgb(19,38,84),rgb(14,31,73),rgb(9,25,62),rgb(6,21,54)) 0 60.00%/100% 16.667% no-repeat,linear-gradient(90deg,rgb(19,29,55),rgb(32,46,84),rgb(29,47,93),rgb(31,48,79),rgb(41,44,50),rgb(25,44,89),rgb(25,46,97),rgb(22,42,91),rgb(18,37,82),rgb(14,32,73),rgb(9,26,64),rgb(12,27,60),rgb(49,61,86),rgb(12,24,48)) 0 80.00%/100% 16.667% no-repeat,linear-gradient(90deg,rgb(11,28,69),rgb(14,31,72),rgb(15,33,76),rgb(17,35,78),rgb(19,36,76),rgb(15,33,75),rgb(12,30,70),rgb(10,27,65),rgb(7,23,58),rgb(6,20,52),rgb(5,18,46),rgb(4,16,40),rgb(4,14,34),rgb(3,11,27)) 0 100.00%/100% 16.667% no-repeat;--b:30px}

/* ---------- 按鈕 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:6px;padding:0 20px;white-space:nowrap;cursor:pointer;transition:opacity .2s,border-color .2s}
.btn svg{width:16px;height:16px;flex:none}
.btn.pri{background:var(--accent);color:var(--on-accent)}
.btn.pri:hover{opacity:.9}
.btn.line{border:1px solid var(--chip)}
.btn.line:hover{border-color:var(--border-strong)}

/* ---------- 頁首（同 index.html） ---------- */
.hd{position:fixed;z-index:50;top:0;left:0;right:0;height:64px;background:var(--surface);display:flex;align-items:center;padding:0 48px}
.logo{display:flex;align-items:center;gap:10px;width:220px;height:32px}
.lg{flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden}
.lg img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.logo b{font:500 23px/24px var(--sans);letter-spacing:2px}
.logo small{font:500 10px/10px var(--sans);letter-spacing:1px}
.nav{display:flex;align-items:center;gap:32px;margin-left:32px}
.nav a{line-height:23.8px}
.nav>*{position:relative;isolation:isolate}
.nav>*::before{content:"";position:absolute;z-index:-1;inset:-8px;border-radius:6px;background:var(--surface-hover);opacity:0;transition:opacity .3s;pointer-events:none}
/* 目前頁面（aria-current=page）與所屬分類（詳細頁的 aria-current=true）常駐底色 */
.nav>*:hover::before,.nav>[aria-current]::before{opacity:1}
.hr{margin-left:auto;display:flex;align-items:center}
.hr .rg{margin-left:24px}
.themes{--ring:var(--text);--gap:var(--bg);--focus-ring:var(--focus);display:flex;gap:6px;padding:5px;border-radius:20px;background:var(--bg)}
.themes label{position:relative;display:block;cursor:pointer}
.themes .sw{display:block;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--bg) 50%,var(--accent) 50%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ring) 30%,transparent)}
.themes input:checked+.sw{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ring) 30%,transparent),0 0 0 2px var(--gap),0 0 0 4px var(--ring)}
.themes input:focus-visible+.sw{outline:2px solid var(--focus-ring);outline-offset:5px}
main{padding-top:64px}

/* ---------- 頁首橫幅（置中：麵包屑、大標、導言） ---------- */
.pg-hero{padding-top:72px;text-align:center}
.pg-hero .bgx{height:200px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;line-height:21px;color:var(--text-muted)}
.crumb a:hover{color:var(--text)}
.pg-hero .crumb{justify-content:center}
.pg-hero h1{margin-top:16px;font:500 40px/52px var(--sans);letter-spacing:1px}
.pg-hero .lead{max-width:600px;margin:16px auto 0;font-size:18px;line-height:27px;color:var(--text-soft)}

/* 區塊標題：小標題 + 一行說明 */
.sh h2{font:500 24px/36px var(--sans);letter-spacing:.5px}
.sh p{margin-top:4px;color:var(--text-muted)}

/* ---------- 階段標籤（同 index.html 的 .pills；按鈕或連結都可以） ---------- */
.pw{position:relative}
.pills{display:flex;flex-wrap:wrap;gap:12px}
.pills>*{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--chip);border-radius:100px;font-size:16px;line-height:27.2px;white-space:nowrap;cursor:pointer;transition:border-color .2s}
.pills>*:hover{border-color:var(--border-strong)}
.pills>.on,.pills>[aria-current]{background:var(--text);color:var(--bg);border-color:transparent}
.pills .n{color:var(--text-muted)}
.pills>.on .n,.pills>[aria-current] .n{color:inherit;opacity:.7}

/* 學程階段徽章 */
.stage{display:inline-block;height:24px;padding:2px 10px;border-radius:12px;color:var(--on-media);font:500 12px/20.4px var(--sans);letter-spacing:.3px;white-space:nowrap}
.stage[data-stage=foundation]{background:var(--stage-foundation)}
.stage[data-stage=agama]{background:var(--stage-agama)}
.stage[data-stage=prajna]{background:var(--stage-prajna)}
.stage[data-stage=lotus]{background:var(--stage-lotus)}
/* 文章分類：外框小標籤 */
.tag{display:inline-block;height:24px;padding:0 10px;border:1px solid var(--chip);border-radius:100px;font-size:12px;line-height:22px;color:var(--text);white-space:nowrap}

/* ---------- 輸入欄 ---------- */
.in{display:block;width:100%;height:40px;padding:0 14px;border:1px solid var(--chip);border-radius:6px;background:var(--surface);font-size:14px;transition:border-color .2s}
.in::placeholder{color:var(--text-muted);opacity:1}
.in:hover{border-color:var(--border-strong)}
.in:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* 下拉選單：關掉原生箭頭，換成跟主題同色的 V */
.sel{position:relative}
.sel .in{-webkit-appearance:none;appearance:none;padding-right:36px;cursor:pointer}
.sel .chev{position:absolute;right:16px;top:14px;width:7px;height:7px;border-right:1.5px solid var(--text-muted);border-bottom:1.5px solid var(--text-muted);transform:rotate(45deg);pointer-events:none}

/* ---------- 課卡（同 index.html 的 .cc，多一行 093 的課程說明） ---------- */
.kgrid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}
.kgrid li[hidden]{display:none}
.cc{position:relative;isolation:isolate;display:block;min-width:0}
/* hover：底色往外 12px（同 index） */
.cc::before,.post::before{content:"";position:absolute;z-index:-1;inset:-12px;border-radius:16px;background:var(--surface);opacity:0;transition:opacity .3s;pointer-events:none}
.cc:hover::before,.post:hover::before{opacity:1}
.th{position:relative;border-radius:12px;overflow:hidden;background:var(--media-placeholder)}
.th img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.cc:hover .th img,.post:hover .th img,.feat:hover .th img{transform:scale(1.05)}
.cc .th{height:170px}
.cc .bdg{position:absolute;right:0;bottom:0;height:24px;padding:2px 10px;border-radius:12px 0 0;color:var(--on-media);font:500 12px/20.4px var(--sans);letter-spacing:.3px}
.cc[data-stage=foundation] .bdg{background:var(--stage-foundation)}
.cc[data-stage=agama] .bdg{background:var(--stage-agama)}
.cc[data-stage=prajna] .bdg{background:var(--stage-prajna)}
.cc[data-stage=lotus] .bdg{background:var(--stage-lotus)}
.cc h3{margin-top:12px;font:500 16px/27.2px var(--sans);letter-spacing:.3px;overflow-wrap:anywhere}
.cc .sub{margin-top:4px;font-size:12px;line-height:18px}
.cc .ds{margin-top:8px;color:var(--text-muted)}
.cc .pr{margin-top:8px}
.cc .pr b{font:500 20px/30px var(--sans);letter-spacing:.5px}
.cc .stu{margin-top:4px;display:flex;align-items:center;gap:4px;line-height:21px}
.cc .stu svg{flex:none}
.cc .stu .u{color:var(--text-muted)}

/* ---------- 文章卡（同 index.html 的專欄卡 .nc2，加上分類、閱讀時間、摘要） ---------- */
.posts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
.post{position:relative;isolation:isolate;display:block}
.post .th{height:220px}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:14px;line-height:21px;color:var(--text-muted)}
.post .byline{margin-top:16px}
.post h3{margin-top:8px;font:500 18px/27px var(--sans);letter-spacing:.3px}
.post p{margin-top:8px;color:var(--text-muted)}

/* 側欄資訊卡（課程詳細頁、文章頁） */
.side{position:sticky;top:88px;padding:28px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.side h2{font:500 18px/27px var(--sans);letter-spacing:.3px}

/* ---------- 頁尾（同 index.html：絕對定位，所以 .ft 高度要跟著內容一起調） ---------- */
.ft{position:relative;height:524px;overflow:hidden;background:var(--bg-bar)}
.ft .bgx{position:absolute;inset:0}
.ft .flogo{position:absolute;left:80px;top:65px;display:flex;align-items:center;gap:12px;height:38px}
.ft .flogo .lg{width:38px;height:38px}
.ft .flogo b{font:500 28px/29px var(--sans);letter-spacing:3px}
.ft .flogo small{font:500 12px/12px var(--sans);letter-spacing:1px}
.fc{position:absolute;top:206px}
.fc.f1{left:80px}
.fc.f2{left:232px}
.fc span{display:block;font-size:12px;line-height:20.4px;color:var(--text-muted);margin-bottom:8px}
.fc a{display:block;color:var(--text-soft);margin-bottom:8px}
.fc a:hover{color:var(--text)}
.co{position:absolute;right:80px;top:206px;text-align:right;font-size:12px;line-height:18px;color:var(--text-soft);letter-spacing:0}
.co p+p{margin-top:4px}
.co span{display:block;font-size:12px;line-height:20.4px;color:var(--text-muted);margin-bottom:8px}
.co p{font-size:14px;line-height:23.8px}
.co .cp{margin-top:12px;font-size:12px;line-height:18px;color:var(--text-muted)}
.co a:hover{color:var(--text)}
.fl{position:absolute;left:80px;right:80px;top:372px;padding-top:20px;border-top:1px solid var(--border)}
.fl span{display:block;font-size:12px;line-height:20.4px;color:var(--text-muted);margin-bottom:12px}
.fl ul{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;list-style:none}
.fl a{height:58px;border:1px solid var(--border);border-radius:12px;background:var(--logo-plate);display:flex;align-items:center;justify-content:center;padding:10px 14px;transition:background .2s,border-color .2s}
.fl a:hover{background:var(--logo-plate-hover);border-color:var(--border-strong)}
.fl img{display:block;max-width:100%;max-height:38px;width:auto;height:auto;object-fit:contain}

/* ---------- 手機選單：漢堡鈕展開頁首底下的面板（同一份在 site.css 與 work/add-interactions.mjs） ---------- */
/* 按鈕 40×40 方便點，負 margin 讓圖示留在原本 20px 圖示的位置 */
.mbtn{display:none;width:40px;height:40px;margin:0 -10px 0 6px;border-radius:6px;place-items:center;color:var(--text);cursor:pointer}
.mbtn svg{width:20px;height:20px}
.mbtn .x,.hd.open .mbtn .bars{display:none}
.hd.open .mbtn .x{display:block}
.mnav,.mscrim{display:none}
@media (max-width:767px){
.mbtn{display:grid}
/* 收起時用 visibility:hidden，裡面的連結就不會被 Tab 到；延遲 .2s 才藏，淡出動畫才看得到 */
.mnav{position:fixed;z-index:2;top:64px;left:0;right:0;display:flex;flex-direction:column;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;padding:4px 20px 24px;background:var(--surface);border-top:1px solid var(--border);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.mnav a{display:flex;align-items:center;gap:10px;height:56px;border-bottom:1px solid var(--border);font-size:18px;line-height:27px}
.mnav a[aria-current]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--text)}
.mnav .go{justify-content:center;height:44px;margin-top:24px;border:0;border-radius:6px;background:var(--accent);color:var(--on-accent);font-size:16px}
.mscrim{position:fixed;z-index:1;top:64px;left:0;right:0;bottom:0;display:block;background:color-mix(in srgb,var(--scrim) 60%,transparent);visibility:hidden;opacity:0;transition:opacity .2s,visibility 0s linear .2s}
.hd.open .mnav,.hd.open .mscrim{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s}
/* 選單開著時鎖住背景捲動 */
html.menu-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
.mnav,.mscrim{transition:none}
}

/* ---------- 較窄的桌機、平板 ---------- */
@media (max-width:1200px){
.kgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1023px){
.wrap{padding:0 40px}
/* 頁首在 768–860px 會擠出畫面：logo 不留固定寬、間距縮小 */
.hd{padding:0 24px}
.logo{width:auto}
.nav{gap:24px;margin-left:24px}
.kgrid,.posts{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 頁尾左右邊距跟著內容縮成 40px */
.ft .flogo,.fc.f1{left:40px}
.fc.f2{left:192px}
.co{right:40px}
.fl{left:40px;right:40px}
}

/* ---------- 手機版（同 index.html 的斷點 767px） ---------- */
@media (max-width:767px){
.bg-ctg{background:linear-gradient(90deg,rgb(14,14,14),rgb(20,20,20),rgb(19,19,19),rgb(15,15,15)) 0 0.00%/100% 50.000% no-repeat,linear-gradient(90deg,rgb(6,6,6),rgb(12,12,12),rgb(11,11,11),rgb(6,6,6)) 0 100.00%/100% 50.000% no-repeat!important}
.bg-ft{background:linear-gradient(90deg,rgb(34,51,92),rgb(44,50,60),rgb(31,32,33),rgb(15,15,15),rgb(0,0,0)) 0 0.00%/100% 14.286% no-repeat,linear-gradient(90deg,rgb(27,37,56),rgb(16,18,23),rgb(17,17,17),rgb(1,2,4),rgb(1,2,3)) 0 16.67%/100% 14.286% no-repeat,linear-gradient(90deg,rgb(22,27,38),rgb(2,5,14),rgb(16,19,30),rgb(7,13,31),rgb(9,17,41)) 0 33.33%/100% 14.286% no-repeat,linear-gradient(90deg,rgb(49,66,111),rgb(37,57,107),rgb(45,65,115),rgb(35,57,112),rgb(31,54,110)) 0 50.00%/100% 14.286% no-repeat,linear-gradient(90deg,rgb(35,53,93),rgb(27,43,80),rgb(26,45,82),rgb(23,38,74),rgb(18,35,76)) 0 66.67%/100% 14.286% no-repeat,linear-gradient(90deg,rgb(36,50,82),rgb(37,49,78),rgb(15,28,59),rgb(19,32,60),rgb(12,27,59)) 0 83.33%/100% 14.286% no-repeat,linear-gradient(90deg,rgb(26,40,70),rgb(20,33,63),rgb(8,21,51),rgb(4,17,46),rgb(4,16,43)) 0 100.00%/100% 14.286% no-repeat!important}
.wrap{padding:0 20px}

.hd{padding:0 28px 0 20px}
.logo{width:26px;height:26px;margin-top:2px}
.logo .lg{width:34px;height:34px}
.logo b,.logo small,.nav,.hr .btn{display:none}
.themes{gap:4px;padding:4px}
.themes .sw{width:18px;height:18px}

.pg-hero{padding-top:48px}
.pg-hero .bgx{height:90px}
.pg-hero h1{font-size:28px;line-height:38px;letter-spacing:.5px}
.pg-hero .lead{font-size:16px;line-height:24px}
.sh h2{font-size:20px;line-height:30px}

/* 標籤改成一排橫滑，貼齊左右邊，右邊淡出提示還有更多 */
.pw .pills{margin:0 -20px;padding:0 20px;flex-wrap:nowrap;justify-content:flex-start;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pw .pills::-webkit-scrollbar{display:none}
.pw::after{content:"";pointer-events:none;position:absolute;right:-20px;top:0;width:60px;height:32px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bg) 80%,transparent))}
.pills>*{height:32px;padding:0 12px;font-size:14px;line-height:23.8px}

/* 課卡改成清單：左縮圖、右文字，說明跨整列（同 index 手機版「最新課程」的清單） */
.kgrid{grid-template-columns:1fr;gap:28px}
.kgrid .cc{display:grid;grid-template-columns:140px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:"th h" "th s" "th m" "d d";column-gap:12px;align-items:start}
.cc::before,.post::before{content:none}
.kgrid .th{grid-area:th;height:88px;border-radius:8px}
.cc .bdg{height:22px;padding:1px 8px;border-radius:8px 0 0}
.kgrid h3{grid-area:h;margin:0;font-size:15px;line-height:22px}
.kgrid .sub{grid-area:s;margin-top:2px}
.kgrid .meta{grid-area:m;margin-top:6px;display:flex;align-items:center;gap:8px}
.kgrid .pr{margin:0}
.kgrid .pr b{font-size:16px;line-height:24px}
.kgrid .stu{margin:0;font-size:12px;line-height:18px}
.kgrid .stu svg{width:12px;height:12px}
.kgrid .ds{grid-area:d;margin-top:10px;font-size:13px;line-height:20px}

.posts{grid-template-columns:1fr;gap:32px}
.post .th{height:190px}
.post h3{font-size:17px;line-height:25px}
.byline{font-size:13px;line-height:20px}
.side{position:static}

.ft{height:852px}
.ft .flogo{left:20px;top:41px}
.fc{top:197px}
.fc.f1{left:20px}
.fc.f2{left:169px}
.co{left:20px;right:auto;top:353px;text-align:left}
.fl{left:20px;right:20px;top:560px}
.fl ul{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
.th img,.cc::before,.post::before,.nav>*::before{transition:none}
}