:root {
  --hz-ink: #17342f;
  --hz-ink-deep: #0c2522;
  --hz-celadon: #7fa99a;
  --hz-celadon-pale: #dce9e1;
  --hz-water: #4d8390;
  --hz-water-pale: #c8dde0;
  --hz-tea: #617c43;
  --hz-lotus: #c96f72;
  --hz-gold: #c39a4a;
  --hz-silk: #f5f0e4;
  --hz-paper: #fbf8ef;
  --hz-stone: #a8aea4;
}

body[data-region="hangzhou"] {
  background:
    radial-gradient(circle at 13% 7%, rgba(127,169,154,.18), transparent 25rem),
    radial-gradient(circle at 90% 16%, rgba(201,111,114,.09), transparent 24rem),
    repeating-linear-gradient(0deg, rgba(23,52,47,.026) 0 1px, transparent 1px 3rem),
    var(--hz-silk);
}

.hz-label { display: inline-flex; align-items: center; gap: .55rem; color: var(--hz-lotus); font-size: .66rem; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
.hz-label::before { content: ""; width: 1.8rem; height: 1px; background: currentColor; }
.hz-meta { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.3rem; }
.hz-meta span { padding: .48rem .72rem; color: var(--hz-ink); border: 1px solid rgba(23,52,47,.35); border-radius: 999px; background: rgba(255,255,255,.42); font-size: .65rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.hz-note { padding: 1.1rem 1.2rem; border-left: 4px solid var(--hz-lotus); color: var(--hz-ink); background: rgba(255,255,255,.7); }

/* Hub: West Lake is a compass, not a backdrop. */
.hz-lake-hero { display: grid; grid-template-columns: .88fr 1.12fr; min-height: 45rem; overflow: hidden; color: var(--hz-ink); background: var(--hz-celadon-pale); }
.hz-lake-copy { position: relative; z-index: 2; align-self: center; padding: clamp(3rem,6vw,6.2rem); }
.hz-lake-copy::after { content: "30.2590 N / 120.1480 E"; display: block; margin-top: 2.2rem; color: var(--hz-water); font-size: .62rem; font-weight: 950; letter-spacing: .15em; }
.hz-lake-copy h1 { margin: .8rem 0 1rem; color: var(--hz-ink); font: 500 clamp(4rem,7.2vw,7.6rem)/.78 Georgia, serif; letter-spacing: -.055em; }
.hz-lake-copy h1 span { display: block; margin-top: .35rem; color: var(--hz-lotus); font-size: .39em; font-style: italic; letter-spacing: -.025em; line-height: 1.02; }
.hz-lake-copy p { max-width: 40rem; color: rgba(23,52,47,.78); }
.hz-lake-photo { position: relative; min-height: 45rem; margin: 1.1rem 1.1rem 1.1rem 0; overflow: hidden; border: .55rem solid rgba(255,255,255,.58); border-radius: 52% 52% .4rem .4rem / 12rem 12rem .4rem .4rem; background: var(--hz-water); }
.hz-lake-photo img { width: 100%; height: 100%; object-fit: cover; }
.hz-lake-photo::after { content: "LAKE / CITY / HILLS"; position: absolute; right: 1.1rem; bottom: 1.1rem; padding: .72rem .9rem; color: #fff; border: 1px solid rgba(255,255,255,.48); background: rgba(12,37,34,.74); font-size: .62rem; font-weight: 950; letter-spacing: .14em; }

.lake-compass { display: grid; grid-template-columns: repeat(3,1fr); grid-template-areas: ". north ." "west lake east" ". south ."; gap: .75rem; padding: .75rem; color: #fff; background: var(--hz-ink-deep); }
.lake-compass article { min-height: 12rem; padding: 1.3rem; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.055); }
.lake-compass article:nth-child(1) { grid-area: north; }
.lake-compass article:nth-child(2) { grid-area: west; }
.lake-compass article:nth-child(3) { grid-area: east; }
.lake-compass article:nth-child(4) { grid-area: south; }
.lake-compass .lake-core { grid-area: lake; display: grid; place-items: center; min-height: 16rem; padding: 2rem; border-radius: 50%; color: var(--hz-ink-deep); background: var(--hz-water-pale); text-align: center; }
.lake-compass small { color: #ebcf8c; font-weight: 950; letter-spacing: .12em; }
.lake-compass h2, .lake-compass h3 { margin: .45rem 0; color: inherit; font: 500 1.5rem/1 Georgia, serif; }
.lake-compass p { color: inherit; opacity: .76; }

.hz-chapters { display: grid; grid-template-columns: repeat(12,1fr); gap: 1rem; }
.hz-card { position: relative; min-height: 25rem; overflow: hidden; color: #fff; background: var(--hz-ink-deep); }
.hz-card:nth-child(1), .hz-card:nth-child(6) { grid-column: span 7; border-radius: 7rem .4rem .4rem .4rem; }
.hz-card:nth-child(2), .hz-card:nth-child(5) { grid-column: span 5; }
.hz-card:nth-child(3), .hz-card:nth-child(4), .hz-card:nth-child(7), .hz-card:nth-child(8) { grid-column: span 6; }
.hz-card:nth-child(3), .hz-card:nth-child(8) { border-radius: .4rem 7rem .4rem .4rem; }
.hz-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.88); transition: transform .4s ease, filter .4s ease; }
.hz-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,37,34,.02) 18%, rgba(12,37,34,.96) 100%); }
.hz-card-copy { position: absolute; z-index: 2; inset: auto 0 0; padding: 1.55rem; }
.hz-card small { color: #ebcf8c; font-weight: 950; letter-spacing: .13em; }
.hz-card h3 { margin: .45rem 0; color: #fff; font: 500 1.8rem/1 Georgia, serif; }
.hz-card p { color: rgba(255,255,255,.79); }
.hz-card strong { color: #fff; }
.hz-card:hover img, .hz-card:focus img { transform: scale(1.035); filter: saturate(1); }

.hz-arrival-slips { display: grid; grid-template-columns: 1.15fr repeat(3,1fr); gap: .7rem; padding: .7rem; background: var(--hz-celadon); }
.hz-arrival-slips article { min-height: 16rem; padding: 1.35rem; background: var(--hz-paper); box-shadow: .3rem .3rem 0 rgba(23,52,47,.14); }
.hz-arrival-slips article:first-child { color: #fff; background: var(--hz-ink); }
.hz-arrival-slips small { color: var(--hz-lotus); font-weight: 950; letter-spacing: .12em; }
.hz-arrival-slips article:first-child small { color: #ebcf8c; }
.hz-arrival-slips h2, .hz-arrival-slips h3 { color: inherit; font: 500 1.5rem/1 Georgia, serif; }
.hz-arrival-slips p { color: inherit; opacity: .76; }

/* Shared chapter opening: a moon gate beside a field note. */
.hz-chapter-hero { display: grid; grid-template-columns: 1.06fr .94fr; min-height: 42rem; padding: 1rem; gap: 1rem; color: var(--hz-ink); background: var(--hz-celadon-pale); }
.hz-chapter-photo { position: relative; min-height: 40rem; overflow: hidden; border-radius: 13rem 13rem .35rem .35rem / 8rem 8rem .35rem .35rem; }
.hz-chapter-photo img { width: 100%; height: 100%; object-fit: cover; }
.hz-chapter-photo::after { content: attr(data-stamp); position: absolute; left: 1rem; bottom: 1rem; padding: .72rem .9rem; color: #fff; background: rgba(12,37,34,.8); font-size: .62rem; font-weight: 950; letter-spacing: .13em; }
.hz-chapter-copy { align-self: center; padding: clamp(2.5rem,5vw,5rem); }
.hz-chapter-copy h1 { margin: .75rem 0 1rem; color: var(--hz-ink); font: 500 clamp(3.5rem,6.4vw,6.8rem)/.8 Georgia, serif; letter-spacing: -.05em; }
.hz-chapter-copy h1 span { display: block; margin-top: .35rem; color: var(--hz-lotus); font-size: .42em; font-style: italic; line-height: 1.05; }
.hz-chapter-copy p { color: rgba(23,52,47,.78); }

/* 01: north shore as a causeway sequence. */
.causeway-sequence { position: relative; display: grid; grid-template-columns: repeat(5,1fr); padding: 4rem .8rem .8rem; gap: .65rem; background: var(--hz-water-pale); }
.causeway-sequence::before { content: ""; position: absolute; top: 2.2rem; left: 8%; right: 8%; height: .45rem; border-radius: 999px; background: var(--hz-water); }
.causeway-sequence article { position: relative; min-height: 18rem; padding: 1.35rem; background: rgba(255,255,255,.82); }
.causeway-sequence article::before { content: ""; position: absolute; top: -2.35rem; left: 1.2rem; width: 1rem; height: 1rem; border: .3rem solid var(--hz-water-pale); border-radius: 50%; background: var(--hz-lotus); box-shadow: 0 0 0 .18rem var(--hz-lotus); }
.causeway-sequence article:nth-child(2n) { transform: translateY(1.2rem); }

/* 02: south shore as a sunset aperture. */
.sunset-aperture { position: relative; display: grid; grid-template-columns: .85fr 1.3fr .85fr; gap: .8rem; padding: .8rem; overflow: hidden; color: #fff; background: #5e3334; }
.sunset-aperture::before { content: ""; position: absolute; top: -12rem; left: 50%; width: 27rem; height: 27rem; border-radius: 50%; background: rgba(235,207,140,.2); transform: translateX(-50%); }
.sunset-aperture article { position: relative; z-index: 1; min-height: 22rem; padding: 1.6rem; border: 1px solid rgba(255,255,255,.24); }
.sunset-aperture article:nth-child(2) { padding-top: 8rem; color: var(--hz-ink); border-radius: 12rem 12rem .3rem .3rem; background: #ecd594; }

/* 03: Lingyin as nested thresholds. */
.temple-thresholds { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; padding: 1rem; color: #fff; background: var(--hz-ink-deep); }
.temple-thresholds article { min-height: 20rem; padding: 1.5rem; border: 1px solid rgba(235,207,140,.38); border-radius: 6rem 6rem .25rem .25rem / 3.5rem 3.5rem .25rem .25rem; }
.temple-thresholds article:nth-child(2) { background: rgba(97,124,67,.5); }
.temple-thresholds article:nth-child(3) { color: var(--hz-ink); background: var(--hz-silk); }
.temple-thresholds article:nth-child(4) { background: rgba(201,111,114,.42); }

/* 04: Longjing as tea contours and trail decisions. */
.tea-contours { display: grid; grid-template-columns: 1.25fr repeat(3,1fr); gap: .8rem; padding: .8rem; color: #fff; background:
  repeating-radial-gradient(ellipse at 10% 110%, transparent 0 2.1rem, rgba(255,255,255,.13) 2.15rem 2.25rem),
  var(--hz-tea); }
.tea-contours article { min-height: 20rem; padding: 1.5rem; border: 1px solid rgba(255,255,255,.25); background: rgba(12,37,34,.18); backdrop-filter: blur(1px); }
.tea-contours article:first-child { border-radius: 9rem 0 0; background: rgba(12,37,34,.52); }

/* 05: the Grand Canal as a working manifest. */
.canal-manifest { display: grid; grid-template-columns: .8fr repeat(4,1fr); border: 1px solid rgba(23,52,47,.32); background: var(--hz-paper); }
.canal-manifest article { min-height: 19rem; padding: 1.4rem; border-right: 1px solid rgba(23,52,47,.2); }
.canal-manifest article:first-child { color: #fff; background: var(--hz-water); }
.canal-manifest article:last-child { border-right: 0; }
.canal-manifest small { display: inline-block; padding: .3rem .45rem; color: var(--hz-lotus); border: 1px solid currentColor; font-weight: 950; letter-spacing: .11em; transform: rotate(-2deg); }

/* 06: Hefang as a street of unequal shopfronts. */
.song-street { display: grid; grid-template-columns: .8fr 1.15fr .9fr 1.2fr; align-items: end; gap: .7rem; padding: .7rem; color: #fff; background: #3c2824; }
.song-street article { min-height: 18rem; padding: 1.4rem; border-top: .55rem solid var(--hz-gold); background: #743f35; }
.song-street article:nth-child(2) { min-height: 23rem; background: var(--hz-ink); }
.song-street article:nth-child(3) { min-height: 20rem; color: var(--hz-ink); background: #e7d7b7; }
.song-street article:nth-child(4) { min-height: 25rem; background: #5f6841; }

/* 07: Xixi as water channels rather than a rectangular park. */
.wetland-channels { display: grid; grid-template-columns: repeat(6,1fr); gap: .7rem; padding: .7rem; color: #fff; background: var(--hz-water); }
.wetland-channels article { min-height: 16rem; padding: 1.35rem; border-radius: 4rem .4rem 4rem .4rem; background: rgba(12,37,34,.72); }
.wetland-channels article:nth-child(1), .wetland-channels article:nth-child(4) { grid-column: span 2; }
.wetland-channels article:nth-child(2), .wetland-channels article:nth-child(3) { grid-column: span 2; transform: translateY(2rem); }
.wetland-channels article:nth-child(4) { grid-column: 2 / span 2; }
.wetland-channels article:nth-child(5) { grid-column: 4 / span 2; }
.wetland-channels article:nth-child(3), .wetland-channels article:nth-child(5) { color: var(--hz-ink); background: var(--hz-celadon-pale); }

/* 08: Liangzhu as archaeological strata. */
.archaeology-strata { display: grid; gap: .35rem; padding: .7rem; background: #8a7357; }
.archaeology-strata article { display: grid; grid-template-columns: .35fr 1fr; gap: 1rem; min-height: 9rem; padding: 1.4rem; color: var(--hz-ink); background: #efe5cd; }
.archaeology-strata article:nth-child(2) { margin-inline: 4%; background: #d8d8c2; }
.archaeology-strata article:nth-child(3) { margin-inline: 8%; color: #fff; background: #7b9071; }
.archaeology-strata article:nth-child(4) { margin-inline: 12%; color: #fff; background: #3f5c58; }
.archaeology-strata article:nth-child(5) { margin-inline: 16%; color: #fff; background: #2d3935; }

.causeway-sequence h2, .causeway-sequence h3,
.sunset-aperture h2, .sunset-aperture h3,
.temple-thresholds h2, .temple-thresholds h3,
.tea-contours h2, .tea-contours h3,
.canal-manifest h2, .canal-manifest h3,
.song-street h2, .song-street h3,
.wetland-channels h2, .wetland-channels h3,
.archaeology-strata h2, .archaeology-strata h3 { margin: .55rem 0; color: inherit; font: 500 1.48rem/1 Georgia, serif; }
.sunset-aperture p, .temple-thresholds p, .tea-contours p, .song-street p, .wetland-channels p { color: inherit; opacity: .79; }
.causeway-sequence small, .temple-thresholds small, .tea-contours small, .song-street small, .wetland-channels small, .archaeology-strata small { color: var(--hz-lotus); font-size: .64rem; font-weight: 950; letter-spacing: .12em; }
.temple-thresholds small, .tea-contours small, .song-street small, .wetland-channels small { color: #ebcf8c; }

.hz-route-ribbon { display: grid; grid-template-columns: repeat(4,1fr); counter-reset: hz-route; border-top: 5px solid var(--hz-water); background: #fff; }
.hz-route-ribbon article { position: relative; min-height: 17rem; padding: 3.7rem 1.35rem 1.35rem; border-right: 1px solid rgba(23,52,47,.16); counter-increment: hz-route; }
.hz-route-ribbon article::before { content: "0" counter(hz-route); position: absolute; top: 1rem; left: 1.35rem; color: var(--hz-lotus); font: 500 1.7rem/1 Georgia, serif; }
.hz-route-ribbon article:last-child { border-right: 0; }
.hz-route-ribbon h3 { margin: .3rem 0 .6rem; font: 500 1.42rem/1 Georgia, serif; }

.hz-decision-grid, .hz-practical-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.hz-decision-grid article, .hz-practical-grid article { padding: 1.45rem; border-top: 4px solid var(--hz-celadon); background: rgba(255,255,255,.8); box-shadow: 0 .65rem 1.8rem rgba(23,52,47,.08); }
.hz-decision-grid article:nth-child(2), .hz-practical-grid article:nth-child(2) { border-color: var(--hz-lotus); }
.hz-decision-grid article:nth-child(3), .hz-practical-grid article:nth-child(3) { border-color: var(--hz-gold); }
.hz-decision-grid h2, .hz-decision-grid h3, .hz-practical-grid h2, .hz-practical-grid h3 { font: 500 1.45rem/1 Georgia, serif; }

html[lang="ko"] .hz-lake-copy h1,
html[lang="th"] .hz-lake-copy h1,
html[lang="ko"] .hz-chapter-copy h1,
html[lang="th"] .hz-chapter-copy h1 { font-size: clamp(3rem,5vw,5.2rem); line-height: .9; word-break: keep-all; }

@media (max-width: 1100px) {
  .hz-lake-hero, .hz-chapter-hero { grid-template-columns: 1fr; }
  .hz-lake-photo { min-height: 32rem; margin: 0 1rem 1rem; border-radius: 9rem 9rem .4rem .4rem; }
  .hz-chapter-photo { min-height: 32rem; }
  .hz-arrival-slips, .causeway-sequence, .temple-thresholds, .tea-contours, .canal-manifest, .song-street { grid-template-columns: repeat(2,1fr); }
  .causeway-sequence::before, .causeway-sequence article::before { display: none; }
  .causeway-sequence { padding-top: .8rem; }
  .causeway-sequence article:nth-child(2n) { transform: none; }
  .wetland-channels { grid-template-columns: repeat(2,1fr); }
  .wetland-channels article:nth-child(n) { grid-column: auto; transform: none; }
}

@media (max-width: 760px) {
  .hz-lake-copy, .hz-chapter-copy { padding: 2.5rem 1.25rem; }
  .hz-lake-copy h1, .hz-chapter-copy h1 { font-size: clamp(3.15rem,17vw,5rem); line-height: .91; }
  .hz-lake-photo, .hz-chapter-photo { min-height: 24rem; margin: .7rem; border-width: .35rem; border-radius: 6rem 6rem .35rem .35rem; }
  .lake-compass { grid-template-columns: 1fr; grid-template-areas: "lake" "north" "west" "east" "south"; }
  .lake-compass .lake-core { min-height: 12rem; border-radius: 6rem; }
  .hz-chapters { grid-template-columns: 1fr; }
  .hz-card:nth-child(n) { grid-column: auto; min-height: 25rem; border-radius: .35rem; }
  .hz-arrival-slips, .causeway-sequence, .sunset-aperture, .temple-thresholds, .tea-contours, .canal-manifest, .song-street, .wetland-channels, .hz-route-ribbon, .hz-decision-grid, .hz-practical-grid { grid-template-columns: 1fr; }
  .hz-arrival-slips article, .causeway-sequence article, .sunset-aperture article, .temple-thresholds article, .tea-contours article, .canal-manifest article, .song-street article, .wetland-channels article, .hz-route-ribbon article { min-height: auto; transform: none; border-right: 0; }
  .sunset-aperture article:nth-child(2) { padding-top: 5rem; border-radius: 6rem 6rem .3rem .3rem; }
  .temple-thresholds article { border-radius: 3rem 3rem .25rem .25rem; }
  .archaeology-strata article { grid-template-columns: 1fr; margin-inline: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hz-card img { transition: none; }
}