/* ==========================================================================
   Curious Inkling — Single CSS (Dark Theme Only)
   - Videos allowed on phones (no small-screen hide)
   - Reduced motion users still get posters (videos hidden)
   - Strict mobile containment to prevent horizontal scrolling
   ========================================================================== */

/* ------------------ */
/* Design Tokens      */
/* ------------------ */
:root{
  /* Core palette */
  --ci-black: #0a0a0a;
  --ci-white: #ffffff;
  --ci-gold:  #ffd000;

  /* Surfaces & lines */
  --surface:   #121212;               /* card bg */
  --surface-2: #161616;               /* hover/elevated */
  --line:      rgba(255,255,255,.08); /* subtle borders */

  /* Text */
  --ink:   var(--ci-white);           /* default text on black */
  --muted: rgba(255,255,255,.75);

  /* Layout & radius */
  --maxw:1100px;
  --r-lg:20px;
  --r-xl:20px;

  /* Shadows */
  --shadow-soft:0 6px 18px rgba(0,0,0,.28);
  --shadow-lift:0 12px 30px rgba(0,0,0,.35);

  /* Type scale (fluid) */
  --step--1: clamp(.83rem, .80rem + .2vw, .92rem);
  --step-0:  clamp(1rem, .92rem + .5vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1.2vw, 2rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 2.8rem);
  --step-4:  clamp(2.4rem, 2rem + 3vw, 3rem);

  /* Default darkening for moving backgrounds (0..1) */
  --tile-overlay: .55;
}

/* ------------------ */
/* Global Reset       */
/* ------------------ */
* { box-sizing: border-box; }
html, body { height: 100%; width:100%; max-width:100%; overflow-x: clip; }
img, video, svg, canvas { max-width: 100%; height: auto; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--ci-black);
  position: relative;
  color-scheme: dark;
}
body::before, body::after{ content:none !important; }

/* Main container */
main{
  max-width: var(--maxw);
  margin: 2rem auto;
  padding: 0 clamp(12px, 3vw, 28px);
}

/* ------------------ */
/* Header / Nav       */
/* ------------------ */
.site-header{
  position: sticky; top:0; z-index:1000;
  background: rgba(0,0,0,.6);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex; align-items:center; gap:20px;
  flex-wrap: wrap;                 /* let it wrap on phones */
  min-width: 0;
}
.logo-header{
  height: clamp(56px, 12vw, 96px);
  width:auto; display:block; max-width:100%;
}
.nav{
  display:flex; gap: clamp(10px, 3vw, 22px);
  margin-left:auto;
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: wrap;
  min-width: 0;
}
.nav a{
  color: var(--ci-white);
  text-decoration:none;
  font-weight:600;
  opacity:.95;
  transition: opacity .15s ease, color .15s ease;
  white-space: nowrap;
  font-size: clamp(.9rem, 3.5vw, 1rem);
}
.nav a:hover{ color: var(--ci-gold); opacity:1; }
@media (max-width: 520px){
  .nav{ width:100%; justify-content:center; gap:14px; margin-left:0; }
}

/* ------------------ */
/* Buttons            */
/* ------------------ */
.btn{
  display:inline-block; padding:.7rem 1.05rem; border-radius:999px;
  font-weight:700; text-decoration:none;
  transition: transform .1s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  border:1px solid var(--line);
}
.btn:hover{ transform: translateY(-1px); }
.btn.primary{
  background: var(--ci-gold);
  color: #1a1a1a;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(255,208,0,.18);
}
.btn.primary:hover{ box-shadow: 0 10px 26px rgba(255,208,0,.24); }
.btn.ghost{
  background: rgba(255,255,255,.08);
  color: var(--ci-white);
  border: 1px solid var(--line);
}
.btn.ghost:hover{ background: rgba(255,255,255,.14); }

/* ------------------ */
/* Hero               */
/* ------------------ */
.hero{
  position:relative;
  padding: clamp(2rem, 6vw, 4rem) 1rem clamp(1rem, 4vw, 1.5rem);
  text-align:center;
  overflow:hidden;
  color: var(--ci-white);
}
.kicker{
  font-size: var(--step--1);
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:.9;
}
.hero h1{
  font-size: var(--step-4);
  line-height:1.1;
  margin:.4rem auto .8rem;
  max-width: 22ch;
  color: var(--ci-gold);
}
.hero p{
  font-size: var(--step-1);
  color: var(--muted);
  max-width: 55ch;
  margin: 0 auto 1.2rem;
}
.cta{ display:flex; gap: clamp(.5rem, 2vw, 1rem); justify-content:center; flex-wrap:wrap; }

/* Accent blobs */
.bg-blob, .bg-blob-2{
  position:absolute; filter:blur(40px); opacity:.35; z-index:-1;
  pointer-events:none; transform:translateZ(0);
}
.bg-blob{
  width:520px; height:520px; left:-120px; top:-160px;
  background:radial-gradient(circle at 40% 40%, #a7e8ff, rgba(167,232,255,0) 60%);
  animation:floaty 18s ease-in-out infinite alternate;
}
.bg-blob-2{
  width:520px; height:520px; right:-140px; top:-100px;
  background:radial-gradient(circle at 60% 60%, #ffe29b, rgba(255,226,155,0) 60%);
  animation:floaty2 22s ease-in-out infinite alternate;
}
@keyframes floaty{from{transform:translate(0,0)} to{transform:translate(30px,20px)}}
@keyframes floaty2{from{transform:translate(0,0)} to{transform:translate(-20px,30px)}}
@media (prefers-reduced-motion: reduce) {
  .hero .bg-blob, .hero .bg-blob-2 { display: none; }
}

/* Split hero layout */
.hero-split .hero-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 28px);
  display: grid;
  grid-template-columns: 1fr;               /* phones: stack */
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  min-width: 0;
}
.hero-split .hero-copy{ text-align: center; }
.hero-split .hero-art{ margin: 0; }
.hero-split .hero-art img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 640px;
  margin-inline: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 68.75em){ /* ≈1100px */
  .hero-split { text-align: left; }
  .hero-split .hero-inner{ grid-template-columns: 1.05fr .95fr; }
  .hero-split .hero-copy{ text-align: left; }
  .hero-split .cta{ justify-content: flex-start; }
}

/* Hero background video (full-bleed) — allowed on phones */
.hero .hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  z-index: -2;                        /* behind blobs + content */
}
.hero.has-video::after{               /* readability overlay */
  content:""; position:absolute; inset:0;
  background: rgb(0 0 0 / .35);
  z-index:-1;
}
@media (prefers-reduced-motion: reduce){
  .hero .hero-bg{ display:none !important; }
}

/* ------------------ */
/* Grid & Tiles       */
/* ------------------ */
.grid{
  display: grid;
  gap: clamp(.75rem, 2.5vw, 1.25rem);
  grid-template-columns: 1fr;         /* phone-first */
  inline-size: 100%;
  max-inline-size: 100%;
  min-width: 0;
}
@media (min-width: 48em){            /* ~768px → 2 cols */
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 68.75em){         /* ~1100px → 3 cols */
  .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Base card */
.tile{
  position: relative;
  overflow: hidden;
  isolation: isolate;                 /* keep layering self-contained */
  padding: clamp(.85rem, 2.5vw, 1.1rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
}

/* Video as true background layer */
.tile .tile-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  /* Dim the video itself, tied to overlay var */
  filter: brightness(calc(1 - var(--tile-overlay, .55)));
}

/* Overlay above video, below text */
.tile.has-video::before,
.tile.has-gif::before{
  content:""; position:absolute; inset:0;
  z-index:1; pointer-events:none;
  background: rgba(0,0,0, var(--tile-overlay, .55));
}

/* Elevate content, never the <video> */
.tile.has-video > :not(video),
.tile.has-gif  > *{
  position:relative; z-index:2;
}

/* Text colors on moving/dark backgrounds */
.tile.has-video h3, .tile.has-video p,
.tile.has-gif  h3, .tile.has-gif  p { color:#fff; }
.tile .tag{
  display:inline-block; font-size:.72rem; color:#121212;
  background: var(--ci-gold); padding:.25rem .55rem; border-radius:999px;
}

/* GIF fallback tiles (if used) */
.tile.has-gif{ /* no extra rules needed; overlay handles readability */ }

/* Reduced motion: hide videos, posters still show via CSS bg */
@media (prefers-reduced-motion: reduce){
  .tile .tile-bg{ display:none !important; }
}

/* ------------------ */
/* Footer             */
/* ------------------ */
.site-footer{
  margin-top: 60px;
  padding: 32px 16px 40px;
  background: rgba(0,0,0,.8);
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.footer-inner{ max-width:1100px; margin:0 auto; text-align:center; }
.logo-footer{ height:34px; width:auto; display:inline-block; margin-bottom:10px; }


@media (max-width: 640px){
  .brand{ flex: 0 0 100%; display:block; }   /* logo row */
  .logo-header{
    display:block;
    width: 100%;
    height: auto;          /* scale by width */
    max-width: 100%;
  }
  .nav{ flex:0 0 100%; margin-left:0; justify-content:center; }
}


.banner-header { position: relative; z-index: 1000; }
.banner{
  position: relative;
  /* Choose ONE of the height strategies below */

  /* A) fluid height up to ~350px (recommended) */
  height: clamp(200px, 28vw, 350px);

  /* OR B) exact fixed height:
  height: 350px;
  */

  overflow: hidden;
}
.banner-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Top-left nav on the banner */
.banner-nav{
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: flex; gap: 14px; align-items: center;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(0,0,0,.35);
  backdrop-filter: saturate(120%) blur(6px);
  border: 1px solid rgba(255,255,255,.08);
}
.banner-nav a{
  color:#fff; text-decoration:none; font-weight:600;
  font-size: clamp(.9rem, 2.8vw, 1rem);
}
.banner-nav a:hover{ color: var(--ci-gold); }

/* Gentle readability gradient over the art (optional) */
.banner::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.05));
}

/* Mobile containment */
@media (max-width: 640px){
  .banner-nav{ gap: 12px; padding: 6px 10px; left: 10px; }
}


/* Constrain the header banner to content width (matches hero/main) */
.banner-header{ padding: 0 clamp(12px, 3vw, 28px); }   /* page gutters */
.banner{
  max-width: var(--maxw);        /* same cap as your hero/content */
  margin: 0 auto;                /* center it */
  height: clamp(160px, 22vw, 180px);  /* height: clamp(160px, 22vw, 280px); */
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;            /* keeps nav overlay positioned */
}

/* Banner image still fills the banner box */
.banner-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* Keep the top-left nav overlay working */
.banner-nav{
  position:absolute; top:12px; left:12px; z-index:2;
  display:flex; gap:14px; align-items:center;
  padding:6px 10px; border-radius:999px;
  background:rgba(0,0,0,.35);
  backdrop-filter:saturate(120%) blur(6px);
  border:1px solid rgba(255,255,255,.08);
}
.banner-nav a{ color:#fff; text-decoration:none; font-weight:600; }
.banner-nav a:hover{ color:var(--ci-gold); }