
:root{--navy:#102f43;--red:#e62b25;--paper:#f7f4ed;--ink:#18232b;--muted:#65737d;--line:#dfe5e8;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--ink);background:#eef2f3;line-height:1.72}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.wrap{width:min(1180px,92%);margin:auto}.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:30;border-bottom:4px solid var(--red)}.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;flex:0 0 auto}.brandplate{display:flex;align-items:center;background:#fff;border-radius:8px;padding:5px 10px}.brand img{display:block;width:auto;height:38px;max-width:235px;margin:0;border-radius:0}.links{display:flex;gap:22px;font-size:14px;font-weight:700}.links a:hover{color:#ff7772}.hero{background:var(--navy);color:#fff;padding:86px 0 82px}.eyebrow{font-size:13px;letter-spacing:.18em;font-weight:900;color:#ff6b65}.hero h1{font-size:clamp(42px,7vw,78px);line-height:1.02;max-width:900px;margin:14px 0 20px}.hero p{max-width:680px;color:#cbd8df;font-size:19px}.section{padding:58px 0}.sectionhead{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.sectionhead h2{font-size:34px;margin:0}.sectionhead p{margin:0;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;min-height:100%;transition:.2s}.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px #102f4314}.thumb{aspect-ratio:16/10;background:#d9e1e5;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover}.cardbody{padding:20px}.tag{font-size:12px;font-weight:900;color:var(--red);text-transform:uppercase;letter-spacing:.08em}.card h3{font-size:21px;line-height:1.28;margin:8px 0 9px}.meta{font-size:13px;color:var(--muted)}.article{width:min(900px,92%);margin:46px auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(24px,5vw,60px)}.article h1{font-size:clamp(34px,5vw,54px);line-height:1.1;margin:.2em 0}.article h2{font-size:30px;line-height:1.25;margin-top:1.6em}.article h3{font-size:23px;margin-top:1.4em}.article p,.article li{font-size:17px}.article img{display:block;margin:28px auto;border-radius:12px}.article a{color:#b71916;text-decoration:underline}.crumb{font-size:13px;color:var(--muted);margin-bottom:18px}.articlemeta{color:var(--muted);margin-bottom:30px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:36px}.chip{padding:6px 10px;background:#f0f3f4;border-radius:999px;font-size:12px;font-weight:700}.footer{background:#0a2231;color:#c7d3d9;padding:44px 0;margin-top:45px}.footer strong{color:#fff}.footergrid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}.menuBtn{display:none;background:none;border:0;color:white;font-size:28px}.cat-title{padding:50px 0 10px}.cat-title h1{font-size:48px;margin:0}.emptythumb{display:flex;align-items:center;justify-content:center;color:#71818a;font-weight:800;height:100%}@media(max-width:850px){.grid{grid-template-columns:repeat(2,1fr)}.links{display:none;position:absolute;top:72px;left:0;right:0;background:var(--navy);padding:20px 4%;flex-direction:column}.links.open{display:flex}.menuBtn{display:block}}@media(max-width:560px){.grid{grid-template-columns:1fr}.hero{padding:58px 0}.section{padding:40px 0}.article{margin:24px auto;padding:24px 20px}.article h2{font-size:25px}.cat-title h1{font-size:38px}}

/* Migration v1.1: Blogger named anchors inside headings are structural anchors, not visible links. */
.postbody h2 > a[name],
.postbody h3 > a[name],
.postbody h2 > a[id],
.postbody h3 > a[id]{color:inherit;text-decoration:none;font-weight:inherit}

@media(max-width:560px){.brandplate{padding:4px 8px;border-radius:7px}.brand img{height:31px;max-width:190px}.nav{min-height:68px}.links{top:68px}}

/* Migration v1.3: normalize Blogger structural subheadings without changing real inline links. */
.article h4{font-size:20px;line-height:1.35;margin:1.45em 0 .65em;font-weight:800;color:var(--ink)}
.article h2 > a[name],.article h3 > a[name],.article h4 > a[name],
.article h2 > a[id],.article h3 > a[id],.article h4 > a[id]{color:inherit;text-decoration:none;font-weight:inherit}
@media(max-width:560px){.article h4{font-size:19px}}

/* Homepage editorial hero */
.home-hero{background:var(--paper);color:var(--ink);padding:68px 0 32px}
.hero-layout{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(300px,1fr);gap:16px;align-items:stretch}
.hero-main{background:var(--navy);color:#fff;padding:66px 62px 58px;position:relative;overflow:hidden}
.hero-main:after{content:"S";position:absolute;right:28px;top:-60px;font-size:360px;line-height:1;font-weight:900;color:#ffffff0a;pointer-events:none}
.hero-main .eyebrow{position:relative;z-index:1}.hero-main h1{position:relative;z-index:1;font-size:clamp(48px,5.3vw,76px);line-height:.98;max-width:760px;margin:28px 0 26px;letter-spacing:-.035em}
.hero-main p{position:relative;z-index:1;max-width:760px;color:#e2ebef;font-size:18px;margin:0}
.hero-actions{position:relative;z-index:1;display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.hero-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border:1px solid #fff;font-size:13px;font-weight:800}.hero-btn.primary{background:var(--red);border-color:var(--red);color:#fff}.hero-btn.secondary{background:transparent;color:#fff}.hero-btn:hover{opacity:.9}
.hero-side{display:grid;grid-template-rows:repeat(3,1fr);gap:16px}.hero-topic{background:#fff;border:1px solid #cfd8dc;padding:38px 30px;display:flex;flex-direction:column;justify-content:center}.hero-topic span{color:var(--red);font-size:12px;font-weight:900;letter-spacing:.08em}.hero-topic h2{font-size:25px;line-height:1.15;margin:10px 0 8px}.hero-topic p{color:var(--muted);font-size:15px;line-height:1.55;margin:0}.hero-topic:hover{border-color:var(--red)}
@media(max-width:850px){.home-hero{padding:32px 0 20px}.hero-layout{grid-template-columns:1fr}.hero-main{padding:46px 34px}.hero-main h1{font-size:clamp(42px,11vw,64px)}.hero-side{grid-template-columns:1fr;grid-template-rows:auto}.hero-topic{padding:28px}}
@media(max-width:560px){.home-hero{padding:24px 0 12px}.hero-main{padding:38px 24px}.hero-main h1{font-size:42px;line-height:1.02;margin:20px 0}.hero-main p{font-size:16px}.hero-actions{flex-direction:column;align-items:stretch}.hero-topic{padding:24px}.hero-topic h2{font-size:22px}}
