/* WEN Magazine - shared feed (hub + section pages). Design-system tokens only. */

/* ---- controls bar ---- */
.mfeed-controls{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;margin:22px 0 20px}
.mfeed-filters{display:flex;gap:8px;flex-wrap:wrap}
.mfeed-filters button{font-family:var(--display);font-synthesis-weight:auto;font-size:12.5px;font-weight:600;color:var(--muted);background:none;border:1.5px solid var(--line);border-radius:4px;padding:7px 14px;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.mfeed-filters button:hover{color:var(--ink);border-color:var(--ink)}
.mfeed-filters button[aria-pressed="true"]{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.mfeed-sort{display:flex;align-items:center;gap:9px}
.mfeed-sort label{font-family:var(--display);font-synthesis-weight:auto;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mfeed-sort select{font-family:var(--display);font-synthesis-weight:auto;font-size:13px;font-weight:600;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:4px;padding:7px 30px 7px 12px;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236d6a61' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 11px center}
.mfeed-sort select:hover{border-color:var(--ink)}

/* ---- card grid ---- */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}

/* ---- card ---- */
.mcard{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:6px;background:var(--paper);overflow:hidden;transition:transform .14s,box-shadow .14s,border-color .14s}
.mcard:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.07);border-color:var(--ink)}
.mcard-cover{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--fog);border-bottom:1.5px solid var(--line)}
.mcard-cover img{width:100%;height:100%;object-fit:cover;display:block}
.mcard-b{display:flex;flex-direction:column;gap:9px;padding:18px 18px 20px;flex:1}
.mcard-badge{align-self:flex-start;font-family:var(--display);font-synthesis-weight:auto;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--marker);border:1px solid var(--line);border-radius:3px;padding:3px 8px}
.mcard-t{font-family:var(--display);font-synthesis-weight:auto;font-weight:500;font-size:18px;line-height:1.22;letter-spacing:-.01em;color:var(--ink)}
.mcard-d{font-family:var(--sans);font-size:14px;line-height:1.5;color:#45423b;flex:1}
.mcard-date{font-family:var(--display);font-synthesis-weight:auto;font-size:11.5px;color:var(--muted);margin-top:2px}

/* ---- typographic placeholder cover (no image) ---- */
.ph{display:flex;align-items:center;justify-content:center;height:100%;position:relative;padding:16px}
.ph .ph-type{font-family:var(--display);font-synthesis-weight:auto;font-weight:700;font-size:clamp(20px,3.4vw,30px);letter-spacing:-.01em;text-align:center;line-height:1.1}
.ph .ph-mark{position:absolute;right:11px;bottom:9px;font-family:var(--display);font-synthesis-weight:auto;font-weight:700;font-size:12px;letter-spacing:.04em;opacity:.7}
.ph::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--ph-line,rgba(0,0,0,.06)) 1px,transparent 1px);background-size:100% 13px;opacity:.5;pointer-events:none}
.ph0{background:var(--ink);color:var(--paper);--ph-line:rgba(255,255,255,.07)}
.ph1{background:var(--gold);color:var(--ink)}
.ph2{background:var(--fog);color:var(--ink)}
.ph3{background:var(--marker);color:var(--paper);--ph-line:rgba(255,255,255,.08)}

/* ---- lead (hub hero) ---- */
.mlead{display:grid;grid-template-columns:1.4fr .85fr;gap:0;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--paper);margin:8px 0 6px;transition:box-shadow .14s}
.mlead:hover{box-shadow:0 14px 40px rgba(0,0,0,.09)}
.mlead-cover{position:relative;aspect-ratio:16/9;height:100%;overflow:hidden;border-right:1.5px solid var(--ink)}
.mlead-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mlead-b{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,3vw,34px);justify-content:center;overflow:hidden}
.mlead-badge{align-self:flex-start;font-family:var(--display);font-synthesis-weight:auto;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--marker)}
.mlead-t{font-family:var(--display);font-synthesis-weight:auto;font-weight:600;font-size:clamp(20px,2.2vw,28px);line-height:1.14;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.mlead-d{font-family:var(--sans);font-size:clamp(15px,1.4vw,17px);line-height:1.55;color:#3c3a34;max-width:52ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mlead-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:3px}
.mlead-date{font-family:var(--display);font-synthesis-weight:auto;font-size:12px;color:var(--muted)}
.mlead-go{font-family:var(--display);font-synthesis-weight:auto;font-weight:600;font-size:13px;color:var(--marker)}
.mlead .ph .ph-type{font-size:clamp(26px,4vw,40px)}

/* ---- section intro + entry points + load more ---- */
.msec-head{margin:6px 0 4px}
.msec-intro{font-family:var(--sans);font-size:clamp(14.5px,1.4vw,16px);line-height:1.55;color:#45423b;max-width:68ch;margin:10px 0 2px}
.mentry{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:30px 0 8px}
.mentry a{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.5px solid var(--ink);border-radius:6px;padding:18px 20px;background:var(--paper);transition:transform .12s,box-shadow .12s}
.mentry a:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.mentry .mentry-t{font-family:var(--display);font-synthesis-weight:auto;font-weight:600;font-size:17px}
.mentry .mentry-s{font-family:var(--display);font-synthesis-weight:auto;font-size:12.5px;color:var(--muted);margin-top:2px}
.mentry .mentry-go{font-family:var(--display);font-synthesis-weight:auto;font-weight:700;font-size:20px;color:var(--marker)}

.mloadwrap{display:flex;justify-content:center;margin:30px 0 4px}
.mloadmore{font-family:var(--display);font-synthesis-weight:auto;font-weight:600;font-size:13.5px;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:4px;padding:12px 24px;cursor:pointer;transition:background .12s,color .12s}
.mloadmore:hover{background:var(--ink);color:var(--paper)}
.mhidden{display:none !important}
.mempty{font-family:var(--display);font-synthesis-weight:auto;font-size:14px;color:var(--muted);padding:20px 0}

@media(max-width:720px){
  .mlead{grid-template-columns:1fr}
  .mlead-cover{aspect-ratio:16/9;min-height:0;border-right:0;border-bottom:1.5px solid var(--ink)}
  .mlead-t,.mlead-d{-webkit-line-clamp:unset;display:block;overflow:visible}
  .mentry{grid-template-columns:1fr}
  .mfeed-controls{gap:12px}
}