/* POPTANI modular header — full Scroll 1 identity and compact Scrolls 2–4 rail. */
@font-face {
  font-family: "POPTANI Aviano Regular";
  src: url("data:font/woff2;base64,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") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

body.home > header.poptani-site-header {
  --poptani-surface: #fbfaf7;
  --poptani-surface-top: #ffffff;
  --poptani-surface-bottom: #f7f4ef;
  --poptani-border: #eeeae4;
  --poptani-lower-edge: #e2ddd6;
  --poptani-ink: #2d2521;
  --poptani-wordmark: #bd0034;
  --poptani-focus: #bd0034;
  /* The header's morph. Desktop went back to 260ms on the quint-out curve on
     8 Nov: the 420ms even curve was added on 7 Nov to soften the compact snap
     on a phone, and it made the desktop morph feel slow. --poptani-type-morph
     is the duration for font-size and letter-spacing only; at 0ms the type
     simply cuts, which is the desktop behaviour this header had before 7 Nov.
     Both are re-pointed under the 760px breakpoint, so the phone keeps the
     7 Nov feel and no transition declaration is duplicated. */
  --poptani-morph: 260ms cubic-bezier(.22, 1, .36, 1);
  --poptani-type-morph: 0ms;
  /* Investor sliver — flat lime in day mode (AD mid #B8CB55), locked 6 Nov. */
  --poptani-edge-top: #B8CB55;
  --poptani-edge-body: #B8CB55;
  --poptani-edge-bottom: #B8CB55;
  display: block;
  min-height: 0;
  position: fixed;
  /* Left rail, narrowed 11 Nov from a 7.5rem ceiling to 2.5rem (40px), taking
   sachajuan.com's margin. The header sits on the same rail as every content
   block, so this clamp and the three in theme.css / dist must stay in step or
   the page stops lining up with itself. The 2rem floor is deliberate: below
   roughly 667px the 6vw term is already under it, so phone layout is
   untouched by the change. */
 inset: calc(1.5rem + var(--wp-admin--admin-bar--height, 0px)) auto auto clamp(2rem, 6vw, 2.5rem);
  z-index: 50;
  width: min(600px, calc(100vw - 4rem));
  margin: 0;
  padding: 0;
  color: var(--poptani-ink);
  background: transparent;
  contain: layout style;
}

/* Night palette — navy, locked 7 Nov, replacing the brown. Referenced to a
   measured reading of the Parfums de Marly holiday ground, not invented.
   Eight values carry the whole night page:
     ground   #08122C   plaque #0D1A3A   panel #18295A   rules  #2A3C66
     wordmark #FFFFFF   text   #F3EFE6   accent #C18641  sliver #BD0034
   Text tiers mirror the day ladder: hero/headings 16.15 on ground, scroll body
   9.51 (day body is 9.8), quietest notes 7.32. Gold section headings land at
   0.37x the body, so titles stay quieter than their own copy as in day. */
html[data-poptani-header-theme="night"] body.home > header.poptani-site-header {
  --poptani-surface: #0D1A3A;
  --poptani-surface-top: #12224A;
  --poptani-surface-bottom: #0A1530;
  --poptani-border: #1B2B52;
  --poptani-lower-edge: #060E22;
  --poptani-ink: #F3EFE6;
  --poptani-wordmark: #FFFFFF;
  --poptani-focus: #C18641;
  /* The sliver carries the crimson at night exactly as the lime carries the
     day: colour on a 3px edge, never in the text. #BD0034 on #08122C is 2.84;
     the day lime on paper is 1.66, so this sits a shade more present, which is
     right now that the wordmark is white and supplies no red of its own. */
  --poptani-edge-top: #BD0034;
  --poptani-edge-body: #BD0034;
  --poptani-edge-bottom: #BD0034;
}

.poptani-header__shell,
.poptani-header__core,
.poptani-header__stack,
.poptani-header__investor {
  box-sizing: border-box;
  width: 100%;
}

.poptani-header__core {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 7px;
  height: 119px;
  /* The reasoning below was a mobile finding and it still holds under the
     760px breakpoint, where --poptani-morph is 420ms on the even curve. On
     desktop the quint-out at 260ms is what this header has always used, and
     the snap it was softening is a phone problem; 420ms here only made the
     morph feel slow. Reverted 8 Nov.
     420ms on an even curve, not 260ms on cubic-bezier(.22,1,.36,1). That old
     curve is a quint-out: it spends most of its travel in the first third, so
     even at 260ms it reads as a cut with a tail rather than a movement. The
     structural part of this change cannot be eased at all — see the note on
     .poptani-header__stack — so the properties that CAN ease have to carry the
     whole impression, and they need time and an even rate to do it. */
  transition: height var(--poptani-morph), gap var(--poptani-morph);
}

/* On compact this becomes display:contents and the core goes from two columns
   to three. Neither is animatable — display never is, and a 2-track to 3-track
   grid has no interpolation — so the header's layout genuinely re-flows in one
   frame. Everything below is making the parts that can move cover for it. */
.poptani-header__stack {
  display: grid;
  grid-template-rows: 56px 56px;
  gap: 7px;
  min-width: 0;
  transition: gap var(--poptani-morph);
}

.poptani-header__module {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--poptani-border);
  border-radius: 0;
  padding: 0 24px;
  color: var(--poptani-ink);
  background:
    linear-gradient(to bottom, var(--poptani-surface-top) 0, var(--poptani-surface) 12%, var(--poptani-surface) 82%, var(--poptani-surface-bottom) 100%);
  box-shadow: inset 0 -1px 0 var(--poptani-lower-edge);
  font-family: "POPTANI Palanquin", "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1;
  text-decoration: none;
  appearance: none;
  /* The note below is why the type is eased UNDER 760px, and there
     --poptani-type-morph is 420ms. On desktop it is 0ms, so font-size and
     letter-spacing cut as they always did here; the jump it describes is a
     phone one, where the whole header reflows in a single frame.
     font-size and letter-spacing were the loudest jump in the whole snap: the
     wordmark cuts 27px to 18px in a single frame while its box eases over the
     full duration, and the eye follows the type, not the box. Scaling the type
     on the same curve is most of what makes this read as a movement. */
  transition:
    height var(--poptani-morph),
    padding var(--poptani-morph),
    font-size var(--poptani-type-morph) cubic-bezier(.4, 0, .2, 1),
    letter-spacing var(--poptani-type-morph) cubic-bezier(.4, 0, .2, 1),
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease;
}

/* The type and rule inside the modules change size on compact too, and none of
   them inherit the transition above. */
.poptani-header__value,
.poptani-header__choice,
.poptani-header__choices,
.poptani-header__divider {
  transition:
    font-size var(--poptani-type-morph) cubic-bezier(.4, 0, .2, 1),
    height var(--poptani-morph),
    gap var(--poptani-morph);
}

.poptani-header__brand {
  height: 119px;
  justify-content: center;
  color: var(--poptani-wordmark);
  font-family: "POPTANI Aviano Regular", Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: .025em;
  white-space: nowrap;
}

.poptani-header__ingredients,
.poptani-header__mode {
  height: 56px;
}

.poptani-header__ingredients {
  justify-content: flex-start;
}

.poptani-header__value {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .025em;
  line-height: 1;
  white-space: nowrap;
}

.poptani-header__mode {
  justify-content: flex-start;
  cursor: pointer;
}

.poptani-header__choices {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.poptani-header__choice {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  opacity: .70;
  white-space: nowrap;
  transition: opacity 180ms ease;
}

.poptani-header__choice--day,
html[data-poptani-header-theme="night"] .poptani-header__choice--night {
  opacity: 1;
}

html[data-poptani-header-theme="night"] .poptani-header__choice--day {
  opacity: .58;
}

.poptani-header__divider {
  width: 1px;
  height: 18px;
  background: currentColor;
  opacity: .18;
}

.poptani-header__investor {
  position: relative;
  height: 7px;
  margin-top: 7px;
  transition: height var(--poptani-morph), margin-top var(--poptani-morph);
}

.poptani-header__investor-strip {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 40px;
  min-height: 40px;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  appearance: none;
}

.poptani-header__investor::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--poptani-edge-top), var(--poptani-edge-body) 52%, var(--poptani-edge-bottom));
}

.poptani-header__investor-panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 32px;
  /* The rows have to sum to the CONTENT box, not the border box. At 52px with
     a 1px border the content is 50, so the old 18+34 — and my first pass at
     19+33 — both summed to 52 and overflowed the bottom by 2px, which is what
     pushed the contents up and left 8.5px above the label against 3.5 below.
     16 + 34 = 50. Label bottom-aligned in row one lands 5.5px from the top;
     the 24px control line centres in row two with 6px under it; 5px separates
     them, tighter than the outer margins so the label and field read as one
     pair. Symmetric to within half a pixel, and nothing else changes — the
     panel is still 52px and every property it had, it keeps. */
  grid-template-rows: 16px 34px;
  align-items: center;
  width: 100%;
  height: 52px;
  overflow: hidden;
  border: 1px solid rgba(134, 109, 80, .34);
  border-radius: 0;
  background: #DED8CE;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), inset 0 -1px 0 rgba(134, 109, 80, .42);
  opacity: 0;
  pointer-events: none;
  transform: scaleY(.12);
  transform-origin: top;
  transition: opacity 300ms ease, transform var(--poptani-morph), height var(--poptani-morph);
}

.poptani-site-header.is-investor-open .poptani-header__investor {
  height: 52px;
}

.poptani-site-header.is-investor-open .poptani-header__investor::before,
.poptani-site-header.is-investor-open .poptani-header__investor-strip {
  opacity: 0;
  pointer-events: none;
}

.poptani-site-header.is-investor-open .poptani-header__investor-panel {
  opacity: 1;
  pointer-events: auto;
  transform: scaleY(1);
}

.poptani-header__investor-label,
.poptani-header__investor-panel input,
.poptani-header__investor-status {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0 0 0 20px;
  color: rgba(75, 64, 59, .78);
  background: transparent;
  font-family: "POPTANI Palanquin", "Helvetica Neue", Helvetica, sans-serif;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, .55), 0 1px 0 rgba(101, 82, 65, .16);
}

.poptani-header__investor-label {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1;
}

.poptani-header__investor-panel input {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  width: 100%;
  /* 24px, centred, was 36px with align-self:start — which overflowed the
     34px row and bled 2px past the panel's bottom edge. 24 also puts the
     field on exactly the same line as Send and the close. */
  height: 24px;
  line-height: 24px;
  align-self: center;
  outline: 0;
  color: #3B3D3F;
  font-size: 15.5px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 36px;
  appearance: none;
}

.poptani-header__investor-panel input::placeholder {
  color: rgba(75, 64, 59, .64);
  opacity: 1;
}

.poptani-header__investor-close,
.poptani-header__investor-submit {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  margin: 0;
  border: 0;
  padding: 0;
  color: #3B3D3F;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.poptani-header__investor-close {
  grid-column: 3;
  grid-row: 1 / 3;
}

.poptani-header__investor-submit {
  grid-column: 2;
  grid-row: 1 / 3;
}

/* The 1px lift the label and the field used to carry is gone (8 Nov). Their
   layout boxes already aligned with the controls — field and Send are both
   24px tall on the same row — so all the nudge did was lift the field's TEXT a
   pixel off its own box, which left Send and the close reading a pixel low
   against it and threw the panel's top gap off by the same pixel. Every box
   now sits on true geometry and the three vertical centres coincide. The
   alternative was to give Send and the close the identical nudge; moving the
   whole row is fine, leaving the field nudged and the controls not is not. */

.poptani-header__investor-close svg {
  width: 10px;
  height: 10px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform: translateY(-1px);
}

.poptani-header__arrow-box {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(134, 109, 80, .18);
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(134, 109, 80, .10);
  transform: translateY(-1px);
  transition: border-color 180ms ease, background-color 180ms ease;
}

.poptani-header__arrow-box svg {
  width: 10px;
  height: 10px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

.poptani-header__investor-submit:hover .poptani-header__arrow-box,
.poptani-header__investor-submit:focus-visible .poptani-header__arrow-box {
  border-color: rgba(45, 51, 50, .18);
  background: rgba(255, 255, 255, .18);
}

.poptani-header__investor-status {
  display: none;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  align-self: center;
  padding-right: 8px;
  font-size: 14px;
  line-height: 1.3;
}

.poptani-site-header.has-investor-result .poptani-header__investor-label,
.poptani-site-header.has-investor-result .poptani-header__investor-panel input,
.poptani-site-header.has-investor-result .poptani-header__investor-submit {
  display: none;
}

.poptani-site-header.has-investor-result .poptani-header__investor-status {
  display: block;
}

.poptani-site-header.is-submitting .poptani-header__investor-submit {
  opacity: .42;
  pointer-events: none;
}

.poptani-header__investor:focus-within .poptani-header__investor-panel {
  border-color: rgba(134, 109, 80, .48);
}

/* ── Night: the investor panel ──────────────────────────────────────────────
   The day field #DED8CE is a lift from the paper, 1.31 separation. Night
   reproduces the relationship rather than the value: #18295A is a lift from
   the header plaque #0D1A3A at 1.23. Everything inside goes to the bone
   family, and the white top highlight comes off, since an inset white line
   reads as a seam on a dark field.
   Navy since 7 Nov; was #332117 on the brown plaque at the same 1.20 ratio. */
html[data-poptani-header-theme="night"] .poptani-header__investor-panel {
  background: #18295A;
  border-color: #2A3C66;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 -1px 0 rgba(0, 0, 0, .34);
}

html[data-poptani-header-theme="night"] .poptani-header__investor-label,
html[data-poptani-header-theme="night"] .poptani-header__investor-panel input,
html[data-poptani-header-theme="night"] .poptani-header__investor-status {
  color: #BFB9AF;
  /* Letterpress, inverted for the dark field: shadow above, highlight below,
     so the type reads as pressed into the panel rather than raised off it.
     Day already does this the other way up on the same three elements. */
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .55), 0 1px 0 rgba(242, 239, 235, .10);
}

html[data-poptani-header-theme="night"] .poptani-header__investor-panel input {
  color: #F3EFE6;
  background: transparent;
  border-color: #2A3C66;
}

html[data-poptani-header-theme="night"] .poptani-header__investor-panel input::placeholder {
  color: #A8A29A;
}

html[data-poptani-header-theme="night"] .poptani-header__investor-close,
html[data-poptani-header-theme="night"] .poptani-header__investor-submit {
  color: #BFB9AF;
}

/* ── Send label, matched X, both centred on the input ──────────────────────
   "Send" in sentence case: the header's own vocabulary is title case
   ("Investor Relations", "Day", "Night"), and caps would import the editorial
   treatment the page body uses for proof values. 400 to sit level with the
   arrow's 1px stroke. The X gets the same box as the arrow but no text, since
   the glyph already says it. Both drop to the input's row so they centre on
   the field instead of on the whole panel — the compact state keeps its own
   single-row layout untouched.                                              */
.poptani-header__investor-panel {
  /* 29px, not 34: the close pill is 24px and justifies to the END of its
     track, so the track's 5px of slack falls BETWEEN Send and the close and
     the pill finishes flush with the panel's padding edge. At 34px centred
     that slack sat outside the pill and stacked on the new 20px padding,
     putting the right inset at 26 against 21 on the left; at 24px the pill
     filled the track and the two controls touched. */
  grid-template-columns: minmax(0, 1fr) 80px 29px;
}

/* ── Equal white space, measured per axis (8 Nov) ───────────────────────────
   The requirement: the gap from the right edge to the close pill equals the
   gap from the left edge to the "Investor Relations" text — 21px, which is the
   1px border plus 20px of inset. The inset moves off the label and the field
   and onto the panel as padding-inline, so it is stated once and applies to
   both sides instead of only the left.
   Down the box, the same principle but necessarily a different number: the
   content box is 50px and the label (10.5) plus the control line (24) take
   34.5 of it, so the three gaps share 15.5px. Written as the division so the
   arithmetic stays legible. Three 20px gaps would need a 94px panel — equal
   means equal within each axis, not the same figure on both.
   auto rows rather than the old fixed 16px/34px, because fixed rows cannot
   express a gap; the rows now take their items' heights and row-gap plus
   padding-block carry the spacing.
   Scoped off .is-compact: that state is a single 34px row with its own insets,
   and 10.33px of padding-block would overflow it.                            */
.poptani-site-header:not(.is-compact) .poptani-header__investor-panel {
  grid-template-rows: auto auto;
  row-gap: calc(15.5px / 3);
  padding-block: calc(15.5px / 3);
  padding-inline: 20px;
}

.poptani-site-header:not(.is-compact) .poptani-header__investor-label,
.poptani-site-header:not(.is-compact) .poptani-header__investor-panel input,
.poptani-site-header:not(.is-compact) .poptani-header__investor-status {
  padding-left: 0;
}

/* "Send ↗" is one control: the border and fill move off the inner arrow box
   and onto the button, so the label and the glyph share a single pill. */
.poptani-header__investor-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid rgba(134, 109, 80, .18);
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.poptani-header__investor-submit .poptani-header__arrow-box {
  width: auto;
  height: auto;
  border: 0;
  background: none;
  box-shadow: none;
  /* The box is gone, so the 1px lift that centred the arrow inside it has
     nothing left to centre against: all it did was sit the glyph a pixel
     above the "Send" text beside it. */
  transform: none;
}

.poptani-header__investor-submit::before {
  content: "Send";
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
}

html[data-poptani-header-theme="night"] .poptani-header__investor-submit {
  border-color: #2A3C66;
  background: rgba(242, 239, 235, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Typing keeps the panel open while the header is compact, so the same
   treatment has to hold there: the label stays, the column widens to carry
   it, and both controls centre on the single row. */
html body .poptani-site-header.is-compact .poptani-header__investor-panel {
  grid-template-columns: max-content minmax(0, 1fr) 80px 32px;
}

.poptani-site-header.is-compact .poptani-header__investor-submit,
.poptani-site-header.is-compact .poptani-header__investor-close {
  align-self: center;
  height: 26px;
}

/* The input is 24px and centred in row 2 now, so both controls simply centre
   on the same row — no top-margin arithmetic to keep them level with a field
   that sat at the row's top. 24 rather than 22 because WCAG 2.2 AA asks
   24x24 of a target and these were failing it by two pixels. */
.poptani-site-header:not(.is-compact) .poptani-header__investor-submit {
  grid-row: 2;
  align-self: center;
  height: 24px;
  margin-top: 0;
}

.poptani-site-header:not(.is-compact) .poptani-header__investor-close {
  align-self: center;
  justify-self: end;
  width: 24px;
  height: 24px;
  margin-top: 0;
  grid-row: 2;
}

.poptani-header__investor-close {
  justify-self: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(134, 109, 80, .18);
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

html[data-poptani-header-theme="night"] .poptani-header__investor-close {
  border-color: #2A3C66;
  background: rgba(242, 239, 235, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

html[data-poptani-header-theme="night"] .poptani-header__arrow-box {
  border-color: #2A3C66;
  background: rgba(242, 239, 235, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ...but not when the arrow sits inside the Send pill, where the pill is the
   control and the arrow is only a glyph. The rule above is one class more
   specific than the rule that strips the arrow's box, so at night it was
   painting a faint 10x10 panel back around the glyph — invisible on the old
   brown, obvious on the navy. A standalone .poptani-header__arrow-box still
   gets its box, in both modes. */
html[data-poptani-header-theme="night"] .poptani-header__investor-submit .poptani-header__arrow-box {
  border: 0;
  background: none;
  box-shadow: none;
}

.poptani-header__module:focus-visible,
.poptani-header__investor-strip:focus-visible,
.poptani-header__investor-close:focus-visible,
.poptani-header__investor-submit:focus-visible {
  outline: 1px solid var(--poptani-focus);
  outline-offset: 3px;
}

.poptani-site-header.is-compact .poptani-header__core {
  grid-template-columns: 184px 230px minmax(0, 1fr);
  gap: 0;
  height: 44px;
  background: transparent;
}

.poptani-site-header.is-compact .poptani-header__stack {
  display: contents;
}

.poptani-site-header.is-compact .poptani-header__shell {
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
}

.poptani-site-header.is-compact .poptani-header__module {
  height: 44px;
  padding-inline: 20px;
}

.poptani-site-header.is-compact .poptani-header__brand {
  justify-content: flex-start;
  font-size: 20px;
}

.poptani-site-header.is-compact .poptani-header__ingredients {
  border-left: 0;
  border-right: 0;
}

.poptani-site-header.is-compact .poptani-header__mode {
  border-left: 0;
}

.poptani-site-header.is-compact .poptani-header__value {
  font-size: 14px;
  letter-spacing: .025em;
}

.poptani-site-header.is-compact .poptani-header__choice {
  font-size: 12px;
  letter-spacing: .04em;
}

.poptani-site-header.is-compact .poptani-header__choices {
  gap: 11px;
}

.poptani-site-header.is-compact .poptani-header__divider {
  height: 18px;
}

.poptani-site-header.is-compact .poptani-header__investor {
  height: 3px;
  margin-top: -1px;
}

.poptani-site-header.is-compact.is-investor-open .poptani-header__investor {
  height: 34px;
}

.poptani-site-header.is-compact .poptani-header__investor-panel {
  grid-template-columns: max-content minmax(0, 1fr) 40px 32px;
  grid-template-rows: 34px;
  height: 34px;
}

.poptani-site-header.is-compact .poptani-header__investor-label {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding-left: 16px;
  padding-right: 18px;
}

.poptani-site-header.is-compact .poptani-header__investor-panel input {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  height: 32px;
  padding-left: 0;
  font-size: 13.5px;
  line-height: 32px;
}

/* Hold the investor panel on the same 20px module inset when the header compacts,
   so the label does not slide 4px left of every other module on scroll. */
.poptani-site-header.is-compact .poptani-header__investor-label,
.poptani-site-header.is-compact .poptani-header__investor-status,
.poptani-site-header.is-compact.has-investor-value .poptani-header__investor-status {
  padding-left: 20px;
}

.poptani-site-header.is-compact .poptani-header__investor-close {
  grid-column: 4;
  grid-row: 1;
}

.poptani-site-header.is-compact .poptani-header__investor-submit {
  grid-column: 3;
  grid-row: 1;
}

.poptani-site-header.is-compact .poptani-header__investor-status {
  grid-column: 1 / 4;
  grid-row: 1;
  padding-left: 16px;
}

.poptani-visually-hidden,
.poptani-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
}

@media (max-width: 760px) {
  body.home > header.poptani-site-header {
    inset: calc(max(1rem, env(safe-area-inset-top)) + var(--wp-admin--admin-bar--height, 0px)) 1rem auto;
    width: auto;
    /* The phone keeps the 7 Nov feel: 420ms on the even curve, with font-size
       and letter-spacing eased over the same 420ms rather than cutting. The
       two custom properties are re-pointed here and nowhere else, so every
       transition that reads them follows, and not one transition declaration
       is duplicated inside this query. 760px is the header's own breakpoint
       and already gates the compact snap in assets/js/cinema.js. */
    --poptani-morph: 420ms cubic-bezier(.4, 0, .2, 1);
    --poptani-type-morph: 420ms;
  }

  .poptani-header__core {
    grid-template-columns: minmax(128px, 42%) minmax(0, 1fr);
    gap: 5px;
    height: 97px;
  }

  .poptani-header__stack {
    grid-template-rows: 46px 46px;
    gap: 5px;
  }

  .poptani-header__brand {
    height: 97px;
    padding-inline: 14px;
    font-size: clamp(16px, 4.4vw, 19px);
  }

  .poptani-header__ingredients,
  .poptani-header__mode {
    height: 46px;
    padding-inline: 16px;
  }

  .poptani-header__value {
    font-size: 13px;
  }

  .poptani-header__choice {
    font-size: 11.5px;
  }

  .poptani-header__choices {
    gap: 10px;
  }

  /* 3px, not 6px: on a phone the panel no longer opens itself, so this is the
     resting state rather than a momentary one, and the sliver inside it is the
     locked 3px. At 6px the crimson line sat at the bottom of a 6px box with a
     3px gap above it for no reason. Header is now 97 + 5 + 3 = 105px. */
  .poptani-header__investor {
    height: 3px;
    margin-top: 5px;
  }

  /* The panel and its wrapper no longer override anything here (8 Nov), so the
     one set of rules above — 52px, auto rows, 15.5/3 gaps, 20px padding-inline
     — governs both widths, which is the point of stating the insets once. The
     old 68px came paired with rows of 22+46 = 68 that had to fit a 66px content
     box and overflowed it by 2px, pushing the contents up: the same arithmetic
     bug fixed on desktop on 7 Nov. The panel's contents are identical at both
     widths, so the extra height was never justified. */

  .poptani-site-header.is-compact .poptani-header__core {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 46%);
    height: 44px;
  }

  .poptani-site-header.is-compact .poptani-header__brand,
  .poptani-site-header.is-compact .poptani-header__mode {
    height: 44px;
  }

  .poptani-site-header.is-compact .poptani-header__ingredients {
    display: none;
  }

  .poptani-site-header.is-compact .poptani-header__mode {
    border-left: 0;
    padding-inline: 14px;
  }

  .poptani-site-header.is-compact .poptani-header__brand {
    font-size: 18px;
  }

  .poptani-site-header.is-compact .poptani-header__investor-label {
    padding-right: 10px;
    font-size: 10px;
  }

  .poptani-site-header.is-compact .poptani-header__investor-panel input {
    font-size: 13px;
  }

  .poptani-site-header.is-compact.has-investor-value .poptani-header__investor-label {
    display: none;
  }

  .poptani-site-header.is-compact.has-investor-value .poptani-header__investor-panel input {
    grid-column: 1 / 3;
    padding-left: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .poptani-header__core,
  .poptani-header__stack,
  .poptani-header__module,
  .poptani-header__investor,
  .poptani-header__investor-panel,
  .poptani-header__choice,
  .poptani-header__arrow-box {
    transition: none !important;
  }
}