/* Custom CSS on top of Tailwind: things utilities cannot express well. */

/* Shared components (Tailwind utilities via @apply are unavailable with the CDN, so plain CSS). */
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 9999px; transition: background-color .2s, color .2s; }
.icon-btn:hover { background: rgba(0,0,0,.06); color: #DE5028; }
.dark .icon-btn:hover { background: rgba(255,255,255,.08); color: #FF7A45; }
.icon-btn svg { width: 22px; height: 22px; }

.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; font-weight: 600; font-size: 15px; border-radius: 9999px; transition: background-color .2s, color .2s, box-shadow .2s; }
.btn svg { width: 18px; height: 18px; }

.kicker { font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; color: #DE5028; }
.dark .kicker { color: #FF7A45; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid #D3D9E8; }
.dark .section-head { border-color: #1A2745; }
.section-title { font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 800; font-size: clamp(32px, 4vw, 48px); line-height: 1; text-transform: uppercase; display: flex; align-items: baseline; gap: 14px; }
.section-num { font-size: .5em; letter-spacing: .1em; color: #DE5028; }
.dark .section-num { color: #FF7A45; }

.link-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; white-space: nowrap; flex: none; font-weight: 600; font-size: 14px; color: #475569; transition: color .2s; }
.dark .link-more { color: #C3CBDB; }
.link-more:hover { color: #DE5028; }
.link-more svg { transition: transform .2s; }
.link-more:hover svg { transform: translateX(3px); }

.sidebar-title { font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 10px; }
.sidebar-title::before { content: ""; width: 4px; height: 20px; background: #DE5028; border-radius: 2px; }

.footer-title { font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .1em; color: #64748B; margin-bottom: 12px; }
.dark .footer-title { color: #8A95AD; }

/* SVG defaults: outline icons */
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.filled, .social svg { fill: currentColor; stroke: none; }

/* Focus */
:focus-visible { outline: 3px solid #FF7A45; outline-offset: 3px; border-radius: 4px; }

/* Ticker */
.ticker__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255,122,69,.25); animation: pulse 1.6s infinite; }
.ticker__viewport { mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker__track { animation: ticker 70s linear infinite; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__track li { white-space: nowrap; }
.ticker__track li::before { content: "◆"; color: #DE5028; font-size: 8px; margin-right: 10px; vertical-align: 2px; }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(255,122,69,0); } }

/* Background glow (dark only) */
.dark .dark\:bg-hero-glow {
  background-image: radial-gradient(1200px 600px at 100% -10%, rgba(222,80,40,.14), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(39,54,90,.5), transparent 60%);
  background-attachment: fixed;
}

/* Drawer */
.drawer__panel { animation: slide-in 250ms cubic-bezier(.2,.7,.2,1); }
@keyframes slide-in { from { transform: translateX(30px); opacity: 0; } }
.drawer__list > li { border-bottom: 1px solid #D3D9E8; }
.dark .drawer__list > li { border-color: #1A2745; }
.drawer__list a, .drawer__list summary { display: flex; align-items: center; min-height: 48px; padding: 8px 4px; font-weight: 600; font-size: 17px; }
.drawer__list summary { list-style: none; justify-content: space-between; cursor: pointer; }
.drawer__list summary::-webkit-details-marker { display: none; }
.drawer__list summary svg { width: 18px; height: 18px; transition: transform .2s; }
.drawer__list details[open] summary svg { transform: rotate(180deg); }
.drawer__list details ul { padding: 0 0 8px 16px; }
.drawer__list details ul a { font-weight: 500; font-size: 15px; min-height: 44px; opacity: .85; }

/* Nav dropdown */
.nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }

/* Feed numbering */
.feed { counter-reset: n; }
.feed li { counter-increment: n; }
.feed li::before { content: counter(n, decimal-leading-zero); font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 800; font-size: 20px; line-height: 1; color: #DE5028; padding-top: 2px; }
.dark .feed li::before { color: #FF7A45; }

/* Columns numbering */
.columns { counter-reset: c; }
.columns a { counter-increment: c; }
.columns a::before { content: counter(c, decimal-leading-zero); position: absolute; right: 14px; bottom: -8px; font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 800; font-size: 56px; line-height: 1; color: #E9ECF4; transition: color .2s; }
.dark .columns a::before { color: #1A2745; }
.columns a:hover::before { color: rgba(222,80,40,.3); }

/* Centenary */
.centenary::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-55deg, rgba(255,255,255,.06) 0 22px, transparent 22px 44px); pointer-events: none; }
.centenary__years { -webkit-text-stroke: 2px rgba(255,255,255,.9); color: transparent; }
.centenary__years span { -webkit-text-stroke: 0; color: #fff; font-size: .5em; vertical-align: .25em; margin: 0 .1em; }

/* Rail scrollbar */
.rail { scrollbar-width: thin; scrollbar-color: #27365A transparent; }

/* Ad placeholder */
.ad { display: grid; place-items: center; border: 1px dashed #B9C2D6; border-radius: 12px; color: #64748B; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 10px, transparent 10px 20px); }
.dark .ad { border-color: #27365A; color: #8A95AD; background: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 10px, transparent 10px 20px); }

/* Switch */
.switch { appearance: none; width: 40px; height: 22px; border-radius: 9999px; background: #CBD5E1; position: relative; cursor: pointer; transition: background .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch:checked { background: #DE5028; }
.switch:checked::after { transform: translateX(18px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}