/* ==========================================================================
   know/how/to — Homepage-specific styles
   Version: 2026-06-29

   Load order: shared.css → unified.css → kht-content-system.css
               → page-types.css → home.css   ← this file (last)

   Contains ONLY what is unique to the homepage (body.home).
   All shared patterns (nav, footer, search, typography baseline)
   live in the base files above. Do not duplicate those here.
   ========================================================================== */


/* ── PAGE LAYOUT ────────────────────────────────────────────── */

body.home #page {
  width: min(var(--content-max), calc(100% - var(--gutter) * 2));
  max-width: var(--content-max);
}

body.home .topline,
body.home main,
body.home .footer {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}


/* ── HERO — wordmark ────────────────────────────────────────── */
/* The homepage uses the brand wordmark as its H1, not a section
   title. It is larger and uses letter-spacing rather than the
   condensed area-page style. */

body.home .hero {
  padding: 76px 0 0 !important;
  border-bottom: 0 !important;
}

body.home .hero > div:first-child {
  padding-bottom: 52px;
  border-bottom: var(--border);
}

body.home .hero h1 {
  font-size: clamp(56px, 8vw, 128px) !important;
  line-height: .95 !important;
  letter-spacing: .04em !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
}

body.home .hero p {
  max-width: 680px;
  margin-top: 28px;
}

/* Search inside hero (home-specific placement) */
body.home .search-block {
  max-width: 760px !important;
  margin-top: 48px !important;
}


/* ── AREA GRID — home variant ──────────────────────────────── */
/* Section pages use body.area-page rules from page-types.css.
   The homepage needs its own grid rule because it has body.home. */

body.home .area-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 56px !important;
  border-top: 0 !important;
  border-left: 0 !important;
}

body.home .area-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: clamp(230px, 20vw, 300px) !important;
  height: auto !important;
  padding: clamp(22px, 2.4vw, 30px) !important;
  margin: -1px 0 0 -1px !important;
  color: var(--black) !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background .14s ease !important;
}

body.home .area-card::before {
  content: none !important;
  display: none !important;
}

body.home .area-card::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  display: block !important;
  width: 0 !important;
  height: 3px !important;
  background: var(--black) !important;
  border: 0 !important;
  transform: none !important;
  pointer-events: none !important;
  transition: width .18s ease !important;
}

body.home .area-card:hover {
  background: var(--faint) !important;
}

body.home .area-card:hover::after {
  width: 100% !important;
}


/* ── QUICK ACCESS ───────────────────────────────────────────── */

.quick-access {
  margin-top: 56px;
  padding-top: 24px;
  border-top: var(--border-strong);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--border);
  border-left: var(--border);
}

.quick-grid a {
  position: relative;
  min-height: 104px;
  border-right: var(--border);
  border-bottom: var(--border);
  padding: 18px 18px 16px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: var(--black);
  transition: background .14s ease;
}

.quick-grid a:hover {
  background: var(--faint);
}

.quick-name {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.quick-path {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
}

.quick-path-slash {
  color: var(--accent);
}

.quick-all {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mid);
}

.quick-all:hover {
  color: var(--black);
}


/* ── RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 1100px) {
  body.home .area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  body.home .hero h1 {
    font-size: clamp(48px, 10vw, 96px) !important;
  }
  .quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  body.home .area-grid {
    grid-template-columns: 1fr !important;
  }
  body.home .hero h1 {
    font-size: clamp(42px, 13vw, 72px) !important;
  }
  .quick-grid {
    grid-template-columns: 1fr;
  }
}

/* ── GLOBAL WHITE BACKGROUND OVERRIDE ─────────────────────────────
   Pages use a clear white ground. Active states stay monochrome and
   content cards remain white for a calm, consistent wireframe surface.
   ─────────────────────────────────────────────────────────────── */
:root {
  --paper: #ffffff;
  --paper-deep: #ffffff;
  --kht-selected-bg: #ffffff;
}

html,
body,
html body,
html body #page {
  background: var(--paper, #ffffff) !important;
  background-color: var(--paper, #ffffff) !important;
}

html body :where(.site-main, .area-main, main, #main, #content-wrap) {
  background: transparent !important;
  background-color: transparent !important;
}

html body :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) {
  background: transparent !important;
  background-color: transparent !important;
}

html body :where(.card, .area-card, .category-card, .tool-card-simple, .workflow-card, .knowledge-block, .library-card, .tool-card, .task-card, .entry-card, .glossary-card, .detail-card, .triple-card, .sc-box, .sc-tip-box, .fw-box, .glossar-card, .search-block, .search-row, #detail-content, .kht-browser-card) {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* HOMEPAGE AREA TITLES - STRONG ENTRY POINTS */
body.home .area-grid .area-card .area-slash,
body.home .area-grid .area-card .area-title {
  font-family: var(--font-display, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 0.95 !important;
}

body.home .area-grid .area-card .area-title {
  font-size: clamp(30px, 3.1vw, 54px) !important;
}

/* HOMEPAGE AREA TITLES - FINAL WEIGHT OVERRIDE */
html body.home main.site-main section.area-grid a.area-card span.area-title,
html body.home main.site-main section.area-grid a.area-card span.area-title span.area-slash {
  font-family: var(--font-display, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 800 !important;
  font-variation-settings: "wght" 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 0.95 !important;
}

html body.home main.site-main section.area-grid a.area-card span.area-title {
  font-size: clamp(30px, 3.1vw, 54px) !important;
}

/* HOMEPAGE HERO TITLE - STRONG OPEN SANS */
html body.home main.site-main section.hero h1 {
  font-family: var(--font-display, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 800 !important;
  font-variation-settings: "wght" 800 !important;
  letter-spacing: -0.075em !important;
  line-height: 0.9 !important;
}