/* strength.css · Quietbeam Works · VIII, Strength · "Workshop calm"
   Extends arcana.css: overrides its --arc-* tokens on [data-brand="strength"], adds the --brand-*
   extras arcana-brand.css reads, then the signature: setting-out paper with faint grain, a sentence-case
   slab that is raised into place piece by piece, a brass beam that slides home under the name like a
   tenon into its mortise and is pinned with a peg, and a steel rule along the foot of the head. */
/* fonts:begin Zilla Slab, Karla */
@font-face { font-family:"Zilla Slab"; font-style:normal; font-weight:400; font-display:swap; src:url("../../fonts/brands/zilla-slab-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:"Zilla Slab"; font-style:normal; font-weight:500; font-display:swap; src:url("../../fonts/brands/zilla-slab-normal-500.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:"Zilla Slab"; font-style:normal; font-weight:600; font-display:swap; src:url("../../fonts/brands/zilla-slab-normal-600.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:"Zilla Slab"; font-style:normal; font-weight:700; font-display:swap; src:url("../../fonts/brands/zilla-slab-normal-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; }
@font-face { font-family:"Karla"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../../fonts/brands/karla-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="strength"] {
  --arc-paper: #f3ead9;
  --arc-surface: #faf5ea;
  --arc-wash: #e9dfcb;
  --arc-ink: #231c16;
  --arc-muted: #5e5245;
  --arc-line: #d9cbb2;
  --arc-accent: #7a5714;
  --arc-on-accent: #faf5ea;
  --arc-focus: #1b130e;
  --arc-display: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --arc-body: "Karla", "Gill Sans", Corbel, "Segoe UI", sans-serif;
  --arc-radius: 3px;
  --brand-mono: "Karla", "Gill Sans", Corbel, "Segoe UI", sans-serif;
  --brand-accent-2: #7b4f22;
  --brand-display-weight: 700;
  --brand-track: -.01em;
  --brand-title-size: clamp(2.9rem, 1.3rem + 5.4vw, 6.4rem);
  --brand-title-lh: 1;
  --brand-button-radius: 3px;
  --brand-enter: qb-raise;
  --brand-ease: cubic-bezier(.22, .61, .36, 1);
  --brand-texture:
    repeating-linear-gradient(179.4deg, transparent 0 23px, rgba(35, 28, 22, .035) 23px 24px, transparent 24px 61px),
    radial-gradient(circle at 40% 60%, rgba(35, 28, 22, .05) 0 1px, transparent 1.4px) 0 0 / 6px 6px;
  --brand-bezel: #1b130e;
  --brand-bezel-edge: #3d2c1f;
  --brand-bezel-ink: #c9a24f;
  --brand-glow: rgba(122, 87, 20, .4);
  --brand-wallpaper:
    radial-gradient(circle at 34% 58%, transparent 0 58%, rgba(18, 12, 9, .7) 100%),
    repeating-radial-gradient(ellipse 120% 100% at 34% 58%, #1b130e 0 9px, #2a1d14 9px 11px, #1b130e 11px 20px, #241912 20px 21px, #1b130e 21px 27px),
    #1b130e;
}

/* Signature: a brass tenon beam under the name, pinned by a peg; a steel rule; quiet brass buttons. */
[data-brand="strength"] .abr-title__word { position: relative; display: inline-block; padding-block-end: .2em; }
[data-brand="strength"] .abr-title__word::after {
  content: ""; position: absolute; inset: auto 0 0; block-size: .075em; min-block-size: 4px; border-radius: 1px;
  background: linear-gradient(90deg, #a8843a, #dcbc70 40%, #c9a24f 70%, #8f6c24);
  animation: qb-tenon 1s .55s var(--brand-ease) both;
}
[data-brand="strength"] .abr-title__word::before {
  content: ""; position: absolute; z-index: 1; inset-block-end: calc(.0375em - 6px); inset-inline-end: 12%;
  inline-size: 12px; block-size: 12px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5a3c24, #231c16); box-shadow: 0 0 0 2px #c9a24f;
  animation: qb-peg .35s 1.45s cubic-bezier(.3, 1.5, .5, 1) both;
}
[data-brand="strength"] .abr-head::after {
  content: ""; position: absolute; inset: auto 0 0; block-size: 12px; opacity: .55;
  background:
    repeating-linear-gradient(90deg, #231c16 0 1px, transparent 1px 60px) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, #231c16 0 1px, transparent 1px 12px) 0 6px / 100% 6px no-repeat;
}
[data-brand="strength"] .abr-tagline { font-weight: 500; }
[data-brand="strength"] .abr-card__num { border-radius: 50%; background: #1b130e; color: #c9a24f; border-color: #1b130e; }
[data-brand="strength"] .abr-button { background: #c9a24f; border-color: #c9a24f; color: #1b130e; letter-spacing: .01em; }
[data-brand="strength"] .abr-button[data-kind="ghost"] { background: transparent; color: var(--arc-ink); border-color: #b9ab96; }
@media (hover: hover) {
  [data-brand="strength"] .abr-button:hover { background: #dcbc70; box-shadow: 0 10px 22px -14px rgba(27, 19, 14, .7); }
  [data-brand="strength"] .abr-button[data-kind="ghost"]:hover { background: transparent; border-color: #7a5714; }
}
[data-brand="strength"] .abr-tier { border-block-start: 4px solid #c9a24f; box-shadow: 0 1px 0 rgba(35, 28, 22, .06), 0 20px 36px -30px rgba(27, 19, 14, .6); }
[data-brand="strength"] .abr-tier[data-kind="custom"] { border-block-start-color: #c9955a; border-style: solid dashed dashed; }
[data-brand="strength"].abr-tile { box-shadow: 0 0 0 1px #d9cbb2, inset 0 4px 0 #c9a24f; }
@media (hover: hover) {
  [data-brand="strength"].abr-tile:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #7a5714, inset 0 6px 0 #c9a24f, 0 22px 40px -26px rgba(27, 19, 14, .55); }
}

@keyframes qb-raise { 0% { opacity: 0; transform: translateY(26px); } 55% { opacity: 1; transform: translateY(-3px); } 100% { opacity: 1; transform: none; } }
@keyframes qb-tenon { from { clip-path: inset(0 100% 0 0); transform: translateX(-18px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes qb-peg { from { opacity: 0; transform: translateY(-14px) scale(.4); } to { opacity: 1; transform: none; } }