/* Shared look for the web catalog and the lookbook: a friendly pet-shop style.
   Soft pastel blocks (pink, butter yellow, mint, sky), round Nunito type, big radii, sticker-like labels. */
@import url(fonts/fonts.css);
:root {
  --bg: #fdfbff; --panel: #ffffff; --field: #f4f1fa; --ink: #2a2342; --muted: #6e6787; --line: #ebe5f3;
  --pink: #ffd9e4; --pink-ink: #c23a68; --yellow: #ffefb0; --yellow-ink: #8a6100; --mint: #d3f4e5; --mint-ink: #1d7d5c; --sky: #d9e9ff; --sky-ink: #2a62c0;
  --sage: var(--mint-ink); --sage-soft: var(--mint); --terra: #e0457a; --terra-soft: #ffe3ec; --en: var(--sky-ink); --en-soft: var(--sky);
  --warn: #d2445a;
  --display: 'Nunito', 'Segoe UI', system-ui, sans-serif; --body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17142a; --panel: #211d38; --field: #2b2647; --ink: #f3f0ff; --muted: #b4acd0; --line: #36304f;
    --pink: #4a2338; --pink-ink: #ff9fc0; --yellow: #45391a; --yellow-ink: #ffd76a; --mint: #1d3d33; --mint-ink: #7fe0b8; --sky: #1f3050; --sky-ink: #8fbcff;
    --terra: #ff7aa6; --terra-soft: #4a2338; --warn: #ff8c9c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17142a; --panel: #211d38; --field: #2b2647; --ink: #f3f0ff; --muted: #b4acd0; --line: #36304f;
  --pink: #4a2338; --pink-ink: #ff9fc0; --yellow: #45391a; --yellow-ink: #ffd76a; --mint: #1d3d33; --mint-ink: #7fe0b8; --sky: #1f3050; --sky-ink: #8fbcff;
  --terra: #ff7aa6; --terra-soft: #4a2338; --warn: #ff8c9c;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 500 15px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-weight: 900; }
p { margin: 0; text-wrap: pretty; }
b { font-weight: 800; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
.chip.en { background: var(--sky); color: var(--sky-ink); }
.chip.vi { background: var(--mint); color: var(--mint-ink); }
.chip.todo { background: var(--pink); color: var(--pink-ink); }

/* section colours: a sticker label and a soft block, cycling pink, yellow, mint, sky */
.c-pink { --c: var(--pink); --ci: var(--pink-ink); }
.c-yellow { --c: var(--yellow); --ci: var(--yellow-ink); }
.c-mint { --c: var(--mint); --ci: var(--mint-ink); }
.c-sky { --c: var(--sky); --ci: var(--sky-ink); }
.sticker { display: inline-flex; align-items: center; gap: 6px; background: var(--c, var(--pink)); color: var(--ci, var(--pink-ink)); font-weight: 900; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 4px 12px 4px 8px; border-radius: 999px; transform: rotate(-2deg); width: fit-content; }
.sticker svg { width: 14px; height: 14px; fill: currentColor; }
svg { fill: currentColor; }

/* photo slot: shows the file, or a labelled placeholder until the file exists */
.ph { position: relative; background: var(--field); border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph .ph-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; padding: 12px;
  border: 2px dashed var(--line); border-radius: 18px; color: var(--muted); font-size: 12.5px; }
.ph .ph-empty b { color: var(--ink); font-weight: 800; font-size: 13.5px; }
.ph .ph-empty code { font-size: 11.5px; background: var(--panel); padding: 1px 7px; border-radius: 999px; }
.ph.has .ph-empty { display: none; }

/* worked examples: three framed images in a row with arrows */
.ex { display: grid; gap: 8px; }
.ex-h { display: flex; gap: 8px; align-items: baseline; } .ex-h b { font-size: 16px; font-weight: 900; } .ex-h span { color: var(--muted); font-size: 13px; }
.ex-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; }
.ex-f { margin: 0; display: grid; gap: 6px; min-width: 0; }
.ex-i { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #fff; border: 2px solid var(--line); }
.ex-i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; box-sizing: border-box; }
.ex-0 .ex-i img { padding: 6%; }
.ex-2 .ex-i { background: var(--field); }
.ex-f figcaption { text-align: center; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.ex-arr { font-size: 20px; font-weight: 900; color: var(--pink-ink); }