/* =========================================================
   Hussam Misallati — /social/ link-in-bio
   Self-contained: re-declares the brand tokens. Phone-first;
   on wide screens the same column sits centred.
   Load BEFORE ../css/i18n.css so its :lang() font swaps win.
   ========================================================= */

:root {
  --ink: #141214;
  --ink-2: #1b181a;
  --ink-3: #242022;
  --text: #efe7e2;
  --muted: #b9aba3;
  --rose-1: #f6d8c6;
  --rose-2: #e8b9a0;
  --rose-3: #b8775a;
  --rose-4: #7a4a36;
  --line: rgb(232 185 160 / .16);
  --line-strong: rgb(232 185 160 / .42);
  --rose-grad: linear-gradient(135deg, var(--rose-1) 0%, var(--rose-2) 32%, var(--rose-3) 70%, var(--rose-4) 100%);
  --cream: #f7efe9;

  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);

  --gutter: 16px;
  --col: 480px;

  --z-bar: 20;
  --z-toast: 240;
  --z-sheet: 250;
  --z-veil: 260;
  --z-fx: 270;

  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink); }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(120% 60% at 50% 0%, rgb(232 185 160 / .07), transparent 60%),
    var(--ink);
  color: var(--text);
  font: 400 1rem/1.5 var(--sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--rose-2); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.no-js .js-only { display: none !important; }
html.is-locked { overflow: hidden; }

.skip {
  position: absolute; inset-inline-start: 12px; top: 12px; z-index: 300;
  padding: .7rem 1rem; border-radius: 12px;
  background: var(--rose-1); color: var(--ink); font-weight: 500;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

.page {
  width: 100%; max-width: var(--col);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

/* ---------- top bar (sits over the photo) ---------- */
.bar {
  position: absolute; z-index: var(--z-bar);
  top: 0; inset-inline: calc(-1 * var(--gutter));
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 12px 0;
  padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar .lang-btn {
  min-height: 48px; min-width: 48px;
  background: rgb(20 18 20 / .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: rgb(232 185 160 / .28);
}

/* ---------- hero ---------- */
.hero { position: relative; }
.hero__photo {
  position: relative;
  margin: 0 calc(-1 * max(var(--gutter), env(safe-area-inset-left)));
  height: clamp(300px, 88vw, 400px);
  overflow: hidden;
  background: #2a2627;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, rgb(0 0 0 / .55) 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 52%, rgb(0 0 0 / .55) 76%, transparent 100%);
}
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
}
.hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(20 18 20 / .35) 0%, transparent 22%, transparent 42%, rgb(20 18 20 / .6) 80%);
}

/* the monogram: draws itself, then sits filled; tap it */
.mono {
  position: relative;
  margin: -6px 0 0 -4px; margin-inline: -4px 0;
  width: 64px; height: 64px; padding: 6px;
  border-radius: 50%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mono svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 14px rgb(0 0 0 / .55)); }
.mono__stroke { stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mono__sheen { transform: translateX(-280px); }
.js .mono__stroke { stroke-dashoffset: 1; animation: monoDraw 1.8s .15s cubic-bezier(.6, .1, .3, 1) forwards, monoStrokeOut .8s 1.8s ease forwards; }
.js .mono__fill { opacity: 0; animation: monoFill .9s 1.3s ease forwards; }
.js .mono__sheen { animation: monoSheen 8s 2.4s var(--ease) infinite; }
.mono.is-pop svg { animation: monoPop .6s var(--ease); }
@keyframes monoDraw { to { stroke-dashoffset: 0; } }
@keyframes monoStrokeOut { to { opacity: .3; } }
@keyframes monoFill { to { opacity: 1; } }
@keyframes monoSheen { 0% { transform: translateX(-280px); } 18%, 100% { transform: translateX(660px); } }
@keyframes monoPop { 30% { transform: scale(.86); } 65% { transform: scale(1.1); } }
.mono__hint {
  position: absolute; inset: 2px; border-radius: 50%;
  border: 1px solid var(--rose-2); opacity: 0; pointer-events: none;
}
.mono.is-hinting .mono__hint { animation: hint 1.4s var(--ease) 2; }
@keyframes hint { 0% { transform: scale(.6); opacity: 0; } 30% { opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }

.hero__copy { position: relative; margin-top: -5.25rem; }
.hero__name {
  margin: 0;
  font: 500 clamp(2.9rem, 14.5vw, 4rem)/.92 var(--serif);
  letter-spacing: -.015em;
  color: var(--text);
  text-shadow: 0 2px 24px rgb(0 0 0 / .45);
}
.hero__name span { display: block; }
.hero__name span + span {
  background: var(--rose-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  padding-bottom: .06em;
}
.hero__role {
  margin: .7rem 0 0;
  font: 400 1.0625rem/1.35 var(--sans);
  letter-spacing: .01em;
  color: var(--rose-1);
}
.hero__place { margin: .2rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--muted); max-width: 34ch; }
html:lang(ar) .hero__name { font-weight: 700; line-height: 1.2; letter-spacing: 0; font-size: clamp(2.6rem, 13vw, 3.6rem); }
html:lang(ko) .hero__name { line-height: 1.1; letter-spacing: -.01em; }

/* ---------- quick actions ---------- */
.quick {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
  margin: 1.5rem -4px 0;
}
.no-js .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qa {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  min-height: 84px; padding: 4px 2px 6px;
  border-radius: 16px;
  text-align: center;
  touch-action: manipulation;
  transition: transform .18s var(--ease);
}
.qa__icon {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgb(255 255 255 / .03);
  color: var(--rose-1);
  transition: border-color .3s, background-color .3s;
}
.qa__icon svg { width: 23px; height: 23px; }
.qa__label { font-size: .78rem; line-height: 1.2; color: var(--text); letter-spacing: .01em; overflow-wrap: anywhere; }
.qa--primary .qa__icon { background: var(--rose-grad); border-color: transparent; color: var(--ink); box-shadow: 0 8px 22px -10px rgb(232 185 160 / .7); }
.qa:active { transform: scale(.92); }
.qa.is-tapped .qa__icon svg { animation: iconBounce .5s var(--ease); }
@keyframes iconBounce { 35% { transform: scale(.7) rotate(-12deg); } 70% { transform: scale(1.2) rotate(6deg); } }
@media (hover: hover) { .qa:hover .qa__icon { border-color: var(--rose-2); } }

/* ---------- link cards ---------- */
.links { margin-top: 1.5rem; }
.links__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.link {
  --brand: var(--ink-3);
  --on-brand: #fff;
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 22px; align-items: center; gap: 14px;
  min-height: 70px;
  padding-block: 10px; padding-inline: 11px 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  touch-action: manipulation;
  transition: transform .18s var(--ease), border-color .3s;
}
.link:active { transform: scale(.975); }
@media (hover: hover) { .link:hover { border-color: var(--line-strong); } .link:hover .link__go { transform: translateX(3px); } [dir="rtl"] .link:hover .link__go { transform: scaleX(-1) translateX(3px); } }
.link__icon {
  position: relative;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: rgb(232 185 160 / .07);
  border: 1px solid var(--line);
  color: var(--rose-1);
  transition: background-color .3s, border-color .3s, color .3s;
}
.link__icon svg { width: 24px; height: 24px; transition: transform .45s var(--ease-out), filter .3s; }
.link__text { display: grid; gap: 1px; min-width: 0; }
.link__title { font-size: 1.0625rem; font-weight: 500; line-height: 1.25; letter-spacing: .005em; }
.link__sub { font-size: .85rem; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; transition: color .3s; }
.link__sub[dir="ltr"] { unicode-bidi: isolate; }
html[dir="rtl"] .link__sub[dir="ltr"], html[dir="rtl"] .mrow__addr { text-align: right; }
.link__go { width: 20px; height: 20px; color: var(--rose-2); transition: transform .3s var(--ease), color .3s; }
[dir="rtl"] .link__go { transform: scaleX(-1); }

.link--site {
  min-height: 82px;
  border-color: transparent;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
    linear-gradient(135deg, var(--rose-1), rgb(184 119 90 / .5) 45%, rgb(232 185 160 / .12) 70%, var(--rose-2)) border-box;
}
.link--site .link__icon { background: var(--rose-grad); border-color: transparent; color: var(--ink); }
.link--site .link__icon svg { width: 30px; height: 30px; }
.link--site .link__title { font: 500 1.3rem/1.15 var(--serif); }
html:lang(ar) .link--site .link__title, html:lang(ko) .link--site .link__title { font-family: var(--serif); font-size: 1.15rem; }

/* brand identities, revealed on press */
.link[data-brand="site"] { --brand: var(--rose-grad); --on-brand: var(--ink); }
.link[data-brand="ig"] { --brand: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.link[data-brand="tt"] { --brand: #010101; }
.link[data-brand="in"] { --brand: #0a66c2; }
.link[data-brand="x"] { --brand: #000; }
.link[data-brand="fb"] { --brand: #1877f2; }

.link__flood {
  position: absolute; z-index: -1;
  left: var(--fx, 50%); top: var(--fy, 50%);
  width: var(--fd, 600px); height: var(--fd, 600px);
  margin: calc(var(--fd, 600px) / -2) 0 0 calc(var(--fd, 600px) / -2);
  border-radius: 50%;
  background: var(--brand);
  transform: scale(0);
  pointer-events: none;
}
.link.is-launch { border-color: transparent; color: var(--on-brand); }
.link.is-launch .link__flood { transform: scale(1); transition: transform .5s var(--ease-out); }
.link.is-launch .link__sub, .link.is-launch .link__go { color: var(--on-brand); }
.link.is-launch .link__icon { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .35); color: var(--on-brand); }
.link[data-brand="site"].is-launch .link__icon { background: var(--ink); color: var(--rose-1); }
.link.is-launch .link__icon svg { transform: scale(1.22) rotate(-8deg); }
.link[data-brand="tt"].is-launch .link__icon svg { filter: drop-shadow(-2px -1px 0 #25f4ee) drop-shadow(2px 1px 0 #fe2c55); }
.link.is-launch .link__go { transform: translateX(6px); }
[dir="rtl"] .link.is-launch .link__go { transform: scaleX(-1) translateX(6px); }

/* full-screen hand-off: brand colour keeps growing from the tap */
.veil { position: fixed; inset: 0; z-index: var(--z-veil); overflow: hidden; }
.veil__disc {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  background: var(--brand);
  transform: scale(0);
  animation: veilGrow .55s var(--ease-out) forwards;
}
.veil__body {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 1rem;
  color: var(--on-brand);
  opacity: 0; transform: translateY(10px) scale(.96);
  animation: veilBody .45s .14s var(--ease-out) forwards;
}
.veil__body svg { width: 64px; height: 64px; }
.veil[data-brand="tt"] .veil__body svg { filter: drop-shadow(-3px -2px 0 #25f4ee) drop-shadow(3px 2px 0 #fe2c55); }
.veil__text { font: 500 1.05rem/1.3 var(--sans); letter-spacing: .02em; display: flex; align-items: center; gap: .5rem; }
.veil__dots { display: inline-flex; gap: 4px; }
.veil__dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: dot 1s infinite; }
.veil__dots i:nth-child(2) { animation-delay: .15s; }
.veil__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes veilGrow { to { transform: scale(1); } }
@keyframes veilBody { to { opacity: 1; transform: none; } }
@keyframes dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------- section titles ---------- */
.sec { margin-top: 2.5rem; }
.sec__title { margin: 0 0 .9rem; font: 500 1.6rem/1.15 var(--serif); letter-spacing: -.005em; }
html:lang(ar) .sec__title { font-weight: 600; font-size: 1.4rem; }

/* ---------- ventures ---------- */
.ventures { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.venture {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; height: 100%;
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  touch-action: manipulation;
  transition: transform .18s var(--ease), border-color .3s;
}
.venture:active { transform: scale(.96); }
@media (hover: hover) { .venture:hover { border-color: var(--line-strong); } }
.venture img {
  width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.venture__txt { display: grid; gap: 2px; padding: .2rem .6rem .7rem; }
.venture__name { font-size: .86rem; font-weight: 500; line-height: 1.2; }
.venture__what { font-size: .74rem; line-height: 1.3; color: var(--muted); }

/* ---------- press strip ---------- */
.press {
  list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 158px; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.press::-webkit-scrollbar { display: none; }
.press li { scroll-snap-align: start; }
.pcard {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; height: 100%;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  touch-action: manipulation;
  transition: transform .18s var(--ease), border-color .3s;
}
.pcard:active { transform: scale(.96); }
@media (hover: hover) { .pcard:hover { border-color: var(--line-strong); } }
.pcard img { width: 100%; height: 88px; object-fit: cover; }
.pcard__txt { display: grid; gap: 3px; padding: .6rem .7rem .75rem; }
.pcard__outlet { font-size: .74rem; color: var(--rose-2); letter-spacing: .02em; display: flex; align-items: center; gap: .35rem; }
.pcard__outlet svg { width: 12px; height: 12px; flex: none; }
.pcard__topic { font-size: .88rem; line-height: 1.3; }
.press__hint { margin: .5rem 0 0; font-size: .78rem; color: var(--muted); }

/* ---------- footer ---------- */
.foot {
  margin-top: 2.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  font-size: .82rem; color: var(--muted);
}
.foot a { display: inline-flex; align-items: center; min-height: 48px; color: var(--rose-1); }
.foot p { margin: 0; }

/* ---------- ripple + sparks ---------- */
.tap-ripple {
  position: absolute; left: var(--x); top: var(--y); z-index: -1;
  width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(246 216 198 / .34), rgb(232 185 160 / .12) 45%, transparent 70%);
  pointer-events: none;
  animation: ripple .7s var(--ease) forwards;
}
@keyframes ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.fx-layer { position: fixed; inset: 0; z-index: var(--z-fx); pointer-events: none; overflow: hidden; }
.spark {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, #fff6ef, var(--rose-2) 55%, transparent 72%);
  animation: spark var(--t) cubic-bezier(.15, .8, .3, 1) forwards;
}
.spark--line { width: 2px; height: calc(var(--s) * 3); border-radius: 2px; background: linear-gradient(var(--rose-1), transparent); transform-origin: 50% 0; }
@keyframes spark {
  0% { transform: translate(0, 0) rotate(var(--r)) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.2); opacity: 0; }
}

/* ---------- toast ---------- */
.toast {
  position: fixed; z-index: var(--z-toast);
  inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  width: fit-content; max-width: calc(var(--col) - 32px);
  margin-inline: auto;
  display: flex; align-items: center; gap: .65rem;
  padding: .8rem 1.1rem .8rem .85rem;
  border-radius: 16px;
  background: #2a2326;
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / .7);
  font-size: .95rem; line-height: 1.35;
  transform: translateY(calc(100% + 40px)); opacity: 0;
  transition: transform .4s var(--ease-out), opacity .25s;
  pointer-events: none;
}
.toast.is-on { transform: none; opacity: 1; }
.toast__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rose-grad); color: var(--ink); }
.toast__icon svg { width: 16px; height: 16px; }
.toast--warn .toast__icon { background: #3a2a2e; color: var(--rose-1); border: 1px solid var(--line-strong); }
.toast.is-on .toast__icon path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tick .45s .12s var(--ease-out) forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }

/* ---------- bottom sheets ---------- */
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); }
.sheet[hidden] { display: none; }
.sheet__scrim {
  position: absolute; inset: 0;
  background: rgb(10 9 10 / .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .35s var(--ease);
}
.sheet__panel {
  position: absolute; bottom: 0; inset-inline: 0;
  max-width: var(--col); margin-inline: auto;
  max-height: 90dvh; overflow: auto; overscroll-behavior: contain;
  padding: 0 max(16px, env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: linear-gradient(180deg, #221d20, var(--ink-2) 40%);
  border-top: 1px solid rgb(232 185 160 / .3);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -30px 60px -20px rgb(0 0 0 / .6);
  transform: translateY(105%);
  transition: transform .45s var(--ease-out);
}
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet.is-open .sheet__panel { transform: translateY(var(--drag, 0px)); }
.sheet.is-dragging .sheet__panel { transition: none; }
.sheet__head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem 0 .9rem;
  touch-action: none;
  cursor: grab;
}
.sheet__head::before {
  content: ""; position: absolute; top: 8px; left: 50%;
  width: 44px; height: 4px; margin-left: -22px; border-radius: 4px;
  background: rgb(232 185 160 / .35);
}
.sheet__title { margin: 0; font: 500 1.35rem/1.2 var(--serif); }
.sheet__close {
  flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; margin-inline-end: -8px; border-radius: 50%;
  color: var(--muted);
  transition: transform .2s var(--ease), color .2s;
}
.sheet__close svg { width: 20px; height: 20px; }
.sheet__close:active { transform: scale(.88) rotate(90deg); color: var(--text); }
.sheet__lede { margin: -.3rem 0 1rem; color: var(--muted); font-size: .92rem; }

.sheet__body > * { opacity: 0; transform: translateY(12px); transition: opacity .35s var(--ease), transform .45s var(--ease-out); }
.sheet.is-open .sheet__body > * { opacity: 1; transform: none; }
.sheet.is-open .sheet__body > :nth-child(2) { transition-delay: .06s; }
.sheet.is-open .sheet__body > :nth-child(3) { transition-delay: .12s; }
.sheet.is-open .sheet__body > :nth-child(4) { transition-delay: .18s; }

/* email rows */
.mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; }
.mrow__main, .mrow__copy {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 16px; border: 1px solid var(--line); background: rgb(255 255 255 / .02);
  touch-action: manipulation;
  transition: transform .18s var(--ease), border-color .3s;
}
.mrow__main { display: grid; gap: 1px; padding: .7rem 1rem; min-height: 64px; align-content: center; }
.mrow__who { font-size: .8rem; color: var(--rose-2); }
.mrow__addr { font-size: 1rem; overflow-wrap: anywhere; unicode-bidi: isolate; text-align: start; }
.mrow__copy { display: grid; place-items: center; width: 64px; color: var(--rose-1); }
.mrow__copy svg { width: 22px; height: 22px; }
.mrow__main:active, .mrow__copy:active { transform: scale(.97); }
.mrow__copy.is-done { border-color: var(--rose-2); }

/* qr */
.qr {
  display: grid; justify-items: center; gap: .6rem;
  margin: 0 auto 1rem; padding: 18px 18px 14px;
  width: min(100%, 320px);
  border-radius: 24px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 24px 50px -24px rgb(232 185 160 / .45);
}
.qr__code { width: 100%; aspect-ratio: 1; }
.qr__code svg { width: 100%; height: 100%; }
.qr__url { font: 500 .95rem/1 var(--sans); letter-spacing: .02em; color: #4a3a33; direction: ltr; }
.sheet.is-open .qr { animation: qrIn .6s var(--ease-out) both; }
@keyframes qrIn { from { transform: scale(.9) rotate(-2deg); opacity: 0; } }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 54px; padding: 0 1rem;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  font-size: .98rem; font-weight: 500;
  touch-action: manipulation;
  transition: transform .18s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--rose-grad); border-color: transparent; color: var(--ink); }
.btn:active { transform: scale(.96); }

/* ---------- easter egg: the signature writes itself ---------- */
.egg {
  position: fixed; inset: 0; z-index: var(--z-veil);
  display: grid; place-content: center; justify-items: center; gap: 1rem;
  padding: 24px;
  background: rgb(14 12 14);
  animation: fadeIn .35s var(--ease) both;
}
.egg.is-out { animation: fadeOut .35s var(--ease-in) forwards; }
.egg__ink { position: relative; overflow: hidden; width: min(86vw, 420px); }
.egg__ink img { width: 100%; height: auto; filter: brightness(2.1) saturate(.85); }
.egg__wipe {
  position: absolute; inset: -2px;
  background: rgb(14 12 14);
  transform-origin: 100% 50%;
  animation: wipe 1.6s .2s cubic-bezier(.5, .1, .3, 1) forwards;
}
.egg__note { margin: 0; color: var(--rose-1); font: italic 400 1.1rem/1.3 var(--serif); opacity: 0; animation: fadeIn .5s 1.5s var(--ease) forwards; text-align: center; }
@keyframes wipe { to { transform: translateX(101%); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }

/* ---------- entrance: one orchestrated moment ---------- */
.js .rise { animation: rise .7s var(--ease-out) backwards; animation-delay: calc(var(--d, 0) * 1ms); }
.js .hero__photo img { animation: photoIn 1.2s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes photoIn { from { opacity: 0; transform: scale(1.07); } }

/* ---------- wider screens: same column, framed ---------- */
@media (min-width: 520px) {
  .page { padding-top: 24px; }
  .hero__photo { margin: 0; border-radius: 28px; }
  .bar { inset-inline: 0; padding: 12px 14px 0; }
  .press { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
}
@media (min-width: 700px) {
  .sheet__panel {
    top: 50%; bottom: auto;
    width: min(440px, calc(100vw - 48px));
    border: 1px solid rgb(232 185 160 / .3); border-radius: 26px;
    padding-bottom: 1.5rem;
    transform: translateY(-46%) scale(.96); opacity: 0;
    transition: transform .35s var(--ease-out), opacity .25s;
  }
  .sheet.is-open .sheet__panel { transform: translateY(-50%); opacity: 1; }
  .sheet__head { cursor: default; }
  .sheet__head::before { display: none; }
}

/* ---------- reduced motion: everything still works, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .js .mono__stroke { display: none; }
  .js .mono__fill { opacity: 1; animation: none; }
  .mono__sheen { display: none; }
  .tap-ripple, .spark, .mono__hint, .veil { display: none; }
  .link:active, .qa:active, .venture:active, .pcard:active, .btn:active { transform: none; }
  .egg__wipe { display: none; }
}