@font-face{font-family:Outfit;src:url(outfit-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Outfit;src:url(outfit-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Outfit;src:url(outfit-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Outfit;src:url(outfit-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--page:#ffffff;--bg:#f5f8fa;--ink:#14283f;--muted:#5d6f82;--line:#dfe8ef;--accent:#0e6d8d;--accent-dark:#0a536c;--accent-soft:#e7f3f8;--footer:#14283f;--footer-text:#d6e2ec;--radius:14px;--shadow:0 3px 18px rgba(20,40,63,.07)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;padding:0 0 78px;background:var(--footer);color:var(--ink);font-family:Outfit,Manrope,"Segoe UI",system-ui,sans-serif;font-weight:400;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.page{background:var(--page)}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding-left:1.25rem}

/* header */
.site-header{position:relative;z-index:30;background:var(--page);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:18px;min-height:70px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{width:36px;height:36px}
.brand-name{font-size:.98rem;font-weight:700;line-height:1.15;letter-spacing:-.01em;max-width:170px}
.site-nav{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
.site-nav a{font-size:.86rem;font-weight:500;color:var(--muted);padding:8px 9px;border-radius:8px;white-space:nowrap}
.site-nav a:hover,.site-nav a.is-active{color:var(--accent-dark);background:var(--accent-soft)}
.header-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.icon-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--page);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;padding:0}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-btn{display:none}
.drawer{display:none}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:38px 0 30px}
.hero-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.hero-media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.hero h1{font-size:clamp(1.45rem,3.3vw,2.05rem);line-height:1.22;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.hero p{color:var(--muted);font-size:1rem;max-width:52ch}
.hero .btn{display:inline-block;margin-top:18px;padding:11px 20px;border-radius:9px;background:var(--accent);color:#fff;font-weight:600;font-size:.9rem}
.hero .btn:hover{background:var(--accent-dark)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:26px 0 14px;border-top:1px solid var(--line);margin-top:8px}
.section-head h2{font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
.section-head span{font-size:.82rem;color:var(--muted)}

/* cards */
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-bottom:8px}
.article-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--page);display:flex;flex-direction:column;position:relative;transition:box-shadow .18s ease,border-color .18s ease}
.article-card:hover{box-shadow:var(--shadow);border-color:#bcd6e2}
.card-media{aspect-ratio:3/2;overflow:hidden;background:var(--bg)}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-cat{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.card-title{font-size:1.02rem;line-height:1.32;font-weight:600;letter-spacing:-.01em}
.card-sum{font-size:.86rem;color:var(--muted);line-height:1.5}
.card-meta{margin-top:auto;font-size:.76rem;color:#8b9aac;padding-top:4px}
/* whole-card click: the title link's ::after overlay covers the entire
   card so a click on the image, summary or meta also opens the article.
   The card is the positioned ancestor; the anchor stays static (the
   overlay must not be contained by the anchor itself). */
.article-card .card-title a::after{content:"";position:absolute;inset:0;z-index:1}
.article-card:hover .card-title a{color:var(--accent-dark)}

/* ad slots - reference configuration */
/* A placeholder is nothing but one centred "Advertisement" label: no
   background, no border, no declared width or height. It grows naturally
   to the label text. Folding is height:0 (never display:none) so a late
   creative can re-expand and the network can measure a live container. */
.ad-slot{display:block;text-align:center;color:var(--muted)}
.ad-slot::before{content:"Advertisement";display:block;text-align:center;font-size:12px;letter-spacing:2px;font-weight:600;line-height:1.6;color:var(--muted);opacity:.55;pointer-events:none}
.ad-slot:has(ins[data-ad-status="filled"])::before,.ad-slot[data-ad-state]::before{content:none}
.ad-slot[data-ad-state="filled"]::before,.ad-slot:has(ins[data-ad-status="filled"])::before{content:"Advertisement";display:block;text-align:center;margin:0 0 6px;line-height:1.4}
.ad-slot iframe,.ad-slot ins{display:block;width:100%}
.ad-slot>div,.ad-slot>ins,.ad-slot>iframe{margin-left:auto;margin-right:auto;max-width:100%}
.ad-slot[data-slot^="home"] iframe,.ad-slot[data-slot^="home"] ins{width:auto;max-width:100%;margin:0 auto}
[data-slot][data-ad-state="empty"],.anchor-host[data-ad-state="empty"]{height:0!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important}
[data-slot][data-ad-state="empty"]::before,.anchor-host[data-ad-state="empty"]::before{content:none!important}
.anchor-host:has(> .ad-slot[data-ad-state="empty"]){height:0;overflow:hidden;padding:0;border:0}
[data-ad-anchor]{display:block}

/* out of page hosts */
/* Both hosts stay in the layout tree, but neither is a visible box: the
   anchor bar has no background, shadow, padding or width cap, and the
   interstitial stays inert via opacity (not display:none). */
.anchor-host{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40}
/* Anchor ads run only on the home page and article pages. Everywhere else the
   host stays in the DOM so the slot set never changes, but it is fully inert:
   no label, no reserved space, no hit target. */
#adAnchor[data-anchor-disabled],#adAnchor[data-anchor-disabled] *{visibility:hidden!important;pointer-events:none!important}
.inter-host{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .18s ease}
/* The interstitial popup stays inert until a real creative is rendered.
   A placeholder "Advertisement" label never opens the overlay. */
.inter-host:not([data-real-ad="1"]){opacity:0!important;pointer-events:none!important}
.inter-host.is-open[data-real-ad="1"]{opacity:1;pointer-events:auto}
.inter-panel{position:relative;padding:22px 18px 16px}
.inter-close{position:absolute;top:8px;right:10px;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--page);font-size:1.25rem;line-height:1;color:var(--ink);padding:0}
.inter-close:hover{border-color:var(--accent);color:var(--accent)}

/* detail page */
.detail-head{padding:26px 0 8px}
.back-btn{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:12px;padding:5px 11px 5px 6px;border-radius:8px}
.back-btn:hover{color:var(--accent-dark);background:var(--accent-soft)}
.back-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.crumb{font-size:.78rem;color:var(--muted);margin-bottom:12px}
.crumb a{color:var(--accent)}
.detail-head h1{font-size:clamp(1.35rem,3.6vw,2rem);line-height:1.25;font-weight:700;letter-spacing:-.02em}
.detail-meta{font-size:.8rem;color:#8b9aac;margin-top:10px}
.detail-lead{font-size:1.02rem;color:var(--ink);max-width:74ch}
.article-body{max-width:760px;margin:0 auto;padding:6px 0 12px}
.article-body h3{font-size:1.16rem;line-height:1.35;font-weight:600;letter-spacing:-.01em;margin:26px 0 10px}
.article-body p{font-size:1rem;line-height:1.75;margin:0 0 15px;color:#24374b}
.article-body ul,.article-body ol{margin:0 0 18px;color:#24374b}
.article-body li{font-size:.97rem;line-height:1.65;margin-bottom:9px;padding-left:4px}
.article-body ol{list-style:decimal}
.article-body ul{list-style:disc}
.article-figure{margin:22px 0 24px}
.article-figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.article-figure figcaption{font-size:.78rem;color:#8b9aac;margin-top:8px;line-height:1.45}
.article-end{height:1px;margin:6px 0 0}
.related{padding:24px 0 34px;border-top:1px solid var(--line)}
.related h2{font-size:1.12rem;font-weight:700;margin-bottom:16px}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

/* category / search / legal */
.page-head{padding:30px 0 10px}
.page-head h1{font-size:clamp(1.35rem,3.4vw,1.9rem);line-height:1.25;font-weight:700;letter-spacing:-.02em}
.page-head p{color:var(--muted);font-size:.95rem;margin-top:9px;max-width:70ch}
.cat-list{padding:14px 0 30px}
.cat-item{display:flex;flex-direction:column;gap:11px;padding:16px 0;border-bottom:1px solid var(--line);position:relative}
.cat-item>a:first-child{display:block;line-height:0}
.cat-item img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px}
.cat-item h2{font-size:1.04rem;line-height:1.35;font-weight:600}
.cat-item p{font-size:.87rem;color:var(--muted);margin-top:6px;line-height:1.55}
.cat-item .cat-cat{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
/* whole-item click: title link overlay spans the whole row */
.cat-item h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px}
.chip{font-size:.8rem;font-weight:600;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--page);color:var(--muted)}
.chip.is-active,.chip:hover{background:var(--accent-soft);border-color:#b6d5e2;color:var(--accent-dark)}
.search-form{display:flex;gap:8px;margin:16px 0 8px;flex-wrap:wrap}
.search-input{flex:1 1 240px;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:1rem;font-family:inherit;color:var(--ink);background:var(--page)}
.search-input:focus{outline:2px solid #b6d5e2;border-color:var(--accent)}
.btn-solid{padding:12px 20px;border:1px solid var(--accent);border-radius:10px;background:var(--accent);color:#fff;font-size:.92rem;font-weight:600}
.btn-ghost{padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--page);color:var(--muted);font-size:.92rem;font-weight:600}
.search-status{font-size:.85rem;color:var(--muted);margin:14px 0 6px}
.search-results{padding:6px 0 34px}
.result-item{display:flex;flex-direction:column;gap:11px;padding:15px 0;border-bottom:1px solid var(--line);position:relative}
.result-thumb-link{display:block;width:100%;line-height:0}
.result-thumb{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;background:var(--bg)}
.result-body{min-width:0}
.result-item h2{font-size:1.02rem;line-height:1.35;font-weight:600}
.result-item p{font-size:.86rem;color:var(--muted);margin-top:5px;line-height:1.55}
.result-item .result-cat{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
/* whole-result click: title link overlay spans the whole row */
.result-item h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.no-results{padding:28px 0 40px;color:var(--muted);font-size:.95rem}
.legal{max-width:760px;padding:12px 0 36px}
.legal h2{font-size:1.12rem;font-weight:700;margin:26px 0 10px;line-height:1.35}
.legal p{font-size:.96rem;line-height:1.75;color:#24374b;margin-bottom:14px}
.legal ul{margin:0 0 16px;color:#24374b}
.legal li{font-size:.95rem;line-height:1.65;margin-bottom:8px}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0 30px}
.contact-card{border:1px solid var(--line);border-radius:12px;padding:18px}
.contact-card h3{font-size:.95rem;font-weight:700;margin-bottom:6px}
.contact-card p{font-size:.88rem;color:var(--muted);line-height:1.55}

/* footer */
.site-footer{background:var(--footer);color:var(--footer-text)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px;padding-top:34px;padding-bottom:24px}
.footer-brand{font-weight:700;font-size:1rem;color:#fff;margin-bottom:10px}
.footer-grid p,.footer-grid a{font-size:.84rem;color:var(--footer-text);line-height:1.8}
.footer-grid h4{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#91a9bd;margin-bottom:10px;font-weight:700}
.footer-grid a{display:block}
.footer-grid a:hover{color:#fff;text-decoration:underline}
.footer-bottom{border-top:1px solid rgba(255,255,255,.13);padding-top:16px;padding-bottom:22px}
.cookie-note{font-size:.78rem;line-height:1.65;color:#a9bdd0;max-width:90ch}
.copyright{font-size:.76rem;color:#8fa6ba;margin-top:8px}

/* floating buttons */
.float-btn{position:fixed;right:18px;z-index:50;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--page);color:var(--ink);display:none;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(20,40,63,.18);padding:0}
.float-btn.is-visible{display:inline-flex}
.float-btn:hover{border-color:var(--accent);color:var(--accent)}
.float-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#backTop{bottom:190px}
#backHome{bottom:130px}

/* responsive */
@media (max-width:980px){
 .site-header{position:fixed;top:0;left:0;right:0}
 .page{padding-top:71px}
 .header-actions{margin-left:auto}
 .site-nav{display:none}
 .menu-btn{display:inline-flex}
 .drawer.is-open{display:block;position:absolute;top:100%;left:0;right:0;background:var(--page);border-bottom:1px solid var(--line);padding:10px 20px 18px;box-shadow:var(--shadow)}
 .drawer a{display:block;font-size:.94rem;font-weight:500;padding:10px 4px;border-bottom:1px solid var(--line)}
 .drawer a:last-child{border-bottom:0}
 .article-grid,.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero{grid-template-columns:1fr;gap:20px}
 .hero-media{order:2}
}
@media (max-width:600px){
 .wrap{padding:0 20px}
 .brand-name{font-size:.9rem;max-width:150px}
 .article-grid,.related-grid{grid-template-columns:1fr}
 .hero{padding:24px 0 20px}
 .section-head{padding:20px 0 12px}
 .contact-grid{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr 1fr;gap:18px 22px;padding-top:26px;padding-bottom:18px}
 .footer-grid>div:first-child{grid-column:1 / -1}
 .article-body h3{font-size:1.08rem}
 .float-btn{right:14px;width:42px;height:42px}
 #backTop{bottom:186px}
 #backHome{bottom:130px}
 .inter-panel{padding:20px 14px 14px}
}