/* Home page — Hero, catalog teaser, newsletter band, three-step explainer.
   Hand-authored from the real prototype (repo/design/Bankrupt & Co Site.dc.html,
   the `isHome` block) — corrected 2026-08-30 from an earlier build that used
   design/system/ui_kits/storefront/Home.jsx and diverged from the prototype in
   several places (no stat strip or "premise" card exist in the real design;
   this replaces both with the real newsletter band and three-step explainer).
   Page-specific; enqueued only when page-templates/home.php is active. */

/* ===== hero ===== */

.bkc-hero{position:relative;background:var(--surface-inverse);background-image:var(--grime-noise),var(--grime-blotch),var(--grime-soot);color:var(--text-inverse);border-bottom:var(--border-hair) solid var(--line-strong);overflow:hidden}
.bkc-hero__photo{position:absolute;inset:0;left:42%;background-size:cover;background-position:center right;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 22%,rgba(0,0,0,.72) 46%,#000 68%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 22%,rgba(0,0,0,.72) 46%,#000 68%)}
.bkc-hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--surface-inverse) 0%,rgba(42,44,41,.92) 26%,rgba(42,44,41,.55) 46%,transparent 66%);pointer-events:none}
.bkc-hero__inner{position:relative;max-width:var(--container-max);margin:0 auto;padding:var(--space-13) var(--gutter-page-lg);min-height:520px;display:flex;align-items:flex-end}
.bkc-hero__copy{max-width:min(600px,54%)}
.bkc-hero__eyebrow{color:var(--ash-500)}
.bkc-hero__title{font:var(--fw-bold) clamp(40px,4.6vw,76px)/0.98 var(--font-display);letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--ash-050);margin:var(--space-6) 0 var(--space-7)}
.bkc-hero__lede{font:var(--type-body);color:var(--ash-300);max-width:44ch}
.bkc-hero__actions{display:flex;gap:var(--space-5);margin-top:var(--space-9);flex-wrap:wrap}
.bkc-hero__secondary-btn{color:var(--ash-100);border-color:var(--ash-600)}

@media (max-width: 780px){
	.bkc-hero__photo{left:0;opacity:.35}
	.bkc-hero__copy{max-width:100%}
	.bkc-hero__inner{min-height:420px;padding:var(--space-10) var(--gutter-page)}
}

/* ===== catalog teaser ===== */

.bkc-home-catalogue{max-width:var(--container-max);margin:0 auto;padding:var(--space-12) var(--gutter-page-lg) 0}
.bkc-home-catalogue__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-8);gap:var(--space-6)}
.bkc-home-catalogue__head h2{text-transform:uppercase}
.bkc-home-catalogue__all{color:var(--text-link);text-decoration:none;white-space:nowrap}
.bkc-home-catalogue__all:hover{color:var(--text-link-hover)}

/* A tidy single row of four on desktop — narrower than the shop archive's
   3-column cap, deliberately, since this is a curated teaser, not the full
   catalog. Falls back to the same responsive steps below that. */
@media (min-width: 1100px){
	.bkc-home-catalogue ul.products{grid-template-columns:repeat(4,1fr)}
}

@media (max-width: 780px){
	.bkc-home-catalogue{padding:var(--space-10) var(--gutter-page) 0}
}

/* ===== newsletter band =====
   Dark scanlined panel, two columns split by a vertical rule. Matches the
   footer's soot treatment (surface-inverse + grime-scanlines). */

.bkc-home-newsletter{max-width:var(--container-max);margin:var(--space-13) auto 0;padding:0 var(--gutter-page-lg)}
/* Real prototype: #221E19 (--soot-900), a distinct darker inset-panel color
   from the hero/footer ground (--surface-inverse, #2A2C29) — corrected
   2026-08-30, was wrongly using --surface-inverse. */
.bkc-home-newsletter__panel{display:grid;grid-template-columns:1.15fr 1fr;background:var(--soot-900);background-image:var(--grime-scanlines);border:var(--border-hair) solid var(--line-strong)}
.bkc-home-newsletter__copy{padding:var(--space-11) var(--space-10)}
.bkc-home-newsletter__eyebrow{color:var(--ash-500)}
.bkc-home-newsletter__title{font:var(--fw-bold) clamp(28px,2.6vw,40px)/1.04 var(--font-display);text-transform:uppercase;letter-spacing:var(--ls-display);color:var(--ash-050);margin:var(--space-6) 0 var(--space-6)}
.bkc-home-newsletter__body{font:var(--type-body);color:var(--ash-300);max-width:48ch}
.bkc-home-newsletter__form{padding:var(--space-11) var(--space-10);border-left:var(--border-hair) solid rgba(231,227,220,.18);display:flex;flex-direction:column;gap:var(--space-5);justify-content:center}
.bkc-home-newsletter__label{color:var(--ash-400)}
.bkc-home-newsletter__footnote{font:var(--type-body-sm);color:var(--ash-500)}

.bkc-home-newsletter .bkc-signup-form{display:flex;flex-direction:column;gap:var(--space-5)}
.bkc-home-newsletter .bkc-input{height:46px;padding:0 var(--space-6);border:var(--border-hair) solid var(--line-strong);border-radius:var(--radius-2);background:#15130F;box-shadow:inset 0 2px 5px rgba(0,0,0,.5);font:var(--type-body);color:var(--ash-050)}
/* content.css's default status colors assume a light background; this panel
   is dark soot, so keep both states legible here. */
.bkc-home-newsletter .bkc-signup__message{color:var(--ash-050)}
.bkc-home-newsletter .bkc-signup__message--error{color:#C08578}

@media (max-width: 900px){
	.bkc-home-newsletter__panel{grid-template-columns:1fr}
	.bkc-home-newsletter__form{border-left:0;border-top:var(--border-hair) solid rgba(231,227,220,.18)}
}

/* ===== three-step explainer =====
   Border-left dividers on columns 2/3, deliberately not a grid gap — see
   repo/README.md's note on subpixel rounding eating a 1px gap divider. */

.bkc-home-steps{max-width:var(--container-max);margin:var(--space-11) auto var(--space-13);padding:0 var(--gutter-page-lg)}
.bkc-home-steps__panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface-panel);border:var(--border-hair) solid var(--line-hairline)}
.bkc-home-steps__col{padding:var(--space-9);text-align:center}
.bkc-home-steps__col:not(:first-child){border-left:var(--border-hair) solid var(--line-hairline)}
.bkc-home-steps__eyebrow{color:var(--rust-500)}
.bkc-home-steps__col p{font:var(--type-body);color:var(--text-body);margin-top:var(--space-6)}

@media (max-width: 780px){
	.bkc-home-steps{margin:var(--space-10) var(--gutter-page) var(--space-11);padding:0}
	.bkc-home-steps__panel{grid-template-columns:1fr}
	.bkc-home-steps__col:not(:first-child){border-left:0;border-top:var(--border-hair) solid var(--line-hairline)}
}