/* hanged-man.css · Stillframe Darkroom · XII, The Hanged Man · "Safelight"
   Extends arcana.css: overrides its --arc-* tokens on [data-brand="the-hanged-man"], adds the --brand-*
   extras arcana-brand.css reads, then the signature: a breathing safelight, a film rebate that advances
   under the head, prints pegged to a drying line, and a title that develops out of red haze. Fonts are SIL OFL. */
/* fonts:begin Instrument Serif, Instrument Sans */
@font-face { font-family:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap; src:url("../../fonts/brands/instrument-serif-italic-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:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap; src:url("../../fonts/brands/instrument-serif-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:"Instrument Sans"; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap; src:url("../../fonts/brands/instrument-sans-normal-400-700.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="the-hanged-man"] {
  --arc-paper: #120707;
  --arc-surface: #1d0b0a;
  --arc-wash: #170909;
  --arc-ink: #f5f1ea;
  --arc-muted: #c7aaa3;
  --arc-line: #3e1a17;
  --arc-accent: #f0412e;
  --arc-on-accent: #120707;
  --arc-focus: #e8913a;
  --arc-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --arc-body: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --arc-radius: 2px;
  --brand-mono: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --brand-accent-2: #e8913a;
  --brand-display-weight: 400;
  --brand-track: -.02em;
  --brand-title-size: clamp(3.4rem, 1.4rem + 7.4vw, 8.5rem);
  --brand-title-lh: .92;
  --brand-button-radius: 2px;
  --brand-enter: hm-develop;
  --brand-ease: cubic-bezier(.25, .6, .2, 1);
  --brand-texture: radial-gradient(circle at 40% 60%, rgba(240, 65, 46, .05) 0 1px, transparent 1.4px) 0 0 / 5px 5px;
  --brand-bezel: #1d0b0a;
  --brand-bezel-edge: #4a1d19;
  --brand-bezel-ink: #e8913a;
  --brand-glow: rgba(240, 65, 46, .55);
  --brand-wallpaper:
    radial-gradient(55% 45% at 50% 0%, rgba(240, 65, 46, .5), transparent 72%),
    repeating-linear-gradient(90deg, #120707 0 10px, transparent 10px 26px) 0 22px / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, #120707 0 10px, transparent 10px 26px) 0 calc(100% - 22px) / 100% 10px no-repeat,
    linear-gradient(#3a1a0f, #3a1a0f) 0 14px / 100% 26px no-repeat,
    linear-gradient(#3a1a0f, #3a1a0f) 0 calc(100% - 14px) / 100% 26px no-repeat,
    #120707;
}

/* Signature: the safelight breathes, the rebate advances, prints hang and develop. */
[data-brand="the-hanged-man"] .abr-head { padding-block-end: calc(clamp(1.5rem, 3vw, 2.5rem) + 34px); }
[data-brand="the-hanged-man"] .abr-head::before {
  content: ""; position: absolute; inset: 0 0 30%; pointer-events: none;
  background: radial-gradient(50% 90% at 82% 0%, rgba(240, 65, 46, .26), transparent 70%);
  animation: hm-lamp 6s ease-in-out infinite;
}
[data-brand="the-hanged-man"] .abr-head::after {
  content: ""; position: absolute; inset: auto 0 0; block-size: 22px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--arc-paper) 0 9px, transparent 9px 24px) 0 50% / 100% 9px no-repeat, rgba(232, 145, 58, .28);
  animation: hm-advance 9s linear infinite;
}
[data-brand="the-hanged-man"] .abr-head > .abr-shell { position: relative; z-index: 1; }
[data-brand="the-hanged-man"] .abr-title__word { animation: hm-print 2.6s .35s ease-out both; }
[data-brand="the-hanged-man"] .abr-tagline { font-style: italic; }
[data-brand="the-hanged-man"] .abr-card__num { border-radius: 50%; background: var(--arc-accent); color: var(--arc-on-accent); border-color: var(--arc-accent); box-shadow: 0 0 18px rgba(240, 65, 46, .6); }
[data-brand="the-hanged-man"] .abr-button { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
[data-brand="the-hanged-man"] .abr-tiers { padding-block-start: 1.6rem; background: linear-gradient(var(--brand-accent-2), var(--brand-accent-2)) 0 .55rem / 100% 1px no-repeat; }
[data-brand="the-hanged-man"] .abr-tier { position: relative; transform-origin: 50% -1rem; transition: transform .6s var(--brand-ease); }
[data-brand="the-hanged-man"] .abr-tier::before {
  content: ""; position: absolute; inset-block-start: -1.15rem; inset-inline-start: calc(50% - 5px);
  inline-size: 10px; block-size: 26px; border-radius: 2px; background: var(--brand-accent-2);
}
[data-brand="the-hanged-man"].abr-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(70% 60% at 85% 0%, rgba(240, 65, 46, .3), transparent 70%);
  transition: opacity .6s var(--brand-ease);
}
@media (hover: hover) {
  [data-brand="the-hanged-man"] .abr-tier:hover { animation: hm-sway 1.4s var(--brand-ease); }
  [data-brand="the-hanged-man"].abr-tile:hover::after { opacity: 1; }
  [data-brand="the-hanged-man"].abr-tile:hover .abr-tile__word { animation: hm-print 1.3s ease-out both; }
}

@keyframes hm-develop { from { opacity: 0; filter: blur(9px) brightness(.35); transform: scale(1.015); } to { opacity: 1; filter: none; transform: none; } }
@keyframes hm-print { 0% { color: transparent; text-shadow: 0 0 .35em rgba(240, 65, 46, .7); } 55% { color: var(--brand-accent-2); text-shadow: 0 0 .15em rgba(240, 65, 46, .35); } 100% { color: var(--arc-ink); text-shadow: none; } }
@keyframes hm-lamp { 50% { opacity: .55; } }
@keyframes hm-advance { to { background-position: 240px 50%, 0 0; } }
@keyframes hm-sway { 30% { transform: rotate(1.4deg); } 65% { transform: rotate(-.8deg); } }