/* ============================================================
   BOOTHIE — stylesheet

   Built to match "Boothie website 2.png".
   The mockup is a 1366px-wide canvas: 6 rows of 768px, three
   columns, plus a 156px footer bar. Every size below is written
   as a percentage of the viewport width so the whole thing
   scales exactly like the mockup at any screen size.

   Mobile rules are in section 13 at the bottom.
   ============================================================ */

/* ---------- 0. THE HEADING FONT ----------
   Cubao Narrow, loaded from your cubaonarrow/ folder.
   The other two cuts (regular / wide) are in there too — to use one,
   copy this block, change the file name and the font-family name. */
@font-face{
  font-family: 'Cubao Narrow';
  src: url('cubaonarrow/cubao-free-narrow.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ---------- 1. COLOURS + FONTS ---------- */
:root{
  --pink:  #E4BCC6;
  --brown: #51473F;
  --cream: #FDF3E8;

  /* Used ONLY for the BOOTHIE wordmark and CRASH YOUR PARTY.
     Anton stays as the fallback if the font file ever fails to load. */
  --font-head: 'Cubao Narrow', 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Roboto Mono', monospace;

  /* one stripe in the mockup = 69px on a 1366px canvas */
  --stripe: 5.05vw;
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--pink);
  color: var(--brown);
  font-family: var(--font-body);
  line-height: 1.65;
  letter-spacing: 0.06em;
  -webkit-font-smoothing: antialiased;
}

img{ display: block; max-width: 100%; }


/* ---------- 2. THE GRID ----------
   Three equal columns. Each cell keeps the mockup's tile
   proportion of 455 x 768, so every row is the same height
   and the grid stays symmetrical. */
.row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cell{
  aspect-ratio: 455 / 768;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cell--pink   { background: var(--pink); }
.cell--pad    { padding: 8% 10%; }
.cell--center { align-items: center; text-align: center; }

.cell--photo img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(0.45) contrast(0.95);
}

/* the cream/pink vertical stripe panels */
.cell--stripes{
  background: repeating-linear-gradient(
    90deg,
    var(--cream) 0 var(--stripe),
    var(--pink)  var(--stripe) calc(var(--stripe) * 2)
  );
}


/* ---------- 3. HERO ---------- */
.cell--photos{
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  background: var(--pink);
}
.ph{
  width: 56%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;                    /* "slightly transparent" */
  filter: sepia(0.5) contrast(0.92);
  flex: none;
}
.ph--b{ margin-left: -12%; }        /* the overlap */

/* crop each hero photo to the part the mockup shows */
.row--hero .cell--photos:first-child .ph--a{ object-position: 20% center; }  /* the PHOTO pillar */
.row--hero .cell--photos:first-child .ph--b{ object-position: 55% center; }
.row--hero .cell--photos:last-child  .ph--a{ object-position: 42% center; }
.row--hero .cell--photos:last-child  .ph--b{ object-position: 12% center; }  /* the photo-strip wall */

.hero__panel{
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 7% 7%;
}

.hero__brand{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__hey{
  margin: 0 0 0.6vw 0.3vw;
  font-size: clamp(11px, 1.24vw, 21px);
  letter-spacing: 0.22em;
}

.hero__wordmark{
  writing-mode: vertical-rl;
  text-orientation: upright;        /* letters stay upright, stacked */
  font-family: var(--font-head);
  font-size: clamp(48px, 7.2vw, 118px);
  line-height: 1;
  /* Cubao Narrow: caps are 0.63em tall and upright vertical text advances
     1.0em per letter. This tightens the stack to the mockup's proportions
     (7 letters over ~62% of the panel) with a small gap between letters. */
  letter-spacing: -0.31em;
  font-weight: 400;
  margin: 0;
}

.hero__nav{
  display: flex;
  flex-direction: column;
  gap: 1.4vw;
  width: 48%;
}

.hero__handle{
  position: absolute;
  right: 7%;
  bottom: 5.5%;
  display: inline-flex;
  align-items: center;
  gap: 0.5vw;
  color: var(--brown);
  text-decoration: none;
  font-size: clamp(9px, 1.02vw, 17px);
  letter-spacing: 0.1em;
}
.hero__handle img{ height: 1.5em; width: auto; }


/* ---------- 4. BUTTONS ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: clamp(10px, 1.46vw, 24px);
  font-weight: 400;
  letter-spacing: 0.1em;
  padding: 0.75em 1.4em;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.btn--outline{
  background: transparent;
  border: 1.5px solid var(--brown);
  color: var(--brown);
}
.btn--outline:hover{ background: var(--brown); color: var(--pink); }

.btn--solid{
  background: var(--brown);
  border: 1.5px solid var(--brown);
  color: var(--cream);
}
.btn--solid:hover{ background: transparent; color: var(--brown); }

.btn--full{ width: 100%; }

/* The mobile-only FIND ME (it sits under the address on phones). Desktop uses
   the one in the copy cell instead - both are switched in section 13. */
.find-me-mobile{ display: none; }


/* ---------- 5. TEXT ---------- */
.hashtag{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(17px, 2.42vw, 40px);
  letter-spacing: 0.02em;
  margin: 0 0 1.8em;
}

.body{
  font-size: clamp(10px, 1.61vw, 26px);
  letter-spacing: 0.05em;
  line-height: 1.75;
  margin: 0;
  max-width: 13.5em;    /* the mockup's line length */
  /* Each paragraph is a centred flex item, so a short one would shrink to its
     text and sit indented from the longer ones. This makes them all the same
     width so their left edges line up and justify has a consistent column. */
  width: 100%;
  /* Copy is set in caps like the rest of the page. Doing it here rather than
     typing it in caps keeps index.html readable and makes any new copy match
     without being retyped. */
  text-transform: uppercase;
  text-align: left;
}
/* space between stacked paragraphs of copy */
.body + .body{ margin-top: 1.2em; }

.eyebrow{
  font-size: clamp(9px, 1.02vw, 17px);
  letter-spacing: 0.28em;
  opacity: 0.65;
  margin: 0 0 0.8em;
}

.whereblock{ margin: 0; }
/* the note line is now a link; it keeps the plain text look of the address */
a#venue-until{ color: inherit; text-decoration: none; display: block; }

/* The follow line is long enough to run under the photo-strip drawing in the
   corner - at both widths, it turned out. Capping it wraps the text early so
   it always stops short of the drawing. The address lines above it sit higher
   than the drawing, so they are left free to run full width. */
#venue-until{ max-width: 72%; }
.where{
  font-size: clamp(10px, 1.39vw, 23px);
  letter-spacing: 0.06em;
  line-height: 1.5;
  margin: 0;
}

.occasions{
  list-style: none;
  margin: 0;
  padding: 0;
}
.occasions li{
  font-size: clamp(10px, 1.39vw, 23px);
  letter-spacing: 0.1em;
  padding: 0.55em 0;
}

/* the decorative photo-strip drawing */
.strip-art{
  position: absolute;
  right: 9%;
  bottom: 5%;
  width: 13%;
  height: auto;
  transform: rotate(9deg);
  opacity: 0.9;
}

/* p4, the two prints in section 4. Same pattern as .strip-art: positioned
   here, then sized and placed per breakpoint in sections 12b and 13. */
.borrow-art{
  position: absolute;
  height: auto;
  opacity: 0.9;
}

/* the FIND ME button sits above the paragraph in this cell */
.cell--center .btn--solid{ margin-bottom: 1.6em; }
/* ...except where the button follows the text (ENQUIRE / INVITE ME) */
.cell--center .body + .btn--solid{ margin: 1.8em 0 0; }


/* ---------- 6. CRASH YOUR PARTY ---------- */
.crash-cell{ align-items: flex-start; justify-content: center; }
.crash{
  font-family: var(--font-head);
  font-weight: 400;
  /* Cubao Narrow is very condensed, so this runs much larger than a
     normal display face would to fill the panel as the mockup does */
  font-size: clamp(60px, 8.4vw, 140px);
  line-height: 1.34;
  letter-spacing: 0.01em;
  margin: 0;
}


/* ---------- 7. EVENTS ---------- */
.events{
  align-items: center;
  justify-content: center;
  padding: 8% 6%;
}

.events__title{
  position: absolute;
  left: 7%;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(14px, 2.2vw, 36px);
  letter-spacing: 0.24em;
  margin: 0;
}

.events__list{
  display: flex;
  flex-direction: column;
  gap: 2.4em;
  width: 74%;
  margin-left: 12%;
  text-align: left;
}

.event__date{
  font-weight: 700;
  font-size: clamp(12px, 1.9vw, 31px);
  letter-spacing: 0.04em;
  margin: 0 0 0.7em;
  /* caps as well - Cubao Narrow is a display face and mixed case reads badly
     in it, and dates themselves have no case to lose */
  text-transform: uppercase;
}
.event__body{
  text-align: left;   /* same as the copy blocks in the other sections */
  font-size: clamp(9px, 1.32vw, 22px);
  letter-spacing: 0.05em;
  line-height: 1.6;
  margin: 0 0 1.4em;
  /* caps like the rest of the page, so whatever is typed into the EVENTS list
     in script.js comes out matching without having to be typed in caps */
  text-transform: uppercase;
}
/* The button is inline-flex, so it used to be centred by the column's
   text-align. Now that the text is left-aligned it needs real centring of its
   own - hence the block-level display and auto margins.
   The column sits right of centre to clear the vertical EVENTS title, so
   centring inside the column alone would leave the button right of the panel's
   middle; the -8.33% pulls it back to the centre of the whole panel. That
   figure holds at both breakpoints despite their different panel padding. */
/* Two wordings live in the page; each width shows one. */
.event__body--narrow{ display: none; }

.event .btn{
  display: flex;
  width: fit-content;
  /* 10% wider: the button is 117px at 28px of side padding, so the extra
     12px splits as 6px a side on top of the base 1.4em */
  padding-left: calc(1.4em + 6px);
  padding-right: calc(1.4em + 6px);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left: -13.9%;
}


/* ---------- 8. CONTACT ---------- */
.pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--brown);
  border-radius: 999px;
  padding: 0.7em 1.5em;
  margin-bottom: 0.9em;
  color: var(--brown);
  text-decoration: none;
  font-size: clamp(9px, 1.32vw, 22px);
  letter-spacing: 0.06em;
  align-self: flex-start;
  max-width: 100%;
  transition: background 0.2s, color 0.2s;
}
.pill:hover{ background: var(--brown); color: var(--pink); }

.socials{ gap: 2.2em; }
.social{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
  color: var(--brown);
  text-decoration: none;
  font-size: clamp(9px, 1.32vw, 22px);
  letter-spacing: 0.1em;
}
.social svg{ width: 3.1vw; min-width: 26px; max-width: 52px; height: auto; }


/* ---------- 9. FOOTER ---------- */
.footer{
  background: var(--brown);
  color: var(--cream);
  min-height: 11.4vw;               /* 156px on a 1366 canvas */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.4vw 8vw;
  text-align: center;
}
.footer__quote{
  margin: 0 0 0.4em;
  font-size: clamp(9px, 1.1vw, 18px);
  letter-spacing: 0.1em;
}
.footer__sig{
  margin: 0;
  font-size: clamp(8px, 0.95vw, 16px);
  letter-spacing: 0.1em;
  opacity: 0.85;
}
.footer__doodle{
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: 12vw;
  min-width: 100px;
  max-width: 180px;
  height: auto;
  opacity: 0.9;
}


/* ---------- 10. BACK TO TOP ---------- */
.to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--cream);
  background: var(--brown);
  color: var(--cream);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  z-index: 50;
}
.to-top svg{ width: 20px; height: 20px; }
.to-top.is-visible{ opacity: 1; visibility: visible; }


/* ---------- 11. THE POP-UP ---------- */
.modal{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
}
.modal[hidden]{ display: none; }

.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(81, 71, 63, 0.75);
}

.modal__box{
  position: relative;
  background: var(--pink);
  border: 1.5px solid var(--brown);
  border-radius: 18px;
  width: 100%;
  max-width: 460px;
  max-height: 90svh;
  overflow-y: auto;
  padding: 30px 22px 26px;
  font-size: 13px;
}

.modal__x{
  position: absolute;
  top: 10px; right: 14px;
  background: none;
  border: 0;
  font-size: 30px;
  line-height: 1;
  color: var(--brown);
  cursor: pointer;
}

.modal__title{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.08em;
  margin: 0 0 22px;
}

.thanks__body{ font-size: 12px; letter-spacing: 0.1em; margin: 0 0 10px; text-transform: uppercase; }
/* line two of the thank-you: the hashtag, set in the display face like the
   section headings. Cubao ships only weight 400. */
.thanks__tag{
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}
/* line three: the heart drawing, centred, small enough not to crowd the box */
.thanks__art{
  display: block;
  width: 40px;
  height: auto;
  margin: 0 auto 22px;
}
/* The thank-you block is centred horizontally AND vertically. The box is
   sized by its form, so the thanks view is given a floor tall enough to read
   as a panel and its content is centred within it. */
#thanks-view,
#enquire-thanks-view,
#invite-thanks-view,
#sub-thanks-view{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 260px;
}
#thanks-view[hidden],
#enquire-thanks-view[hidden],
#invite-thanks-view[hidden],
#sub-thanks-view[hidden]{ display: none; }
/* The disco ball decorates the form; once the thanks view is showing, its
   centred text would run under the ball, so the ball steps out of the way. */
#sub-modal:has(#sub-thanks-view:not([hidden])) .sub__disco{ display: none; }

.modal .btn{ font-size: 12px; }


/* ---------- 12. FORM ---------- */
.field{ display: block; margin-bottom: 16px; }

.field__label{
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  margin-bottom: 6px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea{
  width: 100%;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--brown);
  background: var(--cream);
  border: 1.5px solid var(--brown);
  border-radius: 10px;
  padding: 10px 12px;
  letter-spacing: 0.06em;
}
/* Native selects and the date picker render 2px taller than text inputs at
   the same padding. A fixed height makes every single-line control identical;
   the textarea is multi-line and keeps its own height. */
.field input:not([type="checkbox"]),
.field select{ height: 46px; }
.field textarea{ resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: 2px solid var(--brown);
  outline-offset: 1px;
}

.field input:disabled{ opacity: 0.4; }

.check{
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  cursor: pointer;
}
.check input[type="checkbox"]{ width: 18px; height: 18px; }   /* was 15px */
.check input{ accent-color: var(--brown); width: 15px; height: 15px; }

.marketing-choice{
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  min-width: 0;
}
.marketing-choice legend{
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.5;
  margin-bottom: 8px;
}
.marketing-choice label{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 22px;
  font-size: 12px;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.marketing-choice input{ accent-color: var(--brown); width: 18px; height: 18px; }
.marketing-choice input:focus-visible{ outline: 2px solid var(--brown); outline-offset: 2px; }

.field__error{
  display: block;
  min-height: 14px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #8a2b2b;
  margin-top: 3px;
}

.form__status{
  min-height: 18px;
  font-size: 11px;
  letter-spacing: 0.1em;
  margin: 0 0 10px;
}
/* With nothing to say it reserved 28px between the message field and the
   button. Collapsed when empty; it still expands when a message appears. */
.form__status:empty{ min-height: 0; margin-bottom: 0; }

/* ---- subscribe pop-up ----
   Heading in the display face, lead in Roboto Mono like the rest of the copy.
   Cubao Narrow only ships weight 400 - a bolder value would be faked by the
   browser and smear on a condensed face. */
.modal__title--head{
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
#sub-submit{ font-size: 16px; }   /* the pop-up's own button, bigger than the form ones */
/* On hover the stroke thickens to the 3px the site's other buttons carry. The
   pop-up buttons sit at 1.5px at rest on purpose; the hover brings JOIN up to
   match the rest of the site. The colour invert it already gets from
   .btn--solid:hover. Thickening inward would shift the text, so the border
   grows while the padding shrinks by the same amount, and nothing moves. */
#sub-submit:hover{
  border-width: 3px;
  padding-top: calc(0.75em - 1.5px);
  padding-bottom: calc(0.75em - 1.5px);
}

/* the disco ball is desktop-only; section 12b shows and places it */
.sub__disco{ display: none; }
/* the envelope is phone-only; section 13 shows and places it */
.sub__envelope{ display: none; }

.sub__lead{
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.7;
  margin: 0 0 22px;
  text-transform: uppercase;
}
.form__status.is-error{ color: #8a2b2b; }
.thanks__delivery-note{
  color: #8a2b2b;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 12px 0;
}


/* ============================================================
   12b. DESKTOP ONLY — 900px and up.

   Everything in here is invisible to phones. Section 13 below
   is the mobile half; the two never overlap, so a change made
   here can never leak onto mobile.
   ============================================================ */
@media (min-width: 900px){

  /* Every section is exactly one screen tall, whatever the screen is.
     This replaces the mockup's fixed 455:768 tile shape, which derived
     height from width and so overflowed on wide windows. */
  .row{ min-height: 100svh; height: auto; }
  .cell{ aspect-ratio: auto; }
  .row--hero{ height: 100svh; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .row--hero .cell{ min-height: 0; }

  /* The contact row and the footer share ONE screen. The wrapper is the
     full screen; the footer keeps its natural height and the contact grid
     takes whatever is left, so no fixed pixel maths to go stale. */
  .lastscreen{
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }
  .lastscreen .row{ height: auto; flex: 1; min-height: 480px; }
  .lastscreen .footer{ flex: none; }

  /* Type is sized in vw (width) but the boxes are now vh (height), so the
     big display faces need a height cap too or they overflow a short window.
     min() picks whichever is smaller, so vw still wins on tall screens. */
  .hero__wordmark{ font-size: min(clamp(48px, 7.2vw, 118px), 11svh); letter-spacing: 0; }
  .crash        { font-size: min(clamp(60px, 8.4vw, 140px), 15vh); }

  /* padding % resolves against WIDTH, so on a wide window the top/bottom
     padding was eating the height the content now needs */
  .cell--pad{ padding: 5% 10%; }

  /* section 1: "hey" centred over the wordmark, and the pair
     lifted to the top of the panel so BOOTHIE clears the fold */
  .hero__brand{
    align-items: center;
    align-self: flex-start;
    margin-top: 1.25rem;   /* nudge down from the top of the panel */
  }
  .hero__hey{
    margin: 0 0 0.6vw;
    font-size: clamp(13px, calc(1.24vw + 2px), 23px);
  }

  /* The three copy blocks (sections 2, 4, 5): smaller, wider, centred with
     air above and below. .socials is excluded - it is a cell--center too,
     but it holds the Instagram/WhatsApp icons, not copy. */
  .cell--center:not(.socials){ padding: 12% 8%; }
  .body{
    font-size: clamp(14px, 1.2vw, 19px);
    max-width: 22em;      /* was 13.5em - wider, so it reads as a block not a column */
  }

  /* the "until" line, quieter than the address above it */
  #venue-until{
    font-size: clamp(9px, 1.02vw, 17px);   /* same size as CURRENTLY AT */
    opacity: 0.65;                         /* same colour as CURRENTLY AT */
    text-transform: lowercase;
    margin-top: 0.7em;
  }

  /* section 3: EVENTS and the dates use the heading face, like BOOTHIE.
     Cubao only has weight 400, so 700 is dropped - it would fake-bold.
     Its caps are 0.63em (Roboto Mono's are 0.73em), so sizes go up to
     keep the same visual weight, and the vertical stack needs tightening
     because Cubao advances a full 1.0em per upright letter. */
  .events__title{
    font-family: var(--font-head);
    font-weight: 400;
    font-size: clamp(24px, 4.8vw, 78px);
    letter-spacing: 0;
  }
  .event__date{
    font-family: var(--font-head);
    font-weight: 400;
    font-size: clamp(16px, 2.5vw, 40px);
    letter-spacing: 0.02em;
  }
  /* the event text sits right of centre, as in the Canva design
     (was width 74% / margin-left 12%, which centred it in the panel) */
  .events__list{
    width: 72%;
    margin-left: 20%;
  }

  /* Section 3, matching the Canva design. Two things there that the build
     did not have: the stripe panel starts with a PART-WIDTH pink stripe
     (about 45% of one), and EVENTS is centred on the first full cream
     stripe instead of straddling the cream/pink edge.
     0.45 = the leading pink; 0.95 = the centre of the first cream stripe. */
  .cell--stripes{
    background-image: linear-gradient(90deg,
                        var(--cream) 0 50%,
                        var(--pink)  50% 100%);
    background-size: calc(var(--stripe) * 2) 100%;
    background-repeat: repeat;
    background-position-x: calc(var(--stripe) * 0.45);
  }
  .events__title{
    left: calc(var(--stripe) * 0.95);
    transform: translate(-50%, -50%);
  }

  /* Photos at 85% (the Canva transparency reading), so they sit back a
     little against the pink. .ph = the hero collage, .cell--photo img =
     every other photo. The three drawings are PNGs in images/drawing/
     and are deliberately not included. */
  .ph,
  .cell--photo img{ opacity: 0.85; }

  /* thinner background stripes (was 5.05vw). The EVENTS heading is anchored
     to this same variable, so it re-centres on the cream stripe by itself. */
  :root{ --stripe: 3.6vw; }

  /* section 4: brown panels with pink type, per the Canva design */
  #borrow-me .cell--pink{
    background: var(--brown);
    color: var(--pink);
  }
  /* ENQUIRE inverts to suit its new background: pink fill, brown text */
  #borrow-me .btn--solid{
    background: var(--pink);
    border-color: var(--pink);
    color: var(--brown);
  }
  #borrow-me .btn--solid:hover{
    background: transparent;
    color: var(--pink);
  }

  /* p4 - the two prints, tucked into the bottom-right corner of this column.
     .cell is position:relative already, so this anchors to the column. */
  .borrow-art{ right: 8%; bottom: 6%; width: 20%; }

  /* ---- hero photos, desktop only. left1 / right1 already contain the two-
     photo overlap baked into one image, so each side shows ONE picture: the
     second <img> is hidden, the first fills the cell, and the overlap margin
     and per-photo crops for the old pair are switched off. Done as an
     override rather than by editing the <img src>, because the phone hero
     reuses the right-hand .ph--a and must keep its own photo. ---- */
  .row--hero .cell--photos .ph--b{ display: none; }
  .row--hero .cell--photos .ph--a{ width: 100%; object-position: center; }
  .row--hero .cell--photos:first-child .ph--a{ content: url('images/left1.webp'); }
  .row--hero .cell--photos:last-child  .ph--a{ content: url('images/right1.webp'); }
  /* the new composites carry their own tone; no transparency on the hero */
  .row--hero .cell--photos .ph--a{ opacity: 1; }
  /* Crop the pale corners baked into both composites at the hero edges. */
  .row--hero .cell--photos .ph--a{ transform: scale(1.12); }
  .row--hero .cell--photos:first-child .ph--a{ transform-origin: left center; }
  .row--hero .cell--photos:last-child .ph--a{ transform-origin: right center; }

  /* The right-hand events photo fills the whole panel, cropped from the right
     rather than centred, so the left of the picture stays put. */
  #events .cell--photo:last-child img{ object-fit: cover; object-position: left center; }

  /* Section 6: email + phone as real buttons, equal width (they stretch to
     the column, so they match by construction). They keep the old pill's
     text size - the email address is long and overflows the column at the
     full button size. */
  .btn.contact-btn{
    font-size: clamp(9px, 1.32vw, 22px);
    line-height: 1.6;   /* taller than the icon, so both buttons match height */
    gap: 0.6em;
  }
  .contact-btn + .contact-btn{ margin-top: 0.9em; }
  .btn.contact-btn svg{ width: 1.4em; height: 1.4em; flex: none; }

  /* the Instagram mark is on its own now, so it can be much bigger */
  .social svg{ width: 6vw; min-width: 48px; max-width: 96px; }

  /* Hover: the mark and the handle under it grow together. Scaling the whole
     link (not the svg) is what keeps them as one block, growing from its
     centre so nothing drifts sideways. */
  .social{ transition: transform 0.2s; }
  .social:hover{ transform: scale(1.1); }

  /* footer drawing, tilted 5 degrees clockwise, and smaller.
     translateY(-50%) has to stay - it is what vertically centres it. */
  .footer__doodle{
    width: 9vw;
    max-width: 135px;
    transform: translateY(-50%) rotate(5deg);
  }

  /* The drawing is position:absolute, so it was never what made the footer
     tall - this min-height was (11.4vw = 175px). Lowered so the bar is
     shorter and the contact grid above it gets the space back. */
  .footer{ min-height: 8vw; }


  /* buttons, every section: bigger type, thinner, heavier stroke (retro) */
  .hero__nav{ width: 60%; }
  .btn{
    font-size: clamp(12px, 1.72vw, 28px);
    padding: 0.45em 1.4em;
    line-height: 1;
  }
  .btn--outline,
  .btn--solid{ border-width: 3px; }

  /* ---- the quote pop-up: wider box, tighter rows, type up 20%.
     The form is one stacked column, so the space to close up is the gap
     between the field rows, not between columns. ---- */
  .modal__box{
    max-width: 620px;
    padding: 34px 30px 30px;
    font-size: 16px;
  }
  .field{ margin-bottom: 11px; }
  .modal__title{ font-size: 24px; }
  .modal__title--head{ font-size: 36px; }
  .sub__lead{ font-size: 14px; }

  /* ---- subscribe pop-up: the disco ball hangs in the top-right corner, and
     the heading and lead are capped so they wrap to two lines and stop short
     of it instead of running underneath. The close button is lifted so the
     ball never sits over it. ---- */
  .sub__disco{
    display: block;
    position: absolute;
    top: 0;
    right: 54px;              /* clear of the close button */
    width: 170px;
    height: auto;
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
  }
  #sub-modal .modal__title--head,
  #sub-modal .sub__lead{ max-width: 330px; }
  #sub-form-view,
  #sub-thanks-view{ position: relative; z-index: 1; }
  /* The close button keeps its absolute corner placement - making it relative
     would drop it into the flow at the top-left. It just needs to paint above
     the ball. */
  #sub-modal .modal__x{ z-index: 2; }
  .field__label{ font-size: 12px; }
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field input[type="date"],
  .field select,
  .field textarea{ font-size: 16px; }
  .field__error{ font-size: 12px; }
  .form__status{ font-size: 13px; }
  .thanks__body{ font-size: 14px; }
  .check{ font-size: 12px; }

  /* the quote pop-up keeps its own smaller scale — no retro treatment.
     Its font-size is already held at 12px by .modal .btn on line 470. */
  .modal .btn{
    padding: 0.75em 1.4em;
    line-height: inherit;
    border-width: 1.5px;
  }
}


/* ============================================================
   13. MOBILE — one column. Same colours, same fonts, same
   shapes; fewer photos, as agreed.
   ============================================================ */
@media (max-width: 899px){

  /* 3 of each colour across the screen: six stripes, so each is 100/6 vw */
  :root{ --stripe: 16.67vw; }

  body{ font-size: 19px; }

  .row{ grid-template-columns: 1fr; }

  .cell{
    aspect-ratio: auto;
    min-height: 88vw;
  }
  .cell--pad{ padding: 14% 11%; }

  /* 20% more air above and below, FINDBOOTHIE only */
  #find-me .cell--pad{ padding-top: 16.8%; padding-bottom: 16.8%; }

  .cell--photo{ min-height: 0; aspect-ratio: 1 / 1; }   /* square on phones */

  /* same 85% the desktop block uses, so the photos read identically */
  .ph,
  .cell--photo img{ opacity: 0.85; }

  .cell--hide-mobile{ display: none; }

  /* ---- hero: full-bleed photo with pink type over it (Canva page 2) ----
     Proportions measured off that design: wordmark about 22% from the left,
     buttons running 41%-83% across, handle beneath them. The mockup block is
     roughly 3:2 while a real phone is nearer 2:1, so horizontal placement is
     copied and vertical spacing is adapted. */
  .row--hero{
    position: relative;
    display: block;
    height: 100svh;          /* exactly one screen, never taller */
    overflow: hidden;
    background: var(--brown);
  }

  /* one photo fills the screen; the other three are not used here */
  .row--hero .cell--photos:first-child{ display: none; }
  .row--hero .cell--photos:last-child{
    position: absolute;
    inset: 0;
    width: auto;
    min-height: 0;
    aspect-ratio: auto;
    opacity: 1;
    background: transparent;
  }
  .row--hero .cell--photos:last-child .ph--b{ display: none; }
  .row--hero .cell--photos:last-child .ph--a{
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 3.jpg, cropped from the right so the striped pillar on the image's left
       falls outside the screen. With cover, 198px of the 588px drawn width is
       already off the sides; anchoring to the right puts all of it on the
       left, which hides the pillar without any zoom or transform. */
    /* window shifted toward the woman on the left, and zoomed 5%. The extra
       zoom widens the drawn image, so the left pillar stays off-screen even
       with the crop moved leftward. */
    object-position: 53% 50%;   /* 50% left a 4px sliver of the left pillar; 53% just covers it */
    transform: scale(1.05);
  }

  /* A soft brown veil between photo and type. The Canva design uses a darker
     image; this keeps the pink readable whichever photo you settle on. */
  .row--hero::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(81, 71, 63, 0.38);
    pointer-events: none;
  }
  .hero__panel{
    position: relative;      /* sits above the photo */
    z-index: 1;
    /* nav + handle are the only two things in normal flow here (the brand is
       positioned), so centring them as a column is what keeps the handle
       directly under the buttons instead of pinned near the bottom. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    height: 100svh;
    padding: 0;
    aspect-ratio: auto;
  }

  /* hey + BOOTHIE, pink, down the left */
  /* Back beside the buttons as before, but centred vertically on the screen
     instead of pinned near the top. */
  .hero__brand{
    position: absolute;
    left: 14%;                 /* the wordmark centre, measured off heroinspo */
    top: 50%;
    transform: translate(-50%, -50%);
    align-items: center;       /* hey centred over the wordmark */
    color: var(--pink);
  }
  .hero__hey{ font-size: 20px; margin: 0 0 12px 3px; color: var(--pink); }
  .hero__wordmark{
    font-size: min(19.9vw, 10.7vh);  /* 10% down again; vh cap guards landscape */
    letter-spacing: 0;              /* Canva spaces the letters apart, unlike desktop */
    line-height: 1;
    color: var(--pink);
  }

  /* buttons: pink filled with brown text, right of the wordmark */
  .hero__nav{
    position: relative;          /* in flow, so the handle still follows it */
    top: 5%;                     /* nudged down the screen */
    /* Canva put this at 40.7%-83.2%, but at the larger button size the text
       alone is wider than that column and the buttons rode over the wordmark.
       Widened just enough to clear it - the wordmark ends around 32%. */
    margin: 0 4% 0 36%;
    width: auto;
    max-width: none;
    gap: 14px;
  }
  /* hero: pink fill with a brown stroke */
  .row--hero .btn--outline{
    background: var(--pink);
    border-color: var(--brown);
    color: var(--brown);
  }
  /* hero buttons carry bigger type than the rest of the phone layout */
  /* Font size is the +20% you asked for; the side padding comes in so the
     buttons still fit beside the wordmark on a 390px phone. At 1.4em they were
     260px wide against about 250px of usable room. */
  .row--hero .btn{ font-size: clamp(18px, 5.6vw, 28px); padding: 0.6em 0.65em; }

  /* @heyBoothie and the heart, under the buttons - pink version of the drawing */
  .hero__handle{
    position: relative;          /* sits directly under the buttons */
    top: 10%;                    /* was 5%: moved down another 5% of the screen */
    /* the buttons' own column. The heart's ink ran 4px past the buttons' right
       edge, so the right margin is widened by that so both end on one line. */
    margin: 18px calc(4% + 4px) 0 36%;
    /* The base rule positions this absolutely with right/bottom offsets. Left
       in place they shift it sideways now that it is relative instead. */
    right: auto;
    bottom: auto;
    /* spans the buttons' column and hugs its right edge, so the text sits
       tight against the heart drawing */
    align-self: stretch;
    width: auto;
    justify-content: flex-end;
    font-size: 16px;
    gap: 6px;
    color: var(--pink);
  }
  .hero__handle img{ content: url('images/drawing/p2-trim-web.png'); }

  /* desktop's button proportions: thinner top-to-bottom, wider across, and a
     heavier stroke. Same values as section 12b. */
  .btn{
    font-size: 20px;
    padding: 0.45em 1.4em;
    line-height: 1;
  }
  .btn--outline,
  .btn--solid{ border-width: 3px; }

  /* the quote pop-up keeps its own smaller scale, exactly as on desktop */
  .modal .btn{
    padding: 0.75em 1.4em;
    line-height: inherit;
    border-width: 1.5px;
  }

  /* ---- text ---- */
  .hashtag{ font-size: clamp(23px, 6vw, 37px); margin-bottom: 1.6em; }
  .body   { font-size: 20px; max-width: 26em; }
  .eyebrow{ font-size: 14px; }
  .where  { font-size: 19px; }
  .occasions li{ font-size: 19px; }
  .crash  { font-size: clamp(68px, 23vw, 101px); line-height: 1.3; }

  /* BOOTHIE CRASH YOUR PARTY, centred on the phone */
  .crash-cell{ align-items: center; text-align: center; }

  /* the photo that follows INVITE ME is shown here (hidden at every other
     width by .cell--hide-mobile; the id beats that class) */
  /* 18.jpg above the events panel - it is the first cell in the HTML, so plain
     document order puts it there */
  #events .cell--photo:first-child{ display: flex; }

  /* 24.jpg above BOOTHIE CRASH YOUR PARTY - order pulls it in front of the
     striped heading cell, which comes first in the HTML */
  #crash-me .cell--photo{ display: flex; order: -1; }
  /* 9.jpg sits just before the BOOTHIECALL panel. It is the second cell in the
     HTML, so order pulls it in front of the first. */
  #call-me .cell--photo{ display: flex; order: -1; }

  /* the drawing now sits level with the writing rather than below it, so this
     cell no longer needs the extra height it had to make room for it */
  .cell--art{ justify-content: flex-start; min-height: 88vw; }
  .strip-art{ width: 12%; right: 8%; top: 34%; bottom: auto; }

  /* the "until" line, quieter - same colour as CURRENTLY AT, and lowercase */
  #venue-until{ opacity: 0.65; text-transform: lowercase; }

  /* FIND ME moves up under the address; the copy cell's one steps aside */
  .find-me-mobile{ display: inline-flex; align-self: flex-start; margin-top: 1.8em; }
  #map-button{ display: none; }

  /* p4, same drawing as desktop, in the bottom-right corner of its panel */
  /* sized off the screen width, floored and capped so it stays sensible on a
     small phone and does not balloon at the top of the mobile range */
  /* swapped to the left corner, and mirrored left-to-right so the prints face
     the other way while staying upright */
  .borrow-art{
    left: 8%;
    right: auto;
    bottom: 6%;
    width: clamp(72px, 24vw, 128px);
    transform: scaleX(-1);
  }

  /* ---- section 4 on the phone: BORROWBOOTHIE first, then ENQUIRE, and the
     photo between them dropped. Brown panels with pink type, as on desktop. */
  /* min-height:0 lets each panel end where its content ends - that 88vw floor
     was what left the gap between BORROWBOOTHIE and ENQUIRE */
  /* The row itself is brown too. The two panels meet on a fractional pixel
     (2481.125), and without this the pink page background bleeds through that
     seam as a hairline between them. */
  #borrow-me{ background: var(--brown); }
  #borrow-me .cell--pink{
    background: var(--brown);
    color: var(--pink);
    min-height: 0;
  }
  /* #BORROWBOOTHIE is the longest heading - 321px at 37px against a 304px
     column - so it alone ran 17px past the right margin. 34px brings it
     inside; the other two headings are shorter and stay at 37px. */
  #borrow-me .hashtag{ font-size: clamp(22px, 5.7vw, 34px); }
  #borrow-me .btn--solid{
    background: var(--pink);
    border-color: var(--pink);
    color: var(--brown);
  }
  #borrow-me .cell--photo{ display: none; }
  #borrow-me > .cell--pink.cell--pad:not(.cell--center){ order: 1; }  /* BORROWBOOTHIE */
  #borrow-me > .cell--center{ order: 2; }                             /* ENQUIRE */

  /* three occasions on the phone: WEDDING, BIRTHDAY and BRAND CAMPAIGN, so it
     is the middle two that drop rather than the last two */
  #borrow-me .occasions li:nth-child(3),
  #borrow-me .occasions li:nth-child(4){ display: none; }
  #borrow-me .occasions{ text-align: right; }   /* swapped sides with the drawing */

  /* The two panels are the same brown, so dropping the padding where they meet
     makes them read as one section instead of two with a gap between. */
  #borrow-me > .cell--pink.cell--pad:not(.cell--center){ padding-bottom: 0; }
  /* a small breath between PARTY and the paragraph - put on the second panel
     so the first panel keeps its height and the drawing does not shift */
  #borrow-me > .cell--center{ padding-top: 6%; }

  /* ---- events ---- */
  /* Same layout as desktop: EVENTS runs vertically down the left with the
     text to the right of it. Dropping the position and writing-mode overrides
     hands that back to the base rules. No side padding, so the striped panel
     spans the whole screen width.
     Cubao Narrow ships only weight 400 - the base 700 must stay dropped or the
     browser fakes a bold and it smears on a condensed face. */
  /* 30% taller than it sizes itself to. It was content-driven at 364px on a
     390px screen, under the 88vw floor every cell gets - so raising the floor
     to 121.5vw (474px there) adds the height, and the panel keeps its content
     centred rather than stretching the spacing. */
  .events{ padding: 14% 0; min-height: 145.8vw; }
  .events__title{
    font-family: var(--font-head);
    font-weight: 400;
    /* Sized to sit centred ON the first cream stripe (65px wide on a 390px
       phone). At 51px the stack was already 84px wide - wider than a stripe -
       so +30% cannot fit; this is the largest that does. */
    font-size: 10vw;              /* the largest that still sits inside one stripe */
    /* NOT negative. Chrome clamps negative letter-spacing on upright vertical
       text, so a negative value looked fine in the desktop preview - but iOS
       Safari honours it and pulled every letter up into the one before, so
       E-V-E-N-T-S overlapped into a smear on a real phone. Zero is the one
       value every browser agrees on; a positive value is safe too. */
    letter-spacing: 0.2em;         /* 20% of the letter height between letters */
  }
  /* the text column starts further right so the taller EVENTS stack has room */
  /* centred on the first cream stripe */
  .events__title{ left: calc(var(--stripe) / 2); transform: translate(-50%, -50%); }
  /* The panel centres its children, so margin-left only shifts the column part
     of the way - hence a smaller number than the gap suggests. */
  .events__list{ width: 63%; margin-left: 14%; gap: 2em; }   /* 5% wider to the right */

  /* RSVP sits 10% of the panel height lower. Done with a relative offset so it
     shifts visually without pushing the text above it out of place. */
  /* Mobile now has its own column geometry (64% wide, 31% in), so it needs its
     own centring offset - the base -13.9% was calibrated for desktop. */
  .event__body--wide  { display: none; }
  .event__body--narrow{ display: block; }

  /* RSVP back up by 10% of the panel - this offset was what pushed it down. */
  .event .btn{ left: -11.11%; }   /* recentred for the current column */
  .event__date{
    font-family: var(--font-head);
    font-weight: 400;
    font-size: 31px;              /* was 19px in Roboto Mono */
    letter-spacing: 0.02em;
  }
  .event__body{ font-size: 20px; }   /* same as .body in the other sections */

  /* ---- contact ---- */
  /* Phones zoom the whole page in when a focused input is under 16px - that is
     the 'zoom' when the pop-up opens, not the pop-up itself. 16px stops it.
     The overlay padding keeps a margin around the box either way. */
  .modal{ padding: 22px; }
  .modal__box{ max-width: 100%; }
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field input[type="date"],
  .field select,
  .field textarea{ font-size: 17px; }    /* slightly bigger */
  .field{ margin-bottom: 11px; }          /* rows closer together (was 16px) */
  .field__label{ font-size: 11px; }

  /* The envelope in the subscribe pop-up. The gap between the lead and the
     email field is only 25px tall - not enough to hold a drawing - but the
     lead's last line is short, leaving about 195px free to its right. The
     envelope sits in that space, absolutely positioned so it adds no height
     and the layout below it does not move. 10 degrees clockwise. */
  #sub-form-view{ position: relative; }
  /* Email field 5% of the box lower (~17px). This has to go on the lead's
     bottom margin: a top margin on the field collapses into the lead's 22px
     and the larger one simply wins, so the field never moves. */
  /* Capped so the line breaks before "straight" - the first line is 212px up
     to "updates" and 286px with "straight", so 240px lands the break between
     them. It also keeps the first line clear of the envelope (221px in). */
  #sub-modal .sub__lead{ margin-bottom: 39px; max-width: 240px; }
  .sub__envelope{
    display: block;
    position: absolute;
    right: 6px;
    top: 98px;             /* beside the lead's second line, below the first */
    width: 70px;           /* the band between lead and field is 68px; this fits with air */
    height: auto;
    transform: rotate(10deg);
    pointer-events: none;
  }

  .pill  { font-size: 16px; padding: 0.8em 1.5em; }

  /* The WhatsApp mark carries no size of its own, so without this it renders
     at 152px and drags that button to four times the email button's height. */
  /* They stretch to the column, which is what keeps the two the same width.
     The cap just stops that stretch short: the longer of the two (the email)
     needs 224px, so 250px shortens them with room to spare. On a narrow phone
     the column is already under 250px, so nothing is capped and they simply
     stay full width. */
  .btn.contact-btn{
    font-size: 16px;
    /* taller buttons, and the width cap has room for the address at 16px */
    padding: 0.85em 1.2em;
    line-height: 1.6;
    gap: 0.6em;
    /* Centring removes the stretch that used to make these two match, so the
       width is pinned instead. min() keeps it from ever exceeding the column
       on a narrow phone. The longer of the two (the email) needs 224px. */
    width: min(300px, 100%);
    align-self: center;
  }
  .btn.contact-btn svg{ width: 1.4em; height: 1.4em; flex: none; }
  .contact-btn + .contact-btn{ margin-top: 0.9em; }

  /* ---- contact + Instagram as one section ----
     Same treatment as section 4: drop the height floor that left a tall empty
     band between them, and the padding where the two panels meet. Both are
     already the same pink, so there is no seam to hide. */
  #call-me .cell--pink{ min-height: 0; }
  #call-me > .cell--pad:not(.socials){ padding-bottom: 0; }
  #call-me > .socials{ padding-top: 8%; }

  .social{ font-size: 20px; }
  .social svg{ width: 56px; max-width: none; }   /* base caps it at 52px */
  .socials{ gap: 2em; }

  /* ---- footer ---- */
  /* a slim band. The text block is only 57px tall, so the original 16vw top
     and bottom left the footer 69% padding. 5vw keeps a little air. */
  .footer{ min-height: 0; padding: 5vw 10vw; }
  .footer__quote{ font-size: 11px; }
  /* Optical centring, phones only. The line reads "- YOURS BOOTHIE" and the
     leading dash plus its space measures 1.4em, so centring the whole line
     leaves the words 0.7em right of the quote's centre above. A 1.4em right
     margin pulls the line back by half that. Kept in em, not px, because the
     face is monospace - the ratio holds whatever the font size is. */
  .footer__sig  { font-size: 11px; margin-right: 1.4em; }
  .footer__doodle{ display: none; }
}

/* Shared layout and interaction safeguards. */
.cell{ min-width: 0; }
.body, .event__body, .btn{ flex-shrink: 0; }
.btn{ min-height: 44px; max-width: 100%; }
.btn.contact-btn{ white-space: normal; overflow-wrap: anywhere; padding-inline: 0.7em; letter-spacing: 0.03em; }
.btn:disabled{ cursor: wait; opacity: 0.65; }
a:focus-visible, button:focus-visible{ outline: 3px solid currentColor; outline-offset: 4px; }
img[aria-hidden="true"]{ pointer-events: none; }
.modal__box{ max-height: calc(100dvh - 44px); overscroll-behavior: contain; }
.modal__x{ width: 44px; height: 44px; z-index: 3; }
.modal__title{ padding-right: 24px; }
@media (min-width: 900px){
  .cell--photo > img{ position: absolute; inset: 0; }
  .hashtag{ font-size: clamp(18px, 2.1vw, 34px); }
  .hero__nav .btn{ font-size: clamp(14px, 1.35vw, 24px); padding-inline: 0.65em; }
  .event__body{ font-size: clamp(14px, 1.2vw, 19px); }
  .footer__text{ max-width: 70%; }
}
@media (max-width: 899px){
  .body, .event__body{ font-size: clamp(16px, 4.5vw, 20px); }
  .hero__panel, .row--hero{ min-height: 0; }
  .hero__nav{ align-self: stretch; }
  .hero__handle{ font-size: clamp(12px, 3.6vw, 16px); }
  .events{ min-height: 560px; }
  .events__title{ font-size: clamp(30px, 10vw, 64px); }
  .sub__envelope{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ transition: none !important; }
}