/* ============================================================
   CITTA THEME — plain CSS (no build step)
   Extracted from rise.cittaai.com
   Usage:  <link rel="stylesheet" href="citta-theme.css">
   Fonts:  <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* brand */
  --ink:#0a0a0a;          /* near-black: text + dark sections            */
  --slate:#4a4a4a;        /* secondary body text                         */
  --mist:#f3f3f3;         /* light grey band / text on dark              */
  --fog:#fafafa;          /* default page background                     */
  --accent:#ff1f1f;       /* the red. eyebrows, numerals, CTAs           */
  --accent-deep:#d10000;  /* CTA hover                                   */

  /* alpha helpers (used for hairlines + muted text on dark) */
  --ink-10:rgba(10,10,10,.10);
  --ink-20:rgba(10,10,10,.20);
  --mist-70:rgba(243,243,243,.70);
  --mist-65:rgba(243,243,243,.65);
  --accent-50:rgba(255,31,31,.50);

  /* type */
  --font-display:"Oswald",-apple-system,"Segoe UI",sans-serif;  /* all headings, ALL CAPS */
  --font-body:"Outfit",-apple-system,"Segoe UI",sans-serif;     /* everything else */

  --text-sm:.875rem;  --text-base:1rem;   --text-lg:1.125rem; --text-xl:1.25rem;
  --text-2xl:1.5rem;  --text-3xl:1.875rem;--text-4xl:2.25rem;  --text-5xl:3rem;
  --text-6xl:3.75rem; --text-7xl:4.5rem;

  /* layout */
  --wrap:72rem;                                   /* max content width  */
  --gutter:clamp(1.25rem,5vw,4rem);               /* page side padding  */
  --section-y:clamp(4rem,10vw,7rem);              /* section vertical   */
  --radius:.375rem;                               /* buttons are barely rounded */
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  min-width:320px;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--fog);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
a{color:inherit;text-decoration:inherit}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
::selection{background:var(--accent);color:#fff}

/* ---------- 3. LAYOUT ---------- */
.section{padding-block:var(--section-y);padding-inline:var(--gutter)}
.wrap{max-width:var(--wrap);margin-inline:auto}

/* light bands — alternate these down the page */
.section--fog{background:var(--fog)}
.section--mist{background:rgba(243,243,243,.8)}
.section--mist-soft{background:rgba(243,243,243,.6)}

/* dark band — used for the two "statement" sections */
.section--ink{
  background:var(--ink);
  color:var(--mist);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
/* red glow inside a dark section. drop as first child: <div class="glow"></div> */
.glow{
  pointer-events:none;position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 50% at 85% 20%,rgba(255,31,31,.35),transparent 55%),
    radial-gradient(50% 40% at 10% 90%,rgba(209,0,0,.22),transparent 50%);
}

/* ---------- 4. TYPE ---------- */
/* small red all-caps label that sits above every section heading */
.eyebrow{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--text-sm);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
}
.eyebrow--slate{color:var(--slate)}

/* hero headline — huge, tight, condensed */
.headline{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:.9;
  font-size:clamp(3.75rem,14vw,8.5rem);
  max-width:14ch;
}

/* section headline */
.h2{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:var(--text-4xl);
  line-height:1.05;
  max-width:42rem;
}
.h3{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:var(--text-2xl);
}
.h3--lg{font-size:var(--text-3xl)}

.lead{font-size:var(--text-base);font-weight:500;color:var(--slate);max-width:36rem;line-height:1.625}
.body{font-size:var(--text-sm);font-weight:500;color:var(--slate);line-height:1.625}
.section--ink .lead{color:var(--mist-70)}
.section--ink .body{color:var(--mist-65)}
.prose{font-size:var(--text-lg);font-weight:500;color:var(--slate);line-height:1.625;max-width:48rem}
.balance{text-wrap:balance}
.accent{color:var(--accent)}
.mono-num{font-variant-numeric:tabular-nums}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);
  font-size:var(--text-sm);font-weight:700;
  letter-spacing:.025em;text-transform:uppercase;
  padding:.875rem 1.75rem;border-radius:var(--radius);
  transition:.15s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.btn--sm{padding:.5rem 1rem}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-deep)}
.btn--ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.section--ink .btn--ghost{color:var(--mist);border-color:var(--mist)}
.section--ink .btn--ghost:hover{background:var(--mist);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}

/* inline link with a red underline */
.link{
  font-weight:600;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--accent-50);
  text-underline-offset:4px;transition:.15s;
}
.link:hover{color:var(--accent)}
.section--ink .link{color:#fff}
.section--ink .link:hover{color:var(--accent)}

/* ---------- 6. HEADER / FOOTER ---------- */
/* header floats over the hero — the hero supplies its own top padding */
.site-header{position:absolute;inset-inline:0;top:0;z-index:20}
.site-header__inner{
  max-width:var(--wrap);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem var(--gutter);
}
.wordmark{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-xl);letter-spacing:.025em;text-transform:uppercase;
}
.wordmark--lg{font-size:var(--text-2xl)}

.site-footer{
  border-top:1px solid var(--ink-10);
  background:var(--fog);
  padding:3rem var(--gutter);
}
.site-footer__inner{
  max-width:var(--wrap);margin-inline:auto;
  display:flex;flex-direction:column;gap:1.5rem;
}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:100svh;
  padding:7rem var(--gutter) 4rem;
}
/* the signature background: white core, red bloom top-right, grey falloff */
.atmosphere{
  background:
    radial-gradient(85% 65% at 88% 8%,rgba(255,31,31,.28),transparent 52%),
    radial-gradient(60% 50% at 8% 92%,rgba(209,0,0,.14),transparent 48%),
    radial-gradient(45% 35% at 45% 45%,rgba(255,255,255,.85),transparent 70%),
    linear-gradient(160deg,#fff 0%,#f0f0f0 42%,#e4e4e4 100%);
}
/* giant rotated repeating word grid behind the hero */
.watermark{position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none;z-index:-1}
.watermark__grid{
  position:absolute;inset:-28%;
  display:flex;flex-direction:column;gap:1.6rem;
  transform:rotate(-16deg);opacity:.07;
}
.watermark__row{
  display:flex;gap:3.5rem;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.75rem,7vw,6.25rem);line-height:1;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}

/* date / meta chip stack in the hero corner */
.hero__meta{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.14em;font-weight:600;font-size:var(--text-sm);
}
.hero__date{
  font-family:var(--font-display);font-weight:700;line-height:.9;
  font-size:var(--text-5xl);letter-spacing:.02em;
}

/* ---------- 8. GRIDS ---------- */
.grid{display:grid;gap:2.5rem}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr}
.mt-block{margin-top:3.5rem}

/* ---------- 9. COMPONENTS ---------- */

/* 9a. Letter/stat card — giant red glyph, caps title, body */
.stat__glyph{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-6xl);line-height:1;color:var(--accent);
}
.stat__title{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-2xl);letter-spacing:.02em;text-transform:uppercase;
  margin-top:.75rem;
}
.stat__body{margin-top:.5rem;font-size:var(--text-sm);font-weight:500;color:var(--slate);line-height:1.625}
.section--ink .stat__body{color:var(--mist-65)}

/* 9b. Numbered step — 01 / 02 / 03 */
.step__num{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-base);letter-spacing:.05em;color:var(--accent);
}
.step__title{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-3xl);letter-spacing:.02em;text-transform:uppercase;
  margin-top:.75rem;
}
.step__body{margin-top:.5rem;font-size:var(--text-sm);font-weight:500;line-height:1.625;color:var(--mist-65)}
.section--fog .step__body,.section--mist .step__body{color:var(--slate)}

/* 9c. Timeline / schedule rows — hairline separated, red times */
.rows{margin-top:3.5rem}
.row{
  display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;
  padding-block:1rem;border-top:1px solid var(--ink-10);
}
.row:last-child{border-bottom:1px solid var(--ink-10)}
.row__key{
  font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);
  letter-spacing:.025em;color:var(--accent);font-variant-numeric:tabular-nums;
}
.row__val{font-size:var(--text-sm);font-weight:500;color:var(--slate)}
.row__val--strong{font-weight:700;color:var(--ink)}
.section--ink .row{border-color:rgba(243,243,243,.12)}
.section--ink .row__val{color:var(--mist-70)}

/* 9d. Feature card — thick red rule on top, no box */
.card{border-top:4px solid var(--accent);padding-top:1.5rem}
.card__label{
  font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);
  letter-spacing:.22em;text-transform:uppercase;color:var(--slate);
}
.card__figure{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-5xl);letter-spacing:.02em;margin-top:.75rem;
}
.card__note{margin-top:.75rem;font-size:var(--text-sm);font-weight:500;color:var(--slate)}

/* 9e. Caps criteria list with red arrow markers */
.marks{display:grid;gap:.75rem 1.5rem;margin-top:2.5rem}
.marks li{font-size:var(--text-sm);font-weight:700;letter-spacing:.025em;text-transform:uppercase}
.marks li::before{content:"\25B8";color:var(--accent);margin-right:.5rem}

/* 9f. Checklist with red dot bullets */
.checks{display:grid;gap:.75rem;margin-top:2rem}
.checks li{display:flex;align-items:center;gap:.75rem;font-size:var(--text-base);font-weight:500;color:var(--slate)}
.checks li::before{content:"";width:.625rem;height:.625rem;border-radius:999px;background:var(--accent);flex-shrink:0}
.section--ink .checks li{color:var(--mist-70)}

/* 9g. Hairline divider */
.rule{height:1px;background:var(--ink-10);border:0;margin-block:2.5rem}
.section--ink .rule{background:rgba(243,243,243,.15)}

/* 9h. Pill / tag */
.pill{
  display:inline-flex;align-items:center;border-radius:999px;
  padding:.375rem .875rem;font-family:var(--font-display);font-weight:600;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--ink-20);
}
.pill--accent{background:var(--accent);color:#fff;border-color:transparent}
.section--ink .pill{border-color:rgba(243,243,243,.25)}

/* ---------- 10. SCROLL REVEAL ---------- */
/* add class="reveal" to anything; the script at the bottom of the page fades it in */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- 11. BREAKPOINTS ---------- */
@media (min-width:40rem){
  .grid--2,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .marks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:48rem){
  .hero{justify-content:center;padding-top:8rem;padding-bottom:6rem}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .h2{font-size:var(--text-6xl)}
  .h3--lg{font-size:var(--text-3xl)}
  .stat__glyph{font-size:var(--text-7xl)}
  .card__figure{font-size:var(--text-6xl)}
  .hero__date{font-size:var(--text-6xl)}
  .lead{font-size:var(--text-lg)}
  .row{grid-template-columns:11rem 1fr;gap:2rem}
  .row__val{font-size:var(--text-base)}
  .site-footer__inner{flex-direction:row;align-items:flex-end;justify-content:space-between}
}
@media (min-width:64rem){
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}