/* temperance.css · Bridgeglass · XIV, Temperance · "Balanced pour"
   Extends arcana.css: overrides its --arc-* tokens on [data-brand="temperance"], adds the --brand-*
   extras arcana-brand.css reads, then the signature: a title split by one liquid line into an amber
   layer floating on verdigris that pours, settles and gently sways; jigger graduations; tiles that fill. Fonts are SIL OFL. */
/* fonts:begin Gilda Display, Tenor Sans */
@font-face { font-family:"Gilda Display"; font-style:normal; font-weight:400; font-display:swap; src:url("../../fonts/brands/gilda-display-normal-400.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Tenor Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("../../fonts/brands/tenor-sans-normal-400.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* fonts:end */

[data-brand="temperance"] {
  --arc-paper: #eef3f1;
  --arc-surface: #d5e3d8;
  --arc-wash: #e0ecea;
  --arc-ink: #16302c;
  --arc-muted: #3e5954;
  --arc-line: #b7ccc3;
  --arc-accent: #2b7a6a;
  --arc-on-accent: #f7faf8;
  --arc-focus: #8a4b0e;
  --arc-display: "Gilda Display", Didot, "Bodoni 72", Constantia, Georgia, serif;
  --arc-body: "Tenor Sans", Optima, Candara, "Segoe UI", sans-serif;
  --arc-radius: 14px;
  --brand-mono: "Tenor Sans", Optima, Candara, "Segoe UI", sans-serif;
  --brand-accent-2: #8a4b0e;
  --brand-display-weight: 400;
  --brand-track: -.015em;
  --brand-title-lh: 1.08;
  --brand-button-radius: 999px;
  --brand-enter: tmp-pour;
  --brand-ease: cubic-bezier(.33, .1, .2, 1);
  --brand-texture: radial-gradient(120% 60% at 50% 120%, rgba(43, 122, 106, .12), transparent 70%);
  --brand-bezel: #15312d;
  --brand-bezel-edge: #2b7a6a;
  --brand-bezel-ink: #d5e3d8;
  --brand-glow: rgba(43, 122, 106, .45);
  --brand-wallpaper:
    radial-gradient(70% 5% at 50% 48%, rgba(247, 250, 248, .7), transparent 70%),
    linear-gradient(180deg, #eef3f1 0 28%, #d5e3d8 28% 46%, #f2c27a 46% 49%, #d8912f 49% 63%, #2b7a6a 63.4% 82%, #15312d 82.4%);
}

/* Signature: the split title, jigger ticks, amber and verdigris layers under each tier. */
[data-brand="temperance"] .abr-head > .abr-shell { position: relative; z-index: 1; }
[data-brand="temperance"] .abr-head::before {
  content: ""; position: absolute; z-index: 0; inset-block: 18% 12%; inset-inline-end: max(1.25rem, calc((100% - 76rem) / 2));
  inline-size: 22px; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, var(--arc-accent) 0 1px, transparent 1px 60px) 100% 0 / 22px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--arc-line) 0 1px, transparent 1px 12px) 100% 0 / 11px 100% no-repeat;
}
[data-brand="temperance"] .abr-title__word {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #8a4b0e 0 50%, #1d6152 50%);
  background-size: 100% 200%; background-position: 0 50%;
  animation: tmp-level 1.8s .3s var(--brand-ease) both, tmp-sway 7s 2.1s ease-in-out infinite alternate;
}
[data-brand="temperance"] .abr-tagline { margin-block-start: clamp(1.8rem, 3.2vw, 2.6rem); font-family: var(--arc-body); text-transform: uppercase; letter-spacing: .16em; font-size: clamp(1rem, .85rem + .6vw, 1.3rem); }
[data-brand="temperance"] .abr-card__num { background: var(--arc-surface); border-color: var(--arc-accent); }
[data-brand="temperance"] .abr-button { letter-spacing: .08em; text-transform: uppercase; font-size: .82rem; }
[data-brand="temperance"] .abr-tier { box-shadow: inset 0 -7px 0 #d8912f, 0 22px 40px -30px rgba(22, 48, 44, .5); }
[data-brand="temperance"] .abr-tier[data-kind="custom"] { box-shadow: inset 0 -7px 0 var(--arc-accent); }
[data-brand="temperance"].abr-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: scaleY(0); transform-origin: 50% 100%;
  background: linear-gradient(180deg, rgba(216, 145, 47, .22) 0 6px, rgba(43, 122, 106, .14) 6px);
  transition: transform .9s var(--brand-ease);
}
@media (hover: hover) {
  [data-brand="temperance"].abr-tile:hover::after { transform: scaleY(.55); }
  [data-brand="temperance"] .abr-button:hover { box-shadow: 0 12px 26px -12px var(--brand-glow), inset 0 -3px 0 rgba(216, 145, 47, .7); }
}

@keyframes tmp-pour { from { opacity: 0; transform: translateY(8px); clip-path: inset(100% -20% -20% -20%); } to { opacity: 1; transform: none; clip-path: inset(-20% -20% -20% -20%); } }
@keyframes tmp-level { from { background-position: 0 100%; } 70% { background-position: 0 44%; } to { background-position: 0 50%; } }
@keyframes tmp-sway { from { background-position: 0 50%; } to { background-position: 0 56%; } }