/* ============================================================
   SEO Manager — core.css
   Site-wide "signal console" chrome: shared on EVERY page
   (articles, category pages, static pages, search, etc.)
   Article-only components live in article.css instead — don't
   add article-specific rules here. Fonts: Fraunces (display) ·
   Lora (reading) · JetBrains Mono (data/UI).

   Rules:
   - No text anywhere renders below 18px (accessibility + CWV).
   - Mobile-first: base rules target small screens; @media (min-width)
     progressively adds complexity for larger viewports. Nothing here
     relies on a max-width override to "undo" desktop styles.
   ============================================================ */

:root{
  --ink:        #080b14;
  --ink-2:      #10151f;
  --ink-line:   rgba(255,255,255,0.09);
  --ink-text:   #eef0f6;
  --ink-muted:  #99a1b6;
  --ink-dim:    #6c7488;

  --paper:      #f7f5ef;
  --paper-2:    #eeebe1;
  --paper-line: #e0dccf;
  --paper-text: #14161c;
  --paper-muted:#5f5e57;

  --accent:     #2f56ff;
  --accent-2:   #1638c9;
  --accent-soft:#a9b8ff;
  --signal:     #e9803a;

  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body:    'Lora', Georgia, serif;
  --f-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --header-height: 76px;
  --wrap-max: 1220px;  /* page frame — same as the homepage */
  --read-max: 50rem;   /* prose column — kept narrower for readability */

  /* type floor — nothing on the site should go below this
     (the header tagline is the one confirmed exception — see below) */
  --text-min: 1.125rem; /* 18px @ 16px root */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  background:var(--paper);color:var(--paper-text);
  font-family:var(--f-body);font-size:var(--text-min);line-height:1.6;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
h1,h2,h3{font-family:var(--f-display);font-weight:600;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1.25rem;z-index:1000;font-family:var(--f-mono);font-size:var(--text-min);}
.skip-link:focus{left:1rem;top:1rem;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

.container{max-width:var(--wrap-max);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem);}

/* ============ BUTTONS (generic — used by CTAs on any page) ============ */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);
  font-size:var(--text-min);font-weight:600;letter-spacing:.01em;padding:.9rem 1.7rem;
  border-radius:100px;transition:transform .2s,background .2s,border-color .2s,color .2s;
}
.btn-solid{background:var(--accent);color:#fff;}
.btn-solid:hover{background:var(--accent-2);}
.btn-ghost{border:1.5px solid var(--paper-line);color:var(--paper-muted);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-2);}

/* ============ HEADER / NAV (light — sits over page content, not a dark hero) ============
   Mobile-first: hamburger + off-canvas list is the DEFAULT. The full
   inline nav only appears once there's genuinely enough room (1100px+) —
   moved out from 901px after that width was confirmed to overflow. */
.site-header{
  position:sticky;top:0;z-index:300;background:rgba(247,245,239,0.94);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--paper-line);
  min-height:var(--header-height);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--header-height);padding:.6rem 0;}
.site-brand{display:flex;flex-direction:column;line-height:1.15;gap:2px;}
.site-name{font-family:var(--f-display);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;color:var(--paper-text);}
.site-name em{font-style:normal;color:var(--accent-2);}
/* Confirmed exception to the 18px floor — shrunk so it stays on one line under the logo. */
.site-tagline{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.02em;text-transform:uppercase;color:var(--paper-muted);white-space:nowrap;}

.primary-nav{display:none;}
.nav-toggle{display:flex;background:none;border:0;width:40px;height:36px;flex-direction:column;justify-content:center;gap:6px;cursor:pointer;}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--paper-text);transition:transform .2s,opacity .2s;}
.nav-toggle.is-active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.is-active span:nth-child(2){opacity:0;}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

.mobile-nav{
  position:fixed;top:var(--header-height);left:0;right:0;z-index:290;
  background:var(--paper);border-bottom:1px solid var(--paper-line);
  transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform .2s,opacity .2s;
}
.mobile-nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto;}
.mobile-nav-list{display:flex;flex-direction:column;padding:.5rem 0;}
.mobile-nav-list a{display:block;padding:.9rem 1.5rem;font-family:var(--f-mono);font-size:var(--text-min);color:var(--paper-text);border-bottom:1px solid var(--paper-line);}

@media (min-width:1100px){
  .primary-nav{display:block;}
  .nav-toggle{display:none;}
  .mobile-nav{display:none;}

  .primary-nav .nav-list{display:flex;align-items:center;gap:0;flex-wrap:nowrap;}
  .primary-nav .nav-list a{
    font-family:var(--f-mono);font-size:var(--text-min);font-weight:500;letter-spacing:.01em;
    padding:.5rem .55rem;border-radius:5px;color:var(--paper-muted);transition:color .2s,background .2s;
    white-space:nowrap;
  }
  .primary-nav .nav-list a:hover{color:var(--paper-text);background:var(--paper-2);}
  .nav-contact a{
    font-family:var(--f-mono) !important;font-weight:600 !important;color:#fff !important;
    background:var(--ink);border-radius:100px;padding:.5rem .9rem !important;margin-left:.3rem;
    transition:background .2s !important;
  }
  .nav-contact a:hover{background:var(--accent-2) !important;}
}

/* ============ FOOTER (dark — shared with homepage) ============ */
.site-footer{background:var(--ink-2);color:var(--ink-muted);padding:4rem 0 2rem;border-top:1px solid var(--ink-line);margin-top:4.5rem;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.25rem;margin-bottom:2.75rem;}
.footer-brand-col .site-name{color:var(--ink-text);}
.footer-brand-col .site-name em{color:var(--accent-soft);}
.footer-tagline{font-family:var(--f-mono);font-size:.95rem;letter-spacing:.03em;color:var(--ink-dim);margin:.6rem 0 1rem;}
.footer-bio{font-size:1.05rem;line-height:1.7;color:var(--ink-dim);max-width:32ch;}
.footer-col-title{font-family:var(--f-mono);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:1rem;display:block;}
.footer-nav-list, .footer-social-list{display:flex;flex-direction:column;gap:.65rem;}
.footer-nav-list a, .footer-social-list a{font-size:1.05rem;color:var(--ink-muted);transition:color .2s;}
.footer-nav-list a:hover, .footer-social-list a:hover{color:var(--ink-text);}
.footer-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;padding-top:1.75rem;border-top:1px solid var(--ink-line);}
.footer-legal{display:flex;gap:1.5rem;flex-wrap:wrap;}
.footer-legal a{font-family:var(--f-mono);font-size:1rem;color:var(--ink-dim);}
.footer-legal a:hover{color:var(--ink-text);}
.footer-copyright{font-family:var(--f-mono);font-size:1rem;color:var(--ink-dim);}

@media (min-width:641px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-bottom{flex-direction:row;justify-content:space-between;align-items:center;}
}
@media (min-width:981px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;}
}

#scroll-to-top{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:250;width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:#fff;border:0;font-size:1.2rem;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s,background .2s;
}
@media (min-width:641px){
  #scroll-to-top{right:1.5rem;bottom:1.5rem;}
}
#scroll-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
#scroll-to-top:hover{background:var(--accent-2);}

/* ============ GENERIC PAGE CONTENT (static/legal pages, no lede/related — article.css not needed) ============
   For pages that just have a title + prose body: Contact, Privacy, Cookie,
   T&C, category intros. Mobile-first, matches the article's prose sizing
   without pulling in article.css's lede/related-card CSS. */
.page-wrap{padding:2.5rem 0 4rem;}
.page-layout{max-width:var(--wrap-max);margin:0 auto;}
.page-header{margin-bottom:2.25rem;padding-bottom:1.75rem;border-bottom:1px solid var(--paper-line);}
.page-eyebrow{font-family:var(--f-mono);font-size:var(--text-min);color:var(--paper-muted);margin-bottom:.75rem;display:block;}
.page-title{font-size:clamp(2rem,5.5vw,2.85rem);line-height:1.12;letter-spacing:-.02em;}
.page-content{font-size:1.2rem;max-width:46rem;}
.page-content > * + *{margin-top:1.4rem;}
.page-content p{line-height:1.8;color:var(--paper-text);}
.page-content h2{font-size:clamp(1.35rem,3.2vw,1.7rem);letter-spacing:-.015em;margin-top:2.5rem !important;}
.page-content h3{font-size:1.2rem;letter-spacing:-.01em;margin-top:1.9rem !important;}
.page-content ul{list-style:disc;padding-left:1.5rem;display:flex;flex-direction:column;gap:.6rem;}
.page-content ul li{line-height:1.75;}
.page-content strong{font-weight:700;}
.page-content a{color:var(--accent-2);text-decoration:underline;text-decoration-color:var(--paper-line);text-underline-offset:3px;}
.page-content a:hover{text-decoration-color:currentColor;}