/* =====================================================
   ===== STRYV4 HOMEPAGE CARD · BOOK SCAFFOLDING (H)  =====
   ===== v1 · Tag: STR                                =====
   ===== file: card-book-scaffolding-horizontal_STR.css =====
   =====================================================
   Extracted from the standalone preview document for the
   Postcard CPT. The PREVIEW SHIM (core-canvas stand-in) has
   been DELETED — on the live site core-canvas.css + the plugin
   supply the frame. Everything here is scoped under .bsh or the
   card class, so nothing leaks to other cards. */


/* ===== THEME TOKENS ===== */
/* CodeNumber 0.1 */

/* CodeNumber 0.0 — CPT structural fix.
   The standalone preview gave .hp-postcard-content height:100% and no
   padding. The live core-canvas.css instead gives it padding:2.5rem and
   a flex column, which would inset the blueprint from the card edges and
   leave the .bsh (height:100%) without a height to fill. For THIS card we
   flush the content box so the blueprint fills the frame edge-to-edge, the
   way the border edges and grid expect. Scoped to this card only. */
.hp-postcard-canvas.card-book-scaffolding-horizontal .hp-postcard-content {
  padding: 0;
  height: 100%;
}

.bsh {
  --hatch: repeating-linear-gradient(45deg,
            transparent, transparent 5px,
            rgba(255, 255, 255, 0.10) 5px, rgba(255, 255, 255, 0.10) 6px);

  --font-display: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --font-ui: Optima, 'Avenir Next', Avenir, 'Lucida Grande', 'Trebuchet MS', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --t-draw: 900ms cubic-bezier(0.65, 0.02, 0.22, 1);
  --t-soft: 420ms ease;
}

/* CodeNumber 0.1b — PALETTE LIBRARY (six switchable schemes) */
.bsh[data-theme="cyan"] {
  --bp-ink:#072a52; --bp-blue:#0a3a6b; --bp-glow: rgba(120,220,255,0.30);
  --line-strong: rgba(180,230,255,0.30); --line-soft: rgba(180,230,255,0.12);
  --paper: rgba(234,246,255,0.94); --paper-dim: rgba(191,230,255,0.70); --paper-faint: rgba(191,230,255,0.42);
  --amber:#3dd9ff; --amber-dim: rgba(61,217,255,0.55);
  --metal: linear-gradient(175deg,#ffffff 8%,#bfe6ff 42%,#5cb8ff 60%,#eaf7ff 92%);
}
.bsh[data-theme="indigo"] {
  --bp-ink:#0a0c20; --bp-blue:#161a3c; --bp-glow: rgba(150,130,255,0.28);
  --line-strong: rgba(190,195,255,0.26); --line-soft: rgba(190,195,255,0.10);
  --paper: rgba(231,230,255,0.94); --paper-dim: rgba(212,210,255,0.70); --paper-faint: rgba(212,210,255,0.42);
  --amber:#9d7bff; --amber-dim: rgba(157,123,255,0.55);
  --metal: linear-gradient(175deg,#ffffff 8%,#d4d2ff 42%,#9f8cff 60%,#efeaff 92%);
}
.bsh[data-theme="sepia"] {
  --bp-ink:#241a0e; --bp-blue:#3a2c18; --bp-glow: rgba(255,225,180,0.24);
  --line-strong: rgba(255,230,190,0.28); --line-soft: rgba(255,230,190,0.11);
  --paper: rgba(255,241,214,0.95); --paper-dim: rgba(255,224,168,0.72); --paper-faint: rgba(255,224,168,0.44);
  --amber:#ff9e2c; --amber-dim: rgba(255,158,44,0.55);
  --metal: linear-gradient(175deg,#fff6e6 8%,#ffe0a8 42%,#d98f3c 60%,#fff1d6 92%);
}
.bsh[data-theme="slate-royal"] {
  --bp-ink:#1c2147; --bp-blue:#3b4a8c; --bp-glow: rgba(120,160,255,0.32);
  --line-strong: rgba(210,220,255,0.28); --line-soft: rgba(210,220,255,0.11);
  --paper: rgba(238,242,255,0.95); --paper-dim: rgba(205,217,255,0.72); --paper-faint: rgba(205,217,255,0.44);
  --amber:#6f8cff; --amber-dim: rgba(111,140,255,0.58);
  --metal: linear-gradient(175deg,#ffffff 8%,#cdd9ff 42%,#7f9bff 60%,#eef2ff 92%);
}
.bsh[data-theme="graphite"] {
  --bp-ink:#15171b; --bp-blue:#2b2f36; --bp-glow: rgba(220,230,240,0.18);
  --line-strong: rgba(225,232,240,0.22); --line-soft: rgba(225,232,240,0.08);
  --paper: rgba(242,245,248,0.95); --paper-dim: rgba(214,221,230,0.70); --paper-faint: rgba(214,221,230,0.42);
  --amber:#5ad1b0; --amber-dim: rgba(90,209,176,0.55);
  --metal: linear-gradient(175deg,#ffffff 8%,#d6dde6 42%,#9aa6b4 60%,#f2f5f8 92%);
}
.bsh[data-theme="viridian"] {
  --bp-ink:#06211f; --bp-blue:#0c3b39; --bp-glow: rgba(120,255,210,0.24);
  --line-strong: rgba(180,255,235,0.24); --line-soft: rgba(180,255,235,0.09);
  --paper: rgba(230,255,248,0.95); --paper-dim: rgba(189,255,240,0.72); --paper-faint: rgba(189,255,240,0.44);
  --amber:#33e0b4; --amber-dim: rgba(51,224,180,0.55);
  --metal: linear-gradient(175deg,#ffffff 8%,#bdfff0 42%,#46d9b8 60%,#e6fff8 92%);
}


/* NOTE: The standalone preview's "CORE CANVAS SHIM" (CodeNumber 0.2)
   is intentionally omitted here. On the live site core-canvas.css and
   the postcard plugin own the frame, body, wrapper and content box.
   Re-adding the shim would restyle those global classes and collide
   with every other card — do not reintroduce it. */


/* ===== FIELD & FRAME ===== */
/* CodeNumber 1.0 */
.bsh {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  color: var(--paper);
  background-color: var(--bp-blue);
  background-image:
    radial-gradient(130% 120% at 18% -10%, var(--bp-glow), transparent 55%),
    linear-gradient(var(--line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-strong) 1px, transparent 1px),
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 100% 100%, 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: 0 0, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  opacity: 0;
  transition: opacity 600ms ease;
  isolation: isolate;
}
.bsh.is-lit { opacity: 1; }

.bsh__edge { position: absolute; background: var(--line-strong); z-index: 4; pointer-events: none; }
.bsh__edge--t { top: 0; left: 0; height: 1px; width: 100%; transform: scaleX(0); transform-origin: left;  transition: transform var(--t-draw); }
.bsh__edge--r { top: 0; right: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: top;   transition: transform var(--t-draw) 220ms; }
.bsh__edge--b { bottom: 0; right: 0; height: 1px; width: 100%; transform: scaleX(0); transform-origin: right; transition: transform var(--t-draw) 440ms; }
.bsh__edge--l { bottom: 0; left: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: bottom; transition: transform var(--t-draw) 660ms; }
.bsh.is-built .bsh__edge--t,
.bsh.is-built .bsh__edge--b { transform: scaleX(1); }
.bsh.is-built .bsh__edge--r,
.bsh.is-built .bsh__edge--l { transform: scaleY(1); }

.bsh__rule { position: absolute; background: var(--line-strong); z-index: 4; pointer-events: none; }
.bsh__rule--tabs { top: 64px; left: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: left; transition: transform var(--t-draw) 520ms; }
.bsh__rule--col  { top: 64px; left: 41%; width: 1px; height: calc(100% - 64px); transform: scaleY(0); transform-origin: top; transition: transform var(--t-draw) 760ms; }
.bsh.is-built .bsh__rule--tabs { transform: scaleX(1); }
.bsh.is-built .bsh__rule--col  { transform: scaleY(1); }


/* ===== OPENING CEREMONY ===== */
/* CodeNumber 1.5 */
.bsh__ceremony {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.35rem;
  padding: 2rem;
  opacity: 0;
  transition: opacity 520ms ease;
  pointer-events: none;
}
.bsh.is-awake .bsh__ceremony { opacity: 1; pointer-events: auto; }
.bsh.is-open  .bsh__ceremony { opacity: 0; pointer-events: none; }

.bsh__cer-kicker { opacity: 0; transform: translateY(8px); transition: opacity var(--t-soft), transform var(--t-soft); }
.bsh__cer-wordmark { opacity: 0; transform: translateY(10px); transition: opacity var(--t-soft), transform var(--t-soft); margin: 0; }
.bsh__cer-variant { opacity: 0; transform: translateY(8px); transition: opacity var(--t-soft), transform var(--t-soft); }
.bsh.is-awake .bsh__cer-kicker   { opacity: 1; transform: none; transition-delay: 760ms; }
.bsh.is-awake .bsh__cer-wordmark { opacity: 1; transform: none; transition-delay: 860ms; }
.bsh.is-awake .bsh__cer-variant  { opacity: 1; transform: none; transition-delay: 980ms; }

.bsh__carousel {
  position: relative;
  min-height: 3.4em;
  width: min(80%, 560px);
  margin: 0.6rem 0 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-soft);
}
.bsh.is-awake .bsh__carousel { opacity: 1; transition-delay: 1120ms; }
.bsh__carousel-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.7vw, 21px);
  line-height: 1.4;
  color: var(--paper);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.bsh__carousel-line.show { opacity: 1; transform: none; }

.bsh__explore { opacity: 0; transform: translateY(8px); transition: opacity var(--t-soft), transform var(--t-soft); margin-top: 0.6rem; }
.bsh.is-awake .bsh__explore { opacity: 1; transform: none; transition-delay: 1320ms; }
.bsh__explore .bsh-snakebtn__label { font-size: 13px; letter-spacing: 2px; }

.bsh__tabs, .bsh__body { opacity: 0; pointer-events: none; transition: opacity 520ms ease; }
.bsh.is-open .bsh__tabs { opacity: 1; pointer-events: auto; transition-delay: 360ms; }
.bsh.is-open .bsh__body { opacity: 1; pointer-events: auto; transition-delay: 360ms; }


/* ===== TAB BAR ===== */
/* CodeNumber 2.0 */
.bsh__tabs {
  position: relative;
  z-index: 5;
  height: 64px;
  display: flex;
  align-items: stretch;
  padding: 0 1.4rem;
  gap: 0.2rem;
}
.bsh__filemark {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--paper-faint);
  padding-right: 1.2rem;
  white-space: nowrap;
}
.bsh__tab {
  position: relative;
  border: none;
  background: transparent;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--t-soft), transform var(--t-soft), color 160ms ease;
}
.bsh.is-built .bsh__tab { opacity: 1; transform: none; }
.bsh__tab:hover { color: var(--paper); }
.bsh__tab::after {
  content: "";
  position: absolute;
  left: 0.6rem; right: 0.6rem; bottom: -1px;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.65, 0.02, 0.22, 1);
}
.bsh__tab[aria-selected="true"] { color: var(--amber); }
.bsh__tab[aria-selected="true"]::after { transform: scaleX(1); }
.bsh__tab:focus-visible { outline: 1px dashed var(--amber-dim); outline-offset: 3px; }


/* ===== BRAND & SLOGAN ===== */
/* CodeNumber 3.0 */
.bsh__body {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  min-height: 0;
}
.bsh__brand {
  width: 41%;
  padding: 2.2rem 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
}
.bsh__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--paper-faint);
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.bsh__wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 50px);
  line-height: 1.02;
  margin: 0;
  letter-spacing: 0.3px;
  background-image:
    linear-gradient(102deg, transparent 30%, rgba(255,255,255,0.55) 47%, rgba(255,255,255,0.0) 56%),
    var(--metal);
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.bsh__wordmark .bar {
  -webkit-text-fill-color: var(--amber);
  color: var(--amber);
  font-style: normal;
}
.bsh__variant {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 5px;
  color: var(--paper-dim);
  text-transform: uppercase;
  margin: 0.5rem 0 1.1rem;
}
.bsh__slogan {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 20px);
  color: var(--paper);
  width: fit-content;
  padding-bottom: 6px;
  margin: 0 0 1.5rem;
}
.bsh__slogan::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.65, 0.02, 0.22, 1) 1100ms;
}
.bsh.is-built .bsh__slogan::after { transform: scaleX(1); }

.bsh-snakebtn {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  background: var(--hatch);
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  overflow: visible;
  isolation: isolate;
}
.bsh-snakebtn__svg { position: absolute; inset: 0; pointer-events: none; }
.bsh-snakebtn__svg svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bsh-snakebtn__base {
  fill: none;
  stroke: var(--amber-dim);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.bsh-snakebtn__trace {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 520ms cubic-bezier(0.65, 0.02, 0.22, 1);
}
.bsh-snakebtn__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber);
  transition: color 300ms ease 200ms;
}
.bsh-snakebtn .arr { display: inline-block; transition: transform 200ms ease; }

.bsh-snakebtn:hover .bsh-snakebtn__trace,
.bsh-snakebtn:focus-visible .bsh-snakebtn__trace { stroke-dashoffset: 0; }
.bsh-snakebtn:hover .bsh-snakebtn__label,
.bsh-snakebtn:focus-visible .bsh-snakebtn__label { color: #ffffff; }
.bsh-snakebtn:hover .arr { transform: translateX(4px); }
.bsh-snakebtn:focus-visible { outline: 1px dashed var(--amber-dim); outline-offset: 4px; }

.bsh__brand > * { opacity: 0; transform: translateY(10px); transition: opacity var(--t-soft), transform var(--t-soft); }
.bsh.is-built .bsh__brand > * { opacity: 1; transform: none; }
.bsh.is-built .bsh__kicker   { transition-delay: 720ms; }
.bsh.is-built .bsh__wordmark { transition-delay: 820ms; }
.bsh.is-built .bsh__variant  { transition-delay: 920ms; }
.bsh.is-built .bsh__slogan   { transition-delay: 1020ms; }
.bsh.is-built .bsh__cta      { transition-delay: 1180ms; }


/* ===== SHOWCASE PANEL ===== */
/* CodeNumber 4.0 */
.bsh__showcase {
  flex: 1;
  position: relative;
  padding: 1.9rem 2.4rem 2rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bsh__figlabel {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--paper-faint);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.bsh__figlabel .num { color: var(--amber-dim); }
.bsh__stage {
  flex: 1;
  display: flex;
  gap: 1.6rem;
  align-items: center;
  min-height: 0;
}
.bsh__figwrap {
  width: 46%;
  max-width: 280px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bsh-fig { width: 100%; height: auto; display: none; }
.bsh-fig.is-active { display: block; }

.bsh__feature { flex: 1; min-width: 0; }
.bsh__feature-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.9vw, 26px);
  font-weight: 400;
  margin: 0 0 0.55rem;
  color: var(--paper);
}
.bsh__feature-body {
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.5;
  color: var(--paper-dim);
  margin: 0;
  max-width: 42ch;
}
.bsh__feature .ln { display: block; opacity: 0; transform: translateY(9px); transition: opacity 420ms ease, transform 420ms ease; }
.bsh__feature.show .bsh__feature-title { transition-delay: 360ms; }
.bsh__feature.show .bsh__feature-body  { transition-delay: 460ms; }
.bsh__feature.show .ln { opacity: 1; transform: none; }


/* ===== FEATURE SCHEMATICS ===== */
/* CodeNumber 5.0 */
.bsh-fig path,
.bsh-fig line,
.bsh-fig polyline,
.bsh-fig circle { fill: none; stroke: var(--paper); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bsh-fig .accent { stroke: var(--amber); }

.bsh-fig .draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.bsh-fig .node {
  fill: var(--paper);
  stroke: none;
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: center;
}
.bsh-fig .node.accent { fill: var(--amber); stroke: none; }
.bsh-fig .hatch { fill: rgba(255, 255, 255, 0.07); stroke: var(--paper); }


/* ===== INFO, CREDITS & RESPONSIVE ===== */
/* CodeNumber 6.0 */
.bsh__info {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 7;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--paper-faint);
  background: var(--hatch);
  color: var(--paper-dim);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 160ms ease, border-color 160ms ease;
}
.bsh__info:hover { color: var(--amber); border-color: var(--amber-dim); }
.bsh__info:focus-visible { outline: 1px dashed var(--amber-dim); outline-offset: 3px; }

.bsh__credits {
  position: absolute;
  top: 52px; right: 18px;
  z-index: 8;
  width: min(360px, 78%);
  border: 1px solid var(--line-strong);
  background: rgba(8, 26, 54, 0.94);
  background-image: var(--hatch);
  padding: 1rem 1.1rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--paper-dim);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.bsh__credits.open { opacity: 1; transform: none; pointer-events: auto; }
.bsh__credits h4 {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--paper-faint);
  font-weight: 400;
}
.bsh__credits p { margin: 0 0 0.5rem; }
.bsh__credits ul { margin: 0; padding: 0; list-style: none; }
.bsh__credits li { margin-bottom: 0.45rem; }
.bsh__credits a { color: var(--amber); text-decoration: none; border-bottom: 1px dotted var(--amber-dim); }
.bsh__credits a:hover { border-bottom-style: solid; }
.bsh__credits .sig { color: var(--paper); }

@media (max-width: 760px) {
  .hp-postcard-canvas.card-book-scaffolding-horizontal { aspect-ratio: auto; }
  .bsh__rule--col { display: none; }
  .bsh__body { flex-direction: column; }
  .bsh__brand, .bsh__showcase { width: 100%; }
  .bsh__tabs { overflow-x: auto; padding: 0 1rem; }
  .bsh__filemark { display: none; }
  .bsh__stage { flex-direction: column; align-items: flex-start; }
  .bsh__figwrap { width: 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .bsh, .bsh *:not(.draw):not(.node) { transition: none !important; animation: none !important; }
  .bsh { opacity: 1; }
  .bsh__edge, .bsh__rule { transform: none !important; }
  .bsh__tab, .bsh__brand > * { opacity: 1 !important; transform: none !important; }
  .bsh__slogan::after { transform: scaleX(1) !important; }
  .bsh__feature .ln { opacity: 1 !important; transform: none !important; }
}