/* ==========================================================================
   Axel Guilmin — personal page
   Hand-written, no build. Design tokens + light/dark (auto) + layout.
   Accent = brand yellow (PLACEHOLDER --accent; swap the hex when confirmed).
   ========================================================================== */

/* --- Reset (minimal) --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea { font: inherit; color: inherit; }
a { color: inherit; }

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

/* --- Design tokens (default = light) --- */
:root {
  color-scheme: light dark;
  --hero-accent: #e5a200; /* light: brand gold (dark overrides to #ffd60a) — ambient/halo tint */
  --font-head: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-signature: "Caveat", cursive;

  /* Neutrals: warm "ink" ramp from the design system */
  --bg: #fbf8f1;            /* warm paper — designer "Miel foncé" */
  --surface: #f3efe4;       /* warm card surface */
  --text: #161512;          /* ink-900 */
  --muted: #6e6a60;         /* ink-500 */
  --border: rgba(14,13,11,.12);

  --accent: #e39a00;        /* light: franc gold (dark overrides to #ffd60a) */
  --accent-ink: #2a1f00;    /* yellow-ink (text on gold) */
  --accent-strong: #c98700; /* light: deep gold hover (dark overrides to #f5b800) */
  --honey: #44413b;         /* honeycomb grid tint on light bg (warm ink) */
  --beat: #e0990a;          /* section-2 hex glow in light (designer value) */
  --honey-glow: 72%; --honey-mid: 36%; --honey-base: 14%;  /* light: honeycomb intensity (stronger so it reads on cream) */
  --panel: color-mix(in srgb, var(--bg) 80%, transparent); /* frosted section bg (adapts to theme) */
  --frost-op: 55%; --frost-blur: 10px;   /* shared frosted-glass recipe (scrim + ghost btn + socials + pills) */
  --studio: #0e0d0b;        /* ink-950 */

  --link: #161512;          /* links are ink + accent underline in light mode */

  --maxw: 68rem;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --radius: 14px;
  --shadow: 0 12px 40px rgba(14,13,11,.12);
  --psh1: rgba(0,0,0,.18); --psh2: rgba(0,0,0,.20);   /* portrait shadow (dark on light bg) */
  --card-shadow: 0 12px 28px rgba(0,0,0,.22);         /* app-icon shadow (dark on light bg) */
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Dark palette: applied for system-dark (unless the user forced light),
   or whenever the user explicitly forced dark via the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161512;           /* ink-900 (softer than ink-950) */
    --surface: #1f1d19;      /* ink-800 */
    --text: #f2eee5;         /* ink-100 */
    --muted: #97928a;        /* ink-400 */
    --border: rgba(255,247,229,.10);
    --hero-accent: #ffd60a; /* stays bright yellow on dark */
    --accent: #ffd60a;
    --accent-strong: #f5b800;
    --link: var(--accent);  /* yellow reads great on dark */
    --honey: var(--hero-accent); /* honeycomb glows on dark */
    --beat: var(--hero-accent);  /* bright brand yellow reads great on dark */
    --honey-glow: 55%; --honey-mid: 22%; --honey-base: 8%;
    --shadow: 0 12px 40px rgba(0,0,0,.5);
    --psh1: rgba(255,247,229,.16); --psh2: rgba(255,247,229,.22);   /* portrait: warm light halo on dark */
    --card-shadow: 0 14px 34px rgba(255,247,229,.10);   /* app-icon: warm light halo on dark */
  }
}
:root[data-theme="dark"] {
  --bg: #161512;
  --surface: #1f1d19;
  --text: #f2eee5;
  --muted: #97928a;
  --border: rgba(255,247,229,.10);
  --hero-accent: #ffd60a;
  --accent: #ffd60a;
  --accent-strong: #f5b800;
  --link: var(--accent);
  --honey: var(--hero-accent);
  --beat: var(--hero-accent);
  --honey-glow: 55%; --honey-mid: 22%; --honey-base: 8%;
  --shadow: 0 12px 40px rgba(0,0,0,.5);
  --psh1: rgba(255,247,229,.16); --psh2: rgba(255,247,229,.22);   /* portrait: warm light halo on dark */
  --card-shadow: 0 14px 34px rgba(255,247,229,.10);   /* app-icon: warm light halo on dark */
}

/* --- Base --- */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-head); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

section { padding-block: clamp(3rem, 8vw, 6rem); }
.section-title { font-size: clamp(1.5rem, 4vw, 2.25rem); margin-bottom: 1.5rem; }
.contact__intro { color: var(--muted); max-width: 48ch; margin: -.6rem 0 1.9rem; }
.eyebrow { font-family: var(--font-head); font-weight: 500; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* --- Accessibility helpers --- */
.skip-link {
  position: absolute; left: .5rem; top: -3rem;
  background: var(--accent); color: var(--accent-ink);
  padding: .6rem 1rem; border-radius: 8px; font-weight: 600; z-index: 100;
  transition: top .15s ease;
}
.skip-link:focus { top: .5rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* --- Links --- */
a { color: var(--link); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 500; font-size: 1rem;
  padding: .8rem 1.4rem; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn--ghost {
  background: color-mix(in srgb, var(--bg) var(--frost-op), transparent); color: var(--text); border-color: var(--border);
  -webkit-backdrop-filter: blur(var(--frost-blur)); backdrop-filter: blur(var(--frost-blur));   /* frosted so it stays readable over the animation */
}
.btn--ghost:hover { border-color: var(--accent); }

/* --- Header / nav --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.brand { font-family: var(--font-signature); font-weight: 700; font-size: 1.7rem; line-height: 1; text-decoration: none; }
.brand .brand__dot { color: var(--accent); }
.nav__links { display: flex; align-items: center; gap: 1.5rem; list-style: none; }
.nav__links a { text-decoration: none; font-size: .95rem; color: var(--muted); }
.nav__links a:hover, .nav__links a.is-active { color: var(--text); }
.nav__toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.nav__toggle svg { width: 1.6rem; height: 1.6rem; stroke: var(--text); }

.nav__right { display: flex; align-items: center; gap: 1rem; }
.theme-toggle {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--text); cursor: pointer; transition: border-color .12s ease, transform .12s ease;
}
.theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle[data-show="sun"] .icon-sun { display: block; }
.theme-toggle[data-show="sun"] .icon-moon { display: none; }

@media (max-width: 640px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute; inset: 4rem 0 auto 0; flex-direction: column; gap: 0; align-items: stretch;
    background: var(--bg); border-bottom: 1px solid var(--border);
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .nav__links.is-open { max-height: 20rem; }
  .nav__links li { border-top: 1px solid var(--border); }
  .nav__links a { display: block; padding: 1rem var(--pad); }
}

/* --- Ambient animated background — FIXED, stays in place while the page scrolls.
   Pure-CSS animation; JS only spawns the bars, so with JS off it's a clean dark band. --- */
.ambient {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: var(--bg);
}
.ambient::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--bg), transparent 42%);
}
.ambient__layer { position: absolute; inset: 0; }

/* Honeycomb: a glow revealed only along the hex grid, drifting on its own. */
@property --mx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: false; initial-value: 40%; }
.ambient[data-anim="honeycomb"] .ambient__layer {
  --mx: 50%; --my: 40%; /* --honey comes from the theme (yellow on dark, ink on light) */
  background:
    radial-gradient(30vmax 30vmax at var(--mx) var(--my),
      color-mix(in srgb, var(--honey) var(--honey-glow), transparent) 0%,
      color-mix(in srgb, var(--honey) var(--honey-mid), transparent) 34%,
      transparent 60%),
    color-mix(in srgb, var(--honey) var(--honey-base), transparent);
  animation: honeyDrift 26s ease-in-out infinite;
  -webkit-mask-image: url("../assets/img/honeycomb.svg"), radial-gradient(120% 95% at 50% 32%, #000 42%, transparent 85%);
          mask-image: url("../assets/img/honeycomb.svg"), radial-gradient(120% 95% at 50% 32%, #000 42%, transparent 85%);
  -webkit-mask-repeat: repeat, no-repeat;
          mask-repeat: repeat, no-repeat;
  -webkit-mask-size: 110px 63.51px, cover;
          mask-size: 110px 63.51px, cover;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
@keyframes honeyDrift {
  0%   { --mx: 28%; --my: 32%; }
  25%  { --mx: 68%; --my: 42%; }
  50%  { --mx: 58%; --my: 68%; }
  75%  { --mx: 32%; --my: 56%; }
  100% { --mx: 28%; --my: 32%; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient[data-anim="honeycomb"] .ambient__layer { animation: none; }
}
/* Pause the drifting honeycomb when the tab is in the background (battery/CPU) */
html.is-hidden .ambient__layer { animation-play-state: paused; }

/* --- Section-aware background: on About the base calms and the SAME honeycomb lights up on the left --- */
.ambient__layer, .ambient__beat { transition: opacity 1.2s ease; }
.ambient.is-about .ambient__layer { opacity: .4; }  /* base calms; grid stays → seamless transition */

/* Individual hexagons (JS-placed on the exact base grid) that light up one at a time */
.ambient__beat { position: absolute; inset: 0; opacity: 0; }
.ambient.is-about .ambient__beat { opacity: 1; }
.ambient__beat .hx {
  position: absolute; width: 73.33px; height: 63.51px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: var(--beat); opacity: 0;   /* honey-gold in light, bright yellow in dark */
  transition: opacity 4s cubic-bezier(0.16, 1, 0.3, 1);   /* fast drop, long very-transparent tail */
}
.ambient__beat .hx.on { opacity: 1; transition: opacity .1s ease; }  /* full brightness, instant fade-IN */

/* Content sits ABOVE the fixed ambient; frosted panels let it show through (variant B) */
main { position: relative; z-index: 1; }
.site-footer { position: relative; z-index: 1; }

/* Sections are see-through so the honeycomb shows across the whole page */

/* Section-by-section scroll snapping: one scroll ejects a section and lands on the next */
html { scroll-snap-type: y mandatory; }
.hero, .about, .projects, .contact { scroll-snap-align: start; scroll-snap-stop: always; }
.about, .projects, .contact { min-height: 100svh; display: grid; align-items: center; }

/* Fade in on enter (the upward "rush" transform is applied by the parallax JS) */
[data-reveal] { opacity: 0; transition: opacity .5s ease; }
[data-reveal].is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --- Hero (transparent so the fixed ambient shows through; text stays light) --- */
.hero {
  position: relative; z-index: 1; color: var(--text);
  min-height: 100vh; min-height: 100svh; /* full-screen slide */
  display: grid; align-items: center;
  padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(4rem, 10vw, 7rem);
}
.hero > .container { position: relative; z-index: 2; }
.hero .eyebrow { color: var(--hero-accent); }
.hero .hero__name { color: var(--text); }
.hero .hero__tagline, .hero .hero__meta { color: var(--muted); }
.hero__grid { display: grid; grid-template-columns: 1.618fr 1fr; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; }
.hero__name { font-size: clamp(2.4rem, 7vw, 4rem); margin-block: .4rem .2rem; }
.hero__title { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.05rem, 2.6vw, 1.4rem); color: var(--text); }
.hero__title strong { color: var(--accent); font-weight: 700; }
.hero__tagline { color: var(--muted); font-size: 1.05rem; max-width: 42ch; margin-top: 1rem; }
.hero__loc { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; font-size: .9rem; color: var(--muted); }
.hero__meta { color: var(--muted); font-size: .95rem; margin-top: .5rem; }
/* Eyebrow row above the title — kept visually distinct from the CTA buttons below */
.hero__pills { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; }
.hero__pills .pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .26rem .68rem; border-radius: 999px; font-size: .78rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) var(--frost-op), transparent);
  -webkit-backdrop-filter: blur(var(--frost-blur)); backdrop-filter: blur(var(--frost-blur));   /* frosted for readability over the honeycomb */
}
.pill__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--hero-accent); flex: none; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.hero__media {
  position: relative; align-self: center; margin-inline: auto;
  width: 100%; max-width: 22rem;
  aspect-ratio: .9;  /* headroom above the hexagon so the head can overflow the top */
  --hex: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);       /* regular flat-top */
  --hex-open: polygon(0% 0%, 100% 0%, 100% 61.5%, 75% 100%, 25% 100%, 0% 61.5%);  /* open at top; 61.5% = (100+23)/2 to match the frame's widest points */
  --frame-fill: var(--surface);   /* fully opaque panel */
  --frame-line: var(--accent);    /* hexagon liseré (brand yellow) */
}
/* Regular hexagon frame in the lower part; head/shoulders overflow above it */
.hero__media::before {  /* liseré = outer hexagon */
  content: ""; position: absolute; left: 0; right: 0; top: 23%; bottom: 0; z-index: 0;
  -webkit-clip-path: var(--hex); clip-path: var(--hex);
  background: var(--frame-line);
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.25));
}
.hero__media::after {   /* fill = inner hexagon, 2px smaller so the liseré shows */
  content: ""; position: absolute; left: 2px; right: 2px; top: calc(23% + 2px); bottom: 2px; z-index: 0;
  -webkit-clip-path: var(--hex); clip-path: var(--hex);
  background: var(--frame-fill);
}
.hero__portrait {
  position: absolute; inset: 0; z-index: 1;
  -webkit-clip-path: var(--hex-open); clip-path: var(--hex-open);
}
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  transform: scale(1.25); transform-origin: 50% 6%;  /* zoom the subject, not the frame */
  /* soft shadow that hugs the cutout silhouette → hides the hair fringe against the honeycomb */
  filter: drop-shadow(0 4px 10px var(--psh1)) drop-shadow(0 0 2px var(--psh2));
}
/* Portrait is a framed studio card in both themes (photo has a light studio bg). */
@media (max-width: 760px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 20rem; margin-inline: auto; order: -1; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* --- About --- */
.about__lead { font-size: clamp(1.1rem, 2.6vw, 1.4rem); max-width: 60ch; }
.about p + p { margin-top: 1rem; }
.about__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.5rem; font-family: var(--font-head); font-weight: 500; text-decoration: none; }
.about__more .arrow { color: var(--accent); transition: transform .15s ease; }
.about__more:hover .arrow { transform: translateX(4px); }
/* About: text on the RIGHT (alternates with the hero, whose text is on the left).
   The readable scrim is ON AT ALL SIZES — at in-between widths the animation can sit under the text. */
.about__text {
  width: 61.8%; max-width: 42rem; margin-left: auto;   /* golden ratio (inverse of hero): text = 61.8%, animation = 38.2% */
  background: color-mix(in srgb, var(--bg) var(--frost-op), transparent);
  padding: clamp(1.15rem, 2.2vw, 1.75rem);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(var(--frost-blur));
          backdrop-filter: blur(var(--frost-blur));
}
@media (max-width: 760px) { .about__text { margin-left: 0; width: auto; } }

/* --- Projects / Work — square App-Store-style flip cards --- */
.app-grid {
  list-style: none; display: grid; margin: 1.6rem auto 0;
  grid-template-columns: repeat(3, 1fr); max-width: 560px;
  /* row-gap smaller than column-gap so the ICON-to-icon spacing is equal both ways
     (~45px each way; the name below each icon adds ~24px of vertical height) */
  row-gap: 21px; column-gap: 45px;
}
@media (max-width: 620px) {
  /* tighter gaps on mobile → bigger tiles, so the flip side has room for text */
  .app-grid { row-gap: 10px; column-gap: 14px; }
  .contact .btn { width: 100%; justify-content: center; }   /* full-width submit on mobile */
}

/* Each card = one square tile (the app icon, full-bleed) that flips, with the name below it */
.app-card { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.app-card__tile {
  position: relative; width: 100%; aspect-ratio: 1; perspective: 1000px;
  border-radius: 24px;
}
.app-card__inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .6s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d;
}
.app-card:hover .app-card__inner,
.app-card:focus-within .app-card__inner { transform: rotateY(180deg); }
.app-card__face {
  position: absolute; inset: 0; border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .8rem; text-align: center; padding: 1rem;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: var(--card-shadow);   /* on the face so it rotates with the card (no static square) */
}
.app-card__front { padding: 0; background: var(--surface); }
.app-icon { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-card__front--mono {
  background: var(--brand, var(--accent)); color: var(--ink, var(--accent-ink));
  font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 9vw, 3.4rem); line-height: 1;
}
.app-card__name { font-family: var(--font-head); font-weight: 600; font-size: .95rem; line-height: 1.2; }
.app-card__back {
  transform: rotateY(180deg);
  background: var(--brand, var(--accent)); color: var(--ink, var(--accent-ink));
}
.app-card__back::before {   /* the app logo, seen through frosted glass behind the text */
  content: ""; position: absolute; inset: -14%; z-index: 0;
  background: var(--icon) center / cover no-repeat;
  filter: blur(12px); opacity: .5;
  transform: scaleX(-1);   /* mirror it to match the card's flip (seen through the glass) */
}
.app-card__back > * { position: relative; z-index: 1; }
.app-card__desc { font-size: .85rem; line-height: 1.45; }
.app-card__link {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .82rem;
  text-decoration: none; color: inherit;
  border: 1px solid currentColor; border-radius: 999px; padding: .38rem .8rem;
}
.app-card__link svg { width: 1.1em; height: 1.1em; }
.app-card__link:hover { background: color-mix(in srgb, var(--ink, var(--accent-ink)) 15%, transparent); }
@media (prefers-reduced-motion: reduce) { .app-card__inner { transition: none; } }

/* --- Contact --- */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 3rem); align-items: start; }
@media (max-width: 760px) { .contact__grid { grid-template-columns: 1fr; } }

.form__row { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.form__row label { font-size: .9rem; font-weight: 500; }
.form__row input, .form__row textarea {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text) 24%, transparent);
  border-radius: 10px; padding: .8rem 1rem; width: 100%;
}
.form__row input::placeholder, .form__row textarea::placeholder { color: var(--muted); opacity: .7; }
.form__row textarea { min-height: 8rem; resize: vertical; }
.form__row input:focus, .form__row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact__aside p { color: var(--muted); margin-bottom: 1.25rem; }
.socials a.social--email { border-color: var(--accent); }
.social--email svg { color: var(--accent); }
.socials a.social--email:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.socials { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; list-style: none; }
.socials a {
  display: inline-flex; align-items: center; gap: .5em; padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--border); text-decoration: none; font-size: .9rem; color: var(--text);
  background: color-mix(in srgb, var(--bg) var(--frost-op), transparent);
  -webkit-backdrop-filter: blur(var(--frost-blur)); backdrop-filter: blur(var(--frost-blur));   /* frosted for readability over the honeycomb */
}
.socials a svg { width: 1.05em; height: 1.05em; flex: none; }
.socials a:hover { border-color: var(--accent); }
.socials a:hover svg { color: var(--accent); }

/* --- Footer --- */
.site-footer { border-top: 1px solid var(--border); padding-block: 2.5rem; color: var(--muted); font-size: .9rem; }
.site-footer .container { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }