.m-root {
    --beige:      #F2EBD8;
    --beige-deep: #E6DDC2;
    --tomato:     #E73E2C;
    --pink:       #ED2D6E;
    --cobalt:     #2A6EE5;
    --butter:     #F2C035;
    --ink:        #1B1612;
    --rule:       rgba(27,22,18,0.16);
    --soft:       rgba(27,22,18,0.6);
    --sans:  Helvetica, "Helvetica Neue", sans-serif;
    --serif: "EB Garamond", Georgia, serif;
    --mono:  "JetBrains Mono", ui-monospace, monospace;

    /* Baked from approved design */
    --accent:        #E73E2C;
    --ghost-top:     68%;
    --ghost-o:       0.04;
    --ghost-size:    210px;
    --steeping-size: 40px;
    --ring-speed:    50s;
  }

  .m-root * { box-sizing: border-box; margin: 0; padding: 0; }

  .m-root, .m-root {
    background: #111; min-height: 100%;
    font-family: var(--sans); -webkit-font-smoothing: antialiased;
  }

  .m-root {
    min-height: 100svh;
    display: flex; align-items: center; justify-content: center;
  }

  /* On phones the card is the body's flex child directly (fluid, full-bleed). */
  .m-root .card-fit { display: contents; }


  .m-root .phone {
    position: relative;
    width: 100%; max-width: 430px;
    height: 100svh;
    background: var(--beige); color: var(--ink);
    display: flex; flex-direction: column; overflow: hidden;
  }

  .m-root .phone::after {
    content: ''; position: absolute; inset: 0;
    pointer-events: none; z-index: 40; opacity: 0.2; mix-blend-mode: multiply;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55 0 0 0 0 0.52 0 0 0 0 0.45 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  }

  /* On wider screens the card becomes a fixed phone-shaped frame that is
     SCALED to fit the window (never squashed) — so the composition can't
     collide no matter how short the window is. */
  @media (min-width: 481px){

    .m-root { padding: 24px; }

    .m-root .card-fit { display: block; position: relative; flex: none; }

    .m-root .phone {
      position: absolute; top: 0; left: 0;
      width: 390px; height: 844px; max-width: none;
      border-radius: 44px;
      box-shadow: 0 28px 70px rgba(0,0,0,0.65), 0 0 0 1.5px rgba(255,255,255,0.07);
      transform-origin: top left;
    }

  }


  /* Salon stripe */
  .m-root .stripe { display: flex; height: 6px; flex-shrink: 0; }

  .m-root .stripe > span { flex: 1; }

  .m-root .s1 {background:var(--tomato)}
.m-root .s2 {background:var(--pink)}
.m-root .s3 {background:var(--cobalt)}
.m-root .s4 {background:var(--butter)}
.m-root .s5 {background:var(--ink)}


  /* Header */
  .m-root header {
    display: flex; justify-content: center; align-items: center;
    padding: 14px 24px 11px; border-bottom: 1px solid var(--rule); flex-shrink: 0; gap: 14px;
  }

  .m-root .meta { font-family: var(--mono); font-size: 9px; letter-spacing: 1.8px;
    text-transform: uppercase; font-weight: 700; color: var(--ink); white-space: nowrap; }

  .m-root .mark { display: inline-block; width: 8px; height: 8px;
    background: var(--accent); vertical-align: -1px; margin-right: 7px; }


  /* Main */
  .m-root main {
    flex: 1; padding: 44px 24px 36px;
    display: flex; flex-direction: column;
    justify-content: space-between; align-items: center;
    position: relative; overflow: hidden;
  }


  /* Ghosted monogram */
  .m-root .ghost {
    position: absolute; right: -0.08em; top: var(--ghost-top);
    transform: translateY(-50%) rotate(-4deg);
    font-family: var(--serif); font-style: italic; font-size: var(--ghost-size); line-height: 1;
    color: rgba(27,22,18,var(--ghost-o)); pointer-events: none; user-select: none; z-index: 0;
  }


  /* GROUP 1 — wordmark + status caption */
  .m-root .top { position: relative; z-index: 2; display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: 15px; flex-shrink: 0; }

  .m-root .lockup { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 0.86; }

  .m-root .surname { font-family: var(--sans); font-weight: 700;
    font-size: 60px; letter-spacing: -0.045em; text-transform: uppercase; }

  .m-root .given { font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: 64px; letter-spacing: -0.025em; margin-top: -0.02em; }

  .m-root .lockup .dot { color: var(--accent); }


  /* GROUP 2 — teacup centerpiece.
     padding-top/bottom RESERVES the ring + steam overhang inside this box so
     space-between can never let them drift up into "steeping," or down into
     the tagline. Keep in sync with --cup overhang if sizes change. */
  .m-root .stage { position: relative; z-index: 1; display: flex; flex-direction: column;
    align-items: center; padding: 50px 0 28px; flex-shrink: 0; }

  .m-root .status { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }

  .m-root .lede { font-family: var(--mono); font-size: 9px; letter-spacing: 3px;
    text-transform: uppercase; font-weight: 700; color: var(--soft); white-space: nowrap; }

  .m-root .steeping { font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: var(--steeping-size); line-height: 0.92; letter-spacing: -0.01em; color: var(--ink); }

  .m-root .steeping .comma { color: var(--accent); }

  .m-root .teacup-wrap { position: relative; width: 160px; height: 160px; }

  .m-root .ring { position: absolute; top: 50%; left: 50%;
    width: 152%; height: 152%; transform: translate(-50%, -50%); z-index: 2; }


  .m-root .ring text { font-family: var(--mono); font-size: 4px; font-weight: 700;
    letter-spacing: 0.5px; fill: var(--soft); }

  .m-root .ring .tick { fill: var(--accent); }

  @keyframes spin{ to { transform: rotate(360deg); } }


  .m-root .teacup-slot { width: 100%; height: 100%; position: relative; z-index: 0;
    border-radius: 50%; overflow: hidden; background: var(--beige-deep);
    box-shadow: 0 0 0 1.5px rgba(27,22,18,0.16), inset 0 2px 10px rgba(27,22,18,0.10); }

  .m-root .teacup-img { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 53% 50%;
    mix-blend-mode: multiply;
    user-select: none; -webkit-user-drag: none; }


  .m-root .steam {
    position: absolute; left: 50%; bottom: 76%;
    transform: translateX(-50%); width: 56%; height: 80px;
    pointer-events: none; z-index: 1;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 22%, black 70%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0%, black 22%, black 70%, transparent 100%);
  }

  .m-root .swirl { fill: none; stroke: rgba(27,22,18,0.78); stroke-width: 4; stroke-linecap: round;
    filter: blur(2.5px); opacity: 0; transform-box: fill-box; transform-origin: bottom center; }

  .m-root .sw1 { animation: riseSoft 7.5s ease-in-out infinite; }

  .m-root .sw2 { animation: riseSoft 7.5s ease-in-out infinite 2.5s; }

  .m-root .sw3 { animation: riseSoft 7.5s ease-in-out infinite 5s; }

  @keyframes riseSoft{
    0%   { transform: translateY(12px) scale(0.92); opacity: 0; }
    25%  { opacity: 0.5; }
    75%  { opacity: 0.22; }
    100% { transform: translateY(-30px) scale(1.04); opacity: 0; }
  }


  /* GROUP 3 — tagline + more soon */
  .m-root .bottom { position: relative; z-index: 2; display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: 22px; flex-shrink: 0; }

  .m-root .tagline { font-family: var(--serif); font-style: italic; font-size: 19px;
    line-height: 1.45; text-wrap: pretty; max-width: 320px; }

  .m-root .lead { font-style: normal; font-family: var(--sans); font-weight: 700; letter-spacing: -0.005em;
    background: linear-gradient(transparent 56%, var(--butter) 56%, var(--butter) 92%, transparent 92%);
    padding: 0 3px; margin-left: -3px; }

  .m-root .lead .dot { color: var(--accent); }


  .m-root .more { font-family: var(--mono); font-size: 10px; letter-spacing: 3px;
    text-transform: uppercase; font-weight: 700; color: var(--soft);
    display: flex; align-items: center; justify-content: center; gap: 10px; }

  .m-root .dots { display: flex; gap: 5px; }

  .m-root .dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
    animation: pulse 1.4s ease-in-out infinite; }

  .m-root .dots span:nth-child(2) { background:var(--cobalt); animation-delay:.2s; }

  .m-root .dots span:nth-child(3) { background:var(--pink);   animation-delay:.4s; }

  @keyframes pulse{
    0%,60%,100%{ opacity:.22; transform:scale(1); }
    30%{ opacity:1; transform:scale(1.3); }
  }


  /* Footer */
  .m-root footer {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px 16px;
    padding: 16px 24px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule);
    flex-shrink: 0; font-family: var(--mono);
  }

  .m-root .f-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

  .m-root .f-col:nth-child(1) { grid-column: 1 / -1; }

  .m-root .f-label { font-size: 8px; letter-spacing: 2.2px; text-transform: uppercase;
    font-weight: 700; color: var(--soft); display: flex; align-items: center; gap: 6px; }

  .m-root .sq { width: 6px; height: 6px; background: var(--accent); display: inline-block; }

  .m-root .f-col:nth-child(2) .sq { background: var(--cobalt); }

  .m-root .f-col:nth-child(3) .sq { background: var(--pink); }

  .m-root .f-val { font-size: 10.5px; letter-spacing: 0.3px; font-weight: 600;
    text-transform: uppercase; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .m-root .f-val a { color: inherit; text-decoration: none; }


  /* Short phone viewports (real-world svh with browser chrome): scale the
     composition down so the type ring and steam never collide with the
     "steeping" caption, and guarantee clearance around the cup. */
  @media (max-width: 480px) and (max-height: 800px){

    .m-root { --steeping-size: 34px; --ghost-size: 175px; }

    .m-root main { padding: 28px 24px 24px; }

    .m-root .top { gap: 12px; }

    .m-root .surname { font-size: 54px; }

    .m-root .given { font-size: 58px; }

    .m-root .stage { padding: 40px 0 22px; }

    .m-root .teacup-wrap { width: 144px; height: 144px; }

    .m-root .steam { height: 66px; }

    .m-root .bottom { gap: 16px; }

    .m-root .tagline { font-size: 18px; }

  }


  @media (prefers-reduced-motion: reduce){

    .m-root .swirl { animation: none; opacity: 0.4; }

    .m-root .dots span { animation: none; }

  }