---
// Full brand signature, echoing Simone's existing wordmark:
//   "Simon's"  — Great Vibes script, large
//   ───◆───    — thin gold ornamental rule with the door-hanger mark centered in it
//   GUESTHOUSE — Fraunces 300, letter-spaced uppercase caps
//   Rome       — Great Vibes script, coral
// Centered, responsive, real HTML text (SEO + i18n friendly). The whole lockup is
// one accessible label; the door hanger is decorative inside it.
import DoorHanger from './DoorHanger.astro';
---
<div class="lockup" role="img" aria-label="Simon's Guesthouse Rome">
  <span class="lockup-script lockup-name">Simon's</span>
  <span class="lockup-rule" aria-hidden="true">
    <span class="rule-line"></span>
    <DoorHanger size={26} class="rule-mark" />
    <span class="rule-line"></span>
  </span>
  <span class="lockup-caps">Guesthouse</span>
  <span class="lockup-script lockup-rome">Rome</span>
</div>

<style>
  .lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1;
    color: var(--c-cream);
  }

  .lockup-script {
    font-family: var(--font-script);
    /* Great Vibes carries deep ascenders/descenders — pad so flourishes never clip */
    padding-block: .08em .04em;
  }

  .lockup-name {
    font-size: clamp(2.6rem, 1.9rem + 3vw, 4rem);
  }

  /* Ornamental rule: two gold hairlines flanking the centered door-hanger mark */
  .lockup-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    inline-size: min(20rem, 80%);
    /* pulled up closer to "Simon's", a touch more room down to GUESTHOUSE */
    margin-block: -.12em .42em;
  }

  .rule-line {
    block-size: 1px;
    flex: 1;
    background: linear-gradient(
      to var(--rule-dir, right),
      transparent,
      var(--c-brass) 45%,
      var(--c-brass)
    );
  }

  /* Mirror each hairline's fade so the gradient brightens toward the center mark */
  .rule-line:last-of-type {
    --rule-dir: left;
  }

  .rule-mark {
    flex-shrink: 0;
    display: block;
  }

  .lockup-caps {
    font-family: var(--font-display);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .42em;
    /* trailing letter-spacing shifts the visual center right — nudge back to center */
    padding-inline-start: .42em;
    font-size: clamp(.72rem, .66rem + .3vw, .9rem);
    color: color-mix(in oklab, var(--c-cream) 82%, transparent);
  }

  .lockup-rome {
    font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
    color: var(--c-coral);
    /* clearer separation from the GUESTHOUSE line above */
    margin-block-start: .55em;
  }
</style>