/* ==========================================================================
   Kahna Journal homepage (HybridMag child)
   All selectors are prefixed .kh- / #kh- and scoped so they never touch the
   parent theme's header, footer, nav, archives, or single posts.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&display=swap');

/* ---- Bilingual primary nav (site-wide; renders in HybridMag's header) ----
   Put the English word in the menu item's "Navigation Label" and the Japanese
   in its "Description" (Menus → Screen Options → Description). */
#primary-menu li a{display:inline-flex;flex-direction:column;align-items:center;line-height:1.25}
#primary-menu li a .kh-jp{font-family:"Noto Sans JP",system-ui,sans-serif;font-size:.6rem;font-weight:400;letter-spacing:.08em;opacity:.7;margin-top:3px}
/* Optional: match the mockup's serif English labels — uncomment to enable.
#primary-menu > li > a{font-family:"Cormorant Garamond",serif;font-size:1.08rem;letter-spacing:.05em}
*/

.kahna-home{
  --kh-cream:#f7efe6;
  --kh-cream-2:#f2ebdf;
  --kh-ink:#3a332c;
  --kh-ink-soft:#6b6157;
  --kh-olive:#6f7a55;
  --kh-olive-d:#586048;
  --kh-terra:#c08457;
  --kh-gold:#b89b5e;
  --kh-line:#e4dccd;
  --kh-shadow:0 18px 40px -22px rgba(58,51,44,.45);
  --kh-serif:"Shippori Mincho",serif;
  --kh-lat:"Cormorant Garamond",serif;
  --kh-sans:"Noto Sans JP",system-ui,sans-serif;
  background:var(--kh-cream);
  font-family:var(--kh-sans);
  color:var(--kh-ink);
  line-height:1.9;
  font-size:15px;
  overflow-x:hidden;
}
/* Break the homepage out of HybridMag's constrained content container so the
   coloured bands span the full viewport, and drop the sidebar on the front page.
   If you assign the page HybridMag's "Full Width" template these are safe no-ops. */
.kahna-home{max-width:none;margin:0;padding:0;width:100%}
body.home #primary.kahna-home{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
body.home{overflow-x:hidden}
body.home #secondary,body.home .widget-area,body.home .sidebar{display:none}
body.home .content-area{width:100%;max-width:100%;float:none}
.kahna-home img{max-width:100%;display:block}
.kahna-home a{color:inherit;text-decoration:none}
.kahna-home h1,.kahna-home h2,.kahna-home h3{margin:0}

.kh-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.kh-center{text-align:center}

/* ---- bits ---- */
.kh-btn{display:inline-block;font-family:var(--kh-lat);letter-spacing:.06em;font-size:1.05rem;padding:.85em 2.2em;border-radius:999px;transition:.3s;line-height:1;cursor:pointer}
.kh-solid{background:var(--kh-olive);color:#fff;border:1px solid var(--kh-olive)}
.kh-solid:hover{background:var(--kh-olive-d);border-color:var(--kh-olive-d);color:#fff}
.kh-outline{background:none;border:1px solid var(--kh-olive);color:var(--kh-olive-d)}
.kh-outline:hover{background:var(--kh-olive);color:#fff}
.kh-eyebrow{font-family:var(--kh-lat);letter-spacing:.28em;text-transform:uppercase;color:var(--kh-terra);font-size:.9rem;font-weight:600;margin:0 0 .5rem}
.kh-eyebrow.kh-center{text-align:center}
.kh-eyebrow.kh-light{color:#e7d3b6}
.kh-title{font-family:var(--kh-serif);font-weight:600;font-size:2.1rem;line-height:1.5;letter-spacing:.04em;margin-bottom:1.2rem}
.kh-title.sm{font-size:1.65rem}
.kh-title.kh-center{text-align:center}
.kh-sechead{margin-bottom:2.4rem}
.kh-sechead.kh-center{text-align:center}
.kh-arrow{display:inline-block;color:var(--kh-olive-d);font-weight:500;font-size:.92rem;border-bottom:1px solid var(--kh-gold);padding-bottom:2px}
.kh-arrow::after{content:" →";color:var(--kh-terra)}
.kh-meta{display:flex;align-items:center;gap:12px;margin-bottom:.6rem}
.kh-tag{display:inline-block;background:var(--kh-cream-2);color:var(--kh-olive-d);font-family:var(--kh-lat);font-size:.85rem;letter-spacing:.08em;padding:.2em 1em;border-radius:999px;border:1px solid var(--kh-line);transition:.25s}
a.kh-tag:hover{background:var(--kh-olive);color:#fff;border-color:var(--kh-olive)}
.kh-meta time{font-family:var(--kh-lat);color:var(--kh-terra);letter-spacing:.06em;font-size:.95rem}
.kh-gourmet{display:flex;align-items:center;gap:16px}
.kh-badge{width:60px;height:60px;flex:0 0 auto;filter:drop-shadow(0 6px 12px rgba(58,51,44,.18))}

/* ---- hero ---- */
.kh-hero{max-width:1200px;margin:0 auto;padding:56px 24px 40px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;position:relative}
.kh-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 78% 40%,rgba(111,122,85,.10),transparent 46%),radial-gradient(circle at 20% 80%,rgba(192,132,87,.10),transparent 44%)}
.kh-hero-jp{font-family:var(--kh-serif);font-weight:700;font-size:clamp(2rem,4.4vw,3rem);letter-spacing:.06em;line-height:1.55;margin:.4rem 0 1.2rem}
.kh-hero-sub{color:var(--kh-ink-soft);margin-bottom:1.8rem}
.kh-hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.kh-hero-art img{width:100%;max-width:540px;margin:0 auto;border-radius:20px;box-shadow:0 26px 46px -22px rgba(58,51,44,.5)}

/* ---- featured ---- */
.kh-featured{padding:56px 0 20px}
.kh-feature-card{display:grid;grid-template-columns:1.1fr 1fr;background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--kh-shadow)}
.kh-feature-img{display:block;background:var(--kh-cream-2)}
.kh-feature-img img{width:100%;height:100%;object-fit:cover;min-height:280px}
.kh-feature-body{padding:clamp(26px,3.5vw,48px);align-self:center}
.kh-feature-body h3{font-family:var(--kh-serif);font-size:1.7rem;line-height:1.5;margin-bottom:.8rem}
.kh-feature-body p{color:var(--kh-ink-soft);margin-bottom:1.4rem}

/* ---- stories grid ---- */
.kh-stories{padding:70px 0 90px}
.kh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-bottom:3rem}
.kh-post{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--kh-shadow);transition:transform .35s}
.kh-post:hover{transform:translateY(-6px)}
.kh-post-img{display:block;aspect-ratio:4/3;overflow:hidden}
.kh-post-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.kh-post:hover .kh-post-img img{transform:scale(1.06)}
.kh-post .kh-meta{margin:18px 22px 0}
.kh-post h3{font-family:var(--kh-serif);font-size:1.12rem;line-height:1.6;margin:8px 22px 8px}
.kh-post h3 a:hover{color:var(--kh-olive-d)}
.kh-post p{margin:0 22px 22px;font-size:.86rem;color:var(--kh-ink-soft)}

/* ---- categories ---- */
.kh-categories{padding:20px 0 90px}
.kh-cat-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.kh-cat{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:1px solid var(--kh-line);border-radius:14px;padding:20px 34px;transition:.3s;min-width:150px}
.kh-cat:hover{background:var(--kh-olive);border-color:var(--kh-olive);transform:translateY(-4px)}
.kh-cat:hover .kh-cat-en{color:#fff}.kh-cat:hover .kh-cat-jp{color:#f2ead9}
.kh-cat-en{font-family:var(--kh-lat);font-size:1.4rem;color:var(--kh-olive-d);letter-spacing:.04em;transition:color .3s}
.kh-cat-jp{font-size:.72rem;color:var(--kh-ink-soft);letter-spacing:.12em;transition:color .3s}

/* ---- about split ---- */
.kh-split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;background:var(--kh-cream-2);padding:clamp(40px,6vw,84px) clamp(24px,6vw,84px)}
.kh-split-art img{width:100%;max-width:460px;margin:0 auto;aspect-ratio:4/3;object-fit:cover;border-radius:20px;box-shadow:0 22px 40px -22px rgba(58,51,44,.45)}
.kh-split-body{max-width:520px}
.kh-split-body p{color:var(--kh-ink-soft);margin-bottom:1.8rem}

/* ---- newsletter ---- */
.kh-letter{padding:96px 24px;text-align:center;color:#fff;background:linear-gradient(rgba(88,96,72,.92),rgba(88,96,72,.94))}
.kh-letter-inner{max-width:600px;margin:0 auto}
.kh-letter .kh-title{color:#fff}
.kh-letter-text{opacity:.92;margin-bottom:1.8rem}
.kh-letter form,.kh-letter .kh-letter-form{display:flex;gap:10px;max-width:460px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.kh-letter .kh-letter-form input[type=email],.kh-letter .kh-letter-form input[type=text]{flex:1;min-width:220px;border:0;border-radius:999px;padding:.85em 1.4em;font-family:var(--kh-sans);font-size:.95rem;color:var(--kh-ink);background:#fff;box-shadow:none;-webkit-appearance:none;appearance:none;line-height:1.4}
.kh-letter .kh-letter-form input[type=email]:focus{outline:2px solid var(--kh-gold);outline-offset:2px}
.kh-letter button,.kh-letter input[type=submit]{border:1px solid var(--kh-gold);background:var(--kh-gold);color:#fff;border-radius:999px;padding:.85em 2em;font-family:var(--kh-lat);font-size:1.05rem;cursor:pointer;transition:.3s}
.kh-letter button:hover,.kh-letter input[type=submit]:hover{background:#a98c50;border-color:#a98c50}

/* ---- contact ---- */
.kh-cta{padding:104px 24px;text-align:center;color:#fff;background:linear-gradient(135deg,var(--kh-olive-d),#6f7a55)}
.kh-cta-inner{max-width:640px;margin:0 auto}
.kh-cta .kh-title{color:#fff}
.kh-cta-text{margin-bottom:1.6rem}

/* ---- responsive ---- */
@media(max-width:900px){ .kh-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:860px){
  .kh-hero{grid-template-columns:1fr;text-align:center;padding-top:36px}
  .kh-hero-btns{justify-content:center}
  .kh-hero-art{order:-1}.kh-hero-art img{max-width:340px}
  .kh-feature-card{grid-template-columns:1fr}
  .kh-feature-img img{min-height:220px}
  .kh-split{grid-template-columns:1fr;gap:28px}
  .kh-split-art{order:-1}.kh-split-art img{max-width:320px}
  .kh-split-body{max-width:none}
}
@media(max-width:560px){
  .kh-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto 3rem}
  .kh-stories{padding:60px 0}
  .kh-letter,.kh-cta{padding:72px 20px}
  .kh-cat{flex:1;min-width:130px;padding:16px 20px}
}