/* Articles service card */
.articles-card{display:flex;flex-direction:column;align-items:stretch;width:100%;min-height:100%;padding:25px;border:1px solid var(--line);border-top:3px solid #55b1d8;border-radius:10px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer;appearance:none;-webkit-appearance:none;transition:background .28s ease,border-color .28s ease,color .28s ease,box-shadow .28s ease,transform .28s ease}
.articles-card .icon{flex:0 0 38px}
.articles-card-title{display:block;margin:0 0 9px;color:var(--ink);font-size:17px;font-weight:750;line-height:1.25}
.articles-card-copy{display:block;color:var(--muted);font-size:14px;line-height:1.55}
.articles-card-action{display:flex;align-items:center;gap:12px;width:100%;margin-top:18px;padding:13px 14px;border:1px solid #d2eaf5;border-radius:9px;background:#eff8fc;color:var(--ink);transition:background .2s ease,border-color .2s ease}
.articles-card:hover,.articles-card:focus-visible{background:#087fbd;border-color:#087fbd;color:#fff;box-shadow:0 16px 34px rgba(0,104,163,.2);transform:translateY(-3px);outline:none}
.articles-card:hover .articles-card-title,.articles-card:focus-visible .articles-card-title,.articles-card:hover .articles-card-copy,.articles-card:focus-visible .articles-card-copy{color:#fff}
.articles-card:hover .articles-card-action,.articles-card:focus-visible .articles-card-action{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.42);color:#fff}
.articles-card:hover .album-mark,.articles-card:focus-visible .album-mark{background:rgba(255,255,255,.18);color:#fff}
.articles-card:hover .album-copy small,.articles-card:hover .album-arrow,.articles-card:focus-visible .album-copy small,.articles-card:focus-visible .album-arrow{color:#fff}
@media(prefers-reduced-motion:reduce){.articles-card,.articles-card-action{transition:none!important}}

/* Darker, focused article reader with expandable article cards. */
.articles-dialog{width:min(980px,calc(100% - 20px));max-width:980px;max-height:min(94vh,980px);padding:0;overflow:hidden;border:1px solid rgba(167,210,232,.48);border-radius:20px;background:#102b3d;color:#e8f2f7;box-shadow:0 30px 100px rgba(3,20,32,.52)}
.articles-dialog::backdrop{background:rgba(3,17,28,.82);backdrop-filter:blur(7px)}
.articles-inner{max-height:min(94vh,980px);overflow-y:auto;overscroll-behavior:contain;padding:clamp(18px,3.2vw,32px);scrollbar-width:thin;scrollbar-color:#5e91aa transparent;background:radial-gradient(ellipse at 95% 0%,rgba(34,132,169,.2),transparent 40%),linear-gradient(145deg,#112d40,#0e2435 74%)}
.articles-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}
.articles-kicker{display:block;margin-bottom:7px;color:#69c9dc;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.articles-header h2{margin:0;color:#f4f9fc;font-size:clamp(25px,4vw,36px);line-height:1.08;letter-spacing:-.035em}
.articles-header p{max-width:690px;margin:9px 0 0;color:#aec4d1;font-size:14px;line-height:1.55}
.articles-close{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid rgba(206,229,239,.28);border-radius:50%;background:rgba(255,255,255,.08);color:#f5fbff;font-size:25px;line-height:1;cursor:pointer;transition:background .2s ease,transform .2s ease}
.articles-close:hover{background:rgba(255,255,255,.18);transform:rotate(90deg)}
.articles-list{display:grid;gap:12px}
.article-item{overflow:hidden;border:1px solid rgba(149,192,212,.25);border-radius:15px;background:linear-gradient(135deg,rgba(30,65,84,.95),rgba(17,44,62,.98));box-shadow:0 10px 28px rgba(0,0,0,.12)}
.article-item>summary{position:relative;display:flex;align-items:center;gap:13px;padding:17px 18px;list-style:none;cursor:pointer;color:#f1f7fa}
.article-item>summary::-webkit-details-marker{display:none}
.article-item>summary:focus-visible{outline:3px solid #58c3d9;outline-offset:-3px}
.article-summary-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.08);font-size:20px}
.article-summary-copy{min-width:0;display:block}
.article-summary-title{display:block;color:#f6fafc;font-size:15px;font-weight:800;line-height:1.38}
.article-summary-hint{display:block;margin-top:4px;color:#a9c2cf;font-size:12px;line-height:1.4}
.article-summary-toggle{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;margin-left:auto;border:1px solid rgba(183,219,232,.28);border-radius:50%;background:rgba(255,255,255,.06);color:#82d9e7;font-size:21px;transition:transform .28s ease,background .25s ease}
.article-item[open] .article-summary-toggle{transform:rotate(45deg);background:rgba(68,168,191,.18)}
.article-content{padding:0 20px 20px;color:#d1e0e8;font-size:14px;line-height:1.75;animation:article-expand .34s ease both}
.article-content p{margin:0 0 13px}.article-content p:last-child{margin-bottom:0}
.article-content strong{color:#fff}
.article-case{margin:15px 0;padding:15px 17px;border:1px solid rgba(104,193,211,.28);border-left:4px solid #42b9d1;border-radius:0 12px 12px 0;background:rgba(42,120,146,.13);color:#d8e8ee}
.article-case-label{display:block;margin-bottom:6px;color:#74d6e4;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.article-rule-heading{margin:18px 0 9px;color:#8bdef0;font-size:13px;font-weight:850;letter-spacing:.045em}
.article-rules{display:grid;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.article-rules li{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border:1px solid rgba(156,196,212,.16);border-radius:10px;background:rgba(255,255,255,.045);color:#d6e5eb;font-size:13px;line-height:1.55}
.article-rule-check{flex:0 0 auto;color:#76d6b3;font-weight:900}
.article-alert{padding:12px 14px;border:1px solid rgba(246,174,119,.27);border-radius:11px;background:rgba(164,86,44,.12);color:#f3d7c6}
.article-alert strong{color:#ffd2a8}
.article-source{display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:#8fd8e5;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.article-source:hover{color:#c1f2f5}
@keyframes article-expand{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.articles-dialog{width:calc(100% - 12px);max-height:96vh;border-radius:15px}.articles-inner{max-height:96vh;padding:19px 13px}.articles-header{gap:10px}.articles-header h2{font-size:27px}.articles-header p{font-size:13px}.articles-close{flex-basis:38px;width:38px;height:38px}.article-item>summary{gap:10px;padding:14px 12px}.article-summary-icon{flex-basis:36px;width:36px;height:36px;font-size:18px}.article-summary-title{font-size:13px}.article-content{padding:0 13px 16px;font-size:13px;line-height:1.65}.article-case{padding:12px 13px}.article-rules li{font-size:12px}}
@media(prefers-reduced-motion:reduce){.articles-close,.article-summary-toggle{transition:none!important}.article-content{animation:none!important}}

/* Pick an article from the horizontal carousel; its full text unfolds below. */
.article-carousel-shell{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:9px;margin:16px 0 17px}
.article-carousel{display:flex;align-items:stretch;gap:12px;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;padding:7px 3px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#4d829b transparent}
.article-carousel::-webkit-scrollbar{height:5px}.article-carousel::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(120,185,205,.45)}
.article-card{position:relative;display:flex;flex:0 0 min(390px,82%);min-height:144px;flex-direction:column;align-items:flex-start;gap:8px;overflow:hidden;padding:16px 18px;border:1px solid rgba(155,198,212,.27);border-radius:14px;background:linear-gradient(145deg,rgba(32,69,89,.95),rgba(18,43,60,.98));color:#eaf4f8;text-align:left;cursor:pointer;scroll-snap-align:center;box-shadow:0 9px 24px rgba(0,0,0,.12);transition:transform .36s cubic-bezier(.2,.8,.2,1),border-color .3s ease,background .35s ease,box-shadow .35s ease,opacity .3s ease}
.article-card::after{content:"";position:absolute;right:-28px;bottom:-54px;width:170px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(71,188,211,.2),transparent 68%);opacity:.6;pointer-events:none;transition:transform .45s ease,opacity .35s ease}
.article-card:hover,.article-card:focus-visible{transform:translateY(-3px);border-color:rgba(114,213,229,.66);outline:none}
.article-card[aria-selected="true"],.article-card.is-active{border-color:#64c9da;background:linear-gradient(145deg,rgba(36,89,111,.99),rgba(17,52,72,.99));box-shadow:0 13px 32px rgba(0,0,0,.24),0 0 0 1px rgba(100,201,218,.18) inset}
.article-card[aria-selected="true"]::after,.article-card.is-active::after{transform:scale(1.2);opacity:1}
.article-card-icon{font-size:23px;line-height:1}
.article-card-eyebrow{color:#81cfdd;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.article-card>strong{max-width:310px;color:#f6fafc;font-size:15px;line-height:1.35}
.article-card-more{display:flex;align-items:center;gap:7px;margin-top:auto;color:#b4cad4;font-size:11px;line-height:1.35}
.article-card-more b{display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(181,218,231,.28);border-radius:50%;color:#8fe0ea;font-size:13px}
.article-carousel-arrow{display:grid;place-items:center;width:36px;height:42px;border:1px solid rgba(183,219,232,.28);border-radius:11px;background:rgba(255,255,255,.07);color:#dff6f8;font-size:25px;line-height:1;cursor:pointer;transition:background .2s ease,transform .2s ease,border-color .2s ease}
.article-carousel-arrow:hover{transform:scale(1.05);border-color:rgba(114,213,229,.55);background:rgba(72,169,195,.15)}
.article-panels{min-height:50px}
.article-panel{padding:20px;border:1px solid rgba(145,191,211,.25);border-radius:15px;background:linear-gradient(140deg,rgba(28,62,81,.88),rgba(14,37,54,.96));color:#d1e0e8;font-size:14px;line-height:1.75;box-shadow:0 15px 36px rgba(0,0,0,.16)}
.article-panel[hidden]{display:none}
.article-panel.is-entering{animation:article-panel-enter .42s cubic-bezier(.2,.75,.25,1) both}
@keyframes article-panel-enter{from{opacity:0;transform:translateY(12px);clip-path:inset(0 0 16% 0 round 15px)}to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0 round 15px)}}
.article-lead{font-size:15px}
@media(max-width:600px){.article-carousel-shell{grid-template-columns:28px minmax(0,1fr) 28px;gap:5px}.article-carousel{gap:9px}.article-card{flex-basis:88%;min-height:136px;padding:14px}.article-carousel-arrow{width:28px;height:38px;font-size:21px}.article-panel{padding:15px;font-size:13px;line-height:1.65}}
@media(prefers-reduced-motion:reduce){.article-card,.article-card::after,.article-carousel-arrow{transition:none!important}.article-panel.is-entering{animation:none!important}}


/* Horizontal article-card carousel with a separate smooth reading panel. */
.article-carousel-shell{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:9px;margin:18px 0 15px}
.article-carousel{display:flex;gap:12px;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;padding:7px 3px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#4d829b transparent}
.article-carousel::-webkit-scrollbar{height:5px}.article-carousel::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(120,185,205,.42)}
.article-card{position:relative;display:flex;flex:0 0 min(390px,82%);min-height:142px;flex-direction:column;align-items:flex-start;gap:8px;overflow:hidden;padding:16px 18px;border:1px solid rgba(155,198,217,.27);border-radius:14px;background:linear-gradient(145deg,rgba(32,69,89,.95),rgba(18,43,60,.98));color:#eaf4f8;text-align:left;cursor:pointer;scroll-snap-align:center;box-shadow:0 9px 24px rgba(0,0,0,.12);transition:transform .35s ease,border-color .3s ease,background .35s ease,box-shadow .35s ease,opacity .3s ease}
.article-card::after{content:"";position:absolute;right:-28px;bottom:-54px;width:170px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(71,188,211,.2),transparent 68%);opacity:.6;pointer-events:none;transition:transform .45s ease,opacity .35s ease}
.article-card:hover,.article-card:focus-visible{transform:translateY(-3px);border-color:rgba(114,213,229,.66);outline:none}
.article-card[aria-selected="true"],.article-card.is-active{border-color:#64c9da;background:linear-gradient(145deg,rgba(36,89,111,.98),rgba(17,52,72,.99));box-shadow:0 12px 30px rgba(0,0,0,.22),0 0 0 1px rgba(100,201,218,.16) inset}
.article-card[aria-selected="true"]::after,.article-card.is-active::after{transform:scale(1.18);opacity:1}
.article-card-icon{font-size:23px;line-height:1}
.article-card-eyebrow{color:#81cfdd;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.article-card>strong{max-width:300px;color:#f6fafc;font-size:15px;line-height:1.35}
.article-card-more{display:flex;align-items:center;gap:7px;margin-top:auto;color:#b4cad4;font-size:11px;line-height:1.35}
.article-card-more b{display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(181,218,231,.28);border-radius:50%;color:#8fe0ea;font-size:13px}
.article-carousel-arrow{display:grid;place-items:center;width:36px;height:42px;border:1px solid rgba(183,219,232,.26);border-radius:11px;background:rgba(255,255,255,.07);color:#dff6f8;font-size:25px;line-height:1;cursor:pointer;transition:background .2s ease,transform .2s ease,border-color .2s ease}
.article-carousel-arrow:hover{transform:scale(1.05);border-color:rgba(114,213,229,.55);background:rgba(72,169,195,.15)}
.article-panels{min-height:80px}
.article-panel{padding:20px;border:1px solid rgba(145,191,211,.25);border-radius:15px;background:linear-gradient(140deg,rgba(28,62,81,.88),rgba(14,37,54,.95));color:#d1e0e8;font-size:14px;line-height:1.75;box-shadow:0 15px 36px rgba(0,0,0,.16)}
.article-panel[hidden]{display:none}
.article-panel.is-entering{animation:article-panel-enter .42s cubic-bezier(.2,.75,.25,1) both}
@keyframes article-panel-enter{from{opacity:0;transform:translateY(12px);clip-path:inset(0 0 15% 0 round 15px)}to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0 round 15px)}}
.article-lead{font-size:15px}
@media(max-width:600px){.article-carousel-shell{grid-template-columns:28px minmax(0,1fr) 28px;gap:5px}.article-carousel{gap:9px}.article-card{flex-basis:88%;min-height:132px;padding:14px}.article-carousel-arrow{width:28px;height:38px;font-size:21px}.article-panel{padding:15px;font-size:13px;line-height:1.65}}
@media(prefers-reduced-motion:reduce){.article-card,.article-card::after,.article-carousel-arrow{transition:none!important}.article-panel.is-entering{animation:none!important}}