/* ============================================================
   SALON MATURZYSTÓW — Joomla template
   Design tokens + layout + components.
   Fonts (Oswald + Open Sans) and Font Awesome are loaded
   separately via the Web Asset Manager (see joomla.asset.json).
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* ---- Brand: Perspektywy Red ---- */
  --red-50:#FEF1F1; --red-100:#FBD9DA; --red-200:#F6A9AC; --red-300:#F1787D;
  --red-400:#F0454D; --red-500:#ED1E26; --red-600:#CE161D; --red-700:#A01017; --red-800:#730B10;

  /* ---- Brand: Salon Blue ---- */
  --blue-50:#EAF4FA; --blue-100:#CDE5F1; --blue-200:#9CCAE3; --blue-300:#63ABD0;
  --blue-400:#2F88B6; --blue-500:#1A6C9C; --blue-600:#155A82; --blue-700:#0F4361;
  --blue-800:#0A2F44; --blue-900:#07212F;

  /* ---- Accent: Salon Orange ---- */
  --orange-50:#FFF3EA; --orange-100:#FFDFC4; --orange-300:#FFA866;
  --orange-400:#FF8533; --orange-500:#FF6600; --orange-600:#E25600; --orange-700:#B84500;

  /* ---- Neutrals ---- */
  --white:#FFFFFF; --ink-50:#F6F8FA; --ink-100:#EDF1F5; --ink-200:#DEE4EB;
  --ink-300:#C4CDD7; --ink-400:#9AA5B1; --ink-500:#6B7682; --ink-600:#4B545E;
  --ink-700:#333B43; --ink-800:#20262C; --ink-900:#14181C; --black:#000000;

  /* ---- Feedback ---- */
  --green-50:#E9F7EF; --green-500:#1E9E5A; --green-600:#168049;
  --amber-50:#FFF6E5; --amber-500:#F5A300; --amber-600:#C98300;

  /* ---- Semantic aliases ---- */
  --brand-primary:var(--red-500);
  --brand-primary-ink:var(--red-600);
  --brand-secondary:var(--blue-500);
  --brand-accent:var(--orange-500);

  --text-strong:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-subtle:var(--ink-400);
  --text-on-brand:var(--white);
  --text-link:var(--blue-500);
  --text-link-hover:var(--blue-600);

  --surface-page:var(--white);
  --surface-subtle:var(--ink-50);
  --surface-card:var(--white);
  --surface-inverse:var(--blue-800);
  --surface-accent:var(--orange-500);
  --surface-brand:var(--red-500);

  --border-subtle:var(--ink-200);
  --border-default:var(--ink-300);
  --border-strong:var(--blue-500);
  --focus-ring:var(--blue-400);

  /* ---- Typography ---- */
  --font-display:"Oswald","Arial Narrow",Arial,sans-serif;
  --font-body:"Open Sans","Helvetica Neue",Arial,sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  --text-display:clamp(2.75rem,6vw,5rem);
  --text-h1:clamp(2rem,4vw,3rem);
  --text-h2:clamp(1.625rem,3vw,2.25rem);
  --text-h3:1.375rem;
  --text-h4:1.125rem;
  --text-lead:1.25rem; --text-base:1rem; --text-sm:0.875rem; --text-xs:0.75rem;
  --text-eyebrow:0.8125rem;

  --leading-tight:1.05; --leading-snug:1.2; --leading-normal:1.55; --leading-relaxed:1.7;
  --tracking-display:-0.01em; --tracking-tight:-0.005em;
  --tracking-eyebrow:0.14em; --tracking-wide:0.04em;

  /* ---- Spacing & layout ---- */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem;
  --space-9:4rem; --space-10:5rem; --space-12:7rem;
  --container-max:1200px; --container-narrow:800px;
  --gutter:1.5rem; --section-y:clamp(3rem,7vw,6rem);
  --aside-width:320px;

  /* ---- Effects ---- */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:20px;
  --radius-xl:32px; --radius-pill:999px;
  --radius-hero:48px 48px 0 64px;

  --shadow-xs:0 1px 2px rgba(10,47,68,.06);
  --shadow-sm:0 2px 8px rgba(10,47,68,.08);
  --shadow-md:0 8px 24px rgba(10,47,68,.10);
  --shadow-lg:0 18px 48px rgba(10,47,68,.14);
  --shadow-brand:0 10px 30px rgba(237,30,38,.28);

  --border-width:1px; --border-width-bold:2px;
  --ring:0 0 0 3px rgba(47,136,182,.4);

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:.15s; --dur-base:.25s; --dur-slow:.4s;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--text-body);
  background:var(--surface-page);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
img { max-width:100%; height:auto; }
a { color:var(--text-link); text-decoration:none; transition:color var(--dur-fast) var(--ease-out); }
a:hover { color:var(--text-link-hover); }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs); }
.sm-skip-link {
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--blue-800); color:#fff; padding:10px 16px; border-radius:0 0 var(--radius-sm) 0;
}
.sm-skip-link:focus { left:0; color:#fff; }

/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */
.sm-container { max-width:var(--container-max); margin:0 auto; padding-left:24px; padding-right:24px; }
.sm-page { flex:1 0 auto; display:flex; flex-direction:column; }

.sm-main { padding:44px 24px 80px; }
.sm-body { display:grid; grid-template-columns:minmax(0,1fr); gap:40px; }
@media (min-width:1000px) {
  .sm-body { grid-template-columns:minmax(0,1fr) var(--aside-width); gap:56px; }
  .sm-body[data-full="true"] { grid-template-columns:minmax(0,1fr); }
  .sm-aside { align-self:start; }
}
.sm-content { min-width:0; display:flex; flex-direction:column; gap:40px; }
.sm-aside { min-width:0; display:flex; flex-direction:column; gap:20px; }

/* ============================================================
   4. HEADER
   ============================================================ */
.sm-header { position:sticky; top:0; z-index:40; }

/* Top bar */
.sm-topbar { background:var(--blue-800); color:rgba(255,255,255,.82); font-size:12.5px; }
.sm-topbar__inner {
  max-width:var(--container-max); margin:0 auto; padding:7px 24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
}
.sm-topbar__info i { margin-right:7px; opacity:.8; }
.sm-topbar__links { display:flex; gap:18px; align-items:center; }
.sm-topbar a { color:inherit; }
.sm-topbar a:hover { color:#fff; }
.sm-topbar .mod-menu { list-style:none; margin:0; padding:0; display:flex; gap:18px; }
.sm-topbar .mod-menu a { font-size:12.5px; }

/* Nav bar */
.sm-navbar { background:#fff; border-bottom:1px solid var(--border-subtle); }
.sm-navbar__inner {
  max-width:var(--container-max); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}

/* Logo */
.sm-logo { text-decoration:none; line-height:.9; display:flex; flex-direction:column; }
.sm-logo__title {
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:25px;
  text-transform:uppercase; letter-spacing:-.01em; color:var(--blue-800);
}
.sm-logo__title em { font-style:normal; color:var(--red-500); }
.sm-logo__tag {
  font-family:var(--font-display); font-weight:var(--fw-medium); font-size:11px;
  text-transform:uppercase; letter-spacing:.22em; color:var(--text-muted); margin-top:3px;
}
.sm-logo img { display:block; max-height:52px; width:auto; }

/* Primary navigation */
.sm-nav { margin-left:auto; display:flex; gap:2px; align-items:center; flex-wrap:wrap; }
.sm-nav .mod-menu { list-style:none; margin:0; padding:0; display:flex; gap:2px; align-items:center; flex-wrap:wrap; }
.sm-nav .mod-menu > li { position:relative; }
.sm-nav .mod-menu a,
.sm-nav .mod-menu span.nav-header,
.sm-nav .mod-menu .separator {
  display:block; font-size:14px; font-weight:var(--fw-medium); color:var(--text-body);
  padding:8px 12px; border-radius:8px; transition:background var(--dur-fast) var(--ease-out);
}
.sm-nav .mod-menu a:hover,
.sm-nav .mod-menu .current > a,
.sm-nav .mod-menu .active > a { background:var(--ink-100); color:var(--text-strong); }

/* Dropdown submenus (if a menu module outputs nested lists) */
.sm-nav .mod-menu ul {
  list-style:none; margin:0; padding:6px; position:absolute; top:100%; left:0; min-width:220px;
  background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); display:none; flex-direction:column; gap:2px; z-index:50;
}
.sm-nav .mod-menu li:hover > ul { display:flex; }
.sm-nav .mod-menu ul a { font-weight:var(--fw-regular); }

/* CTA button in header */
.sm-cta {
  margin-left:8px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:var(--fw-medium); font-size:13px;
  text-transform:uppercase; letter-spacing:.04em; color:#fff; background:var(--red-500);
  padding:11px 22px; border-radius:var(--radius-pill); border:2px solid transparent;
  transition:background var(--dur-fast) var(--ease-out);
}
.sm-cta:hover { background:var(--red-600); color:#fff; }

/* Mobile toggle */
.sm-nav-toggle {
  display:none; margin-left:auto; background:transparent; border:0; cursor:pointer;
  width:44px; height:44px; align-items:center; justify-content:center; color:var(--blue-800);
  font-size:22px; border-radius:var(--radius-sm);
}
.sm-nav-toggle:hover { background:var(--ink-100); }

@media (max-width:860px) {
  .sm-nav-toggle { display:inline-flex; }
  .sm-navbar__inner { flex-wrap:nowrap; }
  .sm-nav {
    order:3; flex-basis:100%; margin-left:0; margin-top:12px;
    flex-direction:column; align-items:stretch; gap:4px;
    max-height:0; overflow:hidden; transition:max-height var(--dur-base) var(--ease-out);
  }
  .sm-header.is-open .sm-nav { max-height:80vh; overflow:auto; }
  .sm-nav .mod-menu { flex-direction:column; align-items:stretch; width:100%; }
  .sm-nav .mod-menu ul { position:static; box-shadow:none; border:0; padding-left:16px; display:flex; }
  .sm-cta { margin-left:0; margin-top:6px; justify-content:center; }
}

/* ============================================================
   5. HERO / BANNER (full-width module position)
   ============================================================ */
.sm-hero { max-width:var(--container-max); margin:0 auto; padding:28px 24px 0; }
.sm-hero img { display:block; width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.sm-hero .sm-imgph {
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 11px),
    linear-gradient(135deg,var(--blue-600),var(--blue-400));
  border-radius:var(--radius-lg); aspect-ratio:1200/300;
}

/* ============================================================
   6. BREADCRUMBS
   ============================================================ */
.sm-breadcrumbs { max-width:var(--container-max); margin:0 auto; padding:18px 24px 0; }
.sm-breadcrumbs .breadcrumb,
.sm-breadcrumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0;
  font-size:13px; color:var(--text-muted); font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:.04em; }
.sm-breadcrumbs li + li::before { content:"›"; margin-right:8px; color:var(--text-subtle); }
.sm-breadcrumbs a { color:var(--text-muted); }
.sm-breadcrumbs a:hover { color:var(--red-500); }

/* ============================================================
   7. SIDEBAR CARDS (module chrome "sm-card")
   ============================================================ */
.sm-card {
  background:#fff; border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:24px;
}
.sm-card__title {
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em;
  font-size:1.15rem; font-weight:var(--fw-semibold); color:var(--blue-700);
  margin:0 0 16px;
}
.sm-card__body > *:first-child { margin-top:0; }
.sm-card__body > *:last-child { margin-bottom:0; }

/* Accent variant (e.g. newsletter tile) — add Module Class Suffix " sm-card--accent" */
.sm-card--accent { background:var(--orange-500); border-color:transparent; color:#fff; }
.sm-card--accent .sm-card__title, .sm-card--accent a { color:#fff; }
.sm-card--accent:hover { background:var(--orange-600); }
.sm-card--inverse { background:var(--blue-800); border-color:transparent; color:#fff; }
.sm-card--inverse .sm-card__title { color:#fff; }

/* Social icon row helper (use inside a Custom HTML module) */
.sm-social { display:flex; gap:10px; flex-wrap:wrap; }
.sm-social a {
  width:42px; height:42px; border-radius:50%; background:var(--blue-500); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  transition:background var(--dur-fast) var(--ease-out);
}
.sm-social a:hover { background:var(--blue-600); color:#fff; }

/* ============================================================
   8. FOOTER
   ============================================================ */
.sm-footer { flex-shrink:0; background:var(--blue-900); color:rgba(255,255,255,.72); }
.sm-footer__top {
  max-width:var(--container-max); margin:0 auto; padding:52px 24px 28px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:32px;
}
.sm-footer__brand { grid-column:1/-1; max-width:340px; }
.sm-footer__logo {
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:23px;
  text-transform:uppercase; color:#fff; line-height:1;
}
.sm-footer__logo em { font-style:normal; color:var(--red-400); }
.sm-footer__about { font-size:13.5px; line-height:1.6; margin:14px 0 0; }
.sm-footer__social { display:flex; gap:10px; margin-top:16px; }
.sm-footer__social a {
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background var(--dur-fast) var(--ease-out);
}
.sm-footer__social a:hover { background:rgba(255,255,255,.2); color:#fff; }

.sm-footer__col .mod-menu,
.sm-footer__col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:13.5px; }
.sm-footer__col a { color:inherit; }
.sm-footer__col a:hover { color:#fff; }
/* Footer module titles */
.sm-footer__top .moduletitle,
.sm-footer__top h3 {
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em;
  font-size:13px; color:#fff; margin:0 0 14px;
}
.sm-footer__bottom { border-top:1px solid rgba(255,255,255,.12); }
.sm-footer__bottom-inner {
  max-width:var(--container-max); margin:0 auto; padding:16px 24px; font-size:12.5px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/* ============================================================
   9. CONTENT TYPOGRAPHY (articles / com_content / modules)
   Applies inside .sm-content so user-authored article HTML
   automatically inherits the brand look.
   ============================================================ */
.sm-content .eyebrow,
.sm-content .sm-eyebrow {
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display);
  font-size:13px; font-weight:var(--fw-medium); text-transform:uppercase;
  letter-spacing:.14em; color:var(--red-500);
}
.sm-content .sm-eyebrow::before { content:""; width:28px; height:3px; border-radius:2px; background:currentColor; }

.sm-content h1, .sm-content h2, .sm-content h3, .sm-content h4 {
  font-family:var(--font-display); font-weight:var(--fw-bold); text-transform:uppercase;
  color:var(--blue-800); line-height:var(--leading-snug); margin:0 0 .5em;
}
.sm-content h1 { font-size:var(--text-h1); }
.sm-content h2 { font-size:var(--text-h1); margin-top:0; }
.sm-content h3 { font-size:var(--text-h3); }
.sm-content h4 { font-size:var(--text-h4); letter-spacing:.02em; }
.sm-content p { margin:0 0 1.1rem; font-size:1.05rem; line-height:1.75; }
.sm-content p.lead, .sm-content .lead { font-size:var(--text-lead); color:var(--text-strong); font-weight:var(--fw-semibold); line-height:1.5; }
.sm-content a { color:var(--text-link); text-decoration:underline; text-underline-offset:2px; }
.sm-content a:hover { color:var(--text-link-hover); }
.sm-content ul, .sm-content ol { margin:0 0 1.1rem; padding-left:1.4rem; line-height:1.7; }
.sm-content li { margin-bottom:.4rem; }
.sm-content img { border-radius:var(--radius-md); }
.sm-content hr { border:0; border-top:1px solid var(--border-subtle); margin:2.5rem 0; }

.sm-content blockquote {
  margin:2rem 0; padding:28px 36px; border-left:4px solid var(--red-500);
  background:var(--ink-50); border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.sm-content blockquote p {
  margin:0; font-family:var(--font-display); font-weight:var(--fw-medium);
  font-size:1.55rem; line-height:1.3; color:var(--blue-800);
}
.sm-content blockquote cite { display:block; margin-top:14px; font-style:normal; font-size:14px; color:var(--text-muted); }

/* Tables */
.sm-content table { width:100%; border-collapse:collapse; margin:0 0 1.5rem; font-size:.95rem; }
.sm-content th, .sm-content td { padding:12px 16px; border-bottom:1px solid var(--border-subtle); text-align:left; }
.sm-content thead th {
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  font-size:13px; color:var(--blue-800); background:var(--ink-50);
}
.sm-content tbody tr:hover { background:var(--ink-50); }

/* Media embeds keep aspect ratio */
.sm-content iframe { max-width:100%; border-radius:var(--radius-lg); }

/* ============================================================
   10. REUSABLE COMPONENTS (opt-in classes for Custom HTML modules/articles)
   ============================================================ */
/* Buttons */
.sm-btn {
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display);
  font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:.04em; font-size:14px;
  padding:12px 26px; border-radius:var(--radius-pill); border:2px solid transparent;
  cursor:pointer; text-decoration:none; transition:all var(--dur-fast) var(--ease-out);
}
.sm-btn--primary { background:var(--red-500); color:#fff; }
.sm-btn--primary:hover { background:var(--red-600); color:#fff; }
.sm-btn--secondary { background:var(--blue-500); color:#fff; }
.sm-btn--secondary:hover { background:var(--blue-600); color:#fff; }
.sm-btn--accent { background:var(--orange-500); color:#fff; }
.sm-btn--accent:hover { background:var(--orange-600); color:#fff; }
.sm-btn--ghost { background:transparent; color:var(--blue-700); border-color:var(--blue-300); }
.sm-btn--ghost:hover { border-color:var(--red-500); color:var(--red-500); }

/* Pills / badges */
.sm-badge {
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display);
  font-weight:var(--fw-bold); font-size:12px; letter-spacing:.03em; padding:3px 11px;
  border-radius:var(--radius-pill); background:var(--orange-50); color:var(--orange-700);
}
.sm-badge--blue { background:var(--blue-50); color:var(--blue-700); }
.sm-badge--red { background:var(--red-50); color:var(--red-600); }

/* Card grid (e.g. list of cities / links) */
.sm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:12px; }
.sm-tile {
  text-decoration:none; background:#fff; border:2px solid var(--blue-200);
  border-radius:var(--radius-md); padding:16px; display:flex; flex-direction:column; gap:8px;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.sm-tile:hover { border-color:var(--red-500); box-shadow:var(--shadow-md); }
.sm-tile__title { font-family:var(--font-display); text-transform:uppercase; font-weight:var(--fw-semibold);
  font-size:1.15rem; color:var(--blue-800); line-height:1.1; }
.sm-tile__meta { font-size:12.5px; color:var(--text-muted); line-height:1.35; }

/* Stat block on dark background */
.sm-section--dark {
  background:var(--blue-800); border-radius:var(--radius-xl); padding:48px; color:#fff;
}
.sm-section--dark h2, .sm-section--dark h3 { color:#fff; }
.sm-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:28px; }
.sm-stat__value { font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:clamp(2.2rem,4vw,3rem); line-height:.95; color:#fff; display:block; }
.sm-stat__label { font-size:13.5px; font-weight:var(--fw-semibold); color:rgba(255,255,255,.72); }

/* ============================================================
   11. JOOMLA SYSTEM MESSAGES
   ============================================================ */
#system-message-container { display: none; }
.alert {
  border-radius:var(--radius-md); padding:14px 18px; margin-bottom:12px;
  border:1px solid var(--border-subtle); background:#fff; font-size:.95rem;
  display:flex; align-items:flex-start; gap:10px;
}
.alert-success { background:var(--green-50); border-color:var(--green-500); color:var(--green-600); }
.alert-info { background:var(--blue-50); border-color:var(--blue-300); color:var(--blue-700); }
.alert-warning { background:var(--amber-50); border-color:var(--amber-500); color:var(--amber-600); }
.alert-danger, .alert-error { background:var(--red-50); border-color:var(--red-400); color:var(--red-600); }
.alert .alert-heading { font-weight:var(--fw-bold); }
button.btn-close, .alert .close {
  margin-left:auto; background:transparent; border:0; font-size:18px; cursor:pointer; color:inherit; opacity:.6;
}
button.btn-close:hover { opacity:1; }

/* ============================================================
   12. UTILITIES
   ============================================================ */
.sm-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.sm-mt-0 { margin-top:0 !important; }
.sm-mb-0 { margin-bottom:0 !important; }
.sm-text-center { text-align:center; }

/* ============================================================
   13. RESPONSIVE FINE-TUNING
   ============================================================ */
@media (max-width:720px) {
  .sm-main { padding:28px 20px 56px; }
  .sm-container, .sm-topbar__inner, .sm-navbar__inner,
  .sm-hero, .sm-breadcrumbs, .sm-footer__top, .sm-footer__bottom-inner { padding-left:20px; padding-right:20px; }
  .sm-section--dark { padding:32px 24px; }
  .sm-content blockquote { padding:20px 22px; }
  .sm-content blockquote p { font-size:1.25rem; }
}

p:empty {
    margin: 0;
}

#privacy-settings {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}