/* ----- Fonts -----
   Display: Unbounded (Google Fonts, free) — loaded via <link> in index.html.
   Body:    Akkurat — user-supplied .woff in assets/fonts/, falls back to Inter. */
@font-face {
  font-family: 'Akkurat';
  src: url('assets/fonts/Akkurat.woff') format('woff');
  font-weight: 100 900;
  font-display: swap;
}

/* ----- Design tokens ----- */
:root {
  /* brand */
  --color-white:       #FFFFFF;
  --color-black:       #000000;
  --color-orange:      #C6783E;
  --color-mustard:     #E6BE66;
  --color-green-dark:  #4C532C;
  --color-green-light: #B7D58B;
  --color-blue-deep:   #000180;

  /* type */
  --font-display: 'Unbounded', 'Outfit', 'Manrope', system-ui, sans-serif;
  --font-body:    'Akkurat', 'Inter', system-ui, -apple-system, sans-serif;

  /* fluid type scale */
  --fs-h1:    clamp(2.25rem, 6vw, 3.5rem);
  --fs-h2:    clamp(1.75rem, 4vw, 2.5rem);
  --fs-body:  clamp(1rem, 1.5vw, 1.125rem);
  --fs-small: 0.875rem;

  /* spacing */
  --space-section: 4rem;          /* mobile */
  --space-section-lg: 6rem;       /* desktop */
  --content-max: 720px;

  /* Soft white halo to keep text legible where it overlaps the blob
     SVGs. White works over BOTH light and dark blobs, and is invisible
     over the white page background. A tight layer for separation plus
     softer spread so it reads as a gentle glow, not a hard outline. */
  --text-halo: 0 0 2px var(--color-white),
               0 0 6px var(--color-white),
               0 0 12px var(--color-white);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* iOS Safari needs this on html, not just body */
}
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* contain blob bleed without clipping section overflow */
  position: relative; /* establish containing block so off-screen blobs don't expand body width */
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ----- Typography ----- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 1rem;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
p  { margin: 0 0 1rem; }

/* ----- Layout helpers ----- */
.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
section {
  padding-block: var(--space-section);
  position: relative;
  /* No overflow clipping here — let parallaxing blobs extend past
     the section's box. body has overflow-x: hidden to absorb
     anything that sticks off the viewport edges. */
}
@media (min-width: 768px) {
  section { padding-block: var(--space-section-lg); }
}

/* ===== Hero ===== */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  /* No overflow clipping — body has overflow-x: hidden,
     and we want hero blobs to parallax smoothly past the hero edge. */
}
.hero__inner {
  width: 100%;
  display: grid;
  gap: 2rem;
}
.hero__content {
  text-align: center;
  position: relative;
  z-index: 2;
}
.hero__logo {
  width: clamp(260px, 72vw, 460px);
  max-width: 250px;
  height: auto;

  margin: 5rem auto 1.25rem;
}
.hero__tagline {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0 0 2.5rem;
}
.hero__blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Mobile blob placement — corners, partially clipped */
.blob--hero-1 { /* orange */
  position: absolute;
  width: 60vw; max-width: 320px;
  top: -10vw; right: -15vw;
  opacity: 0.85;
}
.blob--hero-2 { /* light green */
  position: absolute;
  width: 70vw; max-width: 380px;
  top: +20vw; left: -25vw;
  opacity: 0.85;
}
.blob--hero-3 { /* deep blue */
  position: absolute;
  width: 75vw; max-width: 400px;
  bottom: -20vw; right: -25vw;
  opacity: 0.95;
}

/* Button */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.875rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  border: none;
}
.btn--primary {
  background: var(--color-black);
  color: var(--color-white);
}
.btn--primary:hover { background: var(--color-green-dark); }
.btn:focus-visible {
  outline: 2px solid var(--color-blue-deep);
  outline-offset: 3px;
}

/* Desktop split layout */
@media (min-width: 768px) {
  .hero { min-height: 90vh; }
  .hero__inner {
    grid-template-columns: 45% 55%;
    align-items: center;
    gap: 0;
  }
  .hero__content {
    text-align: left;
    padding-right: 2rem;
  }
  .hero__logo {
    width: clamp(220px, 30vw, 360px);
    margin: 0 0 8rem;
    max-width: 220px;

  }
  .hero__tagline {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    margin: 0 0 2rem;
  }
  .hero__blobs {
    position: relative;
    inset: auto;
    height: 70vh;
  }
  /* Reposition the 3 blobs as a collage on the right half */
  .blob--hero-1 { /* orange — top right */
    width: 45%; max-width: none;
    top: 0; right: 5%; left: auto; bottom: auto;
  }
  .blob--hero-2 { /* light green — middle left of collage */
    width: 55%; max-width: none;
    top: 20%; left: -5%; right: auto; bottom: auto;
  }
  .blob--hero-3 { /* deep blue — bottom right */
    width: 50%; max-width: none;
    bottom: 0; right: 0; top: auto; left: auto;
  }
}

/* ===== Legal pages (privacy, terms) ===== */
.legal-header {
  padding: 2rem 1.5rem 1rem;
  text-align: center;
}
.legal-home {
  display: inline-block;
}
.legal-home img {
  width: 110px;
  height: auto;
}
.legal {
  padding-block: 1rem 4rem;
}
.legal h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 0.25rem;
}
.legal h2 {
  font-size: 1.25rem;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}
.legal p, .legal ul {
  font-size: 1.0625rem;
  color: var(--color-black);
}
.legal ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.legal li { margin-bottom: 0.25rem; }
.legal a {
  color: var(--color-orange);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.legal a:hover { color: var(--color-green-dark); }
.legal-effective {
  color: var(--color-green-dark);
  font-size: var(--fs-small);
  margin-bottom: 2rem;
}
.legal-back {
  margin-top: 3rem;
}

/* ===== Visually hidden (a11y) ===== */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===== Sections — base ===== */
.section { position: relative; }

/* Side blob accents (one per section, alternating sides) */
.blob--side {
  position: absolute;
  width: 50vw; max-width: 360px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
}
.blob--cta         { top: -6%;  left: -12vw; }
.blob--mission     { top: 10%;  right: -15vw; }
.blob--guidelines  { top: 5%;   right: -15vw; }
.blob--playground  { top: 5%;   left: -15vw; }
.blob--connect     { top: 10%;  left: -15vw; }

.section .container { position: relative; z-index: 1; }

/* Text legibility over blobs — white halo on copy that sits on the white
   page (hero tagline + section headings/paragraphs). Links inside
   paragraphs inherit it. Cards are excluded: they have solid colored
   backgrounds where a halo around white text would look fuzzy. */
.hero__tagline,
.section :is(h2, h3, p) {
  text-shadow: var(--text-halo);
}
.card :is(h2, h3, p) { text-shadow: none; }

/* Mission */
.section--mission p {
  font-size: 1.0625rem;
}

/* Early CTA — clean, centered conversion block right after the hero */
.section--cta { text-align: center; }
.cta {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta h2 { margin-bottom: 0.75rem; }
.cta__sub {
  font-size: 1.0625rem;
  max-width: 32ch;
  margin: 0 auto 2rem;
}
.cta__note {
  font-size: var(--fs-small);
  color: var(--color-green-dark);
  margin: 1.25rem 0 0;
}

/* "Life is weird" — a dark breath/pause moment that interrupts the
   white scroll. The dark band itself is the "interruption". */
.section--weird {
  background: var(--color-green-dark);
  color: var(--color-white);
  text-align: center;
  /* Sit above neighbouring sections' blobs (z-index:0) so none parallax
     into this clean dark band. */
  z-index: 1;
}
/* Dark background — the white text halo would only fuzz light text here. */
.section--weird :is(h2, h3, p) { text-shadow: none; }
.weird { max-width: 600px; }
.weird h2 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  margin-bottom: 1rem;
}
.weird__lead {
  font-size: 1.25rem;
  line-height: 1.5;
  max-width: 28ch;
  margin: 0 auto 2.5rem;
}
/* The autopilot loop — muted, stacked, fading in one-by-one (the stagger
   is intentional here: it reinforces the relentless rhythm). */
.weird__loop {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 auto 2.75rem;
}
.weird__loop span { display: block; }
/* The turn: rituu breaks the pattern — full white, preceded by a short
   accent line (the literal "small interruption"). */
.weird__turn {
  position: relative;
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 34ch;
  margin: 0 auto 1.5rem;
  padding-top: 2.5rem;
}
.weird__turn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-green-light);
}
.weird__close {
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  margin: 0;
}

/* Community / presence — a centred statement section. Builds to the
   "Less performance / More presence" closer as the visual payoff. */
.section--community {
  text-align: center;
  background: var(--color-mustard);
  /* Sit above neighbouring blobs so none parallax into this clean band. */
  z-index: 1;
}
/* Solid background — the white text halo would only fuzz the text here. */
.section--community :is(h2, h3, p) { text-shadow: none; }
.community { max-width: 620px; }
.community__neg {
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 1.5rem;
}
.community__lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.25;
  margin: 0 0 1.25rem;
}
.community__lead em {
  font-style: italic;
  color: var(--color-green-dark);
}
.community__when {
  font-size: 1.0625rem;
  color: rgba(0, 0, 0, 0.6);
  max-width: 36ch;
  margin: 0 auto 1.75rem;
}
.community__share {
  max-width: 38ch;
  margin: 0 auto;
}
.community__punch {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  line-height: 1.15;
  margin-top: 2.75rem;
}
.community__less {
  display: block;
  color: rgba(0, 0, 0, 0.4);   /* de-emphasised, but still legible on mustard */
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.community__more {
  display: block;
  color: var(--color-green-dark);
}

/* Subscribe block */
.section--subscribe { text-align: center; }
.subscribe__title { margin-bottom: 1rem; }
.subscribe__lead {
  font-size: 1.0625rem;
  max-width: 44ch;
  margin: 0 auto 1.75rem;
}
.subscribe__form {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.subscribe__form > .btn {
  display: block;
  margin-inline: auto;
}
.subscribe__form iframe {
  width: 100%;
  border: none;
  display: block;
}
.subscribe__notice {
  font-size: var(--fs-small);
  color: var(--color-green-dark);
  text-align: center;
  margin: 1rem auto 0;
  max-width: 520px;
}
.subscribe__notice a {
  color: var(--color-green-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.subscribe__notice a:hover { color: var(--color-orange); }

/* Community Guidelines */
.guidelines { text-align: center; }
.guidelines__rules {
  font-family: var(--font-display);
  font-size:  clamp(1.05rem, 4vw, 2rem);
  color: var(--color-orange);
  margin-block: 1rem 1.5rem;
}
.guidelines__sign {
  font-style: italic;
  color: var(--color-green-dark);
}

/* ===== "What is rituu" cards =====
   Horizontal scroll carousel. Mobile: snap + pagination dots (JS).
   Desktop: pure-CSS scroll — drag the scrollbar or use a trackpad,
   no JS involved. */
.cards {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;          /* each card ~85% wide so the next peeks in */
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;              /* MUST be explicit: with overflow-x:auto,
                                      a `visible` overflow-y computes to `auto`,
                                      adding a phantom vertical scroll that also
                                      hijacks horizontal trackpad gestures. */
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;           /* Firefox — hidden on mobile (dots instead) */
  cursor: grab;                    /* draggable via JS (drag-to-scroll) */
  /* bleed to the container edges so cards can sit flush with the inset */
  margin-inline: -1.5rem;
  padding-inline: 1.5rem;
}
/* Hide via zero-size (NOT display:none — toggling display:none→block
   leaves a visible-but-undraggable scrollbar in WebKit/Blink). */
.cards::-webkit-scrollbar { width: 0; height: 0; }
.cards.is-dragging { cursor: grabbing; }
.cards.is-dragging .card { user-select: none; }

.card {
  scroll-snap-align: start;
  padding: 1.75rem 1.5rem;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px white solid;
}
.card__num {
  font-family: var(--font-display);
  font-size: 1rem;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.25rem;
}
.card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.25rem;
}
.card__lead {
  font-weight: 500;
  margin: 0;
}
.card__body {
  font-size: 1rem;
  margin: 0;
}
.card__aside {
  font-style: italic;
  opacity: 0.85;
  margin: 0;
}
.card--1 { background: var(--color-green-light); color: var(--color-black); }
.card--2 { background: var(--color-mustard);     color: var(--color-black); }
.card--3 { background: var(--color-orange);      color: var(--color-white); }
.card--4 { background: var(--color-green-dark);  color: var(--color-white); }

/* Pagination dots (mobile only) */
.cards__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.cards__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--color-black);
  opacity: 0.2;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.cards__dot.is-active {
  opacity: 0.8;
  transform: scale(1.25);
}
.cards__dot:focus-visible {
  outline: 2px solid var(--color-blue-deep);
  outline-offset: 3px;
}

/* From small-tablet up, fix the card width so the carousel shows two
   full cards plus a peek of the third (signals there's more to scroll).
   Disable CSS scroll-snap on desktop: re-enabling it after a mouse drag
   makes the browser instantly jump to the nearest snap point (a visible
   "flick") and fights the JS smooth settle. On desktop the settle in
   main.js glides to the nearest card instead — no snap, no flick. */
@media (min-width: 600px) {
  .cards {
    grid-auto-columns: 300px;
    scroll-snap-type: none;
    /* Show a slim scrollbar on desktop so it can be dragged left/right
       (mouse) in addition to trackpad scrolling. */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
  }
  .cards::-webkit-scrollbar { height: 10px; }
  .cards::-webkit-scrollbar-track { background: transparent; }
  .cards::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 999px;
  }
  .cards::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.38); }
  /* Dots are a mobile affordance only — on desktop the peeking third
     card + the scrollbar signal there's more. */
  .cards__dots { display: none; }
}

/* ===== Reveal animations =====
   Non-blob elements fade up (opacity + translateY) with a transform
   transition. Blobs fade in opacity-only and DO NOT transition the
   transform — otherwise scroll-driven parallax updates would each
   ease over 0.6s and feel laggy.

   The transition-delay longhand MUST follow the transition shorthand
   within the same rule (the shorthand otherwise resets delay to 0). */
.reveal {
  opacity: 0;
}
.reveal:not(.blob) {
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.blob {
  transition: opacity 0.6s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible {
  opacity: 1;
}
.reveal.is-visible:not(.blob) {
  transform: translateY(0);
}

/* ===== Parallax (blobs only) ===== */
.blob {
  --parallax-y: 0px;
  transform: translate3d(0, var(--parallax-y), 0);
  will-change: transform;
}

/* Reduced motion — show everything immediately, no transitions */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible,
  .reveal:not(.blob),
  .reveal.is-visible:not(.blob) {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .blob {
    --parallax-y: 0px !important;
    transform: none;
    will-change: auto;
  }
  html { scroll-behavior: auto; }
}

/* Connect */
.section--connect { text-align: center; }
.section--connect a {
  color: var(--color-orange);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease;
}
.section--connect a:hover { color: var(--color-green-dark); }

/* Footer */
.footer {
  padding-block: 3rem 2rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  text-align: center;
}
.footer__mark {
  width: 90px;
  height: auto;
  margin: 0 auto 0.25rem;
}
.footer__meta {
  font-size: var(--fs-small);
  color: var(--color-green-dark);
  margin: 0;
}
.footer__links {
  font-size: var(--fs-small);
  margin: 0.75rem 0 0;
}
.footer__links a {
  color: var(--color-green-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.footer__links a:hover { color: var(--color-orange); }
.footer__credit {
  font-size: var(--fs-small);
  color: var(--color-green-dark);
  margin: 0.75rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1; /* match text box height to flag so align-items: center looks centered */
}
.footer__flag {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 2px;
  display: block;
  transform: translateY(-1px); /* optical alignment: text glyph center sits above line-box center */
}