/* =========================================================
   AR.dev - Main stylesheet
   Design: Hybrid Glass Editorial
   File: css/styles.css

   This file owns everything shared across pages. Change a
   token, button, link, card or panel here and every page
   follows. Page files (about.css, skills.css ...) only hold
   layout that belongs to that one page.

   CONTENTS
   01 Tokens
   02 Reset & base
   03 Layout & typography (headings, ledes, dividers)
   04 Links (one arrow-link style for the whole site)
   05 Buttons (one primary, one secondary)
   06 Chips, tags & labels
   07 Cards, panels & icon boxes
   08 Subpage hero
   09 Header & navigation
   10 Footer
   11 Forms
   12 Home: hero
   13 Home: now strip
   14 Home: GitHub contributions
   15 Home: introduction
   16 Home & Projects: project cards
   17 Home: skills overview
   18 Home: journey
   19 Home: closing call to action
   20 Motion, print & reduced motion
   21 Page loader
========================================================= */

/* =========================================================
   01. TOKENS
========================================================= */

:root {
  color-scheme: light;

  /* Colour */
  --color-bg: #f4f2ed;
  --color-surface: #ffffff;
  --color-surface-soft: #eeece5;
  --color-ink: #20221f;
  --color-muted: #686b63;
  --color-subtle: #85887f;
  --color-border: rgba(32, 34, 31, 0.13);
  --color-border-strong: rgba(32, 34, 31, 0.25);
  --color-accent: #b8f36b;
  --color-accent-hover: #c7ff84;
  --color-accent-dark: #719f36;
  --color-accent-deep: #4b6d2d;
  --color-accent-line: rgba(95, 130, 52, 0.28);
  --color-dark: #20221f;
  --color-success: #397a2b;
  --color-focus: #426d1b;
  --color-danger: #b3402f;
  --color-danger-ink: #8f2f21;
  --glass-border: rgba(255, 255, 255, 0.85);
  --wash: radial-gradient(
    circle at 100% 0%,
    rgba(184, 243, 107, 0.3),
    transparent 44%
  );

  /* Typography */
  --font-body: "DM Sans", sans-serif;
  --font-heading: "Manrope", sans-serif;
  --font-mono: "DM Mono", monospace;

  --text-xs: 0.72rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-hero: clamp(3rem, 6.4vw, 6.4rem);
  --text-page-title: clamp(3rem, 9.4vw, 7.4rem);
  --text-section: clamp(2.1rem, 4.6vw, 4.2rem);
  --content-measure: 68ch;

  /* Layout */
  --container: 1240px;
  --page-gutter: clamp(16px, 5vw, 76px);
  --section-space: clamp(68px, 9vw, 112px);
  --hero-pad-top: clamp(78px, 11vw, 142px);
  --hero-pad-bottom: clamp(66px, 8vw, 104px);
  --header-height: 82px;

  /* Radius: 18 small, 28 cards, 36 panels */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 8px 28px rgba(32, 34, 31, 0.045);
  --shadow-card: 0 14px 38px rgba(32, 34, 31, 0.07);
  --shadow-glass: 0 12px 36px rgba(32, 34, 31, 0.07);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 180ms ease;
  --transition-base: 280ms var(--ease-out);
  --transition-slow: 500ms var(--ease-out);
  --lift: -4px;
}

@media (max-width: 820px) {
  :root {
    --header-height: 72px;
  }
}

@media (max-width: 600px) {
  :root {
    --header-height: 68px;
  }
}

/* =========================================================
   02. RESET & BASE
========================================================= */

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

html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  font-kerning: normal;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
  accent-color: var(--color-focus);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

main,
section,
article,
aside,
header,
footer,
nav,
div {
  min-width: 0;
}

img,
picture,
video,
canvas,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

iframe {
  border: 0;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

button,
[role="button"] {
  cursor: pointer;
}

a,
button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

p {
  max-width: var(--content-measure);
  color: var(--color-muted);
  text-wrap: pretty;
}

li {
  text-wrap: pretty;
}

time {
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--color-accent);
  color: var(--color-ink);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

[hidden] {
  display: none !important;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  transform: translateY(-160%);
  border-radius: var(--radius-sm);
  background: var(--color-dark);
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 700;
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
}

/* =========================================================
   03. LAYOUT & TYPOGRAPHY
========================================================= */

.section {
  width: min(100% - (var(--page-gutter) * 2), var(--container));
  margin-inline: auto;
  scroll-margin-top: calc(var(--header-height) + 20px);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 48px;
}

.section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  max-width: none;
}

.section-description {
  max-width: 590px;
  margin-top: 18px;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.8;
}

.eyebrow,
.mono-label,
.project-index,
.project-category,
.journey-year {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.5;
}

.mono-label {
  color: var(--color-muted);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}

/* One heading scale for every section title on every page */
.section-heading h2,
.about-section-intro h2,
.about-outlook h2,
.skills-section-heading h2,
.skills-cta h2,
.milestone-archive-heading h2,
.milestones-cta h2,
.gallery-toolbar h2,
.gallery-cta h2,
.contact-section-heading h2,
.contact-form-intro h2,
.contact-message h2,
.contact-faq-intro h2,
.contact-support h2,
.contact-page .contact-cta h2,
.projects-contact h2 {
  margin-top: 18px;
  font-size: var(--text-section);
  line-height: 1.05;
  letter-spacing: -0.07em;
}

/* One page title scale for every subpage */
.about-hero h1,
.skills-hero h1,
.milestones-hero h1,
.gallery-hero h1,
.contact-hero h1,
.projects-hero h1 {
  margin-top: 22px;
  font-size: var(--text-page-title);
  line-height: 0.96;
  letter-spacing: -0.085em;
}

/* The grey second half of every headline */
main :is(h1, h2) > span {
  color: var(--color-muted);
  font-weight: 500;
}

/* One intro paragraph style under every page title */
.about-lede,
.contact-lede,
.gallery-intro,
.milestones-intro,
.skills-hero-description,
.projects-intro {
  max-width: 56ch;
  margin-top: clamp(24px, 3vw, 36px);
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.8;
}

/* One supporting-paragraph style under section titles */
.contact-section-heading > p:not(.eyebrow),
.contact-form-intro > p:not(.eyebrow),
.contact-message-intro > p:not(.eyebrow),
.contact-faq-intro > p:not(.eyebrow),
.contact-support-copy > p:not(.eyebrow),
.contact-cta-inner > p:not(.eyebrow),
.skills-cta-inner > p:not(.eyebrow),
.gallery-cta-inner > p:not(.eyebrow),
.milestones-cta-inner > p:not(.eyebrow),
.projects-contact-copy > p:not(.eyebrow),
.skills-section-heading > .section-description,
.milestone-archive-note {
  max-width: 56ch;
  margin-top: 20px;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.8;
}

.skills-section-heading > .section-description,
.milestone-archive-note {
  margin-top: 0;
}

/* Hairlines between sections, the same on every page */
.intro,
.projects-section,
.skills-section,
.journey-section,
.gallery-section,
.milestone-archive,
.contact-form-section,
.contact-message {
  border-top: 1px solid var(--color-border);
}

.about-rule,
.skills-rule,
.contact-rule {
  height: 1px;
  background: var(--color-border);
}

/* The rule under a hero already draws the line */
.skills-rule + .skills-section,
.contact-rule + .contact-details {
  border-top: 0;
}

/* =========================================================
   04. LINKS
   One arrow-link style. Change it here, every page follows.
========================================================= */

.text-link,
.skill-evidence,
.milestone-evidence,
.contact-option-link,
.gallery-open {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 9px;
  padding: 2px 0 3px;
  border: 0;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px
    no-repeat;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition:
    color var(--transition-fast),
    gap var(--transition-fast),
    background-size var(--transition-base);
}

.text-link svg,
.skill-evidence svg,
.milestone-evidence svg,
.contact-option-link svg,
.gallery-open svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

/* Links pinned to the bottom of a card */
.skill-card .skill-evidence,
.contact-option-link,
.gallery-open {
  margin-top: auto;
}

/* Whole-card links: the card is the click target */
.skill-card .skill-evidence::after,
.contact-option-link::after,
.gallery-open::after {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  content: "";
}

.skill-card .skill-evidence:focus-visible,
.contact-option-link:focus-visible,
.gallery-open:focus-visible {
  outline: none;
}

.skill-card .skill-evidence:focus-visible::after,
.contact-option-link:focus-visible::after,
.gallery-open:focus-visible::after {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

@media (hover: hover) {
  .text-link:hover,
  .skill-evidence:hover,
  .milestone-evidence:hover,
  .contact-option-link:hover,
  .gallery-open:hover {
    gap: 13px;
    background-size: 100% 1.5px;
    color: var(--color-accent-deep);
  }

  .text-link:hover svg,
  .skill-evidence:hover svg,
  .milestone-evidence:hover svg,
  .contact-option-link:hover svg,
  .gallery-open:hover svg {
    transform: translate(2px, -2px);
  }
}

/* =========================================================
   05. BUTTONS
   One primary (lime), one secondary (outline).
   Page-specific button classes join the same rules.
========================================================= */

.button,
.contact-primary-link,
.skills-cta-link,
.gallery-cta-link,
.milestones-cta-link,
button.case-open,
.case-next {
  display: inline-flex;
  min-height: 48px;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  -webkit-user-select: none;
  user-select: none;
  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.button svg,
.contact-primary-link svg,
.skills-cta-link svg,
.gallery-cta-link svg,
.milestones-cta-link svg,
button.case-open svg,
.case-next svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.button-primary,
.contact-primary-link,
.skills-cta-link,
.gallery-cta-link,
.milestones-cta-link,
button.case-open {
  border-color: var(--color-accent-line);
  background: var(--color-accent);
  color: var(--color-ink);
  box-shadow: 0 5px 0 rgba(32, 34, 31, 0.12);
}

.button-secondary,
.case-next {
  border-color: var(--color-border-strong);
  background: rgba(255, 255, 255, 0.48);
  color: var(--color-ink);
}

.skills-cta-link,
.gallery-cta-link,
.milestones-cta-link,
.contact-primary-link {
  margin-top: 28px;
}

.contact-primary-link {
  justify-content: space-between;
}

.button:active,
.contact-primary-link:active,
.skills-cta-link:active,
.gallery-cta-link:active,
.milestones-cta-link:active,
button.case-open:active,
.case-next:active {
  transform: translateY(0) scale(0.985);
}

.button-primary:active,
.contact-primary-link:active,
.skills-cta-link:active,
.gallery-cta-link:active,
.milestones-cta-link:active,
button.case-open:active {
  box-shadow: 0 1px 0 rgba(32, 34, 31, 0.12);
}

.button[disabled] {
  transform: none;
  box-shadow: none;
}

@media (hover: hover) {
  .button:hover,
  .contact-primary-link:hover,
  .skills-cta-link:hover,
  .gallery-cta-link:hover,
  .milestones-cta-link:hover,
  button.case-open:hover,
  .case-next:hover {
    transform: translateY(-2px);
  }

  .button-primary:hover,
  .contact-primary-link:hover,
  .skills-cta-link:hover,
  .gallery-cta-link:hover,
  .milestones-cta-link:hover,
  button.case-open:hover {
    background: var(--color-accent-hover);
    box-shadow: 0 7px 0 rgba(32, 34, 31, 0.1);
  }

  .button-secondary:hover,
  .case-next:hover {
    border-color: var(--color-ink);
    background: var(--color-surface);
  }

  .button:hover svg,
  .contact-primary-link:hover svg,
  .skills-cta-link:hover svg,
  .gallery-cta-link:hover svg,
  .milestones-cta-link:hover svg,
  button.case-open:hover svg {
    transform: translate(2px, -2px);
  }

  .case-next:hover svg {
    transform: translateX(3px);
  }
}

/* =========================================================
   06. CHIPS, TAGS & LABELS
========================================================= */

/* Status chips */
.project-status,
.skill-status,
.skill-level,
.milestone-type,
.gallery-tag,
.case-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.milestone-type-accent,
.skill-status.is-learning {
  border-color: var(--color-accent-line);
  background: rgba(184, 243, 107, 0.22);
}

.skill-status.is-used {
  background: rgba(32, 34, 31, 0.055);
}

/* Static tags */
.project-tags,
.milestone-tags {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.project-tags li,
.milestone-tags li {
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.48);
  color: var(--color-muted);
  font-size: 0.7rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Interactive chips (filters, jump links) */
.gallery-chip,
.milestone-year-nav a,
.case-jump button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.5);
  color: var(--color-ink);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.gallery-chip span,
.milestone-year-nav a span {
  color: var(--color-subtle);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 400;
  transition: color var(--transition-fast);
}

.gallery-chip.is-active,
.case-jump button.is-active {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: #ffffff;
}

.gallery-chip.is-active span {
  color: var(--color-accent);
}

@media (hover: hover) {
  .gallery-chip:hover,
  .milestone-year-nav a:hover,
  .case-jump button:hover {
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
    background: var(--color-surface);
  }

  .gallery-chip.is-active:hover,
  .case-jump button.is-active:hover {
    border-color: var(--color-ink);
    background: var(--color-ink);
  }

  .milestone-year-nav a:hover span {
    color: var(--color-ink);
  }
}

/* =========================================================
   07. CARDS, PANELS & ICON BOXES
   Content cards: tinted border, 28px corners, one hover.
   Glass panels: white border, 36px corners, lime wash.
========================================================= */

.project-card,
.skill-card,
.milestone-card,
.about-principle,
.contact-option,
.gallery-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--transition-base),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-base);
}

/* The lime line that draws across the top on hover */
.project-card::before,
.skill-card::before,
.milestone-card::before,
.about-principle::before,
.contact-option::before,
.gallery-card::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--color-accent);
  content: "";
  pointer-events: none;
  transition: transform 380ms var(--ease-out);
}

@media (hover: hover) {
  .project-card:hover,
  .skill-card:hover,
  .milestone-card:hover,
  .about-principle:hover,
  .contact-option:hover,
  .gallery-card:hover {
    transform: translateY(var(--lift));
    border-color: var(--color-border-strong);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-card);
  }

  .project-card:hover::before,
  .skill-card:hover::before,
  .milestone-card:hover::before,
  .about-principle:hover::before,
  .contact-option:hover::before,
  .gallery-card:hover::before {
    transform: scaleX(1);
  }
}

/* Glass panels */
.about-hero-note,
.skills-hero-aside,
.milestones-summary,
.gallery-summary,
.contact-hero-card,
.projects-hero-note,
.contrib-card,
.contact-form,
.contact-support-inner,
.about-next,
.intro-note {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background: var(--wash), rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.intro-note {
  background: rgba(255, 255, 255, 0.54);
  box-shadow: var(--shadow-soft);
}

/* Closing panels: soft grey with the lime wash */
.about-quote-inner,
.skills-cta-inner,
.gallery-cta-inner,
.milestones-cta-inner,
.contact-cta-inner,
.projects-contact {
  padding: clamp(30px, 6vw, 76px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--wash), var(--color-surface-soft);
}

/* Icon boxes */
.skill-icon,
.technology-note-icon,
.contact-option-icon,
.milestone-card-symbol {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-soft);
  transition:
    transform var(--transition-base),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.skill-icon svg,
.technology-note-icon svg,
.contact-option-icon svg,
.milestone-card-symbol svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}

@media (hover: hover) {
  .skill-card:hover .skill-icon,
  .contact-option:hover .contact-option-icon,
  .milestone-card:hover .milestone-card-symbol {
    transform: rotate(-6deg);
    border-color: var(--color-accent-line);
    background: var(--color-accent);
  }
}

/* =========================================================
   08. SUBPAGE HERO
   Every subpage opens with copy on the left and one glass
   card on the right.
========================================================= */

.about-hero,
.skills-hero,
.milestones-hero,
.gallery-hero,
.contact-hero,
.projects-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.65fr);
  align-items: end;
  gap: clamp(36px, 7vw, 100px);
  padding-block: var(--hero-pad-top) var(--hero-pad-bottom);
}

.about-hero-note,
.skills-hero-aside,
.milestones-summary,
.gallery-summary,
.contact-hero-card,
.projects-hero-note {
  position: relative;
  display: flex;
  min-height: 260px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(22px, 3vw, 32px);
}

@media (max-width: 900px) {
  .about-hero,
  .skills-hero,
  .milestones-hero,
  .gallery-hero,
  .contact-hero,
  .projects-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .about-hero-note,
  .skills-hero-aside,
  .milestones-summary,
  .gallery-summary,
  .contact-hero-card,
  .projects-hero-note {
    min-height: 200px;
  }
}

@media (max-width: 600px) {
  .about-hero,
  .skills-hero,
  .milestones-hero,
  .gallery-hero,
  .contact-hero,
  .projects-hero {
    padding-top: 64px;
  }
}

/* =========================================================
   09. HEADER & NAVIGATION
========================================================= */

.site-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  width: 100%;
  border-bottom: 1px solid rgba(32, 34, 31, 0.09);
  background: rgba(244, 242, 237, 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.site-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--color-accent-dark);
  content: "";
  pointer-events: none;
}

/* Same width as the page content, so the logo lines up with it */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: min(100% - (var(--page-gutter) * 2), var(--container));
  min-height: var(--header-height);
  margin-inline: auto;
}

.logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 11px;
}

.logo-mark {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: var(--color-accent);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.07em;
  box-shadow: 3px 3px 0 rgba(32, 34, 31, 0.08);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.logo-text {
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.065em;
}

.logo-text > span {
  color: var(--color-muted);
  font-weight: 500;
}

/* Desktop: a glass capsule. A lime pill (.nav-indicator, added by
   main.js) rests on the current page and glides to whichever link
   is hovered or focused. Without JS the current page simply gets
   the lime pill on its own link. */

.main-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.5);
}

.nav-link {
  position: relative;
  z-index: 1;
  padding: 8px clamp(10px, 1.2vw, 14px);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.nav-link:hover,
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--color-ink);
}

.nav-link:focus-visible {
  outline-offset: 2px;
}

.nav-indicator {
  display: none;
}

@media (min-width: 821px) {
  .nav-link:hover {
    background: rgba(255, 255, 255, 0.75);
  }

  .nav-link.active,
  .nav-link[aria-current="page"] {
    background: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent-line);
  }

  /* With the gliding pill in place, the links themselves stay clear */
  .main-nav.has-indicator .nav-link:hover,
  .main-nav.has-indicator .nav-link.active,
  .main-nav.has-indicator .nav-link[aria-current="page"] {
    background: transparent;
    box-shadow: none;
  }

  .nav-indicator {
    position: absolute;
    z-index: 0;
    top: 5px;
    bottom: 5px;
    left: 0;
    display: block;
    width: var(--nav-w, 0);
    transform: translateX(var(--nav-x, 0));
    border: 1px solid var(--color-accent-line);
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    box-shadow: 0 2px 0 rgba(32, 34, 31, 0.1);
    opacity: 0;
    pointer-events: none;
  }

  .nav-indicator.is-visible {
    opacity: 1;
  }

  /* While following the pointer it turns into a soft white pill */
  .nav-indicator.is-hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
  }

  .nav-indicator.is-ready {
    transition:
      transform var(--transition-base),
      width var(--transition-base),
      opacity var(--transition-fast),
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);
  }
}

.header-cta {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: 0.8rem;
  font-weight: 700;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.header-cta svg {
  width: 15px;
  height: 15px;
  transition: transform var(--transition-base);
}

.header-cta:active {
  transform: scale(0.985);
}

.menu-toggle {
  display: none;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: var(--color-surface);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.menu-toggle svg {
  width: 21px;
  height: 21px;
}

.menu-toggle:active {
  transform: scale(0.96);
}

@media (hover: hover) {
  .logo:hover .logo-mark {
    transform: translate(-1px, -1px) rotate(-5deg);
    box-shadow: 5px 5px 0 rgba(32, 34, 31, 0.1);
  }

  .header-cta:hover {
    transform: translateY(-2px);
    border-color: var(--color-ink);
    background: var(--color-accent);
  }

  .header-cta:hover svg {
    transform: translate(2px, -2px);
  }

  .menu-toggle:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-soft);
  }
}

@media (max-width: 1100px) {
  .header-cta {
    padding-inline: 13px;
  }
}

/* The capsule needs the room between the logo and the edge */
@media (min-width: 821px) and (max-width: 1020px) {
  .header-cta {
    display: none;
  }
}

@media (max-width: 820px) {
  .header-inner {
    position: relative;
  }

  .menu-toggle {
    display: grid;
    flex-shrink: 0;
  }

  .menu-toggle.is-active {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: #ffffff;
  }

  .main-nav {
    position: absolute;
    z-index: 1001;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    display: none;
    max-height: calc(100dvh - var(--header-height) - 16px);
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: rgba(244, 242, 237, 0.98);
    box-shadow: var(--shadow-card);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  .main-nav.is-open {
    display: flex;
    animation: nav-reveal 220ms var(--ease-out);
  }

  .nav-link {
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
  }

  /* The current page: an ink row */
  .nav-link.active,
  .nav-link[aria-current="page"] {
    background: var(--color-ink);
    color: #ffffff;
  }

  .main-nav.is-open .nav-link {
    animation: nav-link-in 300ms var(--ease-out) both;
  }

  .main-nav.is-open .nav-link:nth-child(2) {
    animation-delay: 30ms;
  }

  .main-nav.is-open .nav-link:nth-child(3) {
    animation-delay: 60ms;
  }

  .main-nav.is-open .nav-link:nth-child(4) {
    animation-delay: 90ms;
  }

  .main-nav.is-open .nav-link:nth-child(5) {
    animation-delay: 120ms;
  }

  .main-nav.is-open .nav-link:nth-child(6) {
    animation-delay: 150ms;
  }

  .main-nav.is-open .nav-link:nth-child(7) {
    animation-delay: 180ms;
  }

  .header-cta {
    display: none;
  }
}

@media (max-width: 820px) and (hover: hover) {
  .nav-link:not(.active):not([aria-current="page"]):hover {
    background: rgba(32, 34, 31, 0.05);
  }
}

@media (max-width: 600px) {
  .header-inner {
    gap: 12px;
  }

  .logo {
    gap: 8px;
  }
}

@media (max-width: 380px) {
  .logo-mark {
    width: 35px;
    height: 35px;
  }

  .logo-text {
    font-size: 1.05rem;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .main-nav {
    max-height: calc(100svh - var(--header-height) - 12px);
  }
}

@keyframes nav-link-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes nav-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   10. FOOTER
   Works with both footer layouts: Home's two link columns and
   the subpages' single Explore list (shown as two columns).
========================================================= */

.site-footer {
  border-top: 1px solid var(--color-border);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(130px, 0.6fr));
  gap: 50px;
  width: min(100% - (var(--page-gutter) * 2), var(--container));
  margin-inline: auto;
  padding-block: 65px;
}

.footer-brand {
  max-width: 340px;
}

.footer-brand .logo {
  margin-bottom: 18px;
}

.footer-brand > p {
  margin-top: 0;
  font-size: 0.88rem;
  line-height: 1.85;
}

.footer-column,
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}

.footer-links {
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  align-content: start;
  justify-items: start;
  gap: 13px 32px;
}

.footer-column h2,
.footer-links h2 {
  margin-bottom: 7px;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.footer-links h2 {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.footer-column a,
.footer-links a,
.footer-bottom a {
  width: fit-content;
  color: var(--color-muted);
  font-size: 0.84rem;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition:
    color var(--transition-fast),
    transform var(--transition-base);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(100% - (var(--page-gutter) * 2), var(--container));
  margin-inline: auto;
  padding-block: 23px;
  border-top: 1px solid var(--color-border);
}

.footer-bottom p {
  font-size: 0.75rem;
}

.footer-bottom a {
  font-size: 0.78rem;
}

.footer-bottom a span {
  display: inline-block;
  transition: transform var(--transition-base);
}

@media (hover: hover) {
  .footer-column a:hover,
  .footer-links a:hover,
  .footer-bottom a:hover {
    color: var(--color-ink);
  }

  .footer-column a:hover,
  .footer-links a:hover {
    transform: translateX(3px);
  }

  .footer-bottom a:hover span {
    transform: translateY(-3px);
  }
}

@media (max-width: 900px) {
  .footer-main {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(120px, 0.7fr));
    gap: 30px;
  }
}

@media (max-width: 600px) {
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 22px;
    padding-block: 46px;
  }

  .footer-brand,
  .footer-links {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding-block: 18px;
  }
}

/* =========================================================
   11. FORMS
========================================================= */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  color: var(--color-ink);
  font-size: 0.83rem;
  font-weight: 700;
}

.form-control {
  width: 100%;
  max-width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-ink);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

textarea.form-control {
  min-height: 150px;
  resize: vertical;
}

.form-control:focus {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 4px rgba(184, 243, 107, 0.25);
}

/* =========================================================
   12. HOME: HERO
========================================================= */

.hero {
  display: grid;
  min-height: min(760px, calc(100svh - var(--header-height)));
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: center;
  gap: clamp(40px, 7vw, 100px);
  padding-block: clamp(58px, 9vw, 120px);
}

.hero-content {
  position: relative;
  z-index: 1;
}

.availability {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 30px;
  padding: 8px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.54);
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.availability-dot,
.now-dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 4px rgba(57, 122, 43, 0.12);
}

.availability-dot::after,
.now-dot::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-success);
  content: "";
  opacity: 0.45;
  animation: availability-ping 2.4s ease-out infinite;
}

.hero h1 {
  max-width: 780px;
  margin-top: 20px;
  font-size: var(--text-hero);
  line-height: 1.02;
  letter-spacing: -0.075em;
}

.hero-highlight {
  display: block;
}

.hero-description {
  max-width: 520px;
  margin-top: 26px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.85;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 32px;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 54px);
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--color-border);
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hero-stat strong {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.hero-stat span {
  color: var(--color-muted);
  font-size: 0.76rem;
  text-align: center;
}

.hero-visual {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 440px;
  place-items: center;
}

.hero-artwork {
  position: relative;
  display: flex;
  width: min(100%, 420px);
  min-height: 460px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(184, 243, 107, 0.45),
      transparent 35%
    ),
    linear-gradient(145deg, #e8e8df, #d9dbce);
  box-shadow:
    0 30px 70px rgba(32, 34, 31, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: rotate(2deg);
  transition: transform var(--transition-slow);
}

@media (hover: hover) {
  .hero-artwork:hover {
    transform: rotate(0deg) translateY(-5px);
  }
}

.hero-art-top,
.hero-art-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.status-indicator {
  padding: 5px 9px;
  border: 1px solid rgba(32, 34, 31, 0.15);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.hero-profile {
  position: relative;
  display: grid;
  width: min(74%, 280px);
  aspect-ratio: 1;
  align-self: center;
  place-items: center;
  overflow: hidden;
  border: 8px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  background: #c6c9b8;
  box-shadow: 0 20px 45px rgba(32, 34, 31, 0.13);
}

.hero-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-art-bottom {
  align-items: flex-end;
}

.hero-art-bottom > div {
  display: grid;
  gap: 7px;
}

.hero-art-bottom strong {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  letter-spacing: -0.02em;
}

.hero-monogram {
  color: rgba(32, 34, 31, 0.13);
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.1em;
}

.floating-tag {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
}

.floating-tag svg {
  width: 17px;
  height: 17px;
}

.floating-tag-one {
  top: 22%;
  right: -7%;
  transform: rotate(-5deg);
}

.floating-tag-two {
  bottom: 17%;
  left: -9%;
  transform: rotate(4deg);
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 52px;
    padding-block: 76px 84px;
  }

  .hero-content {
    max-width: 720px;
  }

  .hero-visual {
    width: 100%;
    min-height: 400px;
  }

  .hero-artwork {
    width: min(100%, 390px);
    min-height: 410px;
  }
}

@media (max-width: 600px) {
  .hero {
    padding-block: 58px 68px;
  }

  .hero-actions .button {
    flex: 1 1 auto;
    min-width: 0;
  }

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 20px 26px;
  }

  .hero-stat strong {
    font-size: 1.45rem;
  }

  .hero-stat span {
    line-height: 1.45;
  }

  .hero-visual {
    min-height: 340px;
  }

  .hero-artwork {
    min-height: 350px;
    padding: 19px;
    border-radius: var(--radius-lg);
  }

  .hero-profile {
    width: min(70%, 230px);
  }

  .floating-tag {
    padding: 10px 12px;
    font-size: 0.61rem;
  }

  .floating-tag-one {
    right: -2%;
  }

  .floating-tag-two {
    left: -2%;
  }
}

@media (max-width: 380px) {
  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-stats {
    gap: 14px;
  }

  .hero-stat strong {
    font-size: 1.2rem;
  }
}

/* =========================================================
   14. HOME: GITHUB CONTRIBUTIONS
   Drawn by js/pages.js from public GitHub data. JS decides how
   many of the latest weeks fit the width (squares never go below
   10px); CSS then sizes the squares to fill it (never above 16px).
   Keep --contrib-label and --contrib-gap in sync with
   CONTRIB_LABEL and CONTRIB_GAP in pages.js.
========================================================= */

.contrib {
  margin-bottom: clamp(52px, 7vw, 96px);
}

.contrib-card {
  padding: clamp(22px, 3vw, 34px);
}

.contrib-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
}

.contrib-summary {
  margin-top: 20px;
  color: var(--color-ink);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.6;
}

.contrib-scroll {
  margin-top: 20px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.contrib-graph {
  --contrib-label: 30px;
  --contrib-gap: 4px;
  --weeks: 53;

  display: grid;
  width: min(100%, calc(var(--contrib-label) + var(--weeks) * 20px));
  grid-template-columns: var(--contrib-label) repeat(
      var(--weeks),
      minmax(0, 1fr)
    );
  grid-template-rows: auto repeat(7, auto);
  gap: var(--contrib-gap);
}

.contrib-month,
.contrib-day {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1;
  white-space: nowrap;
}

.contrib-month {
  margin-bottom: 3px;
}

.contrib-day {
  align-self: center;
}

.contrib-cell {
  display: block;
  box-sizing: border-box;
  align-self: start;
  aspect-ratio: 1;
  border: 1px solid rgba(32, 34, 31, 0.07);
  border-radius: 4px;
  background: rgba(32, 34, 31, 0.06);
}

.contrib-cell[data-level="1"] {
  border-color: rgba(95, 130, 52, 0.2);
  background: rgba(184, 243, 107, 0.45);
}

.contrib-cell[data-level="2"] {
  border-color: rgba(95, 130, 52, 0.25);
  background: var(--color-accent);
}

.contrib-cell[data-level="3"] {
  border-color: rgba(75, 109, 45, 0.35);
  background: var(--color-accent-dark);
}

.contrib-cell[data-level="4"] {
  border-color: rgba(32, 34, 31, 0.3);
  background: var(--color-accent-deep);
}

.contrib-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 18px;
}

.contrib-readout {
  min-height: 1.4em;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.contrib-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.contrib-legend > span:first-child {
  margin-right: 3px;
}

.contrib-legend > span:last-child {
  margin-left: 3px;
}

.contrib-legend .contrib-cell {
  width: 12px;
  height: 12px;
}

.contrib-graph .contrib-cell.is-selected {
  outline: 2px solid var(--color-ink);
  outline-offset: 1px;
}

@media (hover: hover) {
  .contrib-graph .contrib-cell[data-text]:hover {
    outline: 2px solid var(--color-ink);
    outline-offset: 1px;
  }
}

.contrib.is-error .contrib-scroll,
.contrib.is-error .contrib-foot {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .contrib.is-loading .contrib-graph .contrib-cell {
    animation: contrib-pulse 1.4s ease-in-out infinite;
  }

  @keyframes contrib-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@media (max-width: 600px) {
  .contrib-card {
    border-radius: var(--radius-lg);
  }

  .contrib-foot {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   15. HOME: INTRODUCTION
========================================================= */

.intro {
  padding-block: var(--section-space);
}

.intro .section-heading {
  max-width: 790px;
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: start;
  gap: clamp(36px, 8vw, 110px);
}

.intro-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.intro-copy p {
  max-width: 620px;
  font-size: 1.03rem;
  line-height: 1.9;
}

.intro-copy .text-link {
  margin-top: 10px;
}

.intro-note {
  padding: clamp(22px, 3vw, 34px);
}

.intro-note > .mono-label {
  display: block;
  margin-bottom: 26px;
}

.approach-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  padding-block: 19px;
  border-top: 1px solid var(--color-border);
}

.approach-number {
  color: var(--color-subtle);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.approach-item h3 {
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.approach-item p {
  margin-top: 7px;
  font-size: 0.85rem;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .intro-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
}

/* =========================================================
   16. HOME & PROJECTS: PROJECT CARDS
   Layout, artwork and content. Corners, border and hover come
   from the shared card rules in section 07.
========================================================= */

.projects-section {
  padding-block: var(--section-space);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
}

.project-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(18px, 2.5vw, 28px);
  overflow-wrap: anywhere;
}

.project-card-featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: clamp(24px, 4vw, 52px);
}

.project-card-top {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.project-index,
.project-category {
  color: var(--color-muted);
  font-size: 0.65rem;
  line-height: 1.6;
}

.project-visual {
  position: relative;
  display: flex;
  min-height: 230px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  overflow: hidden;
  padding: 25px;
  border-radius: var(--radius-md);
  isolation: isolate;
}

.project-visual > span {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
}

.project-visual-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(32, 34, 31, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 20px rgba(32, 34, 31, 0.06);
  transition: transform var(--transition-base);
}

.project-visual-icon svg {
  width: 24px;
  height: 24px;
}

@media (hover: hover) {
  .project-card:hover .project-visual-icon {
    transform: rotate(-6deg) scale(1.05);
  }
}

.project-visual-fintrack {
  background:
    radial-gradient(circle at 85% 10%, #d5f7a4, transparent 38%),
    linear-gradient(140deg, #e4e9d6, #cbd7b9);
}

.project-visual-artist {
  background:
    radial-gradient(circle at 80% 25%, #f5cbb8, transparent 38%),
    linear-gradient(145deg, #f2e2d7, #dfc9bd);
}

.project-visual-developer {
  background:
    radial-gradient(circle at 85% 10%, #b6d8f6, transparent 36%),
    linear-gradient(145deg, #dfe7f0, #c5d2e0);
}

.project-visual-python {
  background:
    radial-gradient(circle at 80% 20%, #f1d995, transparent 36%),
    linear-gradient(145deg, #eee8d7, #d9d0b7);
}

.project-visual-c {
  background:
    radial-gradient(circle at 80% 20%, #c5b8f5, transparent 38%),
    linear-gradient(145deg, #e5e0f0, #d1c9e4);
}

.project-visual-noviq {
  background:
    radial-gradient(circle at 85% 12%, rgba(184, 243, 107, 0.38), transparent 36%),
    linear-gradient(145deg, #171c4a, #0d1230);
  color: #ffffff;
}

.project-visual-noviq .project-visual-icon {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: #b8f36b;
}

.project-visual.project-visual-noviq > span {
  color: #ffffff;
}

.project-visual.project-visual-noviq code {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #b8f36b;
}

.project-visual-fintrack::after,
.project-visual-artist::after,
.project-visual-developer::after,
.project-visual-python::after,
.project-visual-noviq::after,
.project-visual-c::after {
  position: absolute;
  z-index: -1;
  right: -25px;
  bottom: -50px;
  width: 200px;
  height: 200px;
  border: 1px solid rgba(32, 34, 31, 0.1);
  border-radius: 50%;
  content: "";
}

.project-visual-fintrack::before {
  position: absolute;
  top: 30%;
  right: 12%;
  width: 125px;
  height: 125px;
  border: 1px solid rgba(32, 34, 31, 0.13);
  border-radius: 50%;
  content: "";
}

.visual-bars {
  position: absolute;
  right: 30px;
  bottom: 0;
  display: flex;
  height: 105px;
  align-items: flex-end;
  gap: 9px;
}

.visual-bars span {
  width: 18px;
  border: 1px solid rgba(32, 34, 31, 0.08);
  border-radius: 7px 7px 0 0;
  background: rgba(255, 255, 255, 0.55);
}

.visual-bars span:nth-child(1) {
  height: 38%;
}

.visual-bars span:nth-child(2) {
  height: 62%;
}

.visual-bars span:nth-child(3) {
  height: 47%;
}

.visual-bars span:nth-child(4) {
  height: 85%;
}

.visual-bars span:nth-child(5) {
  height: 100%;
}

.visual-orbit {
  position: absolute;
  top: 15%;
  right: 12%;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(32, 34, 31, 0.18);
  border-radius: 50%;
  box-shadow:
    0 0 0 15px rgba(255, 255, 255, 0.12),
    0 0 0 30px rgba(255, 255, 255, 0.1);
}

.visual-window {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid rgba(32, 34, 31, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
}

.visual-window span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(32, 34, 31, 0.35);
}

.project-visual code {
  position: relative;
  z-index: 1;
  padding: 9px 12px;
  border: 1px solid rgba(32, 34, 31, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.45);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.project-card-content {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 22px;
}

.project-card-featured .project-card-content {
  padding-top: 0;
}

.project-card-content h3 {
  margin-top: 10px;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.project-card-content > p:not(.project-category) {
  margin-top: 13px;
  font-size: 0.9rem;
  line-height: 1.85;
}

.project-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 23px;
}

@media (max-width: 900px) {
  .project-card-featured {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-card-featured .project-card-content {
    padding-top: 22px;
  }
}

@media (max-width: 600px) {
  .project-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-card-featured {
    grid-column: auto;
  }

  .project-card-top {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .project-visual {
    min-height: 210px;
  }
}

/* =========================================================
   17. HOME: SKILLS OVERVIEW
   The skill card itself is shared with the Skills page.
========================================================= */

.skills-section {
  padding-block: var(--section-space);
}

.skill-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

.skill-card {
  display: flex;
  min-width: 0;
  min-height: 250px;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(22px, 2.6vw, 30px);
  overflow-wrap: anywhere;
}

.skill-card h3 {
  margin-top: 24px;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.05em;
}

.skill-card > p {
  margin-top: 12px;
  margin-bottom: 20px;
  font-size: 0.88rem;
  line-height: 1.75;
}

.skill-card .skill-level,
.skill-card .skill-note {
  margin-top: auto;
}

@media (max-width: 1100px) {
  .skill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .skill-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .skill-card {
    min-height: 0;
  }
}

/* =========================================================
   18. HOME: JOURNEY
========================================================= */

.journey-section {
  padding-block: var(--section-space);
}

.journey-list {
  max-width: 920px;
  margin-top: 52px;
  margin-left: 8px;
}

.journey-item {
  display: grid;
  grid-template-columns: 70px 18px minmax(0, 1fr);
  gap: 22px;
}

.journey-year {
  padding-top: 2px;
  color: var(--color-muted);
  font-size: 0.75rem;
}

.journey-marker {
  position: relative;
  display: flex;
  justify-content: center;
}

.journey-marker::before {
  position: absolute;
  top: 7px;
  bottom: -8px;
  width: 1px;
  background: var(--color-border-strong);
  content: "";
}

/* Same lime dot as the Milestones timeline */
.journey-marker::after {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  border: 2px solid var(--color-bg);
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-border-strong);
  content: "";
  transition:
    transform var(--transition-base),
    background-color var(--transition-fast);
}

.journey-item:last-child .journey-marker::before {
  display: none;
}

@media (hover: hover) {
  .journey-item:hover .journey-marker::after {
    transform: scale(1.25);
    background: var(--color-accent-dark);
  }
}

.journey-content {
  padding-bottom: 43px;
}

.journey-content .mono-label {
  font-size: 0.63rem;
}

.journey-content h3 {
  margin-top: 11px;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.journey-content p:not(.mono-label) {
  max-width: 620px;
  margin-top: 11px;
  font-size: 0.9rem;
  line-height: 1.8;
}

@media (max-width: 600px) {
  .journey-item {
    grid-template-columns: 48px 14px minmax(0, 1fr);
    gap: 13px;
  }

  .journey-content {
    padding-bottom: 34px;
  }
}

/* =========================================================
   19. HOME: CLOSING CALL TO ACTION
   The one dark panel on the site. The Contact page has its
   own light panel with the same class name, so this is kept
   off that page.
========================================================= */

body:not(.contact-page) .contact-cta {
  position: relative;
  display: grid;
  min-height: 440px;
  place-items: center;
  overflow: hidden;
  margin-bottom: var(--section-space);
  padding: clamp(40px, 7vw, 90px) clamp(24px, 6vw, 80px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(184, 243, 107, 0.2),
      transparent 32%
    ),
    var(--color-dark);
  color: #ffffff;
  text-align: center;
}

body:not(.contact-page) .contact-cta::before,
body:not(.contact-page) .contact-cta::after {
  position: absolute;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

body:not(.contact-page) .contact-cta::before {
  top: -150px;
  left: -80px;
  box-shadow:
    0 0 0 35px rgba(255, 255, 255, 0.025),
    0 0 0 70px rgba(255, 255, 255, 0.02);
}

body:not(.contact-page) .contact-cta::after {
  right: -100px;
  bottom: -180px;
  width: 360px;
  height: 360px;
}

.contact-cta-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

body:not(.contact-page) .contact-cta .eyebrow {
  color: #b9c1b0;
}

body:not(.contact-page) .contact-cta h2 {
  margin-top: 20px;
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
  letter-spacing: -0.065em;
}

body:not(.contact-page) .contact-cta h2 span {
  display: block;
  color: var(--color-accent);
}

.contact-cta-content > p:not(.eyebrow):not(.contact-email) {
  max-width: 560px;
  margin: 24px auto 0;
  color: #b9bdb5;
  font-size: 1rem;
  line-height: 1.85;
}

.contact-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.contact-cta .button-secondary {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

@media (hover: hover) {
  .contact-cta .button-secondary:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
  }
}

.contact-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 28px;
  color: #b9bdb5;
  font-size: 0.82rem;
}

.contact-email svg {
  width: 16px;
  height: 16px;
}

.contact-email a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 4px;
  transition: color var(--transition-fast);
}

.contact-email a:hover {
  color: var(--color-accent);
}

@media (max-width: 600px) {
  body:not(.contact-page) .contact-cta {
    min-height: 0;
    padding: 54px 22px;
    border-radius: var(--radius-lg);
  }

  .contact-cta-actions {
    flex-direction: column;
  }

  .contact-cta-actions .button {
    width: 100%;
  }
}

/* =========================================================
   20. MOTION, PRINT & REDUCED MOTION
========================================================= */

@keyframes availability-ping {
  0% {
    transform: scale(1);
    opacity: 0.45;
  }

  70%,
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

/* Scroll-linked header shadow and reading progress line, plus a
   gentle crossfade between pages. Skipped where unsupported. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .site-header {
      animation: header-shadow linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 140px;
    }

    .site-header::after {
      animation: read-progress linear both;
      animation-timeline: scroll(root block);
    }

    @keyframes header-shadow {
      from {
        box-shadow: 0 0 0 rgba(32, 34, 31, 0);
      }

      to {
        box-shadow: 0 10px 30px rgba(32, 34, 31, 0.07);
      }
    }

    @keyframes read-progress {
      to {
        transform: scaleX(1);
      }
    }
  }

  @view-transition {
    navigation: auto;
  }

  .site-header {
    view-transition-name: site-header;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 240ms;
    animation-timing-function: var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }

  .project-card:hover,
  .skill-card:hover,
  .milestone-card:hover,
  .about-principle:hover,
  .contact-option:hover,
  .gallery-card:hover,
  .button:hover,
  .contact-primary-link:hover,
  .skills-cta-link:hover,
  .gallery-cta-link:hover,
  .milestones-cta-link:hover,
  button.case-open:hover,
  .case-next:hover,
  .gallery-chip:hover,
  .milestone-year-nav a:hover,
  .case-jump button:hover,
  .header-cta:hover {
    transform: none;
  }
}

@media print {
  .site-header,
  .skip-link,
  .menu-toggle,
  .hero-actions,
  .contact-cta-actions {
    display: none !important;
  }

  body {
    background: #ffffff;
  }

  *,
  *::before,
  *::after {
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  a[href^="http"]:not(.logo)::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    word-break: break-all;
  }
}

/* =========================================================
   21. PAGE LOADER
   One overlay per page (markup at the top of <body>, behavior in
   js/loader.js). It is the logo mark, enlarged, filling with lime
   as the page's real assets finish loading, next to a short list
   of what this page contains. Without JavaScript it is hidden, and
   a CSS failsafe removes it even if the script never runs.
========================================================= */

html.is-loading {
  overflow: hidden;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
  /* A lime glow centred above the card. It fades out before it reaches
     any edge, so nothing shows at the scrollbar gutter. */
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(184, 243, 107, 0.3),
      transparent 55%
    ),
    var(--color-bg);
  color: var(--color-ink);
  animation: page-loader-failsafe 0s linear 25s forwards;
}

@keyframes page-loader-failsafe {
  to {
    visibility: hidden;
    pointer-events: none;
  }
}

.page-loader-card {
  width: min(100%, 420px);
  padding: clamp(24px, 5vw, 34px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

/* The logo mark, large. --p (0 to 1) is set by loader.js. */
.page-loader-mark {
  position: relative;
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: 24px;
  background: var(--color-surface);
  box-shadow: 4px 4px 0 rgba(32, 34, 31, 0.08);
  --p: 0;
}

.page-loader-mark::before {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  content: "";
  transform: scaleY(var(--p));
  transform-origin: bottom;
}

.page-loader-mark span {
  position: relative;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.07em;
}

.page-loader-title {
  margin: 26px 0 0;
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}

.page-loader-lede {
  max-width: 36ch;
  margin: 10px 0 24px;
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.page-loader-list {
  margin: 0 0 22px;
  padding: 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.page-loader-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
  line-height: 1.4;
}

.pl-dot {
  position: relative;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base);
}

.pl-dot::after {
  position: absolute;
  top: 1.5px;
  left: 4px;
  width: 3px;
  height: 6px;
  border: solid var(--color-ink);
  border-width: 0 1.5px 1.5px 0;
  content: "";
  opacity: 0;
  transform: rotate(45deg);
}

.pl-state {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.page-loader-list li[data-state="active"] .pl-dot {
  border-color: var(--color-accent-dark);
}

.page-loader-list li[data-state="done"] .pl-dot {
  border-color: var(--color-accent-dark);
  background: var(--color-accent);
}

.page-loader-list li[data-state="done"] .pl-dot::after {
  opacity: 1;
}

.page-loader-list li[data-state="done"] .pl-state {
  color: var(--color-accent-deep);
}

.page-loader-list li[data-state="warn"] .pl-dot {
  border-color: var(--color-danger);
}

.page-loader-list li[data-state="warn"] .pl-state {
  color: var(--color-danger-ink);
}

.page-loader-foot {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pl-track {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  --p: 0;
}

.pl-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent-dark);
  transform: scaleX(var(--p));
  transform-origin: left;
}

.pl-percent {
  min-width: 4ch;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.page-loader-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The one orchestrated moment: the card settles, then the whole
   overlay lifts away to reveal the page. */
.page-loader.is-leaving {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: 0 28px 60px rgba(32, 34, 31, 0.14);
  pointer-events: none;
  transform: translateY(-101%);
  transition:
    transform 700ms cubic-bezier(0.7, 0, 0.2, 1),
    box-shadow 700ms ease;
}

.page-loader.is-leaving .page-loader-card {
  opacity: 0;
  transform: translateY(-14px);
  transition:
    opacity 280ms ease,
    transform 280ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .page-loader-list li[data-state="active"] .pl-dot {
    animation: page-loader-pulse 1.2s ease-in-out infinite;
  }

  @keyframes page-loader-pulse {
    50% {
      background: var(--color-accent);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader.is-leaving {
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    transform: none;
    transition: opacity 200ms ease;
  }
}

@media print {
  .page-loader {
    display: none !important;
  }
}

/* =========================================================
   COOKIE NOTICE
   Shown once per device (see initConsent in main.js) and
   reopened from "Cookie settings" in the footer.
========================================================= */

.footer-cookie-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: 0.75rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.cookie-banner {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  left: max(16px, env(safe-area-inset-left));
  z-index: 1100;
  display: grid;
  gap: 10px;
  max-width: 420px;
  padding: 20px 22px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}

.cookie-banner-text {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.cookie-banner-actions .button {
  flex: 1 1 120px;
  min-height: 44px;
}

@media (min-width: 560px) {
  .cookie-banner {
    right: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cookie-banner:not([hidden]) {
    animation: cookie-banner-in 420ms var(--ease-out) both;
  }

  @keyframes cookie-banner-in {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
  }
}

@media (hover: hover) {
  .footer-cookie-link:hover {
    color: var(--color-ink);
  }
}

@media print {
  .cookie-banner {
    display: none !important;
  }
}