/* ==========================================================================
   Living Room Coffee — styles
   --------------------------------------------------------------------------
   HOW THIS FILE IS ORGANIZED
     1. Colors, fonts, and the sizing unit  (change brand colors here)
     2. Base + shared helpers
     3. Navigation
     4. One section at a time: Hero, Cozy Corner, Coffee, The Fun, Footer
     5. Animations
   HOW THE LAYOUT WORKS
     The page is a collage, so most pieces are placed by their CENTER point:
       --x / --y  = center of the piece, measured from the top-left of its section
       --w / --h  = its size
       --r        = how much it is tilted
     All numbers are "design pixels" and shrink/grow with the screen using --u.
     Three sets of numbers exist for each piece: desktop (default), tablet
     (@media max-width 999px) and phone (@media max-width 599px).
   ========================================================================== */


/* 1. COLORS, FONTS, SIZING UNIT ------------------------------------------- */

@font-face {
  font-family: "Ohno Blazeface 18 Point";
  src: url("../assets/fonts/OhnoBlazeface-18pt.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ohno Blazeface 12 Point";
  src: url("../assets/fonts/OhnoBlazeface-12pt.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("../assets/fonts/Onest-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Onest";
  src: url("../assets/fonts/Onest-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand colors */
  --pink:        #F7D2E1;   /* page background */
  --pink-hero:   #EB96C6;   /* strip above the hero wave */
  --tan:         #D99B65;
  --navy:        #283982;
  --brown:       #7A5731;   /* section headlines */
  --brown-dark:  #6E4B25;   /* hero headline */
  --cream:       #FFFAEF;
  --text:        #665148;   /* body text on pink */
  --nav-bg:      rgba(60, 51, 51, 0.85);
  --bar:         #5C3B1A;   /* bottom bar of the footer */
  --social:      #A06C2F;   /* circles behind the social icons */

  /* Fonts */
  --font-display: "Ohno Blazeface 18 Point", Georgia, "Times New Roman", serif;
  --font-curve:   "Ohno Blazeface 12 Point", "Ohno Blazeface 18 Point", Georgia, serif;
  --font-body:    "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Sizing unit: 1 design pixel. Desktop designs are 1440 wide. */
  --dw: 1440;                                   /* width the desktop layout was designed at */
  --u: calc(min(100vw, 1440px) / 1440);         /* 1 design pixel on this screen */

  /* Section heights, in design pixels (each includes the wavy gap that follows it) */
  --h-hero: 950;
  --h-cozy: 1458;
  --h-coffee: 932;
  --h-fun: 964;
  --h-footer: 630;
}

@media (max-width: 999px) {                     /* tablet */
  :root {
    --dw: 810;
    --u: calc(min(100vw, 900px) / 810);
    --h-hero: 787;
    --h-cozy: 1058;
    --h-coffee: 823;
    --h-fun: 752;
    --h-footer: 555;
  }
}
@media (max-width: 599px) {                     /* phone */
  :root {
    --dw: 390;
    --u: calc(min(100vw, 540px) / 390);
    --h-hero: 652;
    --h-cozy: 1058;
    --h-coffee: 851;
    --h-fun: 646;
    --h-footer: 819;
  }
}


/* 2. BASE + SHARED HELPERS ------------------------------------------------ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--pink);
  font-family: var(--font-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: none; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }

/* Everything on the page sits inside .page; it clips the pieces that bleed off the sides */
.page { position: relative; overflow-x: clip; }

main > section, .footer { position: relative; }
.cozy { z-index: 1; }   /* lets the last Cozy Corner photo overlap the navy wave below it */
.hero   { height: calc(var(--h-hero)   * var(--u)); }
.cozy   { height: calc(var(--h-cozy)   * var(--u)); }
.coffee { height: calc(var(--h-coffee) * var(--u)); }
.fun    { height: calc(var(--h-fun)    * var(--u)); }
.footer { height: calc(var(--h-footer) * var(--u)); }

/* .at = "place this piece by its center point" (see the note at the top) */
.at {
  position: absolute;
  left: calc(50% + (var(--x) - var(--dw) / 2) * var(--u));
  top:  calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}
.at.has-h { height: calc(var(--h) * var(--u)); }
img.at { object-fit: cover; }

/* Doodles: little stickers whose parts are placed relative to one pivot point */
.doodle {
  position: absolute;
  left: calc(50% + (var(--x) - var(--dw) / 2) * var(--u));
  top:  calc(var(--y) * var(--u));
  width: 0;
  height: 0;
}
.wiggle { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: wiggle 6s linear infinite; }
.d {
  position: absolute;
  left: calc(var(--ox) * var(--u));
  top:  calc(var(--oy) * var(--u));
  width: calc(var(--w) * var(--u));
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  height: auto;
}
.d--text {
  width: max-content;
  white-space: nowrap;
  text-align: center;
  letter-spacing: -0.08em;
  font-size: calc(var(--fs) * var(--u));
  line-height: calc(var(--lh) * var(--u));
}

/* Blobs: the round "Get in touch" badges */
.blob { display: block; text-decoration: none; }
.blob__shape {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: spin 30s linear infinite reverse;
}
.blob__shape--static { animation: none; }
.blob__text {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(calc(var(--tx, 0) * var(--u)), calc(var(--ty, 0) * var(--u))) rotate(var(--tr, 0deg));
  text-align: center;
  white-space: nowrap;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: calc(var(--fs) * var(--u));
  line-height: calc(var(--lh) * var(--u));
  font-weight: var(--fw, 700);
}

/* Headlines and paragraphs share a few looks */
.cozy__title, .fun__title, .hero__title, .social__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--fs) * var(--u));
  line-height: calc(var(--lh) * var(--u));
}
.cozy__text, .coffee__text, .fun__text, .info__text, .social__text {
  font-size: calc(var(--fs) * var(--u));
  line-height: calc(var(--lh) * var(--u));
}


/* 3. NAVIGATION ---------------------------------------------- */

.site-header { position: sticky; top: 0; z-index: 100; height: 0; }
.nav {
  position: relative;
  width: 93%; max-width: 1340px;
  min-height: 90px;
  top: 27px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 100px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
}
.nav__logo img { width: 86px; height: 46px; object-fit: cover; }
.nav__links { display: flex; gap: 33px; margin-left: auto; margin-right: 41px; }
.nav__links a {
  display: block; padding: 4px 8px; border-radius: 4px;
  font-size: 16px; line-height: 26px; text-decoration: none; color: #fff;
}
.nav__links a:hover { background: rgba(255, 255, 255, 0.12); }
.nav__cta {
  display: flex; align-items: center; justify-content: center;
  height: 62px; padding: 0 28px;
  border-radius: 100px;
  background: var(--cream);
  color: var(--tan);
  font-size: 16px; line-height: 26px; font-weight: 800; text-decoration: none;
  transition: transform 0.2s ease;
}
.nav__cta:hover { transform: scale(1.04); }
.nav__toggle, .nav__menu { display: none; }

@media (max-width: 999px) {                     /* tablet + phone: hamburger menu */
  .nav {
    flex-wrap: wrap;
    width: calc(100% - 48px);
    min-height: 74px;
    top: 16px;
    padding: 0 27px;
  }
  .nav__logo { margin: 14px 0; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 100px;
    background: var(--cream);
    cursor: pointer;
  }
  .nav__toggle span {
    display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--tan);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
  .nav.is-open { border-radius: 40px; }
  .nav__menu {
    flex-basis: 100%;
    padding: 0 20px 20px;
    text-align: center;
  }
  .nav.is-open .nav__menu { display: block; }
  .nav__menu a {
    display: block; padding: 21px 0;
    font-size: 16px; line-height: 24px; color: #fff; text-decoration: none;
  }
  .nav__menu .nav__menu-cta {
    margin-top: 30px; padding: 17px 0;
    border-radius: 100px;
    background: var(--cream); color: var(--tan); font-weight: 800;
  }
}
@media (max-width: 599px) {                     /* phone */
  .nav { width: calc(100% - 24px); min-height: 59px; padding: 0 25px; border-radius: 32px; }
  .nav__logo { margin: 10px 0; }
  .nav__logo img { width: 72px; height: 39px; }
  .nav__toggle { width: 36px; height: 36px; gap: 5px; }
  .nav__toggle span { width: 18px; }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .nav.is-open { border-radius: 28px; }
}


/* 4a. HERO ---------------------------------------------------------------- */

.hero { z-index: 0; }

/* Pink strip at the very top (desktop only) */
.hero__band {
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(150 * var(--u));
  background: var(--pink-hero);
}
/* The big tan wave */
.hero__wave {
  position: absolute; left: 0;
  top: calc(63 * var(--u));
  width: 100%;
  height: calc(768 * var(--u));
}

.hero__title {
  --x: 720; --y: 314; --w: 900; --fs: 92; --lh: 102;
  z-index: 1;
  text-align: center;
  white-space: nowrap;
  color: var(--brown-dark);
}
.br-phone { display: none; }   /* on phones the headline breaks into three lines */
.hero__underlined { position: relative; display: inline-block; }
.hero__underlined::after {          /* the wavy line under "Coffee!" */
  content: ""; position: absolute; left: 0; right: 0;
  bottom: calc(2 * var(--u));
  height: calc(12 * var(--u));
  background: url("../assets/svg/hero-underline.svg") center / 100% 100% no-repeat;
}

/* Left sticker */
.hero__sticker { --x: 179; --y: 286; z-index: 3; }
.hero__sticker .d--bubble { --ox: 0;     --oy: 26.6; --w: 261; }
.hero__sticker .d--mug    { --ox: -21.3; --oy: -53.2; --w: 105; }
.hero__sticker .d--text   {
  --ox: -2; --oy: 27.2; --r: -14deg; --fs: 27.03; --lh: 35;
  font-weight: 800; color: #FBEED7;
}

/* Right sticker */
.hero__blob { --x: 1275; --y: 385; --w: 210; --h: 210; z-index: 3; }
.hero__blob .blob__text { --fs: 27.94; --lh: 25; --fw: 900; --tx: 3.5; --ty: 0.5; --tr: 16deg; }

/* Scrolling photo strip */
.ticker {
  --t-top: 433; --t-h: 489; --t-w: 323; --t-gap: 40; --t-rad: 28; --t-dur: 60s;
  position: absolute; left: 0; right: 0; z-index: 2;
  top: calc(var(--t-top) * var(--u));
  height: calc(var(--t-h) * var(--u));
  overflow: hidden;
}
.ticker__track {
  display: flex; width: max-content; height: 100%;
  animation: ticker var(--t-dur) linear infinite;
}
.ticker__track li {
  flex: none;
  width: calc(var(--t-w) * var(--u));
  height: 100%;
  margin-right: calc(var(--t-gap) * var(--u));
}
.ticker__track img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: calc(var(--t-rad) * var(--u));
}

@media (max-width: 999px) {                     /* tablet */
  .hero__band { display: none; }
  .hero__wave { top: calc(-100 * var(--u)); height: calc(768 * var(--u)); }
  .hero__title { --x: 405; --y: 258; --w: 607; --fs: 62; --lh: 72; }
  .hero__sticker { --x: 66; --y: 211; }
  .hero__sticker .d--bubble { --ox: 0;   --oy: 17;  --w: 170; }
  .hero__sticker .d--mug    { --ox: -13; --oy: -35; --w: 69; }
  .hero__sticker .d--text   { --ox: 0;   --oy: 16;  --fs: 15.17; --lh: 24; }
  .hero__blob { --x: 756; --y: 363; --w: 129; --h: 129; }
  .hero__blob .blob__text { --fs: 16; --lh: 16.85; --tx: 1.5; --ty: 3; }
  .ticker { --t-top: 350; --t-h: 353; --t-w: 233; --t-gap: 24; --t-rad: 16; --t-dur: 43s; }
}
@media (max-width: 599px) {                     /* phone */
  .hero__wave { top: calc(-157 * var(--u)); height: calc(707 * var(--u)); }
  .br-phone { display: inline; }
  .hero__title { --x: 195; --y: 186; --w: 333; --fs: 44; --lh: 52; color: var(--cream); }
  .hero__sticker { --x: 52.5; --y: 295.5; }
  .hero__sticker .d--bubble { --ox: 5.5; --oy: 13;    --w: 138; --r: -17deg; }
  .hero__sticker .d--mug    { --ox: -18; --oy: -23.5; --w: 56; }
  .hero__sticker .d--text   { --ox: 5;   --oy: 13.5;  --fs: 12.31; --lh: 19; --r: -31deg; }
  .hero__blob { --x: 324.5; --y: 299.5; --w: 129; --h: 129; }
  .hero__blob .blob__text { --tx: 0; --ty: 2; }
  .ticker { --t-top: 280; --t-h: 266; --t-w: 176; --t-gap: 12; --t-rad: 12; --t-dur: 31s; }
}


/* 4b. COZY CORNER --------------------------------------------------------- */

.cozy__title {
  --x: 591.5; --y: 299; --w: 901; --fs: 92; --lh: 106;
  color: var(--brown);
  white-space: nowrap;
  z-index: 2;                 /* headline sits on top of the photo */
}
.cozy__title span { display: block; }
.cozy__title .l2 { padding-left: calc(351 * var(--u)); }

.cozy__flower { --x: 422;  --y: 689;  --w: 606; --h: 606; object-fit: contain; }
.cozy__photo--a { --x: 1004; --y: 472;  --w: 364; --h: 493; --r: 9deg; border-radius: calc(40 * var(--u)); }
.cozy__photo--b { --x: 853;  --y: 1263; --w: 376; --h: 480; --r: 7deg; border-radius: calc(40 * var(--u)); }
.cozy__text     { --x: 1050; --y: 874;  --w: 512; --fs: 20; --lh: 26; }

.cozy__sticker { --x: 351; --y: 1175; }
.cozy__sticker .d--bubble { --ox: 32;     --oy: -12.4; --w: 277; }
.cozy__sticker .d--bag    { --ox: -109.1; --oy: 20.7;  --w: 121; }
.cozy__sticker .d--text   {
  --ox: 38.8; --oy: -16.5; --r: -14deg; --fs: 27.03; --lh: 37;
  font-weight: 700; color: #FFEDF5;
}

@media (max-width: 999px) {                     /* tablet */
  .cozy__title { --x: 338.25; --y: 128.5; --w: 604.5; --fs: 62; --lh: 59; }
  .cozy__title .l2 { padding-left: calc(233.5 * var(--u)); }
  .cozy__flower   { --x: 205; --y: 418; --w: 400; --h: 400; }
  .cozy__photo--a { --x: 606; --y: 241; --w: 242; --h: 328; border-radius: calc(24 * var(--u)); }
  .cozy__photo--b { --x: 659; --y: 914; --w: 250; --h: 319; border-radius: calc(24 * var(--u)); }
  .cozy__text     { --x: 576; --y: 559; --w: 381; --fs: 16; --lh: 24; }
  .cozy__sticker { --x: 180; --y: 741; }
  .cozy__sticker .d--bubble { --ox: 23;  --oy: -8;   --w: 208; }
  .cozy__sticker .d--bag    { --ox: -82; --oy: 16;   --w: 91; }
  .cozy__sticker .d--text   { --ox: 29;  --oy: -11.5; --fs: 20.3; --lh: 28; }
}
@media (max-width: 599px) {                     /* phone */
  .cozy__title { --x: 195.5; --y: 113.5; --w: 341; --fs: 44; --lh: 49; }
  .cozy__title .l2 { padding-left: calc(78 * var(--u)); }
  .cozy__flower   { --x: 19;  --y: 503; --w: 300; --h: 300; }
  .cozy__photo--a { --x: 255; --y: 278.5; --w: 188; --h: 255; }
  .cozy__photo--b { --x: 255; --y: 984.5; --w: 187; --h: 249; }
  .cozy__text     { --x: 269; --y: 626; --w: 200; --fs: 14; --lh: 22; }
  .cozy__sticker { --x: 109; --y: 799; }
  .cozy__sticker .d--bubble { --ox: 16.5; --oy: -2.5; --w: 147; }
  .cozy__sticker .d--bag    { --ox: -59.5; --oy: 11.5; --w: 63; }
  .cozy__sticker .d--text   { --ox: 20.8; --oy: -4.5; --fs: 14.35; --lh: 20; --r: -12deg; }
}


/* 4c. COFFEE -------------------------------------------------------------- */

.coffee__wave {
  position: absolute; left: 0;
  top: calc(-101 * var(--u));
  width: 100%;
  height: calc(932 * var(--u));
}

.coffee__arc {
  --x: 367; --y: 211; --w: 508; --h: 258;
  overflow: visible;
}
.coffee__arc text {
  font-family: var(--font-curve);
  font-size: 70px;
  fill: var(--cream);
  letter-spacing: 0.02em;
}
.coffee__arch {
  --x: 369; --y: 382; --w: 334; --h: 420;
  border-radius: calc(var(--w) * var(--u) / 2) calc(var(--w) * var(--u) / 2) calc(22 * var(--u)) calc(22 * var(--u));
}
.coffee__text { --x: 808; --y: 551; --w: 484; --fs: 20; --lh: 28; color: #fff; }
.coffee__wide { --x: 960; --y: 839; --w: 676; --h: 341; border-radius: calc(40 * var(--u)); }

.coffee__blob { --x: 1181; --y: 214; --w: 210; --h: 210; }
.coffee__blob .blob__text { --fs: 29.91; --lh: 27; --fw: 700; --tx: 1.5; --ty: -0.5; }

@media (max-width: 999px) {                     /* tablet */
  .coffee__wave { top: calc(-58 * var(--u)); height: calc(738 * var(--u)); }
  .coffee__arc  { --x: 211; --y: 193; --w: 401; --h: 203; }
  .coffee__arch { --x: 211; --y: 321; --w: 250; --h: 314; }
  .coffee__text { --x: 546; --y: 397; --w: 389; --fs: 16; --lh: 24; }
  .coffee__wide { --x: 563; --y: 677; --w: 400; --h: 202; border-radius: calc(24 * var(--u)); }
  .coffee__blob { --x: 658; --y: 110; --w: 210; --h: 210; }
}
@media (max-width: 599px) {                     /* phone */
  .coffee__wave { top: calc(-40 * var(--u)); height: calc(772 * var(--u)); }
  .coffee__arc  { --x: 154; --y: 114.5; --w: 320; --h: 155; }
  .coffee__arch { --x: 153; --y: 216.5; --w: 200; --h: 251; }
  .coffee__text { --x: 150; --y: 498; --w: 250; --fs: 14; --lh: 22; }
  .coffee__wide { --x: 306.5; --y: 728; --w: 317; --h: 160; }
  .coffee__blob { --x: 314.5; --y: 338.5; --w: 119; --h: 119; }
  .coffee__blob .blob__text { --fs: 18; --lh: 24; --tx: 1.5; --ty: 0; }
}


/* 4d. THE FUN ------------------------------------------------------------- */

.fun__half  { --x: 720; --y: 1160; --w: 2437; --h: 888; }
.fun__title {
  --x: 720; --y: 164; --w: 341; --fs: 92; --lh: 92;
  text-align: center;
  color: var(--brown);
  white-space: nowrap;
}
.fun__text  { --x: 720; --y: 324; --w: 784; --fs: 20; --lh: 26; text-align: center; }

.fun__photo { border-radius: calc(var(--rad, 27) * var(--u)); }
.fun__photo--1 { --x: 554;  --y: 647; --w: 265; --h: 401; --r: -6deg; }
.fun__photo--2 { --x: 925;  --y: 647; --w: 265; --h: 401; --r: 2deg; }
.fun__photo--3 { --x: 1292; --y: 672; --w: 265; --h: 451; --r: -5deg; }
.fun__photo--4 { --x: 161;  --y: 678; --w: 265; --h: 438; --r: 12deg; }

.fun__cup { --x: 743; --y: 705; }
.fun__cup .d--cup { --ox: 0; --oy: 0; --w: 176; }

@media (max-width: 999px) {                     /* tablet */
  .fun__half  { --x: 405; --y: 759.5; --w: 1359; --h: 451; }
  .fun__title { --x: 405; --y: 144; --w: 229; --fs: 62; --lh: 72; }
  .fun__text  { --x: 405; --y: 280; --w: 680; --fs: 16; --lh: 24; }
  .fun__photo--1 { --x: 298; --y: 505; --w: 170; --h: 257; }
  .fun__photo--2 { --x: 505; --y: 505; --w: 170; --h: 257; }
  .fun__photo--3 { --x: 718; --y: 521; --w: 170; --h: 289; }
  .fun__photo--4 { --x: 71;  --y: 516; --w: 170; --h: 281; }
  .fun__cup { --x: 405; --y: 540; }
  .fun__cup .d--cup { --w: 131; }
}
@media (max-width: 599px) {                     /* phone */
  .fun__photo { --rad: 8; }
  .fun__half  { --x: 195; --y: 608.5; --w: 667; --h: 301; }
  .fun__title { --x: 195; --y: 124; --w: 163; --fs: 44; --lh: 52; }
  .fun__text  { --x: 195; --y: 258; --w: 350; --fs: 14; --lh: 22; }
  .fun__photo--1 { --x: 146;   --y: 445; --w: 92; --h: 139; }
  .fun__photo--2 { --x: 260.5; --y: 445; --w: 92; --h: 139; }
  .fun__photo--3 { --x: 366.5; --y: 455; --w: 92; --h: 156; }
  .fun__photo--4 { --x: 29;    --y: 453; --w: 92; --h: 152; }
  .fun__cup { --x: 195; --y: 461.5; }
  .fun__cup .d--cup { --w: 62; }
}


/* 4e. FOOTER -------------------------------------------------------------- */

.footer__wave {
  --wl: -14;
  position: absolute;
  left: calc(var(--wl) * var(--u));
  top: calc(-59 * var(--u));
  width: calc(100% - 2 * var(--wl) * var(--u));
  height: calc(689 * var(--u));
}
.footer__logo { --x: 168; --y: 95; --w: 140; --h: 75; object-fit: contain; }

/* Address / hours / phone */
.info {
  --x: 98; --y: 166; --w: 450; --row: 107; --icon: 44; --gap: 24; --tw: 327;
  position: absolute;
  left: calc(50% + (var(--x) - var(--dw) / 2) * var(--u));
  top:  calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  color: #fff;
}
.info__row {
  position: relative;
  display: flex; align-items: center;
  gap: calc(var(--gap) * var(--u));
  height: calc(var(--row) * var(--u));
}
.info__row:not(:last-child)::after {            /* thin divider line */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: url("../assets/svg/divider.svg") 0 0 / 100% 100% no-repeat;
}
.info__icon { flex: none; width: calc(var(--icon) * var(--u)); height: calc(var(--icon) * var(--u)); }
.info__text { --fs: 20; --lh: 28; width: calc(var(--tw) * var(--u)); }
.info__text a { text-decoration: none; }

/* Stay Connected flower + social links.  --x/--y = center of the flower */
.social { --x: 1041; --y: 256; --w: 443; --h: 442; height: calc(var(--h) * var(--u)); color: var(--cream); }
.social__flower { position: absolute; inset: 0; width: 100%; height: 100%; }
.social__btn {
  position: absolute;
  left: calc(50% + var(--ox) * var(--u));
  top:  calc(50% + var(--oy) * var(--u));
  width: calc(var(--cw) * var(--u)); height: calc(var(--ch) * var(--u));
  transform: translate(-50%, -50%);
  border-radius: 51.55px;
  background: var(--social);
  --cw: 91; --ch: 90;
  transition: transform 0.2s ease;
}
.social__btn:hover { transform: translate(-50%, -50%) scale(1.07); }
.social__btn img {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--iw) * var(--u)); height: auto;
  transform: translate(-50%, -50%) translate(calc(var(--ix, 0) * var(--u)), calc(var(--iy, 0) * var(--u)));
}
.social__btn--yelp      { --ox: -0.5;  --oy: -170; --iw: 52; --ix: 5.5;  --iy: -3; }
.social__btn--instagram { --ox: -118.5; --oy: -120; --iw: 57; --ix: -1.5; --iy: -1; }
.social__btn--facebook  { --ox: 121.5; --oy: -120; --iw: 45; --ix: -0.5; --iy: 0; }
.social__title {
  --fs: 72; --lh: 78;
  position: absolute;
  left: calc(50% + 12 * var(--u)); top: calc(50% - 4 * var(--u));
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.social__title span {
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.1em;
}
.social__text {
  --fs: 16; --lh: 22;
  position: absolute;
  left: calc(50% + 125 * var(--u)); top: calc(50% + 85 * var(--u));
  width: calc(345 * var(--u));
  transform: translate(-50%, -50%);
  text-align: left;
}

/* Brown bar at the very bottom */
.legal {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 74px;
  background: var(--bar);
  color: var(--cream);
  font-size: 16px; line-height: 26px;
}
.legal__inner {
  width: calc(1040 * var(--u)); height: 100%;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; align-content: center;
}
.legal__links { display: flex; gap: 24px; }
.legal a { text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal__credit { color: #fff; }

@media (max-width: 999px) {                     /* tablet */
  .footer__wave { --wl: -8; height: calc(614 * var(--u)); }
  .footer__logo { --x: 84; --y: 79; }
  .info { --x: 14; --y: 130; --w: 340; --row: 99; --icon: 40; --gap: 8.5; --tw: 327; }
  .info__text { --fs: 16; --lh: 24; }
  .info__text--hours { --fs: 20; }
  .social { --x: 600; --y: 220; --w: 300; --h: 299; }
  .social__btn { --cw: 60; --ch: 59; }
  .social__btn--yelp      { --ox: 0;   --oy: -114.5; --iw: 40; --ix: 3;  --iy: -2.5; }
  .social__btn--instagram { --ox: -81; --oy: -82.5;  --iw: 48; --ix: -1; --iy: -0.5; }
  .social__btn--facebook  { --ox: 82;  --oy: -82.5;  --iw: 40; --ix: 0;  --iy: 0; }
  .social__title { --fs: 48; --lh: 56; left: calc(50% + 14 * var(--u)); }
  .social__text  { left: calc(50% + 66.5 * var(--u)); width: calc(311 * var(--u)); }
  .legal__inner { width: calc(690 * var(--u)); }
}
@media (max-width: 599px) {                     /* phone */
  .footer__wave { --wl: -4; height: calc(878 * var(--u)); }
  .footer__logo { --x: 95; --y: 77.5; }
  .info { --x: 25; --y: 128.5; --w: 340; --row: 91; --icon: 32; --gap: 8; --tw: 300; }
  .info__text { --fs: 14; --lh: 20; }
  .info__text--hours { --fs: 20; }
  .social { --x: 195; --y: 556.5; }
  .social__title { --fs: 44; left: 50%; top: calc(50% - 3.5 * var(--u)); }
  .social__text  { left: calc(50% + 0.5 * var(--u)); top: calc(50% + 85.5 * var(--u)); }
  .legal { font-size: 12px; line-height: 20px; }
  .legal__inner { width: calc(344 * var(--u)); }
  .legal__links { width: 100%; justify-content: space-between; }
  .legal__credit { width: 100%; text-align: center; margin-top: 4px; }
}


/* 5. ANIMATIONS ----------------------------------------------------------- */

/* Pieces slide/fade in as you scroll to them (main.js adds .is-visible) */
.js .reveal {
  opacity: 0;
  translate: var(--from-x, 0px) var(--from-y, 0px);
  transition: opacity 0.9s ease, translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .reveal[data-reveal="up"]    { --from-y: 150px; }
.js .reveal[data-reveal="left"]  { --from-x: -150px; }
.js .reveal[data-reveal="right"] { --from-x: 150px; }
.js .reveal.is-visible { opacity: 1; translate: 0 0; }

@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes wiggle {
  0%, 100% { rotate: 0deg; }
  50%      { rotate: 20deg; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track, .blob__shape, .wiggle { animation: none; }
  .js .reveal { opacity: 1; translate: 0 0; transition: none; }
}


/* 6. WORDPRESS ------------------------------------------------------------ */
/* When you are logged in, WordPress shows a black admin bar at the top: keep the menu pill below it */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Plain pages (anything that is not the home page) */
.lrc-generic { padding: 190px 24px 150px; background: var(--pink); color: var(--text); }
.lrc-generic__inner { max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 1.7; }
.lrc-generic h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 7vw, 72px); line-height: 1.1; color: var(--brown); margin: 0 0 24px; }
.lrc-generic a { color: var(--navy); }
.lrc-generic--center { text-align: center; }
.lrc-button { display: inline-block; padding: 16px 32px; border-radius: 100px; background: var(--navy); color: var(--cream) !important; font-weight: 800; text-decoration: none; }
.lrc-generic img { max-width: 100%; height: auto; }