/* Fonts: latin subset, self-hosted (Figtree is one variable file for all weights) */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/figtree-_Xms-HUz.woff2) format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/figtree-_Xms-HUz.woff2) format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/figtree-_Xms-HUz.woff2) format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/figtree-_Xms-HUz.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono--F63fjpt.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono--F6qfjpt.woff2) format('woff2');
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/young-serif-3qTpojO2.woff2) format('woff2');
}


/* Cyrillic: IBM Plex Mono has its own */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-cyrillic-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-cyrillic-500.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Cyrillic: Onest stands in for Figtree, Literata 600 for Young Serif (same family names, so the rest of the CSS is unchanged) */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/literata-cyrillic-600.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Layout: phone-first. Hero is a gallery wall (same in both themes): the name and the promise, then the framed painting with its wall label.
   Below: steps beside an example chat, the optional channel block, the maker's note, a wall band with the button again, the signature.
   Second page (regionofre.com): the same wall as a header with the place's name and paragraph, then two cards. */
:root {
  --wall: #183B33;
  --wall-ink: #EEF1EA;
  --wall-muted: #AFC2B8;
  --gilt: #C9A15A;
  --chalk: #F3F1E7;
  --chalk-ink: #14231E;
  --label-bg: #FAF8F2;
  --label-ink: #1E1E1B;

  --bg: #F2F3EE;
  --surface: #FFFFFF;
  --ink: #16201C;
  --muted: #58645E;
  --line: #D6DBD2;
  --accent: #1F5C4C;
  --ochre: #94661C;

  --chat-bg: #DCE5DA;
  --bubble: #FFFFFF;
  --bubble-out: #E1F2D6;
  --bubble-ink: #16201C;
  --bubble-meta: #2B7A63;
  --time: #7C8A83;
  --kb-bg: rgba(22, 32, 28, .14);


  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --gutter: clamp(16px, 5vw, 32px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --wall: #1A4037;
    --bg: #0F1613; --surface: #16211D; --ink: #E5EAE5; --muted: #9BA9A1; --line: #27352F;
    --accent: #8FCBB6; --ochre: #D9B26A;
    --chat-bg: #0B1411; --bubble: #1E2B26; --bubble-out: #24473A; --bubble-ink: #E5EAE5;
    --bubble-meta: #8FCBB6; --time: #82938A; --kb-bg: rgba(255, 255, 255, .12);
    color-scheme: dark;
  }
}

[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: var(--gutter); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gilt); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, p { margin: 0; }
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 6vw, 38px); line-height: 1.1; text-wrap: balance; }

/* ---------- hero: the gallery wall ---------- */
.wallband {
  background: radial-gradient(90% 65% at 72% 0%, rgba(255, 236, 200, .13), rgba(255, 236, 200, 0) 70%), var(--wall);
  color: var(--wall-ink);
}
.hero { padding-block: 44px 60px; }
.hero .wrap { display: grid; gap: 40px; }
.hero-text { display: grid; justify-items: start; min-width: 0; }
.wordmark { display: flex; align-items: baseline; font-weight: 400; line-height: .9; font-size: clamp(78px, 22vw, 136px); }
.re { font-family: var(--display); color: var(--gilt); font-size: .58em; margin-right: .04em; }
.art { font-family: var(--display); letter-spacing: -.01em; }
.say { font: 400 13px/1.4 var(--mono); color: var(--wall-muted); margin-top: 12px; letter-spacing: .02em; }
.say b { font-weight: 500; color: var(--wall-ink); }
.pitch { font-size: clamp(21px, 5.4vw, 27px); font-weight: 600; line-height: 1.25; margin-top: 28px; max-width: 24ch; text-wrap: balance; }
.reline { color: var(--wall-muted); margin-top: 10px; max-width: 36ch; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 30px; }
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--chalk); color: var(--chalk-ink); text-decoration: none;
  font-weight: 600; font-size: 17px; padding: 14px 24px 14px 20px; border-radius: 999px;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55); transition: transform .15s ease;
}
.cta:hover { transform: translateY(-1px); }
.cta svg { flex: none; }
.free { font: 500 13px/1 var(--mono); color: var(--wall-muted); letter-spacing: .04em; }

.artwork { margin: 0; display: grid; gap: 18px; min-width: 0; }
.frame {
  padding: clamp(10px, 2.4vw, 16px);
  background: linear-gradient(135deg, #E2C27E 0%, #9C7432 22%, #D8B46C 46%, #7F5C24 72%, #CAA45E 100%);
  box-shadow: 0 34px 50px -22px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.painting { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 0 0 3px #3B2B12; background: #8C8670; }
.under { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
.label {
  background: var(--label-bg); color: var(--label-ink); padding: 10px 13px 11px; max-width: 250px;
  font-size: 12.5px; line-height: 1.45; box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}
.label b { font-weight: 600; }
.label span { color: #6A685F; }

@media (min-width: 880px) {
  .hero { padding-block: 76px 92px; }
  .hero .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 64px; }
}

/* ---------- how it works ---------- */
.how { padding-block: 64px; }
.how .wrap { display: grid; gap: 36px; }
.how h2 { margin-bottom: 28px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; }
.step .n { grid-row: span 2; font-family: var(--display); font-size: 34px; line-height: 1; color: var(--ochre); }
.step h3 { font-size: 21px; font-weight: 600; line-height: 1.3; }
.step p { color: var(--muted); max-width: 38ch; }
.forms { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.forms .ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); font-size: 16px; }

.phone { background: var(--chat-bg); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; max-width: 400px; width: 100%; justify-self: start; }
.phone-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ava { width: 36px; height: 36px; border-radius: 50%; background: var(--wall); color: var(--gilt); display: grid; place-items: center; font: 500 13px/1 var(--mono); flex: none; }
.phone-top b { display: block; font-size: 15px; line-height: 1.2; }
.phone-top small { color: var(--muted); font-size: 13px; }
.msgs { display: grid; gap: 6px; padding: 14px 12px 16px; }
.msg {
  max-width: 86%; background: var(--bubble); color: var(--bubble-ink);
  border-radius: 16px 16px 16px 5px; padding: 8px 12px 7px; font-size: 15px; line-height: 1.4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
.msg.out { justify-self: end; background: var(--bubble-out); border-radius: 16px 16px 5px 16px; }
.msg.photo { padding: 3px 3px 7px; width: 78%; }
.msg.photo .painting { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 13px 13px 4px 4px; box-shadow: none; }
.msg.photo p { padding: 6px 9px 0; }
.t { float: right; margin: 6px 0 -2px 10px; font-size: 11.5px; color: var(--time); font-variant-numeric: tabular-nums; }
.quote { border-left: 3px solid var(--bubble-meta); background: rgba(43, 122, 99, .1); border-radius: 4px; padding: 2px 8px 3px; margin-bottom: 4px; font-size: 13.5px; line-height: 1.35; }
.quote b { display: block; color: var(--bubble-meta); font-weight: 600; }
.kb { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 78%; }
.kb span { background: var(--kb-bg); color: var(--bubble-ink); text-align: center; font-size: 14px; font-weight: 600; padding: 8px 6px; border-radius: 10px; }

@media (min-width: 880px) {
  .how { padding-block: 96px; }
  .how .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .phone { justify-self: end; }
}

/* ---------- channel and consent (optional) ---------- */
.show { padding-block: 8px 64px; }
.show .wrap { display: grid; gap: 12px; justify-items: start; }
.show p { max-width: 52ch; }
.show a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.fine { font-size: 15px; color: var(--muted); }

/* ---------- maker's note ---------- */
.story { padding-block: 60px 72px; border-top: 1px solid var(--line); }
.story .wrap { display: grid; gap: 16px; justify-items: start; }
.eyebrow { font: 500 12.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.story blockquote { margin: 0; font-family: var(--display); font-size: clamp(22px, 5vw, 30px); line-height: 1.38; max-width: 34ch; text-wrap: pretty; }

/* ---------- again + signature ---------- */
.again { padding-block: 52px 56px; }
.again .wrap { display: grid; gap: 22px; justify-items: start; }
.again .cta-row { margin-top: 0; }
.foot { padding-block: 28px 96px; }
.foot .wrap { display: grid; gap: 10px; justify-items: start; }
.madein { font: 500 14px/1.4 var(--mono); color: var(--ink); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.madein:hover { color: var(--accent); }

/* ---------- regionofre.com ---------- */
.rhead { padding-block: 48px 60px; }
.rhead .wrap { display: grid; gap: 14px; justify-items: start; }
.stamp { width: 104px; height: 104px; color: var(--gilt); transform: rotate(-8deg); margin-bottom: 10px; }
.rtitle { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 13vw, 92px); line-height: .95; letter-spacing: -.01em; text-wrap: balance; }
.rtitle .re { font-size: .62em; }
.world { font-size: clamp(19px, 4.6vw, 23px); line-height: 1.45; max-width: 36ch; margin-top: 14px; }
.rbody { padding-block: 48px 96px; }
.rbody .wrap { display: grid; gap: 16px; }
.cards { display: grid; gap: 16px; }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  display: grid; gap: 10px; align-content: start; padding: 22px 22px 20px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: inherit;
  transition: border-color .15s ease;
}
.card:hover { border-color: var(--accent); }
.card .k { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.card .ttl { font-family: var(--display); font-size: 34px; line-height: 1; display: flex; align-items: baseline; }
.card .ttl .re { color: var(--ochre); }
.card p { color: var(--muted); }
.card .go { font: 500 14px/1.3 var(--mono); color: var(--accent); }

/* ---------- language switch ---------- */
.wallband.hero, .wallband.rhead { position: relative; }
.lang { position: absolute; top: 14px; right: max(var(--gutter), calc((100% - 1080px) / 2 + var(--gutter))); display: flex; gap: 4px; font: 500 13px/1 var(--mono); letter-spacing: .06em; }
.lang a, .lang span { padding: 8px 10px; border-radius: 999px; text-decoration: none; color: var(--wall-muted); }
.lang a:hover { color: var(--wall-ink); }
.lang [aria-current="page"] { color: var(--wall); background: var(--chalk); }

/* ---------- reply forms as tabs, voice message bubble ---------- */
.forms .tab { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font: inherit; font-weight: 500; color: inherit; background: transparent; border: 0; border-radius: 999px; padding: 4px 16px 4px 4px; cursor: pointer; text-align: left; }
.forms .tab:hover .ic { border-color: var(--accent); }
.forms .tab[aria-selected="true"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent); }
.voice .vrow { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.voice .play { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bubble-meta); color: var(--bubble-out); }
.voice .wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; }
.voice .wave i { flex: 1; min-width: 2px; max-width: 4px; border-radius: 2px; background: var(--bubble-meta); opacity: .75; }
.voice .dur { font-size: 12px; color: var(--time); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .cta, .card { transition: none; } .cta:hover { transform: none; } }