/* BICERA — Hiệp hội Gốm sứ Bình Dương TP.HCM
   Palette drawn from the three glaze lineages of Lái Thiêu ceramics:
   gốm Tiều (cobalt-on-white), gốm Phước Kiến (dark brown / deep amber),
   plus the clay brown of the association emblem in Decision 2854/QĐ-UBND. */

:root {
  --clay: #5f3a38;
  --clay-deep: #3a2220;
  --clay-soft: #8a6360;
  --cobalt: #1b3c6e;
  --cobalt-deep: #12294c;
  --cobalt-bright: #2f6cae;
  --kiln: #c8872f;
  --glaze: #f5f7f8;
  --glaze-dim: #e7ebee;
  --ink: #191a1d;
  --ink-soft: #55585f;
  --rule: #cfd6dc;

  --measure: 64ch;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --band: clamp(3.5rem, 8vw, 7rem);

  --sans: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

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

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

body {
  margin: 0;
  background: var(--glaze);
  color: var(--ink);
  font: 400 1.0625rem/1.72 var(--serif);
  font-synthesis-weight: none;
}

h1, h2, h3, h4, .sans { font-family: var(--sans); font-weight: 800; letter-spacing: -0.018em; }
h1, h2, h3 { line-height: 1.14; text-wrap: balance; margin: 0 0 0.6em; }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--cobalt-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cobalt); }
:focus-visible { outline: 3px solid var(--kiln); outline-offset: 3px; border-radius: 2px; }

img, svg { max-width: 100%; height: auto; }

.wrap { width: min(100%, 76rem); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { width: min(100%, 54rem); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--kiln); color: #fff; padding: 0.7rem 1.1rem;
  font: 600 0.95rem var(--sans);
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- header ---------- */
.masthead {
  background: var(--glaze);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 20;
}
.masthead__in {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 4.75rem; flex-wrap: wrap;
}
/* flex items default to min-width:auto, which lets them push past the
   viewport instead of wrapping — reset it so the bar stays inside 100vw */
.masthead__in > * { min-width: 0; }
.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: inherit; margin-right: auto; }
.brand img { width: 2.75rem; height: 2.75rem; display: block; border-radius: 3px; }
.brand__name { font: 800 1.2rem/1 var(--sans); letter-spacing: 0.01em; color: var(--clay-deep); display: block; }
.brand__org { font: 400 0.76rem/1.35 var(--sans); color: var(--ink-soft); display: block; margin-top: 0.22rem; max-width: 22ch; }

.nav { display: flex; align-items: center; gap: 1.35rem; flex-wrap: wrap; }
.nav a { font: 600 0.95rem var(--sans); color: var(--clay-deep); text-decoration: none; padding-block: 0.3rem; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--cobalt); border-bottom-color: var(--cobalt); }
.nav a[aria-current="page"] { color: var(--cobalt); border-bottom-color: var(--cobalt); }

.lang { display: flex; gap: 0.1rem; font: 600 0.82rem var(--sans); align-items: center; }
.lang a, .lang span { padding: 0.28rem 0.5rem; text-decoration: none; border-radius: 3px; }
.lang span { background: var(--clay); color: #fff; }
.lang a { color: var(--ink-soft); }
.lang a:hover { background: var(--glaze-dim); color: var(--clay-deep); }

/* ---------- hero ---------- */
.hero {
  background: var(--cobalt-deep);
  color: #eef3f8;
  position: relative;
  overflow: hidden;
}
.hero__in { position: relative; z-index: 2; padding-block: clamp(3.5rem, 9vw, 7.5rem); }
.hero h1 { color: #fff; max-width: 17ch; }
.hero__lede { font-size: clamp(1.1rem, 1.9vw, 1.3rem); color: #c6d6e8; max-width: 46ch; line-height: 1.62; }
.hero__mark {
  position: absolute; z-index: 1; pointer-events: none;
  right: -8%; top: 50%; translate: 0 -50%;
  width: min(48vw, 34rem); opacity: 0.17;
  filter: grayscale(1) brightness(2.4);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.2rem; }

.btn {
  display: inline-block; font: 600 0.98rem var(--sans); text-decoration: none;
  padding: 0.82rem 1.5rem; border: 1.5px solid transparent; border-radius: 2px;
}
.btn--solid { background: var(--kiln); color: #211502; }
.btn--solid:hover { background: #dd9a3d; color: #211502; }
.btn--ghost { border-color: #6d87a8; color: #dce7f2; }
.btn--ghost:hover { border-color: #fff; color: #fff; }

/* ---------- identity strip ---------- */
.ident { background: var(--clay); color: #f4e9e7; padding-block: 2.4rem; }
.ident dl { display: grid; gap: 1.6rem 2.5rem; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.ident dt { font: 600 0.78rem var(--sans); color: #d8b9b5; margin-bottom: 0.3rem; }
.ident dd { margin: 0; font: 400 1.02rem/1.5 var(--serif); color: #fff; }
.ident dd b { font-family: var(--sans); font-weight: 800; font-size: 1.5rem; display: block; line-height: 1.1; }

/* ---------- generic sections ---------- */
.lede { font-size: 1.2rem; line-height: 1.66; color: var(--ink-soft); max-width: 52ch; }
.section-head { max-width: 52ch; margin-bottom: 2.6rem; }

/* interior page title; the band that follows butts straight up against it */
.pagehead { padding-block: var(--band) 2.75rem; }
.pagehead h1 { max-width: 15ch; }
.pagehead + .band { padding-top: 0; }

/* duties: a definition list, not a card grid */
.duties { display: grid; gap: 0 3rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); margin: 0; }
.duties > div { padding-block: 1.5rem; border-top: 1px solid var(--rule); }
.duties dt { font: 600 1.08rem var(--sans); color: var(--clay-deep); margin-bottom: 0.45rem; }
.duties dd { margin: 0; color: var(--ink-soft); font-size: 0.99rem; line-height: 1.66; }

/* ---------- the distinctive band: three Lái Thiêu glaze lineages ---------- */
.lineages { background: var(--clay-deep); color: #efe6e4; }
.lineages h2 { color: #fff; }
.lineages .lede { color: #c9b6b3; }
.lineage-set { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 3rem; }
.lineage { padding: 0 1.75rem 1.75rem 0; }
/* Each swatch stands for a real glaze, so it is built like one: a specular
   arc where light catches the curve, pigment pooling thicker toward the foot,
   and a fine grain from the fired surface. */
.lineage__glaze {
  height: 8.5rem; border-radius: 2px; margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
  box-shadow: inset 0 -1.6rem 2.2rem -1rem rgba(0,0,0,.55),
              inset 0 0 0 1px rgba(255,255,255,.07);
}
/* specular highlight: light on a curved glazed wall */
.lineage__glaze::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(75% 46% at 26% 16%, rgba(255,255,255,.52), rgba(255,255,255,0) 62%),
    radial-gradient(30% 16% at 72% 8%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
}
/* fired grain + the uneven line where glaze stops short of the foot */
.lineage__glaze::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: .3;
}
.g-tieu { background: linear-gradient(168deg, #f2f5f8 0%, #dbe5ee 30%, #4f7db3 68%, var(--cobalt) 100%); }
.g-phuockien { background: linear-gradient(168deg, #a9772a 0%, #7d5312 38%, #43290f 74%, #241607 100%); }
.g-quang { background: linear-gradient(168deg, #4e8c6f 0%, #2f6d55 40%, #1d4a3c 76%, #102b23 100%); }
.lineage h3 { color: #fff; margin-bottom: 0.3rem; }
.lineage__meta { font: 600 0.8rem var(--sans); color: var(--kiln); margin-bottom: 0.7rem; }
.lineage p { color: #c9b6b3; font-size: 0.97rem; line-height: 1.65; }

/* ---------- feature / bid band ---------- */
.feature { background: var(--kiln); color: #241703; }
.feature h2 { color: #1b1100; }
.feature p { color: #3a2808; max-width: 54ch; }
.feature .btn--solid { background: #241703; color: #fbe9cb; }
.feature .btn--solid:hover { background: #3c2a0a; color: #fff; }

/* ---------- member tiers ---------- */
.tiers { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 2.4rem; }
.tier { border-top: 3px solid var(--cobalt); padding-top: 1.3rem; }
.tier:nth-child(2) { border-top-color: var(--clay); }
.tier:nth-child(3) { border-top-color: var(--kiln); }
.tier h3 { margin-bottom: 0.4rem; }
.tier p { font-size: 0.97rem; color: var(--ink-soft); }

/* ---------- prose blocks (charter text) ---------- */
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 1.9rem; color: var(--clay-deep); }
.prose ul, .prose ol { max-width: var(--measure); padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose--legal { border-left: 3px solid var(--rule); padding-left: 1.6rem; }

/* ---------- document list ---------- */
.docs { list-style: none; padding: 0; margin: 2rem 0 0; }
.docs li { border-top: 1px solid var(--rule); padding-block: 1.4rem; display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: baseline; }
.docs li:last-child { border-bottom: 1px solid var(--rule); }
.docs__title { font: 600 1.05rem var(--sans); flex: 1 1 22rem; }
.docs__title span { display: block; font: 400 0.92rem/1.5 var(--serif); color: var(--ink-soft); margin-top: 0.25rem; }
.docs__meta { font: 400 0.88rem var(--sans); color: var(--ink-soft); }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: 2.5rem 3.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 2.5rem; }
.contact-grid dt { font: 600 0.8rem var(--sans); color: var(--ink-soft); margin-bottom: 0.35rem; }
.contact-grid dd { margin: 0 0 1.5rem; font-size: 1.02rem; }

.notice {
  background: #fff8e8; border-left: 3px solid var(--kiln);
  padding: 1.15rem 1.4rem; font-size: 0.96rem; line-height: 1.6; margin-top: 2rem;
}
.notice p { max-width: 58ch; }

/* ---------- footer ---------- */
.foot { background: var(--clay-deep); color: #c6b4b1; padding-block: 3.5rem 2.5rem; font-size: 0.95rem; }
.foot a { color: #e4d4d1; }
.foot a:hover { color: #fff; }
.foot__top { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.foot h4 { font: 600 0.8rem var(--sans); color: #fff; margin: 0 0 0.9rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.5rem; }
.foot__brand img { width: 3.25rem; border-radius: 3px; margin-bottom: 1rem; }
.foot__legal { border-top: 1px solid #553b38; margin-top: 2.5rem; padding-top: 1.5rem; font-size: 0.86rem; color: #a79391; }
.foot__legal p { max-width: 70ch; }

/* ---------- one orchestrated page-load moment ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__mark { animation: settle 1100ms cubic-bezier(.2,.7,.25,1) both; }
  .hero__in > * { animation: rise 620ms cubic-bezier(.2,.7,.25,1) both; }
  .hero__in > *:nth-child(2) { animation-delay: 90ms; }
  .hero__in > *:nth-child(3) { animation-delay: 170ms; }
  @keyframes settle { from { opacity: 0; translate: 2.5rem -50%; } to { opacity: .17; translate: 0 -50%; } }
  @keyframes rise { from { opacity: 0; translate: 0 0.9rem; } to { opacity: 1; translate: 0 0; } }
}

@media (max-width: 46rem) {
  .masthead__in { min-height: 0; padding-block: 0.9rem; gap: 0.75rem 1rem; }
  .brand__org { display: none; }
  .nav { gap: 0.55rem 1rem; order: 3; flex: 1 0 100%; padding-bottom: 0.3rem; }
  .nav a { font-size: 0.9rem; }
  .hero__mark { opacity: 0.1; right: -22%; width: 76vw; }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes settle { from { opacity: 0; translate: 2rem -50%; } to { opacity: .1; translate: 0 -50%; } }
  }
}

@media print {
  .masthead, .hero__mark, .foot__top { display: none; }
  body { background: #fff; color: #000; }
}

/* ================================================================
   Vessel profiles — the three forms the region is known for.
   Drawn as a potter draws them: a profile line, revealed once when
   the section is first reached. Motion is opt-in via .is-drawn.
   ================================================================ */
.forms { background: var(--glaze-dim); }
.form-set {
  display: grid; gap: 2.5rem 3rem; margin-top: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.vessel { text-align: left; }
.vessel svg { width: 100%; max-width: 11rem; height: auto; display: block; margin-bottom: 1.1rem; }
.vessel svg path, .vessel svg ellipse, .vessel svg line {
  fill: none; stroke: var(--clay); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.vessel svg .fillform { fill: var(--clay); opacity: .07; stroke: none; }
.vessel h3 { margin-bottom: 0.25rem; }
.vessel__meta { font: 600 0.8rem var(--sans); color: var(--cobalt); margin: 0 0 0.6rem; }
.vessel p { font-size: 0.96rem; color: var(--ink-soft); }

@media (prefers-reduced-motion: no-preference) {
  .vessel svg path, .vessel svg ellipse {
    stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600);
  }
  .vessel svg .fillform { opacity: 0; transition: opacity .7s ease .8s; }
  .is-drawn .vessel svg path, .is-drawn .vessel svg ellipse {
    animation: draw 1.5s cubic-bezier(.33,.5,.2,1) forwards;
  }
  .is-drawn .vessel:nth-child(2) svg * { animation-delay: .18s; }
  .is-drawn .vessel:nth-child(3) svg * { animation-delay: .36s; }
  .is-drawn .vessel svg .fillform { opacity: .07; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

/* tilting a glazed piece to catch the light */
.lineage__glaze { transition: box-shadow .45s ease; }
.lineage__glaze::before { transition: transform .6s cubic-bezier(.2,.7,.25,1), opacity .45s ease; }
.lineage:hover .lineage__glaze { box-shadow: inset 0 -1.6rem 2.2rem -1rem rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.14); }
.lineage:hover .lineage__glaze::before { transform: translate(14%, -6%) scale(1.12); }
@media (prefers-reduced-motion: reduce) {
  .lineage__glaze::before, .lineage__glaze { transition: none; }
}

/* ================================================================
   Photo slots — empty until the association supplies real pictures.
   An empty slot states what belongs there rather than faking it.
   ================================================================ */
.photo {
  background: var(--glaze-dim); border: 1px dashed var(--clay-soft);
  border-radius: 2px; aspect-ratio: 4 / 3; display: grid; place-items: center;
  padding: 1.5rem; text-align: center; overflow: hidden;
}
.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.photo span { font: 400 0.86rem/1.5 var(--sans); color: var(--clay-soft); max-width: 24ch; }
.photo--wide { aspect-ratio: 16 / 9; }
.photo--filled { padding: 0; border: 0; }
.photo--tall { aspect-ratio: 3 / 4; }
.photo-row { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 2.5rem; }

/* ================================================================
   Press roundup
   ================================================================ */
.press { list-style: none; padding: 0; margin: 0; }
.press > li { border-top: 1px solid var(--rule); }
.press > li:last-child { border-bottom: 1px solid var(--rule); }
.press a {
  display: grid; gap: 0.35rem 2rem; padding: 1.6rem 0; text-decoration: none; color: inherit;
  grid-template-columns: 9.5rem 1fr; align-items: baseline;
}
.press a:hover { color: var(--cobalt); }
.press a:hover .press__title { text-decoration: underline; text-underline-offset: 3px; }
.press__when { font: 600 0.85rem var(--sans); color: var(--ink-soft); }
.press__when b { display: block; font-weight: 600; color: var(--clay); }
.press__title { font: 600 1.12rem/1.42 var(--sans); color: var(--clay-deep); margin: 0; }
.press a:hover .press__title { color: var(--cobalt); }
.press__sum { grid-column: 2; margin: 0; font-size: 0.97rem; color: var(--ink-soft); max-width: 62ch; }
.press__out { grid-column: 2; font: 400 0.84rem var(--sans); color: var(--clay-soft); margin: 0.2rem 0 0; }

@media (max-width: 40rem) {
  .press a { grid-template-columns: 1fr; gap: 0.3rem; }
  .press__sum, .press__out { grid-column: 1; }
}

/* homepage news teaser */
.news-teaser { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2.5rem; }
.news-teaser article { border-top: 2px solid var(--clay); padding-top: 1.1rem; }
.news-teaser time { font: 600 0.8rem var(--sans); color: var(--ink-soft); display: block; margin-bottom: 0.45rem; }
.news-teaser h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.news-teaser a { text-decoration: none; color: var(--clay-deep); }
.news-teaser a:hover { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.news-teaser p { font-size: 0.93rem; color: var(--ink-soft); margin: 0; }

/* ================================================================
   Large screens.
   Widening the container alone leaves type stranded at its clamp
   ceiling, so the whole rem system steps up with the viewport and
   the container follows. Media queries evaluate rem against the
   initial 16px, so these breakpoints stay fixed as the scale moves.
   ================================================================ */
@media (min-width: 100rem) {            /* ≥ 1600px */
  :root { font-size: 17.5px; --gutter: clamp(2rem, 4vw, 6rem); }
  .wrap { width: min(100%, 86rem); }
  .duties { grid-template-columns: repeat(3, 1fr); }
  .lineage-set, .form-set, .tiers, .photo-row { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 120rem) {            /* ≥ 1920px */
  :root { font-size: 19px; }
  .wrap { width: min(100%, 94rem); }
  .hero__in { padding-block: clamp(5rem, 8vw, 9.5rem); }
  .hero__mark { width: min(46vw, 44rem); }
  .ident { padding-block: 3.2rem; }
}
@media (min-width: 150rem) {            /* ≥ 2400px */
  :root { font-size: 21px; }
  .wrap { width: min(100%, 104rem); }
}

/* ================================================================
   Press thumbnails.
   Served from each publisher's own CDN (their og:image), never
   copied onto this site, and credited in the caption. If a
   publisher blocks hotlinking the figure is removed by site.js and
   the row falls back to text, so a dead image never leaves a gap.
   ================================================================ */
.press a { grid-template-columns: 8.5rem 1fr 15rem; }
.press__thumb {
  grid-row: 1 / span 3; grid-column: 3; margin: 0;
  align-self: start; position: relative;
}
.press__thumb img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 2px; display: block; background: var(--glaze-dim);
}
.press__thumb figcaption {
  font: 400 0.74rem/1.4 var(--sans); color: var(--clay-soft);
  margin-top: 0.4rem;
}
.press a:hover .press__thumb img { filter: brightness(1.04); }
@media (prefers-reduced-motion: no-preference) {
  .press__thumb img { transition: filter .35s ease; }
}

@media (max-width: 62rem) {
  .press a { grid-template-columns: 8.5rem 1fr; }
  .press__thumb { grid-row: auto; grid-column: 2; max-width: 15rem; margin-top: 0.6rem; }
}
@media (max-width: 40rem) {
  .press a { grid-template-columns: 1fr; }
  .press__thumb { grid-column: 1; max-width: none; }
}