/* ============================================================================
   ieloquent.com — stylesheet for every page.

   Redesigned 2026-10-21 (owner: "recreate design more modern and light").
   What "light" means here, concretely, and why each choice was made:

   - The page sits on near-white, not white, and the colour comes from two
     large, very soft blurred shapes in the hero rather than from a hard
     gradient band across whole sections. Flat full-width gradients were what
     made the first version feel heavy.
   - Headings are Quicksand at 600, not 700, with negative tracking. The
     bolder weight read as a poster; the lighter one reads as a page.
   - Borders are nearly invisible and lift comes from soft, wide, low-opacity
     shadows instead. One hairline plus one shadow, never a heavy outline.
   - Radii are large (18-26px) and consistent, which is most of what reads as
     "modern" at a glance.
   - Generous vertical rhythm, and text columns kept near 60-70 characters.

   Standalone CSS on purpose — these pages must render with no build step and
   no framework.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  --ink:        #101319;
  --ink-soft:   #596273;
  --ink-faint:  #8e97a6;

  --bg:         #fbfbfd;
  --surface:    #ffffff;
  --line:       #eceef3;
  --line-soft:  #f3f4f8;

  --accent:      #6d47f5;
  --accent-ink:  #ffffff;
  --accent-soft: #f1ecfe;
  --accent-line: #ddd2fc;

  /* the two brand hues, kept for the hero wash and small marks */
  --sky:  #9fcfe8;
  --gold: #e7cf8a;
  --deep: #4a6e96;

  --shadow-sm: 0 1px 2px rgba(16, 19, 25, .04);
  --shadow-md: 0 1px 2px rgba(16, 19, 25, .04), 0 10px 24px -18px rgba(16, 19, 25, .35);
  --shadow-lg: 0 1px 2px rgba(16, 19, 25, .04), 0 22px 48px -28px rgba(16, 19, 25, .45);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --ink:        #eef0f4;
    --ink-soft:   #a7aebc;
    --ink-faint:  #79818f;

    --bg:         #0c0e12;
    --surface:    #14171d;
    --line:       #242830;
    --line-soft:  #1b1f26;

    --accent:      #a78bfa;
    --accent-ink:  #18102e;
    --accent-soft: #1d1830;
    --accent-line: #302a49;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 24px -18px rgba(0, 0, 0, .9);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, .4), 0 22px 48px -28px rgba(0, 0, 0, 1);
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.7 "Open Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: "Quicksand", "Open Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.85rem, 3.6vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 2.9vw, 2rem); margin-bottom: .7em; }
h3 { font-size: 1.14rem; letter-spacing: -.012em; margin-bottom: .45em; }

p { margin: 0 0 1.1em; }
a { color: inherit; }
img, svg { max-width: 100%; height: auto; }

::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1140px, 100% - 2.75rem); margin-inline: auto; }
/* Owner, 2026-10-21: "here made it wide" — the About page sat in a 43rem
   column while every section beside it ran the full width. It now uses the
   same width as the rest of the site. A blog ARTICLE keeps a reading
   measure below (.prose.post), because a 1140px line of prose is not read,
   it is scanned. */
.wrap.narrow { width: min(1140px, 100% - 2.75rem); }
/* an article keeps a reading measure — a 1140px line is scanned, not read */
.wrap.read { width: min(48rem, 100% - 2.75rem); margin-inline: auto; }

/* -------------------------------------------------------------- top bar */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem max(1.375rem, calc((100% - 1140px) / 2));
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
}
.bar::after {
  /* a seam, not a rule: the hairline fades out at both ends */
  content: "";
  position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

.brand {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  font-family: "Quicksand", sans-serif; font-weight: 600; font-size: 1.22rem; letter-spacing: -.025em;
}


.bar-nav { display: flex; align-items: center; gap: 1.6rem; font-size: .945rem; }
.bar-nav a { text-decoration: none; color: var(--ink-soft); transition: color .15s ease; }
.bar-nav a:hover, .bar-nav a[aria-current="page"] { color: var(--ink); }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .78rem 1.6rem;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-family: "Quicksand", sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: -.008em;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16,19,25,.08), 0 10px 22px -14px var(--accent);
  transition: transform .14s ease, box-shadow .14s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(16,19,25,.08), 0 16px 30px -16px var(--accent); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: .5rem 1.15rem; font-size: .92rem; }

.btn-ghost {
  background: var(--surface); color: var(--ink);
  border-color: var(--line); box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); }
/* A ghost button in the bar has no filled ground behind it, so it must keep the
   ordinary ink colour — the sign-in pill once rendered with no label at all. */
.bar-nav .btn-ghost { color: var(--ink); }

/* ------------------------------------------------------------- sections */
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

/* The hero carries the only real colour on the page: two wide, soft, blurred
   shapes in the brand hues, well under the text. No hard gradient band. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: -1;
  border-radius: 50%; filter: blur(80px); opacity: .55; pointer-events: none;
}
.hero::before {
  width: 46rem; height: 30rem; top: -14rem; left: -12rem;
  background: radial-gradient(closest-side, var(--sky), transparent);
}
.hero::after {
  width: 42rem; height: 28rem; top: -8rem; right: -14rem;
  background: radial-gradient(closest-side, var(--gold), transparent);
}
@media (prefers-color-scheme: dark) { .hero::before, .hero::after { opacity: .18; } }

/* Owner, 2026-10-21: "I asked you to wide that paragraph with others below."
   The opening paragraph was held in a 40rem column inside a 52rem hero, so it
   broke lines well before the sections under it did. Hero and lede now take
   the page's own width — the first paragraph lines up with every paragraph
   below it. The closing block keeps a measure: it is centred, and centred
   text at 1140px is unreadable. */
.hero-page { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.hero-page .wrap { max-width: none; }

.eyebrow {
  font-family: "Quicksand", sans-serif; font-weight: 600; font-size: .78rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--deep); margin-bottom: 1.15rem;
}
@media (prefers-color-scheme: dark) { .eyebrow { color: var(--sky); } }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--accent); }

/* The opening paragraph is the same size as every other paragraph on the
   page (owner, 2026-10-21) — no text here is larger than text elsewhere. */
.lede { font-size: 1rem; line-height: 1.65; color: var(--ink-soft); }
.section-lede { color: var(--ink-soft); margin-top: -.3em; margin-bottom: 2.4em; max-width: 40rem; }
.cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

/* A band is now a whisper of tint, not a gradient slab. */
.band { background: var(--line-soft); }
@media (prefers-color-scheme: dark) { .band { background: #10131a; } }

/* --------------------------------------------------------------- grids */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: 1.5rem; }

/* --------------------------------------------------------------- cards */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.7rem 1.6rem;
  box-shadow: var(--shadow-sm);
}
.card p { margin-bottom: 0; color: var(--ink-soft); font-size: .975rem; line-height: 1.66; }

.card-lift, .card-link { transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease; }
.card-lift:hover, .card-link:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow-lg); }
.card-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.card-quiet { background: transparent; border-style: dashed; box-shadow: none; }

.tag {
  /* a flex-column card would stretch the pill to the full card width */
  display: inline-block; align-self: flex-start; margin-bottom: .85rem;
  padding: .22rem .68rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-family: "Quicksand", sans-serif; font-weight: 600; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase;
}

.more {
  display: inline-block; margin-top: 1.05rem;
  font-family: "Quicksand", sans-serif; font-weight: 600; font-size: .93rem;
  color: var(--accent); text-decoration: none;
}
.card-link .more { margin-top: auto; padding-top: 1.05rem; }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.note { color: var(--ink-soft); font-size: .95rem; margin: 1.6rem 0 0; }
.note .more { margin-top: 0; }

/* ------------------------------------------------------------- numbers */
.numbers { padding: clamp(2rem, 4vw, 3rem) 0; }
.num { text-align: center; }
.num strong {
  display: block; font-family: "Quicksand", sans-serif;
  font-size: clamp(1.9rem, 3.8vw, 2.6rem); font-weight: 600;
  letter-spacing: -.03em; line-height: 1.05; color: var(--ink);
}
.num span { display: block; font-size: .88rem; color: var(--ink-faint); margin-top: .45rem; line-height: 1.5; }

/* A quiet inline fact strip, used under the hero. */
.facts { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.facts li {
  display: inline-flex; align-items: baseline; gap: .42rem;
  padding: .42rem .9rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-size: .87rem; color: var(--ink-soft);
}
.facts b { font-family: "Quicksand", sans-serif; font-weight: 600; font-size: .97rem; letter-spacing: -.02em; color: var(--ink); }

/* --------------------------------------------------------------- steps */
.steps { counter-reset: s; list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: .8rem; }
.steps li {
  counter-increment: s; position: relative;
  padding: 1.05rem 1.3rem 1.05rem 3.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm); color: var(--ink-soft);
}
.steps li strong { color: var(--ink); }
.steps li::before {
  content: counter(s); position: absolute; left: 1.15rem; top: 1.05rem;
  width: 1.65rem; height: 1.65rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-family: "Quicksand", sans-serif; font-weight: 600; font-size: .88rem;
  display: flex; align-items: center; justify-content: center;
}

/* ------------------------------------------------------------ channels */
.channel { display: flex; align-items: flex-start; gap: 1.1rem; }
.channel h3 { margin-bottom: .3em; }
.chan-mark { flex: 0 0 2.75rem; height: 2.75rem; border-radius: 14px; display: block; box-shadow: var(--shadow-sm); }
.chan-spotify { background: linear-gradient(145deg, #1ed760, #15924a); }
.chan-youtube { background: linear-gradient(145deg, #ff4b5c, #e00024); }
.soon {
  display: inline-block; margin-left: .5rem; vertical-align: middle;
  padding: .14rem .55rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-faint);
  font-family: "Open Sans", sans-serif; font-weight: 400; font-size: .7rem; text-transform: none;
}

/* ----------------------------------------------------------- long-form */
.prose { padding-bottom: 1.5rem; }
/* same size as any other section heading — only the rhythm differs */
.prose h2 { margin-top: 2.5em; margin-bottom: .55em; }
.prose p { color: var(--ink-soft); }
.prose p strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.post p { line-height: 1.78; }
.post > p:first-of-type { color: var(--ink); }

.ticks { list-style: none; padding: 0; margin: 0 0 1.6em; display: grid; gap: .85rem; }
.ticks li { position: relative; padding-left: 1.85rem; color: var(--ink-soft); }
.ticks li strong { color: var(--ink); font-weight: 600; }
.ticks li::before {
  content: ""; position: absolute; left: .05rem; top: .6em;
  width: .72rem; height: .4rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  border-radius: 1px; transform: rotate(-45deg);
}

.callout {
  margin-top: 2.8em; padding: 1.35rem 1.5rem;
  border-radius: var(--r-lg);
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--ink);
}
.callout a { color: var(--accent); }

.backlink { margin-top: 1.8em; }
.backlink a { color: var(--ink-faint); text-decoration: none; font-family: "Quicksand", sans-serif; font-weight: 600; }
.backlink a:hover { color: var(--ink); }

.closing { text-align: center; }
.closing .lede { max-width: 40rem; margin-inline: auto; }
.closing .cta { justify-content: center; }

/* -------------------------------------------------------------- footer */
footer { border-top: 1px solid var(--line); padding: 3rem 0 3.25rem; }
.foot p { display: block; margin: 0 0 .5rem; }
.foot-cols {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  margin-bottom: 2rem;
}
.foot-brand { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; font-size: 1.05rem; }

.foot-h {
  font-family: "Quicksand", sans-serif; font-weight: 600; font-size: .74rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .75rem;
}
.foot-cols nav { display: flex; flex-direction: column; gap: .5rem; font-size: .93rem; }
.foot-cols nav a { color: var(--ink-soft); text-decoration: none; transition: color .15s ease; }
.foot-cols nav a:hover { color: var(--ink); }
.muted { color: var(--ink-faint); }
.foot .muted { display: block; font-size: .9rem; max-width: 44rem; line-height: 1.6; }
.foot .fine { font-size: .82rem; color: var(--ink-faint); border-top: 1px solid var(--line); padding-top: 1.3rem; }

/* --------------------------------------------------------------- phone */
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .card { padding: 1.45rem 1.35rem; }
}
@media (max-width: 620px) {
  .bar { padding-inline: 1.25rem; }
  .bar-nav a:not(.btn) { display: none; }
  .bar-nav { gap: .8rem; }
  .hero::before, .hero::after { filter: blur(60px); }
  .cta .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* A page hero already ends in whitespace, so the section that follows it does
   not need a full top margin as well — measured at about 240px of nothing on
   the About page before this rule. */
.hero-page + section { padding-top: clamp(1.75rem, 3.5vw, 3rem); }

/* ---- language picker ----
   A list, not a row of flags (owner, 2026-10-21). <details>/<summary> so it
   opens with no JavaScript at all; the flags are drawn SVG because Windows
   ships no glyph for flag emoji and would print two letters instead. */
.langpick{position:relative;margin-left:.3rem}
.langpick summary{
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  padding:.35rem .55rem;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);color:var(--ink-soft);
  font-family:"Quicksand",sans-serif;font-weight:600;font-size:.84rem;
  list-style:none;white-space:nowrap;
}
.langpick summary::-webkit-details-marker{display:none}
.langpick summary:hover{color:var(--ink);border-color:var(--accent-line)}
.langpick svg{display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.langpick-chev{box-shadow:none;opacity:.6;transition:transform .15s ease}
.langpick[open] .langpick-chev{transform:rotate(180deg)}

.langmenu{
  position:absolute;right:0;top:calc(100% + .4rem);z-index:30;
  min-width:11rem;padding:.3rem;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:.1rem;
}
.langmenu a{
  display:flex;align-items:center;gap:.6rem;
  padding:.5rem .6rem;border-radius:8px;text-decoration:none;
  color:var(--ink-soft);font-size:.9rem;
}
.langmenu a:hover{background:var(--line-soft);color:var(--ink)}
.langmenu a[aria-current]{color:var(--accent);background:var(--accent-soft);font-weight:600}
@media (max-width:620px){
  .langpick{margin-left:0}
  .langpick-name{display:none}
  .langpick summary{padding:.35rem .4rem;gap:.3rem}
}
}

/* "Blog EN" in the Polish and Russian nav: the articles are not translated yet,
   so the link says so rather than leading to a page that is not there. */
.enmark{
  font-size:.62rem;font-weight:600;letter-spacing:.06em;
  padding:.05rem .25rem;border-radius:4px;
  border:1px solid var(--line);color:var(--ink-faint);vertical-align:1px;
}

/* ---- the wordmark ----
   The mark IS the E of the name (owner, 2026-10-21): i + logo + loquent, set
   as one word. Sized in `em` so it tracks the text, and nudged onto the
   baseline — a letterform has to sit on the line, not float in the middle of
   it the way a square badge can. */
.brand{gap:0;letter-spacing:-.02em}
.brand-e{
  /* vertical-align:baseline puts a replaced element's BOTTOM edge on the text
     baseline — which is exactly where a capital letter sits. Any offset here
     (it was -.1em) drops the mark below the line the other letters stand on.
     Height is above cap height on purpose — the mark is the one coloured
     thing in the wordmark and carries it, so it stands a little taller than
     the letters while still standing ON their line. */
  display:inline-block;height:.92em;width:auto;vertical-align:baseline;
  margin:0 0 0 .02em;border-radius:0;
}
.foot-brand strong{display:inline-flex;align-items:baseline;gap:0}

/* ---- the tour videos ----
   Small cards in a row, not one full-width player (owner, 2026-10-21: "made
   this block with video less in size ... next we'll put another one"), so a
   second recording drops in beside the first without redesigning anything. */
.tours{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
.tour-card{
  margin:0;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
}
.tour-card video,.tour-slot{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--sunk)}
.tour-card figcaption{
  padding:.7rem .9rem;font-family:"Quicksand",sans-serif;font-weight:600;
  font-size:.92rem;color:var(--ink);
}
/* the empty slot waiting for the next recording */
.tour-soon{border-style:dashed;box-shadow:none;background:transparent}
.tour-soon .tour-slot{background:var(--line-soft)}
.tour-soon figcaption{color:var(--ink-faint);font-weight:600}

/* The tour sits directly under the hero — it is the first thing a visitor
   should see working (owner, 2026-10-21: "put video on the top page").
   Tighter top padding so it reads as part of the opening, not a new section. */

/* ------------------------------------------------- the enquiry form
   Владелец, 2026-10-21: адрес hello@ieloquent.com не существует, и письма по
   нему уходили в никуда. На его месте форма; отправляется в приложение
   (см. contact.js). */
.form { display: grid; gap: 1rem; max-width: 34rem; margin-top: 2rem; }
.form label { display: grid; gap: .4rem; font-size: .95rem; color: var(--ink-soft); }
.form input, .form textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: .7rem .85rem; width: 100%;
}
.form textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form .btn { justify-self: start; }
/* Ловушка для ботов: убрана с глаз И из чтения с экрана, но осталась в форме. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; font-size: .95rem; min-height: 1.4em; }
.form-status.is-good { color: #0f7a4d; }
.form-status.is-bad { color: #b4232a; }
@media (prefers-color-scheme: dark) {
  .form-status.is-good { color: #5fd3a0; }
  .form-status.is-bad { color: #ff8b8b; }
}

/* ------------------------------------------------- share this page
   Владелец, 2026-10-21: «generate QR and links that users could use to share
   our website with others». Блок стоит на странице «Напишите нам» — туда
   приходит тот, кто уже решил, что мы ему интересны. */
.share { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: start; margin-top: 1.5rem; }
.share img { width: 150px; height: 150px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.share-links { display: flex; flex-wrap: wrap; gap: .55rem; }
.share-links a, .share-links button {
  font: inherit; font-size: .93rem; font-family: "Quicksand", sans-serif; font-weight: 600;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: .42rem .95rem; text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.share-links a:hover, .share-links button:hover { border-color: var(--accent); color: var(--accent); }
.share-url {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .9rem;
  color: var(--ink-soft); word-break: break-all; margin: 0 0 .9rem;
}
@media (max-width: 34rem) { .share { grid-template-columns: 1fr; } }