/* ---- kadans (Kadans — Running tech & wearables 246) ------------------------
   THE STRUCTURAL MOVE: the first screen is ONE object and nothing else — a
   full-viewport three-plate cross-fade with the bar sitting transparent
   straight on the photograph. The moment it ends the page snaps into a 940px
   measure and never widens again, so below the fold the only thing that ever
   touches the edges of the window is the single near-black band. Electric
   violet does every job on its own and there is no second accent: the slab
   buttons, the labels lying on the four category squares, and the hairline
   rule under every heading inside the measure. The rule is scoped to
   `.container .sc-h2`, which is also how the quote over the wide photograph is
   told apart without a positional selector — the overlay section sits outside
   any container, so it never gets a rule and never goes uppercase. */
body.t-kadans {
  background: #ffffff;
  color: #33333d;
  --kdn-violet: #5b3df5;
  --bg-flat: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f8;
  --line: #e6e6ec;
  --line-strong: #cfcfd8;
  --heading: #101014;
  --text: #33333d;
  --muted: #74747f;
  --header-bg: #ffffff;
  --radius: 0;
  --shadow: none;
}

/* the measure: everything under the stage lives in this and nothing widens */
body.t-kadans .container { max-width: 940px; }

body.t-kadans .sf-header, body.t-kadans .sf-head,
body.t-kadans .sf-footer, body.t-kadans .sf-foot, body.t-kadans .sf-cats {
  background: #ffffff; border-color: #e6e6ec;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-kadans .sf-name { font-weight: 700; font-size: 18px; letter-spacing: 0.2em; text-transform: uppercase; }

/* the bar floats on the first plate and scrolls away with it — landing page
   only, because white ink on white paper would vanish on a product page */
body.t-kadans:has(.sc-hero) .sf-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom-color: transparent; }
body.t-kadans:has(.sc-hero) .sf-name, body.t-kadans:has(.sc-hero) .sf-header .sf-cart,
body.t-kadans:has(.sc-hero) .sf-searchbtn, body.t-kadans:has(.sc-hero) .sf-header .theme-toggle,
body.t-kadans:has(.sc-hero) .sf-makeyours { color: #ffffff; }
body.t-kadans:has(.sc-hero) .sf-cats { display: none; }

/* flat violet slab — square, no edge on it, nothing raised */
body.t-kadans .btn.brand { background: var(--kdn-violet); border: 0; color: #ffffff; border-radius: 0; box-shadow: none; font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 15px 30px; }
body.t-kadans .btn.brand:hover { background: #4629d6; opacity: 1; }
body.t-kadans .sc-hero .btn.brand.sc-hero-ghost { background: transparent; color: #ffffff; }
body.t-kadans .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--kdn-violet); border-color: var(--kdn-violet); color: #ffffff; }

/* the stage: three plates, a two-line cut, one short line, one ghost */
body.t-kadans .sc-hero { min-height: 100vh; padding: 24px 20px; }
body.t-kadans .sc-hero h1 { font-weight: 700; font-size: clamp(34px, 6vw, 74px); line-height: 1.04; letter-spacing: -0.035em; max-width: 720px; margin: 0 auto 18px; }
body.t-kadans .sc-hero p { font-size: 15px; letter-spacing: 0.01em; max-width: 480px; margin: 0 auto 34px; }

body.t-kadans .sc-h2 { color: var(--heading); font-weight: 700; font-size: clamp(13px, 1.6vw, 16px); letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 32px; }
body.t-kadans .container .sc-h2::after { content: ''; display: block; width: 40px; height: 2px; margin: 16px auto 0; background: var(--kdn-violet); }
body.t-kadans .sc-about-copy .sc-h2::after, body.t-kadans .sc-contact-lead .sc-h2::after { margin-left: 0; }

/* the white gutters that make the measure read as one narrow column */
body.t-kadans .sc-strip, body.t-kadans .sc-about-split,
body.t-kadans .sc-buygrid, body.t-kadans .sc-contact-split { padding: 96px 20px 0; }

/* FOUR gapped squares, the category word lying on the photograph itself */
body.t-kadans .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 18px; }
body.t-kadans .sc-strip-card { position: relative; }
body.t-kadans .sc-strip-img { aspect-ratio: 1; border: 0; }
body.t-kadans .sc-strip-label { position: absolute; left: 14px; bottom: 14px; margin: 0; padding: 7px 12px; background: var(--kdn-violet); color: #ffffff; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }

/* the about beat: one tall device photograph, the numbers written as words */
body.t-kadans .sc-about-split, body.t-kadans .sc-contact-split { grid-template-columns: 1fr 1fr; gap: 60px; }
body.t-kadans .sc-about-media img, body.t-kadans .sc-buy-media img { aspect-ratio: 3 / 4; }
body.t-kadans .sc-about-copy p { color: var(--text); font-size: 16.5px; line-height: 1.85; }

/* THE WALL — six tall rectangles, three across, both rows filling exactly */
body.t-kadans .sc-buy-grid { grid-template-columns: repeat(3, 1fr); gap: 52px 30px; }
body.t-kadans .sc-buy-card { align-items: flex-start; text-align: left; }

/* the only dark moment: one line of display type and nothing else on it */
body.t-kadans .sc-banner { min-height: 56vh; display: flex; align-items: center; justify-content: center; margin: 104px calc(50% - 50vw) 0; background-color: #0c0c11; box-shadow: inset 0 0 0 100vmax rgba(10, 10, 16, 0.62); }
body.t-kadans .sc-banner-inner { max-width: 780px; }
body.t-kadans .sc-banner h2 { font-weight: 700; font-size: clamp(24px, 3.8vw, 46px); line-height: 1.16; letter-spacing: -0.03em; margin: 0; }

/* the quote sits outside the measure, so it takes no rule and no uppercase */
body.t-kadans .sc-about-overlay .sc-h2 { font-weight: 400; font-size: clamp(20px, 2.8vw, 34px); line-height: 1.35; letter-spacing: -0.02em; text-transform: none; margin: 0 0 22px; }
body.t-kadans .sc-about-overlay p { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }

/* the close: the hours and the Thursday note one side, the form the other */
body.t-kadans .sc-contact-split { padding-bottom: 96px; }
body.t-kadans .sc-contact-lead p { color: var(--text); font-size: 16px; line-height: 1.95; white-space: pre-line; }

@media (max-width: 900px) {
  body.t-kadans .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
  body.t-kadans .sc-buy-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-kadans .sc-about-split, body.t-kadans .sc-contact-split { grid-template-columns: 1fr; }
}

/* NIGHT — the paper goes to a cool near-black and the violet lifts, because it
   is still carrying every slab, every category label and every heading rule on
   its own. The band drops another two shades so it stays the darkest thing on
   the page even once the ground around it has gone dark. */
html[data-theme="dark"] body.t-kadans {
  background: #0e0e13;
  color: #c3c3cd;
  --kdn-violet: #8f79ff;
  --bg-flat: #0e0e13;
  --surface: #15151c;
  --surface-2: #1b1b23;
  --line: #26262f;
  --line-strong: #3a3a46;
  --heading: #f2f2f6;
  --text: #c3c3cd;
  --muted: #82828e;
  --header-bg: #0e0e13;
}
html[data-theme="dark"] body.t-kadans .sf-header, html[data-theme="dark"] body.t-kadans .sf-head,
html[data-theme="dark"] body.t-kadans .sf-footer, html[data-theme="dark"] body.t-kadans .sf-foot,
html[data-theme="dark"] body.t-kadans .sf-cats { background: #0e0e13; border-color: #26262f; }
html[data-theme="dark"] body.t-kadans .btn.brand, html[data-theme="dark"] body.t-kadans .sc-strip-label { color: #0b0b12; }
html[data-theme="dark"] body.t-kadans .btn.brand:hover { background: #a692ff; }
html[data-theme="dark"] body.t-kadans .sc-banner { box-shadow: inset 0 0 0 100vmax rgba(4, 4, 8, 0.74); }