/* Paar Homestay — layout proposal. One family (Be Vietnam Pro), seven colour tokens. */
:root {
  --cream: #F2EEE5;
  --terra: #C1614B;
  --mustard: #D8A23F;
  --sage: #9AA383;
  --sage-deep: #6E7858;   /* text-bearing sage: white on it = 4.7:1 */
  --slate: #7E9AA5;
  --blush: #E7C3B4;
  --ink: #2B2622;
  --muted: #5E5650;       /* secondary text on cream: 6.2:1 */
  --surface: #FAF7F0;
  --hair: rgb(43 38 34 / .14);

  --pad: clamp(24px, 6.6vw, 96px);
  --gap: clamp(16px, 2.2vw, 32px);
  --section: clamp(88px, 11vw, 168px);

  /* type scale (desktop maxima match the spec table) */
  --fs-display: clamp(6.25rem, 12.4vw, 11rem);  /* 176px */
  --fs-h2: clamp(1.5rem, 2.25vw, 2rem);          /* 32px */
  --fs-body: 1.125rem;                           /* 18px */
  --fs-label: .9375rem;                          /* 15px */
  --fs-small: .875rem;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: 'kern';
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); }

/* fills / outlines for shape <use> */
.fill-cream { fill: var(--cream); } .line-cream { fill: none; stroke: var(--cream); }
.fill-terra { fill: var(--terra); } .line-terra { fill: none; stroke: var(--terra); }
.fill-mustard { fill: var(--mustard); } .line-mustard { fill: none; stroke: var(--mustard); }
.fill-sage { fill: var(--sage); } .line-sage { fill: none; stroke: var(--sage); }
.fill-slate { fill: var(--slate); } .line-slate { fill: none; stroke: var(--slate); }
.fill-blush { fill: var(--blush); } .line-blush { fill: none; stroke: var(--blush); }
.fill-ink { fill: var(--ink); } .line-ink { fill: none; stroke: var(--ink); }
[class^="line-"] { stroke-width: 6; stroke-linejoin: round; }

.label {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.45;
}

/* ================= HERO ================= */
.hero {
  display: grid;
  grid-template-columns: 41fr 54fr;
  column-gap: 5%;
  min-height: min(100svh, 940px);
  padding-block: clamp(40px, 6vw, 88px);
}
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding-block: clamp(8px, 3vw, 48px);
}
.hero-label { display: flex; align-items: center; gap: 10px; }
.cube { width: 22px; height: 22px; flex: none; }
.wordmark {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--terra);
  margin-left: -.05em;
}
.subtitle {
  margin-top: .55em;
  font-size: var(--fs-h2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.15;
}
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.badges li {
  background: var(--sage-deep);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 12px;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  column-gap: clamp(10px, 2vw, 32px);
  row-gap: clamp(6px, 1.2vw, 18px);
  align-content: center;
}
.cell { display: grid; place-items: center; aspect-ratio: 1; }
.cell svg { width: 86%; height: 86%; transform: translateY(var(--dy, 0)); }

/* ================= SECTIONS ================= */
.section { padding-block: var(--section) 0; }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(40px, 5vw, 72px); max-width: 62ch; }
.section h2, .warn h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.15;
}
.lede { color: var(--muted); max-width: 60ch; }

/* --- shape tokens --- */
.tokens { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--gap); }
.token-art {
  position: relative;
  aspect-ratio: 1;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hair);
  display: grid;
  place-items: center;
}
.token-solid { width: 66%; }
.token-line { position: absolute; width: 30%; right: 8%; bottom: 8%; }
.token-solid svg, .token-line svg { width: 100%; height: auto; }
.token-inverse .token-art { background: var(--ink); box-shadow: none; }
.token-name { margin-top: 14px; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.token-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-small); margin-top: 2px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--hair); }

.rule {
  display: flex; align-items: center; gap: 14px;
  margin-top: clamp(32px, 4vw, 56px);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
}
.rule-mark { width: 30px; flex: none; }
.note { margin-top: 10px; color: var(--muted); font-size: var(--fs-small); max-width: 62ch; }

/* --- layout frames --- */
.frames {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 5vw, 80px);
}
.frame-fig { display: grid; grid-template-rows: 440px auto; gap: 28px; }
.frame {
  align-self: end;
  justify-self: start;
  position: relative;
  background: var(--surface);
  border: 2px solid var(--ink);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.frame-916 { width: 236px; aspect-ratio: 9 / 16; border-radius: 26px; }
.frame-11 { width: min(320px, 100%); aspect-ratio: 1; border-radius: 8px; padding: 18px; }
.frame-bio { width: 236px; height: 420px; border-radius: 26px; padding: 22px 16px; }

.zone { border: 1.5px dashed rgb(43 38 34 / .45); border-radius: 12px; padding: 10px 12px; font-size: var(--fs-small); line-height: 1.35; }
.zone-tag { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hook-line { display: block; font-weight: 800; font-size: 1.125rem; }
.zone-photo {
  flex: 1;
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, rgb(193 97 75 / .16) 0 2px, transparent 2px 11px);
}
.zone-photo span { background: var(--surface); padding: 4px 10px; border-radius: 999px; font-weight: 600; font-size: .8125rem; }
.zone-price strong { font-weight: 800; font-size: 1rem; }

.frame-11 .zone-photo-sq { flex: 1; }
.corner { position: absolute; top: 10px; left: 10px; width: 64px; z-index: 1; }
.post-line { font-weight: 800; font-size: 1.125rem; line-height: 1.3; }

.bio-handle { font-weight: 800; font-size: 1rem; }
.bio-stats { color: var(--muted); font-size: .8125rem; margin-top: 2px; }
.bio-rows { display: grid; gap: 10px; margin-top: 20px; }
.bio-rows li {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--ink); border-radius: 14px;
  padding: 10px 12px; font-weight: 600; font-size: .9375rem;
  background: var(--cream);
}
.bio-rows svg { width: 30px; height: 30px; flex: none; }

.frame-fig figcaption { max-width: 34ch; }
.frame-fig h3 { font-size: 1.125rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.frame-fig figcaption p { color: var(--muted); margin-top: 8px; font-size: 1rem; }

/* --- spec tables --- */
.spec-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
.spec { width: 100%; border-collapse: collapse; text-align: left; }
.spec caption { text-align: left; font-size: 1.25rem; font-weight: 800; padding-bottom: 12px; }
.spec th, .spec td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.spec thead th { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-block: 8px; }
.spec tbody th { font-weight: 700; }
.spec td { font-size: 1rem; }
.sample-display { font-size: 4.5rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--terra); }
.sample-h2 { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; line-height: 1.2; }
.sample-body { font-size: var(--fs-body); }
.swatch { display: block; width: 40px; height: 40px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px var(--hair); }

.diacritics { margin-top: 40px; padding: 28px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }
.diacritics-sample { font-size: clamp(4.5rem, 9vw, 8rem); font-weight: 800; line-height: 1.3; color: var(--terra); letter-spacing: .02em; }
.diacritics-caps { font-size: var(--fs-h2); font-weight: 800; line-height: 1.4; }
.contrast-rules { margin-top: 24px; display: grid; gap: 8px; font-size: 1rem; color: var(--muted); }
.contrast-rules li { padding-left: 18px; position: relative; }
.contrast-rules li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--terra); }

/* --- warning --- */
.warn {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 36px);
  background: var(--blush);
  border: 2px solid var(--terra);
  border-radius: 28px;
  padding: clamp(24px, 4vw, 56px);
}
.warn-icon { width: 44px; height: 44px; color: var(--ink); }
.warn-body p { margin-top: 14px; max-width: 64ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
.clash { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 28px; }
.chips { display: flex; gap: 8px; margin-top: 8px; }
.chips span { width: 40px; height: 40px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1.5px rgb(43 38 34 / .35); }

/* --- footer --- */
.footer {
  margin-top: var(--section);
  padding-block: 32px 48px;
  border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline;
  font-size: var(--fs-small); color: var(--muted);
}
.footer p { font-weight: 700; color: var(--ink); }
.supercat-credit { color: var(--muted); text-decoration: none; }
.supercat-credit:hover { text-decoration: underline; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1180px) {
  .tokens { grid-template-columns: repeat(4, 1fr); }
  .spec-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .frames { grid-template-columns: 1fr; }
  .frame-fig { grid-template-rows: auto auto; }
  .frame { justify-self: start; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; min-height: 0; row-gap: 48px; }
  .hero-text { gap: 36px; padding-block: 0; }
  .hero-grid { grid-template-columns: repeat(3, 1fr); column-gap: 12px; row-gap: 8px; }
  .cell:nth-child(n + 19) { display: none; }   /* 18 shapes = a clean 6 × 3 */
  .tokens { grid-template-columns: repeat(2, 1fr); }
  .warn { grid-template-columns: 1fr; }
  .footer { flex-direction: column; padding-bottom: 168px; } /* keep the badge corner clear */

  /* tables become stacked rows: no sideways scroll */
  .spec thead { display: none; }
  .spec tr { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--hair); }
  .spec th, .spec td { border: 0; padding: 0; }
  .spec-type tr > :nth-child(3) { grid-column: 1 / -1; margin-top: 8px; }
  .spec-color tr > :first-child { grid-row: span 3; }
  .spec-color td:last-child { color: var(--muted); font-size: var(--fs-small); }
  .sample-display { font-size: 4rem; }
}

/* ================= MOTION (opt-in, set in <head>) ================= */
@media (prefers-reduced-motion: no-preference) {
  .motion .reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
  .motion .reveal.is-in { opacity: 1; transform: none; }
  .motion .cell svg { animation: pop .7s cubic-bezier(.3,1.4,.5,1) backwards; animation-delay: calc(160ms + var(--i) * 40ms); }
  .motion .hero-text > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) backwards; }
  .motion .hero-mid { animation-delay: 80ms; }
  .motion .hero-foot { animation-delay: 160ms; }
}
@keyframes pop { from { opacity: 0; scale: .55; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }