/* Kushistry.com Coming Soon. No framework, no third-party requests. */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/eb-garamond-600-latin.woff2") format("woff2"); }
:root { --paper: #F3EDE2; --ink: #1C1A17; --soft: #5E554C; --forest: #0C4430; --light: #F6F1E7; --gutter: 20px;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--sans); }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
p { margin: 0; }
/* The wordmark: the leaf K as the capital of the word (generated from tools/wordmark.mjs). */
.wm { display: inline-block; font-family: "EB Garamond", Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -0.019em; line-height: 1; white-space: nowrap; }
.wm-k { display: inline-block; width: 0.684em; height: 0.78em; vertical-align: -0.0598em; margin-left: -0.0146em; margin-right: -0.0268em; fill: var(--wm-k, currentColor); overflow: visible; }
.lockup { margin: 0; font-size: 34px; font-weight: 600; line-height: 1; color: var(--forest); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Phones: the image fills the screen; the name sits on a light wash at the top, "Coming soon" on a dark one at the bottom. */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; overflow: hidden; background: #E9E1D3; }
.cs-media { position: absolute; inset: 0; margin: 0; }
.cs-media img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 30%; }
.cs-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(243, 237, 226, 0.88) 0%, rgba(243, 237, 226, 0) 20%, rgba(0, 0, 0, 0) 52%, rgba(10, 18, 14, 0.66) 100%); }
.tag { position: absolute; right: var(--gutter); top: 28px; z-index: 2; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); background: rgba(248, 244, 236, 0.9); padding: 5px 8px; border-radius: 999px; }
.hero-copy { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 20px var(--gutter) 40px; }
.soon { color: var(--light); }
.eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 10px; opacity: 0.9; }
.headline { font: 600 clamp(3rem, 15vw, 6.5rem)/0.95 var(--serif); letter-spacing: -0.02em; }
.cap { margin-top: 14px; font-size: 0.78rem; opacity: 0.85; max-width: 30rem; }

/* Wider screens: exactly one screen, never a scroll. The photo fills the right panel at full height;
   the lockup and "Coming soon" sit together, centred, in the left panel. */
@media (min-width: 900px) {
  .hero { height: 100vh; height: 100svh; min-height: 560px; }
  .cs-media { position: relative; order: 2; flex: 0 0 56%; height: 100%; }
  .cs-media img { position: absolute; inset: 0; object-position: 64% 8%; } /* keep headroom when wide panels crop height */
  .cs-media::after { display: none; }
  .tag { top: 24px; right: 24px; }
  .hero-copy { order: 1; justify-content: center; align-items: center; text-align: center; gap: 40px; padding: 48px; }
  .lockup { font-size: 46px; }
  .soon { color: var(--forest); }
  .headline { font-size: clamp(3.4rem, 5.4vw, 6.4rem); }
  .cap { color: var(--soft); opacity: 1; }
}

/* 404 */
.nf { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 40px var(--gutter); }
.nf .headline { font-size: clamp(2.4rem, 9vw, 4rem); color: var(--forest); }