/* ==========================================================================
   Andhika Permana Sagiyono — Portfolio
   --------------------------------------------------------------------------
    1. Design tokens
    2. Reset & base
    3. Layout & typography utilities
    4. Buttons
    5. Scroll reveal & motion primitives
    6. Navigation
    7. Hero
    8. About
    9. Skills — base
   10. Skills — category ornaments (ONE block per category)
   11. Projects
   12. Placeholders (missing images)
   13. Modals
   14. Education & Certificate
   15. Contact
   16. Footer
   17. Reduced motion
   18. Section gradients (Bloom Field dark / Pipo light) — see section-gradients.js
   ========================================================================== */


/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  /* Base palette */
  --color-black: #000;
  --color-white: #fff;
  --color-light: #f5f5f7;
  --color-light-2: #e8e8ed;

  /* Per-surface text tokens. Every surface sets its own text colour; text never
     relies on inheriting the section colour across a surface change (that is
     what made the project card title white-on-white). Ratios = WCAG, worst case.
     Opaque dark surfaces (#000, #111113, #1d1d1f, skill tiles, dark placeholders) */
  --text-on-dark: #f5f5f7;
  --text-on-dark-muted: #a1a1a6;   /* ≥ 5.4:1 on every opaque dark surface, 8.2:1 on #000 */
  /* Opaque light surfaces (#fff cards, #f5f5f7, #e8e8ed, tinted placeholders, modals) */
  --text-on-light: #1d1d1f;
  --text-on-light-muted: #636366;  /* ≥ 4.9:1 on #e8e8ed, 6.0:1 on #fff */
  /* Text placed directly on the animated section gradients (§18) */
  --text-on-dark-gradient: var(--text-on-dark);          /* 11.5:1 on #343432 (lightest Bloom Field pixel) */
  --text-on-dark-gradient-muted: var(--text-on-dark-muted); /* 4.85:1 on #343432 */
  --text-on-light-gradient: var(--text-on-light);        /* 7.1:1 on #de9872 (apricot centre + darkest grain) */
  --text-on-light-gradient-muted: #3a3a3c;               /* 4.8:1 on #de9872, 5.9:1 on #e6b093 */

  --surface-dark: #111113;
  --surface-dark-2: #1d1d1f;
  --hairline-dark: rgba(255, 255, 255, 0.12);
  --hairline-light: rgba(0, 0, 0, 0.1);

  /* Accent colours (used sparingly) */
  --blue: #0a84ff;
  --purple: #bf5af2;
  --pink: #ff375f;
  --orange: #ff9f0a;
  --green: #30d158;
  --link-on-light: #0066cc;

  --gradient-accent: linear-gradient(90deg, var(--blue), var(--purple), var(--pink), var(--orange), var(--blue));

  /* Spacing — 8px system */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  /* Shape */
  --radius-card: 24px;
  --radius-tile: 16px;
  --radius-pill: 980px;

  /* Elevation (light surfaces) */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.06), 0 24px 56px rgba(0, 0, 0, 0.12);

  /* Typography */
  --font-sans: "Inter", -apple-system, "SF Pro Display", BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --tracking-tight: -0.03em;

  /* Layout */
  --container: 1120px;
  --gutter: var(--space-3);
  --nav-height: 48px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-reveal: 800ms;
}

@media (min-width: 734px) {
  :root { --gutter: var(--space-5); }
}


/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

html.has-modal { overflow: hidden; }

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  background: var(--color-black);
  color: var(--text-on-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg { display: block; max-width: 100%; }

img { height: auto; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

address { font-style: normal; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: color-mix(in srgb, var(--blue) 35%, transparent); }


/* ==========================================================================
   3. Layout & typography utilities
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--space-12);
  scroll-margin-top: var(--nav-height);
}

@media (min-width: 1068px) {
  .section { padding-block: var(--space-16); }
}

.section--dark  { background: var(--color-black); color: var(--text-on-dark); }
.section--light { background: var(--color-light); color: var(--text-on-light); }
.section--white { background: var(--color-white); color: var(--text-on-light); }

/* Theme tokens for sections that can sit on either background. Sections marked
   data-theme="auto" are re-striped by script.js when another section is hidden,
   so their components use these tokens instead of fixed dark/light colours. */
/* --sec-muted   = muted text on the section's cards (opaque surfaces)
   --sec-bg-muted = muted text placed directly on the section background (gradient) */
.section--dark {
  --sec-bg: var(--color-black);
  --sec-muted: var(--text-on-dark-muted);
  --sec-bg-muted: var(--text-on-dark-gradient-muted);
  --sec-hairline: var(--hairline-dark);
  --sec-surface: var(--surface-dark);
  --sec-surface-2: var(--surface-dark-2);
  --sec-shadow: none;
}

.section--light,
.section--white {
  --sec-bg: var(--color-light);
  --sec-muted: var(--text-on-light-muted);
  --sec-bg-muted: var(--text-on-light-gradient-muted);
  --sec-hairline: var(--hairline-light);
  --sec-surface: var(--color-white);
  --sec-surface-2: var(--color-light);
  --sec-shadow: var(--shadow-card);
}

.section--white { --sec-bg: var(--color-white); }

.section-title {
  font-size: clamp(40px, 4vw + 24px, 80px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
}

@media (min-width: 1068px) {
  .section-title { margin-bottom: var(--space-8); }
}

.subsection-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sec-bg-muted, var(--text-on-dark-gradient-muted));
  margin-bottom: var(--space-3);
}

/* Animated accent gradient on key words */
.gradient-text {
  background-image: var(--gradient-accent);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 8s linear infinite;
}

@keyframes gradient-shift {
  to { background-position: 200% 0; }
}

.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;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: calc(-1 * var(--space-10));
  z-index: 200;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-black);
  font-weight: 600;
}

.skip-link:focus { top: var(--space-1); }

.load-error {
  color: var(--sec-bg-muted, var(--text-on-dark-gradient-muted));
  padding-block: var(--space-4);
}

/* (light sections: --sec-bg-muted resolves to --text-on-light-gradient-muted) */


/* ==========================================================================
   4. Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 48px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.3s var(--ease-out), background-color 0.3s, border-color 0.3s, color 0.3s;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--light { background: var(--color-white); color: var(--color-black); }
.btn--light:hover { background: var(--color-light-2); }

.btn--outline-dark {
  color: var(--text-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn--outline-dark:hover { border-color: rgba(255, 255, 255, 0.7); }

.btn--small {
  min-height: 32px;
  padding: 0 var(--space-2);
  font-size: 14px;
}


/* ==========================================================================
   5. Scroll reveal & motion primitives
   Elements are only hidden when JS is present (html.js).
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggering: siblings inside a .reveal-stagger group */
.reveal-stagger > .reveal:nth-child(2) { --reveal-delay: 70ms; }
.reveal-stagger > .reveal:nth-child(3) { --reveal-delay: 140ms; }
.reveal-stagger > .reveal:nth-child(4) { --reveal-delay: 210ms; }
.reveal-stagger > .reveal:nth-child(5) { --reveal-delay: 280ms; }
.reveal-stagger > .reveal:nth-child(6) { --reveal-delay: 350ms; }
.reveal-stagger > .reveal:nth-child(n+7) { --reveal-delay: 420ms; }

/* Hero intro plays on load (CSS only, so the LCP text is never JS-gated) */
.hero-intro { animation: fade-up 1s var(--ease-out) both; }
.hero-intro--d1 { animation-delay: 120ms; }
.hero-intro--d2 { animation-delay: 260ms; }
.hero-intro--d3 { animation-delay: 400ms; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ==========================================================================
   6. Navigation — sticky, translucent, blurred
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  height: var(--nav-height);
}

.nav__brand {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-1);
  font-size: 14px;
  color: rgba(245, 245, 247, 0.72);
  transition: color 0.2s;
}

.nav__link:hover,
.nav__link.is-active { color: var(--text-on-dark); }

@media (min-width: 734px) {
  .nav__menu { flex: none; }
}

@media (min-width: 734px) and (max-width: 1067px) {
  .nav__menu { gap: 14px; }
  .nav__link { font-size: 13px; }
}

/* Active indicator: a tiny gradient bar */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transition: transform 0.4s var(--ease-out);
}

.nav__link.is-active::after { transform: scaleX(1); }

/* Hamburger */
.nav__toggle {
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: calc(-1 * var(--space-2));
}

.nav__toggle-bars,
.nav__toggle-bars::before {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--text-on-dark);
  transition: transform 0.35s var(--ease-out);
}

.nav__toggle-bars { transform: translateY(-3px); }

.nav__toggle-bars::before {
  content: "";
  transform: translateY(6px);
}

.nav.is-open .nav__toggle-bars { transform: rotate(45deg); }
.nav.is-open .nav__toggle-bars::before { transform: rotate(-90deg); }

@media (max-width: 733px) {
  .js .nav__toggle { display: grid; }

  .js .nav__menu {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-1) var(--gutter) var(--space-3);
    background: rgba(0, 0, 0, 0.94);
    border-bottom: 1px solid var(--hairline-dark);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }

  .js .nav.is-open .nav__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  }

  .js .nav__link {
    display: block;
    padding-block: var(--space-2);
    font-size: 17px;
    border-bottom: 1px solid var(--hairline-dark);
  }

  .js .nav__link::after { display: none; }
  .js .nav__link.is-active { color: var(--text-on-dark); }

  .nav__cta-item { padding-top: var(--space-3); }

  /* No-JS fallback: let the inline menu scroll horizontally */
  html:not(.js) .nav__menu { overflow-x: auto; }
}


/* ==========================================================================
   7. Hero
   ========================================================================== */
.hero {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--nav-height));
  overflow: hidden;
  text-align: center;
  scroll-margin-top: 0;
  /* Static fallback (no JS / no canvas): soft meteor-palette haze on black */
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%, rgba(10, 132, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 55% 25%, rgba(100, 210, 255, 0.07), transparent 70%),
    radial-gradient(ellipse 60% 45% at 90% 100%, rgba(191, 90, 242, 0.14), transparent 70%),
    var(--color-black);
}

/* Meteor shower canvas (hero-meteors.js). Pure black once the canvas is live. */
.hero.hero--meteors { background: var(--color-black); }

.hero__meteors {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero--meteors .hero__meteors { display: block; }

/* Readability: dark radial pool behind the text + soft fade at the bottom edge */
.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 48% at 50% 50%, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 80%, #000 100%);
}

/* Extra local contrast for the muted sub line (not on gradient text, where shadows muddy the fill) */
.hero--meteors .hero__sub { text-shadow: 0 0 2px #000, 0 0 16px #000; }

.hero__inner { position: relative; }

.hero__title { font-weight: 700; }

.hero__name {
  display: block;
  font-size: clamp(19px, 1vw + 15px, 28px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
  margin-bottom: var(--space-2);
}

/* Spec: 72–96px on tablet/desktop; scales down on small phones so long words never overflow */
.hero__tagline {
  display: block;
  font-size: clamp(40px, 0.75rem + 8vw, 96px);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  max-width: 13em;
  margin-inline: auto;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.hero__sub {
  max-width: 640px;
  margin: var(--space-3) auto 0;
  font-size: clamp(19px, 0.5vw + 17px, 24px);
  line-height: 1.4;
  color: var(--text-on-dark-muted);
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}


/* ==========================================================================
   8. About
   ========================================================================== */
.about__grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 1068px) {
  .about__grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-10);
    align-items: start;
  }
}

.about__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 440px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.photo-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(10, 132, 255, 0.08), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(191, 90, 242, 0.08), transparent 55%),
    linear-gradient(160deg, var(--color-white) 0%, var(--color-light-2) 100%);
}

.photo-placeholder__initials {
  font-size: clamp(72px, 8vw + 24px, 128px);
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #c7c7cc;
}

.about__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

.about__photo-img.is-loaded { opacity: 1; }

.about__text {
  display: grid;
  gap: var(--space-3);
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-on-light-gradient-muted);
}

.about__lead {
  font-size: clamp(21px, 0.75vw + 18px, 28px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text-on-light);
}

/* Stat row — signature: a slowly moving gradient rule above it */
.stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
}

.stats::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background-image: var(--gradient-accent);
  background-size: 200% 100%;
  animation: gradient-shift 8s linear infinite;
}

@media (min-width: 734px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-1);
}

.stat__value {
  font-size: clamp(36px, 2vw + 24px, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-light);
}

.stat__suffix {
  font-size: 0.45em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-on-light-gradient-muted);
}

.stat__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-on-light-gradient-muted);
}


/* ==========================================================================
   9. Skills — base
   One compact section: two-tone headline, then the categories side by side
   as cards (≥1024px: 2–3 per row · 734–1023px: 2 columns · <734px:
   scroll-snap carousel with a peek of the next card and dot indicators).
   ========================================================================== */
.skills {
  scroll-margin-top: var(--nav-height);
  background: var(--color-black);
  padding-block: var(--space-12);
}

@media (min-width: 1024px) {
  .skills { padding-block: var(--space-16) var(--space-12); }
}

/* Two-tone headline: white bold + italic accent word + grey continuation */
.skills__headline {
  max-width: 20em;
  margin-bottom: var(--space-6);
  font-size: clamp(32px, 3vw + 18px, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.skills__lead   { color: var(--text-on-dark); }
.skills__accent { font-style: italic; padding-right: 0.06em; }
.skills__rest   { font-weight: 600; color: var(--text-on-dark-gradient-muted); }

/* Card track: grid on tablet/desktop, carousel on mobile */
.skills__track {
  position: relative; /* offsetParent for the carousel dots */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-3);
}

.skills__track[data-count="1"] { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1024px) {
  /* 2 → 2 columns, 3 → 3, 4 → 2 × 2, 5+ → 3 per row */
  .skills__track[data-count="3"],
  .skills__track[data-count="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 733px) {
  .skills__track {
    display: flex;
    gap: var(--space-2);
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) var(--space-2);
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .skills__track::-webkit-scrollbar { display: none; }

  .skills__track > .skill-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }

  .skills__track[data-count="1"] > .skill-card { flex-basis: 100%; }
}

/* Dot indicators (mobile carousel only) */
.skills__dots { display: none; }

@media (max-width: 733px) {
  .skills__dots {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: var(--space-1);
  }
}

.skills__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

.skills__dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
  transition: width 0.3s var(--ease-out), background-color 0.3s;
}

.skills__dot[aria-current="true"]::before {
  width: 18px;
  background: var(--text-on-dark);
}

.skills__dot:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 0;
}

/* Category card. Defaults below (incl. a generic ring ornament for new
   categories) are overridden by the theme blocks in §10. */
.skill-card {
  --accent: var(--blue);
  --ornament-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='200' cy='200' r='190'/%3E%3Ccircle cx='200' cy='200' r='150'/%3E%3Ccircle cx='200' cy='200' r='110'/%3E%3Ccircle cx='200' cy='200' r='70'/%3E%3Ccircle cx='200' cy='200' r='30'/%3E%3C/g%3E%3C/svg%3E");
  --ornament-size: 300px auto;
  --ornament-position: right -110px top -110px;
  --ornament-repeat: no-repeat;
  --ornament-fade: radial-gradient(ellipse 80% 75% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 78%);
  --ornament-opacity: 0.35;
  --ornament-animation: none;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface-dark)) 0%, var(--surface-dark) 60%);
  border: 1px solid var(--hairline-dark);
  transition: border-color 0.4s, box-shadow 0.4s;
}

@media (min-width: 1024px) {
  .skill-card { padding: var(--space-4); }
}

.skill-card:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: 0 24px 64px -28px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* Accent colours: from data.json (skill_categories[].accent) or auto-assigned by script.js */
.skill-card[data-accent="blue"]   { --accent: var(--blue); }
.skill-card[data-accent="orange"] { --accent: var(--orange); }
.skill-card[data-accent="green"]  { --accent: var(--green); }
.skill-card[data-accent="purple"] { --accent: var(--purple); }
.skill-card[data-accent="pink"]   { --accent: var(--pink); }

/* Decorative layer: accent colour shown through an SVG/CSS mask, faded at the edges */
.ornament {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--accent);
  opacity: var(--ornament-opacity);

  -webkit-mask-image: var(--ornament-mask), var(--ornament-fade);
  mask-image: var(--ornament-mask), var(--ornament-fade);
  -webkit-mask-size: var(--ornament-size), 100% 100%;
  mask-size: var(--ornament-size), 100% 100%;
  -webkit-mask-position: var(--ornament-position), center;
  mask-position: var(--ornament-position), center;
  -webkit-mask-repeat: var(--ornament-repeat), no-repeat;
  mask-repeat: var(--ornament-repeat), no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  animation: var(--ornament-animation);
}

@keyframes ornament-float {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -10px, 0); }
}

@keyframes ornament-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-8px, 6px, 0); }
}

.skill-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-on-dark);
}

.skill-card__title::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

/* Compact tiles in a wrapped grid */
.skill-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr));
  gap: var(--space-1);
}

.skill-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radius-tile);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--hairline-dark);
  transition:
    transform 0.3s var(--ease-out),
    border-color 0.3s,
    background-color 0.3s;
}

.skill-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, #0a0a0b);
}

.skill-tile__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-dark-2));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--text-on-dark);
  transition: box-shadow 0.3s;
}

.skill-tile:hover .skill-tile__icon {
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Bundled icons are monochrome black SVGs: invert to white on dark tiles */
.skill-tile__icon img {
  width: 22px;
  height: 22px;
  filter: invert(1);
  opacity: 0;
  transition: opacity 0.3s;
}

.skill-tile__icon img.is-loaded { opacity: 0.92; }

/* Built-in line glyphs (STRIDE, application design, OWASP checklist) */
.skill-tile__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
}

.skill-tile__monogram {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.skill-tile__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.skill-tile__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-on-dark);
  overflow-wrap: break-word;
  hyphens: auto;
}

.skill-tile__level {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-on-dark-muted);
}

/* Closing line */
.skills__closing {
  max-width: 26em;
  margin-top: var(--space-8);
  font-size: clamp(22px, 1.5vw + 14px, 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-on-dark-gradient-muted);
  text-wrap: balance;
}

/* Accent words sit on the Bloom Field gradient: their darkest gradient colour
   (#6170f9) is 3.1:1 on the lightest gradient pixel, so they must qualify as
   WCAG "large text" (≥ 18.66px bold) at every size — the line is ≥ 22px. */
.skills__closing .gradient-text { font-weight: 700; }


/* ==========================================================================
   10. Skills — category ornaments
   Edit ONE block to change a category's ornament. Keys match "key" in
   data.json skill_categories → data-category="<key>". Accent colours live in
   data.json ("accent"); categories not listed there get the next free colour
   and the default ring ornament from §9.
   ========================================================================== */

/* — Security · faint concentric shield / layer lines — */
.skill-card[data-category="security"] {
  --ornament-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='440' viewBox='0 0 400 440'%3E%3Cg fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath vector-effect='non-scaling-stroke' d='M200 20L360 80V200C360 300 290 370 200 410C110 370 40 300 40 200V80Z'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='matrix(0.8 0 0 0.8 40 43)' d='M200 20L360 80V200C360 300 290 370 200 410C110 370 40 300 40 200V80Z'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='matrix(0.6 0 0 0.6 80 86)' d='M200 20L360 80V200C360 300 290 370 200 410C110 370 40 300 40 200V80Z'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='matrix(0.4 0 0 0.4 120 129)' d='M200 20L360 80V200C360 300 290 370 200 410C110 370 40 300 40 200V80Z'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='matrix(0.2 0 0 0.2 160 172)' d='M200 20L360 80V200C360 300 290 370 200 410C110 370 40 300 40 200V80Z'/%3E%3C/g%3E%3C/svg%3E");
  --ornament-size: 260px auto;
  --ornament-position: right -64px top -56px;
  --ornament-opacity: 0.4;
}

/* — Web Development · floating { } brackets — */
.skill-card[data-category="web-development"] {
  --ornament-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='480' viewBox='0 0 600 480'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' transform='translate(380 40) scale(1.6)' d='M30 5C15 5 15 15 15 30V40C15 47 10 50 5 50C10 50 15 53 15 60V70C15 85 15 95 30 95M70 5C85 5 85 15 85 30V40C85 47 90 50 95 50C90 50 85 53 85 60V70C85 85 85 95 70 95'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='translate(250 270) scale(1)' d='M30 5C15 5 15 15 15 30V40C15 47 10 50 5 50C10 50 15 53 15 60V70C15 85 15 95 30 95M70 5C85 5 85 15 85 30V40C85 47 90 50 95 50C90 50 85 53 85 60V70C85 85 85 95 70 95'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='translate(470 310) scale(0.7)' d='M30 5C15 5 15 15 15 30V40C15 47 10 50 5 50C10 50 15 53 15 60V70C15 85 15 95 30 95M70 5C85 5 85 15 85 30V40C85 47 90 50 95 50C90 50 85 53 85 60V70C85 85 85 95 70 95'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='translate(130 100) scale(0.6)' d='M30 5C15 5 15 15 15 30V40C15 47 10 50 5 50C10 50 15 53 15 60V70C15 85 15 95 30 95M70 5C85 5 85 15 85 30V40C85 47 90 50 95 50C90 50 85 53 85 60V70C85 85 85 95 70 95'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='translate(520 170) scale(0.45)' d='M30 5C15 5 15 15 15 30V40C15 47 10 50 5 50C10 50 15 53 15 60V70C15 85 15 95 30 95M70 5C85 5 85 15 85 30V40C85 47 90 50 95 50C90 50 85 53 85 60V70C85 85 85 95 70 95'/%3E%3C/g%3E%3C/svg%3E");
  --ornament-size: 400px auto;
  --ornament-position: right -96px top -40px;
  --ornament-opacity: 0.35;
  --ornament-animation: ornament-float 9s ease-in-out infinite alternate;
}

/* — Networking/Server · node-and-line network — */
.skill-card[data-category="networking-server"] {
  --ornament-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='480' viewBox='0 0 600 480'%3E%3Cpath d='M420 60L540 140M420 60L360 180M420 60L260 80M540 140L360 180M540 140L480 260M360 180L480 260M360 180L220 200M360 180L300 320M480 260L560 370M480 260L300 320M480 260L410 420M300 320L410 420M300 320L150 370M220 200L260 80M220 200L150 370M560 370L410 420' fill='none' stroke='black' stroke-width='1.2'/%3E%3Cg fill='black'%3E%3Ccircle cx='420' cy='60' r='5'/%3E%3Ccircle cx='540' cy='140' r='5'/%3E%3Ccircle cx='360' cy='180' r='5'/%3E%3Ccircle cx='480' cy='260' r='5'/%3E%3Ccircle cx='560' cy='370' r='5'/%3E%3Ccircle cx='300' cy='320' r='5'/%3E%3Ccircle cx='410' cy='420' r='5'/%3E%3Ccircle cx='220' cy='200' r='5'/%3E%3Ccircle cx='150' cy='370' r='5'/%3E%3Ccircle cx='260' cy='80' r='5'/%3E%3C/g%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Ccircle cx='360' cy='180' r='12'/%3E%3Ccircle cx='480' cy='260' r='12'/%3E%3C/g%3E%3C/svg%3E");
  --ornament-size: 400px auto;
  --ornament-position: right -120px top -60px;
  --ornament-opacity: 0.4;
  --ornament-animation: ornament-drift 14s ease-in-out infinite alternate;
}

/* — Database · stacked cylinders — */
.skill-card[data-category="database"] {
  --ornament-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='480' viewBox='0 0 600 480'%3E%3Cg fill='none' stroke='black' stroke-width='1.5'%3E%3Cellipse cx='440' cy='80' rx='90' ry='24'/%3E%3Cpath d='M350 80V290M530 80V290M350 150A90 24 0 0 0 530 150M350 220A90 24 0 0 0 530 220M350 290A90 24 0 0 0 530 290'/%3E%3Cellipse cx='220' cy='300' rx='50' ry='14'/%3E%3Cpath d='M170 300V380M270 300V380M170 340A50 14 0 0 0 270 340M170 380A50 14 0 0 0 270 380'/%3E%3Cellipse cx='545' cy='385' rx='30' ry='9'/%3E%3Cpath d='M515 385V435M575 385V435M515 410A30 9 0 0 0 575 410M515 435A30 9 0 0 0 575 435'/%3E%3C/g%3E%3C/svg%3E");
  --ornament-size: 380px auto;
  --ornament-position: right -110px top -40px;
  --ornament-opacity: 0.4;
}

/* — Tools · dot grid — */
.skill-card[data-category="tools"] {
  --ornament-mask: radial-gradient(circle, #000 1.5px, transparent 2px);
  --ornament-size: 20px 20px;
  --ornament-position: 0 0;
  --ornament-repeat: repeat;
  --ornament-fade: radial-gradient(ellipse 60% 70% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.4) 50%, transparent 80%);
  --ornament-opacity: 0.45;
}


/* ==========================================================================
   11. Projects
   ========================================================================== */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.section-head .section-title { margin-bottom: 0; }

/* Segmented control — signature of this section */
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-light-2);
}

.segmented__btn {
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-on-light-muted);
  transition: background-color 0.3s var(--ease-out), color 0.3s, box-shadow 0.3s;
}

.segmented__btn:hover { color: var(--text-on-light); }

.segmented__btn[aria-pressed="true"] {
  background: var(--color-white);
  color: var(--text-on-light);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Projects on a black background (2026-10-11 order): darker track, same white pill */
/* Opaque track: a translucent one let the gradient through (#a1a1a6 on white 12% over
   #343432 = 3.3:1). #a1a1a6 on #1d1d1f = 6.5:1. */
.section--dark .segmented { background: var(--surface-dark-2); box-shadow: inset 0 0 0 1px var(--hairline-dark); }
.section--dark .segmented__btn { color: var(--text-on-dark-muted); }
.section--dark .segmented__btn:hover { color: var(--text-on-dark); }

.section--dark .segmented__btn[aria-pressed="true"] {
  background: var(--color-white);
  color: var(--text-on-light);
}

.projects-grid {
  display: grid;
  gap: var(--space-3);
}

.project-card {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-card);
  /* Light surface → it sets its own text colour. Without this the title
     (h3 > button, both "color: inherit") inherited --text-on-dark from
     .section--dark once Projects moved to black: #f5f5f7 on #fff = 1.09:1. */
  background: var(--color-white);
  color: var(--text-on-light);
  box-shadow: var(--shadow-card);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  animation: fade-up 0.6s var(--ease-out) both;  /* replays when the filter shows it */
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.project-card:has(.project-card__open:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

@media (min-width: 1068px) {
  .project-card { grid-template-columns: 1.1fr 1fr; }
}

.project-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-light);
}

@media (min-width: 1068px) {
  .project-card__media { aspect-ratio: auto; min-height: 400px; }
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s, transform 0.8s var(--ease-out);
}

.project-card__media img.is-loaded { opacity: 1; }
.project-card:hover .project-card__media img { transform: scale(1.03); }

.project-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
}

@media (min-width: 1068px) {
  .project-card__body { padding: var(--space-6); }
}

.project-card__meta {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-on-light-muted);
}

.project-card__title {
  font-size: clamp(24px, 1vw + 20px, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.project-card__open {
  text-align: left;
  letter-spacing: inherit;
}

/* Stretch the button over the whole card */
.project-card__open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.project-card__open:focus-visible { outline: none; }

.project-card__summary {
  font-size: 17px;
  color: var(--text-on-light-muted);
}

.project-card__context {
  font-size: 14px;
  color: var(--text-on-light-muted);
}

.project-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-1);
  font-size: 17px;
  font-weight: 600;
  color: var(--link-on-light);
}

.project-card__cta svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease-out);
}

.project-card:hover .project-card__cta svg { transform: translateX(4px); }


/* ==========================================================================
   12. Placeholders — shown whenever an image is missing or deferred
   ========================================================================== */
.placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  min-height: 200px;
  padding: var(--space-4);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 20%, rgba(10, 132, 255, 0.12), transparent 50%),
    radial-gradient(circle at 80% 85%, rgba(191, 90, 242, 0.12), transparent 50%),
    radial-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px) 0 0 / 16px 16px,
    #fbfbfd;
  color: var(--text-on-light);
}

.placeholder--documents {
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 159, 10, 0.12), transparent 50%),
    radial-gradient(circle at 80% 85%, rgba(255, 55, 95, 0.1), transparent 50%),
    radial-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px) 0 0 / 16px 16px,
    #fbfbfd;
}

.placeholder--dark,
.section--dark .placeholder--auto {
  background:
    radial-gradient(circle at 25% 20%, rgba(10, 132, 255, 0.16), transparent 50%),
    radial-gradient(circle at 80% 85%, rgba(191, 90, 242, 0.14), transparent 50%),
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--surface-dark-2);
  color: var(--text-on-dark);
}

.placeholder__glyph {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.placeholder--dark .placeholder__glyph,
.section--dark .placeholder--auto .placeholder__glyph {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--hairline-dark);
}

.placeholder__glyph svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

.placeholder__note {
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-on-light-muted);
}

.placeholder--dark .placeholder__note,
.section--dark .placeholder--auto .placeholder__note { color: var(--text-on-dark-muted); }


/* ==========================================================================
   13. Modals (native <dialog>: focus-trapped, Esc closes)
   ========================================================================== */
.modal {
  width: min(880px, calc(100% - var(--space-4)));
  max-width: none;
  max-height: calc(100dvh - var(--space-6));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-white);
  color: var(--text-on-light);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35);
}

.modal[open] { animation: modal-in 0.45s var(--ease-out); }

.modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.modal[open]::backdrop { animation: fade-in 0.3s ease; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.modal__panel {
  max-height: calc(100dvh - var(--space-6));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(232, 232, 237, 0.9);
  color: var(--text-on-light);
  transition: background-color 0.2s, transform 0.3s var(--ease-out);
}

.modal__close:hover { background: #d2d2d7; transform: rotate(90deg); }

.modal__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Project detail */
.modal__header { padding: var(--space-6) var(--space-3) var(--space-3); }

@media (min-width: 734px) {
  .modal__header { padding: var(--space-8) var(--space-6) var(--space-4); }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  padding-right: var(--space-5);
}

.chip {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-light);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-on-light-muted);
}

.modal__title {
  font-size: clamp(28px, 2vw + 20px, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.modal__lead {
  margin-top: var(--space-2);
  font-size: 19px;
  line-height: 1.45;
  color: var(--text-on-light-muted);
}

.modal__media {
  display: grid;
  gap: var(--space-2);
  padding-inline: var(--space-3);
}

@media (min-width: 734px) {
  .modal__media { padding-inline: var(--space-6); }
}

.modal__media .placeholder {
  min-height: 240px;
  border-radius: var(--radius-tile);
}

.gallery__item {
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--color-light);
}

.gallery__item img {
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s;
}

.gallery__item img.is-loaded { opacity: 1; }

.gallery__item figcaption {
  padding: var(--space-1) var(--space-2) var(--space-2);
  font-size: 14px;
  color: var(--text-on-light-muted);
}

.modal__body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3) var(--space-6);
}

@media (min-width: 734px) {
  .modal__body { padding: var(--space-5) var(--space-6) var(--space-8); }
}

.modal__block h3 {
  margin-bottom: var(--space-1);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-light-muted);
}

.modal__block p {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.6;
}

/* Booking-flow chips with arrows */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.flow li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.flow__step {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-light);
  font-size: 15px;
  font-weight: 600;
}

.flow li:first-child .flow__step {
  background: var(--text-on-light);
  color: var(--color-white);
}

.flow li:not(:last-child)::after {
  content: "→";
  content: "→" / "";
  color: var(--text-on-light-muted);
}

/* Document / repository links */
.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.link-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-on-light);
  transition: background-color 0.2s, border-color 0.2s;
}

.link-chip:hover {
  background: var(--color-light);
  border-color: rgba(0, 0, 0, 0.2);
}

.link-chip svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Image viewer */
.modal--image {
  width: min(1200px, calc(100% - var(--space-4)));
  overflow: visible;
  background: transparent;
  box-shadow: none;
  color: var(--text-on-dark);
}

.modal--image::backdrop { background: rgba(0, 0, 0, 0.85); }

.modal__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-8);
}

.modal__image-slot {
  display: grid;
  place-items: center;
  width: 100%;
}

.modal__image-slot img {
  width: auto;
  max-height: calc(100dvh - 200px);
  border-radius: var(--radius-tile);
  opacity: 0;
  transition: opacity 0.4s;
}

.modal__image-slot img.is-loaded { opacity: 1; }

.modal__image-slot .placeholder {
  min-height: 320px;
  border-radius: var(--radius-card);
}

.modal__caption {
  font-size: 15px;
  text-align: center;
  color: var(--text-on-dark-muted);
}

.modal--image .modal__close {
  top: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-on-dark);
}

.modal--image .modal__close:hover { background: rgba(255, 255, 255, 0.24); }


/* ==========================================================================
   14. Organization Experience, Education, Certifications
       Each section works on black or white (see the --sec-* tokens in §3).
   ========================================================================== */

/* Shared: logo tile (uploaded logo, or a monogram when there is none / it fails) */
.logo-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--sec-surface-2);
  box-shadow: inset 0 0 0 1px var(--sec-hairline);
}

.logo-tile--image { background: var(--color-white); }

.logo-tile img {
  width: 100%;
  height: 100%;
  padding: 6px;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.4s;
}

.logo-tile img.is-loaded { opacity: 1; }

.logo-tile__mark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background-image: linear-gradient(135deg, var(--blue), var(--purple) 60%, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* — Organization Experience · signature: thin vertical line with dots — */
.xp-timeline {
  position: relative;
  display: grid;
  gap: var(--space-3);
  max-width: 880px;
  padding-left: var(--space-5);
}

.xp-timeline::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 7px;
  width: 1px;
  background: linear-gradient(to bottom, var(--sec-hairline) 85%, transparent);
}

.xp-item { position: relative; }

.xp-item__dot {
  position: absolute;
  top: 34px;
  left: calc(-1 * var(--space-5) + 3px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px var(--sec-bg);
}

.xp-item.is-current .xp-item__dot {
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--sec-bg), 0 0 0 7px rgba(10, 132, 255, 0.28);
}

.xp-card {
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--sec-surface);
  box-shadow: var(--sec-shadow), inset 0 0 0 1px var(--sec-hairline);
  transition: transform 0.5s var(--ease-out);
}

@media (min-width: 734px) {
  .xp-card { padding: var(--space-4); }
}

.xp-card:hover { transform: translateY(-2px); }

.xp-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.xp-card__titles { min-width: 0; }

.xp-card__org {
  font-size: clamp(21px, 0.5vw + 19px, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.xp-card__role {
  margin-top: 2px;
  font-size: 17px;
  font-weight: 500;
  color: var(--sec-muted);
}

.xp-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.xp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--sec-surface-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--sec-muted);
}

.xp-chip--now::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.xp-card__bullets {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: 17px;
  line-height: 1.5;
}

.xp-card__bullets li {
  position: relative;
  padding-left: 20px;
}

.xp-card__bullets li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
}

/* — Education · signature: gradient hairline on top of each card — */
.edu-grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 734px) {
  .edu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.edu-item,
.cert-item { display: grid; }

.edu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--sec-surface);
  box-shadow: var(--sec-shadow), inset 0 0 0 1px var(--sec-hairline);
  transition: transform 0.5s var(--ease-out);
}

@media (min-width: 734px) {
  .edu-card { padding: var(--space-4); }
}

.edu-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--gradient-accent);
  background-size: 200% 100%;
  opacity: 0.85;
}

.edu-card:hover { transform: translateY(-4px); }

.edu-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.edu-card__period {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  color: var(--sec-muted);
}

.edu-card__institution {
  font-size: clamp(24px, 1vw + 20px, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.edu-card__degree { font-size: 17px; font-weight: 600; }
.edu-card__field { font-size: 17px; color: var(--sec-muted); }

.edu-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-2);
}

.edu-card__facts dt { font-size: 13px; color: var(--sec-muted); }
.edu-card__facts dd { font-size: 17px; font-weight: 600; }

.edu-card__desc {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--sec-hairline);
  font-size: 15px;
  line-height: 1.55;
  color: var(--sec-muted);
}

/* — Certifications · badge cards in a responsive grid — */
/* Certificate card — signature: gradient ring on hover/focus */
.cert-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  background: var(--sec-surface, var(--surface-dark));
  border: 1px solid var(--sec-hairline, var(--hairline-dark));
  box-shadow: var(--sec-shadow, none);
  transition: transform 0.5s var(--ease-out);
}

.cert-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient-accent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.cert-card:hover { transform: translateY(-4px); }

.cert-card:hover::before,
.cert-card:focus-within::before { opacity: 1; }

.cert-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 880 / 623;
  overflow: hidden;
  background: var(--sec-surface-2, var(--surface-dark-2));
  cursor: zoom-in;
}

.cert-card__media:focus-visible {
  outline-offset: -4px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.cert-card__media:disabled { cursor: default; }

.cert-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s, transform 0.8s var(--ease-out);
}

.cert-card__media img.is-loaded { opacity: 1; }
.cert-card:hover .cert-card__media img { transform: scale(1.02); }

.cert-card__hint {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-on-dark);
}

.cert-card__hint svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cert-card__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: calc(var(--space-4) + 4px) var(--space-3) var(--space-3);
}

@media (min-width: 734px) {
  .cert-card__body { padding: calc(var(--space-4) + 8px) var(--space-4) var(--space-4); }
}

/* Badge seal overlapping the image edge (gradient ring) */
.cert-card__seal {
  position: absolute;
  top: -28px;
  left: var(--space-3);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(var(--sec-surface, var(--surface-dark)), var(--sec-surface, var(--surface-dark))) padding-box,
    var(--gradient-accent) border-box;
}

@media (min-width: 734px) {
  .cert-card__seal { left: var(--space-4); }
}

.cert-card__seal svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cert-card__issuer {
  margin-bottom: var(--space-2);
  font-size: 17px;
  font-weight: 500;
  color: var(--sec-muted, var(--text-on-dark-muted));
}

.cert-card__link {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: 44px;
  margin-top: auto;
  padding: 0 var(--space-2);
  border: 1px solid var(--sec-hairline, var(--hairline-dark));
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.2s, border-color 0.2s;
}

.cert-card__meta + .cert-card__link { margin-top: var(--space-3); }

.cert-card__link:hover { background: var(--sec-surface-2, var(--surface-dark-2)); }

.cert-card__link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cert-card__title {
  margin-bottom: 4px;
  font-size: clamp(21px, 0.5vw + 19px, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.cert-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.cert-card__meta dt {
  font-size: 13px;
  color: var(--sec-muted, var(--text-on-dark-muted));
}

.cert-card__meta dd { font-size: 17px; font-weight: 500; }


/* ==========================================================================
   15. Contact — signature: gradient underline sweeps in on hover
   ========================================================================== */
.contact__list {
  display: grid;
  border-top: 1px solid var(--hairline-light);
}

.contact-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label label"
    "value arrow";
  align-items: center;
  gap: 4px var(--space-2);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--hairline-light);
}

@media (min-width: 734px) {
  .contact-row {
    grid-template-columns: 160px 1fr auto;
    grid-template-areas: "label value arrow";
    padding-block: var(--space-4);
  }
}

.contact-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}

.contact-row:hover::after,
.contact-row:focus-visible::after { transform: scaleX(1); }

.contact-row__label {
  grid-area: label;
  font-size: 14px;
  font-weight: 600;
  color: var(--sec-bg-muted, var(--text-on-light-gradient-muted));
}

.contact-row__value {
  grid-area: value;
  min-width: 0;
  font-size: clamp(19px, 1.25vw + 14px, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.contact-row__arrow {
  grid-area: arrow;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s var(--ease-out);
}

.contact-row:hover .contact-row__arrow { transform: translate(4px, -4px); }


/* Contact on a black background (only when a section above it is hidden) */
.section--dark .contact__list,
.section--dark .contact-row { border-color: var(--hairline-dark); }

/* label colour follows --sec-bg-muted (dark: --text-on-dark-gradient-muted) */


/* ==========================================================================
   16. Footer
   ========================================================================== */
.site-footer {
  padding-block: var(--space-5);
  border-top: 1px solid var(--hairline-dark);
  font-size: 14px;
  color: var(--text-on-dark-muted);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.site-footer__top { transition: color 0.2s; }
.site-footer__top:hover { color: var(--text-on-dark); }


/* ==========================================================================
   16b. Content states — files that are not uploaded yet ("coming soon")
   ========================================================================== */

/* CV button when no CV is uploaded: same pill, calm and non-interactive */
.btn--soon,
.btn--soon:hover {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.btn--light.btn--soon:hover { background: var(--color-white); }

/* Document link placeholder inside the project modal */
.link-chip--soon {
  border-style: dashed;
  color: var(--text-on-light-muted);
  cursor: default;
}

.link-chip--soon:hover { background: transparent; border-color: var(--hairline-light); }

.link-chip--soon svg { width: 16px; height: 16px; }

/* Uploaded skill icons (png/webp) keep their own colours; bundled SVGs are inverted */
.skill-tile__icon img.is-uploaded { filter: none; }

/* Certificate grid: one large card, two side by side, then as many columns as fit */
.cert-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-3);
}

.cert-list[data-count="1"] { grid-template-columns: minmax(0, 560px); }

@media (min-width: 734px) {
  .cert-list[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cert-card__media--empty { cursor: default; }

.cert-card__media .placeholder {
  position: absolute;
  inset: 0;
  min-height: 0;
}


/* ==========================================================================
   17. Reduced motion — no movement, content always visible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .ornament { animation: none; }

  .btn:hover,
  .skill-tile:hover,
  .project-card:hover,
  .xp-card:hover,
  .edu-card:hover,
  .cert-card:hover { transform: none; }
}


/* ==========================================================================
   18. Section gradients — soft animated atmosphere behind every non-hero section
   --------------------------------------------------------------------------
   • Each section gets ONE decorative layer: <div class="section-gradient" aria-hidden="true">
     (static in index.html; section-gradients.js adds it to any section that lacks one).
   • The look follows the section's theme CLASS, so script.js re-striping
     (data-theme="auto") and new sections pick the right gradient automatically:
       .section--dark                  → DARK  "Bloom Field" (21st.dev)
       .section--light / .section--white → LIGHT "Pipo" (21st.dev)
     Opt out per section with data-gradient="none". The hero keeps its meteor canvas.
   • Blob centres are base% + offset. The offsets (--b1dx, --b1dy … --b4dy) are
     written by section-gradients.js and default to 0%, so this CSS on its own
     (no JS, reduced motion) is exactly the static base design = the frame at ph = 0.
   • The grain layer (Pipo) is never animated.
   • Text directly on a gradient uses the --text-on-*-gradient tokens (§1); cards
     keep their own opaque surface and text colour.
   ========================================================================== */
main > section:not(.hero) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Section content always paints above the gradient layer */
.section-gradient ~ * {
  position: relative;
  z-index: 1;
}

[data-gradient="none"] > .section-gradient { display: none; }

/* — DARK · "Bloom Field" — Charcoal #343432 · Midnight #121211 · Ink #000000 — */
.gradient-dark,
.section--dark > .section-gradient {
  background-color: #000000;
  background-image:
    radial-gradient(circle at calc(65.34% + var(--b1dx, 0%)) calc(44.62% + var(--b1dy, 0%)), rgba(52, 52, 50, 1) 0%, rgba(52, 52, 50, 0.844) 8.53%, rgba(52, 52, 50, 0.5) 17.05%, rgba(52, 52, 50, 0.156) 25.58%, rgba(52, 52, 50, 0) 34.1%),
    radial-gradient(circle at calc(28.07% + var(--b2dx, 0%)) calc(74.48% + var(--b2dy, 0%)), rgba(18, 18, 17, 1) 0%, rgba(18, 18, 17, 0.844) 11.15%, rgba(18, 18, 17, 0.5) 22.3%, rgba(18, 18, 17, 0.156) 33.45%, rgba(18, 18, 17, 0) 44.6%),
    radial-gradient(circle at calc(52.42% + var(--b3dx, 0%)) calc(19.94% + var(--b3dy, 0%)), rgba(52, 52, 50, 1) 0%, rgba(52, 52, 50, 0.844) 14.13%, rgba(52, 52, 50, 0.5) 28.25%, rgba(52, 52, 50, 0.156) 42.38%, rgba(52, 52, 50, 0) 56.5%),
    radial-gradient(circle at calc(80.31% + var(--b4dx, 0%)) calc(84.47% + var(--b4dy, 0%)), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.844) 17.27%, rgba(0, 0, 0, 0.5) 34.55%, rgba(0, 0, 0, 0.156) 51.82%, rgba(0, 0, 0, 0) 69.1%);
  background-size: auto;
  background-blend-mode: normal;
}

/* — LIGHT · "Pipo" — Apricot #E6B093 · Sky blue #A3CEFF · Paper #FAF9EF, static grain — */
.gradient-light,
.section--light > .section-gradient,
.section--white > .section-gradient {
  background-color: #FAF9EF;
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.305'/></svg>"),
    radial-gradient(circle at calc(68.1% + var(--b1dx, 0%)) calc(46.03% + var(--b1dy, 0%)), rgba(230, 176, 147, 1) 0%, rgba(230, 176, 147, 0.844) 10.28%, rgba(230, 176, 147, 0.5) 20.55%, rgba(230, 176, 147, 0.156) 30.83%, rgba(230, 176, 147, 0) 41.1%),
    radial-gradient(circle at calc(25.17% + var(--b2dx, 0%)) calc(75.99% + var(--b2dy, 0%)), rgba(163, 206, 255, 1) 0%, rgba(163, 206, 255, 0.844) 11.15%, rgba(163, 206, 255, 0.5) 22.3%, rgba(163, 206, 255, 0.156) 33.45%, rgba(163, 206, 255, 0) 44.6%),
    radial-gradient(circle at calc(53.11% + var(--b3dx, 0%)) calc(12.71% + var(--b3dy, 0%)), rgba(250, 249, 239, 1) 0%, rgba(250, 249, 239, 0.844) 16.66%, rgba(250, 249, 239, 0.5) 33.33%, rgba(250, 249, 239, 0.156) 49.99%, rgba(250, 249, 239, 0) 66.65%);
  background-size: 120px 120px, auto, auto, auto;
  background-blend-mode: overlay, normal, normal, normal;
}

/* Section base colours match the gradient backdrops (visible only for a frame
   before the layer paints) and give the timeline dot ring (--sec-bg) a matching colour. */
main > .section--light:not(.hero),
main > .section--white:not(.hero) {
  --sec-bg: #FAF8EE;
  background-color: #FAF8EE;
}