/* ==========================================================================
   Luxmi Traders — temporary "under development" page
   Every colour, font and size knob lives in :root below. Change it there.
   ========================================================================== */

:root {
  /* Palette, sampled from the Lakshmi logo */
  --cream:      #FCF8EC;
  --cream-deep: #F7F1DF;
  --red:        #B31E28;
  --red-deep:   #8A1620;
  --red-wash:   rgba(179, 30, 40, 0.08);
  --red-line:   rgba(179, 30, 40, 0.22);
  --ink:        #2E2723;
  --ink-soft:   #6B615A;

  /* Halo palette — festive reds/golds/greens that sit comfortably on cream. */
  --halo-red:     #B31E28;
  --halo-gold:    #C8930F;
  --halo-saffron: #DD6A2E;
  --halo-green:   #2F7D6B;

  /* Type */
  --font-display: "Marcellus", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --panel-max:  860px;
  --radius:     14px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.6rem, 2vh, 2rem) clamp(1rem, 4vw, 3rem);

  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.6;
  text-align: center;

  /* Warm paper: a flat cream with two very soft washes so it doesn't read as dead beige. */
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(179, 30, 40, 0.055), transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 115%, rgba(179, 30, 40, 0.045), transparent 70%);
  background-attachment: fixed;

  overflow-x: hidden;
}


/* --------------------------------------------------------------------------
   Ornamental corner lotuses
   -------------------------------------------------------------------------- */

.corner {
  position: fixed;
  width: clamp(120px, 18vw, 230px);
  height: auto;
  color: var(--red);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

.corner--tl { top: -2%;    left: -3%;  transform: rotate(-24deg); }
.corner--br { bottom: -2%; right: -3%; transform: rotate(156deg); }

@media (max-width: 600px) {
  .corner { opacity: 0.05; }
}


/* --------------------------------------------------------------------------
   Panel — the double-ruled frame, echoing the logo's concentric circles
   -------------------------------------------------------------------------- */

.panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--panel-max);

  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3.25rem);

  background: rgba(252, 248, 236, 0.72);
  backdrop-filter: blur(2px);
  border: 1px solid var(--red-line);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px -28px rgba(46, 39, 35, 0.35);
}

/* Inner hairline = the second ring */
.panel::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--red-line);
  border-radius: calc(var(--radius) - 5px);
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

/* aspect-ratio:1 is load-bearing. Without it the box collapses to the height
   of the 76%-wide logo, the halo's square viewBox letterboxes down to that
   height, and the rings render at the logo's own diameter instead of around
   it. grid + place-items centres the logo inside the square. */
.mark {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: clamp(112px, 22vw, 158px);
  margin: 0 auto clamp(1.25rem, 3vw, 1.75rem);
  color: var(--red);
}

/* Rotating halo. It fills the mark's own box exactly (inset 0) and the logo is
   scaled down inside it, rather than the halo overhanging with a negative
   inset. Overhanging collided with the panel's inner border at almost every
   viewport size, and reserving space for the overhang would have cost vertical
   height the no-scroll budget doesn't have. This way the rings can never
   escape the box that's already laid out for them. */
.halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.halo svg { display: block; width: 100%; height: 100%; }

.halo__spin {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: spin linear infinite;
}

/* Different speeds and directions keep the rings from reading as one solid
   object turning — the layers drift against each other instead. */
.halo__spin--dots   { animation-duration: 44s; }
.halo__spin--dashes { animation-duration: 60s; animation-direction: reverse; }
.halo__spin--gems   { animation-duration: 90s; }
.halo__spin--arc    { animation-duration: 11s; }
.halo__spin--arc2   { animation-duration: 17s; animation-direction: reverse; }

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

/* Ring colours live here rather than as SVG presentation attributes — var()
   inside an attribute like stroke="var(--x)" is not reliably supported. */
.halo__spin--dots   circle { stroke: var(--halo-gold); }
.halo__spin--dashes circle { stroke: var(--halo-red); }

.gem--red     { fill: var(--halo-red); }
.gem--gold    { fill: var(--halo-gold); }
.gem--saffron { fill: var(--halo-saffron); }
.gem--green   { fill: var(--halo-green); }

/* The crest sits inside the halo's rings, hence 76% rather than full width. */
.crest {
  position: relative;
  display: block;
  width: 76%;
  aspect-ratio: 1;
}

/* logo-core.png is transparent line art already flattened to --red, so it
   needs no blend mode. A drop-shadow would halo every stroke — none by design. */
.crest__art {
  display: block;
  width: 100%;
  height: auto;
}

/* The logo's own two rings, redrawn so they can shift colour. Warm hues only
   (red → saffron → gold) — interpolating through a cool colour would pass
   through muddy olive on the way back to red. */
.crest__rings { position: absolute; inset: 0; width: 100%; height: 100%; }

.crest__ring {
  animation: ringshift 13s ease-in-out infinite;
}

/* Half-cycle offset, so the two rings are never the same colour at once. */
.crest__ring--inner { animation-delay: -6.5s; }

@keyframes ringshift {
  0%,  100% { stroke: #B31E28; }
  33%       { stroke: #DD6A2E; }
  66%       { stroke: #C8930F; }
}

/* Fallback mark: hidden unless index.html flags a missing logo file. */
.mark__fallback { display: none; width: 76%; height: auto; margin-inline: auto; }
.mark--nologo .mark__fallback { display: block; }

.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 7.5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: var(--red);
}

.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: min(340px, 80%);
  margin: clamp(0.9rem, 2.5vw, 1.15rem) auto;
}

.rule__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--red-line), transparent);
}

.rule__gem {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--red);
  opacity: 0.55;
  transform: rotate(45deg);
}

.tagline {
  margin: 0;
  font-size: clamp(0.8rem, 2.4vw, 0.94rem);
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-soft);
}


/* --------------------------------------------------------------------------
   Status
   -------------------------------------------------------------------------- */

.status { margin-top: clamp(1.6rem, 4vw, 2.1rem); }

/* The status plaque. Deliberately a rounded rectangle rather than a pill, so
   it reads as an engraved notice and stays visually distinct from the buttons
   below (which are pills). Four layers: inner hairline (::before), light sheen
   (::after), progress rail (.status__rail), and the text itself on top. */
.status__pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.62rem 1.75rem 0.68rem;

  background:
    linear-gradient(180deg, rgba(179, 30, 40, 0.11), rgba(179, 30, 40, 0.045));
  border: 1px solid var(--red-line);
  border-radius: 12px;

  font-family: var(--font-display);
  font-size: clamp(0.86rem, 2.4vw, 1.02rem);
  font-weight: 400;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--red-deep);

  animation: breathe 4.5s ease-in-out infinite;
}

/* Inner hairline — echoes the double rule on the panel and the logo's rings. */
.status__pill::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(179, 30, 40, 0.14);
  border-radius: 8px;
  z-index: 2;
  pointer-events: none;
}

/* Light sweeping across the plaque. */
.status__pill::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.72) 50%,
    transparent 62%);
  transform: translateX(-130%);
  animation: sheen 5.5s ease-in-out infinite;
  pointer-events: none;
}

.status__dot,
.status__label { position: relative; z-index: 3; }

.status__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--red);
  animation: pulse 2.4s ease-out infinite;
}

/* Indeterminate progress rail along the base — "work in progress", and it
   costs no vertical space because it sits inside the plaque. */
.status__rail {
  position: absolute;
  left: 1px; right: 1px; bottom: 0;
  height: 2px;
  z-index: 2;
  overflow: hidden;
  background: rgba(179, 30, 40, 0.10);
}

.status__rail::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  transform: translateX(-100%);
  animation: rail 2.9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes pulse {
  0%        { box-shadow: 0 0 0 0 rgba(179, 30, 40, 0.45); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(179, 30, 40, 0); }
}

@keyframes sheen {
  0%, 55% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}

@keyframes rail {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(222%); }
}

/* Blurred glow, not a spread ring — a hard-edged spread reads as a rendering
   artefact around the plaque rather than as light. */
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 15px -5px rgba(179, 30, 40, 0.20),
                         0 10px 24px -18px rgba(179, 30, 40, 0.55); }
  50%      { box-shadow: 0 0 24px -3px rgba(179, 30, 40, 0.30),
                         0 12px 28px -16px rgba(179, 30, 40, 0.70); }
}

.status__note {
  max-width: 46ch;
  margin: 1rem auto 0;
  font-size: clamp(0.94rem, 2.6vw, 1.05rem);
  color: var(--ink-soft);
}


/* --------------------------------------------------------------------------
   Contact cards
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 2vw, 1.1rem);
  margin-top: clamp(1.6rem, 4vw, 2.1rem);
}

.card {
  padding: clamp(1.15rem, 3vw, 1.5rem) 1rem;
  background: var(--cream-deep);
  border: 1px solid var(--red-line);
  border-radius: 10px;
}

.card__icon {
  display: inline-flex;
  color: var(--red);
}

.card__icon svg {
  width: 22px;
  height: 22px;
}

.card__label {
  margin: 0.55rem 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.card__body {
  margin: 0;
  font-style: normal;           /* resets <address> */
  font-size: clamp(0.92rem, 2.5vw, 1rem);
  line-height: 1.75;
  color: var(--ink);
  /* break-word, not anywhere: `anywhere` fills the line then snaps mid-word,
     ignoring the <wbr> after the @ in the email address. */
  overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
   Links & buttons
   -------------------------------------------------------------------------- */

.link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--red-line);
  transition: color 0.16s ease, border-color 0.16s ease;
}

.link:hover { color: var(--red); border-bottom-color: var(--red); }

.link--strong { font-weight: 600; color: var(--red-deep); }

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.4rem, 3.5vw, 1.8rem);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;

  padding: 0.8rem 1.6rem;
  min-height: 46px;             /* comfortable tap target */

  border-radius: 999px;
  border: 1px solid var(--red);

  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;

  transition: background-color 0.18s ease, color 0.18s ease,
              transform 0.18s ease, box-shadow 0.18s ease;
}

.btn svg { width: 17px; height: 17px; flex: none; }

.btn--solid {
  background: var(--red);
  color: #FFF8EE;
  box-shadow: 0 10px 22px -12px rgba(179, 30, 40, 0.7);
}

.btn--solid:hover {
  background: var(--red-deep);
  border-color: var(--red-deep);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--red);
}

.btn--outline:hover {
  background: var(--red-wash);
  transform: translateY(-1px);
}

.btn:active { transform: translateY(0); }


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  margin-top: clamp(1.6rem, 4vw, 2rem);
  padding-top: clamp(1.1rem, 3vw, 1.4rem);
  border-top: 1px solid var(--red-line);
}

.brands {
  max-width: 64ch;
  margin: 0 auto;
  font-size: clamp(0.66rem, 2.1vw, 0.74rem);
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: var(--ink-soft);   /* full strength: small text needs 4.5:1 on cream */
}

/* Label runs inline with the list rather than on its own line — a separate
   line cost ~18px, which the no-scroll budget can't spare now that the list
   is 15 names long. */
.brands__label {
  font-size: 0.94em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-deep);
  white-space: nowrap;
}

.brands__label::after {
  content: " \2014 ";
  letter-spacing: normal;
  color: var(--ink-soft);
}

.colophon {
  margin: 0.9rem 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);   /* full strength: small text needs 4.5:1 on cream */
}


/* --------------------------------------------------------------------------
   Focus — visible for keyboard users, quiet for mouse users
   -------------------------------------------------------------------------- */

:where(a, button):focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}


/* --------------------------------------------------------------------------
   Entrance animation
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .contact { grid-template-columns: 1fr; }
  .actions { flex-direction: column; }
  .btn     { width: 100%; }
}

/* ==========================================================================
   FIT TO VIEWPORT
   The page must not scroll. Every vertical measurement below is driven by
   `vh` rather than fixed rem, so the whole composition breathes with the
   window instead of overflowing it. Each clamp keeps a readable floor, so a
   very short window compresses gracefully rather than collapsing.
   ========================================================================== */

@media (min-width: 721px) {
  .panel        { padding-top: clamp(0.9rem, 2.4vh, 2.5rem);
                  padding-bottom: clamp(0.9rem, 2.4vh, 2.5rem); }
  .mark         { width: clamp(104px, 17vh, 185px);
                  margin-bottom: clamp(0.4rem, 1.3vh, 1.1rem); }
  /* Wider cap on desktop so the list settles into two balanced lines rather
     than one very long one (there are 15 names now). */
  .brands       { max-width: 82ch; }
  .wordmark     { font-size: clamp(1.75rem, 5.2vh, 3.4rem); }
  .rule         { margin: clamp(0.3rem, 0.9vh, 0.9rem) auto; }
  .tagline      { font-size: clamp(0.72rem, 1.5vh, 0.94rem); }
  .status       { margin-top: clamp(0.6rem, 1.9vh, 1.8rem); }
  .status__pill { padding: clamp(0.35rem, 0.9vh, 0.55rem) 1.3rem; }
  .status__note { margin-top: clamp(0.4rem, 1.1vh, 1rem);
                  font-size: clamp(0.86rem, 1.8vh, 1.05rem); }
  .contact      { margin-top: clamp(0.6rem, 1.9vh, 1.8rem); }
  .card         { padding: clamp(0.6rem, 1.7vh, 1.4rem) 1rem; }
  .card__label  { margin: clamp(0.3rem, 0.8vh, 0.55rem) 0
                          clamp(0.3rem, 0.8vh, 0.6rem); }
  .card__body   { line-height: clamp(1.5, 0.4vh + 1.2, 1.75); }
  .actions      { margin-top: clamp(0.55rem, 1.7vh, 1.6rem); }
  .btn          { padding-block: clamp(0.5rem, 1.3vh, 0.8rem); }
  .footer       { margin-top: clamp(0.6rem, 1.9vh, 1.8rem);
                  padding-top: clamp(0.5rem, 1.4vh, 1.3rem); }
  .brands       { line-height: clamp(1.5, 0.5vh + 1.2, 1.9); }
  .colophon     { margin-top: clamp(0.4rem, 1vh, 0.9rem); }
}

/* Short desktop windows (small laptops, browsers with lots of chrome). The vh
   clamps above bottom out at their floors here, so the remaining fixed-size
   pieces — icons, button height, small type — step down too. */
@media (min-width: 721px) and (max-height: 700px) {
  .mark           { width: clamp(88px, 14.2vh, 185px); }
  .card__icon svg { width: 18px; height: 18px; }
  .card__body     { font-size: 0.88rem; }
  .status__pill   { font-size: 0.78rem; }
  .btn            { min-height: 38px; font-size: 0.88rem; }
  .brands         { font-size: 0.7rem; }
  .colophon       { font-size: 0.7rem; }
}

@media (min-width: 721px) and (max-height: 600px) {
  .mark           { width: clamp(72px, 12.2vh, 185px); }
  .tagline        { letter-spacing: 0.12em; }
  .card__body     { font-size: 0.82rem; }
  .card__label    { font-size: 0.66rem; }
  .btn            { min-height: 34px; }
  .brands         { font-size: 0.64rem; line-height: 1.4; }
  .status__note   { font-size: 0.82rem; }
}

/* Very short windows. This is the last compression tier — below roughly a
   450px viewport the type would stop being readable, so the page is allowed
   to scroll rather than shrink further. */
@media (min-width: 721px) and (max-height: 560px) {
  .mark           { width: clamp(66px, 11.6vh, 185px); }
  .card__icon svg { width: 15px; height: 15px; }
  .card__body     { font-size: 0.76rem; }
  .status__note   { font-size: 0.76rem; }
  .status__pill   { font-size: 0.72rem; }
  .btn            { min-height: 30px; font-size: 0.82rem; }
  .colophon       { font-size: 0.64rem; margin-top: 0.3rem; }
  .card__label    { margin-block: 0.2rem; }

  /* At this height the brand strip is what tips the page into scrolling, and
     it is the most decorative thing on the page. Dropped, as on short phones. */
  .brands         { display: none; }
}

/* Phones: the same idea, but the three contact cards are stacked here, which
   costs a lot of height. The cards switch to a compact icon-beside-text row
   so the whole page still lands inside a phone viewport. */
@media (max-width: 720px) {
  .panel        { padding-top: clamp(0.9rem, 2.2vh, 2rem);
                  padding-bottom: clamp(0.9rem, 2.2vh, 2rem); }
  .mark         { width: clamp(70px, 12.2vh, 136px);
                  margin-bottom: clamp(0.35rem, 1.1vh, 1rem); }
  .wordmark     { font-size: clamp(1.6rem, 4.6vh, 2.4rem); }
  .rule         { margin: clamp(0.28rem, 0.8vh, 0.75rem) auto; }
  .tagline      { font-size: clamp(0.66rem, 1.4vh, 0.82rem);
                  letter-spacing: 0.13em; }
  .status       { margin-top: clamp(0.55rem, 1.7vh, 1.5rem); }
  .status__pill { padding: clamp(0.3rem, 0.85vh, 0.5rem) 1.1rem; }
  .status__note { margin-top: clamp(0.35rem, 1vh, 0.9rem);
                  font-size: clamp(0.8rem, 1.7vh, 0.98rem); }
  .contact      { margin-top: clamp(0.55rem, 1.7vh, 1.5rem);
                  gap: clamp(0.4rem, 1.1vh, 0.75rem); }

  /* Compact row: icon on the left, label + details on the right. */
  .card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0 0.85rem;
    text-align: left;
    padding: clamp(0.5rem, 1.4vh, 0.9rem) clamp(0.85rem, 3vw, 1.1rem);
  }
  .card__icon   { grid-row: 1 / span 2; }
  .card__label  { margin: 0 0 0.15rem; }
  .card__body   { line-height: clamp(1.45, 0.35vh + 1.2, 1.7); }

  .actions      { margin-top: clamp(0.5rem, 1.5vh, 1.4rem);
                  gap: clamp(0.4rem, 1.1vh, 0.75rem); }
  .btn          { padding-block: clamp(0.5rem, 1.3vh, 0.8rem);
                  min-height: 44px; }
  .footer       { margin-top: clamp(0.55rem, 1.7vh, 1.5rem);
                  padding-top: clamp(0.45rem, 1.3vh, 1.2rem); }
  .brands       { line-height: clamp(1.45, 0.45vh + 1.2, 1.9); }
  .colophon     { margin-top: clamp(0.35rem, 0.9vh, 0.9rem); }
}

/* Phones, continued: a stacked layout on a ~660px viewport has far less room
   than a desktop one, so these tiers keep compressing. Side-by-side buttons
   and a single-line brand strip are the two biggest savings. */
@media (max-width: 720px) and (max-height: 820px) {
  .mark         { width: clamp(56px, 9vh, 98px); }
  .wordmark     { font-size: clamp(1.45rem, 4vh, 2rem); }
  .status__note { font-size: clamp(0.78rem, 1.6vh, 0.9rem); max-width: 40ch; }
  .status       { margin-top: clamp(0.45rem, 1.3vh, 1rem); }
  .contact      { margin-top: clamp(0.45rem, 1.3vh, 1rem);
                  gap: clamp(0.3rem, 0.85vh, 0.6rem); }
  .card         { padding-block: clamp(0.35rem, 1vh, 0.65rem); }
  .card__icon svg { width: 18px; height: 18px; }
  .card__body   { font-size: 0.86rem; line-height: 1.45; }
  .card__label  { font-size: 0.64rem; letter-spacing: 0.13em; }
  .footer       { margin-top: clamp(0.45rem, 1.3vh, 1rem);
                  padding-top: clamp(0.4rem, 1vh, 0.9rem); }

  /* Buttons side by side instead of stacked: saves a full button of height. */
  .actions      { flex-direction: row; }
  .btn          { width: auto; flex: 1; min-height: 40px;
                  font-size: 0.86rem; padding-inline: 0.9rem; }

  .brands       { font-size: 0.62rem; letter-spacing: 0.04em; line-height: 1.5; }
  .colophon     { font-size: 0.64rem; }
}

@media (max-width: 720px) and (max-height: 680px) {
  .mark         { width: clamp(53px, 9.1vh, 107px); }
  .wordmark     { font-size: clamp(1.3rem, 3.6vh, 1.8rem); }
  .tagline      { font-size: 0.62rem; }
  .card         { padding-block: clamp(0.4rem, 1.1vh, 0.7rem); }
  .card__body   { font-size: 0.8rem; line-height: 1.4; }
  .status__note { font-size: 0.74rem; }
  .btn          { min-height: 36px; }
  .brands       { display: none; }   /* decorative; first thing to go */
}

/* Very short phone viewports (older/smaller handsets). Last tier — below this
   the page is allowed to scroll rather than shrink past readability. */
@media (max-width: 720px) and (max-height: 600px) {
  .mark         { width: clamp(46px, 7.8vh, 85px); }
  .wordmark     { font-size: clamp(1.15rem, 3.2vh, 1.5rem); }
  .tagline      { font-size: 0.58rem; letter-spacing: 0.1em; }
  .status__pill { font-size: 0.68rem; padding-block: 0.25rem; }
  .status__note { font-size: 0.7rem; }
  .card__icon svg { width: 16px; height: 16px; }
  .card__body   { font-size: 0.74rem; }
  .btn          { min-height: 32px; font-size: 0.78rem; }
  .colophon     { display: none; }   /* decorative */
}


/* --------------------------------------------------------------------------
   Accessibility: honour reduced-motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .status__dot,
  .status__pill,
  .status__rail::before,
  .halo__spin { animation: none; }

  /* The halo's rings stay as a static decorative border; only the bright
     travelling arcs go, since a frozen arc reads as a stalled spinner. */
  .halo__spin--arc,
  .halo__spin--arc2 { display: none; }

  /* Rings hold a single colour instead of cycling. */
  .crest__ring { animation: none; stroke: var(--halo-red); }

  /* Sheen and rail are motion-only flourishes; remove them entirely rather
     than leaving a frozen highlight or a stalled progress bar. */
  .status__pill::after  { display: none; }
  .status__rail         { display: none; }

  .status__pill { box-shadow: 0 10px 24px -18px rgba(179, 30, 40, 0.55); }

  .btn, .link  { transition: none; }
  .btn:hover   { transform: none; }
}