.page-shell--home { --accent: var(--link); --orange: #93550c; }
:root:not([data-theme="dark"]) .section-home { --page-bg: #d6d8dc; --line: #bfc4cc; --line-strong: #a6b0be; }
[data-theme="dark"] .page-shell--home { --orange: #ffb75b; }
.home-intro { margin-bottom: 28px; }
.home-program-banner {
  --banner-ink: #223043;
  --banner-muted: #445165;
  --silver-start: #bcc7d5;
  --silver-mid: #eef1f5;
  --silver-shadow: #a8b4c5;
  --silver-end: #d0d8e3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 32px 0 40px;
  padding: 29px 32px;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 14px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .14) 0 .5px, rgba(36, 55, 79, .035) .5px 1px, transparent 1px 3px) padding-box,
    linear-gradient(118deg, var(--silver-start) 0%, var(--silver-mid) 24%, var(--silver-end) 38%, var(--silver-shadow) 53%, var(--silver-mid) 69%, var(--silver-end) 83%, var(--silver-start) 100%) padding-box,
    linear-gradient(130deg, #f5f8ff, #94a3b6 22%, #647389 39%, #f4f6fb 56%, #8e9eb4 78%, #dce4ef) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(29, 44, 63, .15), 0 8px 18px -14px rgba(12, 28, 50, .5);
  color: var(--banner-ink);
  text-decoration: none;
}
.home-program-banner::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(64, 81, 107, .13), inset 0 1px 2px rgba(255, 255, 255, .35);
  pointer-events: none;
}
.home-program-banner:hover {
  color: var(--banner-ink);
}
.home-program-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, .45) 25%, transparent 38%, rgba(189, 213, 245, .15) 63%, transparent 78%);
  -webkit-mask-image: url('../textures/foil-grain.svg');
  mask-image: url('../textures/foil-grain.svg');
  pointer-events: none;
}
[data-theme="dark"] .home-program-banner {
  --silver-start: #8e9db0;
  --silver-mid: #d5dce5;
  --silver-shadow: #8d9caf;
  --silver-end: #b7c2d0;
}
.home-program-banner__text { display: flex; flex-direction: column; gap: 5px; }
.home-program-banner strong { color: var(--banner-ink); font-size: 23px; }
.home-program-banner__description { color: var(--banner-muted); font-size: 14px; }
.home-program-banner__action { flex-shrink: 0; padding: 7px 12px; border: 1px solid rgba(52, 73, 99, .3); border-radius: 6px; background: rgba(240, 246, 255, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); font-size: 14px; font-weight: 600; }
.home-skills { margin-bottom: 44px; }
.home-skills h2 { margin-bottom: 6px; }
.skills-reference { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.skills-list { margin: 0; }
.skills-list > div { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.skills-list dt { font-weight: 500; }
.skills-list dd { margin: 0; color: var(--muted); font-size: 14px; }
.skills-since { white-space: nowrap; }
.home-projects > h2 { margin: 0 0 24px; padding-top: 32px; border-top: 1px solid var(--line); }
/* The slots stay still while their foil surfaces tilt. */
.home-projects .cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  list-style: none;
  padding: 8px 0 24px;
  margin: 0;
}
.cards li::before { content: none !important; }
.card-slot { display: flex; position: relative; min-width: 0; }
.card-slot.is-active { z-index: 2; }

.card {
  --surface-start: #19457e;
  --surface-middle: #102c59;
  --surface-end: #1d3974;
  --card-ink: #f3f7ff;
  --card-control: rgba(7, 25, 56, .62);
  --accent: #a6e5ff;
  --orange: #ffe099;
  --line-strong: rgba(166, 198, 241, .34);
  --mx: 50%;
  --my: 50%;
  --foil-x: 50%;
  --foil-y: 50%;
  --light: 0;
  --foil-blend: screen;
  --foil-opacity: .28;
  --grain-opacity: .95;
  --foil-spectrum: repeating-linear-gradient(112deg,
    #537cb5 0%, #bedee7 14%, #8dcac6 27%, #7b9fd8 41%,
    #b5a7cf 55%, #80bad7 69%, #537cb5 83%);
  --foil-window: radial-gradient(ellipse farthest-corner at var(--mx) var(--my),
    #000 8%, rgba(0, 0, 0, .85) 33%, rgba(0, 0, 0, .3) 64%, transparent 100%);
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
  min-width: 0;
  padding: 28px;
  border: 1px solid transparent;
  border-radius: 18px;
  overflow: hidden;
  overflow-wrap: anywhere;
  touch-action: pan-y pinch-zoom;
  background:
    linear-gradient(118deg, transparent 36%, rgba(126, 171, 226, .035) 48%, transparent 60%) padding-box,
    linear-gradient(145deg, var(--surface-start), var(--surface-middle) 52%, var(--surface-end)) padding-box,
    linear-gradient(135deg, #647e9e, #20324d 24%, #3b5271 46%, #8299b5 62%, #22334b 82%, #526783) border-box;
  box-shadow:
    0 14px 28px -16px rgba(14, 37, 76, .5),
    inset 0 1px 0 rgba(176, 207, 246, .2);
  transform: perspective(1200px) translateY(var(--lift, 0px)) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg));
  transition: box-shadow .35s ease;
}
.card.is-hover {
  will-change: transform;
  box-shadow:
    0 24px 46px -20px rgba(0, 0, 0, .22),
    0 0 30px -14px rgba(105, 164, 246, .3),
    inset 0 1px 0 rgba(198, 224, 255, .2);
}
/* A narrow reflection catches the edge of the metal frame. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(190px 180px at var(--mx) var(--my), rgba(211, 234, 255, .95), rgba(114, 170, 242, .34) 40%, transparent 75%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: var(--light);
}
.card::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 3;
  border: 1px solid rgba(151, 183, 224, .11);
  border-radius: 11px;
  pointer-events: none;
}

/* Light stays beneath the ink; the existing text colors remain readable. */
.card > :not(.foil-layer):not(.card__shine):not(.card__glare) {
  position: relative;
  z-index: 4;
}
.card .foil-layer,
.card .card__shine,
.card .card__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/*
 * Four foil finishes, inspired by https://poke-holo.simey.me/.
 * The grain is fixed to the metal; only illumination and diffraction move.
 * These gradients and local SVG textures are made for the text cards.
 */
.card .foil-layer {
  z-index: 0;
  background-image: var(--foil-spectrum);
  background-size: 260% 300%;
  background-position: var(--foil-x) var(--foil-y);
  mix-blend-mode: var(--foil-blend);
  opacity: calc(.1 + var(--light) * var(--foil-opacity));
  -webkit-mask-image: var(--foil-window);
  mask-image: var(--foil-window);
}

.card .card__shine {
  z-index: 1;
  background-image: var(--foil-spectrum);
  background-size: 190% 260%;
  background-position: calc(100% - var(--foil-x)) calc(100% - var(--foil-y));
  mix-blend-mode: var(--foil-blend);
  opacity: calc(.13 + var(--light) * var(--grain-opacity));
}

/* A broad, soft reflection follows the same spring as the tilt. */
.card .card__glare {
  z-index: 2;
  background: radial-gradient(ellipse farthest-corner at var(--mx) var(--my),
    rgba(200, 236, 255, .36), rgba(69, 169, 239, .16) 23%, rgba(56, 122, 226, .045) 48%, transparent 78%);
  mix-blend-mode: screen;
  opacity: calc(var(--light) * .52);
}

/* 1. Amazing Rare: fine, irregular glitter with a second, coarser foil grain. */
.card[data-foil="amazing-rare"] {
  --foil-spectrum: repeating-linear-gradient(105deg,
    #07b9ff 0%, #05e8b8 15%, #6968ff 30%, #f548c8 45%,
    #12d6e8 60%, #3974ff 75%, #07b9ff 90%);
}
.card[data-foil="amazing-rare"] .card__shine {
  background-image: repeating-linear-gradient(112deg,
    #009dff 0%, #08f0b7 13%, #10c8ff 24%, #9552ff 35%,
    #ff44ba 46%, #05e8e0 58%, #4a68ff 71%, #009dff 84%);
  background-size: 160% 200%;
  background-position: calc(50% + (var(--foil-x) - 50%) * 3) calc(50% + (var(--foil-y) - 50%) * 2.5);
  -webkit-mask-image: url('../textures/foil-grain.svg'), var(--foil-window);
  mask-image: url('../textures/foil-grain.svg'), var(--foil-window);
  -webkit-mask-size: 256px 256px, 100% 100%;
  mask-size: 256px 256px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.card[data-foil="amazing-rare"] .foil-layer {
  background-image: url('../textures/foil-grain.svg'), var(--foil-spectrum);
  background-size: 384px 384px, 260% 300%;
  background-position: 37px 61px, var(--foil-x) var(--foil-y);
  background-blend-mode: soft-light;
}
.card[data-foil="amazing-rare"] .card__shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at var(--mx) var(--my), #edfaff, transparent 58%);
  opacity: .3;
}
.card[data-foil="amazing-rare"] .card__glare::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(110deg,
    #13c8ff, #58ffd4 18%, #9f68ff 34%, #ff6bd8 49%, #32dcff 65%, #13c8ff 82%);
  background-size: 190% 230%;
  background-position: calc(50% - (var(--foil-x) - 50%) * 3.5) calc(50% - (var(--foil-y) - 50%) * 2.5);
  -webkit-mask-image: url('../textures/foil-flakes.svg'), var(--foil-window);
  mask-image: url('../textures/foil-flakes.svg'), var(--foil-window);
  -webkit-mask-size: 288px 288px, 100% 100%;
  mask-size: 288px 288px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* 2. Holofoil Rare: vertical, colored pillars sweep over fine metal grooves. */
.card[data-foil="holo"] {
  --foil-spectrum: repeating-linear-gradient(108deg,
    #148cff 0%, #08e8c7 16%, #4a85ff 30%, #a344ff 44%,
    #f34ed2 58%, #08d9e8 72%, #148cff 86%);
  --holo-bars: repeating-linear-gradient(90deg,
    transparent 0%, rgba(0, 0, 0, .08) 5%, rgba(0, 0, 0, .55) 7.5%,
    #000 9%, rgba(0, 0, 0, .25) 11%, transparent 15%,
    transparent 23%, rgba(0, 0, 0, .3) 26%, #000 27%,
    rgba(0, 0, 0, .18) 28.5%, transparent 33%, transparent 47%);
  --holo-position: calc(50% + (var(--foil-x) - 50%) * -3 + (var(--foil-y) - 50%) * 1.2);
}
.card[data-foil="holo"] .foil-layer {
  background-image:
    repeating-linear-gradient(90deg, rgba(175, 213, 241, .3) 0 .7px, transparent .7px 3px),
    var(--foil-spectrum);
  background-size: 100% 100%, 210% 230%;
  background-position: center, var(--foil-x) var(--foil-y);
  background-blend-mode: soft-light;
}
.card[data-foil="holo"] .card__shine {
  background-size: 175% 180%;
  background-position: calc(50% + (var(--foil-x) - 50%) * 2) calc(50% + (var(--foil-y) - 50%) * 2);
  opacity: calc(.08 + var(--light) * .85);
  -webkit-mask-image: var(--holo-bars), linear-gradient(transparent, #000 14% 82%, transparent);
  mask-image: var(--holo-bars), linear-gradient(transparent, #000 14% 82%, transparent);
  -webkit-mask-size: 190% 100%, 100% 100%;
  mask-size: 190% 100%, 100% 100%;
  -webkit-mask-position: var(--holo-position) center, center;
  mask-position: var(--holo-position) center, center;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.card[data-foil="holo"] .card__shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(223, 246, 255, .38) 0 .65px, transparent .65px 2.5px);
}
.card[data-foil="holo"] .card__glare {
  background-image:
    radial-gradient(ellipse at var(--mx) var(--my), rgba(220, 242, 255, .3), transparent 65%),
    repeating-linear-gradient(90deg, transparent 0% 6.5%, rgba(217, 244, 255, .15) 8%,
      rgba(239, 249, 255, .6) 9%, rgba(171, 223, 243, .15) 10.5%, transparent 13% 47%);
  background-size: 100% 100%, 190% 100%;
  background-position: center, var(--holo-position) center;
  opacity: calc(var(--light) * .5);
}

/* 3. Cosmos: scattered foil flecks and small rings, anchored to the card. */
.card[data-foil="cosmos"] {
  --foil-spectrum: repeating-linear-gradient(125deg,
    #556aff 0%, #ac38ff 18%, #ff52be 36%, #6468ff 54%,
    #05cddf 72%, #556aff 90%);
}
.card[data-foil="cosmos"] .card__shine {
  background-image:
    radial-gradient(ellipse at var(--mx) var(--my), rgba(225, 243, 255, .25), transparent 60%),
    var(--foil-spectrum);
  background-size: 100% 100%, 160% 180%;
  background-position: center, calc(50% + (var(--foil-x) - 50%) * 3) calc(50% + (var(--foil-y) - 50%) * 2.5);
  opacity: calc(.16 + var(--light) * .95);
  -webkit-mask-image: url('../textures/foil-cosmos.svg'), var(--foil-window);
  mask-image: url('../textures/foil-cosmos.svg'), var(--foil-window);
  -webkit-mask-size: 360px 480px, 100% 100%;
  mask-size: 360px 480px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.card[data-foil="cosmos"] .card__glare {
  background-image:
    radial-gradient(ellipse at var(--mx) var(--my), rgba(213, 221, 253, .36), transparent 64%),
    radial-gradient(ellipse at calc(100% - var(--mx)) calc(100% - var(--my)),
      rgba(116, 212, 225, .16), transparent 58%);
}
.card[data-foil="cosmos"] .card__glare::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(ellipse at var(--mx) var(--my),
    rgba(234, 250, 255, .9), rgba(180, 202, 255, .35) 28%, transparent 65%);
  -webkit-mask-image: url('../textures/foil-cosmos.svg');
  mask-image: url('../textures/foil-cosmos.svg');
  -webkit-mask-size: 360px 480px;
  mask-size: 360px 480px;
}

/* 4. Radiant: an etched diamond lattice catches a cooler, satin reflection. */
.card[data-foil="radiant"] {
  --foil-spectrum: repeating-linear-gradient(118deg,
    #009fe5 0%, #12e2d6 18%, #eec45c 36%, #9f60ff 54%,
    #07cadc 72%, #009fe5 90%);
}
.card[data-foil="radiant"] .card__shine {
  background-image: repeating-linear-gradient(132deg,
    #108aff, #0be8d5 15%, #9d50ff 30%, #ed52b7 45%, #20c9ff 60%, #108aff 75%);
  background-size: 190% 200%;
  background-position: calc(50% + (var(--foil-x) - 50%) * 3) calc(50% + (var(--foil-y) - 50%) * 2.4);
  opacity: calc(.12 + var(--light) * .76);
}
.card[data-foil="radiant"] .foil-layer {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(196, 225, 243, .3) 23px, transparent 24px 48px),
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(180, 207, 239, .24) 23px, transparent 24px 48px),
    var(--foil-spectrum);
  background-size: auto, auto, 260% 300%;
  background-position: center, center, var(--foil-x) var(--foil-y);
}
.card[data-foil="radiant"] .card__shine {
  -webkit-mask-image: url('../textures/foil-etched.svg'), var(--foil-window);
  mask-image: url('../textures/foil-etched.svg'), var(--foil-window);
  -webkit-mask-size: 96px 96px, 100% 100%;
  mask-size: 96px 96px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.card[data-foil="radiant"] .card__glare {
  background-image:
    repeating-linear-gradient(45deg, transparent 0%, rgba(175, 225, 245, .07) 10%,
      rgba(220, 243, 255, .45) 16%, rgba(179, 199, 245, .1) 22%, transparent 32%, transparent 50%),
    repeating-linear-gradient(135deg, transparent 0%, rgba(209, 192, 240, .08) 18%,
      rgba(225, 233, 255, .38) 24%, transparent 36%, transparent 58%);
  background-size: 240% 240%, 240% 240%;
  background-position:
    calc(50% + (var(--foil-x) - 50%) * 2) calc(50% + (var(--foil-y) - 50%) * 2),
    calc(50% - (var(--foil-x) - 50%) * 2) calc(50% - (var(--foil-y) - 50%) * 2);
  -webkit-mask-image: url('../textures/foil-etched.svg');
  mask-image: url('../textures/foil-etched.svg');
  -webkit-mask-size: 96px 96px;
  mask-size: 96px 96px;
  opacity: calc(var(--light) * .6);
}
.card:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
.card :is(a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.card__head { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.card__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.4;
  word-break: keep-all;
  color: var(--card-ink);
  text-shadow: 0 1px 3px rgba(7, 19, 44, .3);
  transition: color .2s ease;
}
.card__title:hover,
.card__summary:hover,
.details__list li:hover { color: var(--orange); }
.badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .4rem;
  padding: .3rem .65rem;
  border: 1px solid rgba(92, 201, 245, .28);
  border-radius: 7px;
  background: var(--card-control);
  color: var(--accent);
  font-size: .8rem;
  line-height: 1.6;
}
.badge i { font-size: .9rem; }
.card__summary { margin: 0; font-size: .95rem; line-height: 1.7; transition: color .2s ease; }
.meta { display: grid; gap: 10px; margin: 0; }
.meta__row { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; }
.meta__row dt { font-weight: 600; font-size: .85rem; }
.meta__row dd { margin: 0; font-size: .9rem; line-height: 1.7; }
.meta dt,
.meta dd,
.card__summary,
.details summary,
.details__list li { color: var(--card-ink); }
.card .gh-link { margin-right: .4rem; color: var(--accent); font-size: 1.1rem; }
.card .gh-link:hover { background: transparent; opacity: .8; }

.details summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .65rem;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--card-control);
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  transition: background .2s ease, border-color .2s ease;
}
.details summary::-webkit-details-marker { display: none; }
.details summary:hover,
.details[open] summary { background: rgba(155, 185, 223, .12); border-color: rgba(192, 211, 239, .4); }
.details summary i { transition: transform .2s ease; }
.details[open] summary i { transform: rotate(90deg); }
.card .details__list { padding: 0 0 0 .9rem; margin: .75rem 0 0; }
.details__list li { margin: .4rem 0; font-size: .95rem; line-height: 1.65; transition: color .2s ease; }
.card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
  text-align: left;
}
.card .btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  text-decoration: none;
  font-size: .95rem;
  background: var(--card-control);
  color: var(--card-ink);
  transition: background .2s ease, border-color .2s ease;
}
.card .btn:hover { background: rgba(92, 201, 245, .14); border-color: var(--accent); }
.btn i { font-size: 1rem; }

@media (max-width: 700px) {
  .home-projects .cards { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .card { padding: 24px; }
}

@media (max-width: 500px) {
  .card__title { font-size: 22px; }
  .card__summary,
  .details__list li { font-size: 15px; }
  .meta__row dt,
  .meta__row dd,
  .details summary,
  .card .btn { font-size: 14px; }
  .meta__row { grid-template-columns: 70px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .home-program-banner { transition: none; }
  .card { transform: none; }
  .card,
  .card *,
  .card::after { transition: none !important; }
}

[data-theme="dark"] .card {
  --surface-start: #0e1d34;
  --surface-middle: #081224;
  --surface-end: #101c31;
  --card-ink: #f2f2f2;
  --card-control: rgba(9, 19, 33, .55);
  --foil-blend: screen;
  --foil-opacity: .24;
  --grain-opacity: .9;
}
@media (max-width: 520px) {
  .home-program-banner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; }
  .skills-list > div { grid-template-columns: 1fr; gap: 2px; }
}