/* ==========================================================
   Redline: blue, modern professional stylesheet
   Light page, navy panels. Manrope for display, Inter for reading.
   ========================================================== */

:root{
  /* Page: soft, almost-white with a whisper of blue */
  --bg:        #F5F8FC;
  --white:     #FFFFFF;
  --rule:      #DCE6F0;      /* hairline on the light page */

  /* Panels: hero and categories only */
  --panel:     #24466B;      /* medium navy, not harsh */
  --panel-2:   #2C557E;      /* cookie banner */
  --rule-panel:rgba(255,255,255,0.16);

  /* Text on the light page */
  --ink:       #1C2E42;
  --ink-soft:  #55697E;
  --ink-faint: #5A6F87;

  /* Text inside navy panels */
  --panel-soft:#C9D8E7;
  --panel-faint:#A4B8CB;

  /* Accent: blue family throughout, no gold */
  --accent:       #2A5F91;   /* on the light page */
  --accent-panel: #8FC1E8;   /* on navy panels */

  /* Nested mini-box inside the hero panel: a lighter shade of the same navy */
  --mini-box: #38638C;

  --display: 'Manrope', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;

  --t-xs:  0.8125rem;
  --t-sm:  0.9375rem;
  --t-base:1.0625rem;
  --t-md:  1.25rem;
  --t-lg:  1.5rem;
  --t-xl:  2rem;
  --t-2xl: 2.75rem;
  --t-3xl: 3.5rem;

  --measure: 40rem;
}

*{ box-sizing:border-box; }

html{ background-color:#F5F8FC; }

body{
  margin:0;
  background-color:#F5F8FC;
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-base);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

a{ color:inherit; }

.wrap{
  max-width:62rem;
  margin:0 auto;
  padding:0 1.75rem;
}

/* ---------- Masthead (light page) ---------- */

header.wrap{
  padding-top:2rem;
  padding-bottom:1.5rem;
  text-align:center;
}

.brand{
  display:inline-flex;
  align-items:baseline;
  gap:0.5rem;
  font-family:var(--display);
  font-weight:800;
  font-size:var(--t-lg);
  letter-spacing:0.01em;
  color:var(--accent);
  text-decoration:none;
}

.brand .dot{
  width:0.4rem;
  height:0.4rem;
  border-radius:50%;
  background:var(--accent);
  display:inline-block;
}

/* ---------- Hero (navy panel) ---------- */

.hero{
  padding:5rem 0 5.5rem;
  position:relative;
  text-align:center;
  background-color:var(--panel);
  border-radius:8px;
  overflow:hidden;
  max-width:62rem;
  margin:0 auto;
}

.orb{
  position:absolute;
  top:-40%;
  left:50%;
  transform:translateX(-50%);
  width:40rem;
  height:40rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(143,193,232,0.10) 0%, transparent 68%);
  pointer-events:none;
}

.hero-inner{ position:relative; z-index:1; }

.hero-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  width:fit-content;
  margin:0 auto;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.1rem, 6vw, 3.5rem);
  line-height:1.1;
  letter-spacing:-0.01em;
  color:#FFFFFF;
  opacity:0;
  animation:rise 0.8s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:0.15s;
}

@keyframes rise{
  from{ opacity:0; transform:translateY(0.6rem); }
  to{ opacity:1; transform:translateY(0); }
}

.hero-title-dot{
  width:0.5rem;
  height:0.5rem;
  min-width:0.5rem;
  border-radius:50%;
  background:#FFFFFF;
  display:inline-block;
}

@media (max-width:26rem){
  .hero-title-dot{ display:none; }
}

.hero-explainer{
  max-width:32rem;
  margin:2.25rem auto 0;
  background:var(--mini-box);
  border-radius:8px;
  padding:1.5rem 1.75rem;
  opacity:0;
  animation:rise 0.8s ease forwards;
  animation-delay:0.9s;
}
.hero-explainer p{
  font-family:var(--body);
  font-size:var(--t-sm);
  line-height:1.7;
  color:#D4E1EE;
  margin:0;
}

.hero-principle-box{
  display:inline-block;
  max-width:32rem;
  margin:1.5rem auto 0;
  background:#FFFFFF;
  border-radius:8px;
  padding:0.9rem 1.5rem;
  opacity:0;
  animation:rise 0.8s ease forwards;
  animation-delay:1.4s;
}
.hero-principle-box p{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:0.01em;
  font-size:var(--t-sm);
  color:#000000;
  margin:0;
}

.scroll-cue{ display:none; }

@media (prefers-reduced-motion: reduce){
  .hero-title, .hero-explainer, .hero-principle-box{
    opacity:1; animation:none; transform:none;
  }
}

/* ---------- Categories (navy panel) ---------- */

.categories{
  padding:0;
  margin:1.5rem 0 2rem;
}

.cat-eyebrow{ display:none; }

.cat-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.25rem;
}
@media (max-width:52rem){
  .cat-row{ grid-template-columns:1fr; }
}

.flow-arrow{ display:none; }

.cat-card{
  display:block;
  background-color:var(--panel);
  border-radius:8px;
  padding:2.25rem 2rem;
  text-decoration:none;
  color:#FFFFFF;
}

.cat-icon{
  width:1.4rem;
  height:1.4rem;
  margin-bottom:1.25rem;
  color:var(--accent-panel);
  opacity:0.9;
}

.cat-card h3{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--t-md);
  line-height:1.25;
  margin:0 0 0.6rem;
  color:#FFFFFF;
}

.cat-card p{
  font-family:var(--body);
  font-size:var(--t-xs);
  line-height:1.65;
  color:var(--panel-soft);
  margin:0 0 1rem;
}

.cat-go{
  font-family:var(--display);
  font-weight:600;
  font-size:var(--t-xs);
  color:var(--accent-panel);
  border-bottom:1px solid rgba(217,183,107,0.4);
  padding-bottom:1px;
}
.cat-card:hover .cat-go{ border-bottom-color:var(--accent-panel); }

/* ---------- Page headers (light page) ---------- */

.page-hero{
  background-color:var(--panel);
  border-radius:8px;
  max-width:62rem;
  margin:0 auto 1.5rem;
  padding:3rem 1.75rem 2.75rem;
}

.eyebrow{
  font-family:var(--display);
  font-weight:600;
  font-size:var(--t-xs);
  color:var(--panel-faint);
  margin-bottom:0.9rem;
}

h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem, 4.5vw, 2.75rem);
  line-height:1.18;
  letter-spacing:-0.01em;
  margin:0 0 0.9rem;
  max-width:20ch;
  color:#FFFFFF;
}

.page-sub{
  font-family:var(--body);
  font-size:var(--t-sm);
  line-height:1.7;
  color:var(--panel-soft);
  max-width:34rem;
  margin:0;
}

.essay-backlink{
  display:inline-block;
  font-family:var(--display);
  font-weight:600;
  font-size:var(--t-xs);
  color:var(--panel-faint);
  text-decoration:none;
}
.essay-backlink:hover{ color:var(--accent-panel); }

.section-label{
  font-family:var(--display);
  font-weight:600;
  font-size:var(--t-xs);
  color:var(--ink-faint);
  border-bottom:1px solid var(--rule);
  padding-bottom:0.7rem;
  margin-bottom:0;
}

/* ---------- Article list (light page) ---------- */

.article-card{
  display:block;
  background-color:var(--panel);
  border-radius:8px;
  padding:1.75rem 2rem;
  margin-bottom:1rem;
  text-decoration:none;
  color:#FFFFFF;
}
.article-card:hover h4{ color:var(--accent-panel); }

.article-date{
  display:block;
  font-family:var(--body);
  font-size:var(--t-xs);
  color:var(--panel-faint);
  margin-bottom:0.5rem;
}

.article-card h4{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--t-lg);
  line-height:1.25;
  margin:0 0 0.5rem;
  max-width:24ch;
  color:#FFFFFF;
  transition:color 0.15s ease;
}

.article-card p{
  font-family:var(--body);
  font-size:var(--t-sm);
  line-height:1.65;
  color:var(--panel-soft);
  margin:0;
  max-width:44rem;
}

.article-go{ display:none; }

.empty-state{
  background-color:var(--panel);
  border-radius:8px;
  padding:3.5rem 2rem;
  text-align:center;
}
.empty-state h4{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--t-md);
  margin:0 0 0.4rem;
  color:#FFFFFF;
}
.empty-state p{
  font-family:var(--body);
  font-size:var(--t-sm);
  color:var(--panel-soft);
  margin:0;
}

/* ---------- Essay body (light page) ---------- */

.essay-body,
.legal-body{
  max-width:var(--measure);
  padding:1rem 1.75rem 4rem;
}

.essay-byline{
  font-family:var(--body);
  font-size:var(--t-sm);
  color:var(--panel-soft);
  margin:0.4rem 0 0.9rem;
}

.essay-body p{
  font-family:var(--body);
  font-size:var(--t-base);
  line-height:1.75;
  color:#000000;
  margin:0 0 1.4rem;
}

.legal-body p{
  font-family:var(--body);
  font-size:var(--t-sm);
  line-height:1.75;
  color:var(--ink-soft);
  margin:0 0 1.4rem;
}

.essay-body > p:first-of-type{
  border-left:3px solid var(--accent);
  padding-left:1.1rem;
  font-size:1.15rem;
  color:#000000;
}

.essay-h2{
  display:flex;
  align-items:center;
  gap:0.7rem;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--t-md);
  line-height:1.3;
  color:#000000;
  margin:2.75rem 0 1rem;
}
.essay-h2 span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.6rem;
  height:1.6rem;
  padding:0 0.4rem;
  border-radius:999px;
  background-color:var(--panel);
  color:#FFFFFF;
  font-size:var(--t-xs);
  font-weight:700;
}

.essay-pullquote{
  font-family:var(--display);
  font-weight:600;
  font-size:var(--t-md);
  line-height:1.45;
  color:#FFFFFF;
  background-color:var(--mini-box);
  border-radius:8px;
  margin:2.25rem 0;
  padding:1.5rem 1.75rem;
  max-width:30rem;
}

.essay-table{
  width:100%;
  border-collapse:collapse;
  margin:1.5rem 0 2.25rem;
  font-family:var(--body);
}
.essay-table th{
  text-align:left;
  font-family:var(--display);
  font-size:var(--t-xs);
  font-weight:700;
  color:#FFFFFF;
  background-color:var(--panel);
  padding:0.7rem 1rem 0.7rem 0.85rem;
}
.essay-table th:first-child{ border-radius:8px 0 0 0; }
.essay-table th:last-child{ border-radius:0 8px 0 0; }
.essay-table td:first-child{ padding-left:0.85rem; }
.essay-table td{
  font-size:var(--t-sm);
  color:var(--ink-soft);
  padding:0.85rem 1rem 0.85rem 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.essay-table td.accent-cell{ color:var(--accent); font-weight:600; padding-right:0; }

.essay-sup{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.05em;
  height:1.05em;
  padding:0 0.28em;
  border-radius:999px;
  background-color:#DCE9F5;
  font-family:var(--body);
  font-size:0.62em;
  font-weight:700;
  vertical-align:super;
  color:var(--accent);
  margin-left:0.15em;
}

.essay-sources{
  margin-top:3rem;
  background-color:#EAF1F8;
  border-radius:8px;
  padding:1.5rem 1.75rem;
}
.essay-sources h5{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--t-xs);
  color:#000000;
  margin:0 0 1rem;
}
.essay-sources ol{
  margin:0;
  padding-left:1.1rem;
  font-family:var(--body);
  font-size:var(--t-xs);
  line-height:1.75;
  color:#000000;
}
.essay-sources li{ margin-bottom:0.6rem; }
.essay-sources .src-url{ color:var(--ink-soft); word-break:break-word; }

.essay-tagline{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:0.01em;
  font-size:var(--t-sm);
  color:#000000;
  background:#FFFFFF;
  width:fit-content;
  text-align:center;
  margin:3rem auto 0;
  padding:0.9rem 1.75rem;
  border-radius:8px;
  box-shadow:0 1px 3px rgba(28,46,66,0.12);
}

.legal-list{
  font-family:var(--body);
  font-size:var(--t-sm);
  line-height:1.75;
  color:var(--ink-soft);
  padding-left:1.1rem;
  margin:0 0 1.4rem;
}
.legal-list li{ margin-bottom:0.5rem; }

.legal-link{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(156,117,50,0.4);
}
.legal-link:hover{ border-bottom-color:var(--accent); }

/* ---------- Footer (light page) ---------- */

footer.wrap{
  border-top:1px solid var(--rule);
  padding-top:3.5rem;
  padding-bottom:3.5rem;
  margin-top:2.5rem;
  text-align:center;
}

.footer-links{
  display:flex;
  justify-content:center;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-bottom:1.25rem;
}

.footer-link{
  font-family:var(--display);
  font-weight:600;
  font-size:var(--t-xs);
  color:var(--ink-faint);
  text-decoration:none;
}
.footer-link:hover{ color:var(--accent); }

footer p{
  font-family:var(--body);
  font-size:var(--t-xs);
  line-height:1.7;
  color:var(--ink-faint);
  margin:0 auto 0.4rem;
  max-width:34rem;
}
footer .footer-disclaimer{ opacity:0.85; }

/* ---------- Cookie banner: a light card, not a dark panel ---------- */

.cookie-banner{
  display:none;
  position:fixed;
  left:1rem; right:1rem; bottom:1rem;
  max-width:38rem;
  margin:0 auto;
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:1rem 1.15rem;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  box-shadow:0 12px 32px rgba(28,46,66,0.14);
  z-index:50;
}
.cookie-banner p{
  margin:0;
  font-family:var(--body);
  font-size:var(--t-xs);
  color:var(--ink-soft);
  flex:1;
  min-width:12rem;
}
.cookie-btn{
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent);
  padding:0.5rem 1.1rem;
  border-radius:4px;
  font-family:var(--display);
  font-weight:600;
  font-size:var(--t-xs);
  cursor:pointer;
}
.cookie-btn:hover{ background:var(--accent); color:#FFFFFF; }

/* ---------- Focus ---------- */

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}