/* TIE MEN Stories — lớp trình bày editorial (J2, 04/10/2026).
   Cùng "họ" với mục The TIE MEN Journal trên trang chủ (index.html: token :48-64, section :209-212, thẻ :259-266,
   .more-box :418-424) nhưng KHÔNG dùng lại mã của Journal: ảnh là <img> (alt, srcset, width/height, lazy),
   khung ảnh cố định 6:5, lưới 3/2/1 cột, một liên kết duy nhất mỗi thẻ. Chỉ 12 trang /stories/ + /vi/cau-chuyen/ dùng tệp này. */
:root{
  --paper:#fbfaf6;--cream:#f5f2eb;--ink:#211d1a;--ink-soft:rgba(33,29,26,.72);--stone:#736c61;--hair:#e3ddd1;
  --green:#122e20;--green-deep:#0a2016;--night:#14110e;
  --serif:"EB Garamond",Garamond,Baskerville,Caslon,"Times New Roman",serif;
  --sans:"Hanken Grotesk","Gill Sans","Gill Sans MT","Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.7;letter-spacing:.02em}
a{color:inherit}
a:focus-visible{outline:2px solid var(--green);outline-offset:3px}
img{display:block;max-width:100%;height:auto;background:#e9e4da}

/* ── Masthead: wordmark giữa như trang chủ/Journal ── */
.masthead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:20px 28px;border-bottom:1px solid var(--hair);background:var(--paper)}
.mh-left,.mh-right{display:flex;gap:22px;align-items:center;font-size:11px;text-transform:uppercase;letter-spacing:.24em}
.mh-right{justify-content:flex-end}
.mh-left a,.mh-right a{text-decoration:none;position:relative}
.mh-left a::after,.mh-right a:not(.book)::after{content:"";position:absolute;inset:-6px 0}
.mh-left a[aria-current="page"]{border-bottom:1px solid currentColor;padding-bottom:3px}
.mh-right .book{border:1px solid var(--green);color:var(--green);padding:9px 16px}
.mh-right .book:hover{background:var(--green);color:#fff}
.mh-brand{text-align:center;text-decoration:none;line-height:1.1}
.mh-mark{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.4vw,30px);letter-spacing:.42em;text-indent:.42em}
.mh-sub{display:block;font-family:var(--serif);font-style:italic;font-size:12px;color:var(--stone);letter-spacing:.12em;margin-top:3px}

.crumbs{max-width:1140px;margin:0 auto;padding:16px 24px 0;font-size:11px;letter-spacing:.06em;color:var(--stone)}
.crumbs ol{list-style:none;display:flex;gap:8px;flex-wrap:wrap}
.crumbs li+li::before{content:"›";margin-right:8px;opacity:.7}
.crumbs a{text-decoration:none;position:relative}
.crumbs a::after{content:"";position:absolute;inset:-7px 0}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── Nhãn chuyên mục, tiêu đề, đoạn dẫn — cùng thang chữ Journal ── */
.journal-eyebrow,.story-cat,.card-cat{text-transform:uppercase;color:var(--green)}
.journal-eyebrow{font-size:11px;letter-spacing:.34em}
.story-cat{font-size:11px;letter-spacing:.32em}
h1{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:.03em;text-wrap:balance}
.lead{color:var(--ink-soft);text-wrap:pretty}

/* ── Trang danh sách: mục Journal trên nền kem ── */
.journal{background:var(--cream);padding:88px 24px 104px;margin-top:20px}
.journal-head{max-width:680px;margin:0 auto;text-align:center}
.journal-head h1{font-size:clamp(36px,4.4vw,52px);margin:16px 0 18px}
.journal-head .lead{font-size:16.5px;max-width:58ch;margin:0 auto}

/* ── Lưới thẻ editorial ── */
.cards{list-style:none;display:grid;gap:56px 40px;max-width:1140px;margin:64px auto 0}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 28px;margin-top:36px}
.card{position:relative;display:flex;flex-direction:column}
.card-media{aspect-ratio:6/5;overflow:hidden;margin-bottom:22px;background:#e9e4da}
.card-img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .card-img{transform:scale(1.025)}
/* Thẻ CHƯA có ảnh đã duyệt (Story 02, 03): khung chữ — một câu nguyên văn của bài, không phải ảnh */
.card-media--text{display:flex;align-items:flex-end;padding:28px;background:var(--paper);border:1px solid var(--hair)}
.journal .card-media--text{background:#fbfaf6}
.card-pull{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2vw,26px);line-height:1.3;color:var(--ink);text-wrap:balance}
.card-pull::before{content:"";display:block;width:36px;height:1px;background:var(--green);margin-bottom:18px}
.card-cat{font-size:10px;letter-spacing:.28em;margin-bottom:10px}
.card-title{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.3;letter-spacing:.04em;margin-bottom:10px;text-wrap:balance}
.cards--4 .card-title{font-size:21px}
.card-title a{text-decoration:none}
.card-title a::after{content:"";position:absolute;inset:0;z-index:1}      /* cả thẻ bấm được — một liên kết duy nhất */
.card-title a:focus-visible{outline:none}
.card:focus-within{outline:2px solid var(--green);outline-offset:8px}
.card-excerpt{font-size:14.5px;line-height:1.7;color:var(--ink-soft)}
.cards--4 .card-excerpt{font-size:14px}
.card-more{align-self:flex-start;margin-top:16px;font-size:10.5px;text-transform:uppercase;letter-spacing:.28em;border-bottom:1px solid var(--ink);padding-bottom:5px}
.card:hover .card-title a,.card:hover .card-more{color:var(--green);border-color:var(--green)}

/* ── Bài viết ── */
.story-head{max-width:820px;margin:0 auto;padding:64px 24px 48px;text-align:center}
.story-head h1{font-size:clamp(38px,5.2vw,62px);margin:18px 0 22px}
.story-head .lead{font-size:clamp(17px,1.6vw,19.5px);line-height:1.7;max-width:60ch;margin:0 auto}
.story-head:not(.story-head--wide)::after{content:"";display:block;width:56px;height:1px;background:var(--hair);margin:44px auto 0}
.lead-figure{max-width:640px;margin:0 auto 24px;padding:0 20px}
.lead-img{width:100%;aspect-ratio:4/5;object-fit:cover}
.lead-figure--wide{max-width:1160px}          /* ảnh dẫn NGANG (Batch 01) — chữ không đè lên người trong ảnh */
.lead-figure--wide .lead-img{aspect-ratio:3/2}

/* Hero tràn (chỉ khi ảnh ngang đủ độ phân giải — Story 07): ảnh <img>, chữ trắng trên lớp phủ như /bai/, không sticky/JS */
.story-head--wide{position:relative;max-width:none;padding:0;min-height:clamp(440px,68vh,760px);display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden;background:var(--night)}
.story-head--wide .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-head--wide::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,9,8,.58),rgba(10,9,8,.42) 45%,rgba(10,9,8,.66))}
.hero-copy{position:relative;z-index:2;max-width:820px;padding:72px 24px}
.story-head--wide .story-cat{color:rgba(255,255,255,.9)}
.story-head--wide h1{text-shadow:0 2px 18px rgba(0,0,0,.35)}
.story-head--wide .lead{color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(0,0,0,.4)}

.body{max-width:680px;margin:0 auto;padding:40px 24px 16px}
.body p{font-size:17px;line-height:1.85;color:rgba(33,29,26,.8)}
.body p+p{margin-top:18px}
.body>p:first-of-type::first-letter{font-family:var(--serif);float:left;font-size:3.4em;line-height:.9;padding:6px 10px 0 0;color:var(--green)}
.body h2{font-family:var(--serif);font-weight:500;font-size:clamp(25px,2.6vw,31px);line-height:1.25;letter-spacing:.02em;margin:52px 0 16px;text-wrap:balance}
.body h3{font-family:var(--serif);font-weight:500;font-size:21px;margin:30px 0 8px}
.body h2+p,.body h3+p{margin-top:0}
.body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.body a:hover{color:var(--green)}
.body figure{margin:44px 0}
.body-img{width:100%;aspect-ratio:4/5;object-fit:cover}
.body-img--wide{aspect-ratio:3/2}
figcaption{font-size:12px;letter-spacing:.04em;color:var(--stone);margin-top:10px}

.next{max-width:680px;margin:28px auto 0;padding:28px 24px 0}
.next h2{font-size:11px;font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.3em;color:var(--stone);margin-bottom:6px}
.next ul{list-style:none;border-top:1px solid var(--hair)}
.next li{border-bottom:1px solid var(--hair)}
.next a{display:block;padding:13px 0;text-decoration:none;font-family:var(--serif);font-size:20px}
.next a:hover{color:var(--green)}

.more{background:var(--cream);margin-top:80px;padding:80px 24px 88px}
.more>h2{text-align:center;font-family:var(--serif);font-weight:500;font-size:clamp(28px,3vw,38px);letter-spacing:.05em}

/* ── Lời mời đặt lịch: tiết chế ── */
.visit{max-width:680px;margin:0 auto;padding:80px 24px 88px;text-align:center}
.visit h2{font-family:var(--serif);font-weight:500;font-size:clamp(25px,2.6vw,30px);letter-spacing:.03em;margin-bottom:14px}
.visit p{color:var(--ink-soft);font-size:15.5px;max-width:52ch;margin:0 auto}
.visit .cta{display:flex;flex-wrap:wrap;gap:22px 30px;align-items:center;justify-content:center;margin-top:30px}
.visit .btn{display:inline-block;padding:17px 40px;font-size:11px;text-transform:uppercase;letter-spacing:.28em;text-decoration:none;color:#fff;background:var(--green)}
.visit .btn:hover{background:var(--green-deep)}
.visit .text-link{font-size:11px;text-transform:uppercase;letter-spacing:.26em;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.journal+.visit{padding-top:72px}

/* ── Chân trang tối, gọn (không NAP) ── */
.foot{background:var(--night);color:rgba(255,255,255,.72);padding:48px 24px 40px;text-align:center;font-size:12.5px;display:flex;flex-direction:column;gap:14px;align-items:center}
.foot-mark{font-family:var(--serif);font-weight:500;letter-spacing:.42em;text-indent:.42em;font-size:18px;color:#fff}
.foot a{text-decoration:none;position:relative;color:rgba(255,255,255,.82)}
.foot a::after{content:"";position:absolute;inset:-6px 0}
.foot a:hover{color:#fff}
.foot a:focus-visible{outline-color:#fff}
.foot small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* ── Responsive: 3 cột ≥1000px · 2 cột 640–999px · 1 cột <640px ── */
@media (max-width:999px){
  .cards--3,.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mh-left a+a{display:none}
}
@media (max-width:639px){
  .masthead{grid-template-columns:1fr;gap:10px;padding:16px 16px 14px;text-align:center}
  .mh-left,.mh-right{justify-content:center;gap:18px}
  .mh-left{order:2}.mh-brand{order:1}.mh-right{order:3}
  .cards--3,.cards--4{grid-template-columns:1fr;gap:48px}
  .journal{padding:64px 20px 76px}
  .story-head{padding:44px 20px 36px}
  .story-head--wide{min-height:0;display:block;color:var(--ink);background:none}
  .story-head--wide .hero-img{position:static;aspect-ratio:4/3;height:auto}
  .story-head--wide::before{display:none}
  .hero-copy{padding:36px 20px 8px;text-align:center}
  .story-head--wide .story-cat{color:var(--green)}
  .story-head--wide h1,.story-head--wide .lead{text-shadow:none}
  .story-head--wide .lead{color:var(--ink-soft)}
  .body p{font-size:16.5px}
  .more{padding:64px 20px 72px}
}
@media (prefers-reduced-motion:reduce){.card-img{transition:none}.card:hover .card-img{transform:none}}

/* ── J3: The TIE MEN Journal thống nhất — bộ lọc chuyên mục (một hệ cho mọi bài) ── */
.jfilter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 8px;max-width:920px;margin:44px auto 0}
.jfilter[hidden]{display:none}
.jfilter button{font:inherit;font-size:10.5px;line-height:1;text-transform:uppercase;letter-spacing:.24em;min-height:40px;padding:0 16px;border:1px solid var(--hair);background:transparent;color:var(--ink);cursor:pointer}
.jfilter button:hover{border-color:var(--green);color:var(--green)}
.jfilter button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.jfilter button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.card[hidden]{display:none}
.card-lang{letter-spacing:.12em;text-transform:none;color:var(--stone)}
.journal-empty{text-align:center;color:var(--stone);margin-top:48px}
.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}
@media (max-width:639px){.jfilter{margin-top:32px;gap:8px 6px}.jfilter button{padding:0 12px;letter-spacing:.18em}}