/* =========================================================================
   Plagtech LLC — plagtech.net
   -------------------------------------------------------------------------
   Design language: "the fan".
   One point resolving into many — the batch-payment primitive — is the only
   shape the site uses. It is the logo, the hero animation, the section marker
   and the feature glyph. Nothing else is decorated.

   Contents
     01  Tokens
     02  Fonts
     03  Reset & base
     04  Layout primitives
     05  Buttons & links
     06  Header / navigation
     07  Hero + the fan visual
     08  Products
     09  Spraay for Android (the page's single inversion)
     10  Ecosystem
     11  Contact
     12  Footer
     13  Motion preferences
   ========================================================================= */


/* ── 01  Tokens ─────────────────────────────────────────────────────────── */

:root {
  /* Colour.
     Ground is a green-leaning porcelain, not the usual blue-grey off-white.
     Ink carries a blue undertone so it sits with the accent rather than
     fighting it. Contrast ratios against --porcelain are noted inline;
     all body copy clears WCAG AA (4.5:1) and all large text clears 3:1. */
  --ink:          #0b1014;   /* 16.95:1  body, headings                     */
  --ink-2:        #141b20;   /* raised surfaces on the dark section         */
  --porcelain:    #eff2ef;   /* page ground                                 */
  --paper:        #fafcfa;   /* cards, hover grounds                        */
  --slate:        #5a6568;   /*  5.33:1  secondary copy                     */
  --rule:         #dde2de;   /* hairlines                                   */

  --ultramarine:  #2a2be8;   /*  7.14:1  links, live marks, the accent      */
  --ultramarine-d:#2321c4;   /*  8.92:1  pressed / hover                    */
  --current:      #2d7fe4;   /* mid-stop of the strand gradient             */
  --aqua:         #35c6d8;   /* decorative only on light; 9.30:1 on ink     */
  --mango:        #ff7a18;   /* decorative only on light; 7.33:1 on ink     */

  --on-ink:       #eff2ef;   /* 16.95:1  primary text on ink                */
  --on-ink-2:     #a8b3b0;   /*  8.87:1  secondary text on ink              */
  --on-ink-rule:  rgb(255 255 255 / 11%);

  /* Type. Bricolage Grotesque sets everything structural; Instrument Sans
     reads; JetBrains Mono appears only where a real value lives —
     addresses, amounts, PR numbers, the entity ID. Never as ornament. */
  --face-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --face-text:    "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --face-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1.0625rem;          /* 17px */
  --t-md:   1.1875rem;
  --t-lg:   1.375rem;
  --t-h3:   clamp(1.3rem, 0.95rem + 1.1vw, 1.7rem);
  --t-h2:   clamp(1.95rem, 1.25rem + 2.2vw, 3rem);
  --t-h1:   clamp(2rem, 1.05rem + 3.9vw, 3.9rem);

  /* Space */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;

  --shell:  1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 14px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ── 02  Fonts ──────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ── 03  Reset & base ───────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--t-base);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--face-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.032em;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: none;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.024em; }

p, figure, figcaption, dl, dd, dt { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
b, strong { font-weight: 600; }

::selection { background: var(--ultramarine); color: var(--paper); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--ultramarine);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: var(--gutter); top: 0;
  z-index: 100;
  transform: translateY(-140%);
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: transform 0.18s var(--ease);
}
.skip:focus-visible { transform: translateY(0); outline-offset: -4px; }

.lead {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--slate);
  max-width: 46ch;
}


/* ── 04  Layout primitives ──────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(4.5rem, 8vw, 8rem); }

/* A section opens on a rule terminated by the fan's node — the diagram's
   line-and-node language, reused as structure rather than ornament. */
.section__head {
  position: relative;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
.section__head::before {
  content: "";
  position: absolute;
  left: 0; top: -4px;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--ultramarine);
}

.section__note {
  margin-top: var(--s-4);
  max-width: 56ch;
  color: var(--slate);
}


/* ── 05  Buttons & links ────────────────────────────────────────────────── */

a { color: var(--ultramarine); text-underline-offset: 0.18em; }
a:hover { color: var(--ultramarine-d); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.25rem;
  border-radius: 9px;
  font-size: 0.975rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease);
}
.btn--solid {
  background: var(--ink);
  color: var(--on-ink);
  border: 1px solid var(--ink);
}
.btn--solid:hover { background: var(--ultramarine); border-color: var(--ultramarine); color: var(--paper); }

.btn--ghost {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: var(--face-mono);
  font-size: 0.875rem;
}
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--paper); }


/* ── 06  Header / navigation ────────────────────────────────────────────── */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--porcelain) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.site-head__in {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}
.brand__mark { width: 27px; height: 27px; color: var(--ultramarine); fill: var(--ultramarine); flex: none; }
.brand__word {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -0.038em;
}

.nav ul { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a {
  position: relative;
  display: inline-block;
  padding: 0.35rem 0;
  color: var(--slate);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.18s var(--ease);
}
.nav a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--ultramarine);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:not(.nav__cta):hover::after { transform: scaleX(1); }

.nav__cta {
  padding: 0.45rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
  background: transparent;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.nav__cta:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem 0.5rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-family: var(--face-text);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 16px; }
.nav-toggle__bars i {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child { transform: translateY(2.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child  { transform: translateY(-2.75px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    display: none;
    padding: var(--s-3) var(--gutter) var(--s-5);
    background: var(--porcelain);
    border-bottom: 1px solid var(--rule);
  }
  .nav[data-open="true"] { display: block; }
  .nav ul { display: grid; gap: 0; }
  .nav li { border-top: 1px solid var(--rule); }
  .nav a { display: block; padding: 0.95rem 0; font-size: 1.05rem; }
  .nav a::after { display: none; }
  .nav__cta {
    margin-top: var(--s-4);
    border-radius: 8px;
    text-align: center;
    padding: 0.85rem 1rem;
  }
  .nav li:has(.nav__cta) { border-top: 0; }
}


/* ── 07  Hero + the fan visual ──────────────────────────────────────────── */

.hero { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }

.hero__in {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.hero__in > * { min-width: 0; }
@media (min-width: 1000px) {
  .hero__in { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 4.5vw, 4.5rem); }
}

.hero h1 { letter-spacing: -0.042em; line-height: 0.98; }
.hero .lead { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* The frame is quiet so the animation inside it can be loud. */
.fan-frame {
  padding: clamp(0.75rem, 2vw, 1.25rem);
  background:
    radial-gradient(120% 90% at 8% 50%, color-mix(in srgb, var(--ultramarine) 5%, transparent) 0%, transparent 62%),
    var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.fan { width: 100%; height: auto; }

.fan-source rect { fill: var(--porcelain); stroke: var(--rule); stroke-width: 1; }
.fan-src-amt {
  font-family: var(--face-mono);
  font-size: 19px;
  font-weight: 500;
  fill: var(--ink);
  letter-spacing: -0.02em;
}
.fan-src-sub { font-family: var(--face-mono); font-size: 10.5px; fill: var(--slate); }

.fan-strands path { stroke-width: 1.35; opacity: 0.8; }
.fan-node  { opacity: 1; }
.fan-drop  { opacity: 0; }
.fan-addr  { font-family: var(--face-mono); font-size: 12px; fill: var(--slate); }
.fan-amt   { font-family: var(--face-mono); font-size: 12.5px; font-weight: 500; fill: var(--ink); }

/* The diagram scales with its viewBox, so on a narrow screen the ledger type
   is stepped up in user units to stay readable. */
@media (max-width: 560px) {
  .fan-addr { font-size: 13.5px; }
  .fan-amt  { font-size: 14px; }
  .fan-src-amt { font-size: 20px; }
}

/* Animating state. JS adds .is-run, which resets the picture to empty and
   then draws it. Without JS — or with reduced motion — the rules above stand
   and the finished diagram renders as a static illustration. */
.fan.is-run .fan-node,
.fan.is-run .fan-amt,
.fan.is-run .fan-addr { opacity: 0; }
.fan.is-run .fan-source { opacity: 0; }

.fan-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--slate);
}
.fan-cap__line { flex: 1 1 100%; }
.fan-cap__line b { color: var(--ink); font-weight: 600; }
.fan-cap__line--dim { color: color-mix(in srgb, var(--slate) 82%, var(--porcelain)); }

.replay {
  flex: none;
  margin-top: 0.15rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: transparent;
  color: var(--slate);
  font-family: var(--face-mono);
  font-size: var(--t-xs);
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.replay:hover { color: var(--ink); border-color: var(--ink); }

.rails {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--slate);
}
.rails b { color: var(--ink); font-weight: 600; }


/* ── 08  Products ───────────────────────────────────────────────────────── */

.products { border-bottom: 1px solid var(--rule); }

.product {
  position: relative;
  display: grid;
  gap: var(--s-3) clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
@media (min-width: 880px) {
  .product {
    grid-template-columns: minmax(215px, 0.95fr) minmax(0, 1.5fr) minmax(0, 0.5fr);
    align-items: start;
  }
}

/* Hover fills the row's own hairline with the accent, left to right —
   one gesture, used on one component. */
.product::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  height: 1px; width: 0;
  background: var(--ultramarine);
  transition: width 0.5s var(--ease);
}
.product:hover::before,
.product:focus-within::before { width: 100%; }

.product__id { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.product__link { color: var(--ink); text-decoration: none; }
.product__link::after { content: ""; position: absolute; inset: 0; }
.product:hover .product__link { text-decoration: underline; text-decoration-thickness: 1.5px; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--face-mono);
  font-size: var(--t-xs);
  color: var(--slate);
}
.status__mark { width: 6px; height: 6px; border-radius: 1.5px; }
.status--live .status__mark { background: var(--ultramarine); }
.status--pub  .status__mark { border: 1.5px solid var(--slate); }

.product__body p { max-width: 58ch; }
.product__aside {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--slate);
}
.product__aside a { position: relative; z-index: 1; }

.product__where {
  font-family: var(--face-mono);
  font-size: var(--t-sm);
  color: var(--slate);
  transition: color 0.2s var(--ease);
}
@media (min-width: 880px) { .product__where { text-align: right; } }
.product:hover .product__where { color: var(--ultramarine); }


/* ── 09  Spraay for Android — the page's single inversion ───────────────── */

.app {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
}
/* The hero's spectrum, reused exactly once, as the seam into the section. */
.app::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ultramarine), var(--aqua), var(--mango));
}
.app h2 { color: var(--on-ink); }
.app .lead { color: var(--on-ink); max-width: 40ch; margin-top: clamp(1rem, 2vw, 1.5rem); }
.app__copy > p:not(.lead) { color: var(--on-ink-2); max-width: 56ch; margin-top: var(--s-4); }

.app__in { display: grid; gap: clamp(3rem, 6vw, 4.5rem); align-items: center; }
.app__in > * { min-width: 0; }
@media (min-width: 1000px) {
  .app__in { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}

.feats {
  display: grid;
  gap: 0;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
}
@media (min-width: 620px) {
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.5rem); }
}
.feat { padding-block: var(--s-4); border-top: 1px solid var(--on-ink-rule); }
.feat dt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--on-ink);
}
.feat__i { width: 19px; height: 19px; flex: none; color: var(--aqua); }
.feat dd {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--on-ink-2);
  max-width: 44ch;
}

.app__uses {
  margin-top: var(--s-5);
  color: var(--on-ink-2);
  max-width: 52ch;
}
.app__get { margin-top: var(--s-6); }
.playbadge { display: inline-block; border-radius: 6px; }
.playbadge img { width: 186px; height: auto; transition: opacity 0.18s var(--ease); }
.playbadge:hover img { opacity: 0.86; }
.app__req {
  margin-top: var(--s-3);
  font-family: var(--face-mono);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--on-ink-2);
  max-width: 44ch;
}

/* Device frames are drawn here, so the section is finished with or without
   the screenshot files in /assets/screenshots/. */
.app__shots {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
}
.phone {
  position: relative;
  width: 252px;
  padding: 7px;
  border-radius: 34px;
  background: linear-gradient(160deg, #39433f 0%, #1b2226 42%, #2c3438 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 12%) inset,
              0 30px 60px -20px rgb(0 0 0 / 70%);
}
.phone::after {                       /* side button */
  content: "";
  position: absolute;
  right: -2px; top: 132px;
  width: 2px; height: 46px;
  border-radius: 2px;
  background: rgb(255 255 255 / 16%);
}
.phone__screen {
  position: relative;
  aspect-ratio: var(--shot, 9 / 19.3);
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--ultramarine) 26%, transparent), transparent 70%),
    linear-gradient(180deg, #131a1f 0%, #0d1317 100%);
}
.phone__screen::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 58%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0.16;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='%23eff2ef'%3E%3Cpath d='M6.6 14h13.8M12 14c4.2 0 3.6-7 8.4-7M12 14c4.2 0 3.6 7 8.4 7' fill='none' stroke='%23eff2ef' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='4.4' cy='14' r='2.2'/%3E%3Crect x='20.4' y='5.5' width='3' height='3' rx='0.8'/%3E%3Crect x='20.4' y='12.5' width='3' height='3' rx='0.8'/%3E%3Crect x='20.4' y='19.5' width='3' height='3' rx='0.8'/%3E%3C/svg%3E");
}
.phone__screen img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;   /* the heading matters more than the button row */
}

/* Ratios of the committed screenshots. Update these if you replace a file —
   they are what keeps the app's own chrome from being cropped. */
.phone--front { --shot: 1080 / 2113; }
.phone--back  { --shot: 1080 / 1663; }

.phone--back {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 0;
  transform: translate(-96%, -52%) rotate(-7deg) scale(0.9);
  opacity: 0.92;
}
.phone--front { z-index: 1; transform: translateX(15%); }

@media (max-width: 999px) {
  .app__shots { min-height: 480px; }
  .phone--back { transform: translate(-94%, -52%) rotate(-7deg) scale(0.88); }
}
@media (max-width: 700px) {
  .app__shots { min-height: 440px; }
  .phone--back { display: none; }
  .phone--front { transform: none; width: 232px; }
}

/* On the dark ground the focus ring switches to aqua to stay visible. */
.app :where(a, button):focus-visible { outline-color: var(--aqua); }


/* ── 10  Ecosystem ──────────────────────────────────────────────────────── */

.merges { border-bottom: 1px solid var(--rule); }
.merge { border-top: 1px solid var(--rule); }
.merge a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 1.5rem;
  padding-block: clamp(1.1rem, 2vw, 1.4rem);
  padding-inline: 0;
  color: var(--ink);
  text-decoration: none;
  transition: padding-inline 0.32s var(--ease), background-color 0.2s var(--ease);
}
.merge__name { grid-column: 1 / -1; }
@media (min-width: 620px) {
  .merge a:hover { padding-inline: 0.9rem; background: var(--paper); }
}
.merge__repo {
  font-family: var(--face-mono);
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.merge__repo i { font-style: normal; color: var(--slate); }
.merge a:hover .merge__repo { text-decoration: underline; text-decoration-thickness: 1.5px; }
.merge__name { font-size: 0.9rem; color: var(--slate); }
.merge__pr {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--face-mono);
  font-size: 0.85rem;
  color: var(--ultramarine);
}
.merge__pr::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 1.5px;
  background: var(--ultramarine);
}


/* ── 11  Contact ────────────────────────────────────────────────────────── */

.contact { border-top: 1px solid var(--rule); }
.contact__body {
  margin-top: var(--s-5);
  max-width: 58ch;
  font-size: var(--t-md);
  line-height: 1.58;
  color: var(--slate);
}
.contact__mail {
  display: inline-block;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  font-family: var(--face-display);
  font-size: clamp(1.6rem, 0.8rem + 3vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--ultramarine);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
  transition: text-decoration-thickness 0.18s var(--ease), color 0.18s var(--ease);
}
.contact__mail:hover { text-decoration-thickness: 5px; color: var(--ultramarine-d); }


/* ── 12  Footer ─────────────────────────────────────────────────────────── */

.site-foot { border-top: 1px solid var(--rule); padding-top: clamp(2.75rem, 5vw, 4rem); }

.site-foot__in { display: grid; gap: var(--s-6) var(--s-7); }
@media (min-width: 620px) {
  .site-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 880px) {
  .site-foot__in {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: start;
  }
}

.brand--foot { margin-right: 0; }
.foot-brand p {
  margin-top: var(--s-4);
  max-width: 34ch;
  font-size: 0.925rem;
  color: var(--slate);
}

.foot-nav__h {
  font-family: var(--face-text);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.foot-nav ul { display: grid; gap: 0.55rem; }
@media (min-width: 520px) { .foot-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foot-nav a {
  font-size: 0.925rem;
  color: var(--slate);
  text-decoration: none;
}
.foot-nav a:hover { color: var(--ink); text-decoration: underline; }

.foot-mail {
  display: inline-block;
  font-family: var(--face-mono);
  font-size: 0.925rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.foot-mail:hover { color: var(--ultramarine); border-color: var(--ultramarine); }
.foot-legal {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: var(--s-5);
}
/* The rule lines up with the content, not with the shell's gutters. */
.foot-legal::before {
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter); top: 0;
  height: 1px;
  background: var(--rule);
}
.legal {
  font-family: var(--face-mono);
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--slate);
}


/* ── 13  Motion preferences ─────────────────────────────────────────────── */

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