/* BeerBelgio / Matteo Belgiovine — Digital Hub
   V1.1.0 production baseline. Vanilla HTML/CSS/JS, no external UI libraries.
*/

:root {
  --ink: #1c1713;
  --cream: #e7d9c1;
  --orange: #d1442d;
  --brick: #973320;
  --page-gap: 14px;
  --radius: 28px;
  --max-width: 760px;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--brick);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: var(--ui-font), sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

#lava-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--brick);
}

.site-shell {
  width: min(calc(100% - 28px), var(--max-width));
  margin: 0 auto;
  padding: 14px 0 46px;
  display: grid;
  gap: var(--page-gap);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.8,.2,1);
}

.card {
  background: var(--cream);
  border-radius: var(--radius);
  border: 0;
}

/* HERO */

.hero {
  min-height: 500px;
  padding: 22px 20px 20px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--ui-font), sans-serif;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: .035em;
}

.hero h1 {
  align-self: center;
  margin: 10px 0;
  line-height: .84;
  letter-spacing: -.055em;
}

.hero .fun {
  display: block;
  color: var(--orange);
  font-size: clamp(76px, 24vw, 114px);
  font-weight: 900;
}

.hero .serious {
  display: block;
  margin-top: 8px;
  max-width: 350px;
  font-size: clamp(29px, 9vw, 45px);
  line-height: .92;
  font-weight: 900;
}

.identity-stack {
  display: grid;
  gap: 18px;
}

.identity-card-link {
  display: block;
  min-width: 0;
  text-decoration: none;
  border-radius: 12px;
}

.identity-card-link:hover h2 { color: var(--orange); }

.identity-card-link:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 5px;
}

.identity-block {
  display: grid;
  grid-template-rows: auto minmax(2.7em, auto) minmax(2.7em, auto);
  padding-top: 13px;
  border-top: 2px solid var(--ink);
}

.identity-block h2 {
  margin: 0 0 7px;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -.015em;
}

.identity-block p {
  margin: 0;
  max-width: 560px;
  font-family: var(--ui-font), sans-serif;
  font-weight: 700;
}

.identity-tagline {
  font-size: 12px;
  line-height: 1.32;
  letter-spacing: .02em;
}

.identity-meta {
  margin-top: 5px !important;
  font-size: 10px;
  line-height: 1.32;
  letter-spacing: .04em;
  opacity: .8;
}

/* QUICK LINKS */

.quick-actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 40px) auto;
  align-items: center;
  justify-content: space-between;
}

.platforms { display: contents; }

.platforms a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  border: 0;
  box-shadow: none;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .03em;
  transition: transform 160ms ease;
}

.lava-toggle {
  height: 40px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: none;
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .055em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 160ms ease;
}

.platforms a:hover,
.lava-toggle:hover {
  transform: translateY(-2px);
}

body.lava-mode { overflow: hidden; }

body.lava-mode .site-shell {
  opacity: 0;
  transform: scale(.985);
  pointer-events: none;
}

body.lava-mode .lava-toggle {
  position: fixed;
  z-index: 20;
  right: 18px;
  top: 18px;
  pointer-events: auto;
}

/* FEATURED */

.featured { padding: 16px; }

.video-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 20px;
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
}

.play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--cream);
  font-size: 23px;
  padding-left: 3px;
}

.video-note {
  position: absolute;
  left: 15px;
  bottom: 14px;
  font-family: var(--ui-font), sans-serif;
  font-size: 10px;
  font-weight: 700;
  opacity: .74;
}

.video-shell iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 10px;
}

.cta-row a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 11px 14px;
  border-radius: 999px;
  background: var(--orange); /* Brand orange restored; cream text retained intentionally. */
  color: var(--cream);
  text-decoration: none;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

/* MAIN LINK CARDS */

.links-card,
.contact {
  padding: 22px 20px;
}

.brand-heading {
  margin: 0 0 19px;
  font-size: 32px;
  line-height: .95;
  letter-spacing: -.045em;
}

.links-card > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 12px 0;
  border-top: 2px solid var(--ink);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.18;
  font-weight: 500;
}

.links-card small {
  display: block;
  margin-top: 6px;
  font-family: var(--ui-font), sans-serif;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: .055em;
  opacity: .72;
}

.links-card .arrow {
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 700;
}

.sonodgtl-card { background: var(--cream); }

/* CONTACT */

.contact {
  position: relative;
  overflow: hidden;
  min-height: 224px;
  background: var(--orange);
  color: var(--cream);
}

.contact h2 {
  position: relative;
  z-index: 2;
  margin: 2px 0 24px;
  max-width: 100%;
  font-size: clamp(24px, 6.7vw, 38px);
  line-height: .96;
  letter-spacing: -.035em;
}

.contact h2 span {
  display: block;
  white-space: nowrap;
}

.write-button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: min(240px, 72%);
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.contact-smile {
  position: absolute;
  z-index: 1;
  right: 26px;
  bottom: -62px;
  width: 210px;
  height: auto;
  opacity: 1;
  pointer-events: none;
}

/* FLOATING MOTTO */

.floating-motto {
  width: 100%;
  margin-top: 22px;
  padding: 0 1px 2px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(26px, 7.1vw, 46px);
  line-height: .92;
  font-weight: 900;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.motto-fun,
.motto-rest {
  color: #fff;
  mix-blend-mode: difference;
}

.motto-fun {
  justify-self: start;
  filter: hue-rotate(180deg);
}

.motto-rest {
  justify-self: end;
  text-align: right;
}

/* DESKTOP */

@media (min-width: 720px), (pointer: fine) {
  :root {
    --page-gap: 18px;
    --radius: 34px;
  }

  .site-shell {
    padding-top: 24px;
    padding-bottom: 60px;
  }

  .hero {
    min-height: 540px;
    padding: 28px;
  }

  .hero-meta { font-size: 16px; }

  .hero h1 {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 20px;
    margin: 0;
  }

  .hero .fun {
    width: 100%;
    font-size: 144px;
  }

  .hero .serious {
    margin: 0 0 8px;
    max-width: 350px;
    font-size: 50px;
  }

  .identity-stack {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }

  .identity-block h2 { font-size: 22px; }
  .identity-tagline { font-size: 13px; }
  .identity-meta { font-size: 11px; }

  .quick-actions {
    grid-template-columns: repeat(6, 44px) auto;
  }

  .platforms a {
    width: 44px;
    height: 44px;
  }

  .lava-toggle {
    height: 44px;
    padding-inline: 20px;
    font-size: 10px;
  }

  .featured,
  .links-card,
  .contact {
    padding: 24px;
  }

  .brand-heading { font-size: 40px; }

  .links-card > a { font-size: 18px; }

  .links-card small { font-size: 11px; }

  .contact { min-height: 245px; }

  .contact h2 { font-size: 38px; }

  .write-button {
    width: 275px;
    min-height: 50px;
  }

  .contact-smile {
    right: 36px;
    bottom: -78px;
    width: 270px;
  }

  .floating-motto {
    margin-top: 28px;
    font-size: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }

  .site-shell { transition: none; }
}


/* =========================================================
   V0.5 OVERRIDES
   ========================================================= */

/* HERO CLAIM: centered between meta + identity blocks, slightly larger.
   On desktop each half tracks its identity column beneath it. */
.hero h1 {
  align-self: center;
}

.hero .fun {
  font-size: clamp(80px, 25vw, 120px);
}

.hero .serious {
  font-size: clamp(31px, 9.5vw, 48px);
}

.hero .serious > span {
  display: block;
}

/* QUICK ACTIONS: first icon anchored left, lava button anchored right,
   everything else distributes responsively between their actual edges. */
.quick-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}

.platforms {
  display: contents;
}

.platforms a {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.lava-toggle {
  height: 46px;
  min-width: 88px;
  padding: 0 14px;
  background: var(--cream);
  color: var(--ink);
}

/* Lower link cards: normal-weight titles, larger descriptors. */
.links-card > a {
  font-weight: 500;
}

.links-card small {
  font-size: 12px;
  line-height: 1.24;
  letter-spacing: .045em;
  opacity: .78;
}

/* sonoDGTL lower card uses exactly the same link visual hierarchy. */
.sonodgtl-card > a {
  font-size: 16px;
  font-weight: 500;
}

/* CONTACT: exactly two title lines; wider CTA; intentionally large,
   clearly-cropped smile rather than an accidental tiny crop. */
.contact {
  min-height: 230px;
}

.contact h2 {
  font-size: clamp(23px, 6.2vw, 36px);
  line-height: .95;
}

.write-button {
  width: min(285px, 78%);
  min-height: 50px;
}

.contact-smile {
  width: min(330px, 78%);
  right: -10px;
  bottom: -24px;
}

/* FLOATING MOTTO: full-width composition with explicit base colors.
   JS flips each half when lava is actually underneath it. */
.floating-motto {
  width: 100%;
  margin-top: 30px;
  padding: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: clamp(28px, 7.3vw, 49px);
  line-height: .9;
  white-space: nowrap;
}

.motto-fun,
.motto-rest {
  mix-blend-mode: normal;
  filter: none;
  transition: color 120ms linear;
}

.motto-fun {
  color: var(--ink);
}

.motto-rest {
  color: #fff;
  text-align: right;
}

.motto-fun.is-inverted {
  color: #fff;
}

.motto-rest.is-inverted {
  color: var(--ink);
}

@media (min-width: 720px), (pointer: fine) {
  .hero h1 {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }

  .hero .fun {
    width: calc(100% - 20px);
    justify-self: center;
    text-align: center;
    font-size: 150px;
  }

  .hero .serious {
    width: calc(100% - 20px);
    max-width: none;
    justify-self: center;
    margin: 0;
    font-size: 52px;
    text-align: left;
  }

  .platforms a {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .lava-toggle {
    height: 50px;
    min-width: 102px;
    padding-inline: 18px;
  }

  .sonodgtl-card > a {
    font-size: 18px;
  }

  .links-card small {
    font-size: 13px;
  }

  .contact {
    min-height: 250px;
  }

  .write-button {
    width: 320px;
    min-height: 52px;
  }

  .contact-smile {
    width: 385px;
    right: -18px;
    bottom: -34px;
  }

  .floating-motto {
    margin-top: 38px;
    font-size: 50px;
  }
}


/* =========================================================
   V0.6 OVERRIDES
   Font choice intentionally NOT changed yet.
   ========================================================= */

/* HERO — descriptors become actual three-line lists. */
.identity-list {
  display: grid;
  gap: 3px;
  min-height: auto !important;
}

.identity-list span {
  display: block;
}

/* Previous grid reserved two-line text blocks. The new three-line list
   should breathe naturally instead of being forced into a fixed slot. */
.identity-block {
  grid-template-rows: auto minmax(2.7em, auto) auto !important;
}

/* QUICK LINKS — another proportional size step up. */
.quick-actions {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0 !important;
}

.platforms {
  display: contents !important;
}

.platforms a {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  font-size: 11px !important;
}

.lava-toggle {
  height: 50px !important;
  min-width: 96px !important;
  padding: 0 16px !important;
  font-size: 10px !important;
}

/* LOWER CARDS — descriptors are now more readable. */
.links-card small {
  font-size: 12.5px !important;
  line-height: 1.22 !important;
  opacity: .80 !important;
}

.sonodgtl-card > a {
  font-size: 16px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.contact {
  min-height: 220px !important;
}

.contact h2 {
  font-size: clamp(23px, 6.2vw, 36px) !important;
  line-height: .95 !important;
  margin-bottom: 18px !important;
}

/* Common CTA: wider, but not taller for the sake of it. */
.write-button {
  width: min(305px, 82%) !important;
  min-height: 50px !important;
}

/* TEST A — complete face, fully visible and deliberately composed. */
.contact-a {
  display: grid;
  grid-template-rows: auto 1fr;
}

.contact-a .contact-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  align-items: center;
  gap: 16px;
  min-height: 105px;
}

.contact-a .write-button {
  align-self: center;
}

.contact-smile-full {
  position: static !important;
  width: 116px !important;
  max-height: 105px;
  object-fit: contain;
  justify-self: end;
  pointer-events: none;
}

/* TEST B — intentionally oversized crop inspired by the SoundCloud header:
   this should read as a deliberate graphic field, not a placement mistake. */
.contact-b {
  min-height: 235px !important;
}

.contact-smile-crop {
  position: absolute !important;
  z-index: 1;
  width: min(520px, 120%) !important;
  height: auto;
  right: -120px !important;
  bottom: -145px !important;
  pointer-events: none;
}

.contact-b h2,
.contact-b .write-button {
  position: relative;
  z-index: 2;
}

/* REACTIVE MOTTO — one sentence, one line, edge-to-edge.
   Font-size is calculated in JS so the final period reaches the right edge.
   Every glyph can change independently according to the actual canvas
   underneath it. */
.floating-motto {
  width: 100% !important;
  margin-top: 30px !important;
  padding: 0 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: visible;
  line-height: .90 !important;
  letter-spacing: -.045em !important;
}

.motto-char {
  display: inline-block;
  transition: color 100ms linear;
}

.motto-char.base-dark {
  color: var(--ink);
}

.motto-char.base-light {
  color: #fff;
}

@media (min-width: 720px), (pointer: fine) {
  .platforms a {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
    font-size: 11px !important;
  }

  .lava-toggle {
    height: 54px !important;
    min-width: 112px !important;
    padding-inline: 20px !important;
  }

  .links-card small {
    font-size: 13px !important;
  }

  .sonodgtl-card > a {
    font-size: 18px !important;
  }

  .contact-a .contact-lower {
    grid-template-columns: minmax(0, 1fr) 138px;
  }

  .contact-smile-full {
    width: 138px !important;
    max-height: 120px;
  }

  .contact-smile-crop {
    width: 610px !important;
    right: -135px !important;
    bottom: -175px !important;
  }

  .write-button {
    width: 330px !important;
  }

  .floating-motto {
    margin-top: 38px !important;
  }
}


/* =========================================================
   V0.7 OVERRIDES
   Main index still stays on the provisional fallback.
   Font previews work by overriding --ui-font in dedicated HTML files.
   ========================================================= */
:root {
  --ui-font: "Arial Rounded MT Bold", Arial, sans-serif;
}

/* Keep the hero list logic from V0.6, but make the list feel more explicitly list-like. */
.identity-list {
  gap: 4px !important;
}

/* Quick links and FULL LAVA: one more proportional size step. */
.platforms a {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  font-size: 12px !important;
}

.lava-toggle {
  height: 56px !important;
  min-width: 118px !important;
  padding: 0 18px !important;
  font-size: 11px !important;
}

/* sonoDGTL lower card matches BeerBelgio link voice. */
.sonodgtl-card > a {
  font-size: 16px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.sonodgtl-card small {
  font-size: 12.5px !important;
}

/* Final contact module: keep the approved composition only. */
.contact-b,
.contact-smile-crop {
  display: none !important;
}

.contact-a {
  display: grid !important;
  grid-template-rows: auto 1fr;
  min-height: 225px !important;
}

.contact-a .contact-lower {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 134px;
  align-items: center;
  gap: 12px;
  min-height: 98px;
}

.write-button {
  width: min(320px, 84%) !important;
  min-height: 52px !important;
}

.contact-smile-full {
  position: static !important;
  width: 133px !important;
  max-height: 118px;
  object-fit: contain;
  justify-self: end;
  align-self: center;
  transform: translate(-10px, -8px);
  pointer-events: none;
}

/* Floating motto now displays one dedicated canvas that spans full width. */
.floating-motto {
  width: 100% !important;
  margin-top: 38px !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.floating-motto-canvas {
  display: block;
  width: 100%;
  height: 62px;
}

@media (min-width: 720px), (pointer: fine) {
  .platforms a {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
    font-size: 12px !important;
  }

  .lava-toggle {
    height: 60px !important;
    min-width: 132px !important;
    padding-inline: 22px !important;
  }

  .sonodgtl-card > a {
    font-size: 18px !important;
  }

  .sonodgtl-card small {
    font-size: 13px !important;
  }

  .contact-a {
    min-height: 236px !important;
  }

  .contact-a .contact-lower {
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 18px;
    min-height: 106px;
  }

  .write-button {
    width: 338px !important;
    min-height: 54px !important;
  }

  .contact-smile-full {
    width: 159px !important;
    max-height: 140px;
    transform: translate(-16px, -12px);
  }

  .floating-motto-canvas {
    height: 72px;
  }
}


/* =========================================================
   V0.8 OVERRIDES
   ========================================================= */

/* Contact card */
.contact {
  min-height: 236px !important;
}

.contact h2 {
  max-width: none !important;
  width: 100%;
  font-size: clamp(28px, 7.4vw, 42px) !important;
  line-height: .92 !important;
  letter-spacing: -.042em !important;
  margin-bottom: 14px !important;
}

.contact-a .contact-lower {
  grid-template-columns: minmax(0, 1fr) 154px !important;
  gap: 8px !important;
  min-height: 100px !important;
}

.write-button {
  width: min(342px, 86%) !important;
  min-height: 54px !important;
  font-size: 14px !important;
  letter-spacing: .03em !important;
}

.contact-smile-full {
  width: 166px !important;          /* about +25% from v0.7 mobile */
  max-height: 145px !important;
  transform: translate(-18px, 8px) !important;  /* a bit left and lower */
}

.floating-motto {
  margin-top: 34px !important;
}

.floating-motto-canvas {
  width: 100%;
  height: 76px;
  display: block;
}

@media (min-width: 720px), (pointer: fine) {
  .contact {
    min-height: 248px !important;
  }

  .contact h2 {
    font-size: 44px !important;
    margin-bottom: 16px !important;
  }

  .contact-a .contact-lower {
    grid-template-columns: minmax(0, 1fr) 188px !important;
    gap: 14px !important;
    min-height: 108px !important;
  }

  .write-button {
    width: 360px !important;
    min-height: 56px !important;
    font-size: 15px !important;
  }

  .contact-smile-full {
    width: 199px !important;       /* about +25% from v0.7 desktop */
    max-height: 168px !important;
    transform: translate(-22px, 10px) !important;
  }

  .floating-motto-canvas {
    height: 84px;
  }
}


/* =========================================================
   V0.9 OVERRIDES
   ========================================================= */

/* Full Lava escape hatch lives OUTSIDE .site-shell, so hiding the site
   can never hide the BACK control with it. */
.lava-back {
  position: fixed;
  z-index: 40;
  right: 18px;
  top: 18px;
  display: none;
  min-width: 76px;
  height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  cursor: pointer;
  box-shadow: none;
}

body.lava-mode .lava-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lava-info {
  position: fixed;
  z-index: 40;
  left: 18px;
  top: 18px;
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

body.lava-mode .lava-info {
  display: inline-grid;
  place-items: center;
}

.lava-info-panel[hidden] { display: none !important; }
.lava-info-panel {
  position: fixed;
  z-index: 55;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: transparent !important;
  border-radius: 0 !important;
  pointer-events: auto;
}

.lava-info-card {
  position: relative;
  width: min(420px, calc(100vw - 44px));
  max-height: min(680px, calc(100svh - 44px));
  overflow: auto;
  padding: 28px 28px 26px;
  border-radius: 28px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: none;
}

.lava-info-card h2 {
  margin: 0 42px 20px 0;
  font-size: 30px;
  line-height: .95;
  letter-spacing: -.045em;
}

.lava-info-card dl {
  margin: 0;
  display: grid;
  gap: 16px;
}

.lava-info-card dt {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .055em;
}

.lava-info-card dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
}


.lava-info-copy {
  margin: 0;
  display: grid;
  gap: 14px;
  font-size: 14px;
  line-height: 1.42;
  font-weight: 500;
}

.lava-info-copy span {
  display: block;
}

.lava-info-copy strong {
  display: inline-block;
  font-size: 1.22em;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.lava-info-close {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* Once Full Lava is active, the original in-flow control can disappear
   together with the rest of the site. */
body.lava-mode .lava-toggle {
  display: none !important;
}

/* Reactive motto canvas gets a bit more vertical safety room.
   Width remains exactly the site width. */
.floating-motto-canvas {
  height: 82px !important;
}

@media (min-width: 720px), (pointer: fine) {
  .lava-back {
    right: 24px;
    top: 24px;
    min-width: 84px;
    height: 50px;
    font-size: 11px;
  }

  .lava-info {
    left: 24px;
    top: 24px;
    width: 50px;
    height: 50px;
    font-size: 21px;
  }

  .floating-motto-canvas {
    height: 92px !important;
  }
}


/* =========================================================
   V0.10 OVERRIDES
   ========================================================= */

.write-button {
  letter-spacing: .09em !important;
}

.contact-smile-full {
  width: 208px !important;        /* ~+25% vs V0.9 mobile */
  max-height: 180px !important;
  transform: translate(-2px, 8px) !important;   /* slightly more to the right */
}

@media (min-width: 720px), (pointer: fine) {
  .contact-smile-full {
    width: 250px !important;      /* ~+25% vs V0.9 desktop */
    max-height: 210px !important;
    transform: translate(-8px, 10px) !important;
  }
}


/* =========================================================
   V0.11 OVERRIDES
   - New final motto: real HTML text + live clipped overlays.
   - Contact card tightened up.
   ========================================================= */

.contact {
  min-height: 222px !important;
}

.contact h2 {
  margin-bottom: 8px !important;
}

.contact-a {
  min-height: 222px !important;
}

.contact-a .contact-lower {
  grid-template-columns: minmax(0, 1fr) 190px !important;
  align-items: start !important;
  min-height: 72px !important;
  gap: 10px !important;
}

.contact-smile-full {
  width: 208px !important;
  max-height: 176px !important;
  align-self: start !important;
  justify-self: end !important;
  transform: translate(4px, -22px) !important;
}

.write-button {
  letter-spacing: .10em !important;
}

.floating-motto {
  margin-top: 32px !important;
  padding: 0 !important;
  width: 100% !important;
}

.motto-fit {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.02em;
  width: 100%;
  font-family: var(--ui-font), sans-serif;
  font-weight: 900;
  line-height: .90;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.motto-segment {
  position: relative;
  display: inline-block;
}

.motto-base,
.motto-overlay {
  display: block;
  white-space: nowrap;
}

.motto-base {
  position: relative;
  z-index: 1;
}

.motto-segment-fun .motto-base {
  color: var(--ink);
}

.motto-segment-rest .motto-base {
  color: #fff;
}

.motto-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
}

@media (min-width: 720px), (pointer: fine) {
  .contact {
    min-height: 232px !important;
  }

  .contact-a {
    min-height: 232px !important;
  }

  .contact h2 {
    margin-bottom: 10px !important;
  }

  .contact-a .contact-lower {
    grid-template-columns: minmax(0, 1fr) 226px !important;
    min-height: 78px !important;
    gap: 14px !important;
  }

  .contact-smile-full {
    width: 250px !important;
    max-height: 206px !important;
    transform: translate(6px, -30px) !important;
  }
}


/* =========================================================
   V0.12 FINAL OVERRIDES FOR THIS ROUND
   M PLUS Rounded 1c is now the single site font.
   ========================================================= */
:root {
  --ui-font: "M PLUS Rounded 1c", sans-serif !important;
}

body,
button,
a,
input,
textarea,
select {
  font-family: var(--ui-font) !important;
}

/* CONTACT: compact again; the smile is decorative and no longer dictates
   the row/card height. */
.contact,
.contact-a {
  position: relative !important;
  display: block !important;
  min-height: 0 !important;
  padding: 24px !important;
  overflow: hidden !important;
}

.contact h2 {
  width: 68% !important;
  max-width: none !important;
  margin: 0 0 22px !important;
  font-size: clamp(28px, 6.6vw, 42px) !important;
  line-height: .93 !important;
}

.contact-a .contact-lower {
  display: block !important;
  min-height: 0 !important;
}

.write-button {
  width: min(360px, 58%) !important;
  min-height: 54px !important;
  font-size: 14px !important;
  letter-spacing: .11em !important;
  transform: translateY(3px) !important;
}

.contact-smile-full {
  position: absolute !important;
  width: 205px !important;
  max-height: none !important;
  right: 22px !important;
  bottom: 10px !important;
  transform: none !important;
  object-fit: contain;
  pointer-events: none;
}

/* FINAL MOTTO: real text, one line, one font, no canvas glyph rendering. */
.floating-motto {
  margin-top: 34px !important;
  padding: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}

.motto-fit {
  position: relative;
  display: inline-flex !important;
  align-items: baseline;
  justify-content: flex-start;
  width: max-content !important;
  max-width: none !important;
  gap: .018em;
  font-family: var(--ui-font) !important;
  font-weight: 900 !important;
  line-height: .90 !important;
  letter-spacing: -.05em !important;
  white-space: nowrap !important;
}

.motto-segment {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}

.motto-base,
.motto-overlay {
  display: block;
  white-space: nowrap;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.motto-base {
  position: relative;
  z-index: 1;
}

.motto-segment-fun .motto-base { color: var(--ink); }
.motto-segment-rest .motto-base { color: #fff; }

.motto-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: none !important;
  color: transparent;
  -webkit-text-fill-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

/* Two different SOURCE colours + difference blending:
   over white/black blobs they remain distinct instead of collapsing to the
   same colour. The generated mask makes this effect exist only where lava
   is actually under the text. */
.motto-segment-fun .motto-overlay {
  color: #ffffff;
  mix-blend-mode: difference;
}

.motto-segment-rest .motto-overlay {
  color: var(--cream);
  mix-blend-mode: difference;
}

@media (max-width: 560px) and (pointer: coarse) {
  .contact h2 {
    width: 72% !important;
    font-size: clamp(24px, 7vw, 34px) !important;
  }
  .write-button {
    width: 62% !important;
  }
  .contact-smile-full {
    width: 155px !important;
    right: 15px !important;
    bottom: 12px !important;
  }
}

@media (min-width: 720px), (pointer: fine) {
  .contact,
  .contact-a {
    padding: 26px !important;
  }
  .contact h2 {
    width: 70% !important;
    margin-bottom: 24px !important;
    font-size: 43px !important;
  }
  .write-button {
    width: 370px !important;
    min-height: 56px !important;
    font-size: 15px !important;
  }
  .contact-smile-full {
    width: 224px !important;
    right: 28px !important;
    bottom: 10px !important;
  }
}


/* =========================================================
   V0.13 OVERRIDES
   ========================================================= */

.floating-motto {
  box-sizing: border-box !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.contact-smile-full {
  width: 185px !important;
  right: 22px !important;
  bottom: 4px !important;
}

@media (max-width: 560px) and (pointer: coarse) {
  .contact-smile-full {
    width: 140px !important;
    right: 15px !important;
    bottom: 6px !important;
  }
}

@media (min-width: 720px), (pointer: fine) {
  .floating-motto {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .contact-smile-full {
    width: 202px !important;
    right: 28px !important;
    bottom: 4px !important;
  }
}


/* =========================================================
   V0.14 OVERRIDES
   ========================================================= */

/* FUN dynamic overlay:
   orange + difference gives a strong cyan over white blobs instead of
   collapsing back to almost-black like the previous white source did. */
.motto-segment-fun .motto-overlay {
  color: var(--orange) !important;
  mix-blend-mode: difference;
}

/* Smile: same size/height as V0.13, nudged a little to the LEFT. */
.contact-smile-full {
  right: 32px !important;
}

@media (max-width: 560px) and (pointer: coarse) {
  .contact-smile-full {
    right: 24px !important;
  }
}

@media (min-width: 720px), (pointer: fine) {
  .contact-smile-full {
    right: 40px !important;
  }
}


/* =========================================================
   V0.15 OVERRIDES
   ========================================================= */

/* More vivid dynamic claim colours.
   The actual local lava mask and "difference" behaviour stay unchanged. */
.motto-segment-fun .motto-overlay {
  color: #00D9E8 !important; /* saturated cyan */
  mix-blend-mode: difference;
}

.motto-segment-rest .motto-overlay {
  color: #FF6A00 !important; /* saturated orange */
  mix-blend-mode: difference;
}

/* Smile nudged slightly further LEFT. */
.contact-smile-full {
  right: 40px !important;
}

@media (max-width: 560px) and (pointer: coarse) {
  .contact-smile-full {
    right: 32px !important;
  }
}

@media (min-width: 720px), (pointer: fine) {
  .contact-smile-full {
    right: 48px !important;
  }
}


/* =========================================================
   V0.16 OVERRIDES — FINAL MOTTO ENGINE
   ========================================================= */

.motto-fit {
  position: relative !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 100%;
  font-family: var(--ui-font), sans-serif !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.motto-segment {
  position: relative;
  z-index: 1;
  display: inline;
}

.motto-segment-fun {
  color: var(--ink) !important;
}

.motto-segment-rest {
  color: #fff !important;
}

.motto-reactive-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Old overlay-span system is retired. */
.motto-base,
.motto-overlay {
  display: none !important;
}


/* =========================================================
   V0.18 OVERRIDES
   ========================================================= */

/* ---------------------------------------------------------
   DESKTOP: true proportional stage.
   Browser page zoom must not change the card/lava ratio.
   JS keeps the 760px internal design scaled into this 45vw stage.
   --------------------------------------------------------- */
.site-stage {
  width: 100%;
}

html.desktop-proportional .site-stage {
  position: relative;
  width: 45vw;
  margin: 0 auto;
}

html.desktop-proportional .site-shell {
  position: absolute;
  top: 0;
  left: 0;
  width: 760px !important;
  max-width: none !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------
   FINAL MOTTO
   Exact browser-rendered duplicate text layers.
   No canvas-drawn glyphs = no lateral glyph mismatch.
   --------------------------------------------------------- */
.motto-fit {
  position: relative !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 100%;
  font-family: var(--ui-font), sans-serif !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.motto-segment {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

.motto-base {
  position: relative;
  z-index: 1;
  display: block;
  white-space: nowrap;
}

.motto-segment-fun .motto-base {
  color: var(--ink);
}

.motto-segment-rest .motto-base {
  color: #fff;
}

.motto-reactive-host {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  pointer-events: none;
  overflow: visible;
}

.motto-reactive-layer {
  position: absolute;
  inset: 0;
  display: block;
  color: transparent;
  white-space: nowrap;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  will-change: -webkit-mask-image, mask-image;
}

/* Canvas motto from V0.16 is retired. */
.motto-reactive-canvas,
.motto-overlay {
  display: none !important;
}


/* =========================================================
   V0.19 OVERRIDES
   ========================================================= */

/* V0.18 accidentally inherited an older rule that hid .motto-base.
   Here the base text is explicitly visible again. */
.motto-base {
  display: block !important;
}

.motto-reactive-host {
  width: 100%;
  height: 100%;
}


/* =========================================================
   V0.22 OVERRIDES
   ========================================================= */

/* Quick actions: one more size step while preserving the spacing logic. */
.platforms a {
  width: 60px !important;
  height: 60px !important;
  flex: 0 0 60px !important;
  font-size: 12.5px !important;
}

.lava-toggle {
  height: 62px !important;
  min-width: 140px !important;
  padding: 0 22px !important;
  font-size: 12.5px !important;
  letter-spacing: .03em !important;
}

@media (min-width: 720px), (pointer: fine) {
  .platforms a {
    width: 64px !important;
    height: 64px !important;
    flex-basis: 64px !important;
    font-size: 13px !important;
  }

  .lava-toggle {
    height: 66px !important;
    min-width: 154px !important;
    padding-inline: 25px !important;
    font-size: 13px !important;
  }
}

/* Hero claim: FUN bigger; right block heavier and on three lines. */
.hero h1 {
  margin: 14px 0 18px !important;
}

.hero .fun {
  width: calc(100% - 14px) !important;
  justify-self: center !important;
  text-align: center !important;
  font-size: clamp(92px, 27vw, 138px) !important;
}

.hero .serious {
  width: calc(100% - 14px) !important;
  max-width: none !important;
  justify-self: center !important;
  margin: 0 !important;
  font-size: clamp(34px, 10vw, 58px) !important;
  text-align: left !important;
  line-height: .88 !important;
}

@media (min-width: 720px), (pointer: fine) {
  .hero .fun {
    font-size: 166px !important;
  }

  .hero .serious {
    font-size: 56px !important;
  }
}

/* Lower hero descriptors: give both identities more typographic weight. */
.identity-block h2 {
  font-size: 22px !important;
}

.identity-tagline {
  font-size: 14px !important;
  line-height: 1.28 !important;
}

.identity-meta {
  font-size: 11.5px !important;
  line-height: 1.34 !important;
}

@media (min-width: 720px), (pointer: fine) {
  .identity-block h2 {
    font-size: 24px !important;
  }

  .identity-tagline {
    font-size: 15px !important;
  }

  .identity-meta {
    font-size: 12px !important;
  }
}


/* =========================================================
   V0.23 OVERRIDES
   ========================================================= */

/* Quick links + FULL LAVA: another proportional step up. */
.platforms a {
  width: 66px !important;
  height: 66px !important;
  flex: 0 0 66px !important;
  font-size: 13px !important;
}

.lava-toggle {
  height: 68px !important;
  min-width: 168px !important;
  padding: 0 24px !important;
  font-size: 15px !important;
  letter-spacing: .035em !important;
}

@media (min-width: 720px), (pointer: fine) {
  .platforms a {
    width: 70px !important;
    height: 70px !important;
    flex-basis: 70px !important;
    font-size: 13.5px !important;
  }

  .lava-toggle {
    height: 72px !important;
    min-width: 180px !important;
    padding-inline: 28px !important;
    font-size: 16px !important;
  }
}

/* Hero claim: much larger, closer parity between FUN and the right half. */
.hero h1 {
  margin: 16px 0 20px !important;
}

.hero .fun {
  width: calc(100% - 10px) !important;
  font-size: clamp(102px, 30vw, 150px) !important;
}

.hero .serious {
  width: calc(100% - 10px) !important;
  font-size: clamp(40px, 11vw, 64px) !important;
  line-height: .84 !important;
}

@media (min-width: 720px), (pointer: fine) {
  .hero .fun {
    font-size: 188px !important;
  }

  .hero .serious {
    font-size: 64px !important;
  }
}

/* Lower hero text: noticeably bigger, less timid. */
.identity-block {
  padding-top: 15px !important;
  grid-template-rows: auto minmax(3.1em, auto) auto !important;
}

.identity-block h2 {
  font-size: 26px !important;
  margin-bottom: 9px !important;
}

.identity-tagline {
  font-size: 16px !important;
  line-height: 1.24 !important;
}

.identity-meta {
  margin-top: 8px !important;
  font-size: 13px !important;
  line-height: 1.30 !important;
}

@media (min-width: 720px), (pointer: fine) {
  .identity-block h2 {
    font-size: 28px !important;
  }

  .identity-tagline {
    font-size: 17px !important;
  }

  .identity-meta {
    font-size: 13.5px !important;
  }
}


/* =========================================================
   V0.24 OVERRIDES
   ========================================================= */

/* FULL LAVA: keep button size, make the text clearly bigger. */
.lava-toggle {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

@media (min-width: 720px), (pointer: fine) {
  .lava-toggle {
    font-size: 18.5px !important;
  }
}

/* Hero claim: FUN bigger, right half slightly smaller so total heights align better. */
.hero .fun {
  width: calc(100% - 8px) !important;
  font-size: clamp(110px, 32vw, 162px) !important;
}

.hero .serious {
  width: calc(100% - 8px) !important;
  font-size: clamp(35px, 9.5vw, 58px) !important;
  line-height: .82 !important;
}

@media (min-width: 720px), (pointer: fine) {
  .hero .fun {
    font-size: 204px !important;
  }

  .hero .serious {
    font-size: 56px !important;
  }
}

/* Lower hero areas: much less timid. */
.identity-block {
  grid-template-rows: auto minmax(4.0em, auto) auto !important;
  gap: 8px !important;
}

.identity-block h2 {
  font-size: 31px !important;
  margin-bottom: 10px !important;
}

.identity-tagline {
  font-size: 18px !important;
  line-height: 1.22 !important;
}

.identity-meta {
  font-size: 14.5px !important;
  line-height: 1.28 !important;
  letter-spacing: .01em !important;
}

@media (min-width: 720px), (pointer: fine) {
  .identity-block h2 {
    font-size: 34px !important;
  }

  .identity-tagline {
    font-size: 19px !important;
  }

  .identity-meta {
    font-size: 15px !important;
  }
}


/* =========================================================
   V0.25 OVERRIDES
   ========================================================= */

/* FULL LAVA: more typographic presence, not a bigger pill. */
.lava-toggle {
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: .045em !important;
}

@media (min-width: 720px), (pointer: fine) {
  .lava-toggle {
    font-size: 21px !important;
  }
}

/* Hero claim: rebalance so the right half catches up in total height. */
.hero .fun {
  font-size: clamp(104px, 30vw, 154px) !important;
}

.hero .serious {
  font-size: clamp(41px, 10.4vw, 68px) !important;
  line-height: .80 !important;
}

@media (min-width: 720px), (pointer: fine) {
  .hero .fun {
    font-size: 192px !important;
  }

  .hero .serious {
    font-size: 68px !important;
  }
}

/* Lower hero areas: actually big now. */
.identity-block {
  grid-template-rows: auto minmax(4.9em, auto) auto !important;
  gap: 10px !important;
}

.identity-block h2 {
  font-size: 38px !important;
  margin-bottom: 12px !important;
}

.identity-tagline {
  font-size: 21px !important;
  line-height: 1.18 !important;
}

.identity-meta {
  font-size: 16px !important;
  line-height: 1.25 !important;
  letter-spacing: .008em !important;
}

@media (min-width: 720px), (pointer: fine) {
  .identity-block h2 {
    font-size: 42px !important;
  }

  .identity-tagline {
    font-size: 22px !important;
  }

  .identity-meta {
    font-size: 16.5px !important;
  }
}


/* =========================================================
   V0.26 OVERRIDES
   ========================================================= */

/* FULL LAVA: same size, less heavy. */
.lava-toggle {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

@media (min-width: 720px), (pointer: fine) {
  .lava-toggle {
    font-size: 22px !important;
    font-weight: 800 !important;
  }
}

/* Hero: give the motto real breathing room. */
.hero {
  min-height: 620px !important;
  padding: 34px 32px 30px !important;
  grid-template-rows: auto auto auto !important;
}

.hero h1 {
  margin: 52px 0 54px !important;
  align-self: center !important;
}

/* Rebalance the two halves: FUN slightly smaller, right half a bit fuller. */
.hero .fun {
  font-size: clamp(100px, 29vw, 150px) !important;
}

.hero .serious {
  font-size: clamp(43px, 10.2vw, 66px) !important;
  line-height: .81 !important;
}

@media (min-width: 720px), (pointer: fine) {
  .hero .fun {
    font-size: 182px !important;
  }

  .hero .serious {
    font-size: 62px !important;
  }
}

/* Lower hero blocks: less empty space, larger type. */
.identity-stack {
  gap: 22px !important;
}

.identity-block {
  grid-template-rows: auto auto auto !important;
  gap: 7px !important;
  padding-top: 12px !important;
  align-content: start !important;
}

.identity-block h2 {
  font-size: 44px !important;
  margin-bottom: 8px !important;
  line-height: .98 !important;
}

.identity-tagline {
  font-size: 23px !important;
  line-height: 1.16 !important;
}

.identity-meta {
  margin-top: 4px !important;
  font-size: 17px !important;
  line-height: 1.22 !important;
  letter-spacing: .006em !important;
}

@media (min-width: 720px), (pointer: fine) {
  .identity-block h2 {
    font-size: 48px !important;
  }

  .identity-tagline {
    font-size: 24px !important;
  }

  .identity-meta {
    font-size: 17.5px !important;
  }
}

/* Legacy narrow-desktop replay removed in V0.55.1.1.
   Fine-pointer desktop now keeps one canonical 760px composition at every window width. */

/* =========================================================
   V0.55.1 RESPONSIVE BASELINE — V0.54.4 FROZEN BASE + DESKTOP LOCK / PORTRAIT PLAY-TAIL
   Replaces V0.55 in-place. V0.54.4 lava behaviour remains frozen; never stack duplicate override blocks.
   ========================================================= */

.site-stage,
.site-shell,
.card,
.quick-actions,
.platforms { min-width: 0; }

.inline-arrow,
.arrow img {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.12em;
}
.arrow { display: grid; place-items: center; }

/* LAVA */
#lava-canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100lvh !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  background: var(--brick) !important;
  transform: translateZ(0);
  will-change: transform;
}
html.ios-device #lava-canvas {
  top: -20svh !important;
  bottom: auto !important;
  height: calc(100lvh + 40svh) !important;
}

/* HERO DESKTOP */
.hero {
  min-height: 570px !important;
  padding: 28px !important;
  grid-template-rows: auto 1fr auto !important;
}
.hero-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: start !important;
  gap: 18px !important;
  padding-inline: 8px !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
}
.hero-meta span:last-child { text-align: right !important; }
.hero-location .location-city,
.hero-location .location-country { display: inline; }
.hero-location .location-country::before { content: " "; }
.hero-claim-art-wrap {
  width: 100% !important;
  max-width: 704px !important;
  margin: 4px auto 8px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: center !important;
  overflow: visible !important;
}
.hero-claim-picture {
  display: block !important;
  width: 122% !important;
  max-width: none !important;
  justify-self: center !important;
  align-self: center !important;
}
.hero-claim-art {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.identity-stack {
  grid-template-columns: 1fr 1fr !important;
  gap: 26px !important;
}
.identity-card-link:first-child .identity-block { text-align: right !important; }
.identity-card-link:last-child .identity-block { text-align: left !important; }
.identity-block {
  grid-template-rows: auto auto auto !important;
  gap: 14px !important;
  padding-top: 15px !important;
}
.identity-block h2,
.identity-block p { padding-inline: 12px !important; }
.identity-block h2 {
  font-size: 50px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: .96 !important;
}
.identity-tagline {
  font-size: 21.5px !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
}
.identity-meta {
  margin-top: 0 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
}

/* QUICK LINKS DESKTOP — all nine items share one spacing system. */
.quick-actions {
  display: grid !important;
  grid-template-columns: repeat(8, 58px) 174px !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 16px 0 !important;
}
.platforms { display: contents !important; }
.platforms a,
.platforms button,
.platforms a:nth-child(n),
.platforms button:nth-child(n) {
  width: 58px !important;
  min-width: 58px !important;
  height: 58px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  line-height: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  border: 0 !important;
  padding: 0 !important;
  background: var(--ink) !important;
  cursor: pointer;
}
.platform-icon {
  width: 53% !important;
  height: 53% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
}
.lava-toggle {
  width: 174px !important;
  min-width: 174px !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 0 15px !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 18px !important;
  line-height: .92 !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}
.lava-toggle span { display: inline !important; }

.share-toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translate(-50%, 14px);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.share-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* FEATURED */
.play { display: grid !important; place-items: center !important; padding: 0 !important; }
.play img { width: 46% !important; height: 46% !important; display: block !important; transform: none !important; }
.video-note { display: none !important; }
.cta-row a { min-height: 54px !important; font-size: 16.5px !important; font-weight: 800 !important; }
.cta-row .inline-arrow,
.write-button .inline-arrow { margin-left: 5px !important; }
.cta-row .inline-arrow { width: 1em !important; height: 1em !important; filter: none !important; }

/* LOWER BRAND CARDS */
.links-card { padding: 24px !important; }
.brand-heading {
  margin: 0 0 22px !important;
  font-size: 50px !important;
  line-height: .96 !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
}
.beerbelgio-card .brand-heading { text-transform: none !important; }
.links-card > a {
  min-height: 78px !important;
  padding: 15px 0 !important;
  font-size: 21.5px !important;
  line-height: 1.14 !important;
}
.links-card small {
  margin-top: 8px !important;
  font-size: 16px !important;
  line-height: 1.18 !important;
}

/* CONTACT — later working layout restored without touching stage/responsive architecture. */
.contact,
.contact-a {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(190px, 1fr) !important;
  grid-template-rows: auto 1fr !important;
  column-gap: 18px !important;
  min-height: 286px !important;
  padding: 26px !important;
  overflow: hidden !important;
}
.contact h2 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  font-size: 53px !important;
  line-height: .93 !important;
}
.contact-a .contact-lower {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 0 !important;
}
.write-button {
  justify-self: start !important;
  align-self: center !important;
  width: min(360px, 92%) !important;
  min-height: 54px !important;
  font-size: 14px !important;
  letter-spacing: .11em !important;
}
.contact-smile,
.contact-smile-full {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  position: static !important;
  width: 205px !important;
  max-height: none !important;
  justify-self: end !important;
  align-self: end !important;
  transform: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
}
.contact-line { display: block !important; }
.contact-line > span { display: inline !important; white-space: nowrap !important; }
.mobile-only-break { display: none !important; }

/* DESKTOP PROPORTIONAL — restore the V0.18 canonical 760px composition.
   All historical desktop @media blocks also remain active for fine pointers,
   so narrowing a desktop window cannot silently fall back to the mobile/base geometry. */
html.desktop-proportional .site-stage {
  position: relative !important;
  width: var(--desktop-stage-width, 45vw) !important;
  max-width: none !important;
  margin: 0 auto !important;
}
html.desktop-proportional .site-shell {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 760px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: none !important;
  margin: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 60px !important;
  gap: 18px !important;
  zoom: 1 !important;
  transform: scale(var(--desktop-stage-scale, 1)) !important;
  transform-origin: top left !important;
  transition: opacity 420ms ease !important;
}
html.desktop-proportional .card { width: 100% !important; max-width: none !important; }
html.desktop-proportional .hero { min-height: 570px !important; padding: 28px !important; grid-template-rows: auto 1fr auto !important; }
html.desktop-proportional .hero-meta { display: flex !important; font-size: 18px !important; padding-inline: 8px !important; }
html.desktop-proportional .hero-claim-art-wrap { width: 100% !important; max-width: 704px !important; margin: 4px auto 8px !important; }
html.desktop-proportional .hero-claim-picture { width: 122% !important; max-width: none !important; }
html.desktop-proportional .hero-claim-art { width: 100% !important; max-width: 100% !important; }
html.desktop-proportional .identity-stack { grid-template-columns: 1fr 1fr !important; gap: 26px !important; }
html.desktop-proportional .identity-block { gap: 14px !important; padding-top: 15px !important; }
html.desktop-proportional .identity-block h2,
html.desktop-proportional .identity-block p { padding-inline: 12px !important; }
html.desktop-proportional .identity-block h2 { font-size: 50px !important; }
html.desktop-proportional .identity-tagline { font-size: 21.5px !important; }
html.desktop-proportional .identity-meta { font-size: 17px !important; }
html.desktop-proportional .quick-actions { display: grid !important; grid-template-columns: repeat(8,58px) 174px !important; justify-content: space-between !important; margin: 16px 0 !important; }
html.desktop-proportional .platforms { display: contents !important; }
html.desktop-proportional .platforms a,
html.desktop-proportional .platforms button { width: 58px !important; min-width: 58px !important; height: 58px !important; border-radius: 50% !important; }
html.desktop-proportional .lava-toggle { width: 174px !important; min-width: 174px !important; height: 58px !important; font-size: 18px !important; }
html.desktop-proportional .featured,
html.desktop-proportional .links-card,
html.desktop-proportional .contact { padding: 24px !important; }
html.desktop-proportional .brand-heading { font-size: 50px !important; }
html.desktop-proportional .links-card > a { font-size: 21.5px !important; }
html.desktop-proportional .links-card small { font-size: 16px !important; }
html.desktop-proportional .contact { min-height: 286px !important; grid-template-columns: minmax(0,2fr) minmax(190px,1fr) !important; padding:26px !important; }
html.desktop-proportional .contact h2 { font-size: 53px !important; width:100% !important; grid-column:1 !important; grid-row:1 !important; }
html.desktop-proportional .contact-a .contact-lower { grid-column:1 !important; grid-row:2 !important; display:flex !important; align-items:center !important; }
html.desktop-proportional .write-button { transform: translateY(6px) !important; }
html.desktop-proportional .contact-smile-full { grid-column:2 !important; grid-row:1/3 !important; width:205px !important; justify-self:end !important; align-self:end !important; transform:none !important; }
html.desktop-proportional .mobile-only-break { display: none !important; }
html.desktop-proportional .sonodgtl-cta-separator { display: inline !important; }
html.desktop-proportional .contact-line > span { display: inline !important; }
html.desktop-proportional .floating-motto { width: 100% !important; margin-bottom: 0 !important; }

/* TOUCH / PHONE PORTRAIT */
@media (pointer: coarse) {
  .site-stage {
    width: 84vw !important;
    max-width: 84vw !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }
  .site-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-top: 100px !important;
    padding-bottom: 24px !important;
  }
  .card { width: 100% !important; max-width: 100% !important; }

  .hero {
    padding: 18px 22px 18px !important;
    min-height: 0 !important;
    height: auto !important;
    grid-template-rows: auto auto auto !important;
  }
  .hero-meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    padding-inline: 12px !important;
    font-size: 15px !important;
    line-height: 1.12 !important;
    letter-spacing: .025em !important;
  }
  .hero-meta span:first-child { text-align: left !important; }
  .hero-meta span:last-child { text-align: right !important; }
  .hero-location {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-self: end !important;
    width: max-content !important;
  }
  .hero-location .location-city,
  .hero-location .location-country { display: block !important; width: max-content !important; text-align: right !important; }
  .hero-location .location-country::before { content: "" !important; }
  .hero-location .location-comma { display: none !important; }
  .hero-claim-art-wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 2px auto 4px !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
  }
  .hero-claim-picture {
    width: 123% !important;
    max-width: none !important;
    justify-self: center !important;
    align-self: center !important;
  }
  .hero-claim-art { width: 100% !important; max-width: 100% !important; }

  .identity-stack { grid-template-columns: 1fr !important; gap: 16px !important; }
  .identity-block { gap: 13px !important; padding-top: 15px !important; }
  .identity-block h2,
  .identity-block p { padding-inline: 14px !important; }
  .identity-block h2 { font-size: 34px !important; }
  .identity-tagline { font-size: 14px !important; line-height: 1.15 !important; font-weight: 500 !important; white-space: nowrap !important; }
  .identity-meta { font-size: 12.5px !important; line-height: 1.16 !important; }

  .quick-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 14px 0 !important;
  }
  .platforms {
    display: grid !important;
    grid-template-columns: repeat(4, 54px) !important;
    justify-content: space-between !important;
    align-items: center !important;
    row-gap: 18px !important;
    width: 100% !important;
  }
  .platforms a,
  .platforms button,
  .platforms a:nth-child(n),
  .platforms button:nth-child(n) {
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: center !important;
    align-self: center !important;
  }
  .platform-icon { width: 46% !important; height: 46% !important; }
  .lava-toggle {
    width: 100% !important;
    min-width: 0 !important;
    height: 66px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    flex-direction: row !important;
    gap: .30em !important;
    font-size: 25px !important;
    line-height: 1 !important;
  }

  .play { width: 54px !important; height: 54px !important; }
  .play img { width: 46% !important; height: 46% !important; transform: none !important; }
  .cta-row a { min-height: 50px !important; font-size: 15px !important; }
  .cta-row .inline-arrow { width: 1em !important; height: 1em !important; margin-left: 5px !important; }

  .links-card { padding: 20px !important; }
  .brand-heading { font-size: 31px !important; margin-bottom: 18px !important; }
  .links-card > a { min-height: 70px !important; padding: 13px 0 !important; font-size: 18px !important; }
  .links-card small { font-size: 13px !important; margin-top: 7px !important; }

  .sonodgtl-card > a > span:first-child,
  .sonodgtl-card small { white-space: normal !important; line-height: 1.18 !important; }
  .sonodgtl-cta-separator { display: none !important; }
  html[lang="it"] .sonodgtl-cta-separator { display: inline !important; }
  .mobile-only-break { display: block !important; }

  .contact,
  .contact-a {
    min-height: 240px !important;
    padding: 20px !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
    column-gap: 12px !important;
  }
  .contact h2 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(30px, 8.4vw, 36px) !important;
    line-height: .94 !important;
  }
  .contact-a .contact-lower {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
  }
  .write-button {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 12px !important;
    transform: translateY(3px) !important;
  }
  .contact-line > span { display: block !important; white-space: nowrap !important; }
  .contact-smile,
  .contact-smile-full {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    width: 106px !important;
    justify-self: center !important;
    align-self: center !important;
    transform: none !important;
  }

  .floating-motto { margin-bottom: max(24px, calc(50svh - 28px)) !important; }
}

/* TOUCH LANDSCAPE */
@media (orientation: landscape) and (pointer: coarse) {
  .site-stage { width: 80vw !important; max-width: 80vw !important; }
  .site-shell { padding-top: 10px !important; padding-bottom: 24px !important; }
  .hero {
    min-height: 0 !important;
    height: auto !important;
    grid-template-rows: auto auto auto !important;
    padding: 18px 22px 24px !important;
  }
  .hero-meta {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 14px !important;
    padding-inline: 16px !important;
  }
  .hero-location { display: inline !important; width: auto !important; }
  .hero-location .location-city,
  .hero-location .location-country { display: inline !important; width: auto !important; }
  .hero-location .location-comma { display: inline !important; }
  .hero-location .location-country::before { content: " " !important; }
  .hero-claim-art-wrap { width: 100% !important; margin: 0 auto !important; grid-template-columns: 1fr !important; place-items: center !important; }
  .hero-claim-picture { width: 98% !important; max-width: none !important; justify-self: center !important; align-self: center !important; }
  .hero-claim-art { width: 100% !important; max-width: 100% !important; }
  .identity-stack { grid-template-columns: 1fr 1fr !important; gap: 20px !important; align-items: start !important; }
  .identity-card-link:first-child .identity-block { text-align: right !important; }
  .identity-card-link:last-child .identity-block { text-align: left !important; }
  .identity-block h2,
  .identity-block p { padding-inline: 14px !important; }
  .identity-block h2 { font-size: 24px !important; }
  .identity-tagline { font-size: 11px !important; }
  .identity-meta { font-size: 10.4px !important; }

  .quick-actions {
    display: grid !important;
    grid-template-columns: repeat(8, 42px) 118px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 10px 0 !important;
  }
  .platforms { display: contents !important; }
  .platforms a,
  .platforms button,
  .platforms a:nth-child(n),
  .platforms button:nth-child(n) {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
  }
  .platform-icon { width: 50% !important; height: 50% !important; }
  .lava-toggle {
    width: 118px !important;
    min-width: 118px !important;
    height: 44px !important;
    margin: 0 !important;
    border-radius: 36px !important;
    font-size: 16px !important;
    gap: 5px !important;
  }

  .contact,
  .contact-a {
    min-height: 230px !important;
    padding: 20px !important;
    grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr) !important;
    grid-template-rows: auto 1fr !important;
    column-gap: 16px !important;
  }
  .contact h2 { grid-column:1 !important; grid-row:1 !important; width:100% !important; font-size:43px !important; }
  .contact-line { display: block !important; }
  .contact-line > span { display: inline !important; white-space: nowrap !important; }
  .contact-a .contact-lower { grid-column:1 !important; grid-row:2 !important; display:flex !important; align-items:center !important; padding:0 !important; }
  .write-button { transform: translateY(6px) !important; }
  .contact-smile,
  .contact-smile-full {
    grid-column:2 !important;
    grid-row:1/3 !important;
    width:160px !important;
    justify-self:end !important;
    align-self:end !important;
    transform:none !important;
  }

  .mobile-only-break { display: none !important; }
  .sonodgtl-cta-separator { display: inline !important; }
  .floating-motto { margin-bottom: 0 !important; }
}


/* CLAIM ORIENTATION GUARD — one <picture>, explicit geometry per orientation.
   This avoids stale portrait/landscape state after phone rotation. */
@media (pointer: coarse) and (orientation: portrait) {
  .hero-claim-art-wrap { margin: 2px auto 4px !important; }
  .hero-claim-picture { width: 123% !important; justify-self: center !important; align-self: center !important; }

  /* Portrait only: motto reaches viewport midpoint, then remains there while
     the page continues through a long lava-only play tail. */
  .floating-motto {
    position: sticky !important;
    top: 50svh !important;
    z-index: 6 !important;
    margin-bottom: 0 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }
  .site-shell::after {
    content: "";
    display: block;
    width: 100%;
    height: 144svh;
    pointer-events: none;
  }
}
@media (pointer: coarse) and (orientation: landscape) {
  .hero-claim-art-wrap { margin: 0 auto !important; }
  .hero-claim-picture { width: 98% !important; justify-self: center !important; align-self: center !important; }
}


/* ---------------------------------------------------------
   EMAIL FALLBACK
   --------------------------------------------------------- */
.email-fallback[hidden] { display: none !important; }
.email-fallback {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(28, 23, 19, .58);
  font-family: var(--ui-font), sans-serif;
}
.email-fallback-card {
  position: relative;
  width: min(92vw, 620px);
  max-height: min(88vh, 720px);
  overflow: auto;
  padding: 24px;
  border-radius: 26px;
  background: var(--cream);
  color: var(--ink);
}
.email-fallback-card h2 { margin: 0 40px 6px 0; font-size: 30px; line-height: .95; }
.email-fallback-card > p { margin: 0 0 18px; font-size: 14px; }
.email-fallback-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  cursor: pointer;
}
.email-fallback-close::before,
.email-fallback-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: 50% 50%;
}
.email-fallback-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.email-fallback-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.email-field {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 10px 18px;
  align-items: center;
  padding: 12px 0;
  border-top: 2px solid var(--ink);
}
.email-field > span { font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.email-field code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--ui-font), sans-serif;
  font-size: 13px;
  line-height: 1.3;
}
.email-field button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  margin-left: 10px;
}
.email-field-body { align-items: start; }

/* Direct bubble manipulation: touch drag is captured only in immersive lava. */
body.lava-mode { touch-action: none; }

@media (pointer: coarse) {
  #lava-canvas {
    left: -12vw !important;
    top: -12svh !important;
    width: calc(100vw + 24vw) !important;
    height: calc(100dvh + 24svh) !important;
    inset: auto !important;
  }
}

/* =========================================================
   V0.55.1.8 — CLAIM GEOMETRY ONLY
   Desktop resize architecture from V0.55.1.7 stays untouched.
   ========================================================= */

/* Mobile portrait gets the dedicated final-claim artwork; every other mode
   keeps the existing live HTML motto engine. */
.motto-portrait-art {
  display: none;
}

/* Desktop hero: keep the exact same SVG/composition, only pull the oversized
   artwork back inside the hero content geometry. */
html.desktop-proportional .hero-claim-picture {
  width: 118% !important;
}

/* Desktop final claim must visually span the same width as the 760px cards.
   Padding is removed here only; JS fits against the untransformed canvas. */
html.desktop-proportional .floating-motto {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (pointer: coarse) and (orientation: portrait) {
  /* The old text stays in the DOM for rotation back to landscape, but the
     supplied SVG is the visible portrait artwork. */
  .motto-fit {
    display: none !important;
  }

  .motto-portrait-art {
    position: relative;
    display: block !important;
    width: 147% !important;
    margin-left: -23.5% !important;
    margin-right: -23.5% !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  .motto-portrait-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    pointer-events: none;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  .motto-portrait-art {
    display: none !important;
  }
}



/* =========================================================
   V0.55.1.11 — PRE-V1 UI / PRIVACY
   - Mobile portrait identity typography restored to the larger visual scale.
   - Privacy control is integrated without changing card geometry.
   ========================================================= */

.hero { position: relative; }

/* Portrait identity typography: scale relative to the actual phone viewport,
   with safe caps for small/large phones. Landscape keeps its existing rules. */
@media (pointer: coarse) and (orientation: portrait) {
  .identity-block h2 {
    font-size: clamp(40px, 10.8vw, 46px) !important;
    line-height: .98 !important;
  }
  .identity-tagline {
    font-size: clamp(17px, 4.7vw, 20px) !important;
    line-height: 1.14 !important;
  }
  .identity-meta {
    font-size: clamp(13.5px, 3.8vw, 16px) !important;
    line-height: 1.18 !important;
  }
}

/* Privacy opener: same visual language as the Full Lava "?", but labelled so
   the destination is explicit. It lives outside the card edge without
   participating in Hero layout. */
.privacy-launch {
  position: absolute;
  z-index: 12;
  left: -86px;
  top: 30px;
  width: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  display: grid;
  justify-items: center;
  gap: 6px;
  cursor: pointer;
}
.privacy-launch-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}
.privacy-launch-label {
  color: var(--cream);
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .075em;
}
.privacy-launch:focus-visible .privacy-launch-mark {
  outline: 3px solid var(--cream);
  outline-offset: 4px;
}
body.lava-mode .privacy-launch { display: none !important; }

@media (pointer: coarse) and (orientation: portrait) {
  .privacy-launch {
    left: 0;
    top: -70px;
    width: 58px;
  }
  .privacy-launch-mark { width: 42px; height: 42px; font-size: 19px; }
}

@media (pointer: coarse) and (orientation: landscape) {
  .privacy-launch {
    left: -58px;
    top: 12px;
    width: 50px;
    gap: 5px;
  }
  .privacy-launch-mark { width: 40px; height: 40px; font-size: 18px; }
  .privacy-launch-label { font-size: 8px; }
}

/* Click-open privacy panel. The overlay deliberately carries .card in the DOM,
   so lava.js treats every pointer press inside it as UI rather than a 5+5 click. */
.privacy-overlay[hidden] { display: none !important; }
.privacy-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(28, 23, 19, .56) !important;
  border-radius: 0 !important;
  overflow: auto;
}
.privacy-card {
  position: relative;
  width: min(640px, calc(100vw - 40px));
  max-height: min(82svh, 760px);
  overflow: auto;
  padding: 30px 30px 28px;
  border-radius: 28px;
  background: var(--cream);
  color: var(--ink);
}
.privacy-card h2 {
  margin: 0 46px 6px 0;
  font-size: 34px;
  line-height: .95;
  letter-spacing: -.035em;
}
.privacy-intro {
  margin: 0 46px 22px 0;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}
.privacy-copy {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
}
.privacy-copy section {
  padding: 15px 0;
  border-bottom: 1.5px solid rgba(28,23,19,.36);
}
.privacy-copy h3 {
  margin: 0 0 5px;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .07em;
}
.privacy-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
}
.privacy-copy a { font-weight: 800; text-underline-offset: 2px; }
.privacy-copy code {
  font-family: var(--ui-font), sans-serif;
  font-size: .95em;
  font-weight: 700;
}
.privacy-updated {
  margin: 16px 0 0;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .03em;
  opacity: .70;
}
.privacy-close {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font: inherit;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
body.privacy-open { overflow: hidden; }

@media (pointer: coarse) {
  .privacy-card {
    width: min(88vw, 640px);
    max-height: min(82svh, 720px);
    padding: 25px 22px 24px;
    border-radius: 24px;
  }
  .privacy-card h2 { font-size: 30px; }
  .privacy-intro { font-size: 13px; }
  .privacy-copy p { font-size: 12.5px; }
}


/* =========================================================
   V0.55.1.12 — PRIVACY UI POLISH
   Promoted: portrait identity typography + lava scroll behaviour from V0.55.1.11.
   This section changes privacy presentation only.
   ========================================================= */

/* Landscape: keep the privacy control outside the Hero but move it to the
   right-hand margin. Desktop fine pointer remains on the left; portrait remains above. */
@media (pointer: coarse) and (orientation: landscape) {
  .privacy-launch {
    left: auto !important;
    right: -58px !important;
  }
}

/* Keep modal content scrollable on short viewports, but remove platform/browser
   scrollbar chrome from the card and overlay. */
.privacy-overlay,
.privacy-card {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.privacy-overlay::-webkit-scrollbar,
.privacy-card::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* External privacy links use the repository's own SVG arrow asset instead of
   a Unicode/emoji arrow. */
.privacy-copy a {
  display: inline-flex;
  align-items: baseline;
  gap: .24em;
}
.privacy-link-arrow {
  width: .82em;
  height: .82em;
  flex: 0 0 auto;
  display: inline-block;
  transform: translateY(.04em);
}

/* Draw the close mark geometrically so it is centred independently of font
   metrics/browser rendering. The textual × remains in the DOM for fallback,
   while the button already has its explicit aria-label. */
.privacy-close {
  display: grid;
  place-items: center;
  font-size: 0 !important;
  line-height: 1 !important;
}
.privacy-close::before,
.privacy-close::after {
  content: "";
  grid-area: 1 / 1;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.privacy-close::before { transform: rotate(45deg); }
.privacy-close::after  { transform: rotate(-45deg); }

/* =========================================================
   V0.55.1.13 — PRIVACY CLOSE CONTROL POLISH
   Promoted and unchanged: portrait Hero typography, LAVA physics,
   desktop resize, privacy placement, social metadata and licensing.
   ========================================================= */

/* Absolute 50/50 positioning avoids native-button/grid metric differences
   and keeps the drawn close mark in the mathematical centre of the circle. */
.privacy-close::before,
.privacy-close::after {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  grid-area: auto !important;
  transform-origin: 50% 50% !important;
}
.privacy-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
.privacy-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}


/* =========================================================
   V1.0 — UNIVERSAL FINAL CLAIM / RELEASE SPACING

   Reuses the exact V0.55.1.15 portrait final-claim construction based on
   claim-portrait-end.svg. The claim remains outside the transformed desktop
   shell so sticky coordinates are viewport-true in every orientation.
   ========================================================= */

/* The universal tail replaces the older portrait-only pseudo-tail. */
.site-shell::after {
  content: none !important;
  display: none !important;
}

/* All modes use the promoted SVG/reactive construction. */
.motto-fit {
  display: none !important;
}

.floating-motto {
  position: sticky !important;
  top: 50svh !important;
  z-index: 6 !important;
  box-sizing: border-box !important;
  width: min(760px, 84vw) !important;
  margin: 34px auto 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  overflow: visible !important;
}

/* claim-portrait-end.svg has symmetrical internal breathing room. The 147%
   compensation is copied from the already-approved portrait implementation. */
.motto-portrait-art {
  position: relative !important;
  display: block !important;
  width: 147% !important;
  margin-left: -23.5% !important;
  margin-right: -23.5% !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.motto-portrait-svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: none !important;
}

/* Long lava-only play field while the claim remains at viewport midpoint. */
.motto-scroll-tail {
  display: block;
  width: 100%;
  height: 144svh;
  pointer-events: none;
}

/* Desktop: larger normal-flow gap from the contact card. The transform still
   pulls the visual claim upward by half its own height when sticky. */
html.desktop-proportional .floating-motto {
  width: var(--desktop-stage-width, 45vw) !important;
  margin-top: clamp(60px, 5vw, 95px) !important;
}

@media (pointer: coarse) and (orientation: portrait) {
  .floating-motto {
    width: 84vw !important;
    margin-top: 34px !important;
  }
}

/* Landscape: add enough base separation to prevent overlap with CONTACT. */
@media (pointer: coarse) and (orientation: landscape) {
  .floating-motto {
    width: 80vw !important;
    margin-top: clamp(60px, 9vw, 95px) !important;
  }
}


/* =========================================================
   V1.1.0 — HUB LANGUAGE SWITCH
   One shared control group: stacked on desktop/landscape, split in portrait.
   The Privacy label remains below its own control.
   ========================================================= */
.hero-controls {
  position: absolute;
  z-index: 12;
  left: -86px;
  top: 30px;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hero-controls .privacy-launch {
  position: static !important;
  inset: auto !important;
  width: 64px !important;
}
.language-launch {
  width: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  display: grid;
  justify-items: center;
  text-decoration: none;
  cursor: pointer;
}
.language-launch-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .035em;
}
.language-launch:focus-visible .language-launch-mark {
  outline: 3px solid var(--cream);
  outline-offset: 4px;
}
body.lava-mode .hero-controls { display: none !important; }

@media (pointer: coarse) and (orientation: portrait) {
  .site-shell { padding-top: 110px !important; }
  .hero-controls {
    left: 0;
    right: 0;
    top: -104px;
    width: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
  }
  .hero-controls .privacy-launch {
    width: 58px !important;
    gap: 4px !important;
  }
  .language-launch { width: 58px; }
  .language-launch-mark,
  .hero-controls .privacy-launch-mark {
    width: 42px;
    height: 42px;
  }
  .language-launch-mark { font-size: 11px; }
}

@media (pointer: coarse) and (orientation: landscape) {
  .hero-controls {
    left: auto;
    right: -58px;
    top: 12px;
    width: 50px;
    gap: 8px;
  }
  .hero-controls .privacy-launch {
    width: 50px !important;
    gap: 5px !important;
  }
  .language-launch { width: 50px; }
  .language-launch-mark,
  .hero-controls .privacy-launch-mark {
    width: 40px;
    height: 40px;
  }
  .language-launch-mark { font-size: 10.5px; }
}

/* BeerBelgio project gateways: local to the links card; no stage changes. */
.projects-card > a.beerbelgio-project-link > .beerbelgio-project-content {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
.beerbelgio-project-wordmark {
  display: block;
  width: auto;
  max-width: 100%;
  height: 38px;
  object-fit: contain;
  object-position: left center;
}
.projects-card > a.beerbelgio-project-link small {
  display: block;
  margin-top: 5px !important;
}
@media (pointer: coarse) and (orientation: portrait) {
  .beerbelgio-project-wordmark { height: clamp(23px, 7.9vw, 34px); }
}