/* Shared project surface, promoted from the approved Atmos material.
   .50 gives the daytime panel its frosted surface; blur stays on its
   sibling pseudo-element so the button lenses keep sampling the backdrop. */
html .project.atmosphere { --watercolor-rgb: 99, 216, 209; }
html .project.delta { --watercolor-rgb: 156, 145, 245; }
html .project.donuts { --watercolor-rgb: 210, 169, 234; }
html .project.airy { --watercolor-rgb: 120, 203, 227; }
html .personal-section .personal-project,
html .projects .project {
  background: rgba(248, 251, 254, .50);
  border-color: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18),
    var(--shadow-far-x, 8px) var(--shadow-far-y, 14px) 24px -14px rgba(20, 45, 65, .18);
}
html .personal-section .personal-project::before,
html .projects .project::before {
  -webkit-backdrop-filter: blur(26px) saturate(1.05);
  backdrop-filter: blur(26px) saturate(1.05);
  pointer-events: none;
}
/* Separate ink from the blur layer: fading the inlay must not weaken frosting. */
html .projects .project .project-top::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--project-watermark) right 4px bottom 2px / 112px 68px no-repeat;
  opacity: calc(var(--atmos-watermark-opacity, 1) * .5);
  pointer-events: none;
}
html .personal-section .personal-project::after,
html .projects .project::after { background: rgba(255, 255, 255, .12); }
html .projects .project h3 { color: #163246; font-size: 34px; }
html .projects .project .project-top { margin-bottom: 25px; }
html .projects .project .description { color: #345569; opacity: .85; font-size: 14px; margin-bottom: 29px; }
html .projects .project .project-kind { color: #254354; opacity: .84; text-shadow: none; }
html .projects .project .project-no { color: #304f61; opacity: .69; text-shadow: none; }
html .projects .project .project-symbol { color: #29495c; opacity: .78; }

/* Keep the optical lens and button geometry unchanged.
   Shadows are painted after the lens rather than into its sampled backdrop. */
html .intro .profile-actions .glass,
html .personal-section .personal-project .glass,
html .projects .project .glass {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .45);
  color: #1a3445;
  box-shadow: none;
}
html .intro .profile-actions .glass::before,
html .personal-section .personal-project .glass::before,
html .projects .project .glass::before {
  opacity: calc(.62 * var(--light-strength, 1));
  background:
    radial-gradient(ellipse 42px 28px at var(--px, -100%) var(--py, -100%), rgba(255, 255, 255, .78), transparent 78%),
    radial-gradient(ellipse 30% 64% at var(--sun-x, 20%) var(--sun-y, 0%), rgba(var(--sun-color, 230, 244, 255), .72), transparent 76%);
}
html .intro .profile-actions .glass::after,
html .personal-section .personal-project .glass::after,
html .projects .project .glass::after {
  box-shadow: var(--shadow-near-x, 3px) var(--shadow-near-y, 4px) 10px -6px rgba(25, 60, 80, .13);
}
html .projects .project .primary-action {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .58);
  color: #102636;
  font-weight: 600;
}
html .projects .project .primary-action::before {
  opacity: var(--light-strength, 1);
  background:
    radial-gradient(ellipse 42px 28px at var(--px, -100%) var(--py, -100%), rgba(255, 255, 255, .86), transparent 78%),
    radial-gradient(ellipse 35% 70% at var(--sun-x, 20%) var(--sun-y, 0%), rgba(var(--sun-color, 230, 244, 255), .86), transparent 76%),
    radial-gradient(ellipse 20% 65% at calc(var(--sun-x, 20%) + 4%) var(--sun-y, 0%), rgba(var(--watercolor-rgb), .26), transparent 76%),
    radial-gradient(ellipse 20% 65% at calc(var(--sun-x, 20%) - 4%) var(--sun-y, 0%), rgba(180, 169, 236, .18), transparent 76%);
}
html .projects .project .primary-action::after {
  box-shadow: var(--shadow-near-x, 3px) var(--shadow-near-y, 4px) 13px -6px rgba(25, 60, 80, .18);
}
html .projects .project .primary-action .watercolor-ink { opacity: .65; }

/* All projects share the approved night material; daylight matches the shared surface.
   Blur remains on the sibling layer so the clear button lenses still refract. */
html[data-lighting] .personal-section .personal-project,
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) {
  background:
    linear-gradient(var(--atmos-panel-light), var(--atmos-panel-light)),
    linear-gradient(to bottom, var(--atmos-panel-blue), var(--atmos-panel-blue-bottom)),
    linear-gradient(to bottom, var(--atmos-panel-dawn), var(--atmos-panel-dawn-bottom)),
    linear-gradient(to bottom, var(--atmos-panel-night), var(--atmos-panel-night-bottom));
  border-color: var(--atmos-border);
  box-shadow: inset 0 1px 1px var(--atmos-highlight),
    var(--shadow-far-x, 8px) var(--shadow-far-y, 14px) 24px -14px var(--atmos-shadow);
}
html[data-lighting] .personal-section .personal-project::before,
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy)::before {
  -webkit-backdrop-filter: blur(var(--atmos-blur)) saturate(var(--atmos-saturation));
  backdrop-filter: blur(var(--atmos-blur)) saturate(var(--atmos-saturation));
}
html[data-lighting] .personal-section .personal-project::after,
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy)::after { background: var(--atmos-rim); }
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) h3 { color: var(--atmos-title); }
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) .description { color: var(--atmos-description); opacity: 1; }
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) .project-kind { color: var(--atmos-category); opacity: 1; }
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) .project-no { color: var(--atmos-index); opacity: 1; }
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) .project-symbol { color: var(--atmos-icon); opacity: 1; }
html[data-lighting] .intro .profile-actions .glass,
html[data-lighting] .personal-section .personal-project .glass,
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) .glass {
  background: var(--atmos-button);
  border-color: var(--atmos-button-border);
  color: var(--atmos-button-text);
}
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) .primary-action {
  background: var(--atmos-cta);
  border-color: var(--atmos-cta-border);
  color: var(--atmos-cta-text);
}
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) .watercolor-ink {
  filter: saturate(var(--atmos-ink-saturation)) brightness(var(--atmos-ink-brightness));
}
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) .primary-action .watercolor-ink {
  opacity: var(--atmos-ink-opacity);
}
/* The inherited mask confines moonlight to the curved lip, never the fill. */
html[data-lighting] .intro .profile-actions .glass::before,
html[data-lighting] .personal-section .personal-project .glass::before,
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) .glass::before {
  opacity: var(--atmos-button-glint);
  background:
    radial-gradient(ellipse 26% 48% at var(--sun-x) var(--sun-y), rgba(193, 233, 255, var(--atmos-moon-arc)), transparent 76%),
    radial-gradient(ellipse 20% 42% at calc(100% - var(--sun-x)) calc(100% - var(--sun-y)), rgba(160, 156, 239, var(--atmos-moon-reflection)), transparent 76%),
    radial-gradient(ellipse 42px 28px at var(--px, -100%) var(--py, -100%), rgba(255, 255, 255, .78), transparent 78%),
    radial-gradient(ellipse 30% 64% at var(--sun-x) var(--sun-y), rgba(var(--sun-color), .72), transparent 76%);
}
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) .primary-action::before {
  opacity: var(--atmos-cta-glint);
  background:
    radial-gradient(ellipse 26% 48% at var(--sun-x) var(--sun-y), rgba(193, 233, 255, var(--atmos-moon-arc)), transparent 76%),
    radial-gradient(ellipse 20% 42% at calc(100% - var(--sun-x)) calc(100% - var(--sun-y)), rgba(160, 156, 239, var(--atmos-moon-reflection)), transparent 76%),
    radial-gradient(ellipse 42px 28px at var(--px, -100%) var(--py, -100%), rgba(255, 255, 255, .86), transparent 78%),
    radial-gradient(ellipse 35% 70% at var(--sun-x) var(--sun-y), rgba(var(--sun-color), .86), transparent 76%),
    radial-gradient(ellipse 20% 65% at calc(var(--sun-x) + 4%) var(--sun-y), rgba(var(--watercolor-rgb), .26), transparent 76%),
    radial-gradient(ellipse 20% 65% at calc(var(--sun-x) - 4%) var(--sun-y), rgba(180, 169, 236, .18), transparent 76%);
}
html[data-lighting] .intro .profile-actions .glass,
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) :is(h3, .description, .project-kind, .project-no, .glass) {
  text-shadow: 0 1px 2px var(--atmos-text-halo),
    1px 0 1px var(--atmos-text-halo), -1px 0 1px var(--atmos-text-halo);
}

/* Personal links keep a quieter neutral pigment inside the shared pill lens. */
html .personal-section .personal-project .personal-action {
  min-height: 68px;
  padding: 11px 23px;
  border-radius: 999px;
}
html .personal-section .personal-project .watercolor-ink {
  opacity: .325;
}
html[data-lighting] .personal-section .personal-project .watercolor-ink {
  opacity: calc(var(--atmos-ink-opacity) * .5);
  filter: saturate(var(--atmos-ink-saturation)) brightness(var(--atmos-ink-brightness));
}
html .personal-section .personal-action strong { color: inherit; }
html .personal-section .personal-action small { color: rgba(52, 85, 105, .85); }
html .personal-section > .section-heading { color: #163246; }
html .personal-section > .section-heading > span { color: rgba(22, 50, 70, .72); }
html[data-lighting] .personal-section .personal-action small { color: var(--atmos-description); }
html[data-lighting] .personal-section > .section-heading { color: var(--header-title); }
html[data-lighting] .personal-section > .section-heading > span { color: var(--header-subtitle); }

/* Header contrast follows its own wallpaper timeline: white by sunset. */
html[data-lighting] .intro + .section-heading,
html[data-lighting] .intro h1,
html[data-lighting] .intro h1 > span { color: var(--header-title); }
html[data-lighting] .intro + .section-heading > span,
html[data-lighting] .intro .tagline { color: var(--header-subtitle); }
html[data-lighting] .intro .eyebrow { color: var(--header-eyebrow); }
html .intro .profile-actions .glass {
  border: 1px solid var(--atmos-border, rgba(255, 255, 255, .72));
}
html[data-lighting] .intro .profile-actions .glass {
  background: var(--header-button);
  border: 1px solid var(--atmos-border, rgba(255, 255, 255, .72));
  color: var(--header-button-text);
  text-shadow: none;
}
/* X is a filled path; a hairline stroke reinforces it without changing its box. */
html .intro .profile-actions [data-link="personal-twitter"] .brand-icon {
  stroke: currentColor;
  stroke-width: .3;
}

@media (max-width: 800px) {
  html .projects .project h3 { font-size: 30px; }
}
@media (max-width: 620px) {
  html .projects .project h3 { font-size: 34px; }
  html .projects .project .project-top { margin-bottom: 19px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html .personal-section .personal-project,
  html .projects .project { background: #dfe9ef; }
  html .intro .profile-actions .glass,
  html .personal-section .personal-project .glass,
  html .projects .project .glass { background: #eaf1f4; }
  html[data-lighting] .personal-section .personal-project,
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) { background: var(--atmos-solid-panel); }
  html[data-lighting] .intro .profile-actions .glass { background: var(--header-solid-button); }
  html[data-lighting] .personal-section .personal-project .glass,
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) .glass { background: var(--atmos-solid-button); }
}
@media (prefers-contrast: more), (forced-colors: active) {
  html .personal-section .personal-project,
  html .personal-section .personal-project .glass,
  html[data-lighting] .personal-section .personal-project,
  html[data-lighting] .personal-section .personal-project .glass,
  html .intro .profile-actions .glass,
  html[data-lighting] .intro .profile-actions .glass,
  html .projects .project,
  html .projects .project .glass,
  html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy),
html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) .glass {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
    text-shadow: none;
  }
  html .personal-section .personal-action :is(strong, small),
  html[data-lighting] .personal-section .personal-action :is(strong, small),
  html .personal-section > .section-heading,
  html .personal-section > .section-heading > span,
  html[data-lighting] .personal-section > .section-heading,
  html[data-lighting] .personal-section > .section-heading > span,
  html[data-lighting] .intro + .section-heading,
  html[data-lighting] .intro + .section-heading > span,
  html[data-lighting] .intro :is(h1, h1 > span, .tagline, .eyebrow),
  html .projects .project :is(h3, .description, .project-kind, .project-no, .project-symbol),
  html[data-lighting] .projects .project:is(.atmosphere, .delta, .donuts, .airy) :is(h3, .description, .project-kind, .project-no, .project-symbol) {
    color: CanvasText;
    opacity: 1;
    text-shadow: none;
  }
  html .personal-section .personal-project::before,
  html .personal-section .personal-project::after,
  html .personal-section .personal-project .glass::before,
  html .personal-section .personal-project .glass::after,
  html .intro .profile-actions .glass::before,
  html .intro .profile-actions .glass::after,
  html .projects .project::before,
  html .projects .project .project-top::before,
  html .projects .project::after,
  html .projects .project .glass::before,
  html .projects .project .glass::after { display: none; }
}