/* ============================================================================
   Obsidian Vow — realm component CSS
   Built 2026-09-09 by website-manager from the website-designer mockups
   (outputs/website-designer/obsidian-vow-collection-and-suites/*.html, SPEC §3).
   Enqueued ONLY on Obsidian Vow pages (tb_is_obsidian_vow_page() in functions.php)
   and scoped to body.realm-obsidian-vow throughout, so no other realm can be hit.

   Realm COLOUR tokens live in assets/css/tokens.css (body.realm-obsidian-vow).
   This file adds only the OV-specific DECORATIVE vocabulary and the components
   the mockups introduce. Values are lifted verbatim from the guest-site theme
   (outputs/website-designer/obsidian-vow-website/theme/design-tokens.css) so the
   stationery pages, the wedding-website LP and the guest site read as one studio.

   Rules of the re-skin (SPEC §3): no gold, no ornament glyph, no rounded corners,
   no box-shadow. Hairlines, a gunmetal gradient clipped to headline text, and ONE
   cut of wine per section — a 1px rule, a caret or a single word, never a wash.
   ========================================================================== */

body.realm-obsidian-vow{
  --hairline:#24262c;
  --hairline-soft:#1a1b1f;
  --frame:#2b2d34;
  --wine:#4A0F1B;      /* print value · ::selection · seal fills that stay near-black */
  --wine-rule:#6b1626; /* every 1px rule and tick — never raw #4A0F1B at 1px on this ground */
  --wine-word:#a8535f; /* the ONE tinted word / caret per section (3.83:1 — large text + UI only) */
  --gunmetal-grad:linear-gradient(150deg,#f8f9fb 0%,#a6a9b0 34%,#5b5e65 54%,#e6e8ec 100%);
  --gunmetal-grad-soft:linear-gradient(160deg,#f2f3f5 0%,#8d9098 42%,#4a4d54 60%,#d8dade 100%);
  --tr-ultra:.5em; --tr-wide:.42em; --tr-mid:.3em;
  overflow-x:hidden;
}

/* Page-body typography, applied to the page sections only so the hardcoded
   header, mobile menu, mini-cart and footer keep their own metrics. */
body.realm-obsidian-vow .tb-ov-lp,
body.realm-obsidian-vow .tb-section,
body.realm-obsidian-vow .tbsl-section,
body.realm-obsidian-vow .tbsl-pieces-bg,
body.realm-obsidian-vow .tbsl-how,
body.realm-obsidian-vow .tbsl-value,
body.realm-obsidian-vow .tbsl-themes,
body.realm-obsidian-vow .tbsl-faq-wrap,
body.realm-obsidian-vow .tbsl-demo-band,
body.realm-obsidian-vow .tbsl-website-feature,
body.realm-obsidian-vow .tbsl-test,
body.realm-obsidian-vow .tb-final,
body.realm-obsidian-vow .tbsl-final{
  color:var(--realm-muted);font-family:var(--tb-font-body);
  font-weight:300;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
body.realm-obsidian-vow .tb-ov-lp img,
body.realm-obsidian-vow .tb-section img,
body.realm-obsidian-vow .tbsl-section img,
body.realm-obsidian-vow .tb-final img{display:block;max-width:100%}
/* Links inside the page body inherit their surrounding colour — but NOT the buttons.
   `... .tbsl-section a` is (0,0,2,2) and would otherwise out-specify every button rule
   below it and repaint an <a class="tb-btn"> in the body copy colour. */
body.realm-obsidian-vow .tb-ov-lp a:not([class*="btn"]),
body.realm-obsidian-vow .tb-section a:not([class*="btn"]),
body.realm-obsidian-vow .tbsl-section a:not([class*="btn"]),
body.realm-obsidian-vow .tb-final a:not([class*="btn"]){color:inherit}
body.realm-obsidian-vow .tb-ov-lp a,
body.realm-obsidian-vow .tb-section a,
body.realm-obsidian-vow .tbsl-section a,
body.realm-obsidian-vow .tb-final a{text-decoration:none}
body.realm-obsidian-vow .tb-ov-lp h1,
body.realm-obsidian-vow .tb-ov-lp h2,
body.realm-obsidian-vow .tb-ov-lp h3,
body.realm-obsidian-vow .tb-section h1,
body.realm-obsidian-vow .tb-section h2,
body.realm-obsidian-vow .tb-section h3,
body.realm-obsidian-vow .tbsl-section h1,
body.realm-obsidian-vow .tbsl-section h2,
body.realm-obsidian-vow .tbsl-section h3{margin:0;font-weight:400}

/* Astra ships button:focus{background:var(--ast-global-color-1)} globally, which
   turns every theme <button> system-blue after a tap (reference_gallery_grid_component,
   2026-09-06). Every OV <button> gets the same guard the lightbox core already has. */
body.realm-obsidian-vow .tbg__chip:focus,
body.realm-obsidian-vow .tbg__item:focus,
body.realm-obsidian-vow .tbsl-piece__mockup:focus,
body.realm-obsidian-vow .tb-faq-question:focus{background:transparent;box-shadow:none}
body.realm-obsidian-vow .tbsl-piece__mockup:focus,
body.realm-obsidian-vow .tbg__item:focus{background:#000}
body.realm-obsidian-vow .tbg__chip:focus-visible,
body.realm-obsidian-vow .tbg__item:focus-visible,
body.realm-obsidian-vow .tbsl-piece__mockup:focus-visible,
body.realm-obsidian-vow .tb-faq-question:focus-visible{outline:2px solid var(--realm-cream);outline-offset:2px}

/* ── Shared components (from the mockups' shared core) ───────────────────── */
body.realm-obsidian-vow ::selection{background:var(--wine);color:#fff}
body.realm-obsidian-vow .tb-container{max-width:1200px;margin:0 auto;padding:0 40px}
body.realm-obsidian-vow .tb-container--narrow{max-width:780px;margin:0 auto;padding:0 40px}
@media(max-width:640px){
  body.realm-obsidian-vow .tb-container, body.realm-obsidian-vow .tb-container--narrow{padding:0 22px}
}
body.realm-obsidian-vow .tb-eyebrow{font-family:var(--tb-font-body);font-weight:300;font-size:11px;letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--realm-taupe);display:block}
body.realm-obsidian-vow .tb-ornament{text-align:center;margin-bottom:18px}
body.realm-obsidian-vow .tb-ornament span{font-size:11px;letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--realm-taupe)}
body.realm-obsidian-vow .tb-ornament::after{content:'';display:block;width:34px;height:1px;background:var(--wine-rule);margin:14px auto 0}
body.realm-obsidian-vow .tb-display{font-family:var(--tb-font-display);font-weight:400;line-height:.98;letter-spacing:0;
  background:var(--gunmetal-grad-soft);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;text-shadow:none}
body.realm-obsidian-vow .tb-display em{font-style:normal;color:transparent}
body.realm-obsidian-vow h1.tb-display{font-size:clamp(2.5rem,5.4vw,4.3rem);background:var(--gunmetal-grad);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.realm-obsidian-vow h2.tb-display{font-size:clamp(2rem,4.2vw,3.1rem)}
body.realm-obsidian-vow h3.tb-display{font-size:clamp(1.3rem,2.2vw,1.7rem)}
body.realm-obsidian-vow .tb-lead{color:var(--realm-muted);font-size:1.02rem;line-height:1.85}
body.realm-obsidian-vow .tb-wineword{color:var(--wine-word)}
body.realm-obsidian-vow .tb-rule{width:100%;height:1px;background:var(--hairline);border:0;margin:0}
body.realm-obsidian-vow .tb-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--tb-font-body);
  font-weight:400;font-size:12px;letter-spacing:var(--tr-mid);text-transform:uppercase;padding:18px 30px;
  min-height:48px;border:1px solid var(--realm-cream);background:transparent;color:var(--realm-cream);
  cursor:pointer;transition:border-color .25s,color .25s,background .25s}
body.realm-obsidian-vow .tb-btn--primary:hover{border-color:var(--wine-word);color:var(--wine-word)}
body.realm-obsidian-vow .tb-btn--primary:focus-visible{outline:2px solid var(--realm-cream);outline-offset:3px}
body.realm-obsidian-vow .tb-btn--ghost{border-color:var(--frame);color:var(--realm-muted)}
body.realm-obsidian-vow .tb-btn--ghost:hover{border-color:var(--realm-cream);color:var(--realm-cream)}
body.realm-obsidian-vow .tb-btn--ghost:focus-visible{outline:2px solid var(--realm-cream);outline-offset:3px}
body.realm-obsidian-vow .tb-price{font-family:var(--tb-font-display);font-size:2rem;color:var(--realm-cream);line-height:1}
body.realm-obsidian-vow .tb-price-was{color:var(--realm-taupe);text-decoration:line-through;font-family:var(--tb-font-body);
  font-size:.95rem;margin-right:10px}
body.realm-obsidian-vow .tb-section{padding:120px 0;position:relative}
body.realm-obsidian-vow .tb-section--surface{background:var(--realm-primary)}
body.realm-obsidian-vow .tb-section--deep{background:var(--realm-secondary)}
@media(max-width:900px){
  body.realm-obsidian-vow .tb-section{padding:80px 0}
}
body.realm-obsidian-vow .tbh-section-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.08;
  filter:brightness(.5) saturate(.3) grayscale(.4);pointer-events:none;z-index:0}
@media(max-width:900px){
  body.realm-obsidian-vow .tbh-section-bg-img{opacity:.06}
}
body.realm-obsidian-vow .tb-section>.tb-container, body.realm-obsidian-vow .tb-section>.tb-container--narrow{position:relative;z-index:1}
body.realm-obsidian-vow .tbsl-pieces-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:56px}
@media(max-width:1023px){
  body.realm-obsidian-vow .tbsl-pieces-grid{grid-template-columns:repeat(2,1fr);gap:26px}
}
@media(max-width:640px){
  body.realm-obsidian-vow .tbsl-pieces-grid{grid-template-columns:1fr;gap:30px}
}
/* 2026-09-10 (v4) - four across, no orphan. The shared suite templates ship
   .tbsl-pieces-grid at repeat(4,1fr); the rule above overrode it with three,
   which left the fourth card alone on a second row on Digital Basic (4 pieces)
   and Digital Deluxe (4 pieces + the full-width website card). Essentials ships
   SIX and stays three-across, so this is gated on the grid's own child count
   with :has(), not on a page id - ids differ between staging2 and live and this
   file is deployed to both. Where :has() is unsupported the page keeps today's
   three-across; nothing breaks. */
@media(min-width:1100px){
  body.realm-obsidian-vow .tbsl-pieces-grid:has(> .tbsl-piece:first-child:nth-last-child(4)),
  body.realm-obsidian-vow .tbsl-pieces-grid:has(> .tbsl-piece:first-child:nth-last-child(5)){
    grid-template-columns:repeat(4,1fr);gap:26px}
}
@media(min-width:641px) and (max-width:1099px){
  body.realm-obsidian-vow .tbsl-pieces-grid:has(> .tbsl-piece:first-child:nth-last-child(4)),
  body.realm-obsidian-vow .tbsl-pieces-grid:has(> .tbsl-piece:first-child:nth-last-child(5)){
    grid-template-columns:repeat(2,1fr);gap:26px}
}
body.realm-obsidian-vow .tbsl-piece{border:1px solid var(--hairline);background:var(--realm-bg)}
body.realm-obsidian-vow .tbsl-piece__mockup{display:block;width:100%;padding:0;border:0;background:#000;position:relative;cursor:zoom-in}
body.realm-obsidian-vow .tbsl-piece__mockup img{width:100%;height:auto}
/* 2026-09-10 (B6) - the What's Inside card image.
   The shared suite templates blow every piece image up 15% over `object-fit:cover`
   and lay a bottom-to-transparent scrim over it. That was tuned for square-ish
   print crops; on Obsidian Vow's full-bleed 1080x1920 mobile renders it cropped
   the card's own frame away and darkened the lower third of an already near-black
   piece. Realm-scoped: no other realm is touched. */
body.realm-obsidian-vow .tbsl-piece__mockup img{transform:none;object-position:center;object-fit:cover}
body.realm-obsidian-vow .tbsl-piece__mockup::after{background:none}
/* The QR feature slot is a 4:3 box with object-fit:contain; a 9:16 phone render
   letterboxes to a sliver in it. 4:5 lets the render stand nearly full height. */
body.realm-obsidian-vow .tbsl-qr-feature__img{aspect-ratio:4/5}
body.realm-obsidian-vow .tbsl-piece__mockup:focus{background:#000}
body.realm-obsidian-vow .tbsl-piece__mockup:focus-visible{outline:2px solid var(--realm-cream);outline-offset:-2px}
/* 2026-09-10 (B6) THE dark-and-blurred-QR bug. The shared suite templates place
   this chip bottom-left; this realm moved it top-right but did not release the
   inherited `bottom` and `left`, so all four offsets were set at once and the
   chip stretched over the WHOLE card - painting rgba(10,10,11,.82) and a
   `backdrop-filter: blur(6px)` across every What's Inside mockup. Releasing the
   two stale offsets returns it to a corner chip. */
body.realm-obsidian-vow .tbsl-piece__fmt-badge{position:absolute;top:12px;right:12px;bottom:auto;left:auto;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--realm-taupe);background:rgba(10,10,11,.82);
  border:1px solid var(--hairline);padding:5px 9px}
body.realm-obsidian-vow .tbsl-piece__var{position:absolute;top:12px;left:12px;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--realm-cream);background:rgba(10,10,11,.82);
  border:1px solid var(--frame);border-left:2px solid var(--wine-rule);padding:5px 9px}
body.realm-obsidian-vow .tbsl-piece__body{padding:22px 22px 26px}
body.realm-obsidian-vow .tbsl-piece__body h3{font-family:var(--tb-font-display);font-size:1.35rem;color:var(--realm-cream);margin:10px 0 8px}
body.realm-obsidian-vow .tbsl-piece__blurb{font-size:.94rem;color:var(--realm-muted);margin:0;line-height:1.7}
body.realm-obsidian-vow .tbsl-pair{border:1px solid var(--hairline);padding:0}
body.realm-obsidian-vow .tbsl-pair__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--hairline)}
body.realm-obsidian-vow .tbsl-pair__head h3{font-family:var(--tb-font-display);font-size:1.35rem;color:var(--realm-cream)}
body.realm-obsidian-vow .tbsl-pair__imgs{display:grid;grid-template-columns:1fr 1fr}
body.realm-obsidian-vow .tbsl-pair__imgs>figure{margin:0;position:relative;background:#000}
body.realm-obsidian-vow .tbsl-pair__imgs>figure+figure{border-left:1px solid var(--hairline)}
body.realm-obsidian-vow .tbsl-pair__imgs figcaption{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--realm-taupe);text-align:center;padding:10px 6px;border-top:1px solid var(--hairline)}
@media(max-width:480px){
  body.realm-obsidian-vow .tbsl-pair__imgs{grid-template-columns:1fr}
  body.realm-obsidian-vow .tbsl-pair__imgs>figure+figure{border-left:0;border-top:1px solid var(--hairline)}
}
body.realm-obsidian-vow .tbg__grid{column-count:4;column-gap:18px;margin-top:44px}
@media(max-width:1023px){
  body.realm-obsidian-vow .tbg__grid{column-count:3}
}
@media(max-width:768px){
  body.realm-obsidian-vow .tbg__grid{column-count:2;column-gap:12px}
}
body.realm-obsidian-vow .tbg__item{display:block;width:100%;padding:0;margin:0 0 18px;border:1px solid var(--hairline);
  background:#000;break-inside:avoid;cursor:zoom-in}
body.realm-obsidian-vow .tbg__item:focus{background:#000}
body.realm-obsidian-vow .tbg__item:focus-visible{outline:2px solid var(--realm-cream);outline-offset:-2px}
body.realm-obsidian-vow .tbg__cap{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--realm-taupe);
  padding:9px 10px;text-align:left}
body.realm-obsidian-vow .tbg__filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
body.realm-obsidian-vow .tbg__chip{font-family:var(--tb-font-body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--realm-taupe);background:transparent;border:1px solid var(--hairline);padding:10px 16px;
  min-height:44px;cursor:pointer}
body.realm-obsidian-vow .tbg__chip[aria-pressed="true"]{color:var(--realm-cream);border-color:var(--frame);border-bottom-color:var(--wine-rule)}
body.realm-obsidian-vow .tbg__foot{text-align:center;margin-top:26px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--realm-taupe)}
body.realm-obsidian-vow .tb-how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:56px}
@media(max-width:1023px){
  body.realm-obsidian-vow .tb-how-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  body.realm-obsidian-vow .tb-how-grid{grid-template-columns:1fr;gap:26px}
}
body.realm-obsidian-vow .tb-step{border-top:1px solid var(--hairline);padding-top:24px}
body.realm-obsidian-vow .tb-step__n{font-family:var(--tb-font-display);font-size:1.6rem;color:var(--realm-cream);margin-bottom:12px}
body.realm-obsidian-vow .tb-step__n::after{content:'';display:block;width:20px;height:1px;background:var(--wine-rule);margin-top:10px}
body.realm-obsidian-vow .tb-step h3{font-family:var(--tb-font-display);font-size:1.3rem;color:var(--realm-cream);margin-bottom:10px}
body.realm-obsidian-vow .tb-step p{font-size:.94rem;margin:0 0 14px}
body.realm-obsidian-vow .tb-step__meta{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--realm-taupe)}
body.realm-obsidian-vow .tb-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--hairline)}
@media(max-width:768px){
  body.realm-obsidian-vow .tb-trust{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  body.realm-obsidian-vow .tb-trust{grid-template-columns:1fr}
}
body.realm-obsidian-vow .tb-trust__cell{padding:26px 22px;border-right:1px solid var(--hairline)}
body.realm-obsidian-vow .tb-trust__cell:last-child{border-right:0}
@media(max-width:768px){
  body.realm-obsidian-vow .tb-trust__cell{border-bottom:1px solid var(--hairline)}
}
body.realm-obsidian-vow .tb-trust__cell strong{display:block;font-family:var(--tb-font-display);font-weight:400;font-size:1.1rem;
  color:var(--realm-cream);margin-bottom:6px}
body.realm-obsidian-vow .tb-trust__cell span{font-size:.88rem;color:var(--realm-muted)}
body.realm-obsidian-vow .tb-value-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:20px 0;border-bottom:1px solid var(--hairline-soft);text-align:left}
body.realm-obsidian-vow .tb-value-row__label{font-size:.95rem;color:var(--realm-muted)}
body.realm-obsidian-vow .tb-value-row__note{display:block;font-size:.82rem;color:var(--realm-taupe);margin-top:4px}
body.realm-obsidian-vow .tb-value-row__price{font-family:var(--tb-font-display);font-size:1.25rem;color:var(--realm-taupe);white-space:nowrap}
body.realm-obsidian-vow .tb-value-row--suite{border-bottom:1px solid var(--wine-rule)}
body.realm-obsidian-vow .tb-value-row--suite .tb-value-row__label{color:var(--realm-cream)}
body.realm-obsidian-vow .tb-value-row--suite .tb-value-row__price{color:var(--realm-cream)}
body.realm-obsidian-vow .tb-themes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
@media(max-width:900px){
  body.realm-obsidian-vow .tb-themes-grid{grid-template-columns:1fr}
}
body.realm-obsidian-vow .tb-theme-card{display:block;border:1px solid var(--hairline);background:var(--realm-bg)}
body.realm-obsidian-vow .tb-theme-card:hover{border-color:var(--frame)}
body.realm-obsidian-vow .tb-theme-card__img{aspect-ratio:16/10;overflow:hidden;background:#000}
body.realm-obsidian-vow .tb-theme-card__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.8)}
body.realm-obsidian-vow .tb-theme-card__body{padding:18px 20px}
body.realm-obsidian-vow .tb-theme-card__name{font-family:var(--tb-font-display);font-size:1.2rem;color:var(--realm-cream)}
body.realm-obsidian-vow .tb-theme-card__status{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--realm-taupe);margin-top:6px}
body.realm-obsidian-vow .tb-faq-list{margin-top:44px;border-top:1px solid var(--hairline)}
body.realm-obsidian-vow .tb-faq-item{border-bottom:1px solid var(--hairline)}
body.realm-obsidian-vow .tb-faq-question{display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;
  font-family:var(--tb-font-display);font-size:1.15rem;color:var(--realm-cream);background:transparent;
  border:0;padding:24px 2px;text-align:left;min-height:56px;cursor:pointer}
body.realm-obsidian-vow .tb-faq-question:focus{background:transparent}
body.realm-obsidian-vow .tb-faq-question:focus-visible{outline:2px solid var(--realm-cream);outline-offset:-2px}
body.realm-obsidian-vow .tb-faq-question .pm{color:var(--wine-word);font-family:var(--tb-font-body);font-size:1rem}
body.realm-obsidian-vow .tb-faq-answer{padding:0 2px 26px;font-size:.96rem;color:var(--realm-muted);max-width:70ch}
body.realm-obsidian-vow .tb-faq-answer[hidden]{display:none}
body.realm-obsidian-vow .tb-final{position:relative;overflow:hidden;background:var(--realm-dark);padding:140px 0;text-align:center}
@media(max-width:900px){
  body.realm-obsidian-vow .tb-final{padding:90px 0}
}
body.realm-obsidian-vow .tb-final__bg{position:absolute;inset:0}
body.realm-obsidian-vow .tb-final__bg img{width:100%;height:100%;object-fit:cover}
body.realm-obsidian-vow .tb-final__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,7,.86) 0%,rgba(6,6,7,.94) 60%,var(--realm-dark) 100%)}
body.realm-obsidian-vow .tb-final__inner{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:0 24px}
body.realm-obsidian-vow .tbsl-sticky{position:fixed;left:0;right:0;bottom:0;z-index:900;display:none;align-items:center;gap:12px;
  padding:10px 14px;background:rgba(10,10,11,.96);border-top:1px solid var(--hairline);
  backdrop-filter:blur(8px);transform:translateY(110%);transition:transform .28s ease}
body.realm-obsidian-vow .tbsl-sticky.is-visible{transform:translateY(0)}
@media(max-width:900px){
  body.realm-obsidian-vow .tbsl-sticky{display:flex}
}
body.realm-obsidian-vow .tbsl-sticky__thumb{width:44px;height:44px;object-fit:cover;border:1px solid var(--hairline);flex:0 0 auto}
body.realm-obsidian-vow .tbsl-sticky__meta{flex:1 1 auto;min-width:0}
body.realm-obsidian-vow .tbsl-sticky__name{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--realm-taupe);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.realm-obsidian-vow .tbsl-sticky__price{font-family:var(--tb-font-display);font-size:1.1rem;color:var(--realm-cream)}
body.realm-obsidian-vow .tbsl-sticky__founders{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--wine-word)}
body.realm-obsidian-vow .tbsl-sticky .tb-btn{padding:14px 18px;font-size:11px;min-height:44px;flex:0 0 auto}
body.realm-obsidian-vow .tb-founders-badge{display:inline-block;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--wine-word);border:1px solid var(--frame);padding:9px 14px}
body.realm-obsidian-vow .tb-fdc{color:var(--realm-cream)}
body.realm-obsidian-vow .tb-pricetoken{font-family:var(--tb-font-body);font-size:.9em;letter-spacing:.12em;color:var(--realm-cream);
  border-bottom:1px dashed var(--frame)}
body.realm-obsidian-vow .tbsl-piece__body, body.realm-obsidian-vow .tbsl-pair__head, body.realm-obsidian-vow .tb-value-row__label{min-width:0}
@media(max-width:640px){
  body.realm-obsidian-vow .tbsl-pieces-grid>*{grid-column:auto!important}
}
body.realm-obsidian-vow .tb-em{font-style:italic;color:var(--realm-cream)}
/* ── Suite-page components (Digital Basic · Essentials · Digital Deluxe) ── */
body.realm-obsidian-vow .tbsl-hero{position:relative;display:flex;align-items:flex-end;min-height:86vh;overflow:hidden;background:var(--realm-dark)}
body.realm-obsidian-vow .tbsl-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
body.realm-obsidian-vow .tbsl-hero__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,10,11,.95) 0%,rgba(10,10,11,.78) 36%,rgba(10,10,11,.2) 72%,rgba(10,10,11,.55) 100%),
  linear-gradient(180deg,rgba(10,10,11,.55) 0%,transparent 32%,rgba(10,10,11,.9) 100%)}
body.realm-obsidian-vow .tbsl-hero__breadcrumb{font-size:11px;letter-spacing:.14em;color:var(--realm-taupe);margin-bottom:30px}
body.realm-obsidian-vow .tbsl-hero__breadcrumb .sep{opacity:.5;margin:0 8px}
body.realm-obsidian-vow .tbsl-hero__left{max-width:600px}
body.realm-obsidian-vow .tbsl-hero h1{margin:18px 0 22px}
body.realm-obsidian-vow .tbsl-hero__sub{max-width:520px;margin:0 0 30px}
body.realm-obsidian-vow .tbsl-price-row{display:flex;align-items:baseline;gap:14px;margin-bottom:10px;flex-wrap:wrap}
body.realm-obsidian-vow .tbsl-itemline{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--realm-taupe);margin-bottom:26px}
body.realm-obsidian-vow .tbsl-cta-row{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:26px}
body.realm-obsidian-vow .tbsl-reassure{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--realm-taupe)}
body.realm-obsidian-vow .tbsl-reassure b{color:var(--wine-word);font-weight:400}
body.realm-obsidian-vow .tb-uc-callout{border:1px solid var(--hairline);border-left:2px solid var(--wine-rule);padding:20px 22px;margin:0 0 26px;max-width:560px}
body.realm-obsidian-vow .tb-uc-callout__title{font-family:var(--tb-font-display);font-size:1.2rem;color:var(--realm-cream);margin:0 0 8px}
body.realm-obsidian-vow .tb-uc-callout__body{font-size:.9rem;margin:0}
@media(max-width:900px){
  body.realm-obsidian-vow .tbsl-section.tbsl-hero{display:block;flex-direction:column;min-height:0;padding:0;background:var(--realm-bg)}
  body.realm-obsidian-vow .tbsl-hero__img{position:relative;height:50vw;object-position:center 30%}
  body.realm-obsidian-vow .tbsl-hero::after{content:'';position:absolute;top:0;left:0;right:0;height:50vw;
    background:linear-gradient(180deg,transparent 30%,var(--realm-bg) 100%);pointer-events:none;z-index:1}
  body.realm-obsidian-vow .tbsl-hero__scrim{display:none}
  body.realm-obsidian-vow .tbsl-hero__breadcrumb{margin-bottom:16px}
}
body.realm-obsidian-vow .tbsl-np-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--hairline);margin-top:48px}
@media(max-width:768px){
  body.realm-obsidian-vow .tbsl-np-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  body.realm-obsidian-vow .tbsl-np-grid{grid-template-columns:1fr}
}
body.realm-obsidian-vow .tbsl-np-card{padding:28px 22px;border-right:1px solid var(--hairline)}
body.realm-obsidian-vow .tbsl-np-card:last-child{border-right:0}
@media(max-width:768px){
  body.realm-obsidian-vow .tbsl-np-card{border-bottom:1px solid var(--hairline)}
}
body.realm-obsidian-vow .tbsl-np-card h3{font-family:var(--tb-font-display);font-size:1.2rem;color:var(--realm-cream);margin:0 0 8px}
body.realm-obsidian-vow .tbsl-np-card h3::before{content:'';display:block;width:16px;height:1px;background:var(--wine-rule);margin-bottom:12px}
body.realm-obsidian-vow .tbsl-np-card p{font-size:.9rem;margin:0}
body.realm-obsidian-vow .tbsl-qr-feature{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center;
  border:1px solid var(--hairline);padding:36px;margin-top:52px}
@media(max-width:900px){
  body.realm-obsidian-vow .tbsl-qr-feature{grid-template-columns:1fr;gap:28px;padding:24px}
}
body.realm-obsidian-vow .tbsl-qr-feature__img{background:#000;border:1px solid var(--hairline)}
body.realm-obsidian-vow .tbsl-qr-steps{list-style:none;padding:0;margin:22px 0 26px}
body.realm-obsidian-vow .tbsl-qr-steps li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--hairline-soft);font-size:.94rem}
body.realm-obsidian-vow .tbsl-qr-steps li::before{content:'';position:absolute;left:0;top:22px;width:10px;height:1px;background:var(--wine-rule)}
body.realm-obsidian-vow .tbsl-website-feature-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:48px}
@media(max-width:1023px){
  body.realm-obsidian-vow .tbsl-website-feature-inner{grid-template-columns:1fr;gap:34px}
}
body.realm-obsidian-vow .tbsl-wf-browser{border:1px solid var(--frame);background:#000}
body.realm-obsidian-vow .tbsl-wf-browser__chrome{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--hairline);background:var(--realm-primary)}
body.realm-obsidian-vow .tbsl-wf-browser__url{font-size:10px;letter-spacing:.1em;color:var(--realm-taupe);text-transform:none}
body.realm-obsidian-vow .tbsl-feature-list{list-style:none;padding:0;margin:24px 0 28px}
body.realm-obsidian-vow .tbsl-feature-list li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--hairline-soft);font-size:.94rem}
body.realm-obsidian-vow .tbsl-feature-list li::before{content:'';position:absolute;left:0;top:22px;width:10px;height:1px;background:var(--wine-rule)}
body.realm-obsidian-vow .tbsl-platform-status{border:1px solid var(--hairline);border-left:2px solid var(--wine-rule);padding:20px 22px;margin:22px 0;font-size:.92rem}
body.realm-obsidian-vow .tbsl-pieces-upsell{text-align:center;margin-top:44px;font-size:.95rem;color:var(--realm-taupe)}
body.realm-obsidian-vow .tbsl-final__row{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-top:8px}
body.realm-obsidian-vow .tbsl-downsell{margin-top:22px;font-size:.92rem;color:var(--realm-taupe)}
body.realm-obsidian-vow .tbsl-downsell a{border-bottom:1px solid var(--wine-rule)}
body.realm-obsidian-vow .tbsl-final__split{margin-top:14px;font-size:.9rem;color:var(--realm-taupe)}
body.realm-obsidian-vow .tbsl-final__split a{border-bottom:1px solid var(--frame)}
/* ── Collection landing page only (wrapper .tb-ov-lp) ─────────────────── */
body.realm-obsidian-vow .tb-ov-lp .tbc-hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--realm-dark)}
body.realm-obsidian-vow .tb-ov-lp .tbc-hero-art{position:absolute;inset:0}
body.realm-obsidian-vow .tb-ov-lp .tbc-hero-art img{width:100%;height:100%;object-fit:cover;object-position:58% 46%}
body.realm-obsidian-vow .tb-ov-lp .tbc-hero-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,10,11,.94) 0%,rgba(10,10,11,.74) 34%,rgba(10,10,11,.18) 68%,rgba(10,10,11,.5) 100%),
  linear-gradient(180deg,rgba(10,10,11,.6) 0%,transparent 30%,rgba(10,10,11,.9) 100%)}
body.realm-obsidian-vow .tb-ov-lp .tbc-hero-frame{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 40px 96px}
body.realm-obsidian-vow .tb-ov-lp .tbc-hero-crumb{font-size:11px;letter-spacing:.14em;color:var(--realm-taupe);margin-bottom:34px}
body.realm-obsidian-vow .tb-ov-lp .tbc-hero-crumb .sep{opacity:.5;margin:0 8px}
body.realm-obsidian-vow .tb-ov-lp .tbc-hero-inner{max-width:640px}
body.realm-obsidian-vow .tb-ov-lp .tbc-hero h1{margin:20px 0 24px}
body.realm-obsidian-vow .tb-ov-lp .tbc-hero-lead{max-width:520px;margin:0 0 34px}
body.realm-obsidian-vow .tb-ov-lp .tbc-hero-cta{display:flex;flex-wrap:wrap;gap:16px}
body.realm-obsidian-vow .tb-ov-lp .tbc-hero-sig{margin:30px 0 0;font-family:var(--tb-font-display);font-size:1.05rem;color:var(--realm-taupe);
  border-left:1px solid var(--wine-rule);padding-left:16px;max-width:460px}
@media(max-width:900px){
  body.realm-obsidian-vow .tb-ov-lp .tbc-hero{display:block;min-height:0;background:var(--realm-bg)}
  body.realm-obsidian-vow .tb-ov-lp .tbc-hero-art{position:relative;height:78vw}
  body.realm-obsidian-vow .tb-ov-lp .tbc-hero-art::after{content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 30%,var(--realm-bg) 100%)}
  body.realm-obsidian-vow .tb-ov-lp .tbc-hero-scrim{display:none}
  body.realm-obsidian-vow .tb-ov-lp .tbc-hero-frame{padding:26px 22px 56px}
  body.realm-obsidian-vow .tb-ov-lp .tbc-hero-crumb{margin-bottom:18px}
}
body.realm-obsidian-vow .tb-ov-lp .tbc-manifesto ul{list-style:none;padding:0;margin:34px 0 0;text-align:left;max-width:640px;
  margin-left:auto;margin-right:auto}
body.realm-obsidian-vow .tb-ov-lp .tbc-manifesto li{position:relative;padding:14px 0 14px 26px;border-bottom:1px solid var(--hairline-soft);font-size:.98rem}
body.realm-obsidian-vow .tb-ov-lp .tbc-manifesto li::before{content:'';position:absolute;left:0;top:24px;width:10px;height:1px;background:var(--wine-rule)}
body.realm-obsidian-vow .tb-ov-lp .tbc-closer{margin-top:34px;font-family:var(--tb-font-display);font-size:1.5rem;color:var(--realm-cream);text-align:center}
body.realm-obsidian-vow .tb-ov-lp .tbc-var-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--hairline);margin-top:52px}
@media(max-width:768px){
  body.realm-obsidian-vow .tb-ov-lp .tbc-var-grid{grid-template-columns:1fr}
}
body.realm-obsidian-vow .tb-ov-lp .tbc-var{padding:0}
body.realm-obsidian-vow .tb-ov-lp .tbc-var+.tbc-var{border-left:1px solid var(--hairline)}
@media(max-width:768px){
  body.realm-obsidian-vow .tb-ov-lp .tbc-var+.tbc-var{border-left:0;border-top:1px solid var(--hairline)}
}
body.realm-obsidian-vow .tb-ov-lp .tbc-var__imgs{display:grid;grid-template-columns:1fr 1fr;background:#000}
body.realm-obsidian-vow .tb-ov-lp .tbc-var__imgs img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/7}
body.realm-obsidian-vow .tb-ov-lp .tbc-var__imgs img+img{border-left:1px solid var(--hairline)}
body.realm-obsidian-vow .tb-ov-lp .tbc-var__body{padding:28px 28px 34px}
body.realm-obsidian-vow .tb-ov-lp .tbc-var__name{font-family:var(--tb-font-display);font-size:1.7rem;color:var(--realm-cream)}
body.realm-obsidian-vow .tb-ov-lp .tbc-var__name::after{content:'';display:block;width:28px;height:1px;background:var(--wine-rule);margin-top:12px}
body.realm-obsidian-vow .tb-ov-lp .tbc-var__body p{font-size:.95rem;margin:16px 0 0}
body.realm-obsidian-vow .tb-ov-lp .tbc-var-note{text-align:center;margin-top:30px;font-size:.95rem;color:var(--realm-taupe);max-width:620px;
  margin-left:auto;margin-right:auto}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
@media(max-width:1023px){
  body.realm-obsidian-vow .tb-ov-lp .tbc-suite-ladder{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-card{display:flex;flex-direction:column;border:1px solid var(--hairline);background:var(--realm-bg);position:relative}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-card--popular{border-color:var(--frame)}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-badge{position:absolute;top:0;left:0;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--realm-cream);background:var(--realm-bg);border:1px solid var(--frame);border-left:2px solid var(--wine-rule);padding:6px 11px}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:#000}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-photo img{width:100%;height:100%;object-fit:cover}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-pieces-badge{position:absolute;bottom:12px;right:12px;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--realm-taupe);background:rgba(10,10,11,.86);border:1px solid var(--hairline);padding:5px 9px}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1 1 auto}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-kicker{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--realm-taupe)}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-body h3{font-family:var(--tb-font-display);font-size:1.5rem;color:var(--realm-cream);margin:12px 0 12px}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-teaser{font-size:.93rem;margin:0 0 22px;flex:1 1 auto}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-price{font-family:var(--tb-font-display);font-size:1.7rem;color:var(--realm-cream)}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-fineprint{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--realm-taupe);margin:8px 0 20px}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-coming{border:1px solid var(--hairline-soft);background:var(--realm-secondary);padding:34px 26px;
  margin-top:26px;text-align:center}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-coming .tb-eyebrow{margin-bottom:14px}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-coming h3{font-family:var(--tb-font-display);font-size:1.5rem;color:var(--realm-cream);margin-bottom:12px}
body.realm-obsidian-vow .tb-ov-lp .tbc-suite-coming p{font-size:.93rem;max-width:560px;margin:0 auto 22px}
body.realm-obsidian-vow .tb-ov-lp .tbc-interest-form{display:flex;gap:0;max-width:440px;margin:0 auto;border:1px solid var(--hairline)}
body.realm-obsidian-vow .tb-ov-lp .tbc-interest-input{flex:1 1 auto;background:transparent;border:0;color:var(--realm-cream);
  font-family:var(--tb-font-body);font-size:15px;padding:14px 16px;min-height:48px}
body.realm-obsidian-vow .tb-ov-lp .tbc-interest-input::placeholder{color:var(--realm-taupe)}
body.realm-obsidian-vow .tb-ov-lp .tbc-interest-input:focus-visible{outline:2px solid var(--realm-cream);outline-offset:-2px}
body.realm-obsidian-vow .tb-ov-lp .tbc-interest-submit{background:transparent;border:0;border-left:1px solid var(--hairline);color:var(--realm-cream);
  font-family:var(--tb-font-body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:0 18px;
  min-height:48px;cursor:pointer}
body.realm-obsidian-vow .tb-ov-lp .tbc-interest-meta{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--realm-taupe);margin-top:12px}
body.realm-obsidian-vow .tb-ov-lp .tb-uc-band{border:1px solid var(--hairline);border-left:2px solid var(--wine-rule);padding:28px 30px;margin-top:34px}
body.realm-obsidian-vow .tb-ov-lp .tb-uc-band h3{font-family:var(--tb-font-display);font-size:1.35rem;color:var(--realm-cream);margin-bottom:10px}
body.realm-obsidian-vow .tb-ov-lp .tb-uc-band p{font-size:.94rem;margin:0;max-width:78ch}
body.realm-obsidian-vow .tb-ov-lp .tbc-ww-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:1023px){
  /* 2026-10-12: minmax(0,1fr), not 1fr. FlyingPress lazy render sets contain-intrinsic-size on .tbc-ww-copy, which held a 1fr track wider than phones. */
  body.realm-obsidian-vow .tb-ov-lp .tbc-ww-inner{grid-template-columns:minmax(0,1fr);gap:34px}
}
body.realm-obsidian-vow .tb-ov-lp .tbc-ww-media{border:1px solid var(--hairline);background:#000}
body.realm-obsidian-vow .tb-ov-lp .tbc-ww-media img{width:100%;filter:grayscale(.4) saturate(.8) brightness(.9)}
body.realm-obsidian-vow .tb-ov-lp .tbc-ww-copy h2{margin-bottom:18px;text-align:left}
body.realm-obsidian-vow .tb-ov-lp .tbc-ww-price{font-family:var(--tb-font-display);font-size:2rem;color:var(--realm-cream);margin-top:22px}
body.realm-obsidian-vow .tb-ov-lp .tbc-ww-price-sub{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--realm-taupe);margin:8px 0 26px}
body.realm-obsidian-vow .tb-ov-lp .tbc-ww-ctas{display:flex;flex-wrap:wrap;gap:14px}
body.realm-obsidian-vow .tb-ov-lp .tbc-planner{display:grid;grid-template-columns:150px 1fr;gap:34px;align-items:center;
  border:1px solid var(--hairline);padding:34px}
@media(max-width:768px){
  body.realm-obsidian-vow .tb-ov-lp .tbc-planner{grid-template-columns:1fr;gap:22px;text-align:center}
}
body.realm-obsidian-vow .tb-ov-lp .tbc-planner-thumb{border:1px solid var(--hairline);aspect-ratio:3/4;display:flex;align-items:center;
  justify-content:center;text-align:center;font-family:var(--tb-font-display);font-size:1.2rem;
  color:var(--realm-cream);background:var(--realm-secondary)}
body.realm-obsidian-vow .tb-ov-lp .tbc-planner-headline{font-family:var(--tb-font-display);font-size:1.5rem;color:var(--realm-cream);margin:10px 0 8px}
body.realm-obsidian-vow .tb-ov-lp .tbc-planner-form{display:flex;max-width:440px;border:1px solid var(--hairline);margin-top:18px}
@media(max-width:768px){
  body.realm-obsidian-vow .tb-ov-lp .tbc-planner-form{margin-left:auto;margin-right:auto}
}
/* ── Overrides for shared components that ship EF-gold defaults ────────────
   Two live components hardcode Enchanted Forest values and would put brand gold
   on this realm. Both print their CSS INLINE at wp_head (tb_faq_styles at 98,
   tb_gallery_print_assets from the render call), i.e. AFTER this enqueued file —
   so every rule below is deliberately one class more specific than theirs. */

/* inc/faq-shortcode.php — hardcodes #D1B28C headings/icons, Cinzel and Cormorant. */
body.realm-obsidian-vow .tb-faq-section{margin-top:38px;padding-top:0;border-top:0}
body.realm-obsidian-vow .tb-faq-heading{display:none}      /* the page prints its own H2 */
body.realm-obsidian-vow .tb-faq-list{max-width:780px;margin:0 auto}
body.realm-obsidian-vow .tb-faq-item{border-bottom:1px solid var(--hairline)}
body.realm-obsidian-vow .tb-faq-question{font-family:var(--tb-font-body);font-weight:400;font-size:1rem;
  letter-spacing:.02em;color:var(--realm-cream);padding:20px 0;background:transparent;border:0}
body.realm-obsidian-vow .tb-faq-question:hover{color:var(--wine-word)}
body.realm-obsidian-vow .tb-faq-question:focus{outline:none;background:transparent}
body.realm-obsidian-vow .tb-faq-question:focus-visible{outline:2px solid var(--realm-cream);outline-offset:2px}
body.realm-obsidian-vow .tb-faq-icon{color:var(--wine-word);font-size:1.2rem;font-family:var(--tb-font-body)}
body.realm-obsidian-vow .tb-faq-answer{padding:0 0 22px}
body.realm-obsidian-vow .tb-faq-answer p{font-family:var(--tb-font-body);font-size:.96rem;line-height:1.8;
  color:var(--realm-muted);margin:0}

/* inc/tb-gallery.php — the masonry component's own chrome. Its item/grid/chip class
   names already match the mockup; these are the ones the mockup has no rule for. */
body.realm-obsidian-vow .tbg{padding:120px 0;background:transparent}
@media(max-width:900px){body.realm-obsidian-vow .tbg{padding:80px 0}}
body.realm-obsidian-vow .tbg__container{max-width:1200px;margin:0 auto;padding:0 40px}
@media(max-width:640px){body.realm-obsidian-vow .tbg__container{padding:0 22px}}
body.realm-obsidian-vow .tbg__head{text-align:center}
body.realm-obsidian-vow .tbg__ornament{font-family:var(--tb-font-body);font-size:11px;
  letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--realm-taupe);margin-bottom:18px}
body.realm-obsidian-vow .tbg__ornament::after{content:'';display:block;width:34px;height:1px;
  background:var(--wine-rule);margin:14px auto 0}
body.realm-obsidian-vow .tbg__head h2{font-family:var(--tb-font-display);font-weight:400;line-height:.98;
  font-size:clamp(2rem,4.2vw,3.1rem);background:var(--gunmetal-grad-soft);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
body.realm-obsidian-vow .tbg__head h2 em{font-style:normal;color:transparent}
body.realm-obsidian-vow .tbg__head p{color:var(--realm-muted);font-size:1.02rem;line-height:1.85;
  max-width:560px;margin:16px auto 0}
body.realm-obsidian-vow .tbg__media{display:block}
body.realm-obsidian-vow .tbg__cap .name{display:block;color:var(--realm-taupe)}
body.realm-obsidian-vow .tbg__cap .fmt{display:block;color:var(--realm-taupe);opacity:.7}
body.realm-obsidian-vow .tbg__count{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--realm-taupe)}
body.realm-obsidian-vow .tbg__btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:16px 28px;margin-top:18px;border:1px solid var(--frame);
  color:var(--realm-muted);background:transparent;font-family:var(--tb-font-body);font-size:12px;
  letter-spacing:var(--tr-mid);text-transform:uppercase}
body.realm-obsidian-vow .tbg__btn:hover{border-color:var(--realm-cream);color:var(--realm-cream)}

/* The realm switcher on the suite templates renders each sibling realm's card from
   its WC featured image; flatten it to the OV vocabulary (no radius, no shadow). */
body.realm-obsidian-vow .tbsl-themes-grid a,
body.realm-obsidian-vow .tbsl-theme-card,
body.realm-obsidian-vow .tbsl-piece,
body.realm-obsidian-vow .tbsl-value-card,
body.realm-obsidian-vow .tbc-suite-card{border-radius:0;box-shadow:none}

/* MC/DR leftovers that must never render on this realm. Belt and braces beside the
   template-level removal: fireflies belong to Enchanted Forest, and the vestigial
   "try before you buy" demo band is a demo promise in a done-for-you shop. */
body.realm-obsidian-vow .fireflies,
body.realm-obsidian-vow .firefly,
body.realm-obsidian-vow .tbsl-fireflies,
body.realm-obsidian-vow .tbsl-demo-band{display:none!important}

/* The global sticky bar (inc/sticky-cta.php) renders on collection pages for
   DESKTOP by design (v2.7.60); this page has its own mobile bar, so hide the
   global one below 900px exactly as sticky-cta.css does for EF and DR. */
@media (max-width: 900px) {
  body.realm-obsidian-vow.page-template-template-collection-obsidian-vow .tb-sticky-cta{
    display:none!important;pointer-events:none}
}

/* ── Suite-template variables and buttons the mockups did not have to declare ──
   The shared suite templates read --realm-font-display (.tbsl-display, .tbsl-price,
   .tbsl-step__n …) which is defined ONLY in the six hub templates, never for a suite
   child page — so it is undefined on every realm's suite page and those elements
   inherit whatever body is set to. Map it onto the realm display face here rather
   than leave a headline resolving by accident. */
body.realm-obsidian-vow{ --realm-font-display: var(--tb-font-display); --realm-border: var(--realm-border-metallic); }

/* .tbsl-btn is the suite templates' own button. Its primary variant FILLS with
   var(--realm-metallic); on this realm the metallic role is Pewter, so a filled
   button would be a pale slab. SPEC §3 rule 5: hairline outlines, never fills. */
body.realm-obsidian-vow .tbsl-btn{font-family:var(--tb-font-body);font-weight:400;font-size:12px;
  letter-spacing:var(--tr-mid);text-transform:uppercase;padding:18px 30px;min-height:48px;
  border:1px solid var(--realm-cream);background:transparent;color:var(--realm-cream);border-radius:0}
body.realm-obsidian-vow .tbsl-btn--primary{background:transparent;color:var(--realm-cream);border-color:var(--realm-cream)}
body.realm-obsidian-vow .tbsl-btn--primary:hover{background:transparent;border-color:var(--wine-word);color:var(--wine-word)}
body.realm-obsidian-vow .tbsl-btn--ghost{background:transparent;border-color:var(--frame);color:var(--realm-muted)}
body.realm-obsidian-vow .tbsl-btn--ghost:hover{background:transparent;border-color:var(--realm-cream);color:var(--realm-cream)}
body.realm-obsidian-vow .tbsl-btn:focus-visible{outline:2px solid var(--realm-cream);outline-offset:3px}

/* .tbsl-ornament draws a metallic rule either side of its label on every realm.
   One cut of wine, 1px, is this realm's whole ornament vocabulary. */
body.realm-obsidian-vow .tbsl-ornament{font-family:var(--tb-font-body);color:var(--realm-taupe);
  letter-spacing:var(--tr-wide);font-size:11px}
body.realm-obsidian-vow .tbsl-ornament::before,
body.realm-obsidian-vow .tbsl-ornament::after{background:var(--wine-rule);opacity:1;width:34px}

/* Suite hero: STACKED on mobile (Caelin, 2026-08-29 — hero brightness varies and text
   over photography became unreadable). The selector must be the COMPOUND one: a later
   `@media(max-width:900px) .tbsl-section{padding:80px 0}` beats a single-class rule. */
@media (max-width: 900px) {
  body.realm-obsidian-vow .tbsl-section.tbsl-hero{flex-direction:column;padding:0;min-height:0}
  body.realm-obsidian-vow .tbsl-hero__img{position:relative;height:50vw;object-position:center 30%}
  body.realm-obsidian-vow .tbsl-hero__scrim{display:none}
  body.realm-obsidian-vow .tbsl-hero::after{content:'';position:absolute;left:0;right:0;top:0;height:50vw;
    background:linear-gradient(180deg,transparent 30%,var(--realm-bg) 100%);pointer-events:none}
  body.realm-obsidian-vow .tbsl-hero__left{order:2;width:100%;padding:28px 22px 40px;background:var(--realm-bg)}
  body.realm-obsidian-vow .tbsl-hero__frame{display:none}
  body.realm-obsidian-vow .tbsl-hero__breadcrumb,
  body.realm-obsidian-vow .tbsl-hero__tier{position:static;padding:0;border:0;background:transparent;backdrop-filter:none}
}

/* ── Two shared rules that would put BRAND GOLD on this realm ─────────────── */

/* style.css:225 sets `em, i { color: var(--tb-gold) }` GLOBALLY, at (0,0,0,1).
   Every emphasised word in a suite headline — "Digital Basic Suite.", "Luxury,",
   "One Restrained Register." — therefore renders #D1B28C on an Obsidian Vow page.
   Brand gold is Enchanted Forest's and must never appear on another realm. */
body.realm-obsidian-vow em,
body.realm-obsidian-vow i{color:inherit}
body.realm-obsidian-vow .tbsl-display em,
body.realm-obsidian-vow .tbsl-hero h1 em,
body.realm-obsidian-vow .tbsl-final__inner h2 em{color:var(--realm-cream);font-style:italic}
body.realm-obsidian-vow .tb-em{color:var(--realm-cream);font-style:italic}

/* mu-plugins/tb-dfy-addons.php appends an inline style="…color:#D1B28C" note to a
   founders product's get_price_html(). Belt and braces: if it ever renders here it
   is pewter, not gold. (The note's WORDING is a separate, reported defect.) */
body.realm-obsidian-vow .tb-founders-note{color:var(--realm-taupe)!important}
body.realm-obsidian-vow .tb-founders-after{color:var(--realm-muted)!important}

/* ── Paragraph roles the shared suite templates paint with --realm-taupe ────
   On this realm --realm-taupe is the EYEBROW/fine-print token (#6f7178, 4.06:1) and
   SPEC §2 says explicitly: never a paragraph. These selectors are the places the
   shared templates use it for running copy; measured 3.93–4.16:1 before this block,
   6.14–6.49:1 after (--realm-muted #8f9298). */
body.realm-obsidian-vow .tbsl-hero__sub,
body.realm-obsidian-vow .tbsl-step__blurb,
body.realm-obsidian-vow .tbsl-value-row__label,
body.realm-obsidian-vow .tbsl-pieces-head p,
body.realm-obsidian-vow .tbsl-how-head p,
body.realm-obsidian-vow .tbsl-value-head p,
body.realm-obsidian-vow .tbsl-themes-head p,
body.realm-obsidian-vow .tbsl-final__inner p,
body.realm-obsidian-vow .tbsl-pieces-upsell,
body.realm-obsidian-vow .tbsl-itemline,
body.realm-obsidian-vow .tbsl-np-card p,
body.realm-obsidian-vow .tbsl-website-feature p{color:var(--realm-muted)}
body.realm-obsidian-vow .tbsl-value-row__note{color:var(--realm-taupe)}

/* Realm-switcher cards: the shared rule borders them with the house gold token. */
body.realm-obsidian-vow .tbsl-theme-card,
body.realm-obsidian-vow .tbsl-theme-card__img,
body.realm-obsidian-vow .tbsl-theme-card__body,
body.realm-obsidian-vow .tbsl-hero__frame,
body.realm-obsidian-vow .tbsl-step,
body.realm-obsidian-vow .tbsl-np-card,
body.realm-obsidian-vow .tbsl-value-row,
body.realm-obsidian-vow .tbsl-reassure{border-color:var(--hairline)}
body.realm-obsidian-vow .tbsl-theme-card__name{color:var(--realm-cream)}
body.realm-obsidian-vow .tbsl-theme-card__status,
body.realm-obsidian-vow .tbsl-step__meta{color:var(--realm-taupe)}

/* Two more shared components that inherit the house gold as TEXT colour on a suite
   page (measured with getComputedStyle, not guessed): the realm-switcher cards and
   the Digital Deluxe website-feature browser frame. */
body.realm-obsidian-vow .tbsl-theme-card,
body.realm-obsidian-vow .tbsl-theme-card__body,
body.realm-obsidian-vow .tbsl-wf-mobile-browser,
body.realm-obsidian-vow .tbsl-wf-mobile-browser__chrome,
body.realm-obsidian-vow .tbsl-wf-browser,
body.realm-obsidian-vow .tbsl-wf-browser__chrome{color:var(--realm-muted)}
body.realm-obsidian-vow .tbsl-wf-mobile-browser__chrome,
body.realm-obsidian-vow .tbsl-wf-browser__chrome{border-color:var(--hairline)}


/* ═══════════════════════════════════════════════════════════════════════════
   B4 — Caelin review fixes, 2026-09-09. Appended last so it wins inside the
   body.realm-obsidian-vow scope without touching any other realm.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (g) HERO SIDE — the type column was rendering in the RIGHT half.
   Cause: .tbsl-hero is a flex ROW and the template emits an empty
   <div class="tbsl-hero__frame"></div> as its first in-flow child. That empty
   div took the leading track and pushed .tbsl-hero__left to the right, on top
   of the photograph's subject, leaving the left half empty black. Measured at
   1280: .tbsl-hero__left x=680 w=600. The OV rule is type LEFT, photo weighted
   right (the demo hero), so the hero becomes a bottom-aligned COLUMN and the
   breadcrumb + type share one centred 1200px container. */
body.realm-obsidian-vow .tbsl-hero{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch}
body.realm-obsidian-vow .tbsl-hero__frame{display:none}
body.realm-obsidian-vow .tbsl-hero__breadcrumb,
body.realm-obsidian-vow .tbsl-hero__left{position:relative;z-index:2;width:100%;max-width:1200px;
  margin-left:auto;margin-right:auto;box-sizing:border-box}
body.realm-obsidian-vow .tbsl-hero__left{max-width:1200px}
/* 3.9c, 2026-09-10 — `padding-left:40px;padding-right:40px` and `padding-bottom:92px`
   were REMOVED from the two rules above. Written unconditionally, they beat the
   earlier @media(max-width:900px) `padding:28px 22px 40px` and put the Digital Basic
   and Essentials headlines at x=40 on a phone, where the Midnight Celestial control
   (measured on LIVE) sits at x=24. At >=901px they were already dead: 3.9b's
   @media(min-width:901px) sets `padding:80px 60px 64px 80px` on .tbsl-hero__left and
   `padding:0` on the breadcrumb. The <=900 gutter is set in the 3.9c block below. */
body.realm-obsidian-vow .tbsl-hero__left > *{max-width:600px}
body.realm-obsidian-vow .tbsl-hero__sub{max-width:520px}
/* Keep the subject in the right half wherever the source is wide enough for the
   crop to bite. (These heroes are 4:5 portraits in a landscape box, so cover
   scales to width and only the vertical value can move anything — stated
   rather than implied, so the next reader does not think this is doing more
   than it is.) */
body.realm-obsidian-vow .tbsl-hero__img{object-position:68% 30%}

/* (i) SMALL-CAPS LINES — Italiana at 10–10.5px tracked caps in taupe was the
   least legible type on the page. Jost 300, ≥12px, muted pewter. Both the
   collection LP (.tb-*) and the suite pages (.tbsl-*). */
body.realm-obsidian-vow .tbsl-itemline,
body.realm-obsidian-vow .tbsl-reassure,
body.realm-obsidian-vow .tbsl-step__meta,
body.realm-obsidian-vow .tb-step__meta{font-family:var(--tb-font-body);font-weight:300;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--realm-muted)}
body.realm-obsidian-vow .tbsl-reassure b{color:var(--wine-word);font-weight:400}

/* (f) "THE MATH" FIGURES — Italiana 18px in taupe (#6f7178) against a
   Jost label; the numbers were the hardest thing in the table to read.
   Jost 400, tabular so the columns line up, ≥15px, pewter. */
body.realm-obsidian-vow .tb-value-row__price,
body.realm-obsidian-vow .tbsl-value-row__price{font-family:var(--tb-font-body);font-weight:400;
  font-size:16px;line-height:1.35;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  color:#c9cacd;white-space:nowrap}
body.realm-obsidian-vow .tb-value-row--suite .tb-value-row__price,
body.realm-obsidian-vow .tbsl-value-row--suite .tbsl-value-row__price{color:var(--realm-cream);font-weight:500}

/* (d2) GALLERY CAPTIONS + THE "MOCKUP" CHIP — italic Italiana in taupe over a
   tinted plaque. Pewter and Jost, flat plaque, hairline chip. */
body.realm-obsidian-vow .tbg__cap{background:none;background-image:none;border-top-color:var(--hairline)}
body.realm-obsidian-vow .tbg__cap .name{font-family:var(--tb-font-body);font-style:normal;font-weight:300;
  font-size:12px;line-height:1.45;letter-spacing:.12em;text-transform:uppercase;color:var(--realm-muted)}
body.realm-obsidian-vow .tbg__cap .fmt{font-family:var(--tb-font-body);font-style:normal;font-weight:400;
  font-size:10px;letter-spacing:.16em;color:var(--realm-muted);opacity:1;
  border-color:var(--hairline);background:none}
body.realm-obsidian-vow .tbg__count{font-family:var(--tb-font-body);font-weight:300;font-size:12px;
  letter-spacing:.16em;color:var(--realm-muted)}

/* (j) HOW-IT-WORKS GRID — the four-step grid was 3-across, orphaning step IV on
   a second row. 4-across from 1024, 2x2 at 768, stacked below. The card
   hairline is already --hairline (#24262c); pinned here so a later shared rule
   cannot put gold back on it. */
@media (min-width:1024px){
  body.realm-obsidian-vow .tbsl-how-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:768px) and (max-width:1023px){
  body.realm-obsidian-vow .tbsl-how-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  body.realm-obsidian-vow .tbsl-how-grid{grid-template-columns:minmax(0,1fr)}
}
body.realm-obsidian-vow .tbsl-step,
body.realm-obsidian-vow .tb-step{border-color:var(--hairline)}
body.realm-obsidian-vow .tbsl-step{border-top-color:var(--hairline)}

/* (a) FAQ ANSWER HEIGHT — see inc/faq-shortcode.php. Belt and braces inside the
   realm: nothing may cap the height of an open answer. */
body.realm-obsidian-vow .tb-faq-list .tb-faq-answer,
body.realm-obsidian-vow .tb-faq-list .tb-faq-item.active .tb-faq-answer{max-height:none;overflow:visible}

/* (c) Three coming-soon tease cards (was one). Same card treatment, three up on
   desktop, two at tablet, stacked on mobile. No price, no piece count. */
body.realm-obsidian-vow .tbc-suite-coming-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;margin-top:34px}
@media (max-width:1023px){
  body.realm-obsidian-vow .tbc-suite-coming-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  body.realm-obsidian-vow .tbc-suite-coming-grid{grid-template-columns:minmax(0,1fr)}
}
body.realm-obsidian-vow .tbc-suite-coming-grid .tbc-suite-coming{margin:0;height:100%;
  display:flex;flex-direction:column;justify-content:space-between;gap:18px}

/* (k) Device frames on the Digital Deluxe wedding-website section — the same
   treatment the OV wedding-website landing page uses for its dashboard
   walkthrough, so the two pages read as one product. */
body.realm-obsidian-vow .tbsl-wf-stage{max-width:1200px;margin:0 auto;padding:72px 40px 96px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:stretch}
@media (max-width:1023px){
  body.realm-obsidian-vow .tbsl-wf-stage{grid-template-columns:minmax(0,1fr);padding:56px 22px 64px;gap:22px}
}
body.realm-obsidian-vow .tbsl-device{margin:0;border:1px solid var(--hairline);background:var(--realm-secondary);
  display:flex;flex-direction:column}
body.realm-obsidian-vow .tbsl-device__chrome{display:flex;align-items:center;gap:12px;
  padding:9px 12px;border-bottom:1px solid var(--hairline);background:var(--realm-primary)}
body.realm-obsidian-vow .tbsl-device__dots{display:inline-flex;gap:5px;flex:0 0 auto}
body.realm-obsidian-vow .tbsl-device__dots i{width:7px;height:7px;border-radius:50%;background:var(--frame);display:block}
body.realm-obsidian-vow .tbsl-device__url{font-family:var(--tb-font-body);font-weight:300;font-size:11px;
  letter-spacing:.08em;color:var(--realm-taupe);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.realm-obsidian-vow .tbsl-device__screen{background:#000;line-height:0;position:relative;
  aspect-ratio:16/10;overflow:hidden}
body.realm-obsidian-vow .tbsl-device__screen video{position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover;object-position:top center}
/* line-height is SET here, not inherited, so the two-line minimum below is a
   number this file controls rather than one the browser's "normal" decides. */
body.realm-obsidian-vow .tbsl-device__cap{font-family:var(--tb-font-body);font-weight:300;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--realm-muted);
  padding:13px 14px;border-top:1px solid var(--hairline);
  line-height:1.5;min-height:calc(3em + 28px)}

/* B4 follow-up — measured at 375: SPAN.fmt inside .tbg__cap ran to x=383 on a
   375px viewport and took document.scrollWidth to 383 on the Digital Basic page.
   Cause: the caption plaque is a nowrap flex row and the chip is flex:0 0 auto,
   so a longer label ("INVITATION") simply pushed past the edge — Jost is wider
   than the Italiana it replaced. Let the plaque wrap and the name shrink. */
body.realm-obsidian-vow .tbg__cap{flex-wrap:wrap}
body.realm-obsidian-vow .tbg__cap .name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
body.realm-obsidian-vow .tbg__cap .fmt{flex:0 1 auto;white-space:normal;max-width:100%}

/* B4 follow-up 2 — the waitlist email inputs on the coming-soon cards rendered
   with Astra's light default: a pale rounded box on a smoke-black card. The
   existing OV rule is scoped to `.tb-ov-lp`, and these cards sit outside that
   wrapper, so they never got it. Same treatment, realm-scoped instead. House
   rule: no white backgrounds. */
body.realm-obsidian-vow .tbc-interest-form{display:flex;align-items:stretch;border:1px solid var(--hairline);
  background:var(--realm-primary)}
body.realm-obsidian-vow .tbc-interest-input{flex:1 1 auto;background:transparent;border:0;border-radius:0;
  color:var(--realm-cream);font-family:var(--tb-font-body);font-weight:300;font-size:13px;padding:12px 14px;
  box-shadow:none;-webkit-appearance:none;appearance:none}
body.realm-obsidian-vow .tbc-interest-input::placeholder{color:var(--realm-taupe)}
body.realm-obsidian-vow .tbc-interest-input:focus,
body.realm-obsidian-vow .tbc-interest-input:focus-visible{outline:2px solid var(--realm-cream);outline-offset:-2px;
  background:transparent;border:0;box-shadow:none}
body.realm-obsidian-vow .tbc-interest-submit{flex:0 0 auto;background:transparent;border:0;border-left:1px solid var(--hairline);
  color:var(--realm-cream);font-family:var(--tb-font-body);font-weight:400;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;padding:12px 16px;cursor:pointer;border-radius:0}
body.realm-obsidian-vow .tbc-interest-submit:hover{background:var(--realm-secondary)}
body.realm-obsidian-vow .tbc-interest-submit:focus{background:transparent}
body.realm-obsidian-vow .tbc-interest-submit:focus-visible{outline:2px solid var(--realm-cream);outline-offset:-2px}
body.realm-obsidian-vow .tbc-interest-meta{font-family:var(--tb-font-body);font-weight:300;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--realm-taupe);margin-top:10px}

/* B4 follow-up 3 — measured, not guessed: getComputedStyle on the waitlist input
   still returned background #131c1f and border-radius 12px, i.e. a house form
   rule with higher specificity than the single-class override above was winning.
   Matched element+class on both the form and the input so this one wins on
   specificity rather than on !important. Radius 0: the OV kill list bans
   rounded corners. */
body.realm-obsidian-vow form.tbc-interest-form{border-radius:0;background:var(--realm-primary);
  border:1px solid var(--hairline);overflow:hidden}
body.realm-obsidian-vow form.tbc-interest-form input.tbc-interest-input{background:transparent;
  border:0;border-radius:0;color:var(--realm-cream);box-shadow:none}
body.realm-obsidian-vow form.tbc-interest-form input.tbc-interest-input:focus{background:transparent;
  border:0;box-shadow:none}
body.realm-obsidian-vow form.tbc-interest-form button.tbc-interest-submit{border-radius:0}

/* B4 follow-up 4 — found by walking document.styleSheets for every rule that
   matches the element (not by guessing): child style.css sets
   `background: var(--tb-surface) !important; border: … !important;
   border-radius: … !important` on every text-like input. --tb-surface is the
   house forest tint #131c1f, which is why an Obsidian Vow card carried a
   green-tinted, 12px-rounded field. !important is the only thing that beats
   !important, so it is used here and nowhere else, on three properties, scoped
   to this realm's waitlist field alone. */
body.realm-obsidian-vow form.tbc-interest-form input.tbc-interest-input{
  background:transparent !important;border:0 !important;border-radius:0 !important}
body.realm-obsidian-vow form.tbc-interest-form input.tbc-interest-input:focus{
  background:transparent !important;border:0 !important;border-radius:0 !important}


/* ═══════════════════════════════════════════════════════════════════════════
   3.9b — HERO COLUMN, SECOND PASS (2026-09-10)
   Caelin, on the Digital Deluxe page at 1595: "the heros on desktop are not
   formatted properly the text is sitting too far over to the middle it looks
   odd."

   The (g) note above got the SYMPTOM right and the CULPRIT wrong. The suite
   templates declare `.tbsl-hero__frame { position:absolute; inset:20px }` —
   a decorative border that is never in flow, on any realm. What actually
   pushed `.tbsl-hero__left` out of the left gutter was THIS file, ~line 301:
   the collection-hero pattern (where `.tbc-hero-frame` really is the content
   wrapper) was pasted onto the suite hero, turning `__frame` into an in-flow
   `width:100%` div. Turning the hero into a centred 1200px COLUMN then traded
   a right-half column for a middle-of-the-page one — at 1595 the headline sat
   at x=237 (Basic/Essentials) / x=277 (Deluxe) with an empty black gutter to
   its left, which is what Caelin saw.

   The Midnight Celestial control, measured on LIVE (getBoundingClientRect):
     1280/1440/1595/1920 → .tbsl-hero__left x=0, w = 50% of the viewport,
     max-width:none, padding-left 80px; h1 x=80; breadcrumb x=64 (absolute);
     .tbsl-hero__frame x=20 (absolute, so it takes no flex track).
     Collection LP → .tbc-hero-inner x=64 w=720 at every desktop width.

   Everything below is scoped to min-width:901px. The stacked mobile hero
   (the max-width:900px block above) is deliberately left byte-for-byte alone.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {

  /* Back to the control's flex ROW, bottom-aligned, leading edge first.
     `justify-content` matters: (g) left it at flex-end, which in a row would
     throw the column to the right-hand edge. */
  body.realm-obsidian-vow .tbsl-hero{
    display:flex;flex-direction:row;align-items:flex-end;justify-content:flex-start}

  /* Out of the flex flow, exactly as the control's absolutely-positioned
     frame is. Hidden rather than restored to inset:20px because this realm
     has never shown the gold border and the kill list bans that ornament. */
  body.realm-obsidian-vow .tbsl-hero__frame{display:none}

  /* The control's own geometry, property for property. */
  body.realm-obsidian-vow .tbsl-hero__left{
    position:relative;z-index:2;width:50%;max-width:none;flex-shrink:0;
    display:flex;flex-direction:column;justify-content:center;
    margin-left:0;margin-right:0;
    padding:80px 60px 64px 80px;box-sizing:border-box}
  body.realm-obsidian-vow .tbsl-hero__left > *{max-width:none}

  /* Breadcrumb back to the control's absolute placement — x=64, i.e. the same
     left gutter as the headline's 80px, not a second centred container. */
  body.realm-obsidian-vow .tbsl-hero__breadcrumb{
    position:absolute;top:36px;left:64px;right:auto;bottom:auto;z-index:5;
    width:auto;max-width:none;margin:0;padding:0}

  /* Measure for the italic sub-line, inside the 658px content box. */
  body.realm-obsidian-vow .tbsl-hero__sub{max-width:520px}

  /* Collection LP. Here `.tbc-hero-frame` genuinely IS the content wrapper
     (the OV template nests the crumb and the inner inside it), so the centred
     1200px box is what pushed the type to x=237 at 1595 instead of 64. */
  body.realm-obsidian-vow .tb-ov-lp .tbc-hero-frame{max-width:none;margin:0;padding:0 64px 96px}
  body.realm-obsidian-vow .tb-ov-lp .tbc-hero-inner{max-width:720px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   3.9c — MOBILE HERO, Digital Deluxe overlap + the 3.9 gutter leak
   staging2, 2026-09-10. Appended last; scoped to <=900px only, so 3.9b's
   @media(min-width:901px) desktop column is untouched by construction.
   ═══════════════════════════════════════════════════════════════════════════

   Caelin, on a phone: "the mobile DD page the hero is all wonky with text
   overlaps." Digital Deluxe only, <=767px only.

   ROOT CAUSE. template-suite-digital-deluxe.php carries a 2026-09-03
   @media(max-width:767px) block that lifts the eyebrow and the H1 OUT OF FLOW
   so they lie over a 1:1 photograph:

       .tbsl-hero__left { position:static }                 <- (0,1,0)
       .tbsl-hero .tbsl-eyebrow { position:absolute; top:18px; left:24px }
       .tbsl-hero h1            { position:absolute; top:60px; left:24px }

   That design needs `.tbsl-hero__left` to be UNPOSITIONED, so the two absolute
   boxes resolve against the SECTION (= the image box). On this realm it is not:
   3.9's `body.realm-obsidian-vow .tbsl-hero__left{position:relative}` is (0,2,0)
   and wins, so the copy column becomes their containing block and they land on
   top of the intro paragraph instead. Measured on the pre-fix build @375:
   eyebrow x=24 y=333, sub x=40 y=343, h1 x=24 y=393 h=67.1 — two intersecting
   text rects, eyebrow x sub 295x23 and h1 x sub 168.6x67.1. Same at 390 and 430;
   clean at 768 and 900 (the template block ends at 767).

   Obsidian Vow's mobile hero is not that design: the photograph is a band and
   the copy sits below it on the clean realm background (Caelin, 2026-08-29 —
   text over this realm's photography was unreadable). Only Digital Deluxe has
   the overlay block; Digital Basic and Essentials never had it, which is why
   only this one page was wonky. So put both back in flow, with the same margins
   Digital Basic and Essentials already render, and give all three the control's
   24px gutter. */
@media (max-width: 900px) {
  body.realm-obsidian-vow .tbsl-hero .tbsl-eyebrow,
  body.realm-obsidian-vow .tbsl-hero h1{
    position:static;top:auto;right:auto;bottom:auto;left:auto;z-index:auto;
    text-shadow:none}
  /* max-width is deliberately NOT reset here: 3.9's `.tbsl-hero__left > *
     {max-width:600px}` is (0,2,0) and already outranks the template's
     `max-width:62%` (0,1,1), so the cap is 600px on all three tiers either
     way — declaring `none` would have widened the 768-900 headline from
     600px to 720px, which nobody asked for. */
  /* the template's overlay block zeroes both margins (the eyebrow with
     !important, over the template's own inline style="margin-bottom:22px"),
     so the rhythm has to be restated, not merely un-positioned */
  body.realm-obsidian-vow .tbsl-hero .tbsl-eyebrow{margin:0 0 22px!important}
  body.realm-obsidian-vow .tbsl-hero h1{margin:18px 0 22px}
  /* The gutter. 24px = the Midnight Celestial control, measured on LIVE at
     375/390/430 on all three tiers. The compound selector is deliberate: the
     Digital Deluxe template carries
       @media(min-width:768px){ .tbsl-section.tbsl-hero .tbsl-hero__left{
         padding:56px 60px 48px 80px } }
     at (0,3,0) — an 80px gutter written for the desktop ROW layout, before this
     realm moved its stack breakpoint to 900px (Caelin, 2026-08-29). In the 768–900
     band Obsidian Vow is STACKED, so that 80px landed on a full-width column and
     left Digital Deluxe disagreeing with Digital Basic and Essentials by 56px.
     (0,4,0) settles it: one gutter for the whole stacked band, on all three. */
  body.realm-obsidian-vow .tbsl-hero__left,
  body.realm-obsidian-vow .tbsl-section.tbsl-hero .tbsl-hero__left{padding:28px 24px 44px}
  /* the breadcrumb (visible 768-900; the DD template hides it below 767) shared
     3.9's deleted 40px gutter and would otherwise start at x=0 — the earlier
     @media(max-width:900px) rule zeroes its padding because it used to sit
     inside .tbsl-hero__frame, which this realm has hidden since 3.9 */
  body.realm-obsidian-vow .tbsl-hero__breadcrumb{padding-left:24px;padding-right:24px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   C5a — Day-Of Suite, Reception Deluxe, Grand Wedding Suite (staging2, 2026-09-10)
   Page body: templates/partials/ov-suite-longform.php (the obsidian-vow branch of
   templates/template-suite-{enchanted-signs,reception-deluxe,grand-wedding-suite}.php).
   Appended last so it wins inside body.realm-obsidian-vow without touching any
   other realm. Every selector below is scoped to that body class.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Brand gold, retired at the token level (plan C3 ruling 2). tokens.css defines
   these once at :root as brand gold #D1B28C and never re-tokenizes them per realm,
   so every shared component that reads them (the three suite templates' piece
   cards, hero frame, steps, value rows, reviews, soon-cards, sticky thumb and the
   Prints of Love block; the footer, canonical nav, mobile menu and mini cart
   chrome) painted brand gold on this realm. Redefined here to the OV hairline and
   pewter vocabulary, so no component has to be forked. */
body.realm-obsidian-vow{
  --tb-border-gold:var(--hairline);
  --tb-border-strong:var(--frame);
  --tb-gold:var(--realm-metallic);
  --tb-gold-bright:var(--realm-metallic-bright);
}

/* 2. Page-body typography for the one section the 2026-09-09 list did not cover. */
body.realm-obsidian-vow .tbsl-pol{color:var(--realm-muted);font-family:var(--tb-font-body);
  font-weight:300;font-size:16px;line-height:1.75;background:var(--realm-bg)}

/* 3. Hero badge (Reception Deluxe) and free pill (Grand Wedding Suite): hairline, one
   cut of wine, never a filled pewter slab, never a rounded pill. */
body.realm-obsidian-vow .tb-ov-hero .tbsl-tier-badge,
body.realm-obsidian-vow .tb-ov-hero .tbsl-free-pill{display:inline-block;align-self:flex-start;background:transparent;
  color:var(--realm-cream);border:1px solid var(--frame);border-left:2px solid var(--wine-rule);border-radius:0;
  font-family:var(--tb-font-body);font-weight:400;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  padding:8px 13px;margin:0 0 18px;width:auto;max-width:100%}
/* The reassurance line's tick: a 10px rule in wine, drawn in CSS so no dash glyph
   is ever printed (the 09-09 pages print an em dash here). */
body.realm-obsidian-vow .tb-ov-tick{position:relative;padding-left:20px}
body.realm-obsidian-vow .tb-ov-tick::before{content:'';position:absolute;left:0;top:50%;width:10px;height:1px;background:var(--wine-rule)}
/* Hero crops (plan ruling 6). Day-Of is a true landscape plate; the Grand Wedding
   Suite 4:5 plate is cropped to the rose, which sits in the right half, with the
   smoke on the left for the type (35%, not the spec's 82%, which was the rings). */
body.realm-obsidian-vow .tb-ov-hero--dayof .tbsl-hero__img{object-position:center 42%}
body.realm-obsidian-vow .tb-ov-hero--gws .tbsl-hero__img{object-position:center 35%}
body.realm-obsidian-vow .tb-ov-final--gws .tbsl-final__bg img{object-position:center 78%}

/* 4. What's Inside. One grid per page with explicit columns, zero orphans:
   Day-Of 13 pieces = 16 cells (three double-width cards) = 4 x 4 at >=1100,
   2 x 8 at 768-1099; Reception Deluxe 9 = 3 x 3 from 768; Grand Wedding Suite
   12 = 4 x 3 at >=1100, 2 x 6 at 768-1099. One column below 768. */
body.realm-obsidian-vow .tbsl-pieces-grid.tb-ov-grid{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:48px}
@media (min-width:768px){
  body.realm-obsidian-vow .tbsl-pieces-grid.tb-ov-grid--dayof,
  body.realm-obsidian-vow .tbsl-pieces-grid.tb-ov-grid--gws{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.realm-obsidian-vow .tbsl-pieces-grid.tb-ov-grid--rd{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.realm-obsidian-vow .tb-ov-grid .tb-ov-card--pair{grid-column:span 2}
}
@media (min-width:1100px){
  body.realm-obsidian-vow .tbsl-pieces-grid.tb-ov-grid--dayof,
  body.realm-obsidian-vow .tbsl-pieces-grid.tb-ov-grid--gws{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:767px){
  body.realm-obsidian-vow .tb-ov-grid > .tbsl-piece{grid-column:auto!important}
}
body.realm-obsidian-vow .tb-ov-card{display:flex;flex-direction:column;min-width:0}
/* Image box: one 4:5 box for every piece, the render contained (never cropped) on
   the renders' own ground #17161b, so a tall menu and a wide place card both show
   whole and every image box in a row shares one top and one height. */
body.realm-obsidian-vow .tb-ov-mock{position:relative;display:block;margin:0;aspect-ratio:4/5;background:#17161b;overflow:hidden}
body.realm-obsidian-vow .tb-ov-mock img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:contain;object-position:center;transform:none}
/* Double-width card: two boxes, inner gap = grid gap + the card's two 1px borders,
   so each box is exactly as wide (and so exactly as tall) as a single card's box. */
body.realm-obsidian-vow .tb-ov-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;background:var(--realm-bg)}
@media (max-width:767px){ body.realm-obsidian-vow .tb-ov-pair{column-gap:10px} }
body.realm-obsidian-vow .tb-ov-mock .tb-ov-free{top:auto;bottom:12px;left:12px}
body.realm-obsidian-vow .tb-ov-card .tbsl-piece__body{flex:1 1 auto}
body.realm-obsidian-vow .tb-ov-card__link{margin:14px 0 0}
body.realm-obsidian-vow .tb-ov-card__link a{font-family:var(--tb-font-body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--realm-cream);border-bottom:1px solid var(--wine-rule);padding-bottom:3px}
body.realm-obsidian-vow .tb-ov-card__link a:hover{color:var(--wine-word)}
/* Tier strips + divider (Reception Deluxe, Grand Wedding Suite). */
body.realm-obsidian-vow .tbsl-essentials-strip,
body.realm-obsidian-vow .tbsl-tier-strip{border:1px solid var(--hairline);background:var(--realm-secondary)}
body.realm-obsidian-vow .tbsl-essentials-strip__label,
body.realm-obsidian-vow .tbsl-tier-strip__label{font-family:var(--tb-font-body);font-weight:400;font-size:11px;letter-spacing:.2em;color:var(--realm-cream)}
body.realm-obsidian-vow .tbsl-essentials-strip__items,
body.realm-obsidian-vow .tbsl-tier-strip__items{font-family:var(--tb-font-body);font-style:normal;font-size:.94rem;color:var(--realm-muted)}
body.realm-obsidian-vow .tbsl-section-divider{font-family:var(--tb-font-body);color:var(--realm-taupe);letter-spacing:var(--tr-wide);font-size:11px}
body.realm-obsidian-vow .tbsl-section-divider::before,
body.realm-obsidian-vow .tbsl-section-divider::after{background:var(--wine-rule);opacity:1;width:34px}
/* Clear space above the upsell CTA row that follows the grid. Scoped to the C5a
   grid with `+` so the Essentials page's own upsell row is not moved (a first
   draft without the scope shifted it 12px; caught by the scalar diff). */
body.realm-obsidian-vow .tb-ov-grid + .tbsl-pieces-upsell{margin-top:56px;border:1px solid var(--hairline);font-style:normal}

/* 5. How It Works: three steps, three across from 768 (the realm's four-across rule
   was written for the four-step digital pages and would leave a gap here). */
@media (min-width:768px){
  body.realm-obsidian-vow .tbsl-how-grid.tb-ov-how3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 6. Prints of Love band (Day-Of). */
body.realm-obsidian-vow .tbsl-pol__img-area{border-color:var(--hairline);background:#000}
body.realm-obsidian-vow .tbsl-pol__body p{color:var(--realm-muted);font-style:normal;font-family:var(--tb-font-body);font-size:16px;line-height:1.8}
body.realm-obsidian-vow .tbsl-pol__code{font-family:var(--tb-font-body);font-weight:400;font-size:11px;letter-spacing:.18em;
  color:var(--realm-cream);border:1px dashed var(--frame);background:transparent}
body.realm-obsidian-vow .tbsl-pol__sizes span{font-family:var(--tb-font-body);color:var(--realm-taupe);border-color:var(--hairline)}

/* 7. Sibling-realm row: the Essentials template's small-card component (nine rules,
   copied from template-suite-essentials.php), scoped here because these three
   templates never shipped it. Colours and borders come from the realm rules at the
   2026-09-09 "Realm-switcher cards" block above, which are left to win. */
body.realm-obsidian-vow .tbsl-themes .tbsl-themes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
body.realm-obsidian-vow .tbsl-themes .tbsl-theme-card{background:color-mix(in srgb, var(--realm-primary) 55%, var(--realm-bg));border:1px solid var(--hairline);
  text-decoration:none;display:flex;flex-direction:column;transition:transform .35s ease,border-color .35s ease;overflow:hidden}
body.realm-obsidian-vow .tbsl-themes .tbsl-theme-card:hover{transform:translateY(-3px);border-color:var(--frame)}
body.realm-obsidian-vow .tbsl-themes .tbsl-theme-card__img{aspect-ratio:16/9;background:color-mix(in srgb, var(--realm-bg) 80%, var(--realm-primary));overflow:hidden}
body.realm-obsidian-vow .tbsl-themes .tbsl-theme-card__img img{width:100%;height:100%;object-fit:cover}
body.realm-obsidian-vow .tbsl-themes .tbsl-theme-card__body{padding:20px 18px;text-align:center}
body.realm-obsidian-vow .tbsl-themes .tbsl-theme-card__name{font-family:var(--realm-font-display);font-size:18px;color:var(--realm-cream);font-weight:600;margin-bottom:6px}
body.realm-obsidian-vow .tbsl-themes .tbsl-theme-card__status{font-family:var(--tb-font-heading);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--realm-taupe)}
/* Coming-soon realm cards. */
body.realm-obsidian-vow .tb-ov-soon-head{margin-top:72px}
body.realm-obsidian-vow .tbsl-soon-head .dash{font-family:var(--tb-font-body);color:var(--realm-taupe);letter-spacing:var(--tr-wide);font-size:11px}
body.realm-obsidian-vow .tbsl-soon-head p{color:var(--realm-muted);font-style:normal}
body.realm-obsidian-vow .tbsl-soon-card{border-color:var(--hairline);background-color:var(--realm-secondary)}
body.realm-obsidian-vow .tbsl-soon-card::before{background:linear-gradient(180deg,rgba(10,10,11,.6) 0%,rgba(10,10,11,.3) 40%,rgba(10,10,11,.72) 72%,rgba(10,10,11,.92) 100%)}
body.realm-obsidian-vow .tbsl-soon-card__realm{font-family:var(--tb-font-body);font-weight:400;color:var(--realm-taupe)}
body.realm-obsidian-vow .tbsl-soon-card__name{font-style:normal}
body.realm-obsidian-vow .tbsl-soon-card__cta{font-family:var(--tb-font-body);color:var(--realm-cream);border-color:var(--frame)}

/* 8. Shared chrome on every Obsidian Vow page: footer, off-canvas mobile menu and
   the floating contact panel. These paint brand gold from their own custom
   properties (footer.php declares --tb-divider / --tb-border-top at :root) or from
   hard-coded values (functions.php contact float, footer social ring). Measured with
   the C5a gold probe, which found 16 painted-gold elements per page after section 1. */
body.realm-obsidian-vow{--tb-divider:var(--hairline-soft);--tb-border-top:var(--hairline)}
body.realm-obsidian-vow .tb-footer-social a{border-color:var(--frame)}
body.realm-obsidian-vow .tb-footer-social a:hover{color:var(--realm-cream);border-color:var(--realm-cream)}
body.realm-obsidian-vow .tb-mm{background-image:radial-gradient(120% 60% at 100% 0%, rgba(90,101,128,.14) 0%, rgba(10,10,11,0) 60%)}
body.realm-obsidian-vow .tb-contact-toggle{background:var(--realm-primary);color:var(--realm-cream);border:1px solid var(--frame);
  box-shadow:none;font-family:var(--tb-font-body);font-weight:400}
body.realm-obsidian-vow .tb-contact-toggle:hover{border-color:var(--realm-cream)}
body.realm-obsidian-vow .tb-contact-panel__eyebrow{color:var(--realm-taupe)}
/* The contact form's own rules carry !important, so these must too. */
body.realm-obsidian-vow .tb-contact-panel .wpforms-required-label{color:var(--wine-word)!important}
body.realm-obsidian-vow .tb-contact-panel .wpforms-submit{background:transparent!important;color:var(--realm-cream)!important;
  border:1px solid var(--realm-cream)!important;border-radius:0!important;box-shadow:none!important}
body.realm-obsidian-vow .tb-contact-panel .wpforms-submit:hover{border-color:var(--wine-word)!important;color:var(--wine-word)!important;box-shadow:none!important}
body.realm-obsidian-vow .tb-contact-panel .wpforms-confirmation-container-full{border-color:var(--hairline)!important}
/* 2026-10-12: piece comparison tiles show ONE photograph that fills the tile.
   Four of the mockup photographs carry a dark marble panel with a wax seal down their right edge,
   starting at 84% of the frame width: the Silver save the date, the QR and write in reply cards and
   the flat thank you card. In a tile that panel read as a second image sitting behind the photo.
   (1) Pair tiles (Essentials Silver/Rose and QR/Write-In): the portrait photograph fills a 4:5 tile.
   (2) Wherever one of the four fills a tile (pair tile, piece tile, longform card), it is shown at
   1.25x from the left edge and clipped back to the tile: the tile shows x 0 to 80% and y 10% to 90%
   of the photograph, so the card, the ring and the pen stay whole and the panel never shows.
   Galleries (.tbg) and the lightbox keep the full photograph. */
body.realm-obsidian-vow .tbsl-pair__imgs>figure{overflow:hidden}
body.realm-obsidian-vow .tbsl-pair__imgs>figure>img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center;max-width:none}
/* 2026-10-12 (live): the collection page's split variation tiles (.tbc-var__imgs, 5:7) take the same crop. */
body.realm-obsidian-vow :is(.tbsl-pair__imgs>figure>img,.tb-ov-mock img,.tbsl-piece__mockup img,.tbc-var__imgs img):is([src*="obsidian-vow-save-the-date-mockup"],[src*="obsidian-vow-reply-card-qr-mockup"],[src*="obsidian-vow-reply-card-write-in-mockup"],[src*="obsidian-vow-thank-you-card-flat-mockup"]){
  object-fit:cover;object-position:0 50%;transform:scale(1.25);transform-origin:0 50%;clip-path:inset(10% 20% 10% 0)}