:root {
  --ivory: #f6f0e8;
  --ivory-deep: #eee3d5;
  --paper: #fbf8f3;
  --ink: #30271f;
  --ink-soft: #6f6257;
  --copper: #a76945;
  --copper-dark: #71462f;
  --line: rgba(76, 53, 39, 0.15);
  --shadow: 0 24px 70px rgba(69, 44, 29, 0.13);
  --radius-lg: 32px;
  --radius-md: 20px;
  --shell: min(1180px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.shell { width: var(--shell); margin-inline: auto; }

.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  background: rgba(246, 240, 232, 0.88);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(16px);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled {
  border-color: var(--line);
  background: rgba(246, 240, 232, 0.96);
  box-shadow: 0 10px 30px rgba(54, 38, 26, 0.07);
}
.header-inner {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand { display: inline-flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  letter-spacing: -0.03em;
}
.brand-tag {
  margin-top: 7px;
  color: var(--ink-soft);
  font-size: 10px;
  letter-spacing: .21em;
  text-transform: uppercase;
}
.desktop-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.desktop-nav a {
  color: var(--ink-soft);
  font-size: 13.5px;
  transition: color .2s ease;
}
.desktop-nav a:hover { color: var(--ink); }
.desktop-nav .nav-contact {
  padding: 11px 18px;
  border: 1px solid var(--copper);
  border-radius: 999px;
  color: var(--copper-dark);
}
.header-actions { display: flex; align-items: center; gap: 18px; }
.lang-switch { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 12px; }
.lang-btn {
  appearance: none;
  border: 0;
  padding: 4px 2px;
  background: transparent;
  cursor: pointer;
  opacity: .55;
}
.lang-btn.is-active { opacity: 1; color: var(--copper-dark); font-weight: 700; }
.menu-toggle, .mobile-menu { display: none; }

.hero {
  min-height: 760px;
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding-top: 84px;
  background: #b88d6b;
}
.hero-image {
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/hero.webp");
  background-position: center 48%;
  background-size: cover;
  transform: scale(1.015);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(34, 26, 20, .67) 0%, rgba(34, 26, 20, .38) 42%, rgba(34, 26, 20, .08) 72%, rgba(34, 26, 20, .03) 100%),
    linear-gradient(0deg, rgba(43, 28, 18, .25), transparent 35%);
}
.hero-content { position: relative; z-index: 2; }
.hero-copy { max-width: 660px; padding: 80px 0 72px; color: #fffaf4; }
.eyebrow, .section-kicker {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .23em;
  text-transform: uppercase;
}
.eyebrow { color: rgba(255,255,255,.8); }
.hero h1, .story h2, .philosophy h2, .cats h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.045em;
}
.hero h1 { font-size: clamp(70px, 8vw, 116px); line-height: .88; }
.hero-subtitle {
  max-width: 560px;
  margin: 26px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 3vw, 42px);
  line-height: 1.13;
}
.hero-actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: #fff9f1; color: var(--copper-dark); }
.button-ghost { border: 1px solid rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.08); }

.section { padding: 120px 0; }
.section-kicker { color: var(--copper); }
.story { background: var(--paper); }
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(52px, 8vw, 116px);
  align-items: center;
}
.story-media-wrap { position: relative; min-height: 620px; }
.story-media {
  position: absolute;
  inset: 0 54px 32px 0;
  border-radius: var(--radius-lg);
  background-image: url("../assets/images/story.webp");
  background-position: center;
  background-size: cover;
  box-shadow: var(--shadow);
}
.story-card-accent {
  position: absolute;
  width: 58%;
  aspect-ratio: 1.25;
  right: 0;
  bottom: 0;
  border-radius: 28px;
  border: 1px solid rgba(151, 97, 64, .32);
  background: rgba(238, 227, 213, .75);
  z-index: -1;
}
.story h2 { max-width: 520px; font-size: clamp(48px, 5.2vw, 76px); line-height: .98; }
.story-body,
.philosophy-body,
.cats-intro-copy {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.85;
}
.story-body { margin-top: 30px; max-width: 610px; }
.story-body p,
.philosophy-body p,
.cats-intro-copy p { margin: 0 0 16px; }
.story-signoff {
  margin-top: 34px;
  color: var(--copper-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-style: italic;
}

.philosophy {
  background: var(--ivory);
  border-top: 1px solid rgba(76, 53, 39, .05);
}
.philosophy-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(50px, 7vw, 104px);
  align-items: center;
}
.philosophy-copy { max-width: 600px; }
.philosophy h2 { font-size: clamp(50px, 5.2vw, 76px); line-height: .98; }
.philosophy-body { margin-top: 30px; }
.philosophy-media-wrap { position: relative; min-height: 610px; }
.philosophy-media {
  position: absolute;
  inset: 0 0 48px 42px;
  border-radius: var(--radius-lg);
  background-image: url("../assets/images/philosophy.webp");
  background-size: cover;
  background-position: center 46%;
  box-shadow: var(--shadow);
}
.philosophy-note {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(360px, 73%);
  padding: 24px 28px;
  border-radius: 24px;
  background: rgba(113, 70, 47, .96);
  color: #fff8f0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  line-height: 1.25;
  box-shadow: 0 18px 45px rgba(69, 44, 29, .17);
}

.cats {
  background: var(--paper);
  border-top: 1px solid rgba(76, 53, 39, .06);
}
.cats-intro {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(46px, 8vw, 116px);
  align-items: end;
  margin-bottom: 54px;
}
.cats h2 { max-width: 520px; font-size: clamp(50px, 5.2vw, 76px); line-height: .98; }
.cats-intro-copy { max-width: 720px; }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.cat-card {
  overflow: hidden;
  border-radius: 25px;
  background: #f2e9dd;
  border: 1px solid rgba(92, 61, 42, .10);
  box-shadow: 0 14px 40px rgba(64, 43, 28, .07);
  transition: transform .24s ease, box-shadow .24s ease;
}
.cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(64, 43, 28, .12);
}
.cat-photo {
  aspect-ratio: 1 / 1.13;
  background-size: cover;
  background-position: center;
}
.cat-archie { background-image: url("../assets/images/archie.webp"); background-position: center 45%; }
.cat-theo { background-image: url("../assets/images/theo.webp"); background-position: center 43%; }
.cat-betty { background-image: url("../assets/images/betty.webp"); background-position: center 43%; }
.cat-suzy { background-image: url("../assets/images/suzy.webp"); background-position: center 38%; }
.cat-mia { background-image: url("../assets/images/mia.webp"); background-position: center 37%; }
.cat-chibi { background-image: url("../assets/images/chibi.webp"); background-position: center 43%; }
.cat-tiff { background-image: url("../assets/images/tiff.webp"); background-position: center 41%; }
.cat-geigei { background-image: url("../assets/images/geigei.webp"); background-position: center 42%; }
.cat-meta { padding: 18px 18px 20px; }
.cat-meta h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.025em;
}

@media (max-width: 1020px) {
  .desktop-nav { gap: 18px; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --shell: min(100% - 32px, 720px); }
  .header-inner { min-height: 72px; }
  .brand-name { font-size: 25px; }
  .brand-tag { font-size: 9px; }
  .desktop-nav { display: none; }
  .menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .menu-toggle span { display: block; width: 100%; height: 1px; background: var(--ink); }
  .mobile-menu {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease, border-color .28s ease;
    border-top: 1px solid transparent;
  }
  .mobile-menu.is-open {
    max-height: 260px;
    border-color: var(--line);
  }
  .mobile-menu-inner { width: var(--shell); margin: 0 auto; padding: 6px 0 14px; }
  .mobile-menu a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
  .mobile-menu a:last-child { border-bottom: 0; }

  .hero { min-height: 710px; padding-top: 72px; align-items: end; }
  .hero-image { background-position: 62% center; }
  .hero-overlay {
    background:
      linear-gradient(0deg, rgba(36,26,20,.78) 0%, rgba(36,26,20,.44) 48%, rgba(36,26,20,.09) 78%),
      linear-gradient(90deg, rgba(30,22,17,.18), transparent 70%);
  }
  .hero-copy { padding: 0 0 62px; max-width: 610px; }
  .hero h1 { font-size: clamp(61px, 18vw, 88px); }
  .hero-subtitle { font-size: clamp(25px, 7.3vw, 36px); }

  .section { padding: 84px 0; }
  .story-grid,
  .philosophy-grid,
  .cats-intro { grid-template-columns: 1fr; gap: 52px; }
  .story-media-wrap,
  .philosophy-media-wrap { min-height: 520px; }
  .story-media { inset: 0 24px 26px 0; }
  .story-copy,
  .philosophy-copy { max-width: 680px; }
  .philosophy-media { inset: 0 0 44px 24px; }
  .philosophy-note { width: min(370px, 82%); }
  .cats-intro { align-items: start; margin-bottom: 42px; }
}

@media (max-width: 540px) {
  :root { --shell: calc(100vw - 28px); --radius-lg: 24px; }
  .header-actions { gap: 8px; }
  .lang-switch { font-size: 11px; }
  .brand-tag { display: none; }
  .hero { min-height: 690px; }
  .hero-copy { padding-bottom: 38px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .button { min-height: 48px; padding-inline: 16px; }
  .story-media-wrap,
  .philosophy-media-wrap { min-height: 430px; }
  .story-media { inset: 0 16px 20px 0; }
  .story h2,
  .philosophy h2,
  .cats h2 { font-size: 48px; }
  .story-body,
  .philosophy-body,
  .cats-intro-copy { font-size: 15.5px; line-height: 1.8; }
  .philosophy-media { inset: 0 0 38px 12px; }
  .philosophy-note { width: 86%; padding: 20px 22px; font-size: 20px; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cat-card { border-radius: 18px; }
  .cat-meta { padding: 13px 14px 15px; }
  .cat-meta h3 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}


/* Batch 3: kittens, Instagram, contact, footer */
.kittens { background: var(--ivory); border-top: 1px solid rgba(76,53,39,.06); }
.kittens-grid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(54px,8vw,112px); align-items:center; }
.kittens-media { min-height:650px; border-radius:var(--radius-lg); background-image:url("../assets/images/available-kittens.webp"); background-size:cover; background-position:center 46%; box-shadow:var(--shadow); }
.kittens h2,.instagram h2,.contact h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.045em; font-size:clamp(50px,5.2vw,76px); line-height:.98; }
.kittens-body { margin-top:30px; color:var(--ink-soft); font-size:17px; line-height:1.85; }
.kittens-body p { margin:0 0 16px; }
.button-copper { margin-top:18px; background:var(--copper-dark); color:#fff8f0; }

.instagram { background:var(--paper); border-top:1px solid rgba(76,53,39,.06); }
.instagram-heading { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:40px; }
.instagram-handle { color:var(--copper-dark); font-weight:700; font-size:14px; border-bottom:1px solid rgba(113,70,47,.35); padding-bottom:3px; }
.instagram-widget { width:100%; min-height:320px; }
.instagram-widget behold-widget { display:block; width:100%; }
.instagram-noscript { margin:18px 0 0; color:var(--ink-soft); font-size:14px; }
.instagram-noscript a { color:var(--copper-dark); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

.contact { background:var(--copper-dark); color:#fff8f0; }
.contact-card { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(50px,8vw,110px); align-items:center; }
.contact .section-kicker { color:#e7c7ad; }
.contact-copy p:last-child { max-width:590px; color:rgba(255,248,240,.78); font-size:17px; line-height:1.8; margin-top:26px; }
.contact-links { display:grid; border-top:1px solid rgba(255,255,255,.22); }
.contact-links a { display:flex; justify-content:space-between; gap:20px; padding:22px 4px; border-bottom:1px solid rgba(255,255,255,.22); font-size:18px; }
.contact-links a:hover { color:#f0d4bf; }

.site-footer { background:#2e2119; color:rgba(255,248,240,.72); padding:28px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; font-size:13px; }
.footer-inner div { display:flex; gap:12px; align-items:baseline; }
.footer-inner strong { color:#fff8f0; font-family:Georgia,"Times New Roman",serif; font-size:20px; font-weight:400; }
.footer-inner span { letter-spacing:.08em; }

@media (max-width:1100px) {
  .desktop-nav { gap:14px; }
  .desktop-nav a { font-size:12.5px; }
}
@media (max-width:860px) {
  .kittens-grid,.contact-card { grid-template-columns:1fr; gap:48px; }
  .kittens-media { min-height:560px; }
  .instagram-heading { align-items:start; flex-direction:column; }
}
@media (max-width:540px) {
  .kittens-media { min-height:500px; }
  .kittens h2,.instagram h2,.contact h2 { font-size:48px; }
  .kittens-body,.contact-copy p:last-child { font-size:15.5px; line-height:1.8; }
  .contact-links a { font-size:15px; padding:18px 2px; }
  .footer-inner { align-items:flex-start; flex-direction:column; gap:10px; }
}

/* Batch 6 UAT polish */
.desktop-nav a { font-size: 14px; }

@media (max-width: 1100px) {
  .desktop-nav a { font-size: 13px; }
}

@media (max-width: 860px) {
  .section { padding: 76px 0; }
  .story-grid,
  .philosophy-grid,
  .cats-intro { gap: 40px; }
  .story-media-wrap,
  .philosophy-media-wrap { min-height: 480px; }
  .cats-intro { margin-bottom: 34px; }
  .kittens-grid,
  .contact-card { gap: 36px; }
  .kittens-media { min-height: 520px; }
  .instagram-heading {
    gap: 8px;
    margin-bottom: 30px;
  }
  .instagram-handle { font-size: 13px; }
}

@media (max-width: 540px) {
  .section { padding: 64px 0; }
  .story-media-wrap,
  .philosophy-media-wrap { min-height: 390px; }
  .story-body,
  .philosophy-body,
  .cats-intro-copy,
  .kittens-body,
  .contact-copy p:last-child {
    font-size: 16px;
    line-height: 1.78;
  }
  .story-body,
  .philosophy-body,
  .kittens-body { margin-top: 24px; }
  .story-signoff { margin-top: 26px; }
  .kittens-media { min-height: 440px; }
  .instagram-heading { margin-bottom: 24px; }
  .instagram h2 { line-height: 1.02; }
}

/* v8: CJK typography and hero tuning for Traditional/Simplified Chinese */
html[data-lang="zh-hant"] body {
  font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
}
html[data-lang="zh-hans"] body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
}
html[data-lang="zh-hant"] .hero h1,
html[data-lang="zh-hant"] .story h2,
html[data-lang="zh-hant"] .philosophy h2,
html[data-lang="zh-hant"] .cats h2,
html[data-lang="zh-hant"] .hero-subtitle {
  font-family: "Songti TC", "Noto Serif CJK TC", "PMingLiU", "MingLiU", serif;
  letter-spacing: -0.02em;
}
html[data-lang="zh-hans"] .hero h1,
html[data-lang="zh-hans"] .story h2,
html[data-lang="zh-hans"] .philosophy h2,
html[data-lang="zh-hans"] .cats h2,
html[data-lang="zh-hans"] .hero-subtitle {
  font-family: "Songti SC", "Noto Serif CJK SC", "SimSun", serif;
  letter-spacing: -0.02em;
}
html[data-lang^="zh-"] .hero-copy {
  max-width: 760px;
}
html[data-lang^="zh-"] .hero h1 {
  max-width: 760px;
  font-size: clamp(64px, 6vw, 88px);
  line-height: 1.02;
  font-weight: 500;
}
html[data-lang^="zh-"] .hero-subtitle {
  max-width: 720px;
  margin-top: 28px;
  font-size: clamp(27px, 2.6vw, 38px);
  line-height: 1.32;
  font-weight: 400;
}
html[data-lang^="zh-"] .story h2,
html[data-lang^="zh-"] .philosophy h2,
html[data-lang^="zh-"] .cats h2 {
  font-size: clamp(46px, 4.4vw, 64px);
  line-height: 1.12;
  font-weight: 500;
}

@media (max-width: 860px) {
  html[data-lang^="zh-"] .hero h1 {
    font-size: clamp(52px, 11vw, 70px);
  }
  html[data-lang^="zh-"] .hero-subtitle {
    font-size: clamp(23px, 5.2vw, 31px);
    line-height: 1.38;
  }
}

@media (max-width: 540px) {
  html[data-lang^="zh-"] .hero h1 {
    font-size: clamp(46px, 13vw, 58px);
    line-height: 1.06;
  }
  html[data-lang^="zh-"] .hero-subtitle {
    font-size: 23px;
    line-height: 1.42;
  }
  html[data-lang^="zh-"] .story h2,
  html[data-lang^="zh-"] .philosophy h2,
  html[data-lang^="zh-"] .cats h2 {
    font-size: 42px;
    line-height: 1.16;
  }
}