/*
Theme Name:   Kamsin Kaneko Child
Theme URI:    https://kamsinkaneko.com
Description:  Child theme for Kamsin Kaneko — "Paying Attention" photography & writing.
              Layer this over your existing parent theme. Change the Template line below
              to match your parent theme's folder name (e.g. twentytwentythree).
Author:       Kamsin Kaneko
Template:     blacksilver
Version:      1.0.0
*/

/* Parent theme styles load via functions.php — no @import needed here. */

/* ================================================================
   Global resets & base
   ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--kk-bg);
  color: var(--kk-ink);
  font-family: var(--kk-sans);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* On the homepage the hero has its own overlaid header — hide the duplicate */
body.home > .kk-header {
  display: none !important;
}

/* Hide parent-theme elements that conflict with our full-bleed layout */
.site-header,
.site-footer,
#masthead,
#colophon,
#header,
#footer,
.header,
.header-wrap,
.header-wrapper,
.header-container,
#site-header,
#site-footer,
.nav-bar,
.navbar,
#navbar,
.top-bar,
#top-bar {
  display: none !important;
}

/* ================================================================
   Responsive overrides (< 900 px)
   ================================================================ */
@media (max-width: 900px) {
  :root {
    --kk-gutter: 24px;
  }

  .kk-header {
    padding-left: var(--kk-gutter);
    padding-right: var(--kk-gutter);
  }

  .kk-project {
    grid-template-columns: 1fr !important;
  }

  .kk-project--reverse .kk-project__img {
    order: unset;
  }

  .kk-project__img {
    height: 320px;
  }

  .kk-h1 {
    font-size: 38px;
  }

  .kk-h2 {
    font-size: 28px;
  }

  .kk-h3 {
    font-size: 26px;
  }

  .kk-prints {
    grid-template-columns: repeat(2, 1fr);
  }

  .kk-essay {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .kk-essay-date {
    margin-bottom: 2px;
  }

  .kk-essay-read {
    display: none;
  }
}

@media (max-width: 560px) {
  .kk-prints {
    grid-template-columns: 1fr;
  }

  .kk-hero__line {
    font-size: 22px;
  }
}