:root{
  --ar-bg:#f3f6fb;
  --ar-surface:#ffffff;
  --ar-surface-soft:#f7f9fc;
  --ar-text:#1f334d;
  --ar-muted:#60738b;
  --ar-brand:#1c375b;
  --ar-brand-2:#6f8197;
  --ar-line:rgba(111,129,151,.24);
  --ar-radius-sm:10px;
  --ar-radius:14px;
  --ar-radius-lg:18px;
  --ar-shadow-sm:0 6px 20px rgba(17,35,59,.08);
  --ar-shadow-md:0 14px 38px rgba(17,35,59,.12);
  --ar-ease:cubic-bezier(.22,.61,.36,1);
}

*,
*::before,
*::after{box-sizing:border-box}

.ar-container{width:min(1180px,calc(100% - 32px));margin:0 auto}
@media(min-width:760px){.ar-container{width:min(1180px,calc(100% - 48px))}}

/* Breadcrumb */
.ar-breadcrumb{
  padding:12px 0;
  background:#f7f9fc;
  border-bottom:1px solid var(--ar-line);
}
.ar-bc-list{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;list-style:none;
  margin:0 auto;padding:0;font-size:13px;
  width:min(1180px,calc(100% - 32px));
}
.ar-bc-list li{display:flex;align-items:center;gap:8px}
.ar-bc-list li:not(:last-child)::after{content:"\203A";color:var(--ar-muted)}
.ar-bc-list a{color:var(--ar-brand);text-decoration:none}
.ar-bc-list a:hover{text-decoration:underline}
.ar-bc-list [aria-current="page"]{color:var(--ar-muted)}

/* Hero */
.ar-hero{
  position:relative;
  padding:58px 0;
  background:
    radial-gradient(1000px 280px at 80% -15%, rgba(255,255,255,.10), transparent 52%),
    linear-gradient(145deg,#172f4d 0%,#1c375b 60%,#25466c 100%);
  border-bottom:4px solid var(--ar-brand-2);
  overflow:hidden;
}
.ar-hero.has-image .ar-hero-bg{position:absolute;inset:0}
.ar-hero.has-image .ar-hero-bg::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,22,37,.35),rgba(11,22,37,.62));
}
.ar-hero.has-image .ar-hero-bg img{
  width:100%;height:100%;object-fit:cover;display:block;opacity:.48;
}
.ar-hero-inner{
  position:relative;z-index:1;
  max-width:860px;
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
}
.ar-eyebrow{
  margin:0 0 12px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.ar-eyebrow a{color:#b8c8d9;text-decoration:none}
.ar-eyebrow a:hover{color:#fff}
.ar-hero h1{
  margin:0 0 16px;
  color:#fff;
  font-size:clamp(30px,4.6vw,50px);
  line-height:1.08;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.ar-hero-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  color:rgba(255,255,255,.78);
  font-size:14px;
  margin-bottom:20px;
}
.ar-dot{font-size:18px;line-height:1}
.ar-share{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;color:rgba(255,255,255,.78);font-weight:700;
}
.ar-share-btn{
  display:inline-flex;align-items:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;font-weight:900;
  text-decoration:none;border:1px solid;
  font-family:inherit;
  transition:all .22s var(--ar-ease);
}
.ar-share-fb{color:#8fb3ff;border-color:#8fb3ff;background:transparent}
.ar-share-fb:hover{background:#4267B2;color:#fff;border-color:#4267B2}
.ar-share-li{color:#8dd2ff;border-color:#8dd2ff;background:transparent}
.ar-share-li:hover{background:#0077b5;color:#fff;border-color:#0077b5}
.ar-share-tw{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}
.ar-share-tw:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* Layout */
.ar-layout{padding:42px 0 62px;background:#fff}
.ar-grid{display:grid;gap:36px}
@media(min-width:900px){.ar-grid{grid-template-columns:1fr 310px;align-items:start}}
@media(min-width:1080px){.ar-grid{grid-template-columns:1fr 330px;gap:48px}}

.ar-featured-img{
  margin:0 0 28px;
  width:100%;
  aspect-ratio:16/7;
  overflow:hidden;
  border-radius:var(--ar-radius-lg);
  background:#1c375b;
  box-shadow:var(--ar-shadow-sm);
}
.ar-featured-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Prose */
.ar-prose{
  color:var(--ar-text);
  font-size:17px;
  line-height:1.9;
  max-width:74ch;
}
.ar-prose > *{scroll-margin-top:90px}
.ar-prose h2{
  margin:1.8em 0 .55em;
  font-size:clamp(22px,2.6vw,30px);
  color:var(--ar-brand);
  line-height:1.18;
  letter-spacing:-.015em;
  padding-bottom:8px;
  border-bottom:2px solid rgba(111,129,151,.2);
}
.ar-prose h3{
  margin:1.5em 0 .45em;
  font-size:clamp(19px,2.1vw,24px);
  color:var(--ar-brand);
  line-height:1.24;
  letter-spacing:-.01em;
}
.ar-prose h4{
  margin:1.25em 0 .35em;
  font-size:17px;
  color:var(--ar-brand);
}
.ar-prose p{margin:0 0 1.2em;color:#2a3f5c}
.ar-prose p:first-of-type{
  font-size:1.08em;
  color:#213651;
}
.ar-prose a{
  color:var(--ar-brand);
  text-decoration:underline;
  text-decoration-color:var(--ar-brand-2);
  text-decoration-thickness:1.5px;
  text-underline-offset:2px;
}
.ar-prose a:hover{color:#38597c}
.ar-prose ul,.ar-prose ol{
  padding-left:24px;margin:0 0 1.2em;line-height:1.9;color:#2a3f5c;
}
.ar-prose li{margin-bottom:6px}
.ar-prose blockquote{
  margin:1.5em 0;
  padding:18px 22px;
  background:linear-gradient(180deg,#f8fafd,#f3f7fb);
  border:1px solid rgba(111,129,151,.22);
  border-left:4px solid var(--ar-brand);
  border-radius:12px;
  color:#4d6280;
  font-style:italic;
  font-size:15px;
}
.ar-prose blockquote p{margin:0}
.ar-prose code{
  background:#eef2f7;
  padding:2px 7px;
  border-radius:6px;
  font-size:.9em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;
  color:#1f3a5d;
}
.ar-prose pre{
  background:#162d48;
  color:#f4f8ff;
  padding:18px 20px;
  border-radius:12px;
  overflow-x:auto;
  margin:1.3em 0;
  font-size:14px;
  line-height:1.7;
  box-shadow:0 8px 24px rgba(11,28,50,.18);
}
.ar-prose pre code{background:none;padding:0;color:inherit}
.ar-prose img{
  max-width:100%;
  height:auto;
  display:block;
  margin:1.5em auto;
  border-radius:12px;
}
.ar-prose table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:1.4em 0;
  font-size:14px;
  border:1px solid rgba(111,129,151,.24);
  border-radius:12px;
  overflow:hidden;
}
.ar-prose table th{
  background:var(--ar-brand);
  color:#fff;
  padding:11px 12px;
  text-align:left;
  font-weight:800;
}
.ar-prose table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(111,129,151,.16);
}
.ar-prose table tr:nth-child(even) td{background:#f7f9fc}
.ar-prose table tr:last-child td{border-bottom:none}
.ar-prose hr{
  border:none;
  border-top:1px solid rgba(111,129,151,.28);
  margin:2.2em 0;
}

/* Tags + share */
.ar-tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:34px;padding-top:22px;
  border-top:1px solid rgba(111,129,151,.22);
  font-size:13px;color:var(--ar-muted);font-weight:700;
}
.ar-tag{
  padding:5px 12px;
  border-radius:999px;
  background:#f4f7fb;
  border:1px solid rgba(111,129,151,.3);
  color:var(--ar-brand);
  font-size:12px;font-weight:800;
}
.ar-foot-share{
  margin-top:34px;
  padding:22px;
  border-radius:var(--ar-radius);
  background:#f7f9fc;
  border:1px solid rgba(111,129,151,.22);
}
.ar-foot-share p{
  margin:0 0 12px;
  font-size:15px;
  font-weight:800;
  color:var(--ar-brand);
}
.ar-foot-share .ar-share{color:var(--ar-muted)}
.ar-foot-share .ar-share-tw{color:var(--ar-brand);border-color:var(--ar-brand)}
.ar-foot-share .ar-share-tw:hover{background:var(--ar-brand);color:#fff}

/* Sidebar */
.ar-sidebar{display:grid;align-content:start;gap:20px}
.ar-sidebar-card{
  padding:20px;
  border:1px solid rgba(111,129,151,.26);
  border-radius:var(--ar-radius);
  background:#fff;
  box-shadow:var(--ar-shadow-sm);
}
.ar-sidebar-card h3{
  margin:0 0 16px;
  padding-bottom:10px;
  border-bottom:2px solid var(--ar-brand);
  color:var(--ar-brand);
  font-size:15px;
  font-weight:900;
  letter-spacing:.01em;
}
.ar-cta-card{
  background:linear-gradient(145deg,#172f4d 0%,#1c375b 60%,#244469 100%);
  border-color:#1c375b;
}
.ar-cta-card h3{color:#fff;border-bottom-color:rgba(255,255,255,.24)}
.ar-cta-card>p{
  margin:0 0 16px;
  color:rgba(255,255,255,.84);
  font-size:14px;
  line-height:1.7;
}
.ar-cta-btn{
  display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 16px;border-radius:10px;
  color:var(--ar-brand);background:#fff;border:1px solid #fff;
  font-size:14px;font-weight:900;text-decoration:none;font-family:inherit;
  transition:all .22s var(--ar-ease);
}
.ar-cta-btn:hover{background:var(--ar-brand-2);border-color:var(--ar-brand-2);color:#fff}
.ar-cta-note{margin:10px 0 0;color:rgba(255,255,255,.62);font-size:12px;text-align:center}

.ar-cat-list{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.ar-cat-list li a{
  display:block;padding:9px 12px;
  color:var(--ar-brand);
  font-size:14px;font-weight:700;text-decoration:none;
  background:#f6f8fc;
  border-left:3px solid transparent;
  border-radius:8px;
  transition:all .2s var(--ar-ease);
}
.ar-cat-list li a:hover,
.ar-cat-list li a.active{
  background:rgba(28,55,91,.08);
  border-left-color:var(--ar-brand);
}

.ar-related-list{display:grid;gap:14px}
.ar-related-item{
  display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:start;
  text-decoration:none;padding-bottom:14px;border-bottom:1px solid rgba(111,129,151,.18);
}
.ar-related-item:last-child{border-bottom:none;padding-bottom:0}
.ar-related-item img{
  width:56px;height:56px;object-fit:cover;display:block;border-radius:8px;
}
.ar-related-placeholder{
  width:56px;height:56px;border-radius:8px;
  background:#1c375b;color:rgba(255,255,255,.45);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;
}
.ar-related-item strong{
  display:block;color:var(--ar-brand);font-size:13px;line-height:1.35;font-weight:800;
}
.ar-related-item time{display:block;color:var(--ar-muted);font-size:12px;margin-top:3px}
.ar-related-item:hover strong{color:#3b5d81;text-decoration:underline}

.ar-back-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--ar-brand);
  font-size:14px;font-weight:800;text-decoration:none;padding:10px 0;
}
.ar-back-link:hover{color:#3b5d81}

/* Focus + motion */
a:focus-visible{
  outline:2px solid var(--ar-brand-2);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}