@charset "utf-8";

/* Ported verbatim from sahifah-mockup css/main.css, section 4.
   Every value is a token from tokens.css — no raw colours, sizes or magic numbers. */

/* ============================================================
   4. THE TILE MOTIF
   ------------------------------------------------------------
   The logo is seven cream tiles, each with a thin warm outline
   and a soft corner. That shape recurs here as a decorative
   rail, as an ornamented rule, and as the frame around cards.
   ============================================================ */

/* -- Tile rail: a row of small cream tiles used as an ornament */
.tile-rail {
  display: flex;
  gap: var(--tile-gap);
  justify-content: center;
  padding: 0;
  margin: 0;
}

.tile-rail__tile {
  width: var(--tile-width);
  height: var(--tile-height);
  background-color: var(--cream-200);
  border: var(--rule-hairline) solid var(--cream-400);
  border-radius: var(--radius-tile);
}

/* The centre tile carries the burgundy, as the calligraphy does. */
.tile-rail__tile--accent {
  background-color: var(--burgundy-600);
  border-color: var(--burgundy-600);
}

.tile-rail--inverse .tile-rail__tile {
  background-color: transparent;
  border-color: var(--burgundy-400);
}

.tile-rail--inverse .tile-rail__tile--accent {
  background-color: var(--cream-200);
  border-color: var(--cream-200);
}

/* -- Ornamented rule: hairline, small burgundy lozenge, hairline */
.rule-ornament {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block: var(--space-xl);
  color: var(--colour-rule-accent);
}

.rule-ornament::before,
.rule-ornament::after {
  content: '';
  flex: 1;
  height: var(--rule-hairline);
  background-color: var(--colour-rule);
}

.rule-ornament__mark {
  width: var(--space-2xs);
  height: var(--space-2xs);
  background-color: var(--burgundy-400);
  transform: rotate(45deg);
  border-radius: var(--radius-sm);
}

/* -- Framed tile: cream ground, thin warm outline, soft corner.
   The base for cards that sit on paper.                        */
.tile {
  background-color: var(--colour-bg-card-cream);
  border: var(--border-cream);
  border-radius: var(--radius-tile);
}