/* ==========================================================================
   DHAKA HANGOUTS
   Palette is limited to the four brand colours — nothing else is used
   anywhere in this file except black/white for image-safe contrast.

     Electric Tangerine  #FD6706
     Cobalt Blue         #1957D1
     Warm Off-White      #FFF5EB
     Deep Slate Blue     #354B77
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap');

/* Taste Bread — self-hosted display face, used for h1 only. */
@font-face{
  font-family:'Taste Bread';
  src:url('assets/fonts/taste-bread.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --tangerine:#FD6706;
  --cobalt:#1957D1;
  --offwhite:#FFF5EB;
  --slate:#354B77;

  /* Tints derived from the four — no new hues introduced. */
  --slate-70:rgba(53,75,119,.70);
  --slate-55:rgba(53,75,119,.55);
  --slate-16:rgba(53,75,119,.16);
  --slate-10:rgba(53,75,119,.10);
  --offwhite-70:rgba(255,245,235,.70);
  --offwhite-45:rgba(255,245,235,.45);
  --offwhite-25:rgba(255,245,235,.25);

  /* One family everywhere: Bricolage Grotesque. Taste Bread is h1 only. */
  --display:'Bricolage Grotesque','Trebuchet MS',sans-serif;
  --body:'Bricolage Grotesque','Trebuchet MS',sans-serif;

  --shadow-sm:0 2px 10px rgba(53,75,119,.08);
  --shadow-md:0 16px 44px -20px rgba(53,75,119,.40);
  --r-lg:26px;
  --r-md:18px;
  --wrap:1080px;
  --gut:26px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--offwhite);
  color:var(--slate);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);}
.narrow > *{max-width:720px;}

/* ---------- Type ---------------------------------------------------------- */

h1,h2,h3{
  font-family:var(--display);
  font-weight:750;
  line-height:.98;
  letter-spacing:-.025em;
  margin:0 0 .4em;
  text-wrap:balance;
  color:var(--slate);
}
/* Taste Bread is a single-weight display face: it needs normal weight and
   neutral tracking, and it runs small for its point size so it is scaled up. */
h1{
  font-family:'Taste Bread',var(--display);
  font-weight:400;
  font-size:clamp(3rem,8vw,5.6rem);
  letter-spacing:0;
  line-height:1.02;
  color:var(--tangerine);
}
/* h2 stays Bricolage, in cobalt. */
h2{
  font-family:var(--display);
  font-size:clamp(1.9rem,4.4vw,3rem);
  color:var(--cobalt);
}
h3{font-size:clamp(1.15rem,2vw,1.4rem);color:var(--cobalt);}
em{font-style:normal;color:var(--tangerine);}
/* Cobalt emphasis, the counterpart to <em>'s tangerine. */
.hi{color:var(--cobalt);}
/* Inside a heading, <em> inherits the heading's colour rather than going
   tangerine — h1 is already tangerine and h2 must stay cobalt. */
h1 em,h2 em,h3 em{color:inherit;}

p{margin:0 0 1em;}
.lede{font-size:clamp(1.02rem,1.6vw,1.16rem);color:var(--slate-70);max-width:56ch;}
.muted{color:var(--slate-70);}
strong{font-weight:700;color:var(--slate);}

/* Small uppercase section label with a leading rule */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--display);font-weight:600;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tangerine);
  margin-bottom:20px;
}
.eyebrow::before{content:'';width:26px;height:2px;background:currentColor;flex-shrink:0;}

/* ---------- Buttons ------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-weight:500;font-size:.94rem;
  text-decoration:none;padding:13px 26px;
  /* Tangerine is the action colour — slate is for text, not for every CTA. */
  border:2px solid var(--tangerine);border-radius:100px;
  background:var(--tangerine);color:#fff;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
  cursor:pointer;
}
.btn:hover{background:var(--slate);border-color:var(--slate);color:var(--offwhite);}
.btn--ghost{background:transparent;color:var(--slate);border-color:var(--slate);}
.btn--ghost:hover{background:var(--slate);border-color:var(--slate);color:var(--offwhite);}
.btn--light{background:var(--offwhite);color:var(--slate);border-color:var(--offwhite);}
.btn--light:hover{background:var(--tangerine);border-color:var(--tangerine);color:#fff;}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;}

/* ---------- Header -------------------------------------------------------- */

.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,245,235,.92);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:2px solid var(--slate-16);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--wrap);margin:0 auto;padding:13px var(--gut);
}
/* Full logo lockup — the wordmark is part of the artwork, so no text span. */
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.brand img{height:40px;width:auto;}
@media (max-width:420px){.brand img{height:32px;}}

.nav{display:flex;align-items:center;gap:26px;}
.nav a{
  font-size:.92rem;color:var(--slate-70);text-decoration:none;
  transition:color .16s ease;
}
.nav a:hover{color:var(--slate);}
.nav a[aria-current="page"]{color:var(--tangerine);font-weight:500;}
.nav .btn{color:var(--offwhite);}
.nav .btn:hover{color:#fff;}

.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;
  width:40px;height:36px;padding:0;align-items:center;justify-content:center;
}
.nav-toggle span{position:relative;display:block;width:20px;height:2px;background:var(--slate);}
.nav-toggle span::before,.nav-toggle span::after{
  content:'';position:absolute;left:0;width:20px;height:2px;background:var(--slate);
}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}

@media (max-width:860px){
  .nav-toggle{display:flex;}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--offwhite);border-bottom:2px solid var(--slate-16);
    padding:10px var(--gut) 20px;
  }
  .nav.is-open{display:flex;}
  .nav a{padding:13px 0;font-size:1.02rem;border-bottom:1px solid var(--slate-10);}
  .nav .btn{margin-top:16px;justify-content:center;border-bottom:none;}
}

/* ---------- Sections ------------------------------------------------------ */

.section{padding:clamp(64px,8vw,110px) 0;}
/* Follows a page-head, which already supplies the top spacing — so drop the
   top padding and halve the bottom to avoid a double gap before the next section. */
.section--flush{padding-top:0;padding-bottom:clamp(36px,4.5vw,62px);}
.section + .section{border-top:2px solid var(--slate-10);}
.section--slate{background:var(--slate);color:var(--offwhite);border-top:none;}
.section--slate h1,.section--slate h2,.section--slate h3{color:var(--offwhite);}
.section--slate .lede,.section--slate .muted{color:var(--offwhite-70);}
.section--slate strong{color:var(--offwhite);}
.section--cobalt{background:var(--cobalt);color:#fff;border-top:none;}
.section--cobalt h1,.section--cobalt h2{color:#fff;}
.section--cobalt .lede{color:rgba(255,255,255,.82);}
.section--cobalt .eyebrow{color:#fff;}

.section__head{margin-bottom:clamp(34px,4.5vw,56px);max-width:640px;}
/* When the head ends in a tagline, its own margin already supplies the gap. */
.section__head--tight{margin-bottom:clamp(16px,2vw,24px);}
.section__head p:last-child{margin-bottom:0;}

/* ---------- Page header (inner pages) ------------------------------------- */

.page-head{padding:clamp(54px,7vw,92px) 0 clamp(30px,4vw,48px);}
.page-head h1{margin-bottom:.3em;}
.page-head .lede{font-size:clamp(1.1rem,2vw,1.35rem);}

/* ---------- Landing hero image (full-bleed) ------------------------------- */

/* The artwork is 1440×800. Stretching it past that softens and pixelates it,
   so it is capped at native size and centred; the cream band either side
   matches the artwork's own background, so the row still spans full width. */
.hero-img{
  width:100%;
  background:var(--offwhite);
  line-height:0;                 /* kill inline-image descender gap */
  display:flex;
  justify-content:center;
  border-bottom:1px solid var(--slate-16);
}
.hero-img img{
  width:100%;
  max-width:1440px;              /* never upscale beyond native resolution */
  height:auto;
  min-width:0;                   /* let it shrink below native width in flex */
}

/* ---------- Intro --------------------------------------------------------- */

.intro{padding:clamp(52px,7vw,96px) 0 clamp(44px,5vw,72px);position:relative;overflow:hidden;}
.intro__inner{position:relative;z-index:2;}
/* "Dhaka Hangouts" must stay on one line at every width. Sizing off the
   container (cqw) rather than the viewport keeps it fitting inside the padded
   column; nowrap guarantees it, and the clamp stops it getting silly on wide
   screens. ~13cqw is the largest that still fits the longer word pair. */
.intro__inner{container-type:inline-size;}
.intro h1{
  /* em here is relative to the h1's own large size, so keep it small. */
  margin-bottom:.06em;
  white-space:nowrap;
  font-size:clamp(2rem,13cqw,5.6rem);
}
.intro h2{margin-bottom:.5em;}
/* Fallback for browsers without container queries: size off the viewport,
   minus the gutters, so it still cannot overflow. */
@supports not (font-size:1cqw){
  .intro h1{font-size:clamp(2rem,11.5vw,5.6rem);}
}
.intro__sub{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.02rem,2vw,1.28rem);
  color:var(--black);margin-bottom:.9em;
}
.intro .lede{margin-bottom:32px;}
.intro .quote{font-weight:500;color:var(--black);}

/* Bubble motif from the logo mark. Uses a solid cobalt tint rather than
   opacity, so the hue stays blue instead of washing out to grey. */
.bubble{
  position:absolute;z-index:1;pointer-events:none;
  right:-60px;top:50%;transform:translateY(-50%);
  width:min(38vw,420px);aspect-ratio:1/1;
  background:rgba(25,87,209,.14);
  -webkit-mask:url('assets/logo-mark.png') no-repeat center/contain;
          mask:url('assets/logo-mark.png') no-repeat center/contain;
}
@media (max-width:900px){.bubble{display:none;}}

/* ---------- Stat chips ---------------------------------------------------- */

.stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(36px,4.5vw,56px);}
.stat{
  display:flex;align-items:baseline;gap:10px;
  background:var(--offwhite);
  border:2px solid var(--slate-16);
  border-radius:100px;padding:12px 22px;
  box-shadow:var(--shadow-sm);
}
.stat__k{font-family:var(--display);font-weight:800;font-size:1.1rem;line-height:1;color:var(--cobalt);}
.stat__v{font-size:.86rem;color:var(--slate-70);}
@media (max-width:520px){.stat{width:100%;}}

/* ---------- Event --------------------------------------------------------- */

.event{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,64px);align-items:start;}
@media (max-width:820px){.event{grid-template-columns:1fr;gap:34px;}}
.event h2{margin-bottom:.16em;}
.event__tag{
  font-family:var(--display);font-weight:600;
  font-size:1.12rem;color:var(--tangerine);margin-bottom:1.1em;
}

/* Opening hook — larger, so the section starts with a statement not a paragraph. */
.pull{
  font-family:var(--display);font-weight:800;
  /* font-size:clamp(1.3rem,2.4vw,1.75rem); */
  line-height:1.2;letter-spacing:-.02em;
  color:var(--slate);margin:0 0 1em;max-width:22ch;
}

/* Present / Or don't — two short options side by side. */
.options{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin:26px 0;
}
@media (max-width:640px){.options{grid-template-columns:1fr;}}
/* A low-alpha cobalt over warm cream reads as grey no matter the value, so
   these use a solid cobalt outline on the page background instead of a tint. */
.option{
  background:transparent;
  border:2px solid var(--cobalt);
  border-radius:var(--r-md);
  padding:20px 22px;
}
.option__k{
  display:inline-block;
  font-family:var(--display);font-weight:800;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cobalt);margin-bottom:8px;
}
.option p{margin:0;font-size:.95rem;color:var(--slate-70);}
/* First option is the primary path — fill it so the pair reads as a choice. */
.option:first-child{background:var(--cobalt);border-color:var(--cobalt);}
.option:first-child .option__k{color:#fff;}
.option:first-child p{color:rgba(255,255,255,.88);}
.option:first-child strong{color:#fff;}

/* Closing reassurance — set apart with a rule, not another body paragraph. */
.note-line{
  border-top:2px solid var(--slate-16);
  padding-top:18px;margin:0;
  font-size:.95rem;color:var(--slate-70);
}

.specs-card{
  background:var(--cobalt);color:#fff;
  border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,34px);
  box-shadow:var(--shadow-md);
}
.specs__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.22);
}
.specs__row:last-of-type{border-bottom:none;}
.specs__k{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.68);flex-shrink:0;
}
.specs__v{text-align:right;font-weight:500;}
.specs__v small{display:block;font-weight:400;font-size:.8rem;color:rgba(255,255,255,.68);margin-top:2px;}
.specs-card .btn{
  width:100%;justify-content:center;margin-top:22px;
  background:var(--offwhite);color:var(--slate);border-color:var(--offwhite);
}
.specs-card .btn:hover{background:var(--tangerine);border-color:var(--tangerine);color:#fff;}

/* ---------- Expandable list (formats, FAQ) -------------------------------- */

.list{border-top:2px solid var(--slate-16);}
.list details{border-bottom:2px solid var(--slate-10);}
.list summary{
  display:grid;grid-template-columns:auto 1fr auto auto;
  gap:clamp(14px,2.6vw,32px);align-items:center;
  padding:clamp(18px,2.4vw,24px) clamp(12px,1.8vw,20px);
  border-radius:var(--r-md);
  cursor:pointer;list-style:none;
  transition:background .2s ease,transform .2s ease;
}
.list summary::-webkit-details-marker{display:none;}
.list summary:hover{background:rgba(25,87,209,.07);transform:translateX(5px);}
.list summary::after{
  content:'';width:9px;height:9px;justify-self:end;
  border-right:2px solid var(--cobalt);border-bottom:2px solid var(--cobalt);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .22s ease;
}
.list details[open] summary::after{transform:translateY(2px) rotate(225deg);}
.list details[open] summary{background:rgba(25,87,209,.07);}
.list__num{
  display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;
  font-family:var(--display);font-weight:600;font-size:.88rem;
  color:var(--tangerine);border:2px solid var(--tangerine);border-radius:50%;
  transition:background .2s ease,color .2s ease;
}
.list summary:hover .list__num,
.list details[open] .list__num{background:var(--tangerine);color:#fff;}
.list__name{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.1;letter-spacing:-.02em;color:var(--slate);}
.list__desc{font-size:.93rem;color:var(--slate-70);max-width:36ch;text-align:right;}
.list__body{padding:2px clamp(12px,1.8vw,20px) clamp(20px,2.4vw,26px);color:var(--slate-70);max-width:64ch;}
.list__body p:last-child{margin-bottom:0;}
.list__body a{color:var(--tangerine);font-weight:500;}
@media (max-width:640px){
  .list summary{grid-template-columns:auto 1fr auto;gap:10px 14px;align-items:baseline;}
  .list__desc{grid-column:1 / -1;text-align:left;}
  .list summary::after{align-self:center;}
}

/* Plain FAQ (no numeral) */
.list--faq summary{grid-template-columns:1fr auto;}
.list--faq .list__name{font-size:clamp(1rem,1.6vw,1.12rem);font-family:var(--body);font-weight:500;letter-spacing:0;}
@media (max-width:640px){.list--faq summary{grid-template-columns:1fr auto;}}

/* ---------- Chips --------------------------------------------------------- */

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.chip{
  font-family:var(--body);font-size:.93rem;font-weight:500;
  background:var(--offwhite);color:var(--slate);
  border:2px solid var(--slate-16);border-radius:100px;
  padding:10px 18px;
}
/* On dark panels the default hover (slate) would vanish — invert instead. */
.section--slate .btn:hover,.section--cobalt .btn:hover{
  background:var(--offwhite);border-color:var(--offwhite);color:var(--slate);
}
.section--slate .chip{background:transparent;color:var(--offwhite);border-color:var(--offwhite-25);}

/* ---------- Newsletter ---------------------------------------------------- */

.field{display:flex;gap:10px;flex-wrap:wrap;max-width:440px;margin-top:24px;}
.field input{
  flex:1 1 220px;font-family:var(--body);font-size:.96rem;
  padding:13px 18px;color:var(--slate);background:transparent;
  border:2px solid var(--slate-16);border-radius:100px;
}
.field input::placeholder{color:var(--slate-55);}
.field input:focus{outline:none;border-color:var(--tangerine);}
.section--slate .field input{color:var(--offwhite);border-color:var(--offwhite-25);}
.section--slate .field input::placeholder{color:var(--offwhite-45);}
.form-msg{margin-top:14px;font-size:.9rem;color:var(--tangerine);display:none;}
.form-msg.is-shown{display:block;}

/* ---------- CTA band ------------------------------------------------------ */

.cta{text-align:center;}
.cta h2{margin-bottom:.3em;}
.cta .lede{margin:0 auto 26px;}

/* ---------- Footer -------------------------------------------------------- */

.site-footer{background:var(--tangerine);color:var(--offwhite);padding:60px 0 30px;}
/* Footer lockup is the cream artwork; slightly larger than the header's. */
.site-footer .brand img{height:46px;}
/* Footer uses assets/logo-mark-cream.png — the cobalt mark clashes on tangerine. */
.site-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;}
@media (max-width:720px){.site-footer__grid{grid-template-columns:1fr 1fr;gap:30px;}}
/* Two columns still overflow on the narrowest phones — stack to one. */
@media (max-width:380px){.site-footer__grid{grid-template-columns:1fr;gap:26px;}}
/* Footer is tangerine, so headings and hovers use offwhite/slate — not the
   tangerine they used when the panel was slate. */
.site-footer h4{
  font-family:var(--display);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--offwhite-70);font-weight:600;margin:0 0 14px;
}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:9px;}
.site-footer a{text-decoration:none;color:var(--offwhite);font-size:.94rem;}
.site-footer a:hover{color:var(--slate);}
.site-footer p{color:var(--offwhite-70);}
.site-footer__base{
  margin-top:48px;padding-top:20px;border-top:1px solid var(--offwhite-25);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.84rem;color:var(--offwhite-70);
}

/* ---------- Motion -------------------------------------------------------- */

.js-reveal .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;}
.js-reveal .reveal.is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .reveal{opacity:1!important;transform:none!important;}
}