/* Tanvir's Creation — blue and white visual system */
:root {
  color-scheme: light;
  --blue: #315bff;
  --blue-deep: #1939c6;
  --blue-soft: #edf2ff;
  --blue-pale: #f7f9ff;
  --ink: #111a35;
  --muted: #63708a;
  --line: #dce4f5;
  --white: #fff;
  --page-width: 1160px;
  --radius: 24px;
  --shadow: 0 20px 60px rgb(30 64 175 / 10%);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  scroll-behavior: smooth;
  scroll-snap-type: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  line-height: 1.65;
  background: var(--white);
}

img { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--blue-deep); }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 4px; }

body > a:first-child {
  position: absolute;
  z-index: 10;
  top: 12px;
  left: 12px;
  padding: 8px 12px;
  transform: translateY(-160%);
  color: var(--white);
  background: var(--ink);
}
body > a:first-child:focus { transform: translateY(0); }

body > header,
body > footer,
main > section,
main > header,
main > p {
  width: min(var(--page-width), calc(100% - 48px));
  margin-inline: auto;
}

body > header {
  width: 100%;
  min-height: 82px;
  position: sticky;
  top: 0;
  z-index: 20;
  padding-inline: max(24px, calc((100vw - var(--page-width)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid rgb(220 228 245 / 85%);
  background: rgb(255 255 255 / 90%);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 28px rgb(25 57 198 / 5%);
}
body > header > a:first-child,
body > footer > a:first-child {
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.04em;
  text-decoration: none;
}
nav { display: flex; align-items: center; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--blue-pale); }
nav a { padding: 9px 17px; border-radius: 999px; color: var(--muted); font-size: .94rem; font-weight: 650; text-decoration: none; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
nav a:hover { color: var(--blue); background: var(--white); transform: translateY(-1px); }
nav a[aria-current="page"] { color: var(--blue); background: var(--white); box-shadow: 0 2px 10px rgb(30 64 175 / 12%); }
body > header > a:last-child,
main section[aria-labelledby="contact-title"] a:first-of-type {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 999px;
  color: var(--white);
  background: var(--blue);
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}
body > header > a:last-child:hover,
main section[aria-labelledby="contact-title"] a:first-of-type:hover {
  transform: translateY(-2px);
  background: var(--blue-deep);
  color: var(--white);
}

main > section, main > header { padding-block: 88px; }
main > section:first-child { padding-top: 100px; }
main > header { padding-bottom: 42px; }

h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.045em; }
h1 { max-width: 850px; margin-bottom: 24px; font-size: clamp(3.2rem, 8vw, 6.7rem); }
h2 { margin-bottom: 18px; font-size: clamp(2rem, 4.5vw, 3.5rem); }
h3 { margin-bottom: 10px; font-size: 1.25rem; }
p { color: var(--muted); }
main > section > p:first-child,
main > header > p:first-child {
  margin-bottom: 18px;
  color: var(--blue);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

main > section:first-child > p:not(:first-child),
main > header > p:not(:first-child) {
  max-width: 700px;
  font-size: clamp(1.08rem, 2vw, 1.28rem);
}
main > section:first-child > p a,
main section[aria-labelledby="hero-title"] > p a {
  display: inline-block;
  margin: 12px 12px 8px 0;
  padding: 12px 20px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
main > section:first-child > p a:first-child,
main section[aria-labelledby="hero-title"] > p a:first-child {
  color: var(--white);
  background: var(--blue);
}

figure {
  overflow: hidden;
  margin: 46px 0 0;
  border-radius: var(--radius);
  background: var(--blue-soft);
  box-shadow: var(--shadow);
}
figure img { width: 100%; max-height: 560px; object-fit: cover; }
figcaption { padding: 13px 18px; color: var(--muted); font-size: .9rem; }

main > section:nth-of-type(even) {
  position: relative;
}
main > section:nth-of-type(even)::before {
  position: absolute;
  z-index: -1;
  inset: 0 calc((min(var(--page-width), 100vw - 48px) - 100vw) / 2);
  background: var(--blue-pale);
  content: "";
}

ul { margin: 28px 0 0; padding: 0; list-style: none; }
main > section ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
main > section ul li {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
}
main > section ul li p { margin-bottom: 0; }

main > section:has(article) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}
main > section:has(article) > h2,
main > section:has(article) > p { grid-column: 1 / -1; }
article { min-width: 0; }
article a { color: var(--ink); text-decoration: none; }
article img {
  width: 100%;
  aspect-ratio: 8 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--blue-soft);
  transition: transform .3s ease, box-shadow .3s ease;
}
article a:hover img { transform: translateY(-5px); box-shadow: var(--shadow); }
article h2, article h3 { margin: 17px 0 5px; font-size: 1.25rem; }
article p { margin-bottom: 0; font-size: .92rem; }

main section[aria-labelledby="contact-title"] {
  padding: 64px;
  border-radius: var(--radius);
  background: var(--blue-soft);
}
main section[aria-labelledby="contact-title"] p { max-width: 650px; }
main section[aria-labelledby="contact-title"] a + a { margin-left: 12px; font-weight: 700; }

body > footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 24px;
  margin-top: 80px;
  padding-block: 28px;
  border-top: 1px solid var(--line);
}
body > footer p { margin: 0; font-size: .88rem; }
body > footer nav { grid-column: 2; grid-row: 1 / span 2; }

/* Scroll reveal: script.js adds .is-visible when each item enters the screen. */
.reveal-item {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 800ms cubic-bezier(.2,.7,.2,1), transform 800ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-item.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
  body > header { width: 100%; min-height: 72px; flex-wrap: wrap; gap: 10px 18px; padding: 12px 16px; }
  body > footer, main > section, main > header, main > p { width: min(100% - 32px, var(--page-width)); }
  body > header { min-height: 72px; flex-wrap: wrap; gap: 10px 18px; padding-block: 14px; }
  body > header nav { order: 3; width: 100%; justify-content: center; gap: 26px; }
  body > header > a:last-child { padding: 9px 15px; }
  main > section, main > header { padding-block: 62px; }
  main > section:first-child { padding-top: 72px; }
  main > section ul, main > section:has(article) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  main section[aria-labelledby="contact-title"] { padding: 36px 24px; }
  body > footer { grid-template-columns: 1fr; }
  body > footer nav { grid-column: 1; grid-row: auto; flex-wrap: wrap; }
}

@media (max-width: 520px) {
  h1 { font-size: clamp(2.8rem, 16vw, 4.4rem); }
  main > section ul, main > section:has(article) { grid-template-columns: 1fr; gap: 26px; }
  main > section ul li { padding: 23px; }
  main section[aria-labelledby="contact-title"] a + a { display: inline-block; margin: 16px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal-item { opacity: 1; transform: none; }
}
/* Small hover feedback across page content and interactive elements. */
main :is(h1, h2, h3, p, figure, article, li) {
  transition: color .22s ease, transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
main :is(h1, h2, h3, p):hover { color: var(--blue); transform: translateY(-2px); }
main :is(figure, article, li):hover {
  transform: translateY(-5px);
  border-color: rgb(49 91 255 / 35%);
  box-shadow: 0 14px 34px rgb(30 64 175 / 12%);
}
main img { transition: transform .35s ease, filter .35s ease; }
main img:hover { transform: scale(1.025); filter: saturate(1.08); }
main a { transition: color .2s ease, transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
main a:hover { color: var(--blue-deep); }
main article a:hover h2, main article a:hover h3 { color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  main :is(h1, h2, h3, p, figure, article, li), main img { transition: none; }
  main :is(h1, h2, h3, p):hover, main :is(figure, article, li):hover, main img:hover { transform: none; }
}
/* Refined portfolio presentation */
body { background: linear-gradient(180deg, #f8faff 0, #fff 460px); }
body > header { min-height: 88px; }
body > header > a:first-child { font-size: 1.2rem; }

main > section:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  align-items: center;
  gap: 12px 56px;
  width: min(var(--page-width), calc(100% - 48px));
  margin: 42px auto 0;
  padding: clamp(34px, 6vw, 76px);
  overflow: hidden;
  border: 1px solid #e1e9ff;
  border-radius: 32px;
  background: radial-gradient(ellipse at 92% 10%, rgb(49 91 255 / 12%), transparent 36%), linear-gradient(135deg, #fff 18%, #f2f6ff 100%);
  box-shadow: 0 28px 80px rgb(28 59 160 / 9%);
}
main > section:first-child > :not(figure) { grid-column: 1; }
main > section:first-child > figure { grid-column: 2; grid-row: 1 / span 8; align-self: stretch; min-height: 330px; margin: 0; border: 1px solid rgb(255 255 255 / 85%); box-shadow: 0 22px 55px rgb(30 64 175 / 16%); }
main > section:first-child > figure img { height: 100%; min-height: 330px; object-fit: cover; }
main > section:first-child h1 { font-size: clamp(3.1rem, 6.5vw, 5.6rem); }
main > section:first-child > p:not(:first-child) { margin-bottom: 4px; }

main > section:not(:first-child), main > header { padding-block: clamp(70px, 9vw, 112px); }
main > section:not(:first-child) > h2, main > header h1 { max-width: 780px; }
main > section:not(:first-child) > h2::after {
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 18px;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--blue), #87a0ff);
  content: "";
}
main > section:has(article) { align-items: start; }
main > section:has(article) > p:last-child { margin-top: 8px; }
main > section:has(article) > p:last-child a,
main > section:first-child > p a,
main section[aria-labelledby="contact-title"] a:first-of-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 22px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #315bff, #2448e8);
  box-shadow: 0 10px 22px rgb(49 91 255 / 23%);
  font-weight: 750;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
main > section:has(article) > p:last-child a:hover,
main > section:first-child > p a:hover,
main section[aria-labelledby="contact-title"] a:first-of-type:hover {
  color: #fff;
  transform: translateY(-3px);
  background: linear-gradient(135deg, #2448e8, #1939c6);
  box-shadow: 0 16px 30px rgb(49 91 255 / 30%);
}
main > section:first-child > p a + a { color: var(--blue); background: #fff; box-shadow: none; }
main > section:first-child > p a + a:hover { color: var(--blue-deep); background: #f3f6ff; }

main > section ul li, main > section article {
  padding: 14px;
  border: 1px solid #e5eaf5;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgb(20 38 90 / 4%);
}
main > section ul li { padding: 28px; }
main > section ul li h3::before {
  display: block;
  width: 34px;
  height: 4px;
  margin-bottom: 20px;
  border-radius: 4px;
  background: var(--blue);
  content: "";
}
main > section article img { border: 0; border-radius: 15px; }
main > section article h2, main > section article h3 { padding-inline: 5px; }
main > section article p { padding-inline: 5px; }
main > section article:hover { border-color: #c6d3ff; box-shadow: 0 22px 48px rgb(30 64 175 / 14%); }
main section[aria-labelledby="contact-title"] {
  border: 1px solid #dbe4ff;
  background: radial-gradient(ellipse at 100% 0%, rgb(49 91 255 / 16%), transparent 42%), linear-gradient(135deg, #f4f7ff, #eaf0ff);
  box-shadow: 0 22px 60px rgb(30 64 175 / 8%);
}
body > footer { margin-top: 46px; }

/* Graceful artwork placeholders until real project images are added. */
.image-fallback { position: relative; display: block; overflow: hidden; border-radius: 18px; }
article.image-fallback::before, article a.image-fallback::before, figure.image-fallback::before {
  display: grid;
  min-height: 0;
  aspect-ratio: 8 / 9;
  place-items: center;
  padding: 28px;
  color: #fff;
  background: radial-gradient(circle at 70% 30%, rgb(255 255 255 / 34%) 0 9%, transparent 10%), radial-gradient(circle at 32% 75%, rgb(137 169 255 / 70%) 0 13%, transparent 14%), linear-gradient(135deg, #12296e, #315bff 58%, #90a8ff);
  content: attr(data-preview-label);
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -.04em;
  text-align: center;
  text-shadow: 0 2px 18px rgb(10 24 76 / 32%);
}
figure.image-fallback::before { height: 100%; min-height: 330px; aspect-ratio: auto; }
.image-missing { display: none !important; }

@media (max-width: 760px) {
  main > section:first-child { width: min(100% - 32px, var(--page-width)); margin-top: 24px; grid-template-columns: 1fr; gap: 22px; padding: 30px 24px; border-radius: 25px; }
  main > section:first-child > figure { grid-column: 1; grid-row: auto; min-height: 250px; }
  main > section:first-child > figure img { min-height: 250px; }
  main > section:first-child > :not(figure) { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  main > section:first-child > p a, main > section:has(article) > p:last-child a { transition: none; }
}
/* Make both hero actions read as intentional buttons, including the secondary action. */
main > section:first-child > p a,
main > section:first-child > p a + a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 22px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgb(49 91 255 / 12%);
}
main > section:first-child > p a + a {
  color: var(--blue);
  background: #fff;
}
main > section:first-child > p a + a:hover {
  color: var(--blue-deep);
  transform: translateY(-3px);
  background: #f7f9ff;
  box-shadow: 0 14px 28px rgb(49 91 255 / 18%);
}
/* Secondary action in the About page contact panel. */
main section[aria-labelledby="contact-title"] a + a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-left: 12px;
  padding: 13px 22px;
  border: 1px solid #c8d5ff;
  border-radius: 999px;
  color: var(--blue);
  background: #fff;
  box-shadow: 0 8px 20px rgb(49 91 255 / 10%);
  font-weight: 750;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
main section[aria-labelledby="contact-title"] a + a:hover {
  color: var(--blue-deep);
  transform: translateY(-3px);
  background: #f7f9ff;
  box-shadow: 0 14px 28px rgb(49 91 255 / 18%);
}
/* Let project cards visibly lift above the scroll-reveal transform on hover/focus. */
main > section article.reveal-item {
  transform: translateY(0);
  transition: opacity 700ms ease, transform 420ms cubic-bezier(.2,.8,.2,1), box-shadow 420ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease;
  will-change: transform;
}
main > section article.reveal-item:hover,
main > section article.reveal-item:focus-within {
  z-index: 2;
  transform: translateY(-12px) scale(1.025);
  border-color: #a9bbff;
  box-shadow: 0 28px 56px rgb(30 64 175 / 20%);
}
main > section article.reveal-item:active { transform: translateY(-5px) scale(1.01); }
main > section article.reveal-item:hover img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  main > section article.reveal-item { transition: none; }
  main > section article.reveal-item:hover,
  main > section article.reveal-item:focus-within,
  main > section article.reveal-item:active { transform: none; }
}
/* Keep the initial below-screen position so the reveal transition runs on refresh. */
.reveal-item:not(.is-visible) {
  opacity: 0;
  transform: translate3d(var(--reveal-x, 0px), var(--reveal-y, 48px), 0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-item:not(.is-visible) { opacity: 1; transform: none; }
}
/* Blue accent rules grow on hover and return to their original size on pointer leave. */
main > section:not(:first-child) > h2::after {
  transition: width 360ms cubic-bezier(.2,.8,.2,1);
}
main > section:not(:first-child) > h2:hover::after,
main > section:not(:first-child) > h2:focus-visible::after {
  width: 104px;
}
main > section ul li h3::before {
  transition: width 360ms cubic-bezier(.2,.8,.2,1);
}
main > section ul li:hover h3::before,
main > section ul li:focus-within h3::before {
  width: 76px;
}
@media (prefers-reduced-motion: reduce) {
  main > section:not(:first-child) > h2::after,
  main > section ul li h3::before { transition: none; }
}

figcaption strong { color: var(--blue); font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }

/* Keep About contact actions aligned and equally sized on narrow screens. */
.about-contact > p:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin-top: 24px;
}
.about-contact > p:last-child a {
  display: inline-flex;
  flex: 1 1 180px;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 18px;
  text-align: center;
}
@media (max-width: 520px) {
  .about-contact > p:last-child { display: grid; grid-template-columns: 1fr; }
  .about-contact > p:last-child a { width: 100%; min-width: 0; }
}
figcaption span { display: block; margin-top: 5px; color: var(--muted); font-size: .88rem; line-height: 1.45; }
/* Keep About contact actions aligned, with copyable contact details below. */
.about-contact .contact-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 24px; }
.about-contact .contact-actions a { display: inline-flex; flex: 1 1 180px; align-items: center; justify-content: center; min-height: 50px; box-sizing: border-box; margin: 0; padding: 12px 18px; border: 1px solid transparent; border-radius: 999px; font-weight: 750; text-align: center; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.about-contact .contact-actions .contact-action-primary { color: #fff; background: var(--blue); border-color: var(--blue); box-shadow: 0 8px 20px rgb(49 91 255 / 18%); }
.about-contact .contact-actions .contact-action-primary:hover { color: #fff; transform: translateY(-3px); background: var(--blue-deep); box-shadow: 0 14px 28px rgb(49 91 255 / 26%); }
.about-contact .contact-actions .contact-action-secondary { color: var(--blue); background: #fff; border-color: #c8d5ff; box-shadow: 0 8px 20px rgb(49 91 255 / 10%); }
.about-contact .contact-actions .contact-action-secondary:hover { color: var(--blue-deep); transform: translateY(-3px); background: #f7f9ff; box-shadow: 0 14px 28px rgb(49 91 255 / 18%); }
.about-contact .contact-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin-top: 18px; }
.about-contact .contact-details p { margin: 0; color: var(--muted); font-size: .94rem; overflow-wrap: anywhere; }
.about-contact .contact-details strong { color: var(--ink); }
@media (max-width: 520px) {
  .about-contact .contact-actions { display: grid; grid-template-columns: 1fr; }
  .about-contact .contact-actions a { width: 100%; min-width: 0; }
  .about-contact .contact-details { grid-template-columns: 1fr; gap: 6px; }
}
/* Slightly open up bold typography without changing the visual hierarchy. */
h1, h2, h3 { letter-spacing: -.025em; }
strong, b, button, nav a, main > section:first-child > p a, .about-contact .contact-actions a { letter-spacing: .01em; }
body > header > a:first-child, body > footer > a:first-child { letter-spacing: -.02em; }
/* Mobile navigation feedback and smooth same-site page transitions. */
nav a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
nav a:focus:not(:focus-visible) { outline: none; }

/* Directional page entrance; the browser follows nav links immediately. */
html[data-page-entering="true"][data-page-direction="right"] body {
  animation: page-enter-from-right 440ms cubic-bezier(.22, .61, .36, 1) both;
}
html[data-page-entering="true"][data-page-direction="left"] body {
  animation: page-enter-from-left 440ms cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes page-enter-from-right {
  from { transform: translateX(6vw); opacity: .88; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes page-enter-from-left {
  from { transform: translateX(-6vw); opacity: .88; }
  to { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-page-entering="true"][data-page-direction] body { animation: none; }
}

/* On desktop, portfolio cards enter the viewport from alternating directions. */
@media (min-width: 761px) {
  main > section article.reveal-item[data-reveal-direction="left"] { --reveal-x: -48px; --reveal-y: 0px; }
  main > section article.reveal-item[data-reveal-direction="top"] { --reveal-x: 0px; --reveal-y: -42px; }
  main > section article.reveal-item[data-reveal-direction="right"] { --reveal-x: 48px; --reveal-y: 0px; }
  main > section article.reveal-item[data-reveal-direction="bottom"] { --reveal-x: 0px; --reveal-y: 48px; }
}

/* Give desktop project cards a clear, directional entrance as the observer reveals them. */
@media (min-width: 761px) {
  main > section article.reveal-item.is-visible[data-reveal-direction="left"]:not(.reveal-done) { animation: card-reveal-from-left 720ms cubic-bezier(.2, .7, .2, 1) both; }
  main > section article.reveal-item.is-visible[data-reveal-direction="top"]:not(.reveal-done) { animation: card-reveal-from-top 720ms cubic-bezier(.2, .7, .2, 1) both; }
  main > section article.reveal-item.is-visible[data-reveal-direction="right"]:not(.reveal-done) { animation: card-reveal-from-right 720ms cubic-bezier(.2, .7, .2, 1) both; }
  main > section article.reveal-item.is-visible[data-reveal-direction="bottom"]:not(.reveal-done) { animation: card-reveal-from-bottom 720ms cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes card-reveal-from-left { from { opacity: 0; transform: translate3d(-78px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes card-reveal-from-top { from { opacity: 0; transform: translate3d(0, -68px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes card-reveal-from-right { from { opacity: 0; transform: translate3d(78px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes card-reveal-from-bottom { from { opacity: 0; transform: translate3d(0, 68px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  main > section article.reveal-item.is-visible[data-reveal-direction] { animation: none; }
}

/* Theme control */
.theme-toggle {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
  margin: 0 4px; border: 1px solid var(--line); border-radius: 50%;
  color: var(--blue); background: var(--white); font: inherit; font-size: 1.25rem;
  cursor: pointer; transition: transform .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.theme-toggle:hover { transform: rotate(-12deg) scale(1.08); box-shadow: 0 6px 18px rgb(49 91 255 / 18%); }
.theme-toggle:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* WhatsApp project inquiry */
.project-inquiry { margin-block: 30px 80px; padding: clamp(25px, 5vw, 58px); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, var(--blue-pale), var(--blue-soft)); box-shadow: var(--shadow); }
.project-inquiry > p:first-child { margin-bottom: 10px; color: var(--blue); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.project-inquiry > h2 { margin-bottom: 12px; }
.project-inquiry > p:nth-of-type(2) { max-width: 720px; }
.project-inquiry form { margin-top: 28px; }
.inquiry-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.inquiry-fields label { display: flex; flex-direction: column; gap: 8px; color: var(--ink); font-size: .94rem; font-weight: 700; }
.inquiry-fields label span, .inquiry-fields small { color: var(--muted); font-size: .82rem; font-weight: 400; }
.inquiry-fields input, .inquiry-fields select, .inquiry-fields textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--white); font: inherit; font-size: .96rem; }
.inquiry-fields textarea { min-height: 132px; resize: vertical; }
.inquiry-fields input:focus, .inquiry-fields select:focus, .inquiry-fields textarea:focus { border-color: var(--blue); outline: 3px solid rgb(49 91 255 / 15%); }
.inquiry-fields input[type="file"] { padding: 9px; }
.inquiry-fields input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 0; border-radius: 8px; color: var(--blue); background: var(--blue-soft); font: inherit; cursor: pointer; }
.inquiry-details, .inquiry-file { grid-column: 1 / -1; }
.inquiry-submit { margin-top: 22px; padding: 13px 22px; border: 0; border-radius: 999px; color: #fff; background: var(--blue); font: inherit; font-weight: 750; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.inquiry-submit:hover { transform: translateY(-2px); background: var(--blue-deep); box-shadow: 0 10px 24px rgb(49 91 255 / 22%); }
.inquiry-status { min-height: 1.5em; margin: 12px 0 0; }

/* Dark mode is opt-in; the existing blue and white presentation stays default. */
:root[data-theme="dark"] { color-scheme: dark; --ink: #edf3ff; --muted: #aab8d2; --line: #293b60; --blue-soft: #152340; --blue-pale: #101a30; --shadow: 0 20px 60px rgb(0 0 0 / 28%); background: #0c1424; }
:root[data-theme="dark"] body { background: linear-gradient(180deg, #101a30 0, #0c1424 520px); }
:root[data-theme="dark"] body > header { border-color: var(--line); background: rgb(12 20 36 / 91%); box-shadow: 0 8px 28px rgb(0 0 0 / 18%); }
:root[data-theme="dark"] nav { background: #111d33; }
:root[data-theme="dark"] nav a:hover, :root[data-theme="dark"] nav a[aria-current="page"] { background: #1b2d4d; box-shadow: 0 2px 10px rgb(0 0 0 / 20%); }
:root[data-theme="dark"] main > section:nth-of-type(even)::before { background: #101a30; }
:root[data-theme="dark"] main > section ul li, :root[data-theme="dark"] article img { background: #111d33; }
:root[data-theme="dark"] article a { color: var(--ink); }
:root[data-theme="dark"] .about-contact .contact-actions .contact-action-secondary { color: #c5d3ff; background: #111d33; border-color: var(--line); }
:root[data-theme="dark"] .about-contact .contact-actions .contact-action-secondary:hover { color: #fff; background: #1b2d4d; }
:root[data-theme="dark"] .project-inquiry { background: linear-gradient(145deg, #101a30, #152340); }
:root[data-theme="dark"] .inquiry-fields input, :root[data-theme="dark"] .inquiry-fields select, :root[data-theme="dark"] .inquiry-fields textarea { border-color: #34496f; background: #0c1424; }
:root[data-theme="dark"] .inquiry-fields input[type="file"]::file-selector-button { color: #dce6ff; background: #1b2d4d; }
:root[data-theme="dark"] .theme-toggle { color: #f3cb67; background: #152340; border-color: #34496f; }

@media (max-width: 760px) {
  .inquiry-fields { grid-template-columns: 1fr; gap: 16px; }
  .inquiry-details, .inquiry-file { grid-column: auto; }
  .theme-toggle { width: 38px; height: 38px; flex-basis: 38px; margin-inline: 0; }
}
:root[data-theme="dark"] body { background: linear-gradient(180deg, #101a30 0, #0c1424 460px); }
:root[data-theme="dark"] main > section:first-child { border-color: #293b60; background: radial-gradient(ellipse at 92% 10%, rgb(49 91 255 / 18%), transparent 36%), linear-gradient(135deg, #111d33 18%, #152340 100%); box-shadow: 0 28px 80px rgb(0 0 0 / 22%); }
:root[data-theme="dark"] main > section:first-child > figure { border-color: #293b60; }
:root[data-theme="dark"] main > section ul li, :root[data-theme="dark"] main > section article { border-color: #293b60; background: #111d33; }
:root[data-theme="dark"] main section[aria-labelledby="contact-title"] { border-color: #293b60; background: radial-gradient(ellipse at 100% 0%, rgb(49 91 255 / 18%), transparent 42%), linear-gradient(135deg, #111d33, #152340); }
:root[data-theme="dark"] main > section:first-child > p a + a { color: #d8e2ff; background: #172746; }
:root[data-theme="dark"] main > section:first-child > p a + a:hover { color: #fff; background: #21365d; }
:root[data-theme="dark"] main section[aria-labelledby="contact-title"] a + a { color: #d8e2ff; background: #172746; border-color: #34496f; }
:root[data-theme="dark"] main section[aria-labelledby="contact-title"] a + a:hover { color: #fff; background: #21365d; }

/* Keep mobile page changes immediate and reliable; desktop transitions stay unchanged. */
@media (max-width: 760px) {
  html[data-page-entering="true"][data-page-direction] body { animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* First-visit TC loader */
.site-preloader { position: fixed; z-index: 10000; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--ink); background: var(--white); opacity: 1; visibility: visible; transition: opacity .28s ease, visibility .28s ease; }
.site-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-mark { display: grid; width: 70px; height: 70px; place-items: center; border-radius: 21px; color: #fff; background: linear-gradient(145deg, #315bff, #1939c6); box-shadow: 0 12px 32px rgb(49 91 255 / 25%); font-size: 1.6rem; font-weight: 850; letter-spacing: -.08em; animation: tc-mark-pulse 900ms ease-in-out infinite alternate; }
.site-preloader > span { font-size: .9rem; font-weight: 750; letter-spacing: .02em; }
.site-preloader > i { width: 44px; height: 3px; overflow: hidden; border-radius: 4px; background: var(--blue-soft); }
.site-preloader > i::after { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--blue); content: ""; animation: tc-loader-sweep 800ms ease-in-out infinite alternate; }
@keyframes tc-mark-pulse { to { transform: translateY(-4px); box-shadow: 0 17px 36px rgb(49 91 255 / 32%); } }
@keyframes tc-loader-sweep { to { transform: translateX(150%); } }
:root[data-theme="dark"] .site-preloader { color: var(--ink); background: #0c1424; }

/* Clickable artwork frames and fullscreen portfolio lightbox */
.portfolio-grid article { overflow: hidden; }
.portfolio-preview { display: block; width: 100%; padding: 0; border: 0; border-radius: 17px; background: transparent; text-align: left; cursor: zoom-in; }
.portfolio-preview img { width: 100%; aspect-ratio: 8 / 9; object-fit: cover; transition: transform .38s cubic-bezier(.2,.8,.2,1), filter .38s ease; }
.portfolio-grid article:hover .portfolio-preview img { transform: scale(1.035); filter: saturate(1.08); }
.project-title { display: block; padding: 0 5px; color: var(--ink); text-decoration: none; }
.project-title h2 { margin: 16px 0 4px; font-size: 1.22rem; }
.project-title:hover { color: var(--blue); }
.portfolio-preview:focus-visible, .project-title:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.portfolio-lightbox { width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: min(92dvh, 1000px); padding: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: var(--white); box-shadow: 0 30px 100px rgb(0 0 0 / 34%); }
.portfolio-lightbox::backdrop { background: rgb(5 12 28 / 84%); backdrop-filter: blur(5px); }
.lightbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 2px 12px; }
.lightbox-title { margin: 0; color: var(--ink); font-weight: 750; }
.lightbox-controls { display: flex; gap: 8px; }
.lightbox-controls button { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--blue-pale); font: inherit; font-size: 1.45rem; cursor: pointer; transition: transform .18s ease, color .18s ease, background .18s ease; }
.lightbox-controls button:hover { transform: translateY(-2px); color: #fff; background: var(--blue); }
.lightbox-stage { display: grid; max-height: calc(92dvh - 105px); min-height: 220px; place-items: center; overflow: auto; border-radius: 12px; background: #f2f5fb; }
.lightbox-image { display: block; max-width: 100%; max-height: calc(92dvh - 150px); object-fit: contain; cursor: zoom-in; transition: width .2s ease; }
.lightbox-image.is-zoomed { width: min(160vw, 1800px); max-width: none; max-height: none; cursor: zoom-out; }
.lightbox-help { margin: 9px 2px 0; color: var(--muted); font-size: .78rem; text-align: center; }
:root[data-theme="dark"] .lightbox-stage { background: #09111f; }
@media (max-width: 600px) {
  .portfolio-lightbox { width: calc(100vw - 16px); max-height: 94dvh; padding: 9px; border-radius: 15px; }
  .lightbox-toolbar { gap: 8px; }
  .lightbox-controls { gap: 5px; }
  .lightbox-controls button { width: 38px; height: 38px; }
  .lightbox-stage { max-height: calc(94dvh - 100px); min-height: 180px; }
  .lightbox-image { max-height: calc(94dvh - 145px); }
  .lightbox-help { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-preloader, .preloader-mark, .site-preloader > i::after, .portfolio-preview img, .lightbox-controls button { animation: none !important; transition: none !important; }
}

/* Keyboard-only skip link with clear branded styling. */
.skip-link { position: fixed; z-index: 10001; top: 12px; left: 12px; padding: 10px 16px; border: 1px solid rgb(255 255 255 / 70%); border-radius: 999px; color: #fff !important; background: var(--blue); box-shadow: 0 10px 26px rgb(25 57 198 / 24%); font-size: .9rem; font-weight: 750; text-decoration: none; transform: translateY(calc(-100% - 20px)); transition: transform .2s ease; }
.skip-link:focus-visible { outline: 3px solid #9eb5ff; outline-offset: 3px; transform: translateY(0); }

/* TC logo intro: two-letter reveal, gentle settle, and a blue-white light sweep. */
.preloader-mark { position: relative; display: flex; gap: 1px; overflow: hidden; animation: tc-logo-intro 920ms cubic-bezier(.18,.75,.22,1) both; }
.preloader-mark span { position: relative; z-index: 1; display: inline-block; animation: tc-letter-rise 620ms cubic-bezier(.18,.75,.22,1) both; }
.preloader-mark span:nth-child(2) { animation-delay: 130ms; }
.preloader-mark > i { position: absolute; z-index: 2; top: -35%; left: -45%; width: 42%; height: 175%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 68%), transparent); transform: rotate(28deg) translateX(-250%); animation: tc-logo-shine 850ms 320ms ease-out both; }
@keyframes tc-logo-intro { 0% { opacity: 0; transform: translateY(14px) scale(.78) rotate(-7deg); } 68% { opacity: 1; transform: translateY(-3px) scale(1.04) rotate(1deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes tc-letter-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tc-logo-shine { to { transform: rotate(28deg) translateX(520%); } }

/* Keep the browser's regular pointer; hover lift and image color response remain. */
.portfolio-preview { cursor: pointer; }


/* Stable centered TC mark; only the badge moves during the short intro. */
.preloader-mark { display: grid; place-items: center; gap: 0; animation: tc-logo-intro 900ms cubic-bezier(.18,.75,.22,1) both; }
.preloader-mark span { position: relative; z-index: 1; display: block; opacity: 1; transform: none; animation: none; line-height: 1; letter-spacing: -.09em; }
.preloader-mark > i { position: absolute; inset: 0; width: auto; height: auto; left: -100%; background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 60%) 50%, transparent 65%); transform: none; animation: tc-logo-shine 720ms 280ms ease-out both; }
@keyframes tc-logo-intro { 0% { opacity: 0; transform: scale(.84); } 65% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
@keyframes tc-logo-shine { to { left: 100%; } }
.lightbox-stage { position: relative; }
.lightbox-error { margin: 24px; padding: 16px; border: 1px solid #f4b2b2; border-radius: 12px; color: #9f2525; background: #fff3f3; text-align: center; }
.lightbox-image[hidden], .lightbox-error[hidden] { display: none !important; }

/* Reliable custom fullscreen overlay, independent of native <dialog> support. */
.portfolio-lightbox { position: fixed; inset: 0; z-index: 10020; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 22px; overflow: hidden; border: 0; border-radius: 0; color: #fff; background: rgb(5 12 28 / 90%); backdrop-filter: blur(5px); }
.portfolio-lightbox[hidden] { display: none !important; }
body.lightbox-open { overflow: hidden; }
.portfolio-lightbox .lightbox-toolbar, .portfolio-lightbox .lightbox-stage { width: min(1100px, 100%); }
.portfolio-lightbox .lightbox-title, .portfolio-lightbox .lightbox-help { color: #fff; }
.portfolio-lightbox .lightbox-stage { flex: 0 1 auto; height: min(78dvh, 820px); max-height: calc(100dvh - 115px); }
.portfolio-title-preview { display: block; width: 100%; padding: 0 5px; border: 0; color: var(--ink); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.portfolio-title-preview:hover { color: var(--blue); }
.portfolio-title-preview:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
@media (max-width: 600px) {
  .portfolio-lightbox { padding: 9px; }
  .portfolio-lightbox .lightbox-stage { height: min(78dvh, 720px); max-height: calc(100dvh - 105px); }
}

/* Range and button zoom controls, with the image anchored at the pointer position. */
.portfolio-lightbox .lightbox-controls { align-items: center; flex-wrap: nowrap; }
.portfolio-lightbox .lightbox-zoom-slider { width: clamp(76px, 10vw, 132px); margin: 0 2px; accent-color: #6584ff; cursor: ew-resize; }
.portfolio-lightbox .lightbox-stage { position: relative; display: block; overflow: auto; }
.portfolio-lightbox .lightbox-image { position: absolute; max-width: none; max-height: none; object-fit: contain; cursor: default; transition: none; user-select: none; -webkit-user-drag: none; }
.portfolio-lightbox .lightbox-image.is-zoomed { cursor: grab; }
.portfolio-lightbox .lightbox-stage { touch-action: none; }
.portfolio-lightbox .lightbox-stage.is-panning, .portfolio-lightbox .lightbox-stage.is-panning .lightbox-image { cursor: grabbing; }
.portfolio-lightbox .lightbox-error { position: absolute; inset: 50% auto auto 50%; width: min(460px, calc(100% - 32px)); transform: translate(-50%, -50%); }
@media (max-width: 600px) {
  .portfolio-lightbox .lightbox-zoom-slider { width: 70px; }
  .portfolio-lightbox .lightbox-controls button { width: 34px; height: 34px; font-size: 1.25rem; }
}
.portfolio-lightbox .lightbox-zoom-value { min-width: 42px; color: #fff; font-size: .78rem; font-variant-numeric: tabular-nums; text-align: center; }

/* Reading progress and back-to-top */
.back-to-top { position: fixed; z-index: 35; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid rgb(255 255 255 / 65%); border-radius: 999px; color: #fff; background: var(--blue); box-shadow: 0 10px 26px rgb(25 57 198 / 24%); font: inherit; font-size: .86rem; font-weight: 750; cursor: pointer; opacity: 1; transform: translateY(0); transition: opacity .2s ease, transform .2s ease, background .2s ease; }
.back-to-top[hidden] { display: none !important; }
.back-to-top:hover { background: var(--blue-deep); transform: translateY(-3px); }
.back-to-top > span { font-size: 1.2rem; line-height: 1; }
.easter-egg-toast { position: fixed; z-index: 10002; left: 50%; bottom: 26px; max-width: calc(100vw - 32px); padding: 12px 18px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 999px; color: #fff; background: #14254b; box-shadow: 0 12px 32px rgb(6 15 35 / 28%); font-size: .9rem; font-weight: 650; opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: opacity .25s ease, transform .25s ease; }
.easter-egg-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Branded Cloudflare Pages 404 */
body.error-body { min-height: 100vh; display: flex; flex-direction: column; }
body.error-body .error-page { flex: 1; display: grid; place-items: center; padding-block: 48px; }
body.error-body .error-card { display: block; width: min(850px, 100%); margin: 0; padding: clamp(32px, 7vw, 76px); border: 1px solid var(--line); border-radius: 30px; background: radial-gradient(ellipse at 50% 32%, rgb(49 91 255 / 12%), transparent 42%), linear-gradient(145deg, var(--blue-pale), var(--white)); box-shadow: var(--shadow); text-align: center; }
.error-art { position: relative; display: flex; justify-content: center; align-items: center; gap: .02em; margin: 0 auto 22px; color: var(--blue); font-size: clamp(7rem, 25vw, 13rem); font-weight: 900; letter-spacing: -.1em; line-height: .85; }
.error-art::before { position: absolute; z-index: 0; width: .72em; height: .72em; border-radius: 50%; background: radial-gradient(circle, rgb(108 161 255 / 42%), rgb(49 91 255 / 5%) 70%, transparent 72%); content: ""; }
.error-art span { position: relative; z-index: 1; background: linear-gradient(145deg, #1939c6, #5d8dff); background-clip: text; -webkit-text-fill-color: transparent; }
.error-art i { position: absolute; top: 50%; left: 50%; width: min(340px, 70%); height: 1px; background: linear-gradient(90deg, transparent, rgb(49 91 255 / 35%), transparent); transform: translate(-50%,-50%); }
.error-card > p:first-of-type { margin: 0 0 12px; color: var(--blue); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.error-card h1 { max-width: none; margin: 0 auto 14px; font-size: clamp(2.1rem, 5vw, 3.8rem); }
.error-card > p:last-of-type { max-width: 520px; margin: 0 auto; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.error-actions a { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 11px 20px; border: 1px solid var(--blue); border-radius: 999px; color: #fff; background: var(--blue); font-weight: 750; text-decoration: none; }
.error-actions a + a { color: var(--blue); background: var(--white); }
.error-actions a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
:root[data-theme="dark"] body.error-body .error-card { background: radial-gradient(ellipse at 50% 32%, rgb(49 91 255 / 20%), transparent 42%), linear-gradient(145deg, #111d33, #152340); }
:root[data-theme="dark"] .error-actions a + a { color: #d8e2ff; background: #172746; border-color: #34496f; }
@media (max-width: 600px) { .back-to-top { right: 16px; bottom: 16px; padding: 10px 13px; } body.error-body .error-card { padding: 34px 22px; } }
@media (prefers-reduced-motion: reduce) { .back-to-top, .easter-egg-toast { transition: none; } }
@media (max-width: 900px) {
  .back-to-top { right: 12px; bottom: 14px; }
}

/* Soft matte-glass surfaces keep the blue-white palette light and calm. */
body > header {
  background: rgb(255 255 255 / 78%);
  border-bottom-color: rgb(220 228 245 / 72%);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}
body > header nav {
  background: rgb(247 249 255 / 70%);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
main > section ul li,
main > section article {
  background: rgb(255 255 255 / 78%);
  border-color: rgb(220 228 245 / 78%);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}
:root[data-theme="dark"] body > header {
  background: rgb(12 20 36 / 80%);
  border-bottom-color: rgb(41 59 96 / 78%);
}
:root[data-theme="dark"] body > header nav {
  background: rgb(17 29 51 / 78%);
}
:root[data-theme="dark"] main > section ul li,
:root[data-theme="dark"] main > section article {
  background: rgb(17 29 51 / 82%);
  border-color: rgb(41 59 96 / 82%);
}
/* Borderless social links in the footer. */
.footer-social { display: flex; align-items: center; gap: 12px; min-height: 38px; }
.footer-social a { display: inline-grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 0; color: var(--ink); background: transparent; text-decoration: none; transition: color .18s ease, transform .18s ease; }
.footer-social a:hover { color: var(--blue); background: transparent; transform: translateY(-2px); }
.footer-social svg { display: block; width: 21px; height: 21px; fill: currentColor; }
/* Home featured work cards sit inside a wrapper, so give that wrapper its own responsive grid. */
main > section:has(article) > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}
@media (max-width: 760px) {
  main > section:has(article) > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 520px) {
  main > section:has(article) > div { grid-template-columns: 1fr; gap: 26px; }
}