/* Hallmark · macrostructure: Ecosystem Index · nav: N6 Newspaper masthead · footer: Ft7 Newsletter-first
 * theme: custom (vibe: "warm amber, dark press-room, technical") · genre: editorial
 * paper oklch(97.5% 0.008 85) light · accent oklch(58% 0.152 52) warm · display grotesk-sans (Space Grotesk)
 * POPTECH — Ghost theme. Brand: amber #FAA61A / press #1c1c1c, kept from the POPTECH brand system.
 */

/* 0. Fonts — self-hosted, Vietnamese subset included
/* ---------------------------------------------------------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(../fonts/space-grotesk-viet.woff2) format('woff2');
    unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(../fonts/space-grotesk-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
    src:url(../fonts/inter-viet.woff2) format('woff2');
    unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
    src:url(../fonts/inter-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
    src:url(../fonts/jetbrains-mono-viet.woff2) format('woff2');
    unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
    src:url(../fonts/jetbrains-mono-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:100 700;font-display:swap;
    src:url('../fonts/Josefin_Sans/JosefinSans-VariableFont_wght.ttf') format('truetype');}
@font-face{font-family:'Josefin Sans';font-style:italic;font-weight:100 700;font-display:swap;
    src:url('../fonts/Josefin_Sans/JosefinSans-Italic-VariableFont_wght.ttf') format('truetype');}

/* 1. Tokens
/* ---------------------------------------------------------- */
:root{
    /* Ghost's font settings (Admin → Design → Fonts) win when set; otherwise the theme's own pairing. */
    --font-display: var(--gh-font-heading, 'Montserrat'), system-ui, sans-serif;
    --font-body: var(--gh-font-body, 'Montserrat'), system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
    --font-accent-caveat: 'Caveat', cursive;
    --font-accent-smooch: 'Smooch Sans', sans-serif;

    --color-paper:      oklch(97.5% 0.008 85);
    --color-paper-2:    oklch(94.5% 0.013 82);
    --color-paper-3:    oklch(90% 0.016 80);
    --color-ink:        oklch(24% 0.012 60);
    --color-ink-2:      oklch(48% 0.012 65);
    --color-ink-3:      oklch(63% 0.012 70);
    --color-rule:       oklch(87% 0.014 78);
    --color-rule-soft:  oklch(92% 0.012 80);
    --color-accent:     oklch(58% 0.152 52);   /* readable amber-orange on paper */
    --color-accent-2:   oklch(76% 0.152 68);   /* brand amber #FAA61A — on dark only */
    --color-accent-ink: oklch(22% 0.02 60);
    --color-press:      oklch(19% 0.008 60);   /* press band ~#1c1c1c */
    --color-press-2:    oklch(26% 0.010 62);
    --color-press-ink:  oklch(93% 0.006 80);
    --color-press-ink-2:oklch(70% 0.010 70);
    --color-focus:      oklch(58% 0.152 52);
    --color-ok:         oklch(56% 0.13 155);
    --color-err:        oklch(55% 0.19 27);

    --space-3xs:2px; --space-2xs:4px; --space-xs:8px; --space-sm:12px;
    --space-md:16px; --space-lg:24px; --space-xl:32px; --space-2xl:48px;
    --space-3xl:72px; --space-4xl:104px;

    --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-lg:1.125rem;
    --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:3rem;
    --text-display:clamp(2.4rem, 4.8vw, 4.2rem);

    --rule-hair:1px;
    --radius-sm:3px; --radius-input:4px; --radius-plate:6px;
    --ease-out:cubic-bezier(0.16,1,0.3,1);
    --dur-fast:140ms; --dur-mid:260ms;
    --page-gutter:clamp(20px, 5vw, 64px);
    --measure:68ch;
    --max:1180px;
}

/* 2. Base
/* ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{overflow-x:clip;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:#fff;color:var(--color-ink);
    font-family:var(--font-body);font-size:1rem;line-height:1.65;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-style:normal;font-weight:700;
    line-height:1.12;letter-spacing:-0.02em;margin:0;overflow-wrap:anywhere;min-width:0;
    text-wrap:balance;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
p{margin:0 0 1.2em;}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:2px;}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--page-gutter);width:100%;}
.site-wrapper{display:flex;flex-direction:column;min-height:100dvh;}
.site-main{flex-grow:1;padding-top:100px;}
.mono{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.06em;text-transform:uppercase;}
.muted{color:var(--color-ink-2);}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* 3. Buttons
/* ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
    min-height:44px;padding-inline:var(--space-lg);border:0;border-radius:var(--radius-input);
    background:var(--color-ink);color:var(--color-paper);
    font-family:var(--font-body);font-size:var(--text-base);font-weight:600;line-height:1;
    cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out);}
.btn:hover{background:var(--color-press-2);}
.btn:active{background:var(--color-press);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-amber{background:var(--color-accent-2);color:var(--color-accent-ink);}
.btn-amber:hover{background:oklch(82% 0.14 72);}
.btn-amber:active{background:oklch(70% 0.15 62);}
.btn-quiet{background:transparent;color:var(--color-ink);
    box-shadow:inset 0 0 0 1px var(--color-rule);}
.btn-quiet:hover{background:var(--color-paper-2);}

/* 4. Masthead (N6)
/* ---------------------------------------------------------- */
.mast{position:fixed;top:0;left:0;right:0;z-index:1000;
    background:#171310;color:#ffffff;}
.mast .wrap{max-width:100%;}
.mast-edition{display:flex;gap:var(--space-md);align-items:center;justify-content:space-between;
    padding-block:var(--space-xs);border-bottom:var(--rule-hair) solid rgba(255,255,255,.10);
    color:inherit;opacity:0.8;flex-wrap:wrap;}
.mast-edition .mono{color:inherit;}
.mast-edition b{color:var(--color-accent-2);font-weight:600;}
.mast-main{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);
    padding-block:var(--space-md);flex-wrap:wrap;
    max-height:200px;overflow:hidden;
    transition:max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;}
body.is-scrolled .mast-main {
    max-height:0;
    padding-block:0;
    opacity:0;
}
body.is-scrolled .mast-nav {
    border-top-color:transparent;
}
.mast-brand{display:flex;align-items:center;gap:var(--space-sm);min-width:0;}
.mast-brand img{width:50px;height:50px;object-fit:contain;flex:none;}
.mast-brand .site-logo{width:auto;height:50px;max-width:280px;}
.mast-name{font-family:'Josefin Sans',var(--font-display);font-weight:700;font-size:2.5rem;letter-spacing:-0.03em;
    line-height:1;display:flex;align-items:center;gap:var(--space-sm);
    color:inherit;}
.mast-tech{color:var(--color-accent-2);}
.mast-brand-text{display:inline-flex;}

/* Lang Switch adaptations inside header */
.mast .lang-switch{font-family:'Josefin Sans',var(--font-body);}
.mast .lang-switch a{color:inherit !important;opacity:0.7;pointer-events:auto;}
.mast .lang-switch a:hover{opacity:1;}
.mast .lang-switch a.is-current{color:var(--color-accent-2) !important;opacity:1;font-weight:700;pointer-events:none;}
.mast .lang-switch .sep{color:inherit;opacity:0.4;}

.mast-tag{font-family:var(--font-accent-caveat);font-size:1.6rem;line-height:1;
    color:var(--color-press-ink-2);font-weight:600;text-transform:none;letter-spacing:0;}
.mast-actions{display:flex;align-items:center;gap:var(--space-md);}
.mast-search{display:grid;place-items:center;width:38px;height:38px;min-width:38px;padding:0;
    border:1px solid rgba(255,255,255,.18);border-radius:50%;background:transparent;color:#fff;cursor:pointer;
    transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);}
.mast-search:hover{background:var(--color-accent-2);border-color:var(--color-accent-2);color:var(--color-accent-ink);transform:translateY(-1px);}
.mast-search:active{transform:scale(.94);}
.mast-search svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
.mast-mobile-actions{display:flex;align-items:center;gap:8px;}
.mast-search-mobile{display:none;}
.mast-sub{display:inline-flex;align-items:center;flex:none;min-height:38px;padding-inline:var(--space-md);
    border-radius:999px;background:var(--color-accent-2);color:var(--color-accent-ink);
    font-family:'Josefin Sans',var(--font-body);font-size:var(--text-sm);font-weight:600;
    white-space:nowrap;transition:background var(--dur-fast) var(--ease-out);}
.mast-sub:hover{background:oklch(82% 0.14 72);color:var(--color-accent-ink);}

.mast-nav{border-top:var(--rule-hair) solid rgba(255,255,255,.10);}
/* Nav row: tighter gutter than the default .wrap (48px, never wider than --page-gutter) */
.mast-nav-wrap {display: flex; align-items: center; padding-inline: min(48px, var(--page-gutter));}

/* Mobile bar: logo + burger. Hidden on desktop (menu scrolls horizontally). */
.mast-nav-bar{display:none;align-items:center;justify-content:space-between;gap:var(--space-md);
    padding-block:var(--space-sm);}
.nav-logo-mobile{display:inline-flex;align-items:center;gap:var(--space-sm);color:#fff;min-width:0;}
.nav-logo-mobile img{height:36px;width:auto;flex:none;object-fit:contain;}
.mast-name-sm{font-size:1.6rem;line-height:1;letter-spacing:-0.03em;}
.nav-burger{display:none;align-items:center;gap:var(--space-sm);
    background:transparent;border:var(--rule-hair) solid rgba(255,255,255,.18);
    color:#fff;cursor:pointer;padding:8px 14px 8px 12px;border-radius:999px;
    font-family:'Josefin Sans',var(--font-body);font-weight:600;font-size:var(--text-sm);
    letter-spacing:0.06em;text-transform:uppercase;
    transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);}
.nav-burger:hover{border-color:var(--color-accent-2);}
.nav-burger-box{position:relative;width:18px;height:12px;flex:none;}
.nav-burger-line,.nav-burger-box::before,.nav-burger-box::after{
    content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
    transition:transform var(--dur-mid) var(--ease-out),opacity var(--dur-fast) var(--ease-out);}
.nav-burger-box::before{top:0;}
.nav-burger-line{top:5px;}
.nav-burger-box::after{bottom:0;}
/* Burger → X when open */
.nav-burger[aria-expanded="true"]{border-color:var(--color-accent-2);}
.nav-burger[aria-expanded="true"] .nav-burger-box::before{transform:translateY(5px) rotate(45deg);}
.nav-burger[aria-expanded="true"] .nav-burger-line{opacity:0;}
.nav-burger[aria-expanded="true"] .nav-burger-box::after{transform:translateY(-5px) rotate(-45deg);}
.nav-logo {display: inline-flex; align-items: center; flex: none; max-width: 0; overflow: hidden; opacity: 0; transition: max-width 0.4s ease, opacity 0.4s ease, margin 0.4s ease;}
.nav-logo img {height: 36px; width: auto; flex: none; object-fit: contain;}
body.is-scrolled .nav-logo {max-width: 150px; opacity: 1; margin-right: var(--space-md); transition: max-width 0.4s ease 0.3s, opacity 0.4s ease 0.3s, margin 0.4s ease 0.3s;}

.nav-actions {display: flex; align-items: center; flex: none; gap: var(--space-sm); max-width: 0; overflow: hidden; opacity: 0; margin-left: auto; white-space: nowrap; transition: opacity 0.2s ease, max-width 0.3s ease 0.2s, margin 0.3s ease 0.2s;}
body.is-scrolled .nav-actions {max-width: 200px; opacity: 1; transition: max-width 0.3s ease 0.2s, margin 0.3s ease 0.2s, opacity 0.3s ease 0.5s;}
/* In the collapsed nav bar the subscribe pill shrinks to a round icon (~38px
   instead of ~110px) so the menu keeps the width; title/aria carry the label. */
.nav-actions .mast-sub-icon{position:relative;width:38px;min-height:38px;padding:0;justify-content:center;gap:0;}
.nav-actions .mast-sub-icon svg{flex:none;}
.nav-actions .mast-sub-icon .mast-sub-text{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;}
/* One row, no wrapping: overflow scrolls horizontally (drag/swipe). The 24px
   fade only appears on the side that actually has hidden items — JS toggles
   is-fade-start / is-fade-end from the scroll position (no classes = no fade). */
.mast-nav .nav{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;
    gap:var(--space-xs) var(--space-md);list-style:none;margin:0;padding:var(--space-sm) 0;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    --nav-fade-l:0px;--nav-fade-r:0px;
    mask-image:linear-gradient(to right,transparent,#000 var(--nav-fade-l),#000 calc(100% - var(--nav-fade-r)),transparent);
    -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--nav-fade-l),#000 calc(100% - var(--nav-fade-r)),transparent);}
.mast-nav .nav.is-fade-start{--nav-fade-l:24px;}
.mast-nav .nav.is-fade-end{--nav-fade-r:24px;}
.mast-nav .nav::-webkit-scrollbar{display:none;}
.mast-nav .nav li{margin:0;}
.mast-nav .nav li a{display:inline-block;font-family:'Josefin Sans',var(--font-body);font-size:13px;
    font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-press-ink-2);white-space:nowrap;
    padding-block:3px;position:relative;transition:color var(--dur-fast) var(--ease-out);}
.mast-nav .nav li a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:var(--color-accent-2);transform:scaleX(0);transform-origin:left;
    transition:transform var(--dur-mid) var(--ease-out);}
.mast-nav .nav li a:hover,.mast-nav .nav li.nav-current a{color:#fff;}
.mast-nav .nav li a:hover::after,.mast-nav .nav li.nav-current a::after{transform:scaleX(1);}

/* 5. Rails / section heads
/* ---------------------------------------------------------- */
.rail{max-width:1600px;padding-block:var(--space-2xl);padding-inline:clamp(24px,4vw,64px);}
.rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md);
    padding-bottom:var(--space-sm);border-bottom:2px solid var(--color-ink);
    margin-bottom:var(--space-xl);flex-wrap:wrap;}
.rail-head h2{font-size:var(--text-xl);}
/* "Tất cả bài viết" on tag/author pages — same display size as the homepage's
   .mag-section-head h2 ("Biên tập viên chọn"). Baseline alignment breaks down at
   this size next to the search pill, so centre the row instead. */
.rail-head-lg{align-items:center;padding-bottom:var(--space-md);}
.rail-head-lg h2{font-size:clamp(2rem,3vw,3.25rem);font-weight:500;
    letter-spacing:-.02em;line-height:1.15;}
@media(max-width:560px){
    .rail-head-lg{align-items:flex-start;}
    .rail-head-lg h2{font-size:1.75rem;}
}
/* Step number in "reading path" rail headings (start-here page) */
.rail-step{font-family:var(--font-mono);font-size:0.65em;color:var(--color-accent);
    letter-spacing:0.1em;margin-right:var(--space-sm);vertical-align:2px;}
.rail-head .more{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.08em;
    text-transform:uppercase;color:var(--color-ink-2);
    transition:color var(--dur-fast) var(--ease-out);}
.rail-head .more:hover{color:var(--color-ink-2);}

/* Local discovery tools for homepage and topic archives. */
.content-tools{display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(132px,.72fr)) auto;
    gap:12px;align-items:end;margin:0 0 clamp(28px,3vw,44px);padding:18px;
    border:1px solid var(--color-rule);border-radius:16px;background:var(--color-paper-2);}
.content-tools-search{display:flex;align-items:center;gap:10px;min-height:46px;padding-inline:14px;
    border:1px solid var(--color-rule);border-radius:12px;background:#fff;}
.content-tools-search:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(245,161,11,.12);}
.content-tools-search svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--color-ink-3);stroke-width:1.7;stroke-linecap:round;}
.content-tools-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--color-ink);
    font:500 14px/1.2 'Josefin Sans',var(--font-body);}
.content-tools-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.content-tools-field>span{font:600 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-3);}
.content-tools-field select{width:100%;min-height:46px;padding:0 34px 0 12px;border:1px solid var(--color-rule);
    border-radius:12px;background:#fff;color:var(--color-ink);font:600 13px/1.2 'Josefin Sans',var(--font-body);}
.content-tools-reset{min-height:46px;padding-inline:14px;border:0;border-radius:12px;background:var(--color-ink);
    color:#fff;cursor:pointer;font:600 12px/1 'Josefin Sans',var(--font-body);}
.content-tools-count{grid-column:1/-1;margin:0;font:500 11px/1.2 var(--font-mono);color:var(--color-ink-3);}
.content-tools-empty{margin:36px 0;padding:24px;border-top:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule);
    color:var(--color-ink-2);text-align:center;}
.card-read-time{font-family:'Josefin Sans',var(--font-body);font-size:var(--text-xs);letter-spacing:.04em;color:var(--color-ink-3);white-space:nowrap;}
.card-read-time::before{content:"·";margin-right:var(--space-sm);}
@media(max-width:1100px){.content-tools{grid-template-columns:repeat(2,minmax(0,1fr));}.content-tools-search{grid-column:1/-1;}}
@media(max-width:560px){
    .content-tools{grid-template-columns:1fr 1fr;padding:14px;gap:10px;}
    .content-tools-search,.content-tools-count{grid-column:1/-1;}
    .content-tools-reset{grid-column:1/-1;}
}

/* Full-site search. Apple-inspired frosted material adapted to POPTECH's palette. */
body.has-search-modal{overflow:hidden;}
.search-modal[hidden]{display:none;}
.search-modal{position:fixed;inset:0;z-index:1400;display:grid;place-items:start center;
    padding:clamp(18px,7vh,76px) clamp(12px,4vw,48px);}
.search-modal-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:default;
    background:rgba(18,17,15,.44);-webkit-backdrop-filter:blur(16px) saturate(.82);backdrop-filter:blur(16px) saturate(.82);
    opacity:0;will-change:opacity;transform:translateZ(0);transition:opacity 280ms cubic-bezier(.16,1,.3,1);}
.search-modal.is-open .search-modal-backdrop{opacity:1;}
.search-dialog{position:relative;isolation:isolate;width:min(760px,100%);max-height:min(720px,calc(100dvh - 36px));overflow:hidden;
    display:flex;flex-direction:column;background:#fff;color:var(--color-ink);
    border:1px solid rgba(255,255,255,.9);border-radius:26px;
    box-shadow:0 30px 90px rgba(8,8,8,.3),0 3px 12px rgba(8,8,8,.1);
    opacity:0;will-change:opacity,transform;transform:translate3d(0,-14px,0) scale(.982);
    transition:opacity 240ms var(--ease-out),transform 340ms cubic-bezier(.16,1,.3,1);}
.search-modal.is-open .search-dialog{opacity:1;transform:none;}
.search-dialog-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.search-dialog-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;gap:18px;
    padding:17px 18px 14px 24px;border-bottom:1px solid rgba(35,35,35,.07);}
.search-dialog-close{display:grid;place-items:center;width:34px;height:34px;flex:none;padding:0;border:1px solid rgba(35,35,35,.22);
    border-radius:50%;background:#fff;color:#6f6f73;cursor:pointer;
    transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);}
.search-dialog-close:hover{background:rgba(60,55,50,.14);color:var(--color-ink);}
.search-dialog-close:active{transform:scale(.94);}
.search-dialog-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.search-dialog-form{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:13px;
    min-height:42px;padding:0;border:0;background:#fff;box-shadow:none;}
.search-dialog-form>svg{width:25px;height:25px;fill:none;stroke:#111;stroke-width:1.8;stroke-linecap:round;}
.search-dialog-form input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--color-ink);
    font:500 clamp(1.08rem,2vw,1.28rem)/1.2 'Josefin Sans',var(--font-body);}
.search-dialog-form input::placeholder{color:#929296;opacity:1;}
.search-dialog-form input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none;}
.search-suggestions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;padding:13px 24px;
    border-bottom:1px solid rgba(35,35,35,.07);background:#fff;}
.search-suggestion-row{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:start;gap:10px;}
.search-suggestion-label{padding-top:7px;font:600 10px/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:#8b8b8f;}
.search-pills{display:flex;flex-wrap:nowrap;gap:7px;min-width:0;min-height:30px;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 16px),transparent);}
.search-pills::-webkit-scrollbar{display:none;}
.search-pills button{min-height:30px;padding:6px 12px;border:1px solid #dedee1;border-radius:999px;background:#fff;color:#5e5e63;
    font:500 12px/1.1 'Josefin Sans',var(--font-body);cursor:pointer;white-space:nowrap;
    transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);}
.search-pills button:hover{border-color:#aaaab0;color:#1d1d1f;}
.search-pills button:active{transform:scale(.97);}
.search-pills button.is-active{border-color:#1d1d1f;background:#1d1d1f;color:#fff;animation:search-pill-select 220ms cubic-bezier(.16,1,.3,1);}
.search-pills:empty::after{content:"";display:block;width:220px;height:30px;border-radius:999px;background:#f3f3f4;}
.search-more-filters{position:relative;}
.search-filter-toggle{display:flex;align-items:center;gap:7px;min-height:30px;padding:6px 11px;border:1px solid #dedee1;
    border-radius:999px;color:#5e5e63;font:500 12px/1.1 'Josefin Sans',var(--font-body);cursor:pointer;list-style:none;white-space:nowrap;}
.search-filter-toggle span{display:inline-block;font-size:15px;line-height:0;transition:transform 260ms cubic-bezier(.16,1,.3,1);}
.search-filter-toggle.is-open{border-color:#1d1d1f;background:#1d1d1f;color:#fff;}
.search-filter-toggle.is-open span{transform:rotate(45deg);}
.search-filter-panel{position:absolute;z-index:2;top:38px;right:0;width:min(500px,calc(100vw - 56px));display:grid;gap:11px;padding:14px;
    border:1px solid #dedee1;border-radius:16px;background:#fff;box-shadow:0 16px 42px rgba(0,0,0,.14);
    opacity:0;transform-origin:top right;transform:translate3d(0,-7px,0) scale(.975);pointer-events:none;will-change:opacity,transform;
    transition:opacity 180ms var(--ease-out),transform 260ms cubic-bezier(.16,1,.3,1);}
.search-filter-panel[hidden]{display:none;}
.search-filter-panel.is-open{opacity:1;transform:none;pointer-events:auto;}
.search-dialog-form kbd,.search-dialog-foot kbd{border:1px solid rgba(55,50,45,.11);border-radius:6px;background:rgba(80,75,70,.06);
    padding:5px 7px;font:500 9px/1 var(--font-mono);color:var(--color-ink-3);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
.search-dialog-state{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    min-height:128px;padding:28px clamp(24px,4vw,38px);color:#838386;}
.search-dialog-state[hidden]{display:none;}
.search-dialog-state strong{font:500 clamp(1.05rem,2.2vw,1.32rem)/1.25 'Josefin Sans',var(--font-body);color:#727276;}
.search-dialog-state p{margin:10px 0 0;font:400 12px/1.5 'Josefin Sans',var(--font-body);color:#99999d;}
.search-dialog-state kbd{margin-inline:3px;padding:3px 7px;border:1px solid #d4d4d7;border-radius:6px;background:#fff;
    font:500 10px/1 var(--font-mono);color:#77777b;}
.search-dialog-state.is-loading p::before{content:"";display:inline-block;width:13px;height:13px;margin-right:10px;vertical-align:-2px;
    border:2px solid rgba(80,72,64,.18);border-top-color:var(--color-accent);border-radius:50%;animation:search-spin .7s linear infinite;}
.search-dialog-state.is-error{color:#9b322d;}
.search-results{position:relative;overflow:auto;padding:10px 14px 14px;scrollbar-width:thin;scrollbar-color:rgba(45,40,35,.2) transparent;}
.search-result{display:grid;grid-template-columns:72px minmax(0,1fr) 28px;gap:15px;align-items:center;
    min-height:82px;padding:9px 10px;border:0;border-radius:13px;color:var(--color-ink);
    animation:search-result-in 360ms cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--search-index,0) * 34ms);
    transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);}
.search-result+.search-result{margin-top:2px;}
.search-result.is-selected,.search-result:hover{background:#f4f4f5;transform:translateY(-1px);}
.search-result-index{display:none;}
.search-result-media{display:block;width:72px;aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:var(--color-paper-3);}
.search-result-media img{width:100%;height:100%;object-fit:cover;}
.search-result-copy{display:flex;flex-direction:column;gap:5px;min-width:0;}
.search-result-meta{font:500 10px/1.2 'Josefin Sans',var(--font-body);letter-spacing:0;text-transform:none;color:#8b8b8f;}
.search-result-copy strong{font-family:'Josefin Sans',var(--font-display);font-size:16px;line-height:1.24;font-weight:650;text-wrap:pretty;}
.search-result-copy>span:not(.search-result-meta){overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;
    font:400 13px/1.45 'Josefin Sans',var(--font-body);color:var(--color-ink-2);}
.search-result-arrow{font-size:17px;color:var(--color-ink-3);transition:transform var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
.search-result:hover .search-result-arrow,.search-result.is-selected .search-result-arrow{transform:translate(2px,-2px);color:var(--color-ink);}
.search-dialog-foot{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:20px;padding:12px 24px;
    border-top:1px solid rgba(35,35,35,.07);background:#fff;color:#929296;font:500 10px/1 var(--font-mono);}
.search-dialog-foot span{display:inline-flex;align-items:center;gap:5px;}
@keyframes search-spin{to{transform:rotate(360deg);}}
@keyframes search-result-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes search-pill-select{50%{transform:scale(.96);}100%{transform:none;}}
@media(prefers-reduced-transparency:reduce){
    .search-modal-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(18,17,15,.72);}
    .search-dialog{background:#fff;}
}
@media(prefers-reduced-motion:reduce){
    .search-modal,.search-modal-backdrop,.search-dialog{transition:none;}
    .search-dialog-state.is-loading p::before,.search-result,.search-pills button.is-active{animation:none;}
    .search-filter-panel{transition:none;}
}
@media(max-width:720px){
    .mast-search-mobile{display:grid;}
    .search-modal{padding:8px;align-items:start;}
    .search-dialog{max-height:calc(100dvh - 16px);border-radius:22px;}
    .search-dialog-head{padding:13px 14px 11px 18px;gap:12px;}
    .search-dialog-form{min-height:44px;}
    .search-suggestions{grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:12px 16px;}
    .search-suggestion-row{grid-template-columns:1fr;gap:7px;}
    .search-suggestion-label{padding-top:0;}
    .search-pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
    .search-pills::-webkit-scrollbar{display:none;}
    .search-filter-panel{position:fixed;top:132px;left:16px;right:16px;width:auto;}
    .search-dialog-form kbd,.search-dialog-foot{display:none;}
    .search-dialog-state,.search-results{padding-inline:16px;}
    .search-result{grid-template-columns:64px minmax(0,1fr) 20px;gap:12px;padding:8px 6px;}
    .search-result-media{width:64px;}
    .search-result-copy strong{font-size:15px;}
    .search-result-copy>span:not(.search-result-meta){display:none;}
}
/* Search field styled as an input pill; triggers Ghost's built-in search modal */
.rail-search{align-self:center;display:inline-flex;align-items:center;justify-content:space-between;
    gap:var(--space-md);min-width:220px;height:40px;padding:0 6px 0 16px;cursor:pointer;
    border:var(--rule-hair) solid var(--color-rule);border-radius:999px;
    background:transparent;color:var(--color-ink-3);
    font-family:'Josefin Sans',var(--font-body);font-size:var(--text-sm);
    transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
.rail-search:hover{border-color:var(--color-ink-3);color:var(--color-ink-2);}
.rail-search-text{line-height:1;}
.rail-search svg{width:30px;height:30px;flex:none;padding:6px;border-radius:50%;
    color:var(--color-ink-2);}

/* 6. Lead (featured post)
/* ---------------------------------------------------------- */
.lead{padding-block:var(--space-3xl) var(--space-2xl);}
.lead-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    gap:var(--space-2xl);align-items:start;}
.kicker{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.12em;
    text-transform:uppercase;color:var(--color-accent);display:inline-block;margin-bottom:var(--space-sm);}
.lead-title{font-size:var(--text-display);margin-block:var(--space-xs) var(--space-md);}
.lead-title a{background-image:linear-gradient(var(--color-accent),var(--color-accent));
    background-size:0% 3px;background-repeat:no-repeat;background-position:0 100%;
    transition:background-size var(--dur-mid) var(--ease-out);}
.lead-title a:hover{background-size:100% 3px;}
.lead-dek{font-size:var(--text-lg);color:var(--color-ink-2);max-width:56ch;margin:0 0 var(--space-lg);}
.lead-media{margin-top:var(--space-lg);}
.lead-media img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-plate);
    background:var(--color-paper-2);}

/* Hero carousel (featured posts) */
.hero{max-width:1600px;padding-block:var(--space-4xl) var(--space-2xl);
    padding-inline:clamp(24px,4vw,64px);}
.hero-kicker{display:inline-flex;align-items:center;gap:var(--space-sm);
    font-family:'Josefin Sans',var(--font-body);font-weight:600;font-size:var(--text-base);
    letter-spacing:0.02em;color:var(--color-ink);margin:0 0 var(--space-lg);}
.hero-kicker-star{display:inline-flex;align-items:center;justify-content:center;color:var(--color-accent-2);}
.hero-kicker-star svg{width:18px;height:18px;fill:currentColor;}
.hero-title{font-family:'Josefin Sans',var(--font-display);font-weight:400;letter-spacing:-0.01em;
    font-size:clamp(2.2rem,5vw,4rem);line-height:1.08;margin:0 0 var(--space-lg);max-width:20ch;}

.hero-carousel{position:relative;overflow:hidden;border-radius:var(--radius-plate);background:#fff;}
.hero-track{display:flex;transition:transform 800ms var(--ease-out);will-change:transform;}
/* Slide-change motion: inactive slides dim + settle; active slide reveals its parts */
.hero-slide{opacity:.35;transition:opacity 420ms var(--ease-out);}
.hero-slide.is-active{opacity:1;}
.hero-slide-media .hero-slide-img{transition:transform var(--dur-mid) var(--ease-out),opacity 480ms var(--ease-out);}
.hero-slide-side>*{opacity:0;transform:translateY(14px);
    transition:opacity 460ms var(--ease-out),transform 460ms var(--ease-out);}
.hero-slide.is-active .hero-slide-side>*{opacity:1;transform:none;}
.hero-slide.is-active .hero-slide-timing{transition-delay:120ms;}
.hero-slide.is-active .hero-slide-title{transition-delay:180ms;}
.hero-slide.is-active .hero-slide-dek{transition-delay:240ms;}
.hero-slide.is-active .hero-slide-author{transition-delay:300ms;}
.hero-slide.is-active .hero-slide-img{animation:hero-kenburns 6s var(--ease-out) forwards;}
@keyframes hero-kenburns{from{transform:scale(1.06);}to{transform:scale(1);}}
.hero-slide{flex:0 0 100%;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
    gap:clamp(24px,3vw,56px);align-items:stretch;
    color:var(--color-ink);background:#fff;text-decoration:none;padding-block:clamp(4px,1vw,12px);}
/* Left: image card (no text overlay) */
.hero-slide-media{position:relative;overflow:hidden;border-radius:16px;
    background:var(--color-paper-2);aspect-ratio:16/10;}
.hero-slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform var(--dur-mid) var(--ease-out);}
.hero-slide:hover .hero-slide-img{transform:scale(1.02);}
/* Right: content panel — same background as the site */
.hero-slide-side{display:flex;flex-direction:column;justify-content:center;
    padding-right:clamp(8px,2vw,32px);gap:var(--space-md);min-width:0;}
.hero-slide-timing{display:inline-flex;align-items:center;gap:6px;
    font-family:'Josefin Sans',var(--font-body);font-size:var(--text-sm);
    color:var(--color-ink-2);}
.hero-slide-timing svg{width:16px;height:16px;color:var(--color-ink-3);}
.hero-slide-title{font-family:'Josefin Sans',var(--font-display);color:var(--color-ink);font-weight:600;
    font-size:clamp(1.6rem,2.4vw,2.4rem);line-height:1.15;letter-spacing:-0.01em;margin:0;
    text-wrap:balance;}
.hero-slide-dek{font-family:'Josefin Sans',var(--font-body);color:var(--color-ink-2);
    font-size:var(--text-base);line-height:1.6;margin:0;text-align:justify;
    display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.hero-slide-author{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-xs);}
.hero-slide-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;
    background:var(--color-paper-3);}
.hero-slide-avatar-fallback{display:grid;place-items:center;color:var(--color-ink-2);font-weight:600;
    font-family:'Josefin Sans',var(--font-body);text-transform:uppercase;}
.hero-slide-author-text{display:flex;flex-direction:column;line-height:1.3;min-width:0;}
.hero-slide-author-name{font-family:'Josefin Sans',var(--font-body);font-weight:600;color:var(--color-ink);
    font-size:var(--text-sm);}
.hero-slide-author-role{font-family:'Josefin Sans',var(--font-body);font-size:var(--text-xs);
    color:var(--color-ink-3);}

.hero-nav{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);
    margin-top:var(--space-md);}
.hero-arrow{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
    border:0;background:transparent;color:var(--color-ink);cursor:pointer;border-radius:50%;
    transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
.hero-arrow svg{width:20px;height:20px;}
.hero-arrow:hover{background:var(--color-paper-3);}
.hero-arrow:disabled{opacity:.3;cursor:default;background:transparent;}
.hero-dots{display:flex;align-items:center;gap:var(--space-sm);}
.hero-dot{border:0;background:transparent;cursor:pointer;padding:6px 10px;border-radius:999px;
    font-family:'Josefin Sans',var(--font-body);font-size:var(--text-sm);font-weight:600;
    letter-spacing:0.04em;color:var(--color-ink-3);line-height:1;
    transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);}
.hero-dot:hover{color:var(--color-ink);}
.hero-dot.is-active{background:var(--color-accent-2);color:var(--color-accent-ink);}

/* Fit the hero to one screen height (below the fixed header) on larger screens.
   Placed after all .hero rules so these declarations win (media queries don't add specificity).
   height is capped so tall/short viewports don't stretch the media into a square crop.
   901px matches the @media (max-width:900px) hero reset — no dead 760–900 band;
   the 100px offset = .site-main's fixed-header padding-top. */
@media (min-width:901px){
    .hero{height:clamp(660px,calc(100dvh - 100px),960px);display:flex;flex-direction:column;}
    .hero-carousel{flex:1 1 auto;min-height:0;}
    .hero-track{height:100%;}
    .hero-slide{height:100%;}
    /* keep a wide aspect so the image is only lightly cropped, never squared off */
    .hero-slide-media{aspect-ratio:auto;height:100%;min-height:0;}
    .hero-nav{flex:0 0 auto;margin-top:var(--space-md);}
}

/* Homepage editorial hero — lead story with a compact news rail. */
.hero-editorial{max-width:1840px;height:auto;padding-block:clamp(64px,6vw,96px) clamp(28px,3vw,48px);padding-inline:clamp(24px,4vw,64px);display:grid;grid-template-columns:minmax(250px,.64fr) minmax(0,1.42fr) minmax(290px,.72fr);column-gap:clamp(28px,3vw,52px);align-items:start;}
.hero-editorial>.hero-kicker,.hero-editorial>.hero-title{grid-column:1/-1;}
.hero-editorial>.hero-title{width:100%;max-width:none;font-size:clamp(2.6rem,3.6vw,4.35rem);margin-bottom:clamp(36px,4vw,56px);text-wrap:pretty;}
.hero-editorial .hero-carousel{grid-column:2;grid-row:3;border-radius:0;background:transparent;}
.hero-editorial .hero-track{height:auto;}
.hero-editorial .hero-slide{height:auto;display:flex;flex-direction:column;gap:22px;padding:0;background:transparent;}
.hero-editorial .hero-slide-media{order:1;width:100%;height:auto;min-height:0;aspect-ratio:4/3;border-radius:0;background:#111;}
.hero-editorial .hero-slide-side{order:2;display:grid;grid-template-columns:auto 1fr;gap:12px 18px;padding:0;justify-content:start;}
.hero-editorial .hero-slide-timing{grid-column:1/-1;}
.hero-editorial .hero-slide-title{grid-column:1/-1;font-size:clamp(2rem,3vw,3.5rem);line-height:1.08;
    /* Fill the column: no 24ch cap, and pretty (not balance) so lines run full width
       instead of being evened out and leaving a gap on the right. */
    max-width:none;text-wrap:pretty;}
.hero-editorial .hero-slide-dek{grid-column:1/-1;max-width:70ch;text-align:left;font-size:16px;line-height:1.7;}
.hero-editorial .hero-slide-author{grid-column:1/-1;}
.hero-editorial .hero-nav{
    grid-column:2;
    grid-row:3;
    align-self:start;
    justify-self:end;
    z-index:3;
    justify-content:center;
    gap:6px;
    margin:18px;
    padding:6px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:999px;
    background:rgba(255,255,255,.92);
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
}
.hero-editorial .hero-arrow{width:34px;height:34px;}
.hero-editorial .hero-dots{gap:2px;}
.hero-editorial .hero-dot{min-width:32px;padding:7px 8px;font-size:12px;}
.hero-editorial-rail{grid-row:3;display:flex;flex-direction:column;border-top:1px solid var(--color-ink);}
.hero-editorial-rail-left{grid-column:1;}
.hero-editorial-rail-right{grid-column:3;}
.hero-editorial-item{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:start;padding-block:24px;border-bottom:1px solid var(--color-rule);color:var(--color-ink);text-decoration:none;}
.hero-editorial-item img{width:112px;height:112px;object-fit:cover;background:var(--color-paper-2);}
.hero-editorial-copy{display:flex;flex-direction:column;gap:10px;min-width:0;}
.hero-editorial-tag{align-self:flex-start;padding:5px 9px;border:1px solid var(--color-ink);border-radius:999px;font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.hero-editorial-copy strong{font-family:var(--font-display);font-size:17px;line-height:1.35;font-weight:600;}
.hero-editorial-copy time{font-family:var(--font-body);font-size:12px;color:var(--color-ink-3);}
.hero-editorial-item:hover strong{color:var(--color-ink);}
@media(min-width:1101px){
    .hero-editorial-rail-left .hero-editorial-item{display:flex;flex-direction:column;gap:16px;}
    .hero-editorial-rail-left .hero-editorial-item img{width:100%;height:auto;aspect-ratio:4/3;}
    .hero-editorial-rail-right .hero-editorial-item{flex:1 1 0;align-content:center;}
}
@media(max-width:1200px){
    .hero-editorial{grid-template-columns:210px minmax(0,1.5fr) 230px;column-gap:24px;}
    .hero-editorial-item{grid-template-columns:86px minmax(0,1fr);gap:14px;}
    .hero-editorial-item img{width:86px;height:86px;}
    .hero-editorial-copy strong{font-size:15px;}
}
@media(max-width:900px){
    .hero-editorial{display:flex;flex-direction:column;padding-block:48px 56px;}
    .hero-editorial>.hero-kicker{order:1;}
    .hero-editorial>.hero-title{order:2;}
    .hero-editorial .hero-carousel{order:3;}
    .hero-editorial .hero-nav{order:4;}
    .hero-editorial-rail-left{order:5;}
    .hero-editorial-rail-right{order:6;}
    .hero-editorial>.hero-title{font-size:clamp(2.4rem,7vw,3.6rem);margin-bottom:36px;}
    .hero-editorial .hero-slide{display:flex;gap:20px;}
    .hero-editorial .hero-slide-media{aspect-ratio:16/10;}
    .hero-editorial .hero-slide-side{display:flex;padding:0;}
    .hero-editorial .hero-nav{display:flex;width:max-content;margin:20px auto 36px;padding:5px;}
    .hero-editorial-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--color-ink);}
    .hero-editorial-rail-left{margin-bottom:36px;}
    .hero-editorial-rail-right{margin-top:0;}
    .hero-editorial-item:nth-child(odd){padding-right:20px;}
    .hero-editorial-item:nth-child(even){padding-left:20px;border-left:1px solid var(--color-rule);}
}
@media(max-width:560px){
    .hero-editorial{padding-inline:20px;padding-block:36px 44px;}
    .hero-editorial>.hero-title{font-size:2.45rem;}
    .hero-editorial .hero-slide-title{font-size:2rem;}
    .hero-editorial-rail{grid-template-columns:1fr;}
    .hero-editorial-item,.hero-editorial-item:nth-child(odd),.hero-editorial-item:nth-child(even){padding:20px 0;border-left:0;}
}

/* Homepage magazine layout inspired by the supplied editorial reference. */
.category-showcase{width:100%;padding-block:clamp(48px,5vw,78px);background:#0d0d0d;color:#fff;overflow:hidden;}
.category-showcase-inner{width:min(100%,1840px);max-width:1840px;margin-inline:auto;padding-inline:clamp(24px,4vw,64px);}
.category-showcase-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,3vw,40px);}
.category-showcase-head h2{font-family:var(--font-display);font-size:clamp(2.4rem,4vw,4.8rem);font-weight:500;letter-spacing:-.04em;line-height:.95;}
.category-showcase-head p{margin:0;color:rgba(255,255,255,.52);font-size:14px;}
.category-showcase-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.5vw,26px);align-items:start;}
/* Paged rail: no horizontal scrolling. One click swaps the whole page of cards
   with a single fade, so the eye gets one transition instead of N sliding items. */
.category-showcase-grid.is-paged{--cat-per-view:5;--cat-gap:clamp(14px,1.5vw,26px);
    display:grid;grid-template-columns:repeat(var(--cat-per-view),minmax(0,1fr));
    gap:var(--cat-gap);align-items:start;
    /* The whole grid fades as one element. */
    transition:opacity 260ms var(--ease-out);}
.category-showcase-grid.is-paged.is-fading{opacity:0;}
/* Cards outside the current page are removed from layout entirely. */
.category-showcase-grid.is-paged .category-showcase-card[hidden]{display:none;}

/* Cards per view by width — 5 only has room on a wide desktop. */
@media(max-width:1500px){.category-showcase-grid.is-paged{--cat-per-view:4;}}
@media(max-width:1200px){.category-showcase-grid.is-paged{--cat-per-view:3;}}
@media(max-width:900px){.category-showcase-grid.is-paged{--cat-per-view:2;}}
@media(max-width:560px){.category-showcase-grid.is-paged{--cat-per-view:1;}}

.category-showcase-card{display:flex;flex-direction:column;color:#fff;text-decoration:none;min-width:0;overflow:hidden;}
.category-showcase-card:nth-child(even){flex-direction:column-reverse;padding-top:clamp(40px,4.5vw,78px);}
.category-showcase-name{display:grid;place-items:center;
    min-height:clamp(120px,11vw,210px);padding:clamp(16px,1.6vw,26px);
    background:#eceff3;color:#292a2d;
    font-family:var(--font-display);
    /* Smaller ceiling: at 5 columns a long single word like INFRASTRUCTURE
       overflowed the card at 2.25rem. */
    font-size:clamp(0.95rem,1.15vw,1.5rem);
    font-weight:700;line-height:1.08;letter-spacing:-.03em;
    text-align:center;text-transform:uppercase;
    /* Was overflow-wrap:normal + word-break:normal, which forbade breaking a
       long word — that is what let the text bleed into the next card. */
    min-width:0;overflow-wrap:break-word;word-break:normal;hyphens:auto;
    text-wrap:balance;}
.category-showcase-media{display:block;position:relative;overflow:hidden;aspect-ratio:4/5;background:#171717;}
.category-showcase-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out),filter .5s var(--ease-out);}
.category-showcase-placeholder{position:absolute;inset:0;display:grid;place-items:center;padding:24px;color:rgba(255,255,255,.18);font-family:var(--font-display);font-size:clamp(1.5rem,3vw,3.6rem);font-weight:700;text-align:center;text-transform:uppercase;background:radial-gradient(circle at 70% 25%,rgba(229,143,26,.28),transparent 30%),linear-gradient(145deg,#242424,#090909);}
.category-showcase-card:hover .category-showcase-media img{transform:scale(1.035);filter:saturate(1.08);}
.category-showcase-card:focus-visible{outline:2px solid var(--color-accent-2);outline-offset:6px;}
.category-showcase-card:nth-child(odd) .category-showcase-name{margin-bottom:clamp(14px,1.5vw,26px);}
.category-showcase-card:nth-child(even) .category-showcase-name{margin-top:clamp(14px,1.5vw,26px);}

/* Carousel controls for the category rail — arrows + one dot per page.
   Hidden until JS enables it, so no dead UI when everything already fits. */
.cat-nav{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);
    margin-top:clamp(18px,2vw,30px);}
.cat-nav-arrow{display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;flex:none;cursor:pointer;
    border:1px solid rgba(255,255,255,.28);border-radius:50%;
    background:transparent;color:#fff;
    transition:background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
.cat-nav-arrow svg{width:20px;height:20px;}
.cat-nav-arrow:hover:not(:disabled){background:#FFCC26;border-color:#FFCC26;
    color:var(--color-accent-ink);}
.cat-nav-arrow:disabled{opacity:.28;cursor:default;}
.cat-nav-arrow:focus-visible{outline:2px solid #FFCC26;outline-offset:3px;}

.cat-nav-dots{display:flex;align-items:center;gap:8px;}
.cat-nav-dot{width:8px;height:8px;padding:0;flex:none;cursor:pointer;
    border:0;border-radius:50%;background:rgba(255,255,255,.3);
    transition:background var(--dur-fast) var(--ease-out),
        width var(--dur-mid) var(--ease-out);}
.cat-nav-dot:hover{background:rgba(255,255,255,.62);}
.cat-nav-dot.is-active{width:26px;border-radius:999px;background:#FFCC26;}
.cat-nav-dot:focus-visible{outline:2px solid #FFCC26;outline-offset:3px;}

@media(prefers-reduced-motion:reduce){
    .cat-nav-arrow,.cat-nav-dot{transition:none;}
}
.mag-home,.mag-picks{width:min(100%,1760px);max-width:1760px;margin-inline:auto;padding-inline:clamp(24px,4vw,64px);}
.mag-home{padding-block:clamp(56px,6vw,96px) clamp(76px,7vw,112px);}
.mag-lead-grid{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(300px,.85fr);gap:34px;align-items:start;}
.mag-lead{display:flex;flex-direction:column;color:var(--color-ink);text-decoration:none;}
.mag-lead>img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.mag-lead-body{display:flex;flex-direction:column;gap:12px;padding-top:20px;}
.mag-eyebrow{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--color-accent);}
.mag-lead-body strong{font-family:var(--font-display);font-size:clamp(2rem,3vw,3.6rem);line-height:1.08;max-width:25ch;}
.mag-lead-body>span:not(.mag-eyebrow){max-width:80ch;font-size:15px;line-height:1.75;color:var(--color-ink-2);}
.mag-lead-body time,.mag-side-card time{font-size:12px;color:var(--color-ink-3);}
.mag-lead-side{display:grid;gap:28px;}
.mag-side-card{display:flex;flex-direction:column;gap:10px;color:var(--color-ink);text-decoration:none;}
.mag-side-card img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.mag-side-card strong{font-family:var(--font-display);font-size:20px;line-height:1.3;}
.mag-news-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:42px;border-block:1px solid var(--color-rule);}
.mag-news-strip a{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;padding:18px;color:var(--color-ink);text-decoration:none;border-left:1px solid var(--color-rule);}
.mag-news-strip a:first-child{border-left:0;padding-left:0;}
.mag-news-strip img{width:96px;height:70px;object-fit:cover;}
.mag-news-strip span{font-family:var(--font-display);font-size:14px;font-weight:600;line-height:1.35;}
.mag-section-head{margin-bottom:30px;}
.mag-section-head h2{font-size:clamp(2rem,3vw,3.25rem);font-weight:500;}
.mag-picks{width:auto;max-width:none;margin-inline:0;padding-block:clamp(72px,7vw,112px);
    padding-inline:calc(max(var(--page-gutter),calc(50% - 1860px / 2)) + clamp(24px,3.5vw,56px));}
.mag-picks-grid{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.5fr);
    /* Taller rows; viewport-relative so the main pick keeps a generous crop on big screens. */
    grid-template-rows:repeat(2,minmax(clamp(280px,22vw,380px),1fr));gap:20px;}
.mag-pick{position:relative;overflow:hidden;color:#fff;text-decoration:none;min-height:clamp(280px,22vw,380px);}
.mag-pick:nth-child(1){grid-column:1;grid-row:1;}
.mag-pick:nth-child(2){grid-column:1;grid-row:2;}
.mag-pick-main{grid-column:2;grid-row:1/3;}
.mag-pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
.mag-pick::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.72));}
.mag-pick span{position:absolute;z-index:1;left:24px;right:24px;bottom:24px;display:flex;flex-direction:column;gap:8px;}
.mag-pick small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;}
.mag-pick strong{font-family:var(--font-display);font-size:clamp(1.2rem,1.8vw,2rem);line-height:1.2;}
.mag-pick-main strong{font-size:clamp(1.8rem,2.7vw,3.2rem);}
.mag-pick:hover img{transform:scale(1.035);}

@media(min-width:901px){
    #moi-nhat .index-list{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto;gap:46px 28px;}
    #moi-nhat .index-card:nth-child(1),#moi-nhat .index-card:nth-child(2){grid-column:span 6;grid-row:auto;}
    #moi-nhat .index-card:nth-child(n+3):nth-child(-n+6){display:list-item;grid-column:span 3;grid-row:auto;border:0;}
    #moi-nhat .index-card:nth-child(n+7){display:none;}
    #moi-nhat .index-card:nth-child(n) .card-link{display:flex;gap:18px;padding:0;}
    #moi-nhat .index-card:nth-child(n) .card-media{height:auto;min-height:0;aspect-ratio:16/10;margin:0;}
    #moi-nhat .index-card:nth-child(1) .card-title,#moi-nhat .index-card:nth-child(2) .card-title{font-size:clamp(1.6rem,2vw,2.25rem);}
    #moi-nhat .index-card:nth-child(n+3) .card-title{font-size:18px;}
    #moi-nhat .index-card:nth-child(n+3) .card-excerpt{display:none;}
}
@media(max-width:900px){
    .category-showcase-grid:not(.is-paged){grid-template-columns:repeat(2,minmax(0,1fr));}
    .category-showcase-card:nth-child(even){padding-top:36px;}
    .mag-lead-grid{grid-template-columns:1fr;}
    .mag-lead-side{grid-template-columns:repeat(2,minmax(0,1fr));}
    .mag-news-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
    .mag-picks-grid{grid-template-columns:1fr 1.35fr;}
}
@media(max-width:560px){
    .category-showcase{padding-block:42px 52px;}
    .category-showcase-inner{padding-inline:20px;}
    .category-showcase-head{display:block;}
    .category-showcase-head p{margin-top:10px;}
    /* Fallback (non-paged) grid keeps the old swipe rail. */
    .category-showcase-grid:not(.is-paged){display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px;}
    .category-showcase-grid:not(.is-paged) .category-showcase-card,
    .category-showcase-grid:not(.is-paged) .category-showcase-card:nth-child(even){flex:0 0 78vw;flex-direction:column;padding-top:0;scroll-snap-align:start;}
    /* Paged: single column, no reversed/offset cards on a phone. */
    .category-showcase-grid.is-paged .category-showcase-card,
    .category-showcase-grid.is-paged .category-showcase-card:nth-child(even){flex-direction:column;padding-top:0;}
    .category-showcase-card:nth-child(even) .category-showcase-name{margin:0 0 14px;order:-1;}
    .category-showcase-name{min-height:110px;margin-bottom:14px!important;font-size:1.5rem;}
    .category-showcase-media{aspect-ratio:4/5;}
    .mag-home,.mag-picks{padding-inline:20px;}
    .mag-lead-side,.mag-news-strip{grid-template-columns:1fr;}
    .mag-news-strip a{border-left:0;border-top:1px solid var(--color-rule);padding-inline:0;}
    .mag-picks-grid{display:flex;flex-direction:column;}
    .mag-pick{min-height:280px;}
}

.byline{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;
    font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.06em;
    text-transform:uppercase;color:var(--color-ink-3);}
.byline .dot{width:4px;height:4px;border-radius:50%;background:var(--color-rule);flex:none;}
.byline .who,.byline .who a{color:var(--color-ink);}

/* 7. Aside list (secondary posts)
/* ---------------------------------------------------------- */
.aside-list{list-style:none;margin:0;padding:0;}
.aside-list li{padding-block:var(--space-md);border-top:var(--rule-hair) solid var(--color-rule);}
.aside-list li:first-child{border-top:2px solid var(--color-ink);}
.aside-row{display:flex;gap:var(--space-md);align-items:flex-start;justify-content:space-between;}
.aside-row h3{font-size:var(--text-base);line-height:1.3;margin-block:2px 6px;
    transition:color var(--dur-fast) var(--ease-out);}
.aside-row:hover h3{color:var(--color-ink);}
.aside-cap{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--color-ink-3);}
.aside-thumb{width:132px;aspect-ratio:4/3;flex:none;border-radius:var(--radius-plate);
    object-fit:cover;background:var(--color-paper-2);
    transition:transform var(--dur-mid) var(--ease-out);}
.aside-row:hover .aside-thumb{transform:scale(1.03);}

/* 8. Index list (the feed — rows, not cards)
/* ---------------------------------------------------------- */
/* Index feed: responsive card grid — image on top, category chip, title.
   auto-fit (not auto-fill) so tracks stretch to fill the row instead of leaving
   phantom empty columns that make the grid feel cramped/single-column. */
.index-list{list-style:none;margin:0;padding:0;display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,2.6vw,48px);}
.index-card{min-width:0;}
.index-card[hidden]{display:none !important;}
/* Editorial card: borderless — image, coloured category label, bold title, excerpt. */
.card-link{display:flex;flex-direction:column;gap:var(--space-md);height:100%;
    color:var(--color-ink);text-decoration:none;}
.card-media{position:relative;display:block;overflow:hidden;border-radius:10px;
    aspect-ratio:16/10;background:var(--color-paper-2);margin-bottom:var(--space-2xs);}
.card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform 480ms var(--ease-out);}
.card-link:hover .card-img{transform:scale(1.05);}
.card-img-fallback{background:
    linear-gradient(135deg,var(--color-paper-3),var(--color-paper-2));}
.card-body{display:flex;flex-direction:column;gap:var(--space-sm);}
.card-meta{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;}
/* category as an outlined pill, matching .hero-editorial-tag */
.card-tag{display:inline-flex;align-items:center;align-self:flex-start;
    padding:5px 10px;border:1px solid var(--color-ink);border-radius:999px;
    font-family:var(--font-body);
    font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
    line-height:1.1;color:var(--color-ink);white-space:nowrap;}
.card-date{font-family:'Josefin Sans',var(--font-body);font-size:var(--text-xs);
    letter-spacing:0.04em;color:var(--color-ink-3);white-space:nowrap;}
.card-title{font-family:'Josefin Sans',var(--font-display);font-weight:700;
    letter-spacing:-0.01em;font-size:var(--text-xl);line-height:1.24;
    color:var(--color-ink);text-wrap:balance;
    transition:color var(--dur-fast) var(--ease-out);
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-link:hover .card-title{color:inherit;}
.card-excerpt{font-family:'Josefin Sans',var(--font-body);font-size:var(--text-sm);
    line-height:1.55;color:var(--color-ink-2);
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* Dark "Latest" band — full-bleed black behind the card grid.
   The section sits on .wrap (centered, max-width); break the background out to the
   full viewport width while keeping the inner content constrained via padding-inline. */
.rail-dark{--rail-max:1600px;position:relative;background:#0e0c0b;color:#fff;
    padding-block:var(--space-3xl);
    /* full-bleed by unclamping (parent .site-main is already full-width) —
       no 100vw, so no scrollbar-width overflow/off-center on Windows */
    width:auto;max-width:none;margin-inline:0;
    /* align the content column to the hero (max-width 1600 + the hero's inline padding);
       50% here = half of the full-bleed band itself, scrollbar-safe */
    padding-inline:calc(max(var(--page-gutter),calc(50% - var(--rail-max) / 2)) + clamp(24px,4vw,64px));}
.rail-dark .rail-head{border-bottom-color:rgba(255,255,255,.16);}
.rail-dark .rail-head h2{color:#fff;}
.rail-dark .rail-search{background:rgba(255,255,255,.04);color:rgba(255,255,255,.6);
    border-color:rgba(255,255,255,.16);}
.rail-dark .rail-search:hover{border-color:rgba(255,255,255,.4);color:#fff;}
.rail-dark .rail-search svg{color:rgba(255,255,255,.7);}
.rail-dark .card-link{color:#fff;}
.rail-dark .card-media{background:rgba(255,255,255,.06);}
.rail-dark .card-tag{color:#fff;border-color:rgba(255,255,255,.5);}
.rail-dark .card-title{color:#fff;}
.rail-dark .card-link:hover .card-title{color:#fff;}
.rail-dark .card-date{color:rgba(255,255,255,.5);}
.rail-dark .card-excerpt{color:rgba(255,255,255,.68);}
.rail-dark .pagination a,.rail-dark .pagination span{color:rgba(255,255,255,.7);}

/* "Load more" button — appends the next page's cards in place */
.load-more-wrap{display:flex;justify-content:center;margin-top:clamp(32px,4vw,56px);}
.load-more{font-family:'Josefin Sans',var(--font-body);font-weight:600;
    font-size:var(--text-sm);letter-spacing:0.06em;text-transform:uppercase;
    color:var(--color-ink);cursor:pointer;
    min-height:48px;padding:0 var(--space-2xl);border-radius:999px;
    border:var(--rule-hair) solid var(--color-rule);background:transparent;
    transition:background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
.load-more:hover{background:var(--color-accent-2);border-color:var(--color-accent-2);
    color:var(--color-accent-ink);}
.load-more:disabled{cursor:default;opacity:.6;}
.load-more.is-loading{cursor:progress;}
/* Smooth reveal for cards shown via "Xem thêm" */
@keyframes card-enter{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.index-card.card-enter{animation:card-enter 480ms var(--ease-out) both;}
@media (prefers-reduced-motion:reduce){.index-card.card-enter{animation:none;}}
/* on the dark Latest band */
.rail-dark .load-more{color:#fff;border-color:rgba(255,255,255,.28);}
.rail-dark .load-more:hover{background:var(--color-accent-2);
    border-color:var(--color-accent-2);color:var(--color-accent-ink);}

/* Homepage latest rail — roomier editorial rhythm and more readable type. */
#moi-nhat.rail-dark{
    --rail-max:1860px;
    background:#fff;
    color:var(--color-ink);
    padding-block:clamp(88px,7vw,132px);
    padding-inline:calc(max(var(--page-gutter),calc(50% - var(--rail-max) / 2)) + clamp(24px,3.5vw,56px));
}
#moi-nhat.rail-dark .rail-head{border-bottom:0;}
#moi-nhat.rail-dark .rail-head h2{color:var(--color-ink);}
/* This band keeps the .rail-dark class but paints white, so the dark-band tag
   pill (white text on a light border) would vanish. Restore the ink pill. */
#moi-nhat.rail-dark .card-tag{color:var(--color-ink);border-color:var(--color-ink);}
#moi-nhat.rail-dark .card-link{color:var(--color-ink);}
#moi-nhat.rail-dark .card-media{background:var(--color-paper-2);}
#moi-nhat.rail-dark .card-title{color:var(--color-ink);}
/* No accent colour shift on hover — titles stay ink. */
#moi-nhat.rail-dark .card-link:hover .card-title,
#moi-nhat.rail-dark .index-card:hover .card-title{color:var(--color-ink);}
#moi-nhat.rail-dark .card-date{color:var(--color-ink-3);}
#moi-nhat.rail-dark .card-excerpt{color:var(--color-ink-2);}
#moi-nhat.rail-dark .load-more{color:var(--color-ink);border-color:var(--color-rule);}
#moi-nhat.rail-dark .load-more:hover{background:var(--color-accent-2);border-color:var(--color-accent-2);color:var(--color-accent-ink);}
#moi-nhat .rail-head{margin-bottom:clamp(38px,4vw,60px);padding-bottom:0;border-bottom:0;}
/* Match the "Editor's picks" section heading. */
#moi-nhat .rail-head h2{font-size:clamp(2rem,3vw,3.25rem);font-weight:500;}
/* "Xem tất cả" sits flush right, on the heading's baseline (heading is much
   larger here, so keep the link from stretching in the 900px rail-head rule).
   Type matches the "Khám phá nội dung theo chủ đề" subhead: body font, 14px,
   no mono/uppercase. Colour is the light-background equivalent — this band
   renders on paper, not on the dark ground that subhead sits on. */
#moi-nhat .rail-head .more{align-self:baseline;white-space:nowrap;
    font-family:var(--font-body);font-size:14px;letter-spacing:normal;
    text-transform:none;color:var(--color-ink-2);}
/* Short divider between the picks and latest sections, flush right (1/3 width). */
#moi-nhat.rail-dark::before{content:"";position:absolute;top:0;
    right:calc(max(var(--page-gutter),calc(50% - var(--rail-max) / 2)) + clamp(24px,3.5vw,56px));
    width:calc((var(--rail-max) - 2 * clamp(24px,3.5vw,56px)) / 3);max-width:33%;
    height:1px;background:var(--color-rule);}
#moi-nhat .index-list{gap:clamp(48px,4vw,72px) clamp(34px,3vw,56px);}
#moi-nhat .index-card{overflow:hidden;border:0;border-radius:0;background:#fff;}
#moi-nhat .index-card:nth-child(n+6){display:none;}
#moi-nhat.is-filtering .index-card{display:list-item;}
#moi-nhat .card-link{gap:20px;padding:18px;}
#moi-nhat .card-media{border-radius:0;margin-bottom:2px;}
#moi-nhat .card-body{gap:12px;}
#moi-nhat .card-date{font-size:12px;}
#moi-nhat .card-title{font-size:clamp(1.25rem,1.45vw,1.65rem);line-height:1.32;-webkit-line-clamp:3;line-clamp:3;}
#moi-nhat .card-excerpt{font-size:15px;line-height:1.72;-webkit-line-clamp:3;line-clamp:3;}
#moi-nhat .load-more-wrap{margin-top:clamp(52px,5vw,80px);}
#moi-nhat .load-more{min-height:52px;padding-inline:34px;font-size:13px;}
@media(min-width:901px){
    #moi-nhat .index-list{
        grid-template-columns:repeat(12,minmax(0,1fr));
        grid-template-rows:auto;
        gap:clamp(40px,3vw,58px) clamp(18px,1.6vw,28px);
        align-items:start;
    }
    #moi-nhat .index-card{position:relative;min-height:0;overflow:visible;background:#fff;}
    #moi-nhat .index-card:nth-child(1),#moi-nhat .index-card:nth-child(2){grid-column:span 6;grid-row:1;}
    #moi-nhat .index-card:nth-child(n+3):nth-child(-n+5){grid-column:span 4;grid-row:2;}
    #moi-nhat .index-card:nth-child(n+6){display:none;}
    #moi-nhat.is-filtering .index-card{display:list-item;grid-column:span 4;grid-row:auto;}
    #moi-nhat.is-filtering .index-card .card-title{font-size:clamp(1.15rem,1.35vw,1.45rem);}
    #moi-nhat.is-filtering .index-card .card-excerpt{display:none;}
    #moi-nhat .index-card:nth-child(n) .card-link{position:relative;display:flex;flex-direction:column;height:auto;padding:0;gap:16px;color:var(--color-ink);}
    #moi-nhat .index-card:nth-child(n) .card-media{position:relative;inset:auto;width:100%;height:auto;min-height:0;aspect-ratio:16/10;margin:0;overflow:hidden;}
    #moi-nhat .index-card:nth-child(n) .card-media::after{display:none;}
    #moi-nhat .index-card:nth-child(n) .card-body{position:relative;z-index:auto;inset:auto;padding:0;gap:10px;}
    #moi-nhat .index-card:nth-child(n) .card-date{color:var(--color-ink-3);}
    #moi-nhat .index-card:nth-child(n) .card-title{color:var(--color-ink);font-size:clamp(1.15rem,1.35vw,1.45rem);line-height:1.28;max-width:32ch;}
    #moi-nhat .index-card:nth-child(1) .card-title,#moi-nhat .index-card:nth-child(2) .card-title{font-size:clamp(1.55rem,1.9vw,2.15rem);max-width:30ch;}
    #moi-nhat .index-card:nth-child(1) .card-excerpt,#moi-nhat .index-card:nth-child(2) .card-excerpt{display:-webkit-box;font-size:15px;line-height:1.65;-webkit-line-clamp:2;line-clamp:2;}
    #moi-nhat .index-card:nth-child(n+3) .card-excerpt{display:none;}
    #moi-nhat .index-card:hover .card-img{transform:scale(1.035);}
}

/* Index feed + Latest band — responsive */
@media (max-width:900px){
    /* Small screens: fixed 2-up grid */
    .index-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg);}
    .rail-dark{padding-block:var(--space-2xl);}
    /* search drops below the heading, spanning the row */
    .rail-head{align-items:stretch;}
    .rail-search{align-self:stretch;width:100%;min-width:0;}
    #moi-nhat.rail-dark{padding-block:72px 80px;}
    #moi-nhat .index-list{gap:44px 28px;}
    #moi-nhat .index-card{border-radius:0;}
}
@media (max-width:560px){
    /* single column on phones */
    .index-list{grid-template-columns:minmax(0,1fr);gap:var(--space-md);}
    .card-title{font-size:var(--text-base);}
    .rail-dark{padding-block:var(--space-xl);}
    #moi-nhat.rail-dark{padding-block:52px 60px;padding-inline:20px;}
    #moi-nhat .rail-head{margin-bottom:32px;gap:var(--space-xs);}
    #moi-nhat .rail-head h2{font-size:28px;}
    #moi-nhat .rail-head .more{flex-basis:100%;}
    #moi-nhat .index-list{gap:42px;}
    #moi-nhat .card-title{font-size:22px;}
    #moi-nhat .card-excerpt{font-size:15px;}
}

/* "Let's Talk" CTA banner — sits below Latest, flows into the KPI card row.
   .kpi-band shares this background and supplies the block's bottom padding. */
.cta-talk{
    position:relative;
    padding-block:clamp(var(--space-3xl),10vw,160px);
    background:#fff;
}

.cta-talk-inner{position:relative;z-index:1;display:flex;flex-direction:column;text-decoration:none;color:var(--color-ink);}
.cta-talk-inner:hover{color:var(--color-ink);}

.cta-talk-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-xs);flex-wrap:wrap;}
.cta-talk-kicker, .cta-talk-lead{font-family:'Josefin Sans',var(--font-body);font-size:12px;font-weight:600;letter-spacing:0.04em;color:var(--color-ink-2);text-transform:uppercase;}

.cta-talk-middle{margin-bottom:clamp(var(--space-lg),4vw,var(--space-2xl));display:flex;justify-content:space-between;align-items:center;gap:var(--space-xl);}
.cta-talk-img{flex:none;width:clamp(180px,28vw,420px);margin-top:var(--space-4xl);}
.cta-talk-img img{width:100%;height:auto;object-fit:contain;display:block;transform:scale(1.15);}
@media (max-width:600px){.cta-talk-middle{flex-direction:column;align-items:flex-start;}}

.cta-talk-title{font-family:'Josefin Sans',var(--font-display);font-size:clamp(3.5rem,8.5vw,7.5rem);font-weight:500;letter-spacing:-0.02em;line-height:1.3;color:var(--color-ink);padding-bottom:0.1em;}

/* Text Flipping Board effect — the words roll up and the amber copy in ::after
   takes their place once .cta-talk scrolls into view (class set in theme.js). */
.flip-text{display:inline-block;overflow:hidden;vertical-align:top;}
.flip-text-inner{display:block;position:relative;transition:transform 0.8s cubic-bezier(0.76,0,0.24,1);}
/* Brand gold. It is a light hue on a white band, so a hairline text-shadow in a
   deeper gold keeps the letterforms defined without changing the colour read. */
.flip-text-inner::after{content:attr(data-text);position:absolute;top:100%;left:0;right:0;
    color:#FFCC26;
    text-shadow:0 1px 0 rgba(150,100,10,.30),0 0 1px rgba(150,100,10,.22);}
.cta-talk.is-in-view .flip-text-inner{transform:translateY(-100%);}
/* No motion: show the gold outright rather than a half-flipped word. */
@media(prefers-reduced-motion:reduce){
    .flip-text-inner{transition:none;color:#FFCC26;
        text-shadow:0 1px 0 rgba(150,100,10,.30),0 0 1px rgba(150,100,10,.22);}
    .flip-text-inner::after{display:none;}
    .cta-talk.is-in-view .flip-text-inner{transform:none;}
}

.cta-talk-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2xl);flex-wrap:wrap;}
.cta-talk-arrow-wrap{flex:1;min-width:200px;display:flex;flex-direction:column;gap:var(--space-lg);}
.cta-talk-arrow{display:inline-flex;color:var(--color-ink);transition:transform 0.8s var(--ease-out), color 0.8s var(--ease-out);}
@keyframes cta-pulse-arrow {
    0%, 100% { transform: translateX(0) scale(1); }
    50% { transform: translateX(8px) scale(1.04); }
}
.cta-talk-arrow svg{width:clamp(80px,16vw,160px);height:auto;stroke-width:1.5;animation:cta-pulse-arrow 2s infinite ease-in-out;}
.cta-talk-inner:hover .cta-talk-arrow svg{animation-play-state:paused;}
.cta-talk-inner:hover .cta-talk-arrow{transform:translateX(16px);color:#FFCC26;}
.cta-talk-line{display:block;height:2px;background:#FFCC26;width:0;max-width:320px;transition:width 0.8s var(--ease-out);}
.cta-talk-inner:hover .cta-talk-line{width:100%;max-width:400px;}

.cta-talk-dek{flex:1;min-width:280px;font-family:'Josefin Sans',var(--font-body);font-size:13px;line-height:1.6;color:var(--color-ink-2);margin:0;max-width:48ch;text-align:justify;padding-bottom:12px;}

@media (max-width:760px){
    .cta-talk-top{flex-direction:column;align-items:flex-start;gap:var(--space-xs);}
    .cta-talk-bottom{flex-direction:column;align-items:flex-start;gap:var(--space-xl);}
    .cta-talk-dek{max-width:none;}
}

/* Homepage enterprise CTA — restored independently from the earlier layout.
   Bottom padding is short because .kpi-band continues this block on the same
   background and supplies the real bottom spacing. */
.cta-talk{padding-block:clamp(88px,8vw,132px) clamp(44px,4.5vw,72px);}
.cta-talk-inner{max-width:1480px;padding-inline:clamp(28px,5vw,80px);color:var(--color-ink);text-decoration:none;}
.cta-talk-inner:hover{color:var(--color-ink);}
.cta-talk-top{margin-bottom:clamp(38px,4vw,64px);}
.cta-talk-kicker-wrap{display:inline-flex;align-items:center;gap:10px;}
.cta-talk-dash{display:inline-block;width:18px;height:3px;background:#FFCC26;border-radius:2px;}
.cta-talk-kicker,.cta-talk-top-note{font-size:13px;letter-spacing:.055em;}
.cta-talk-top-note{font-family:var(--font-body);font-weight:700;color:var(--color-ink-2);text-transform:uppercase;}
.cta-talk-body{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);gap:clamp(56px,7vw,112px);align-items:center;}
.cta-talk-content{min-width:0;display:flex;flex-direction:column;gap:30px;}
.cta-talk-title{font-family:var(--font-display);font-size:clamp(2.75rem,4.4vw,4.5rem);font-weight:600;line-height:1.12;letter-spacing:-.045em;margin:0;max-width:18ch;}
.cta-talk-dek{min-width:0;max-width:62ch;padding:0;text-align:left;font-family:var(--font-body);font-size:16px;line-height:1.8;color:var(--color-ink-2);}
.cta-talk-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:2px;}
.cta-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:12px;
    min-height:54px;padding:16px 30px;border-radius:999px;
    background:#f1bb38;color:#111;
    font-family:var(--font-body);font-size:14px;font-weight:700;text-decoration:none;
    transition:background var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-out);}
.cta-btn-primary:hover{background:#e6ae2c;color:#111;
    box-shadow:0 10px 24px rgba(200,150,20,.28);transform:translateY(-1px);}
.cta-btn-arrow{font-size:20px;line-height:1;
    transition:transform var(--dur-mid) var(--ease-out);}
.cta-btn-primary:hover .cta-btn-arrow{transform:translateX(4px);}
@media(prefers-reduced-motion:reduce){
    .cta-btn-primary,.cta-btn-arrow{transition:none;}
    .cta-btn-primary:hover{transform:none;}
    .cta-btn-primary:hover .cta-btn-arrow{transform:none;}
}
.cta-link-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;color:var(--color-ink);font-family:var(--font-body);font-size:14px;font-weight:600;text-decoration:none;}
.cta-link-secondary:hover{color:var(--color-ink);}
.cta-talk-img{width:100%;max-width:430px;margin:0;justify-self:center;}
.cta-talk-img img{transform:none;}
@media(max-width:900px){
    .cta-talk{padding-block:72px 40px;}
    .cta-talk-inner{padding-inline:clamp(24px,5vw,48px);}
    .cta-talk-body{grid-template-columns:1fr;gap:44px;}
    .cta-talk-img{max-width:360px;}
}
@media(max-width:560px){
    .cta-talk{padding-block:52px 32px;}
    .cta-talk-top{margin-bottom:34px;}
    .cta-talk-title{font-size:clamp(2.15rem,10vw,3rem);line-height:1.13;}
    .cta-talk-dek{font-size:15px;line-height:1.75;}
    .cta-talk-actions{flex-direction:column;align-items:stretch;gap:12px;}
    .cta-btn-primary{width:100%;}
    .cta-talk-img{max-width:290px;}
}

/* 8a. Testimonials — client quotes, sits above the CTA block.
   Dark press band: breaks up the run of white between the Latest rail and the CTA.
   Copy is intentionally empty until real quotes land — see the .is-empty note.
/* ---------------------------------------------------------- */
.testi{background:var(--color-press);color:var(--color-press-ink);
    padding-block:clamp(72px,7vw,116px);}
/* Placeholder guard: while the markup carries no real quotes, keep the section
   out of the page. Remove class="is-empty" in the template once copy is in. */
.testi.is-empty{display:none;}
.testi-inner{max-width:1480px;padding-inline:clamp(28px,5vw,80px);}

.testi-head{max-width:640px;margin-bottom:clamp(36px,4vw,56px);}
.testi-eyebrow{display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.055em;
    text-transform:uppercase;color:var(--color-press-ink);}
.testi-eyebrow-dash{display:inline-block;flex:none;width:18px;height:3px;
    background:#FFCC26;border-radius:2px;}
.testi-title{margin:16px 0 0;font-family:var(--font-display);
    font-size:clamp(2rem,3vw,3.25rem);font-weight:500;line-height:1.14;
    letter-spacing:-.025em;color:#fff;}
.testi-note{margin:14px 0 0;font-family:var(--font-body);font-size:15px;
    line-height:1.7;color:var(--color-press-ink-2);}

.testi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(24px,2.6vw,40px);}

/* White plates on the dark band — so every colour inside the card is inverted
   relative to the section around it. */
.testi-card{display:flex;flex-direction:column;margin:0;
    padding:clamp(24px,2.2vw,34px);border-radius:5px;
    background:#fff;border:1px solid transparent;
    box-shadow:0 2px 10px rgba(0,0,0,.18);
    transition:box-shadow var(--dur-mid) var(--ease-out),
        transform var(--dur-mid) var(--ease-out);}
.testi-card:hover{box-shadow:0 16px 34px rgba(0,0,0,.28);transform:translateY(-3px);}

/* Brand gold, matching the CTA pill and the KPI icon tiles. */
.testi-mark{width:30px;height:auto;flex:none;color:#FFCC26;opacity:1;}

/* Short pull-quote headline above the full quote. */
.testi-headline{margin:16px 0 0;font-family:var(--font-display);
    font-size:clamp(1.0625rem,1.25vw,1.25rem);font-weight:700;line-height:1.3;
    letter-spacing:-.01em;color:var(--color-ink);}
.testi-quote{margin:12px 0 0;padding:0;border:0;flex:1;}
.testi-quote p{margin:0;font-family:var(--font-display);
    font-size:clamp(1.0625rem,1.2vw,1.1875rem);font-weight:400;line-height:1.62;
    color:var(--color-ink);text-wrap:pretty;}
/* Quotation marks come from the glyph above, so the copy needs none. */

.testi-by{display:flex;align-items:center;gap:14px;
    margin-top:clamp(22px,2vw,30px);padding-top:clamp(18px,1.8vw,24px);
    border-top:1px solid var(--color-rule);}
.testi-avatar{width:44px;height:44px;flex:none;border-radius:50%;
    object-fit:cover;background:var(--color-paper-2);}
.testi-by-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.testi-name{font-family:var(--font-body);font-size:14px;font-weight:700;
    letter-spacing:.01em;color:var(--color-ink);}
.testi-role{font-family:var(--font-body);font-size:12.5px;line-height:1.5;
    color:var(--color-ink-2);}

@media(max-width:1000px){
    .testi-grid{grid-template-columns:1fr;gap:20px;}
    .testi-card{padding:24px;}
}
@media(max-width:900px){
    .testi{padding-block:64px;}
    .testi-inner{padding-inline:clamp(24px,5vw,48px);}
}
@media(max-width:560px){
    .testi{padding-block:48px 52px;}
    .testi-head{margin-bottom:28px;}
    .testi-title br{display:none;}
    .testi-quote p{font-size:1.0625rem;}
}

@media(prefers-reduced-motion:reduce){
    .testi-card{transition:none;}
    .testi-card:hover{transform:none;}
}

/* 8b. KPI band — the CTA's closing row of capability cards.
   Static by design: no hover states, so the CTA's amber pill stays the only
   interactive-looking thing in the block. Icons carry their colour at rest.
/* ---------------------------------------------------------- */
.kpi-band{
    /* Same ground as .cta-talk — no seam between the two sections. */
    background:#fff;
    /* No top padding: the CTA's own bottom padding already spaces this. */
    padding-block:0 clamp(80px,7.5vw,132px);
}
.kpi-band-inner{max-width:1480px;padding-inline:clamp(28px,5vw,80px);}

/* Inline caption, same dash + uppercase treatment as .cta-talk-kicker. */
.kpi-caption{display:flex;align-items:center;gap:12px;margin:0 0 clamp(30px,3vw,46px);
    font-family:var(--font-body);font-size:12.5px;font-weight:700;letter-spacing:.075em;
    text-transform:uppercase;color:var(--color-ink-2);}
.kpi-caption-dash{display:inline-block;flex:none;width:18px;height:3px;
    background:#FFCC26;border-radius:2px;}
/* Hairline running out from the caption to the right edge, tying the row together. */
.kpi-caption::after{content:"";flex:1;height:1px;background:var(--color-rule);}

/* Roomier gutters between cards. */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.2vw,32px);}

/* ---- Card shell ---------------------------------------------------------- */
.kpi-card{position:relative;display:flex;flex-direction:column;min-width:0;
    min-height:clamp(225px,16vw,265px);
    /* Generous interior padding — the main lever for the airier feel. */
    padding:clamp(28px,2.4vw,36px);
    border-radius:14px;
    background:#fff;border:1px solid var(--color-rule);
    text-decoration:none;}
.kpi-card:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;}

/* The one accent card: a warmer hairline, nothing more. */
.kpi-card-lead{border-color:#ecd9a4;}

/* ---- Contents ------------------------------------------------------------ */
/* Icon tile carries its amber colour at rest. */
.kpi-card-icon{display:grid;place-items:center;
    width:46px;height:46px;flex:none;border-radius:12px;
    background:#FFCC26;border:1px solid #f1bb38;}
.kpi-card-icon svg{width:22px;height:22px;fill:none;
    stroke:var(--color-accent-ink);stroke-width:1.5;}

/* Index sits top-right, aligned with the icon. */
.kpi-card-num{position:absolute;top:clamp(28px,2.4vw,36px);right:clamp(28px,2.4vw,36px);
    font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.12em;
    color:var(--color-ink-3);}

.kpi-card-label{margin:auto 0 0;padding-top:26px;
    font-family:var(--font-display);font-size:clamp(1.125rem,1.3vw,1.375rem);
    font-weight:600;line-height:1.26;letter-spacing:-.018em;color:var(--color-ink);}
.kpi-card-desc{margin:11px 0 0;max-width:27ch;
    font-family:var(--font-body);font-size:13px;line-height:1.68;
    color:var(--color-ink-2);text-wrap:pretty;}

/* ---- Responsive ---------------------------------------------------------- */
@media(max-width:1100px){
    .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,24px);}
}
@media(max-width:900px){
    .kpi-band{padding-block:0 72px;}
    .kpi-band-inner{padding-inline:clamp(24px,5vw,48px);}
}
@media(max-width:560px){
    .kpi-band{padding-block:0 56px;}
    .kpi-caption{margin-bottom:22px;}
    .kpi-grid{grid-template-columns:1fr;gap:14px;}
    .kpi-card{min-height:0;padding:24px;border-radius:12px;}
    .kpi-card-num{top:24px;right:24px;}
    .kpi-card-label{padding-top:22px;font-size:1.125rem;}
    .kpi-card-label br{display:inline;content:" ";}
    .kpi-card-label br::after{content:"\00a0";}
    .kpi-card-desc{max-width:none;}
}

/* 9. Topics
/* ---------------------------------------------------------- */
.topics{display:flex;flex-wrap:wrap;gap:var(--space-xs);}
.topic{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:40px;
    padding-inline:var(--space-md);border-radius:999px;
    border:var(--rule-hair) solid var(--color-rule);font-size:var(--text-sm);color:var(--color-ink);
    transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);}
.topic:hover{border-color:var(--color-accent);background:var(--color-paper-2);color:var(--color-ink);}
.topic i{width:6px;height:6px;border-radius:50%;background:var(--color-accent-2);font-style:normal;flex:none;}
.topic .count{color:var(--color-ink-3);font-family:var(--font-mono);font-size:10px;}

/* 10. Pagination
/* ---------------------------------------------------------- */
.pagination{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);
    margin-top:var(--space-xl);font-family:var(--font-mono);font-size:var(--text-xs);
    letter-spacing:0.08em;text-transform:uppercase;color:var(--color-ink-3);}
.pagination a{color:var(--color-ink);transition:color var(--dur-fast) var(--ease-out);}
.pagination a:hover{color:var(--color-ink);}

/* 11. Single post
/* ---------------------------------------------------------- */
.post-head{padding-block:var(--space-3xl) var(--space-lg);
    border-bottom:var(--rule-hair) solid var(--color-rule);}
.post-title{font-family:'Josefin Sans',var(--font-display);font-weight:600;
    font-size:var(--text-display);max-width:22ch;margin-bottom:var(--space-md);}
.post-dek{font-family:'Josefin Sans',var(--font-body);
    font-size:var(--text-lg);color:var(--color-ink-2);max-width:60ch;margin:0 0 var(--space-lg);}
.post-feature{margin:var(--space-xl) 0 0;}
.post-feature img{width:100%;height:auto;border-radius:var(--radius-plate);}
.post-feature figcaption{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--color-ink-3);margin-top:var(--space-xs);}

.post-body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--space-3xl);
    padding-block:var(--space-2xl) var(--space-3xl);align-items:start;}
.post-body.no-toc{grid-template-columns:minmax(0,1fr);justify-items:start;}

/* clear the fixed header (collapses to ~the nav row on scroll) + let a long TOC scroll internally */
.toc{position:sticky;top:88px;max-height:calc(100dvh - 108px);overflow-y:auto;
    scrollbar-width:thin;}
.toc h2{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--color-ink-3);margin-bottom:var(--space-sm);font-weight:500;}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;}
.toc li{counter-increment:toc;}
.toc a{display:flex;gap:var(--space-xs);padding-block:7px;font-size:var(--text-sm);
    color:var(--color-ink-2);line-height:1.35;transition:color var(--dur-fast) var(--ease-out);}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-mono);font-size:10px;
    color:var(--color-ink-3);padding-top:3px;flex:none;}
.toc a:hover,.toc a.is-current{color:var(--color-ink);}
.toc a.is-current::before{color:var(--color-accent);}

.post-foot{border-top:2px solid var(--color-ink);padding-top:var(--space-lg);
    max-width:var(--measure);margin-top:var(--space-xl);}
.author-box{display:flex;gap:var(--space-md);align-items:flex-start;}
.author-box .ava{width:44px;height:44px;border-radius:50%;background:var(--color-paper-3);flex:none;
    display:grid;place-items:center;overflow:hidden;color:var(--color-ink-2);}
.author-box .ava img{width:100%;height:100%;object-fit:cover;}
.author-box .ava svg{width:22px;height:22px;}
.author-box h2{font-size:var(--text-base);margin-bottom:2px;}
.author-box p{margin:0;color:var(--color-ink-2);font-size:var(--text-sm);}

/* 12. Prose (Ghost content)
/* ---------------------------------------------------------- */
.prose{font-family:'Josefin Sans',var(--font-body);
    max-width:var(--measure);font-size:1.0625rem;line-height:1.75;}
/* Page/Post content spans wide like the hero (not bound to the narrow reading measure). */
.page-full .wrap,.post-full .wrap{max-width:1440px;padding-inline:clamp(24px,4vw,64px);}
.page-full .prose,.post-full .prose{max-width:none;}
.prose > p{margin:0 0 1.35em;}
.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{
    font-family:'Josefin Sans',var(--font-display);font-weight:600;}
.prose h2{font-size:var(--text-2xl);margin:2.2em 0 0.6em;scroll-margin-top:96px;}
.prose h3{font-size:var(--text-xl);margin:1.8em 0 0.5em;scroll-margin-top:96px;}
.prose h4{font-size:var(--text-lg);margin:1.6em 0 0.4em;}
.prose h2 .h-num{font-family:var(--font-mono);font-size:0.6em;color:var(--color-accent);
    letter-spacing:0.08em;margin-right:var(--space-sm);}
.prose ol,.prose ul{margin:0 0 1.35em;padding-left:1.3em;}
.prose li{margin-bottom:0.5em;}
.prose li::marker{color:var(--color-ink-3);}
.prose strong{font-weight:600;}
.prose a{color:var(--color-accent);box-shadow:inset 0 -1px 0 var(--color-accent);}
.prose a:hover{box-shadow:inset 0 -2px 0 var(--color-accent);}
.prose hr{border:0;border-top:var(--rule-hair) solid var(--color-rule);margin:2.4em 0;}
.prose img{border-radius:var(--radius-plate);}
.prose figure{margin:2em 0;}
.prose figcaption{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--color-ink-3);margin-top:var(--space-xs);text-align:left;}

.prose blockquote{margin:2em 0;padding:0;border:0;
    font-family:'Josefin Sans',var(--font-display);font-weight:500;
    font-size:var(--text-xl);line-height:1.35;letter-spacing:-0.01em;color:var(--color-ink);}
.prose blockquote p{margin:0 0 0.4em;}
.prose blockquote p:last-child{margin-bottom:0;}

.prose .task-list{list-style:none;padding-left:0;}
.prose li.task{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-sm);
    align-items:start;margin-bottom:var(--space-xs);}
.prose li.task .box{width:16px;height:16px;margin-top:5px;border-radius:3px;
    border:1.5px solid var(--color-rule);background:var(--color-paper);}
.prose li.task.done .box{border-color:var(--color-accent);background:var(--color-accent);
    background-image:linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%),
                     linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
    background-size:10px 10px;background-position:center;background-repeat:no-repeat;}

.prose table{width:100%;border-collapse:collapse;font-size:var(--text-sm);margin:2em 0;
    font-variant-numeric:tabular-nums;}
.prose th,.prose td{text-align:left;padding:var(--space-sm) var(--space-md);
    border-bottom:var(--rule-hair) solid var(--color-rule);}
.prose th{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--color-ink-2);border-bottom:2px solid var(--color-ink);}

.prose pre{margin:2em 0;padding:var(--space-lg);background:var(--color-press);
    color:oklch(90% 0.006 80);border-radius:var(--radius-sm);overflow-x:auto;
    font-family:var(--font-mono);font-size:13px;line-height:1.6;}
.prose code{font-family:var(--font-mono);font-size:0.875em;}
.prose :not(pre) > code{background:var(--color-paper-2);
    border:var(--rule-hair) solid var(--color-rule-soft);padding:1px 5px;border-radius:3px;}
.prose pre code{background:transparent;border:0;padding:0;color:inherit;}

/* 12b. Diagrams — inline SVG on a press-dark plate
/* ---------------------------------------------------------- */
.prose .diagram{margin:2.4em 0;}
.prose .diagram .plate{position:relative;overflow:hidden;border-radius:var(--radius-plate);
    background:var(--color-press);padding:var(--space-lg);isolation:isolate;}
.prose .diagram .plate::before{content:"";position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:26px 26px;pointer-events:none;}
.prose .diagram svg{position:relative;z-index:1;width:100%;height:auto;display:block;
    overflow:visible;}
.prose .diagram figcaption{margin-top:var(--space-sm);}
.prose .diagram--wide{width:min(100%, calc(var(--measure) + 12vw));}

/* Mermaid: khối code language-mermaid được theme.js thay bằng sơ đồ */
.prose .diagram--mermaid .plate{display:flex;justify-content:center;padding:var(--space-xl);}
.prose .diagram--mermaid svg{max-width:100%;height:auto;}
.prose .diagram--mermaid .edgeLabel{font-family:var(--font-mono);font-size:11px;}

/* SVG vocabulary — one class set, reused by every diagram */
.dg-box{fill:none;stroke:oklch(70% 0.010 70);stroke-width:1;}
.dg-box-on{fill:oklch(26% 0.010 62);stroke:var(--color-accent-2);stroke-width:1.25;}
.dg-line{fill:none;stroke:oklch(58% 0.010 70);stroke-width:1.25;}
.dg-line-on{fill:none;stroke:var(--color-accent-2);stroke-width:1.5;}
.dg-dash{stroke-dasharray:4 4;}
.dg-dot{fill:var(--color-accent-2);}
.dg-label{fill:oklch(93% 0.006 80);font-family:var(--font-body);font-size:13px;font-weight:500;}
.dg-label-sm{fill:oklch(70% 0.010 70);font-family:var(--font-mono);font-size:10px;
    letter-spacing:0.08em;text-transform:uppercase;}
.dg-label-accent{fill:var(--color-accent-2);font-family:var(--font-mono);font-size:10px;
    letter-spacing:0.08em;text-transform:uppercase;}

.dg-legend{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-sm);
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
    color:var(--color-ink-3);}
.dg-legend span{display:inline-flex;align-items:center;gap:6px;}
.dg-legend i{width:14px;height:2px;background:var(--color-accent);font-style:normal;flex:none;}
.dg-legend i.muted-key{background:var(--color-rule);}

/* 12c. Post enhancements — progress, anchors, code copy, share, prev/next, lightbox
/* ---------------------------------------------------------- */
/* Thanh tiến độ đọc — nằm trên cùng, trên cả header */
.read-progress{position:fixed;top:0;left:0;z-index:1100;width:100%;height:3px;   /* trên .mast (1000) */
    background:var(--color-accent-2);transform-origin:0 50%;transform:scaleX(0);
    pointer-events:none;}
.post-progress-summary{display:grid;grid-template-columns:auto minmax(100px,220px) 3ch;align-items:center;gap:10px;
    max-width:520px;margin-top:var(--space-md);font-family:var(--font-mono);font-size:10px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-3);}
.post-progress-summary-track{height:3px;overflow:hidden;border-radius:999px;background:var(--color-rule);}
.post-progress-summary-track span{display:block;width:100%;height:100%;background:var(--color-accent-2);
    transform:scaleX(0);transform-origin:left center;}
.post-progress-summary-value{font-variant-numeric:tabular-nums;text-align:right;}

/* Anchor link cạnh heading — chỉ hiện khi hover/focus */
.h-anchor{margin-left:var(--space-xs);font-family:var(--font-mono);font-size:0.7em;
    color:var(--color-ink-3);opacity:0;box-shadow:none;
    transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
.prose h2:hover .h-anchor,.prose h3:hover .h-anchor,
.h-anchor:focus-visible{opacity:1;}
.h-anchor:hover{color:inherit;box-shadow:none;}
.h-anchor.is-done{opacity:1;color:var(--color-ok);}
.h-anchor.is-done::after{content:" đã chép";font-size:10px;letter-spacing:0.06em;}
:lang(en) .h-anchor.is-done::after{content:" copied";}

/* Nút copy trên code block */
.prose .code-shell{position:relative;margin:2em 0;}
.prose .code-shell pre{margin:0;}
.code-copy{position:absolute;top:10px;right:10px;z-index:1;
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
    color:var(--color-press-ink-2);background:var(--color-press-2);
    border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);
    padding:5px 10px;cursor:pointer;opacity:0;
    transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
.code-shell:hover .code-copy,.code-copy:focus-visible{opacity:1;}
.code-copy:hover{color:var(--color-press-ink);}
.code-copy.is-done{opacity:1;color:var(--color-accent-2);border-color:var(--color-accent-2);}
@media (hover:none){.code-copy{opacity:1;}}   /* mobile không có hover — hiện luôn */

/* Prism tokens — bảng màu ấm khớp plate tối của theme */
.prose pre .token.comment,.prose pre .token.prolog,.prose pre .token.cdata{color:oklch(62% 0.012 70);font-style:italic;}
.prose pre .token.punctuation{color:oklch(72% 0.010 75);}
.prose pre .token.keyword,.prose pre .token.atrule,.prose pre .token.tag{color:oklch(76% 0.152 68);}   /* amber */
.prose pre .token.string,.prose pre .token.char,.prose pre .token.attr-value{color:oklch(78% 0.09 145);} /* xanh dịu */
.prose pre .token.number,.prose pre .token.boolean,.prose pre .token.constant{color:oklch(80% 0.10 85);}
.prose pre .token.function,.prose pre .token.class-name{color:oklch(82% 0.07 240);}                     /* xanh biển nhạt */
.prose pre .token.operator,.prose pre .token.entity,.prose pre .token.url{color:oklch(75% 0.06 55);}
.prose pre .token.property,.prose pre .token.attr-name,.prose pre .token.builtin{color:oklch(80% 0.08 20);}
.prose pre .token.important,.prose pre .token.bold{font-weight:600;}
.prose pre .token.italic{font-style:italic;}

/* Share bài viết — hàng ngang cuối bài (mobile/màn hẹp) */
.post-share{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-sm);
    max-width:var(--measure);margin-top:var(--space-lg);}
.post-share-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--color-ink-3);margin-right:var(--space-2xs);}
.share-btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding-inline:12px;
    font-family:'Josefin Sans',var(--font-body);font-size:var(--text-xs);font-weight:600;
    color:var(--color-ink-2);background:transparent;border:var(--rule-hair) solid var(--color-rule);
    border-radius:999px;cursor:pointer;box-shadow:none;
    transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);}
.share-btn:hover{color:var(--color-ink);border-color:var(--color-ink-3);box-shadow:none;}
.share-btn.is-done{color:var(--color-ok);border-color:var(--color-ok);}

/* Desktop rộng: thanh dọc floating sát mép phải, trôi theo khi cuộn (kiểu NiCE).
   Chỉ hiện trong lúc đang đọc bài (JS gắn .is-visible), ẩn mượt khi ra ngoài.
   Style hơi hướng Apple: viên nang frosted glass, hairline mờ, hover nảy nhẹ. */
@media (min-width:1200px){
    .post-share{position:fixed;right:16px;left:auto;top:50%;z-index:150;
        flex-direction:column;align-items:center;gap:2px;
        margin:0;max-width:none;padding:10px 6px;
        background:rgba(255,255,255,.62);
        -webkit-backdrop-filter:blur(20px) saturate(1.6);
        backdrop-filter:blur(20px) saturate(1.6);
        border:0.5px solid rgba(0,0,0,.08);border-radius:22px;
        box-shadow:0 8px 28px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.05);
        opacity:0;visibility:hidden;transform:translateY(calc(-50% + 10px)) scale(.96);
        transition:opacity var(--dur-mid) var(--ease-out),
                   transform var(--dur-mid) var(--ease-out),
                   visibility 0s linear var(--dur-mid);}
    .post-share.is-visible{opacity:1;visibility:visible;transform:translateY(-50%) scale(1);
        transition:opacity var(--dur-mid) var(--ease-out),
                   transform var(--dur-mid) var(--ease-out);}
    .post-share-label{margin:0 0 4px;font-size:9px;letter-spacing:0.14em;
        color:oklch(55% 0.01 70 / .8);}
    .share-btn{position:relative;width:36px;height:36px;min-height:0;padding:0;justify-content:center;
        background:transparent;border:0;border-radius:50%;box-shadow:none;
        color:oklch(38% 0.012 60);
        transition:background var(--dur-fast) var(--ease-out),
                   color var(--dur-fast) var(--ease-out),
                   transform var(--dur-fast) var(--ease-out);}
    .share-btn:hover{background:rgba(0,0,0,.06);color:var(--color-ink);
        border:0;box-shadow:none;transform:scale(1.08);}
    .share-btn:active{transform:scale(.94);background:rgba(0,0,0,.10);}
    .share-btn.is-done{color:var(--color-ok);border:0;}
    .share-btn svg{width:16px;height:16px;}
    .share-btn span{position:absolute;width:1px;height:1px;overflow:hidden;
        clip:rect(0 0 0 0);white-space:nowrap;}   /* chỉ còn icon, chữ dành cho screen reader */
}

/* Bài trước / bài sau — thẳng hàng mép trái với cột prose (sau cột mục lục).
   Khi TOC không hiện (ít heading / mobile) thì prose sát mép wrap, không thụt. */
.post-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-md);
    max-width:calc(var(--measure) + 12vw);margin-top:var(--space-xl);}
@media (min-width:901px){
    .post-full:has(.post-body:not(.no-toc) .toc) .post-nav{
        margin-left:calc(200px + var(--space-3xl));}   /* = cột TOC + gap của .post-body */
}
.post-nav:not(:has(a)){display:none;}
.post-nav-item{display:flex;flex-direction:column;gap:var(--space-2xs);
    padding:var(--space-md) var(--space-lg);border:var(--rule-hair) solid var(--color-rule);
    border-radius:var(--radius-plate);color:var(--color-ink);
    transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);}
/* Hover = invert: ink card with paper text on the light page */
.post-nav-item:hover{border-color:var(--color-ink);background:var(--color-ink);color:var(--color-paper);}
.post-nav-next{text-align:right;align-items:flex-end;}
.post-nav-dir{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--color-ink-3);transition:color var(--dur-fast) var(--ease-out);}
.post-nav-title{font-family:'Josefin Sans',var(--font-display);font-weight:600;
    font-size:var(--text-base);line-height:1.35;transition:color var(--dur-fast) var(--ease-out);}
.post-nav-item:hover .post-nav-dir{color:var(--color-paper);}
.post-nav-item:hover .post-nav-title{color:var(--color-paper);}
.related-posts{margin-top:var(--space-xl);padding-top:var(--space-3xl);border-top:1px solid var(--color-rule);}
.related-posts .rail-head{border-bottom:0;padding-bottom:0;}
@media(min-width:901px){.related-posts .index-list{grid-template-columns:repeat(4,minmax(0,1fr));}.related-posts .card-title{font-size:var(--text-lg);}}
/* …and the inverse inside a dark band: white card with ink text */
.rail-dark .post-nav-item{border-color:rgba(255,255,255,.2);color:#fff;}
.rail-dark .post-nav-item .post-nav-dir{color:rgba(255,255,255,.55);}
.rail-dark .post-nav-item:hover{border-color:#fff;background:#fff;color:var(--color-ink);}
.rail-dark .post-nav-item:hover .post-nav-dir{color:var(--color-ink);}
.rail-dark .post-nav-item:hover .post-nav-title{color:var(--color-ink);}

/* Lightbox — phóng to ảnh/diagram */
body.has-lightbox{overflow:hidden;}
.lightbox{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;   /* trên .mast (1000) */
    padding:clamp(16px,4vw,48px);background:oklch(97.5% 0.008 85 / .96);cursor:zoom-out;}
.lightbox-dark{background:oklch(19% 0.008 60 / .97);}
.lightbox-box{max-width:min(1400px,100%);max-height:100%;overflow:auto;}
.lightbox-box img{display:block;max-width:100%;max-height:calc(100dvh - 96px);
    width:auto;height:auto;margin:auto;border-radius:var(--radius-plate);}
.lightbox-box svg{display:block;width:min(1200px,92vw);height:auto;}
.lightbox-close{position:absolute;top:16px;right:20px;width:44px;height:44px;
    display:grid;place-items:center;font-size:28px;line-height:1;
    color:var(--color-ink);background:transparent;border:0;cursor:pointer;}
.lightbox-dark .lightbox-close{color:var(--color-press-ink);}
.prose .diagram .plate{cursor:zoom-in;}
.prose img{cursor:zoom-in;}
.prose a img,.prose .kg-bookmark-card img{cursor:pointer;}

/* TOC mobile — gập thành hộp bấm mở */
@media (max-width:900px){
    .toc{border:var(--rule-hair) solid var(--color-rule);border-left:2px solid var(--color-rule);
        border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);}
    .toc h2{margin-bottom:var(--space-sm);cursor:pointer;display:flex;align-items:center;
        justify-content:space-between;user-select:none;}
    .toc h2::after{content:"";width:8px;height:8px;flex:none;
        border-right:1.5px solid var(--color-ink-3);border-bottom:1.5px solid var(--color-ink-3);
        transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease-out);margin-top:-4px;}
    .toc.is-open h2::after{transform:rotate(-135deg);margin-top:4px;}
    .toc.is-folded h2{margin-bottom:0;}
    .toc.is-folded ol{display:none;}
}

/* 13. Koenig cards
/* ---------------------------------------------------------- */
.prose .kg-card{margin:2em 0;}
.prose .kg-width-wide{width:min(100%, calc(var(--measure) + 12vw));}
.prose .kg-width-full{width:min(100%, calc(var(--measure) + 20vw));}
.prose .kg-image{border-radius:var(--radius-plate);}
.prose .kg-gallery-container{display:flex;flex-direction:column;gap:var(--space-xs);}
.prose .kg-gallery-row{display:flex;gap:var(--space-xs);}
.prose .kg-gallery-image{flex:1 1 0;min-width:0;}
.prose .kg-gallery-image img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-plate);}
.prose .kg-callout-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-md);
    padding:var(--space-md) var(--space-lg);background:var(--color-paper-2);
    border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-sm);
    font-size:var(--text-sm);}
.prose .kg-callout-emoji{padding-top:2px;}
.prose .kg-callout-text{color:var(--color-ink-2);}
.prose .kg-bookmark-card{border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-sm);
    overflow:hidden;background:var(--color-paper-2);}
.prose .kg-bookmark-container{display:flex;color:var(--color-ink);box-shadow:none;}
.prose .kg-bookmark-content{padding:var(--space-md) var(--space-lg);flex:1;min-width:0;}
.prose .kg-bookmark-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-base);}
.prose .kg-bookmark-description{color:var(--color-ink-2);font-size:var(--text-sm);margin-top:var(--space-2xs);}
.prose .kg-bookmark-metadata{margin-top:var(--space-sm);font-family:var(--font-mono);font-size:10px;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--color-ink-3);
    display:flex;align-items:center;gap:var(--space-xs);}
.prose .kg-bookmark-icon{width:16px;height:16px;}
.prose .kg-bookmark-thumbnail img{width:180px;height:100%;object-fit:cover;}
.prose .kg-embed-card{display:flex;flex-direction:column;align-items:center;}
.prose .kg-embed-card iframe{max-width:100%;}
.prose .kg-button-card a{display:inline-flex;align-items:center;min-height:44px;
    padding-inline:var(--space-lg);border-radius:var(--radius-input);
    background:var(--color-ink);color:var(--color-paper);font-weight:600;box-shadow:none;}
@media (max-width:640px){
    .prose .kg-bookmark-container{flex-direction:column-reverse;}
    .prose .kg-bookmark-thumbnail img{width:100%;height:180px;}
}

/* 14. Archive header (tag / author)
/* ---------------------------------------------------------- */
/* Full-bleed band: background spans the whole viewport width while the
   content stays centred at the 1600px max. Overrides the .wrap max-width. */
.archive-head{max-width:none;margin-top:var(--space-xl);padding-inline:0;
    padding-block:var(--space-3xl) var(--space-lg);
    background:oklch(95.5% 0.002 250);}
.archive-head-inner{max-width:1600px;margin-inline:auto;
    padding-inline:clamp(24px,4vw,64px);}
.archive-title{font-family:'Josefin Sans',var(--font-display);
    font-size:var(--text-4xl);margin-block:var(--space-xs) var(--space-sm);}
.archive-desc{font-family:'Josefin Sans',var(--font-body);
    color:var(--color-ink-2);font-size:var(--text-lg);max-width:72ch;margin:0;}
.breadcrumb{font-family:'Josefin Sans',var(--font-body);font-size:var(--text-xs);
    font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
    display:flex;align-items:center;gap:var(--space-2xs);flex-wrap:wrap;
    margin-bottom:var(--space-sm);}
.breadcrumb a{color:var(--color-accent);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb-sep{color:var(--color-ink-3);}
.breadcrumb-current{color:var(--color-ink-2);}
.archive-meta{margin-top:var(--space-md);display:flex;gap:var(--space-xs);flex-wrap:wrap;}
.archive-meta > span{font-family:var(--font-mono);font-size:var(--text-xs);
    letter-spacing:0.08em;text-transform:uppercase;color:var(--color-ink-2);
    padding:6px 14px;border-radius:999px;background:var(--color-paper-3);
    display:inline-flex;align-items:center;}
.archive-meta a{color:var(--color-ink);}
/* Tag hero: carousel of featured posts inside the archive header */
.tag-hero{margin-top:var(--space-xl);padding:var(--space-xl);border-radius:16px;
    background:#fff;border:var(--rule-hair) solid var(--color-paper-3);}
.tag-hero-viewport{overflow:hidden;}
.tag-hero-track{display:flex;transition:transform 800ms var(--ease-out);will-change:transform;}
.tag-hero-nav{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);
    margin-top:var(--space-lg);}

/* Each slide */
.tag-feature{flex:0 0 100%;display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-2xl);
    align-items:center;color:var(--color-ink);text-decoration:none;
    opacity:.35;transition:opacity 420ms var(--ease-out);}
.tag-feature.is-active{opacity:1;}
.tag-feature-media{position:relative;overflow:hidden;border-radius:12px;
    aspect-ratio:4/3;background:var(--color-paper-3);}
.tag-feature-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform var(--dur-mid) var(--ease-out),opacity 480ms var(--ease-out);}
/* Ken Burns on the active slide — same motion as the main-site hero */
.tag-feature.is-active .tag-feature-img{animation:hero-kenburns 6s var(--ease-out) forwards;}
.tag-feature:hover .tag-feature-img{transform:scale(1.02);}
@media (prefers-reduced-motion:reduce){.tag-feature .tag-feature-img{animation:none;}}
.tag-feature-img-fallback{position:static;display:block;}
.tag-feature-body{display:flex;flex-direction:column;gap:var(--space-sm);}
.tag-feature-kicker{align-self:flex-start;font-family:var(--font-mono);font-size:10px;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--color-accent);
    padding:4px 10px;border-radius:999px;background:var(--color-paper-3);}
.tag-feature-title{font-family:'Josefin Sans',var(--font-display);font-weight:600;
    font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.1;letter-spacing:-0.01em;color:var(--color-ink);}
.tag-feature-dek{font-family:'Josefin Sans',var(--font-body);color:var(--color-ink-2);
    font-size:var(--text-base);line-height:1.55;max-width:52ch;}
.tag-feature-author{display:flex;align-items:center;gap:var(--space-xs);margin-top:var(--space-xs);
    font-family:'Josefin Sans',var(--font-body);font-size:var(--text-sm);color:var(--color-ink-2);}
.tag-feature-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;
    background:var(--color-paper-3);}
.tag-feature-author-name{font-weight:600;color:var(--color-ink);}
.tag-feature-sep{color:var(--color-ink-3);}
@media (max-width:720px){
    .tag-hero{padding:var(--space-lg);}
    .tag-feature{grid-template-columns:1fr;gap:var(--space-lg);}
    .tag-feature-media{aspect-ratio:16/10;}
}

.archive-author{display:flex;gap:var(--space-lg);align-items:center;}
.archive-author .ava{width:80px;height:80px;border-radius:50%;overflow:hidden;flex:none;
    background:var(--color-paper-3);display:grid;place-items:center;color:var(--color-ink-2);
    /* amber ring — matches the brand chip language */
    box-shadow:0 0 0 2px var(--color-paper),0 0 0 4px var(--color-accent-2);}
.archive-author .ava img{width:100%;height:100%;object-fit:cover;}

/* 14b. Custom pages — resource library, start-here, contact
/* ---------------------------------------------------------- */
.page-head{padding-block:var(--space-3xl) var(--space-lg);border-bottom:2px solid var(--color-ink);}
.page-title{font-size:var(--text-4xl);margin-block:var(--space-xs) var(--space-sm);}
.page-dek{color:var(--color-ink-2);font-size:var(--text-lg);max-width:60ch;margin:0;}

/* Document cards — hairline plate cards on white, kg-file-style round icon */
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
    gap:clamp(16px,1.8vw,24px);}
.res{display:flex;flex-direction:column;gap:var(--space-xs);
    padding:var(--space-lg);background:#fff;
    border:var(--rule-hair) solid var(--color-paper-3);border-radius:var(--radius-plate);
    transition:transform var(--dur-mid) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-mid) var(--ease-out);}
.res:hover{transform:translateY(-3px);border-color:var(--color-rule);
    box-shadow:0 10px 28px -18px oklch(24% 0.012 60 / .35);}
.res-icon{width:44px;height:44px;border-radius:50%;flex:none;
    display:grid;place-items:center;margin-bottom:var(--space-2xs);
    background:var(--color-accent-2);color:var(--color-accent-ink);}
.res .meta{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--color-ink-3);}
.res h3{font-family:'Josefin Sans',var(--font-display);font-weight:600;
    font-size:var(--text-lg);line-height:1.25;}
.res h3 a{transition:color var(--dur-fast) var(--ease-out);}
.res h3 a:hover{color:var(--color-ink);}
.res p{margin:0;color:var(--color-ink-2);font-size:var(--text-sm);}
.res .dl{margin-top:auto;padding-top:var(--space-sm);font-family:var(--font-mono);
    font-size:var(--text-xs);letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent);
    display:inline-flex;gap:6px;align-items:center;}
.res .dl svg{transition:transform var(--dur-fast) var(--ease-out);}
.res:hover .dl svg{transform:translateY(2px);}
@media (prefers-reduced-motion:reduce){.res:hover{transform:none;}}

.empty-note{padding:var(--space-xl) 0;color:var(--color-ink-2);font-size:var(--text-sm);}

.step-list{list-style:none;margin:0;padding:0;counter-reset:step;}
.step-list > li{counter-increment:step;display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:var(--space-lg);padding-block:var(--space-lg);
    border-top:var(--rule-hair) solid var(--color-rule);}
.step-list > li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-mono);
    font-size:var(--text-xs);color:var(--color-accent);padding-top:6px;}
.step-list h3{font-size:var(--text-xl);margin-bottom:var(--space-2xs);}
.step-list p{margin:0 0 var(--space-sm);color:var(--color-ink-2);font-size:var(--text-sm);max-width:60ch;}

/* Contact page — split layout: press-room panel (left) + prose (right) */
.contact-layout{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
    gap:clamp(var(--space-xl),4vw,var(--space-3xl));
    padding-block:var(--space-2xl) var(--space-3xl);align-items:start;}

/* Left: dark press-room contact card */
.contact-panel{position:sticky;top:120px;overflow:hidden;
    display:flex;flex-direction:column;gap:var(--space-lg);
    padding:clamp(var(--space-lg),3vw,var(--space-2xl));border-radius:20px;
    background:#171310;color:#fff;}
.contact-panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='cn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cn)'/%3E%3C/svg%3E");}
.contact-panel > *{position:relative;z-index:1;}
.contact-panel-eyebrow{display:inline-flex;align-items:center;gap:var(--space-sm);margin:0;
    font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.12em;text-transform:uppercase;
    color:var(--color-press-ink-2);}

.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.contact-item{display:flex;gap:var(--space-md);align-items:flex-start;padding-block:var(--space-md);
    border-top:var(--rule-hair) solid rgba(255,255,255,.12);}
.contact-item:first-child{border-top:0;}
.contact-icon{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
    background:var(--color-press-2);color:var(--color-accent-2);
    transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
.contact-icon svg{width:20px;height:20px;}
.contact-item:hover .contact-icon{background:var(--color-accent-2);color:var(--color-accent-ink);}
.contact-item-label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--color-press-ink-2);margin-bottom:2px;}
.contact-item-value{display:block;font-family:'Josefin Sans',var(--font-body);font-size:var(--text-base);
    line-height:1.4;color:#fff;}
a.contact-item-value{transition:color var(--dur-fast) var(--ease-out);}
a.contact-item-value:hover{color:#fff;}

/* 19b. Enterprise capability and consulting pages */
.cap-page,.consult-page{background:#fff;color:var(--color-ink);}
.cap-hero,.consult-hero{background:#191919;color:#f7f6f2;}
.cap-hero{padding:clamp(64px,8vw,118px) 0;}
.cap-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:clamp(56px,8vw,130px);align-items:end;}
.cap-hero .breadcrumb,.consult-hero .breadcrumb{margin:0 0 42px;color:rgba(255,255,255,.56);}
.cap-hero .breadcrumb a,.consult-hero .breadcrumb a{color:rgba(255,255,255,.72);}
.cap-kicker{margin:0 0 16px;font:600 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-2);}
.cap-hero h1,.consult-hero h1{max-width:900px;margin:0;font-family:'Josefin Sans',var(--font-display);font-size:clamp(2.8rem,5.3vw,5.7rem);font-weight:650;line-height:.98;letter-spacing:-.055em;text-wrap:balance;}
.cap-lead,.consult-hero-inner>p:last-child{max-width:720px;margin:26px 0 0;color:rgba(255,255,255,.68);font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.55;}
.cap-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:34px;}
.cap-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:999px;font:650 14px/1 'Josefin Sans',var(--font-body);white-space:nowrap;transition:transform 180ms var(--ease-out),background 180ms var(--ease-out);}
.cap-btn:active{transform:scale(.97);}.cap-btn-primary{background:var(--color-accent-2);color:var(--color-accent-ink);}.cap-btn-primary:hover{background:#f5a10b;transform:translateY(-2px);}
.cap-btn-text{padding-inline:0;color:rgba(255,255,255,.76);}.cap-btn-text:hover{color:#fff;}
.cap-proof{display:grid;border-top:1px solid rgba(255,255,255,.18);}
.cap-proof>div{display:grid;grid-template-columns:74px 1fr;gap:18px;align-items:baseline;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.18);}
.cap-proof strong{font:500 2.2rem/1 var(--font-mono);color:var(--color-accent-2);}.cap-proof span{color:rgba(255,255,255,.68);font-size:.95rem;}
.cap-section{padding-top:clamp(76px,9vw,138px);padding-bottom:clamp(76px,9vw,138px);}
.cap-section-intro{max-width:820px;margin-bottom:clamp(42px,5vw,72px);}.cap-section-intro h2,.cap-evidence h2,.cap-final h2{margin:0;font-size:clamp(2.15rem,4.2vw,4.4rem);line-height:1.02;letter-spacing:-.045em;text-wrap:balance;}
.cap-section-intro p,.cap-evidence>div>p,.cap-final p{max-width:680px;margin:20px 0 0;color:var(--color-ink-2);font-size:1.05rem;line-height:1.65;}
.cap-industries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 42px;}
.cap-industries article{position:relative;padding:28px 0 34px;border-top:1px solid var(--color-rule);}.cap-industries article>span{font:500 10px/1 var(--font-mono);color:var(--color-accent);}
.cap-industries h3{margin:36px 0 11px;font-size:clamp(1.35rem,2vw,1.8rem);}.cap-industries p{max-width:48ch;margin:0;color:var(--color-ink-2);}
.cap-dark{padding:clamp(76px,9vw,138px) 0;background:#191919;color:#f7f6f2;}.cap-section-intro-light p{color:rgba(255,255,255,.62);}
.capability-matrix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.18);border-left:1px solid rgba(255,255,255,.18);}
.capability-matrix article{min-height:270px;padding:30px;border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);}
.capability-matrix b{font:600 10px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-2);}.capability-matrix h3{margin:64px 0 14px;font-size:1.45rem;}.capability-matrix p{margin:0;color:rgba(255,255,255,.6);font-size:.94rem;line-height:1.65;}
.cap-tech-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--color-rule);}.cap-tech-groups>div{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid var(--color-rule);}.cap-tech-groups>div:nth-child(odd){padding-right:34px}.cap-tech-groups>div:nth-child(even){padding-left:34px;border-left:1px solid var(--color-rule);}
.cap-tech-groups span{font:600 11px/1.5 var(--font-mono);text-transform:uppercase;color:var(--color-accent);}.cap-tech-groups p{margin:0;color:var(--color-ink-2);}.cap-disclosure{margin:18px 0 0;color:var(--color-ink-3);font-size:.78rem;}
.cap-process{padding:clamp(76px,9vw,138px) 0;background:#f4f4f2;}.cap-process-list{margin:0;padding:0;list-style:none;border-top:1px solid #cfcfcb;}.cap-process-list li{display:grid;grid-template-columns:80px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid #cfcfcb;}.cap-process-list li>span{font:500 11px/1.5 var(--font-mono);color:var(--color-accent);}.cap-process-list h3{margin:0;font-size:1.45rem;}.cap-process-list p{max-width:680px;margin:7px 0 0;color:var(--color-ink-2);}
.cap-evidence{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(50px,8vw,130px);padding-top:clamp(76px,9vw,138px);padding-bottom:clamp(76px,9vw,138px);}.cap-evidence ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--color-rule);}.cap-evidence li{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--color-rule);}.cap-evidence li span{color:var(--color-ink-2);}
.cap-final{padding:64px 0;background:#191919;color:#fff;}.cap-final-inner{display:flex;align-items:center;justify-content:space-between;gap:50px}.cap-final h2{font-size:clamp(2rem,3.4vw,3.8rem)}.cap-final p{color:rgba(255,255,255,.62);}
.consult-hero{padding:60px 0 80px;}.consult-hero-inner{max-width:1600px}.consult-layout{display:grid;grid-template-columns:minmax(260px,.58fr) minmax(0,1.42fr);gap:clamp(42px,7vw,110px);padding-top:clamp(60px,8vw,110px);padding-bottom:clamp(80px,10vw,140px);}
.consult-aside{align-self:start;position:sticky;top:110px;}.consult-aside h2,.consult-form-head h2{margin:0;font-size:clamp(1.55rem,2.5vw,2.25rem);}.consult-aside ol{counter-reset:consult;margin:30px 0 0;padding:0;list-style:none;border-top:1px solid var(--color-rule);}.consult-aside li{display:grid;gap:5px;padding:20px 0;border-bottom:1px solid var(--color-rule);}.consult-aside li strong{font-size:1rem}.consult-aside li span{color:var(--color-ink-2);font-size:.9rem;}.consult-direct{display:grid;gap:4px;margin-top:30px}.consult-direct span{font-size:.82rem;color:var(--color-ink-3)}.consult-direct a{font-weight:650;color:var(--color-accent);}
.consult-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;padding:clamp(24px,4vw,46px);border:1px solid var(--color-rule);border-radius:20px;background:#f7f7f5;}.consult-form-head,.consult-field-wide{grid-column:1/-1}.consult-form-head{margin-bottom:8px}.consult-form-head p{margin:7px 0 0;color:var(--color-ink-3);font-size:.85rem;}.consult-field{display:grid;align-content:start;gap:8px}.consult-field label{font:650 13px/1.3 'Josefin Sans',var(--font-body);}.consult-field input,.consult-field select,.consult-field textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid #d3d3cf;border-radius:10px;background:#fff;color:var(--color-ink);font:500 14px/1.4 'Josefin Sans',var(--font-body);outline:none;transition:border-color 160ms var(--ease-out),box-shadow 160ms var(--ease-out);}.consult-field textarea{resize:vertical;min-height:130px}.consult-field input:focus,.consult-field select:focus,.consult-field textarea:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(245,161,11,.14)}.consult-field small{color:var(--color-ink-3);font-size:.75rem}.consult-submit{display:flex;align-items:center;gap:20px;margin-top:8px}.consult-submit button{min-height:52px;padding:0 22px;border:0;border-radius:999px;background:var(--color-ink);color:#fff;font:650 14px/1 'Josefin Sans',var(--font-body);cursor:pointer;white-space:nowrap;}.consult-submit p{max-width:430px;margin:0;color:var(--color-ink-3);font-size:.8rem;line-height:1.45;}
@media(max-width:900px){.cap-hero-grid,.consult-layout,.cap-evidence{grid-template-columns:1fr}.cap-proof{margin-top:24px}.capability-matrix{grid-template-columns:repeat(2,minmax(0,1fr))}.consult-aside{position:static}.consult-form{grid-template-columns:1fr}.consult-form-head,.consult-field-wide{grid-column:auto}}
@media(max-width:620px){.cap-hero{padding:44px 0 62px}.cap-hero .breadcrumb,.consult-hero .breadcrumb{margin-bottom:30px}.cap-hero h1,.consult-hero h1{font-size:2.65rem}.cap-industries,.capability-matrix,.cap-tech-groups{grid-template-columns:1fr}.capability-matrix article{min-height:0}.capability-matrix h3{margin-top:38px}.cap-tech-groups>div:nth-child(n){padding-inline:0;border-left:0}.cap-tech-groups>div{grid-template-columns:90px 1fr}.cap-final-inner,.consult-submit{align-items:flex-start;flex-direction:column}.consult-form{padding:22px 16px;border-radius:14px}.cap-process-list li{grid-template-columns:48px 1fr}.cap-evidence li{grid-template-columns:1fr;gap:5px}}

.contact-cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
    min-height:48px;padding-inline:var(--space-lg);border-radius:999px;
    background:var(--color-accent-2);color:var(--color-accent-ink);
    font-family:'Josefin Sans',var(--font-body);font-weight:600;font-size:var(--text-sm);
    letter-spacing:0.02em;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);}
.contact-cta svg{width:18px;height:18px;transition:transform var(--dur-mid) var(--ease-out);}
.contact-cta:hover{color:var(--color-accent-ink);background:oklch(82% 0.14 72);}
.contact-cta:hover svg{transform:translateX(3px);}
.contact-panel-foot{margin:var(--space-2xs) 0 0;font-family:var(--font-accent-caveat);font-size:1.4rem;
    color:var(--color-press-ink-2);}

.contact-body .prose{max-width:64ch;}

@media (max-width:860px){
    .contact-layout{grid-template-columns:1fr;}
    .contact-panel{position:static;}
}

/* 15. Subscribe / members
/* ---------------------------------------------------------- */
.subscribe-block{margin:var(--space-2xl) 0 0;padding:var(--space-xl);max-width:var(--measure);
    background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);
    border-radius:var(--radius-sm);}
.subscribe-block h2{font-size:var(--text-2xl);margin-bottom:var(--space-2xs);}
.subscribe-block p{color:var(--color-ink-2);margin:0 0 var(--space-md);font-size:var(--text-sm);}
.subscribe-form{display:flex;gap:var(--space-xs);flex-wrap:wrap;}
.subscribe-form input{flex:1 1 220px;min-height:46px;padding-inline:var(--space-md);
    border-radius:var(--radius-input);border:var(--rule-hair) solid var(--color-rule);
    background:var(--color-paper);color:var(--color-ink);
    font-family:var(--font-body);font-size:var(--text-base);}
.subscribe-form input:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px;}
.form-note{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
    color:var(--color-ink-3);margin-top:var(--space-sm);}
.form-msg{display:none;margin-top:var(--space-sm);font-size:var(--text-sm);}
.form-msg.is-shown{display:block;}
.form-msg.ok{color:var(--color-ok);}
.form-msg.err{color:var(--color-err);}

/* ---- Membership / auth pages (signin · signup · account) ------------------
   Split-panel: dark press-room brand panel + clean form panel. Full-bleed,
   spans the viewport height below the fixed header. Follows DESIGN.md:
   press dark + accent-2 on dark, Josefin Sans, pill field, noise texture. */
.auth-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    min-height:calc(100dvh - 100px);
    /* full-bleed by unclamping (scrollbar-safe, no 100vw) */
    width:auto;max-width:none;margin-inline:0;
    background:var(--color-paper);}
.auth-shell-solo{grid-template-columns:minmax(0,1fr);place-items:center;
    padding-block:var(--space-3xl);}

.auth-panel{display:flex;align-items:center;justify-content:center;
    padding:clamp(var(--space-xl),5vw,var(--space-4xl));}

/* Left: brand / press-room panel */
.auth-brand{position:relative;overflow:hidden;background:#171310;color:#fff;}
.auth-brand::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.auth-brand::after{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-160px;
    border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,var(--color-accent-2) 0,transparent 62%);opacity:.16;
    animation:auth-glow 9s var(--ease-out) infinite alternate;}
@keyframes auth-glow{from{transform:scale(1) translate(0,0);}to{transform:scale(1.15) translate(-24px,20px);}}
.auth-brand-inner{position:relative;z-index:1;max-width:32ch;display:flex;flex-direction:column;gap:var(--space-lg);}
.auth-eyebrow{display:inline-flex;align-items:center;gap:var(--space-sm);margin:0;
    font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.12em;text-transform:uppercase;
    color:var(--color-press-ink-2);}
.auth-star{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;
    border-radius:50%;background:var(--color-accent-2);color:var(--color-accent-ink);}
.auth-star svg{width:16px;height:16px;}
.auth-brand-title{font-family:'Josefin Sans',var(--font-display);font-weight:500;
    font-size:clamp(1.9rem,3.2vw,2.8rem);line-height:1.12;letter-spacing:-0.01em;color:#fff;margin:0;}
.auth-perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-sm);}
.auth-perks li{display:flex;align-items:baseline;gap:var(--space-sm);
    font-family:'Josefin Sans',var(--font-body);font-size:var(--text-base);color:var(--color-press-ink);}
.auth-perk-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--color-accent-2);
    transform:translateY(-2px);}
.auth-brand-foot{margin:var(--space-md) 0 0;font-family:var(--font-accent-caveat);font-size:1.4rem;
    color:var(--color-press-ink-2);}

/* Right: form panel */
.auth-form-panel{background:var(--color-paper);}
.auth-card{width:100%;max-width:440px;display:flex;flex-direction:column;gap:var(--space-md);}
.auth-card .breadcrumb{margin-bottom:0;}
.auth-title{font-family:'Josefin Sans',var(--font-display);font-weight:600;
    font-size:var(--text-3xl);letter-spacing:-0.01em;color:var(--color-ink);margin:0;}
.auth-lead{font-family:'Josefin Sans',var(--font-body);color:var(--color-ink-2);
    font-size:var(--text-base);line-height:1.6;margin:0;}
.auth-form{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-xs);}

/* Pill field with inline submit — echoes the footer newsletter input */
.auth-field{display:flex;align-items:center;gap:var(--space-xs);padding:6px;
    border:2px solid var(--color-ink);border-radius:999px;background:#fff;
    transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);}
.auth-field:focus-within{box-shadow:0 0 0 4px oklch(76% 0.152 68 / .28);}
.auth-field input{flex:1;min-width:0;border:0;background:transparent;color:var(--color-ink);
    font-family:'Josefin Sans',var(--font-body);font-size:var(--text-base);
    padding-inline:var(--space-md);min-height:40px;}
.auth-field input:focus-visible{outline:none;}
.auth-submit{flex:none;display:inline-flex;align-items:center;gap:var(--space-xs);
    min-height:44px;padding-inline:var(--space-lg);border:0;border-radius:999px;cursor:pointer;
    background:var(--color-ink);color:var(--color-paper);
    font-family:'Josefin Sans',var(--font-body);font-weight:600;font-size:var(--text-sm);
    letter-spacing:0.02em;white-space:nowrap;
    transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);}
.auth-submit svg{width:18px;height:18px;transition:transform var(--dur-mid) var(--ease-out);}
.auth-submit:hover{background:var(--color-accent-2);color:var(--color-accent-ink);}
.auth-submit:hover svg{transform:translateX(3px);}
.auth-submit:active{transform:translateY(1px);}
.auth-fineprint{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;
    color:var(--color-ink-3);margin:var(--space-2xs) 0 0;}
.auth-alt{font-family:'Josefin Sans',var(--font-body);font-size:var(--text-sm);
    color:var(--color-ink-2);margin:var(--space-sm) 0 0;}
.auth-alt a{color:var(--color-accent);box-shadow:inset 0 -1px 0 var(--color-accent);}

/* Account (logged-in) */
.auth-account-head{display:flex;align-items:center;gap:var(--space-md);}
.auth-avatar{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
    background:var(--color-paper-3);color:var(--color-ink-2);}
.auth-avatar svg{width:30px;height:30px;}
.auth-account-email{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-ink-2);
    margin:2px 0 0;word-break:break-all;}
.auth-status{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;
    padding-block:var(--space-sm);border-top:var(--rule-hair) solid var(--color-rule);
    border-bottom:var(--rule-hair) solid var(--color-rule);}
.auth-status-chip{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.06em;
    text-transform:uppercase;color:var(--color-ink-2);padding:6px 14px;border-radius:999px;
    background:var(--color-paper-3);}
.auth-status-chip.is-paid{background:var(--color-accent-2);color:var(--color-accent-ink);}
.auth-status-note{font-family:'Josefin Sans',var(--font-body);font-size:var(--text-sm);color:var(--color-ink-3);}
.auth-account-actions{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap;margin-top:var(--space-xs);}
.auth-submit-quiet{background:transparent;color:var(--color-ink);
    border:var(--rule-hair) solid var(--color-rule);}
.auth-submit-quiet:hover{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink);}
.auth-submit-quiet:hover svg{transform:translateX(-3px);}
.auth-alt-link{font-family:'Josefin Sans',var(--font-body);font-size:var(--text-sm);color:var(--color-ink-2);
    transition:color var(--dur-fast) var(--ease-out);}
.auth-alt-link:hover{color:var(--color-accent);}

@media (prefers-reduced-motion:reduce){.auth-brand::after{animation:none;}}
@media (max-width:820px){
    .auth-shell{grid-template-columns:1fr;min-height:0;}
    /* Brand panel becomes a compact top strip */
    .auth-brand{padding-block:var(--space-2xl);}
    .auth-brand-inner{max-width:none;gap:var(--space-md);}
    .auth-perks{display:none;}
    .auth-form-panel{padding-block:var(--space-3xl);}
}

.site-footer {
    /* paper, not press-dark: both footer blocks paint their own amber background,
       and a white base lets the amber bar's rounded top corners reveal paper (not black). */
    background: #fff;
    color: var(--color-press-ink);
    margin-top: var(--space-3xl);
    display: flex;
    flex-direction: column;
}

.foot-news-bar {
    position: relative;
    background: #FFCC26;
    padding-block: var(--space-4xl);
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
}
.foot-news-wrap {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.foot-news-text {
    flex: 1;
    min-width: 0;
}
.foot-news-text h2 {
    font-family: 'Josefin Sans', var(--font-body);
    font-size: 48px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
    color: #111;
    line-height: 1.3;
    letter-spacing: 0.02em;
}
.foot-news-text p {
    display: none;
}
.foot-news-bar .subscribe-form {
    flex: 1;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.foot-news-bar .input-group {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    border: 2px solid #111;
    border-radius: 60px;
    padding: 6px;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.foot-news-bar .input-group:focus-within {
    border-color: #111;
    box-shadow: none;
}
.foot-news-bar .input-group input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: #111;
    font-size: 20px;
    outline: none;
    padding: 20px 32px;
}
.foot-news-bar .input-group input::placeholder {
    color: rgba(17, 17, 17, 0.6);
}
.foot-news-bar .btn-subscribe {
    background: #0d0f12;
    color: #fff;
    border: none;
    border-radius: 60px;
    padding: 16px 24px;
    font-family: 'Josefin Sans', var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 8px;
    transition: opacity var(--dur-fast) ease;
}
.foot-news-bar .btn-subscribe:hover {
    opacity: 0.9;
}
.subscribe-note {
    margin-top: 16px;
    font-family: 'Josefin Sans', var(--font-body);
    font-size: 16px;
    color: rgba(17, 17, 17, 0.8);
    text-align: center;
    line-height: 1.5;
    max-width: 520px;
    margin-inline: auto;
}
.foot-news-text .subscribe-note {
    max-width: 680px;
    line-height: 1.6;
    letter-spacing: 0.01em;
}
.subscribe-form .subscribe-note {
    font-weight: 300;
}
.foot-news-bar .form-msg {
    margin-top: var(--space-sm);
    font-size: var(--text-xs);
}

/* Main Footer (Ft7 — dark press-room card on amber) */
.foot-main {
    background: #FFCC26;
    padding: clamp(8px, 1.2vw, 16px);
    font-family: 'Josefin Sans', var(--font-body);
}
.foot-main .wrap {
    max-width: 100%;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #171310;
    border-radius: 28px;
    padding-block: var(--space-3xl) var(--space-2xl);
    padding-inline: clamp(28px, 5vw, 72px);
}
.foot-logo-wrapper {
    margin-bottom: var(--space-2xl);
}
.foot-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: #fff;
}
.foot-logo:hover { color: #fff; }
.foot-logo img { height: 56px; width: auto; }

/* Top band: link columns (left) + CTA (right) */
.foot-top {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: var(--space-3xl);
    align-items: start;
}
.foot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-2xl);
}
.foot-col h3 {
    font-family: 'Josefin Sans', var(--font-body);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-md);
    color: var(--color-accent-2);
}
.foot-col-about p {
    color: var(--color-press-ink-2);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: var(--space-md);
    max-width: 42ch;
}
.foot-col nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.foot-col nav a, .foot-address, .foot-address a {
    color: var(--color-press-ink-2);
    font-size: 16px;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
    line-height: 1.7;
}
.foot-col nav a:hover, .foot-address a:hover { color: inherit; }
.foot-address { margin-top: var(--space-sm); line-height: 1.6; }

/* CTA column (right) */
.foot-cta { max-width: 34ch; margin-left: auto; }
.foot-cta-text {
    color: var(--color-press-ink);
    font-size: var(--text-sm);
    line-height: 1.7;
    margin: 0 0 var(--space-md);
}
.foot-cta-mail {
    display: inline-block;
    color: #fff;
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--color-accent-2);
    transition: color var(--dur-fast) var(--ease-out);
}
.foot-cta-mail:hover { color: inherit; }
.foot-social {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}
.foot-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-press-2);
    color: var(--color-press-ink-2);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.foot-social-link svg { width: 18px; height: 18px; fill: currentColor; }
.foot-social-link:hover {
    background: var(--color-accent-2);
    color: var(--color-accent-ink);
}

/* Bottom band: description (left) + copyright/legal (right) */
.foot-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: var(--rule-hair) solid rgba(255, 255, 255, 0.12);
}
.foot-bottom-desc {
    margin: 0;
    color: var(--color-press-ink-2);
    opacity: 0.75;
    font-size: var(--text-xs);
    line-height: 1.6;
    max-width: 60ch;
}
.foot-bottom-legal {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    font-size: var(--text-xs);
}
.foot-bottom-legal .foot-copy { color: var(--color-press-ink-2); opacity: 0.75; }
.foot-bottom-legal a {
    color: var(--color-press-ink-2);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
.foot-bottom-legal a:hover { color: inherit; }


@media (max-width: 900px) {
    /* Xếp CTA xuống dưới các cột link */
    .foot-top {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl) var(--space-md);
    }
    .foot-col-about {
        grid-column: 1 / -1;
    }
    .foot-cta { max-width: none; }
}
@media (max-width: 600px) {
    .foot-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    .foot-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}

/* 17. Error page — "trang rời khỏi bản in" (light print-room)
/* ---------------------------------------------------------- */
.error-screen{position:relative;background:#fff;color:var(--color-ink);
    /* full-bleed by unclamping (scrollbar-safe, no 100vw); fills the viewport under the header */
    width:auto;max-width:none;margin-inline:0;
    min-height:calc(100dvh - 100px);display:grid;align-items:center;overflow:hidden;}
/* grain — same noise texture as the CTA band, rất nhẹ trên nền sáng */
.error-screen::before{content:"";position:absolute;inset:-50%;pointer-events:none;opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");}

.error-wrap{position:relative;z-index:1;width:100%;max-width:1600px;margin-inline:auto;
    padding:var(--space-3xl) clamp(24px,4vw,64px);
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:var(--space-2xl);align-items:center;}

/* Left: technical-diagram illustration + censor stamp */
.error-stage{position:relative;display:grid;place-items:center;}
/* trang lỗi chung (500…) vẫn dùng số to outline */
.error-big{font-family:'Josefin Sans',var(--font-display);font-weight:700;line-height:.9;
    font-size:clamp(9rem,24vw,20rem);margin:0;letter-spacing:-0.04em;
    color:transparent;-webkit-text-stroke:1.5px rgba(0,0,0,.22);user-select:none;}
.error-art{width:min(100%,560px);height:auto;display:block;}
.error-art .ea-grid path{fill:none;stroke:var(--color-ink);stroke-width:1;opacity:.05;}
.error-art .ea-line{fill:none;stroke:var(--color-ink-2);stroke-width:1.25;}
.error-art .ea-hair{fill:none;stroke:var(--color-ink-3);stroke-width:1;}
.error-art .ea-dash{stroke-dasharray:4 4;}
.error-art .ea-dot{fill:var(--color-accent);}
.error-art .ea-page rect{fill:#fff;stroke:var(--color-ink-2);stroke-width:1.25;}
.error-art .ea-pline{fill:none;stroke:var(--color-ink-3);stroke-width:1.5;stroke-linecap:round;}
.error-art .ea-ghost{fill:none;stroke:var(--color-ink-3);stroke-width:1;stroke-dasharray:4 4;opacity:.7;}
.error-art .ea-flight{fill:none;stroke:var(--color-accent);stroke-width:1.5;stroke-dasharray:5 5;
    animation:ea-flight-dash 1.2s linear infinite;}
@keyframes ea-flight-dash{to{stroke-dashoffset:-10;}}
.error-art .ea-page-fly rect{stroke:var(--color-accent);stroke-width:1.5;}
.error-art .ea-page-fly .ea-pline{stroke:var(--color-accent);opacity:.6;}
.error-art .ea-page-fly{transform-origin:485px 96px;transform-box:view-box;
    animation:ea-fly 5s var(--ease-out) infinite alternate;}
@keyframes ea-fly{from{transform:rotate(-3deg) translateY(0);}to{transform:rotate(4deg) translateY(-10px);}}
.error-art .ea-label{fill:var(--color-accent);font-family:var(--font-mono);font-size:26px;font-weight:700;}
.error-art .ea-label-sm{fill:var(--color-ink-3);font-family:var(--font-mono);font-size:10px;
    letter-spacing:.12em;}
.error-art .ea-label-accent{fill:var(--color-accent);font-family:var(--font-mono);font-size:10px;
    letter-spacing:.12em;font-weight:700;}
/* stamp — mono caps, dashed ring, tilted like a censor's mark over the number */
.error-stamp{position:absolute;left:12%;top:18%;rotate:-8deg;
    font-family:var(--font-mono);font-size:clamp(.7rem,1.2vw,.9rem);font-weight:700;
    letter-spacing:.3em;text-transform:uppercase;color:var(--color-accent-ink);
    padding:.9em 1.6em .9em 1.9em;border:2px dashed var(--color-accent-ink);border-radius:6px;
    background:var(--color-accent-2);
    box-shadow:0 2px 10px oklch(76% 0.152 68 / .35);
    animation:error-stamp-in 480ms var(--ease-out) 500ms both;}
@keyframes error-stamp-in{from{opacity:0;transform:scale(1.6);}to{opacity:1;transform:scale(1);}}

/* Right: the editorial copy */
.error-copy{max-width:56ch;}
.error-copy > *{animation:card-enter 480ms var(--ease-out) both;}
.error-copy > :nth-child(1){animation-delay:120ms;}
.error-copy > :nth-child(2){animation-delay:180ms;}
.error-copy > :nth-child(3){animation-delay:240ms;}
.error-copy > :nth-child(4){animation-delay:300ms;}
.error-copy > :nth-child(5){animation-delay:360ms;}
.error-copy > :nth-child(6){animation-delay:420ms;}
.error-code{display:block;font-family:var(--font-mono);font-size:var(--text-xs);
    letter-spacing:0.14em;text-transform:uppercase;color:var(--color-accent);}
.error-title{font-family:'Josefin Sans',var(--font-display);font-weight:600;color:var(--color-ink);
    font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1;letter-spacing:-0.01em;
    margin-block:var(--space-sm) var(--space-md);text-wrap:balance;}
.error-sub{font-family:'Josefin Sans',var(--font-body);
    color:var(--color-ink-2);margin-bottom:var(--space-2xs);}
/* handwritten aside — the editor's pencil note in the margin */
.error-note{font-family:var(--font-accent-caveat);font-size:1.35rem;line-height:1.25;
    color:var(--color-accent);rotate:-1.5deg;transform-origin:left;
    margin:0 0 var(--space-lg);}
.error-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap;}

/* "latest post" teaser — a thin ticket at the foot of the copy */
.error-latest{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"kicker arrow" "title arrow";column-gap:var(--space-md);
    align-items:center;margin-top:var(--space-xl);padding:var(--space-md) var(--space-lg);
    border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-plate);
    background:#fff;
    color:var(--color-ink);transition:border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);}
.error-latest:hover{border-color:var(--color-accent);box-shadow:0 2px 10px rgba(0,0,0,.06);}
.error-latest-kicker{grid-area:kicker;font-family:var(--font-mono);font-size:10px;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--color-ink-3);}
.error-latest-title{grid-area:title;font-family:'Josefin Sans',var(--font-display);
    font-weight:600;font-size:var(--text-lg);line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.error-latest-arrow{grid-area:arrow;font-size:var(--text-xl);color:var(--color-accent);
    transition:transform var(--dur-fast) var(--ease-out);}
.error-latest:hover .error-latest-arrow{transform:translateX(4px);}

@media (max-width:860px){
    .error-wrap{grid-template-columns:1fr;gap:var(--space-lg);padding-block:var(--space-2xl);}
    .error-stage{order:-1;}
    .error-art{width:min(100%,420px);}
}
@media (prefers-reduced-motion:reduce){
    .error-art .ea-page-fly,.error-art .ea-flight{animation:none;}
    .error-stamp{animation-duration:0.01ms;}
    .error-copy > *{animation:none;}
}

/* 18. Notifications
/* ---------------------------------------------------------- */
.notification{position:fixed;bottom:var(--space-lg);left:50%;transform:translateX(-50%);
    display:none;z-index:2000;max-width:calc(100vw - 2 * var(--page-gutter));
    padding:var(--space-sm) var(--space-lg);border-radius:999px;
    background:var(--color-press);color:#fff;font-size:var(--text-sm);
    box-shadow:0 10px 30px rgba(0,0,0,.25);}

/* 19. Responsive
/* ---------------------------------------------------------- */
@media (max-width:900px){
    .lead-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-xl);}
    /* Hero: bỏ layout full-height của desktop, co padding trên cho khớp header */
    .hero{height:auto;display:block;padding-block:var(--space-xl) var(--space-2xl);}
    .hero-carousel{flex:none;}
    .hero-track,.hero-slide{height:auto;}
    /* Hero slide: xếp dọc — ảnh trên, nội dung dưới */
    .hero-slide{grid-template-columns:minmax(0,1fr);gap:var(--space-lg);}
    /* Ảnh theo tỉ lệ gốc, không crop */
    .hero-slide-media{aspect-ratio:auto;height:auto;min-height:0;}
    .hero-slide-img{position:static;width:100%;height:auto;object-fit:contain;}
    .hero-slide-side{justify-content:flex-start;padding-right:0;}
    .hero-slide-dek{-webkit-line-clamp:3;line-clamp:3;}
    .post-body{grid-template-columns:minmax(0,1fr);gap:var(--space-lg);}
    .toc{position:static;max-height:none;}   /* kiểu hộp gập: xem mục 12c */
    .archive-author{flex-direction:column;align-items:flex-start;}
    .foot-news-wrap{flex-direction:column;align-items:stretch;}
    .foot-news-text h2{max-width:100%;text-align:center;font-size:34px;}
    .foot-news-bar .subscribe-form{max-width:100%;}
    /* footer vàng: padding co lại khi rời layout full-height của desktop */
    .foot-news-bar{padding-block:var(--space-3xl);}
    .foot-news-bar .input-group input{font-size:18px;padding:16px 24px;}
    .foot-news-bar .btn-subscribe{padding:14px 22px;}
}
@media (max-width:600px){
    .foot-news-text h2{font-size:26px;line-height:1.25;}
    .foot-news-bar{padding-block:var(--space-2xl);}
    .foot-news-bar .input-group{padding:5px;}
    .foot-news-bar .input-group input{font-size:16px;padding:14px 18px;}
    .foot-news-bar .btn-subscribe{font-size:13px;padding:12px 18px;margin-right:6px;letter-spacing:.5px;}
    .subscribe-note{font-size:14px;}
}
@media (max-width:400px){
    /* quá hẹp: nút xuống dòng, khung bo góc mềm để không vỡ */
    .foot-news-text h2{font-size:22px;}
    .foot-news-bar .input-group{flex-direction:column;gap:8px;border-radius:24px;padding:10px;}
    .foot-news-bar .input-group input{width:100%;text-align:center;padding:12px 8px;}
    .foot-news-bar .btn-subscribe{width:100%;margin-right:0;padding:14px;border-radius:24px;}
}
@media (max-width:720px){
    /* Mobile: brand row ẩn, thay bằng thanh logo + burger */
    .mast-main{display:none;}
    .mast-nav-bar{display:flex;position:relative;z-index:2;}
    .nav-burger{display:inline-flex;}
    /* Menu = overlay fade-in phủ toàn màn hình (dưới thanh burger vẫn thấy để đóng) */
    .mast-nav{position:fixed;inset:0;z-index:1;
        background:#171310;
        padding-top:76px;                         /* chừa thanh logo + burger */
        opacity:0;visibility:hidden;pointer-events:none;
        transition:opacity var(--dur-mid) var(--ease-out),
            visibility 0s linear var(--dur-mid);
        border:0;display:grid;align-items:center;overflow-y:auto;}
    .mast-nav.is-open{opacity:1;visibility:visible;pointer-events:auto;
        transition:opacity var(--dur-mid) var(--ease-out);}
    /* khoá cuộn trang phía sau khi menu mở (JS gắn body.has-menu; :has() dự phòng) */
    body.has-menu,body:has(.mast-nav.is-open){overflow:hidden;}
    /* thanh tiến độ đọc không được vẽ đè lên menu đang mở */
    body.has-menu .read-progress{display:none;}
    .mast-nav-wrap{align-items:stretch;flex-direction:column;min-width:0;max-width:100%;
        padding:var(--space-lg) var(--space-lg) var(--space-2xl);gap:var(--space-lg);}
    .mast-nav .nav,.mast-nav .nav li{min-width:0;max-width:100%;}
    .mast-nav-wrap > .nav-logo{display:none;}
    /* link to kiểu editorial, mỗi item một dòng có hairline */
    .mast-nav .nav{flex-direction:column;gap:0;padding:0;
        overflow:visible;-webkit-mask-image:none;mask-image:none;}
    .mast-nav .nav li{border-bottom:var(--rule-hair) solid rgba(255,255,255,.10);}
    .mast-nav .nav li a{display:block;padding-block:var(--space-md);
        font-size:clamp(1.05rem,4.6vw,1.375rem);font-weight:600;letter-spacing:0.02em;
        white-space:normal;overflow-wrap:anywhere;line-height:1.25;}
    .mast-nav .nav li a::after{display:none;}     /* underline hover không hợp khổ lớn */
    .mast-nav .nav li.nav-current a{color:var(--color-accent-2);}
    /* reveal so le khi mở: item trượt lên + fade (stagger 40ms) */
    .mast-nav .nav li,.mast-nav .nav-actions{opacity:0;transform:translateY(14px);
        transition:opacity 360ms var(--ease-out),transform 360ms var(--ease-out);}
    .mast-nav.is-open .nav li,.mast-nav.is-open .nav-actions{opacity:1;transform:none;}
    .mast-nav.is-open .nav li:nth-child(1){transition-delay:60ms;}
    .mast-nav.is-open .nav li:nth-child(2){transition-delay:100ms;}
    .mast-nav.is-open .nav li:nth-child(3){transition-delay:140ms;}
    .mast-nav.is-open .nav li:nth-child(4){transition-delay:180ms;}
    .mast-nav.is-open .nav li:nth-child(5){transition-delay:220ms;}
    .mast-nav.is-open .nav li:nth-child(6){transition-delay:260ms;}
    .mast-nav.is-open .nav li:nth-child(7){transition-delay:300ms;}
    .mast-nav.is-open .nav li:nth-child(8){transition-delay:340ms;}
    .mast-nav.is-open .nav li:nth-child(9){transition-delay:380ms;}
    .mast-nav.is-open .nav li:nth-child(n+10){transition-delay:420ms;}
    .mast-nav.is-open .nav-actions{transition-delay:460ms;}
    /* actions (đăng ký + lang) dưới cùng menu */
    .nav-actions{max-width:none;opacity:0;overflow:visible;margin-left:0;
        padding-top:var(--space-lg);border-top:0;
        flex-wrap:wrap;gap:var(--space-md);}
    /* Search đã có ở thanh menu mobile, không lặp lại trong nhóm actions phía dưới. */
    .mast-nav .nav-actions .mast-search{display:none;}
    /* trong menu mobile: nút đăng ký trở lại dạng pill đầy đủ chữ */
    .nav-actions .mast-sub-icon{width:auto;padding-inline:var(--space-lg);gap:8px;min-height:44px;}
    .nav-actions .mast-sub-icon .mast-sub-text{position:static;width:auto;height:auto;
        overflow:visible;clip:auto;}
    .aside-thumb{width:88px;}
    /* nav thu về burger → header thấp hơn, giảm khoảng đệm trên cho khớp */
    .site-main{padding-top:84px;}
    @media (prefers-reduced-motion:reduce){
        .mast-nav,.mast-nav .nav li,.mast-nav .nav-actions{transition-duration:0.01ms;transition-delay:0ms;}
    }
}
@media (max-width:560px){
    /* (brand row .mast-main đã display:none từ ≤720px — các rule style nó đã gỡ) */
    .site-main{padding-top:76px;}
}
@media (max-width:420px){
    .mast-name-sm{font-size:1.35rem;}
    .nav-burger-text{display:none;}          /* màn hẹp: burger chỉ còn icon */
    .nav-burger{padding:8px;}
}
@media (max-width:480px){
    /* Footer: siết padding + chữ cho màn nhỏ */
    .foot-main .wrap{padding-inline:var(--space-lg);border-radius:20px;}
    .foot-social-link{width:36px;height:36px;}
    .foot-social-link svg{width:16px;height:16px;}
    .foot-bottom-legal{gap:var(--space-xs) var(--space-md);}
}
@media (prefers-reduced-motion:reduce){
    /* Tắt hẳn motion: duration ~0 + chỉ chạy 1 vòng (chặn animation infinite
       loop 0.01ms gây thrash) + xoá delay để phần tử không "tàng hình chờ". */
    *,*::before,*::after{
        animation-duration:0.001ms !important;
        animation-iteration-count:1 !important;
        animation-delay:0ms !important;
        transition-duration:0.001ms !important;
        transition-delay:0ms !important;
    }
    .card-link:hover .card-img{transform:none;}
}

/* Floating return-to-top control */
.scroll-top{position:fixed;right:clamp(18px,2.4vw,42px);bottom:clamp(18px,2.4vw,36px);z-index:80;
    display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(34,29,24,.14);
    border-radius:50%;background:var(--color-accent-2);color:var(--color-accent-ink);cursor:pointer;
    box-shadow:0 12px 28px rgba(20,15,11,.22);opacity:0;visibility:hidden;transform:translateY(12px);
    transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),visibility 180ms var(--ease-out),background var(--dur-fast) var(--ease-out);}
.scroll-top svg{width:21px;height:21px;}
.scroll-top.is-visible{opacity:1;visibility:visible;transform:none;}
.scroll-top:hover{background:#f5a10b;transform:translateY(-3px);}
.scroll-top:focus-visible{outline:3px solid var(--color-accent-2);outline-offset:3px;}
@media(max-width:560px){.scroll-top{width:44px;height:44px;right:16px;bottom:16px;}}
@media(prefers-reduced-motion:reduce){.scroll-top{transition:none;}.scroll-top:hover{transform:none;}}

/* 20. Language switch
/* ---------------------------------------------------------- */
.lang-switch{display:inline-flex;align-items:center;gap:6px;
    font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.08em;
    color:var(--color-press-ink-2);}
.lang-switch a{padding:4px 2px;color:var(--color-press-ink-2);
    transition:color var(--dur-fast) var(--ease-out);}
.lang-switch a:hover{color:#fff;}
.lang-switch a.is-current{color:var(--color-accent-2);font-weight:700;}
.lang-switch .sep{opacity:.35;}
/* Màn rất hẹp: ẩn lang-switch ở các thanh chật (brand row) —
   nhưng TRONG menu mobile fullscreen thì luôn hiện (thừa chỗ). */
@media (max-width:420px){
    .lang-switch{display:none;}
    .mast-nav .nav-actions .lang-switch{display:inline-flex;}
}


/* 21. Koenig file card — link tải PDF trong bài
/* ---------------------------------------------------------- */
.prose .kg-file-card{margin:2em 0;}
.prose .kg-file-card-container{display:flex;align-items:center;gap:var(--space-lg);
    padding:var(--space-md) var(--space-lg);border:var(--rule-hair) solid var(--color-rule);
    border-radius:var(--radius-sm);background:var(--color-paper-2);color:var(--color-ink);
    box-shadow:none;transition:border-color var(--dur-fast) var(--ease-out);}
.prose .kg-file-card-container:hover{border-color:var(--color-accent);}
.prose .kg-file-card-contents{flex:1;min-width:0;}
.prose .kg-file-card-title{font-family:var(--font-display);font-weight:700;
    font-size:var(--text-lg);line-height:1.3;}
.prose .kg-file-card-caption{color:var(--color-ink-2);font-size:var(--text-sm);margin-top:2px;}
.prose .kg-file-card-metadata{display:flex;gap:var(--space-sm);margin-top:var(--space-xs);
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
    color:var(--color-ink-3);}
.prose .kg-file-card-filesize::before{content:"·";margin-right:var(--space-sm);}
.prose .kg-file-card-icon{flex:none;width:44px;height:44px;border-radius:50%;
    display:grid;place-items:center;background:var(--color-accent-2);color:var(--color-accent-ink);}
.prose .kg-file-card-icon svg{width:20px;height:20px;}
@media (max-width:560px){
    .prose .kg-file-card-container{flex-direction:row-reverse;}
}

/* 22. Scroll reveal
   Content is visible by default; the .reveal-ready class (set by theme.js only
   after it confirms IntersectionObserver support and that motion is allowed)
   is what arms the hidden state. So with JS disabled, blocked, or erroring,
   every section renders normally instead of staying invisible.
/* ---------------------------------------------------------- */
.reveal-ready [data-reveal]{opacity:0;transform:translateY(18px);
    transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out);}
.reveal-ready [data-reveal].is-revealed{opacity:1;transform:none;}

/* A parent may stagger its children instead of moving as one block. */
.reveal-ready [data-reveal] [data-reveal-item]{opacity:0;transform:translateY(16px);
    transition:opacity 540ms var(--ease-out),transform 540ms var(--ease-out);}
.reveal-ready [data-reveal].is-revealed [data-reveal-item]{opacity:1;transform:none;}
/* When children animate, the wrapper itself must not — otherwise the two
   transforms compound and the stagger reads as a single shove. */
.reveal-ready [data-reveal]:has([data-reveal-item]){opacity:1;transform:none;transition:none;}

@media (prefers-reduced-motion:reduce){
    .reveal-ready [data-reveal],
    .reveal-ready [data-reveal].is-revealed,
    .reveal-ready [data-reveal] [data-reveal-item]{
        opacity:1;transform:none;transition:none;}
}