/* ==========================================================================
   rotoms.css — shared surface for every mini app on rotoms.com
   Vanilla CSS. No framework, no build step. Import once per app:
     <link rel="stylesheet" href="/rotoms.css">
   Individual invite THEMES intentionally override these tokens (see bottom).
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Instrument Sans (UI + display) · IBM Plex Mono (machine facts only)
   <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
------------------------------------------------------------------------- */

:root {
  /* Surfaces & ink */
  --rot-ground:       #F5F2EC;  /* page background */
  --rot-surface:      #FCFAF6;  /* cards, inputs sit on ground */
  --rot-surface-alt:  #EDE8DE;  /* banded sections */
  --rot-input:        #FFFDF9;
  --rot-ink:          #16140F;  /* primary text, primary button */
  --rot-ink-70:       #5B564A;  /* body copy, secondary text */
  --rot-ink-45:       #8C8677;  /* labels, meta, disabled text */
  --rot-rule:         #E2DCCF;  /* hairline inside cards */
  --rot-rule-strong:  #CBC3B2;  /* section dividers, input borders */
  --rot-graphite:     #191815;  /* dark blocks */
  --rot-graphite-2:   #141310;
  --rot-graphite-rule:#2A2823;
  --rot-on-graphite:  #F5F2EC;
  --rot-on-graphite-70:#A8A296;

  /* Accent — clay. ONE clay element per screen: the action that costs money. */
  --rot-clay:         #A9553C;
  --rot-clay-hover:   #8A4531;
  --rot-clay-tint:    #F0E2DB;
  --rot-clay-tint-br: #E3CBBF;
  --rot-on-clay:      #FFF8F4;

  /* Pine — paid / live / confirmed only. Never decoration. */
  --rot-pine:         #3B7355;
  --rot-pine-deep:    #2F5C44;
  --rot-pine-tint:    #E2EBE5;

  /* Danger */
  --rot-danger:       #B4402C;

  /* Type */
  --rot-font:         'Instrument Sans', system-ui, -apple-system, sans-serif;
  --rot-font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --rot-fs-display:   clamp(38px, 6.6vw, 62px);
  --rot-fs-h1:        clamp(30px, 4.4vw, 42px);
  --rot-fs-h2:        24px;
  --rot-fs-h3:        18px;
  --rot-fs-body:      16px;
  --rot-fs-sm:        14px;
  --rot-fs-label:     11px;   /* mono, uppercase, .16em tracking */
  --rot-lh-tight:     1.02;
  --rot-lh-head:      1.1;
  --rot-lh-body:      1.6;
  --rot-ls-display:   -.032em;
  --rot-ls-head:      -.02em;
  --rot-ls-label:     .16em;

  /* Space — 4pt base */
  --rot-s1: 4px;  --rot-s2: 8px;  --rot-s3: 12px; --rot-s4: 16px;
  --rot-s6: 24px; --rot-s8: 32px; --rot-s12: 48px; --rot-s16: 64px; --rot-s24: 96px;

  /* Radius */
  --rot-r-0:    0;       /* rules, full-bleed bands */
  --rot-r-ctrl: 8px;     /* buttons, inputs */
  --rot-r-card: 12px;    /* cards (16px on hero cards) */
  --rot-r-pill: 999px;

  /* Depth — shadows only for things that float */
  --rot-shadow-raised:  0 1px 2px rgba(22,20,15,.05);
  --rot-shadow-overlay: 0 12px 28px -12px rgba(22,20,15,.22);
  --rot-shadow-float:   0 30px 60px -34px rgba(22,20,15,.40);

  /* Motion */
  --rot-ease:      cubic-bezier(.2,.7,.2,1);
  --rot-dur-fast:  .18s;
  --rot-dur:       .3s;
  --rot-dur-slow:  .75s;

  /* Layout */
  --rot-max:       1180px;
  --rot-gutter:    clamp(18px, 4vw, 44px);
  --rot-tap:       44px;   /* minimum tap target */
}

/* --- Icons ---------------------------------------------------------------
   Material Symbols (outlined). Load once per page alongside the fonts:
   <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block" rel="stylesheet">
   `display=block` is load-bearing — without it the browser briefly paints the
   raw ligature text ("favorite") before the glyph arrives.
   Usage: <span class="ms">favorite</span>. Never use emoji in the UI.
------------------------------------------------------------------------- */
.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal;
  font-size: 22px; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none; vertical-align: middle;
}
.ms--sm { font-size: 18px; }
.ms--lg { font-size: 28px; }
.ms--fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--rot-ground);
  color: var(--rot-ink);
  font: 400 var(--rot-fs-body)/var(--rot-lh-body) var(--rot-font);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}
a { color: var(--rot-clay); text-decoration: none; }
a:hover { color: var(--rot-clay-hover); }
img { max-width: 100%; display: block; }

.rot-wrap { max-width: var(--rot-max); margin: 0 auto; padding: 0 var(--rot-gutter); }
.rot-band { background: var(--rot-surface-alt); border-block: 1px solid var(--rot-rule-strong); }
.rot-dark { background: var(--rot-graphite-2); color: var(--rot-on-graphite); }

/* --- Type --------------------------------------------------------------- */
.rot-display { font-size: var(--rot-fs-display); line-height: var(--rot-lh-tight); letter-spacing: var(--rot-ls-display); font-weight: 600; margin: 0; }
.rot-h1 { font-size: var(--rot-fs-h1); line-height: var(--rot-lh-head); letter-spacing: var(--rot-ls-head); font-weight: 600; margin: 0; }
.rot-h2 { font-size: var(--rot-fs-h2); line-height: 1.2; letter-spacing: -.01em; font-weight: 600; margin: 0; }
.rot-h3 { font-size: var(--rot-fs-h3); line-height: 1.3; font-weight: 500; margin: 0; }
.rot-body { font-size: var(--rot-fs-body); line-height: var(--rot-lh-body); color: var(--rot-ink-70); margin: 0; }
.rot-sm { font-size: var(--rot-fs-sm); line-height: 1.55; color: var(--rot-ink-70); }
/* Mono is ONLY for machine facts: price, link, status, id, timestamp. */
.rot-label { font-family: var(--rot-font-mono); font-size: var(--rot-fs-label); letter-spacing: var(--rot-ls-label); text-transform: uppercase; color: var(--rot-ink-45); }
.rot-mono { font-family: var(--rot-font-mono); font-size: 12.5px; color: var(--rot-ink-70); }
.rot-price { font-family: var(--rot-font-mono); font-size: 14px; color: var(--rot-ink); }

/* --- Buttons ------------------------------------------------------------ */
.rot-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--rot-s2);
  min-height: var(--rot-tap);
  font: 500 15px/1 var(--rot-font);
  padding: 13px 22px;
  border: 0; border-radius: var(--rot-r-ctrl);
  cursor: pointer;
  transition: background var(--rot-dur-fast), border-color var(--rot-dur-fast), transform var(--rot-dur-fast), color var(--rot-dur-fast);
}
.rot-btn--primary { background: var(--rot-ink); color: var(--rot-surface); }
.rot-btn--primary:hover { background: #332F26; transform: translateY(-1px); }
/* Pay: the only clay button. Max one per screen. */
.rot-btn--pay { background: var(--rot-clay); color: var(--rot-on-clay); }
.rot-btn--pay:hover { background: var(--rot-clay-hover); transform: translateY(-1px); }
.rot-btn--pay .rot-btn__amt { font-family: var(--rot-font-mono); font-size: 12.5px; opacity: .75; }
.rot-btn--gcash { background: var(--rot-clay-tint); color: var(--rot-clay); border: 1px solid var(--rot-clay-tint-br); }
.rot-btn--secondary { background: var(--rot-surface); color: var(--rot-ink); border: 1px solid var(--rot-rule-strong); }
.rot-btn--secondary:hover { border-color: var(--rot-ink); }
.rot-btn--ghost { background: transparent; color: var(--rot-ink-70); padding: 13px 14px; }
.rot-btn--ghost:hover { color: var(--rot-ink); }
.rot-btn--onDark { background: var(--rot-ground); color: var(--rot-ink); }
.rot-btn--onDarkGhost { background: transparent; color: #EDE8DE; border: 1px solid #3A3830; }
.rot-btn--sm { font-size: 14px; padding: 10px 17px; min-height: 40px; }
.rot-btn--block { width: 100%; }
.rot-btn[disabled], .rot-btn--disabled { opacity: .32; cursor: not-allowed; transform: none; }
.rot-link { font: 500 15px/1.2 var(--rot-font); color: var(--rot-ink); border-bottom: 1px solid var(--rot-rule-strong); padding-bottom: 2px; }
.rot-link:hover { color: var(--rot-ink); border-color: var(--rot-ink); }

/* --- Fields ------------------------------------------------------------- */
.rot-field { display: flex; flex-direction: column; gap: 7px; }
.rot-field__label { font-size: 13.5px; font-weight: 500; }
.rot-input, .rot-textarea, .rot-select {
  font: 400 15.5px/1.5 var(--rot-font);
  color: var(--rot-ink);
  background: var(--rot-input);
  border: 1px solid var(--rot-rule-strong);
  border-radius: var(--rot-r-ctrl);
  padding: 12px 14px;
  min-height: 48px;
  outline: none;
  width: 100%;
}
.rot-textarea { resize: vertical; min-height: 96px; }
.rot-input:focus, .rot-textarea:focus, .rot-select:focus {
  border: 1.5px solid var(--rot-clay);
  box-shadow: 0 0 0 3px rgba(169,85,60,.14);
}
.rot-input--error { border: 1.5px solid var(--rot-danger); }
.rot-field__hint { font-size: 12.5px; color: var(--rot-ink-45); }
.rot-field__error { font-size: 12.5px; color: var(--rot-danger); }

/* Choice chips */
.rot-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.rot-chip { font: 400 14px/1 var(--rot-font); padding: 12px 15px; min-height: var(--rot-tap);
  display: inline-flex; align-items: center; border-radius: var(--rot-r-pill);
  background: var(--rot-input); border: 1px solid var(--rot-rule-strong); color: var(--rot-ink-70); cursor: pointer; }
.rot-chip[aria-pressed="true"], .rot-chip--on { background: var(--rot-ink); border-color: var(--rot-ink); color: var(--rot-surface); font-weight: 500; }

/* Toggle */
.rot-toggle { width: 42px; height: 24px; border-radius: var(--rot-r-pill); background: #DFD9CC; position: relative; flex: none; cursor: pointer; transition: background var(--rot-dur-fast); }
.rot-toggle__dot { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--rot-surface); transition: left var(--rot-dur-fast) var(--rot-ease); }
.rot-toggle[aria-checked="true"] { background: var(--rot-pine); }
.rot-toggle[aria-checked="true"] .rot-toggle__dot { left: 21px; }

/* --- Cards, pills, notices --------------------------------------------- */
.rot-card { background: var(--rot-surface); border: 1px solid var(--rot-rule); border-radius: var(--rot-r-card); }
.rot-card--hero { border-radius: 16px; border-color: var(--rot-rule-strong); }
.rot-card--interactive { transition: transform var(--rot-dur) var(--rot-ease), box-shadow var(--rot-dur), border-color var(--rot-dur); }
.rot-card--interactive:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(22,20,15,.45); border-color: var(--rot-rule-strong); }
.rot-card__head { padding: 14px 20px; border-bottom: 1px solid var(--rot-rule); }
.rot-card__body { padding: 22px 20px; }

.rot-pill { display: inline-flex; align-items: center; font-family: var(--rot-font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 11px; border-radius: 6px; }
.rot-pill--live { background: var(--rot-pine-tint); color: var(--rot-pine-deep); }
.rot-pill--draft { background: var(--rot-surface-alt); color: var(--rot-ink-70); }
.rot-pill--due { background: var(--rot-clay-tint); color: var(--rot-clay-hover); }
.rot-pill--soon { background: transparent; border: 1px dashed var(--rot-rule-strong); color: var(--rot-ink-45); }

.rot-notice { display: flex; gap: 12px; padding: 14px 16px; border-radius: 10px; }
.rot-notice__dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; flex: none; }
.rot-notice--ok { background: var(--rot-pine-tint); color: var(--rot-pine-deep); }
.rot-notice--ok .rot-notice__dot { background: var(--rot-pine); }
.rot-notice--warn { background: var(--rot-clay-tint); color: var(--rot-clay-hover); }
.rot-notice--warn .rot-notice__dot { background: var(--rot-clay); }
.rot-notice--info { background: var(--rot-surface-alt); color: var(--rot-ink); }
.rot-notice--info .rot-notice__dot { background: var(--rot-ink-45); }

/* Empty state */
.rot-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 24px; }
.rot-empty__art { width: 120px; height: 64px; border: 1px dashed var(--rot-rule-strong); border-radius: var(--rot-r-ctrl);
  background: repeating-linear-gradient(45deg, #F1ECE2 0 6px, var(--rot-surface) 6px 12px); }
.rot-empty__title { font-size: 16px; font-weight: 500; }
.rot-empty__body { font-size: 14px; line-height: 1.55; color: var(--rot-ink-45); max-width: 32ch; margin: 0; }

/* Image placeholder (until real photography lands) */
.rot-ph { border: 1px solid var(--rot-rule-strong); border-radius: 10px;
  background: repeating-linear-gradient(45deg, #F1ECE2 0 7px, var(--rot-surface) 7px 14px);
  display: grid; place-items: center; }
.rot-ph__tag { font-family: var(--rot-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rot-ink-45); background: var(--rot-surface); padding: 5px 10px; border-radius: 5px; text-align: center; }

/* --- Mini invite -----------------------------------------------------------
   A real, scaled-down Vellum invite for hero slots. Built from type and
   gradients on purpose: it shows the actual product instead of a striped
   "image goes here" box, and it needs no photography to look finished.
   Carries its own palette so it reads as the invite, not as the hub.
--------------------------------------------------------------------------- */
.rot-mini {
  --m-ground: #FBF7F1; --m-ink: #2E2A24; --m-soft: #6A6355;
  --m-sage: #7C8467; --m-rule: #E4DACB;
  background: var(--m-ground); color: var(--m-ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 30px 22px 24px; height: 100%;
  container-type: inline-size;
}
.rot-mini__kicker,
.rot-mini__date { font-family: var(--rot-font-mono); text-transform: uppercase; }
.rot-mini__kicker { font-size: 8px; letter-spacing: .3em; color: var(--m-sage); }
.rot-mini__names { font-size: clamp(34px, 12cqi, 48px); line-height: .92; font-weight: 300; margin-top: 14px; }
.rot-mini__amp { display: block; font-size: .45em; font-style: italic; color: var(--m-sage); margin: 2px 0; }
.rot-mini__rule { width: 34px; height: 1px; background: #C9BFAF; margin: 16px 0; }
.rot-mini__date { font-size: 8.5px; letter-spacing: .2em; color: var(--m-soft); }
/* Arch-topped panel — the signature Vellum shape, filled with a soft wash. */
.rot-mini__arch {
  width: 74%; aspect-ratio: 4/4.4; margin-top: 18px;
  border-radius: 999px 999px 10px 10px; border: 1px solid var(--m-rule);
  background:
    radial-gradient(120% 70% at 30% 18%, rgba(220,181,168,.55) 0%, rgba(220,181,168,0) 60%),
    radial-gradient(110% 80% at 78% 62%, rgba(124,132,103,.42) 0%, rgba(124,132,103,0) 62%),
    linear-gradient(160deg, #F6EFE4 0%, #EFE7DA 100%);
}
.rot-mini__count { display: flex; gap: 16px; margin-top: 18px; }
.rot-mini__count b { display: block; font-size: 21px; font-weight: 400; line-height: 1; }
.rot-mini__count span { font-family: var(--rot-font-mono); font-size: 7.5px; letter-spacing: .18em;
  text-transform: uppercase; color: #8C8371; margin-top: 4px; display: block; }
.rot-mini__cta { margin-top: auto; padding-top: 18px; width: 100%; }
.rot-mini__btn { background: var(--m-sage); color: #FBF7F1; border-radius: 7px;
  padding: 9px 0; font-family: var(--rot-font); font-size: 11.5px; font-weight: 500; }

/* Phone shell that holds it */
.rot-phone { position: relative; border: 1px solid var(--rot-rule-strong); border-radius: 22px;
  overflow: hidden; background: var(--rot-surface); box-shadow: var(--rot-shadow-float); display: block;
  color: inherit; }
.rot-phone:hover { text-decoration: none; }
.rot-phone__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-top: 1px solid var(--rot-rule); background: var(--rot-surface); }

/* --- Nav & sticky pay bar ---------------------------------------------- */
.rot-nav { position: sticky; top: 0; z-index: 20; background: rgba(245,242,236,.86);
  backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--rot-dur); }
.rot-nav--scrolled { border-bottom-color: var(--rot-rule-strong); }
.rot-nav__inner { max-width: var(--rot-max); margin: 0 auto; padding: 16px var(--rot-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.rot-mark { width: 24px; height: 24px; border-radius: 7px; background: var(--rot-clay); display: grid; place-items: center; flex: none; }
.rot-mark__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rot-ground); }
.rot-wordmark { font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; }

.rot-paybar { position: sticky; bottom: 0; z-index: 20; background: var(--rot-ground);
  border-top: 1px solid var(--rot-rule-strong); padding: 16px var(--rot-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  box-shadow: 0 -8px 20px -14px rgba(22,20,15,.3); padding-bottom: max(16px, env(safe-area-inset-bottom)); }

/* --- Motion ------------------------------------------------------------ */
@keyframes rot-riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes rot-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rot-drift  { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,-22px) scale(1.08); } }
@keyframes rot-marquee{ from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rot-bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rot-blink  { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

/* Scroll reveal: JS adds .is-in when the element enters the viewport.
   ALWAYS ship a fallback timeout that adds .is-in, so content is never
   permanently hidden if IntersectionObserver never fires. */
.rot-reveal { opacity: 0; transform: translateY(22px);
  transition: opacity var(--rot-dur-slow) var(--rot-ease), transform var(--rot-dur-slow) var(--rot-ease); }
.rot-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rot-reveal { opacity: 1; transform: none; }
}

/* --- Invite theme override hooks --------------------------------------
   Each theme sets its own ground/ink/accent + display font on a wrapper.
   Everything above keeps working; only the tokens change.
--------------------------------------------------------------------------- */
.theme-vellum {      /* elegant floral wedding */
  --rot-ground:#FBF7F1; --rot-surface:#FDFBF7; --rot-surface-alt:#F3EEE5;
  --rot-ink:#2E2A24; --rot-ink-70:#6A6355; --rot-ink-45:#8C8371;
  --rot-rule:#E4DACB; --rot-rule-strong:#D8CDBB;
  --rot-clay:#7C8467; --rot-clay-hover:#69704F; --rot-on-clay:#FBF7F1;
  --rot-theme-display:'Cormorant Garamond', Georgia, serif;
}
.theme-onyx {        /* 18th birthday debut, glam */
  --rot-ground:#131218; --rot-surface:#191821; --rot-surface-alt:#1B1A22;
  --rot-ink:#F2EDE4; --rot-ink-70:#A69C88; --rot-ink-45:#8B8479;
  --rot-rule:#24222C; --rot-rule-strong:#3A3644; --rot-input:#191821;
  --rot-clay:#C8A96A; --rot-clay-hover:#B2945A; --rot-on-clay:#131218;
  --rot-theme-display:'Playfair Display', Georgia, serif;
}
.theme-sampaguita {  /* christening, soft & playful */
  --rot-ground:#F7FAF7; --rot-surface:#FFFFFF; --rot-surface-alt:#EAF4EE;
  --rot-ink:#25332C; --rot-ink-70:#5C7568; --rot-ink-45:#6E8B7C;
  --rot-rule:#D8E6DD; --rot-rule-strong:#D8E6DD;
  --rot-clay:#3E6B57; --rot-clay-hover:#345B4A; --rot-on-clay:#F7FAF7;
  --rot-accent-fun:#E8B84B;
  --rot-r-card:18px; --rot-r-ctrl:10px;
  --rot-theme-display:'Nunito', system-ui, sans-serif;
}
.theme-vellum, .theme-onyx, .theme-sampaguita {
  background: var(--rot-ground); color: var(--rot-ink); font-family: var(--rot-theme-display);
}
.theme-vellum .rot-label, .theme-onyx .rot-label, .theme-sampaguita .rot-label,
.theme-vellum .rot-mono,  .theme-onyx .rot-mono,  .theme-sampaguita .rot-mono { font-family: var(--rot-font-mono); }
/* Forms/buttons inside a theme stay on the UI sans for legibility */
.theme-vellum .rot-btn, .theme-onyx .rot-btn, .theme-vellum .rot-input, .theme-onyx .rot-input { font-family: var(--rot-font); }