/*
 * kiln — a launch poster that keeps going when you scroll. Loaded after base.css; identity only.
 * Flat colour fields, oversized display type, product imagery that breaks the field edge,
 * rounded geometry, hard offset shadows like printed stickers. No gradients, no soft glows.
 */
h1, h2, h3 { font-family: var(--f-font-display); font-weight: 800; letter-spacing: -0.03em; }
h1 { font-size: clamp(3rem, 7.6vw, 7.5rem); line-height: .92; text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 5vw, 4.8rem); line-height: .95; }
h3 { font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1; }
:lang(fa) h1, :lang(ar) h1, :lang(fa) h2, :lang(ar) h2, :lang(fa) h3, :lang(ar) h3 { line-height: 1.25; letter-spacing: 0; }

/* fields run edge to edge; the section padding is the poster margin */
[data-n='kl-hero'] > .f-section, [data-n='kl-claims'] > .f-section, [data-n='kl-story'] > .f-section { padding-block: clamp(56px, 9vw, 150px); }
[data-n='kl-hero-cols'], [data-n='kl-story-cols'] { align-items: center; gap: clamp(24px, 5vw, 80px); }
[data-n='kl-lede'] p { font-size: clamp(1.1rem, 1.6vw, 1.4rem); opacity: .9; }

/* the product breaks out of its field: it overhangs the next band */
[data-n='kl-hero-img'] img {
  inline-size: 100%; border-radius: var(--f-radius-lg, 24px); background: var(--f-color-field-2);
  margin-block-end: calc(-1 * clamp(40px, 8vw, 140px)); position: relative; z-index: 1;
  box-shadow: 0 10px 0 0 var(--f-color-ink, #141414);
}
@media (max-width: 767px) { [data-n='kl-hero-img'] img { margin-block-end: -40px; } }
[data-n='kl-claims'] > .f-section { padding-block-start: clamp(80px, 12vw, 200px); }
[data-n='kl-claims'] h3 { border-block-start: 2px solid currentColor; padding-block-start: 14px; }
[data-n='kl-story-img'] img { border-radius: var(--f-radius-lg, 24px); }

/* buttons: pills with a hard printed shadow */
.f-btn { border-radius: 999px; font-weight: 700; padding-inline: 26px; min-block-size: 52px; border: 2px solid var(--f-color-ink, #141414); }
.f-btn-primary { background: var(--f-color-field-2, #F2A97E); color: var(--f-color-field-2-ink, #141414); box-shadow: 0 4px 0 0 var(--f-color-ink, #141414); }
.f-btn-primary:active { transform: translateY(4px); box-shadow: none; }

/* big cards on soft fields */
.f-grid-title { font-size: clamp(2rem, 4vw, 3.6rem); }
.f-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }
@media (min-width: 700px) { .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .f-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.f-card img, .f-card-noimg { border-radius: var(--f-radius-md, 12px); aspect-ratio: 4 / 5; }
.f-card-title { font-family: var(--f-font-display); font-weight: 800; font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -0.02em; }
.f-badge { border-radius: 999px; transform: rotate(-8deg); box-shadow: 0 3px 0 0 var(--f-color-ink, #141414); }

.f-site-title { font-weight: 800; letter-spacing: -0.02em; font-size: 1.4rem; }
@media (prefers-reduced-motion: no-preference) {
  .f-btn { transition: transform 90ms ease, box-shadow 90ms ease; }
}

/* the home's root is a full-width stack of fields: no band of its own */
[data-n='kl-r'] > .f-section { padding-block: 0; }