/* The Kitchen™ — Drop 01 */

@font-face{font-family:"Crumbl Display";src:url("assets/fonts/Display.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Crumbl Text";src:url("assets/fonts/TextLight.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Crumbl Text";src:url("assets/fonts/TextRegular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Crumbl Text";src:url("assets/fonts/TextBold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --blue:#1800ad;
  --white:#fff;
  --tint:#f1efff;
  --display:"Crumbl Display",Georgia,serif;
  --text:"Crumbl Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:48px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--blue);
  color:var(--white);
  font-family:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
a:hover{color:inherit}

:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}

.eyebrow{
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding:32px var(--gutter) 0;
}

.hero__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}

.logo{
  display:block;
  width:190px;
  height:24.7px;
  background:currentColor;
  mask:url("assets/logo.svg") no-repeat center/contain;
  -webkit-mask:url("assets/logo.svg") no-repeat center/contain;
}

.hero__city{color:rgba(255,255,255,.65)}

.hero__body{
  flex:1;
  display:flex;
  align-items:center;
  padding:80px 0 96px;
}

.hero__content{width:100%;min-width:0}

.hero__flag{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 32px;
}

.hero__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--white);
  display:inline-block;
  flex:none;
}

.hero__title{
  font-family:var(--display);
  font-size:clamp(56px,7.6vw,124px);
  line-height:.9;
  letter-spacing:-.02em;
  font-weight:400;
  margin:0 0 32px;
  text-wrap:balance;
}

.hero__lede{
  max-width:min(40ch,100%);
  font-size:20px;
  line-height:1.55;
  font-weight:300;
  margin:0 0 44px;
  color:rgba(255,255,255,.82);
  text-wrap:pretty;
}

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

.btn{
  display:inline-block;
  border-radius:999px;
  padding:19px 34px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:opacity .2s ease;
}
.btn:hover{opacity:.85}

.btn--light{background:var(--white);color:var(--blue)}
.btn--dark{background:var(--blue);color:var(--white)}

.btn--disabled{
  background:rgba(24,0,173,.08);
  color:rgba(24,0,173,.6);
  cursor:default;
}
.btn--disabled:hover{opacity:1}

/* ---------- Ticker ---------- */

.ticker{
  border-top:1px solid rgba(255,255,255,.22);
  overflow:hidden;
  padding:20px 0;
}

.ticker__track{
  display:flex;
  width:max-content;
  animation:tk-marquee 26s linear infinite;
  font-family:var(--display);
  font-size:26px;
  white-space:nowrap;
}

.ticker__item{padding-right:44px}
.ticker__item--muted{opacity:.45}

@keyframes tk-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker__track{animation:none}
}

/* ---------- Drop ---------- */

.drop{
  background:var(--white);
  color:var(--blue);
  padding:110px var(--gutter) 130px;
}

.drop__inner{max-width:1240px;margin:0 auto}

.drop__label{
  border-bottom:1px solid rgba(24,0,173,.2);
  padding-bottom:22px;
  margin-bottom:56px;
  font-weight:700;
}

.drop__grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:72px;
  align-items:center;
}

.drop__media{
  position:relative;
  aspect-ratio:4/5;
  background:var(--tint);
  border-radius:20px;
  overflow:hidden;
}

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

.drop__placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(24,0,173,.45);
}

.drop__text{min-width:0}

.drop__title{
  font-family:var(--display);
  font-size:clamp(52px,6vw,96px);
  line-height:.92;
  letter-spacing:-.02em;
  font-weight:400;
  margin:0 0 28px;
}

.drop__copy{
  font-size:20px;
  line-height:1.6;
  font-weight:300;
  max-width:min(40ch,100%);
  margin:0 0 44px;
  color:rgba(24,0,173,.8);
  text-wrap:pretty;
}

.drop__actions{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}

/* ---------- Responsive ---------- */

@media (max-width:960px){
  :root{--gutter:28px}

  .drop__grid{
    grid-template-columns:minmax(0,1fr);
    gap:48px;
  }
  .drop{padding:80px var(--gutter) 96px}
}

@media (max-width:640px){
  :root{--gutter:22px}

  .hero{padding-top:24px}
  .hero__header{gap:16px}
  .logo{width:150px;height:19.5px}
  .hero__city{font-size:11px}
  .hero__body{padding:56px 0 72px}
  .hero__lede{font-size:17px;margin-bottom:36px}
  .btn{padding:17px 28px;font-size:14px}
  .ticker__track{font-size:20px}
  .ticker__item{padding-right:32px}
  .drop__label{margin-bottom:40px}
  .drop__copy{font-size:17px;margin-bottom:36px}
}