/* Cracking Bread Studio — Đất Độc landing page
   Palette is taken from the setting: river silt, mud, well moss, lime-washed walls, joss-paper gold. */
:root {
  --mud: #241c14;        /* page background: wet silt */
  --mud-deep: #18120c;   /* deeper bands */
  --silt: #6e4e30;       /* river-bank brown, rules and borders */
  --moss: #4c5a3e;       /* well moss, secondary tone */
  --lime: #e6decb;       /* lime-washed wall: primary text */
  --lime-dim: #b8ae98;   /* secondary text */
  --gold: #c9a23f;       /* joss-paper gold: the only accent */

  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;

  /* type scale (≈ 1.25 ratio, 18px base) */
  --fs-small: 0.889rem;
  --fs-body: 1.125rem;
  --fs-lede: 1.375rem;
  --fs-h3: 1.5rem;
  --fs-h2: 2.25rem;

  --gutter: clamp(16px, 4vw, 48px);
  --measure: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--mud);
  color: var(--lime);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 50;
  background: var(--lime); color: var(--mud); padding: 8px 14px;
  font-family: var(--sans); font-size: var(--fs-small); text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------------------------------------------------------------- top bar */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: clamp(12px, 3vw, 40px);
  padding: 14px var(--gutter);
  font-family: var(--sans); font-size: 0.95rem;
  transition: background-color .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.topbar.is-solid { background: rgba(24, 18, 12, .92); border-bottom-color: rgba(110, 78, 48, .5); }
@supports (backdrop-filter: blur(6px)) {
  .topbar.is-solid { background: rgba(24, 18, 12, .78); backdrop-filter: blur(6px); }
}
.brand { flex: none; display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: .01em; }
.nav { display: flex; gap: clamp(14px, 2.4vw, 32px); margin-left: auto; }
.nav a { white-space: nowrap; text-decoration: none; color: var(--lime-dim); padding: 4px 0; border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--lime); border-bottom-color: var(--gold); }

.lang { display: flex; border: 1px solid var(--silt); }
.lang button {
  font: inherit; font-size: .8rem; font-weight: 500;
  background: none; color: var(--lime-dim); border: 0;
  padding: 4px 10px; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--lime); color: var(--mud); }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; overflow: hidden;
  background: var(--mud-deep);
}
.hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.fog {
  position: absolute; left: -50%; width: 200%; pointer-events: none;
  background:
    radial-gradient(ellipse 18% 40% at 20% 50%, rgba(214, 200, 168, .22), transparent 70%),
    radial-gradient(ellipse 22% 35% at 55% 55%, rgba(214, 200, 168, .18), transparent 70%),
    radial-gradient(ellipse 16% 45% at 85% 45%, rgba(214, 200, 168, .2), transparent 70%);
}
.fog-a { top: 48%; height: 34%; animation: drift 90s linear infinite; }
.fog-b { top: 58%; height: 40%; opacity: .8; animation: drift 140s linear infinite reverse; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(25%); } }

.hero-copy {
  position: relative; z-index: 2; text-align: center;
  padding: 0 var(--gutter); margin-top: -6vh;
}

/* The title sinks into the silt: its lower part fades into the scene. */
.title { margin: 0; display: grid; justify-items: center; line-height: 1; }
.title-vi {
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(4.2rem, 15vw, 11.5rem);
  letter-spacing: -.02em; line-height: .95;
  padding-bottom: .12em;
  /* lime-washed at the top, turning to river silt toward the base; diacritics below
     the baseline (the dot in "ộ") stay visible in silt brown */
  background: linear-gradient(to bottom, #f1ead8 0%, #e6decb 44%, #a98a5e 72%, #6e4e30 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(0, 0, 0, .25);
}
.title-en {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  color: var(--lime-dim); margin-top: .1em;
}
.hook {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--lime);
  margin: 1.6rem auto 2rem; max-width: 36ch; text-wrap: balance;
}
.cta {
  display: inline-block; font-family: var(--sans); font-size: .95rem; font-weight: 500;
  text-decoration: none; color: var(--mud); background: var(--lime);
  padding: 12px 22px; border: 1px solid var(--lime);
  transition: background-color .2s ease, color .2s ease;
}
.cta:hover { background: transparent; color: var(--lime); }

/* One orchestrated moment: the fog thins and the title surfaces. */
@media (prefers-reduced-motion: no-preference) {
  .title-vi { animation: surface 2.6s cubic-bezier(.2, .7, .2, 1) .3s both; }
  .title-en, .hook, .cta { animation: appear 1.2s ease 1.9s both; }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(ellipse at 50% 60%, rgba(196, 182, 150, .55), rgba(36, 28, 20, .95) 75%);
    animation: clear 2.8s ease .1s both;
  }
}
@keyframes surface { from { opacity: 0; filter: blur(10px); transform: translateY(.18em); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes clear { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fog { animation: none; }
}

/* ---------------------------------------------------------------- sections */
main > section { padding: clamp(64px, 10vw, 128px) 0; }
h2 {
  font-family: var(--serif); font-weight: 800; font-size: var(--fs-h2);
  line-height: 1.15; margin: 0 0 1.5rem; letter-spacing: -.005em;
}

/* news: a dated list, as on a studio notice board */
.news { background: var(--mud-deep); }
.news-list { list-style: none; margin: 0; padding: 0; max-width: 820px; border-top: 1px solid var(--silt); }
.news-list li {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem;
  padding: 1.1rem 0; border-bottom: 1px solid rgba(110, 78, 48, .55);
}
.news-list time {
  font-family: var(--sans); font-size: var(--fs-small); color: var(--gold);
  font-variant-numeric: tabular-nums; padding-top: .2rem;
}
.news-list p { margin: 0; }

/* game */
.game-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 88px); align-items: center;
}
.keyart { margin: 0; border: 1px solid var(--silt); padding: 10px; background: var(--mud-deep); }
.keyart img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.game-copy { max-width: var(--measure); }
.game-copy h2 .sub {
  display: block; font-weight: 400; font-style: italic;
  font-size: var(--fs-lede); color: var(--lime-dim); margin-top: .35rem;
}
.lede { font-size: var(--fs-lede); line-height: 1.55; margin: 0 0 1.1rem; }
.game-copy p { margin: 0 0 1.1rem; }

.facts {
  margin: 2rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--silt);
}
.facts div { padding: .85rem 0; border-bottom: 1px solid rgba(110, 78, 48, .55); }
.facts div:nth-child(odd) { padding-right: 1rem; }
.facts dt { font-family: var(--sans); font-size: var(--fs-small); color: var(--lime-dim); }
.facts dd { margin: .15rem 0 0; }

.pillars {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px); margin-top: clamp(72px, 10vw, 120px);
}
.pillars-title {
  grid-column: 1 / -1; margin: 0;
  font-family: var(--serif); font-weight: 800; font-size: var(--fs-h2); line-height: 1.15;
}
.pillar { border-left: 2px solid var(--moss); padding-left: 1.25rem; }
.pillar h4 { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; margin: 0 0 .6rem; }
.pillar p { margin: 0; color: var(--lime-dim); }

/* gallery (enable in index.html once screenshots exist) */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.gallery-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--silt); }

/* studio */
.studio { background: var(--mud-deep); }
.studio-inner { display: flex; gap: 28px; align-items: flex-start; max-width: 820px; }
.studio-inner img { flex: none; }
.studio p { margin: 0; max-width: 56ch; }
.studio-facts { margin-top: 1.5rem; max-width: 640px; }
.studio-facts a { text-decoration-color: var(--gold); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* building with Claude: how the studio works */
.with-claude { max-width: 820px; margin-top: clamp(56px, 8vw, 96px); }
.with-claude-title {
  margin: 0 0 1rem;
  font-family: var(--serif); font-weight: 800; font-size: var(--fs-h2); line-height: 1.15;
}
.studio .with-claude-intro { margin: 0 0 2rem; max-width: var(--measure); }
.uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); max-width: 960px; }
/* line the block up with the studio text column (logo 72px + gap 28px) */
@media (min-width: 641px) { .studio .with-claude > * { margin-left: 100px; } }

/* footer */
.footer { border-top: 1px solid rgba(110, 78, 48, .55); padding: 28px 0; font-family: var(--sans); font-size: var(--fs-small); color: var(--lime-dim); }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer p { margin: 0; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--lime); }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 860px) {
  .game-grid { grid-template-columns: 1fr; }
  .keyart { max-width: 440px; }
  .pillars { grid-template-columns: 1fr; }
  .uses { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .brand-name { display: none; }
  .topbar { gap: 12px; font-size: .875rem; }
  .nav { gap: 14px; }
  .lang button { padding: 4px 8px; }
  .news-list li { grid-template-columns: 1fr; gap: .25rem; }
  .facts { grid-template-columns: 1fr; }
  .facts div:nth-child(odd) { padding-right: 0; }
  .studio-inner { flex-direction: column; gap: 18px; }
  :root { --fs-h2: 1.875rem; --fs-lede: 1.25rem; }
}
/* very narrow phones: logo + language on the first row, menu on the second */
@media (max-width: 420px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; padding-top: 10px; padding-bottom: 8px; }
  .lang { margin-left: auto; }
  .nav { order: 3; width: 100%; margin-left: 0; }
}