/* Language Cafe — editorial look: bold colour blocks, big serif headlines, hairline ornaments.
   Fonts are bundled in assets/fonts (Bodoni Moda, Lora, Jost: free, SIL Open Font License) so every visitor
   sees exactly the same thing. Other writing systems (Japanese, Hindi...) use the visitor's own fonts. */

@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(assets/fonts/bodoni-moda-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(assets/fonts/bodoni-moda-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url(assets/fonts/bodoni-moda-latin-wght-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url(assets/fonts/bodoni-moda-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(assets/fonts/lora-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(assets/fonts/lora-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url(assets/fonts/lora-latin-wght-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url(assets/fonts/lora-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Bodoni Moda has no Vietnamese or Cyrillic letters, so Lora (listed right after it in --display) supplies them. */
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(assets/fonts/lora-vietnamese-wght-normal.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(assets/fonts/lora-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(assets/fonts/jost-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(assets/fonts/jost-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #2b2018;
  --cream: #fff4e0;
  --sun: #ffc93c;
  --sun-deep: #f0b000;
  --sun-soft: #fff0bf;
  --line: #f1e2c9;
  --muted: #7a6455;
  --teal-ink: #0c6f69;
  --danger: #c93a2b;
  --shadow: 0 2px 0 rgb(58 42 34 / 0.05), 0 14px 30px rgb(140 90 20 / 0.14);
  --display: "Bodoni Moda", "Lora", "Bodoni MT", "Bodoni 72", "Didot", "Playfair Display", Georgia, serif;
  --serif: "Lora", "Constantia", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --label: "Jost", "Gill Sans MT", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --ui: ui-rounded, "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color-scheme: light;
}

/* Each section is one bold colour with a matching text colour. */
.theme-teal   { --bg: #1a7168; --fg: #ffe9c9; --body: #ffefd8; --accent: #ffc93c; --accent-ink: #2b2018; --card: #fff4e0; --card-ink: #2b2018; --card-muted: #6b5546; }
.theme-cream  { --bg: #fff4e0; --fg: #17554e; --body: #4a3a2e; --accent: #c9442f; --accent-ink: #fff; --card: #ffffff; --card-ink: #2b2018; --card-muted: #6b5546; }
.theme-coral  { --bg: #c9442f; --fg: #ffe8cf; --body: #fff0e0; --accent: #ffc93c; --accent-ink: #2b2018; --card: #fff4e0; --card-ink: #2b2018; --card-muted: #6b5546; }
.theme-sun    { --bg: #ffc93c; --fg: #2b2018; --body: #3a2a22; --accent: #c9442f; --accent-ink: #fff; --card: #fff9ea; --card-ink: #2b2018; --card-muted: #6b5546; }
.theme-violet { --bg: #5b45b8; --fg: #ffe2ef; --body: #f6ebff; --accent: #ffc93c; --accent-ink: #2b2018; --card: #fff4e0; --card-ink: #2b2018; --card-muted: #6b5546; }
.theme-sky    { --bg: #22689f; --fg: #ffeccc; --body: #f2f7ff; --accent: #ffc93c; --accent-ink: #2b2018; --card: #fff4e0; --card-ink: #2b2018; --card-muted: #6b5546; }
.theme-ink    { --bg: #2b2018; --fg: #ffe9c9; --body: #f3e7d6; --accent: #ffc93c; --accent-ink: #2b2018; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: #fff; font: 18px/1.65 var(--serif); }
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent, var(--sun)); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 10px; z-index: 200; }
.skip:focus { left: 8px; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; }

/* ---------- shared type ---------- */

.kicker { font: 500 11.5px/1.4 var(--label); letter-spacing: .3em; text-transform: uppercase; color: var(--fg); }
section { background: var(--bg); color: var(--body); }
section.block { padding: 88px 0 96px; }

.head { text-align: center; max-width: 780px; margin: 0 auto 48px; }
.head h2 { font: 400 clamp(2.3rem, 6.6vw, 4.8rem)/.98 var(--display); text-transform: uppercase; letter-spacing: -.01em; color: var(--fg); margin: 12px 0 22px; }
.head p { font-size: 1.12rem; margin-top: 18px; }
.head .pill { margin-top: 22px; }

/* hairline divider with a little ornament from a different tradition in the middle */
.orn { display: flex; align-items: center; gap: 16px; max-width: 520px; margin: 0 auto; color: var(--fg); }
.orn i { flex: 1; height: 1px; background: currentColor; opacity: .5; }
.orn-svg { width: 64px; height: 28px; flex: none; }

/* ---------- buttons ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 12px; padding: 15px 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); text-decoration: none;
  font: 600 12px/1 var(--label); letter-spacing: .22em; text-transform: uppercase;
  transition: transform .15s, filter .15s;
}
.pill:hover { transform: translateY(-2px); filter: brightness(1.06); }
.pill span { font-size: 16px; letter-spacing: 0; }
.pill.small { padding: 11px 22px; font-size: 11px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 18px; border-radius: 999px;
  font: 700 14px/1.2 var(--ui); border: 2px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .12s, border-color .12s, transform .12s;
}
.btn:hover { border-color: var(--sun); background: var(--sun-soft); }
.btn.primary { background: var(--sun); border-color: var(--sun); box-shadow: 0 3px 0 var(--sun-deep); }
.btn.primary:hover { background: #ffd35c; border-color: #ffd35c; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--sun-soft); }
.btn.danger { color: var(--danger); }
.btn.small { padding: 5px 14px; font-size: 13px; }

/* ---------- menu button and menu ---------- */

.menu-btn {
  position: fixed; top: 16px; right: 16px; z-index: 60; width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--cream); box-shadow: 0 8px 22px rgb(0 0 0 / .25); display: grid; place-content: center; gap: 5px;
}
.menu-btn span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
.menu {
  position: fixed; inset: 0; z-index: 80; background: var(--cream); color: #17554e; display: grid; align-content: center; justify-items: center;
  gap: 26px; padding: 40px 24px; text-align: center; overflow: auto;
}
.menu nav { display: grid; gap: 4px; }
.menu nav a { font: 400 clamp(2.2rem, 8vw, 4rem)/1.1 var(--display); text-transform: uppercase; text-decoration: none; padding: 4px 18px; border-radius: 16px; }
.menu nav a:hover { background: rgb(23 85 78 / .1); }
.menu .orn { width: min(340px, 80vw); }
.menu-close { position: absolute; top: 16px; right: 16px; width: 50px; height: 50px; border-radius: 50%; border: 0; background: #17554e; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.menu-admin { border: 0; background: none; color: #17554e; font: 600 12px/1 var(--label); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; text-decoration: underline; padding: 8px; }

/* ---------- hero ---------- */

.hero { text-align: center; padding: 26px 20px 40px; overflow: hidden; }
.hero-top { display: grid; justify-items: center; gap: 12px; margin-bottom: 18px; }
.hero-top .mark { width: 52px; height: 52px; }
.hero .stage { position: relative; margin-top: 22px; }
.hero .stage { --h1: clamp(2.5rem, calc(90vw / (var(--chars, 6) * .76)), 11.5rem); }
.hero h1 {
  position: relative; z-index: 1; font: 400 var(--h1)/.82 var(--display); text-transform: uppercase;
  letter-spacing: -.025em; color: var(--fg);
}
.hero h1 span { display: block; white-space: nowrap; }
/* The cup sits below the headline with clear space between them, never over it. The rings are clipped and
   fade in and out so they stay between the headline and the tagline instead of running through the letters. */
.cup-wrap { --w: min(470px, 84vw); position: relative; z-index: 2; width: var(--w); margin: clamp(22px, calc(var(--h1) * .16), 44px) auto 0; }
.cup { position: relative; width: 100%; filter: drop-shadow(0 28px 22px rgb(0 0 0 / .3)); }
.rings {
  position: absolute; z-index: -1; left: 50%; top: -4%; bottom: -6%; width: calc(var(--w) * 2); transform: translateX(-50%); overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.ring { position: absolute; left: 50%; top: 48%; aspect-ratio: 1; border: 1px solid var(--fg); border-radius: 50%; opacity: .35; transform: translate(-50%, -50%); }
.ring.r1 { width: calc(var(--w) * 1.12); }
.ring.r2 { width: calc(var(--w) * 1.5); opacity: .2; }
.medal { position: absolute; z-index: -1; border-radius: 50%; border: 4px solid var(--cream); box-shadow: 0 10px 24px rgb(0 0 0 / .25); }
.word {
  position: absolute; z-index: 3; padding: 6px 18px 8px; border-radius: 999px; background: var(--cream); color: var(--ink); white-space: nowrap;
  font: italic 400 1.25rem/1.2 var(--display); box-shadow: 0 10px 22px rgb(0 0 0 / .22); animation: float 6s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hero .sub { max-width: 30ch; margin: 30px auto 28px; font: 400 clamp(1.25rem, 3vw, 1.7rem)/1.35 var(--serif); color: var(--fg); }
.facts { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 40px auto 34px; padding: 0; max-width: 820px; }
.facts li { padding: 4px 22px; font: 500 11px/1.6 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--fg); border-left: 1px solid rgb(255 233 201 / .45); }
.facts li:first-child { border-left: 0; }

/* greeting ticker */
.hello { overflow: hidden; background: var(--ink); color: var(--cream); padding: 16px 0; }
.hello-track { display: flex; align-items: center; gap: 26px; width: max-content; animation: slide 60s linear infinite; }
.hello:hover .hello-track { animation-play-state: paused; }
.hello .g { font: italic 400 1.9rem/1 var(--display); white-space: nowrap; }
.hello .sep { color: var(--sun); font-size: 1rem; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- about ---------- */

.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.about-text p { font-size: 1.2rem; margin-bottom: 1.1em; }
.about-text .pill { margin-top: 8px; }
.values { display: grid; gap: 22px; }
.value { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: center; }
.tile.round { border-radius: 50%; border: 4px solid #fff; box-shadow: 0 10px 22px rgb(60 40 20 / .2); aspect-ratio: 1; }
.value .tile { width: 76px; }
.value h3 { font: 700 1.35rem/1.15 var(--display); color: var(--fg); }
.value p { font-size: 1rem; margin-top: 2px; }

/* ---------- cards ---------- */

.pat { background-repeat: repeat; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.card {
  position: relative; display: flex; flex-direction: column; background: var(--card); color: var(--card-ink);
  border-radius: 24px; overflow: hidden; box-shadow: 0 22px 34px -22px rgb(0 0 0 / .5); transition: transform .2s;
}
.card:hover { transform: translateY(-4px); }
.card .pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sun-soft); }
.card .pic img { width: 100%; height: 100%; object-fit: cover; }
.card .band { height: 30px; }
.card .body { display: flex; flex-direction: column; gap: 9px; padding: 20px 22px 24px; flex: 1; }
.card h3 { font: 700 1.6rem/1.08 var(--display); }
.card .meta { font: 500 11px/1.5 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--card-muted); }
.card .desc { font-size: 1.02rem; line-height: 1.55; color: var(--card-muted); white-space: pre-line; }
.card .next { font: italic 400 .98rem var(--serif); color: var(--card-muted); }
.card .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.card .join { align-self: flex-start; margin-top: 4px; }
.card .admin-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px;
  font: 500 10.5px/1.3 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--card-ink);
  background: color-mix(in srgb, var(--c, #1a7168) 22%, #fff);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, #1a7168); }
.chip.plain::before { display: none; }

.date-badge {
  position: absolute; left: 16px; top: 16px; min-width: 60px; padding: 8px 8px 9px; text-align: center; background: var(--cream); color: var(--ink);
  border-radius: 18px; box-shadow: 0 10px 22px rgb(0 0 0 / .22); border-top: 8px solid var(--c, var(--sun)); line-height: 1;
}
.date-badge b { display: block; font: 700 1.8rem/1 var(--display); }
.date-badge span { font: 500 10.5px/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: -10px auto 36px; }
.filters button {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--fg); background: transparent; color: var(--fg); cursor: pointer;
  font: 500 11px/1 var(--label); letter-spacing: .18em; text-transform: uppercase;
}
.filters button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.empty { padding: 34px; text-align: center; border: 1px dashed var(--fg); border-radius: 24px; color: var(--fg); }
details.past { margin-top: 44px; }
details.past summary { cursor: pointer; text-align: center; font: 500 12px/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--fg); padding: 10px; }
details.past .cards { margin-top: 24px; }
details.past .card { opacity: .82; }

/* ---------- gallery ---------- */

.gallery { columns: 3 270px; column-gap: 26px; }
.gallery figure { break-inside: avoid; margin: 0 0 26px; overflow: hidden; border-radius: 24px; background: var(--cream); color: var(--ink); box-shadow: 0 22px 34px -22px rgb(0 0 0 / .5); }
.gallery button.open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery img { width: 100%; height: auto; }
.gallery figcaption { padding: 14px 18px 16px; font: italic 400 1.08rem/1.3 var(--serif); }
.gallery .admin-actions { display: flex; gap: 8px; padding: 0 18px 16px; }

/* ---------- team ---------- */

.team-group + .team-group { margin-top: 64px; }
.group-title { text-align: center; font: 500 11.5px/1.4 var(--label); letter-spacing: .3em; text-transform: uppercase; color: var(--fg); margin-bottom: 30px; }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 46px 30px; max-width: 1020px; margin: 0 auto; justify-items: center; }
.team.featured { max-width: 460px; }
.person { text-align: center; max-width: 270px; }
.avatar { position: relative; width: 168px; margin: 0 auto 20px; }
.featured .avatar { width: 208px; }
.avatar::before { content: ""; position: absolute; inset: -9px; border: 1px solid var(--fg); border-radius: 50%; opacity: .5; }
.portrait { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 5px solid var(--cream); box-shadow: 0 18px 28px -10px rgb(0 0 0 / .5); }
.portrait.ph { display: grid; place-items: center; }
.portrait.ph b { display: grid; place-items: center; width: 52%; aspect-ratio: 1; border-radius: 50%; background: var(--cream); color: var(--ink); font: 700 2.1rem/1 var(--display); }
.featured .portrait.ph b { font-size: 2.6rem; }
.person h3 { font: 700 1.55rem/1.1 var(--display); color: var(--fg); }
.role-tag { display: inline-block; margin: 10px 0 8px; padding: 5px 14px; border-radius: 999px; background: var(--cream); color: var(--ink); font: 500 10.5px/1.2 var(--label); letter-spacing: .18em; text-transform: uppercase; }
.role-tag.coord { background: var(--accent); color: var(--accent-ink); }
.person .from { font-size: 1.1rem; }
.person .from .kicker { font-size: 10px; margin-right: 8px; }
.person .speaks { font: italic 400 1rem/1.4 var(--serif); opacity: .92; margin-top: 2px; }
.person .about-line { font-size: .98rem; line-height: 1.5; margin-top: 10px; }
.person .admin-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }

/* ---------- languages ---------- */

.lang-picker { max-width: 920px; }
.lang-select { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: -6px auto 36px; }
.lang-select select {
  appearance: none; -webkit-appearance: none; width: min(380px, 100%); padding: 15px 54px 15px 26px; border-radius: 999px; border: 1px solid var(--fg);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1.5l6 6 6-6' fill='none' stroke='%2317554e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 24px center / 14px 9px;
  color: var(--fg); cursor: pointer; text-align: center; text-align-last: center; text-overflow: ellipsis;
  font: 500 12px/1.2 var(--label); letter-spacing: .18em; text-transform: uppercase;
}
.lang-select select:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.lang-panel { max-width: 900px; margin: 0 auto; }
.lang-panel .lang { animation: lang-in .35s ease both; }
@keyframes lang-in { from { opacity: 0; transform: translateY(10px); } }
.lang { display: flex; flex-direction: column; background: var(--card); color: var(--card-ink); border-radius: 24px; overflow: hidden; box-shadow: 0 22px 34px -22px rgb(0 0 0 / .35); }
.lang-band { height: 56px; }
.lang-head { padding: 26px 32px 4px; }
.lang-head h3 { font: 700 2.6rem/1.1 var(--display); }
.lang-head .kicker { display: block; margin-top: 8px; color: var(--card-muted); font-size: 10.5px; }
/* Ten words: two columns of five on wide screens (--rows is set by the page), one column on phones. */
.words { list-style: none; margin: 0; padding: 10px 32px 26px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows, 5), auto); grid-auto-flow: column; column-gap: 48px; }
.words li { display: grid; grid-template-columns: 5.4rem 1fr; gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid #eadfcc; }
.words .en { font: 500 10.5px/1.3 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--card-muted); }
.words .w { display: block; font: 400 1.55rem/1.2 var(--display); text-align: left; }
.words .say { display: block; font: italic 400 1rem/1.35 var(--serif); color: var(--card-muted); margin-top: 1px; }
.lang .admin-actions { display: flex; gap: 8px; padding: 0 32px 24px; margin-top: auto; }
@media (max-width: 720px) {
  .words { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; padding: 8px 24px 22px; }
  .lang-head { padding: 20px 24px 4px; }
  .lang-head h3 { font-size: 2.2rem; }
  .lang .admin-actions { padding: 0 24px 22px; }
}

/* ---------- visit ---------- */

.visit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; max-width: 960px; margin: 0 auto; }
.visit-card { text-align: center; padding: 8px 28px; border-left: 1px solid rgb(255 233 201 / .4); }
.visit-card:first-child { border-left: 0; }
.visit-card .kicker { display: block; margin-bottom: 12px; }
.visit-card p { font-size: 1.3rem; line-height: 1.5; white-space: pre-line; }
.visit-card a { text-decoration-thickness: 1px; text-underline-offset: 4px; }

footer { background: var(--ink); color: #f3e7d6; }
footer .wrap { display: flex; gap: 22px 44px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 34px; padding-bottom: 36px; }
.ribbon { display: flex; height: 38px; overflow: hidden; }
.ribbon span { flex: 1 0 96px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.wordmark { font: 400 1.7rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.wordmark em { font-style: italic; color: var(--sun); }
footer .credit { flex-basis: 100%; font: italic 400 .92rem/1.5 var(--serif); opacity: .65; border-top: 1px solid rgb(255 233 201 / .2); padding-top: 18px; }
footer small { display: block; opacity: .75; margin-top: 8px; font: italic 400 1rem var(--serif); }
footer .links { display: flex; gap: 8px 22px; flex-wrap: wrap; font: 500 11px/1 var(--label); letter-spacing: .22em; text-transform: uppercase; }
footer .links a { text-decoration: none; }
footer .links a:hover { color: var(--sun); }
footer button.linklike { background: none; border: 0; color: var(--sun); cursor: pointer; text-decoration: underline; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; }

/* ---------- admin tools ---------- */

.admin-bar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 70;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center;
  padding: 10px 14px; border-radius: 24px; background: #14100c; color: #fff; box-shadow: 0 18px 40px rgb(0 0 0 / .4);
  width: max-content; max-width: calc(100vw - 16px); font-family: var(--ui);
}
.admin-bar b { color: var(--sun); margin-right: 4px; font-size: 14px; }
.admin-bar .btn.ghost { color: #fff; }
.admin-bar .btn.ghost:hover { background: rgb(255 255 255 / .16); }
body.is-admin { padding-bottom: 84px; }

dialog.dlg {
  width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 24px; border: 0; border-radius: 28px;
  background: #fff; color: var(--ink); box-shadow: 0 24px 60px rgb(43 32 24 / .4); font: 16px/1.5 var(--ui);
}
dialog.dlg.narrow { width: min(400px, calc(100vw - 24px)); }
dialog.dlg.lightbox { width: min(900px, calc(100vw - 24px)); padding: 12px; }
dialog.dlg::backdrop { background: rgb(43 32 24 / .6); }
.dlg-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 14px; }
.dlg-head h2 { font: 400 2rem/1.05 var(--display); text-transform: uppercase; }
.dlg-head p { color: var(--muted); font-size: .95rem; margin-top: 4px; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #f6efe3; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); flex: none; }
.icon-btn:hover { background: var(--sun-soft); color: var(--ink); }
.stack { display: grid; gap: 14px; }
.field { display: grid; gap: 5px; font-size: 14px; color: var(--muted); }
.field > span { font-weight: 800; }
.field input, .field select, .field textarea { width: 100%; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); }
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #1a7168; outline: none; }
.field .hint { font-weight: 500; font-size: 13px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-error { color: var(--danger); font-weight: 700; font-size: 14px; }
.form-error:empty { display: none; }
.form-actions { display: flex; gap: 8px; justify-content: space-between; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.form-actions .right { display: flex; gap: 8px; margin-left: auto; }
.lightbox img { width: 100%; border-radius: 18px; }
.lightbox p { padding: 10px 6px 2px; font: italic 400 1.1rem var(--serif); }

.picker { display: grid; gap: 8px; }
.picker.arts { grid-template-columns: repeat(4, 1fr); }
.picker.patterns { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
.picker.colors { display: flex; flex-wrap: wrap; }
.picker label { position: relative; cursor: pointer; }
.picker input { position: absolute; opacity: 0; inset: 0; }
.picker .opt { display: block; border-radius: 14px; border: 3px solid var(--line); overflow: hidden; background: #fff; }
.picker input:focus-visible + .opt { outline: 3px solid #1a7168; outline-offset: 2px; }
.picker input:checked + .opt { border-color: var(--ink); box-shadow: 0 0 0 3px var(--sun); }
.picker.arts img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.picker .opt small { display: block; font: 800 11px/1.15 var(--ui); text-align: center; padding: 3px 2px; }
.picker.patterns .sw { height: 46px; }
.picker.colors .opt { width: 38px; height: 38px; border-radius: 50%; }
.upload-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.photo-preview { width: 100%; max-height: 220px; object-fit: cover; border-radius: 16px; border: 3px solid var(--line); }

.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 120; padding: 10px 20px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 14px/1.4 var(--ui); box-shadow: var(--shadow); max-width: min(92vw, 460px); text-align: center; }
.toast.err { background: var(--danger); }
.noscript { padding: 24px; }
.notice { padding: 12px 56px 12px 18px; background: #fff4e0; color: #2b2018; text-align: center; font: 14px/1.45 var(--ui); border-bottom: 3px solid var(--sun); }

/* ---------- small screens ---------- */

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  section.block { padding: 64px 0 72px; }
  .visit-grid { grid-template-columns: 1fr; max-width: 460px; }
  .visit-card { border-left: 0; border-top: 1px solid rgb(255 233 201 / .4); padding: 24px 12px; }
  .visit-card:first-child { border-top: 0; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 18px; }
  .grid2 { grid-template-columns: 1fr; }
  .picker.arts { grid-template-columns: repeat(2, 1fr); }
  .facts li { padding: 4px 12px; }
  .word { font-size: 1.05rem; padding: 4px 13px 6px; }
  .medal { transform: scale(.78); }
}
@media (max-width: 380px) {
  .word { font-size: .9rem; padding: 3px 10px 5px; }
  .medal { transform: scale(.6); }
}
@media (max-width: 520px) {
  .hello .g { font-size: 1.5rem; }
  body.is-admin { padding-bottom: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .word, .hello-track, .lang-panel .lang { animation: none; }
  .hello-track { flex-wrap: wrap; width: auto; justify-content: center; padding: 0 18px; }
  .hello-track [aria-hidden="true"] { display: none; }
}