/* ============================================================
   Close Ties · waitlist site
   Tokens from the Close Ties design system, layout mobile-first
   (390px design frame) widening to desktop at 720px / 1024px.
   ============================================================ */

/* ---- Tokens ---- */
:root{
  /* Crimson */
  --crimson-900:#3C0F1E;
  --crimson-800:#4E1728;
  --crimson-700:#6D243A;
  --crimson-600:#8A3450;
  --crimson-100:#F4E5EA;

  /* Sky */
  --sky-600:#8CBDF3;
  --sky-500:#B7D6FA;
  --sky-200:#E3EEFC;
  --sky-100:#EDF4FE;

  /* Butter */
  --butter-500:#FBF3DE;
  --butter-600:#F3E7C6;

  /* Midnight */
  --midnight-900:#0A1327;
  --midnight-800:#0F1D38;
  --midnight-200:#C6CDDC;

  /* Blush */
  --blush-500:#F7CDDB;

  /* Warm neutrals */
  --warm-900:#241A1E;
  --warm-700:#4C3C41;
  --warm-100:#F2EBDC;

  /* Type */
  --font-display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-label:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --font-text:"Instrument Sans",-apple-system,"Helvetica Neue",Helvetica,sans-serif;

  --tracking-eyebrow:0.16em;
  --tracking-caps:0.1em;
  --tracking-display:-0.02em;

  /* Elevation — warm-tinted, never cold */
  --shadow-sm:0 2px 6px rgba(36,26,30,.07);
  --shadow-md:0 6px 18px rgba(36,26,30,.09);
  --ring-focus:0 0 0 3px rgba(109,36,58,.28);
  --ring-focus-light:0 0 0 3px rgba(183,214,250,.55);

  /* Motion */
  --ease-standard:cubic-bezier(.32,.72,.28,1);
  --duration-instant:90ms;
  --duration-fast:160ms;
  --duration-base:240ms;

  /* Layout */
  --gutter:24px;
  --content-max:640px;
  --wide-max:920px;
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--butter-500);
  color:var(--warm-900);
  font-family:var(--font-text);
  font-size:15px;
  line-height:1.6;
  text-wrap:pretty;
}
img{max-width:100%;display:block}
h1,h2,h3{
  margin:0;
  font-family:var(--font-display);
  letter-spacing:var(--tracking-display);
  line-height:1.1;
}
p{margin:0}
a{color:var(--crimson-700)}
a:hover{color:var(--crimson-800)}
*:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.section--crimson *:focus-visible,
.section--midnight *:focus-visible{box-shadow:var(--ring-focus-light)}
::selection{background:var(--sky-500);color:var(--crimson-800)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s !important;animation:none !important}
}

.page{position:relative}

/* ---- Buttons ---- */
.btn{
  font-family:var(--font-label);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:var(--tracking-caps);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
             transform var(--duration-instant) var(--ease-standard);
}
.btn:active{transform:scale(.99)}
.btn--sm{font-size:11px;padding:9px 16px}
.btn--md{font-size:13px;padding:13px 24px}
.btn--primary{background:var(--crimson-700);color:var(--butter-500)}
.btn--primary:hover{background:var(--crimson-800);color:var(--butter-500)}
.btn--primary:active{background:var(--crimson-900)}
.btn--inverse{background:var(--sky-500);color:var(--crimson-800)}
.btn--inverse:hover{background:var(--sky-600);color:var(--crimson-800)}

/* ---- Eyebrow ---- */
.eyebrow{
  font-family:var(--font-label);
  font-size:11px;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--warm-700);
}

/* ---- Header ---- */
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--crimson-700);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 16px;
  max-width:1160px;
  margin:0 auto;
}
.site-header__logo{width:84px;height:84px}
.site-header .btn{transform:scale(.82);transform-origin:right center}
.site-header .btn:active{transform:scale(.81)}

/* ---- Hero ---- */
.hero{
  position:relative;
  background:var(--butter-500);
  overflow:hidden;
}
.hero__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.hero__content{
  position:relative;
  z-index:2;
  padding:330px 20px 36px;
  max-width:1160px;
  margin:0 auto;
}
.hero__card{
  background:var(--butter-500);
  border-radius:24px;
  padding:24px 22px;
  max-width:310px;
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}
.hero__card h1{
  font-weight:800;
  font-size:26px;
  color:var(--crimson-700);
}

/* ---- Sections ---- */
.section{position:relative;overflow:hidden}
.section__inner{
  position:relative;
  z-index:2;
  padding:72px var(--gutter) 96px;
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:var(--content-max);
  margin:0 auto;
}
.section__inner--wide{gap:20px;max-width:var(--wide-max)}
.section h2{font-weight:800;font-size:30px}
.section .lede{margin-top:8px}
.section p{max-width:318px}

.section--sky{background:var(--sky-500)}
.section--sky h2,.section--sky p{color:var(--midnight-800)}

.section--crimson{background:var(--crimson-700)}
.section--crimson h2,.section--crimson p{color:var(--butter-500)}
.section--crimson .section__inner{padding-bottom:64px}

.section--butter{background:var(--butter-500)}
.section--blush{background:var(--blush-500)}
.section--blush p{color:var(--crimson-800)}
.section--blush .section__inner{padding-bottom:64px}

.section--midnight{background:var(--midnight-800)}
.section--midnight p{color:var(--sky-200)}

.section--join .section__inner{padding:80px var(--gutter) 96px;gap:16px}
.section__cta{margin-top:16px}

.h2--crimson{color:var(--crimson-700)}
.h2--butter{color:var(--butter-500)}
.h2--narrow{max-width:250px}

.inset-photo{
  margin-top:16px;
  width:100%;
  height:210px;
  object-fit:cover;
  border-radius:18px;
  box-shadow:var(--shadow-sm);
}

/* ---- Breakpoint visibility ---- */
.desktop-only{display:none}

/* ---- Text column wrapper (matches .section__inner flow on mobile) ---- */
.section__text{display:flex;flex-direction:column;gap:14px;min-width:0}

/* ---- Ribbons ---- */
.ribbon{position:absolute;z-index:1;pointer-events:none;overflow:visible}
.ribbon-d{display:none;position:absolute;z-index:1;pointer-events:none;overflow:visible}
.ribbon--br{right:0;bottom:0;width:220px;height:150px}
.ribbon--tr{right:0;top:0;width:220px;height:150px}
.ribbon--lg{width:240px;height:200px}
.ribbon--clipped{width:160px;height:120px;overflow:hidden}
.section--butter .ribbon--br{width:200px;height:180px}
.ribbon--bottom{left:0;bottom:0;width:100%;height:110px}

/* ---- Format cards ---- */
.format-card{
  background:var(--blush-500);
  border-radius:24px;
  padding:30px 26px;
  min-height:168px;
}
.format-card h3{font-weight:600;font-size:21px;color:var(--crimson-700)}
.format-card p{margin-top:10px;color:var(--crimson-800)}

/* ---- Steps ---- */
.step{min-height:200px}
.step__head{display:flex;align-items:baseline;gap:12px}
.step__num{
  font-family:var(--font-display);
  font-weight:800;
  font-size:44px;
  color:var(--sky-500);
  letter-spacing:var(--tracking-display);
}
.step h3{font-weight:600;font-size:20px;color:var(--butter-500)}
.step p{margin-top:10px}

/* ---- Carousel (mobile) ---- */
.carousel{display:flex;flex-direction:column;gap:20px}
.carousel [data-slide]{display:none}
.carousel [data-slide].is-active{display:block}
.carousel__controls{display:flex;align-items:center;gap:16px}
.carousel__btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:none;
  font-family:var(--font-label);
  font-size:16px;
  cursor:pointer;
  transition:background var(--duration-fast) var(--ease-standard);
}
.carousel__btn--crimson{background:var(--crimson-700);color:var(--butter-500)}
.carousel__btn--crimson:hover{background:var(--crimson-800)}
.carousel__btn--butter{background:var(--butter-500);color:var(--crimson-700)}
.carousel__btn--butter:hover{background:var(--butter-600)}
.carousel__pos{
  font-family:var(--font-label);
  font-size:11px;
  letter-spacing:var(--tracking-eyebrow);
}
.carousel__pos--warm{color:var(--warm-700)}
.carousel__pos--sky{color:var(--sky-500)}

/* ---- Photo band ---- */
.photo-band{
  position:relative;
  height:400px;
  background:var(--midnight-900);
}
.photo-band img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---- Footer ---- */
.site-footer{
  position:relative;
  background:var(--midnight-800);
  overflow:hidden;
  padding:36px 24px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}
.site-footer__logo{width:120px;height:120px}
.site-footer__tagline{
  font-family:var(--font-label);
  font-size:11px;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--sky-500);
}
.site-footer__meta{font-size:13px;color:var(--midnight-200)}

/* ============================================================
   Desktop · the mobile layout widens, it is not redrawn.
   ============================================================ */
@media (min-width: 720px){
  body{font-size:16px}
  .section__inner{padding:96px var(--gutter) 120px;max-width:760px}
  .section__inner--wide{max-width:980px}
  .section--crimson .section__inner,
  .section--blush .section__inner{padding-bottom:96px}
  .section h2{font-size:clamp(30px, 4vw, 44px)}
  .h2--narrow{max-width:none}
  .section p{max-width:52ch}
  .section .lede{margin-top:12px}

  /* Header: slim bar; the wordmark alone (no logo tile) sits inside it */
  .site-header__inner{padding:12px 32px}
  .site-header__logo{width:auto;height:62px;margin:0}
  .site-header .btn{transform:none}
  .site-header .btn:active{transform:scale(.99)}

  /* Hero: taller frame, roomier card sitting right so her face stays clear */
  .hero__content{padding:clamp(360px, 48vh, 540px) 40px 72px}
  .hero__card{
    max-width:600px;
    margin-left:auto;
    padding:44px 42px;
    border-radius:28px;
    gap:24px;
  }
  .hero__card h1{font-size:clamp(30px, 3.8vw, 48px)}
  .hero__card .eyebrow{font-size:12px}

  /* Inset photos grow with the column */
  .inset-photo{height:340px;margin-top:24px}
  .mobile-only{display:none}
  .desktop-only{display:block}

  /* Text + square photo, side by side */
  .section__cols{
    max-width:1000px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px, 420px);
    gap:64px;
    align-items:center;
  }
  .section__text{gap:14px}
  .side-photo{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:18px;
    box-shadow:var(--shadow-sm);
  }

  /* Format cards: the stack becomes a two-by-two grid */
  .carousel__controls{display:none}
  #formats .carousel__track{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:8px;
  }
  #formats [data-slide]{display:block}

  /* Steps: all four side by side in two columns */
  #steps .carousel__track{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px 48px;
    margin-top:8px;
  }
  #steps [data-slide]{display:block}
  .step{min-height:0}

  /* Ribbons: mobile accents swap for dedicated desktop paths that
     sweep further into the open space */
  .ribbon{display:none}
  .ribbon-d{display:block}
  .ribbon-d--problem{right:0;bottom:0;width:560px;height:500px}
  .ribbon-d--what{right:0;top:0;width:560px;height:420px}
  .ribbon-d--formats{right:0;bottom:0;width:560px;height:520px}
  .ribbon-d--howtop{right:0;top:0;width:560px;height:240px}
  .ribbon-d--how{right:0;bottom:0;width:1100px;height:320px}
  .section--midnight .section__inner{padding-bottom:240px}
  .ribbon-d--who{right:0;top:0;width:700px;height:440px;overflow:hidden}
  .ribbon-d--join{left:0;bottom:0;width:100%;height:170px}

  /* Photo band: taller, so more of the table is in frame */
  .photo-band{height:680px}
  .photo-band img{object-position:center 42%}

  .site-footer{padding:56px 24px 60px}
}

@media (min-width: 1200px){
  .photo-band{height:760px}
}