/* ------------------------------------------------------------------
   SHUBHAMOS enhancement layer
   Additive only: nothing here overrides a layout or reveal animation.
   It adds hover polish, a pointer spotlight and a few details, all in
   the theme's own palette and easing.
   ------------------------------------------------------------------ */

:root {
  --shub-ink: #090909;
  --shub-cream: #ebeae4;
  --shub-sand: #eee9d1;
  /* taken from the theme so the enhancement layer never drifts off-palette */
  --shub-accent: #66780c;
  --shub-accent-2: #4d5c04;
  --shub-line: rgba(235, 234, 228, 0.14);
  --shub-ease: cubic-bezier(0.496, 0.004, 0, 1);
  --shub-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html.is-enhanced,
html.is-enhanced .main-content-wrapper {
  scrollbar-color: var(--shub-accent) var(--shub-ink);
  scrollbar-width: thin;
}
html.is-enhanced::-webkit-scrollbar,
html.is-enhanced .main-content-wrapper::-webkit-scrollbar { width: 10px; height: 10px; }
html.is-enhanced::-webkit-scrollbar-track,
html.is-enhanced .main-content-wrapper::-webkit-scrollbar-track { background: var(--shub-ink); }
html.is-enhanced::-webkit-scrollbar-thumb,
html.is-enhanced .main-content-wrapper::-webkit-scrollbar-thumb {
  background: var(--shub-accent);
  border: 3px solid var(--shub-ink);
}
html.is-enhanced::-webkit-scrollbar-thumb:hover,
html.is-enhanced .main-content-wrapper::-webkit-scrollbar-thumb:hover { background: var(--shub-accent-2); }

html.is-enhanced :focus-visible {
  outline: 2px solid var(--shub-accent);
  outline-offset: 4px;
}

/* --- hero media: slow push-in, stands in for the missing reel ------ */
.section-hero-banner .media-wrapper > .t-ma {
  animation: shub-kenburns 26s var(--shub-ease) infinite alternate;
  will-change: transform;
}
@keyframes shub-kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1.6%, 0); }
}

/* --- cards: never fade the still out when there is no hover reel ---- */
.t-card:not(:has(.t-card-hover-media)) .t-card-featured-image-wrapper {
  opacity: 1 !important;
}

/* --- cards: pointer spotlight --------------------------------------- */
.t-card { --shub-mx: 50%; --shub-my: 50%; }

.t-card .t-card-media-wrapper,
.list-all-break .t-card-media,
.list-curated-work .t-card-media { position: relative; }

.t-card .t-card-featured-image-wrapper::after,
.list-all-break .t-card-media::after,
.list-curated-work .t-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s var(--shub-ease);
  background: radial-gradient(26vmax circle at var(--shub-mx) var(--shub-my),
    rgba(238,233,209,0.22), rgba(176,91,59,0.12) 42%, rgba(9,9,9,0) 68%);
  mix-blend-mode: soft-light;
}
.t-card:hover .t-card-featured-image-wrapper::after,
.list-all-break .t-card:hover .t-card-media::after,
.list-curated-work .t-card:hover .t-card-media::after { opacity: 1; }

/* --- cards: gentle zoom + lift -------------------------------------- */
.t-card .t-card-featured-image {
  transition: transform 1.1s var(--shub-ease) !important;
  will-change: transform;
}
.list-work .t-card:hover .t-card-featured-image,
.list-curated-work .t-card:hover .t-card-featured-image,
.list-all-break .t-card:hover .t-card-featured-image { filter: brightness(1.08) saturate(1.08); }

.list-work .t-card .t-card-intro {
  transition: transform 0.9s var(--shub-ease) !important;
}

/* --- break list rows: accent underline sweep ------------------------ */
.list-break .t-card-link {
  position: relative;
  background-image: linear-gradient(var(--shub-accent), var(--shub-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.8s var(--shub-ease), color 0.5s var(--shub-ease-out);
}
.list-break .t-card:hover .t-card-link {
  background-size: 100% 1px;
  color: var(--shub-accent);
}

/* --- CTA shine sweep ------------------------------------------------- */
.btn-cta { position: relative; overflow: hidden; isolation: isolate; }
.btn-cta::after {
  content: "";
  position: absolute;
  inset: -40% -10%;
  z-index: -1;
  background: linear-gradient(100deg, rgba(235,234,228,0) 38%,
    rgba(238,233,209,0.32) 50%, rgba(235,234,228,0) 62%);
  transform: translate3d(-120%, 0, 0) rotate(6deg);
  transition: transform 1.1s var(--shub-ease-out);
  pointer-events: none;
}
.btn-cta:hover::after,
.btn-cta:focus-visible::after { transform: translate3d(120%, 0, 0) rotate(6deg); }

/* --- external links get a quiet arrow ------------------------------- */
a[target="_blank"] .t-card-title::after,
a[target="_blank"] .t-card-cert-name::after {
  content: " \2197";
  font-size: 0.7em;
  vertical-align: super;
  opacity: 0.5;
  transition: opacity 0.4s var(--shub-ease-out);
}
a[target="_blank"]:hover .t-card-title::after,
a[target="_blank"]:hover .t-card-cert-name::after { opacity: 1; }

/* --- bio links ------------------------------------------------------- */
.section-about-banner .t-body a {
  border-bottom: 1px solid var(--shub-accent);
  text-decoration: none;
  transition: color 0.4s var(--shub-ease-out), border-color 0.4s var(--shub-ease-out);
}
.section-about-banner .t-body a:hover { color: var(--shub-accent); border-color: var(--shub-sand); }

.t-card .t-card-featured-image,
.list-all-break .t-card-featured-image {
  image-rendering: auto;
  backface-visibility: hidden;
}

/* --- no cropped artwork ---------------------------------------------
   The theme hard-codes square/fixed media boxes that were sized for the
   previous art direction. Every image here is a different ratio, so those
   boxes were slicing off most of the picture. Let the box take its shape
   from the artwork instead: 16/9 for the project covers, 4/3 for the
   certificate screenshots. ---------------------------------------------------- */
.list-all-break .t-card,
.list-curated-work .t-card { height: auto !important; }

.list-all-break .t-card-media,
.list-curated-work .t-card-media { height: auto; }

.list-all-break .t-card-featured-image-wrapper,
.list-all-break .t-card-hover-media,
.list-curated-work .t-card-featured-image-wrapper,
.list-curated-work .t-card-hover-media,
.list-curated-work .t-card-hover-media-wrapper {
  aspect-ratio: 16 / 9;
  height: auto !important;
  width: 100% !important;
}

.list-work .t-card .t-card-media-wrapper,
.list-work .t-card:nth-child(3n + 1) .t-card-media-wrapper,
.list-work .t-card:nth-child(3n + 2) .t-card-media-wrapper,
.list-work .t-card:nth-child(3n + 3) .t-card-media-wrapper {
  aspect-ratio: 16 / 9;
  height: auto !important;
}
.list-work .t-card .t-card-featured-image-wrapper,
.list-work .t-card .t-card-hover-media-wrapper { height: 100%; }

/* certificate screenshots are 4:3 - never slice off the credential text */
.list-curated-work .t-card-featured-image-wrapper,
.list-curated-work .t-card-hover-media,
.list-curated-work .t-card-hover-media-wrapper { aspect-ratio: 4 / 3; }

/* the big transition stills fly over the hero at a fixed box */
.transition-break .t-media,
.transition-project .t-media {
  aspect-ratio: 16 / 9;
  height: auto !important;
}

/* let a stretched fill read as deliberate rather than as a broken crop */
.t-card-featured-image,
.t-media img,
.hg-1 img,
.media-image img { object-fit: cover; }

/* --- reduced motion: switch off everything this file adds ----------- */
@media (prefers-reduced-motion: reduce) {
  .section-hero-banner .media-wrapper > .t-ma { animation: none; }
  .t-card .t-card-featured-image { transition: none !important; transform: none !important; }
  .t-card .t-card-featured-image-wrapper::after,
  .list-all-break .t-card-media::after,
  .list-curated-work .t-card-media::after { display: none; }
  .btn-cta::after { display: none; }
  .list-break .t-card-link { transition: none; }
}

/* ==================================================================
   LinkedIn certifications section  (works page)
   ================================================================== */
.shub-certs {
  background: var(--shub-ink);
  color: var(--shub-cream);
  font-family: Manrope, sans-serif;
  font-weight: 700;
  padding: calc(120 / var(--base-size) * var(--base-vw)) calc(30 / var(--base-size) * var(--base-vw));
  position: relative;
}
.shub-certs__inner { margin: 0 auto; max-width: 1440px; }

.shub-eyebrow {
  color: var(--shub-accent);
  display: block;
  font-size: 12px;
  letter-spacing: 0.32em;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.shub-certs__title {
  color: var(--shub-cream);
  font-family: mg, Manrope, sans-serif;
  font-size: clamp(40px, 6.4vw, 104px);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 0.88;
  margin: 0 0 28px;
  text-transform: uppercase;
}
.shub-certs__lede {
  color: rgba(235, 234, 228, 0.66);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 500;
  line-height: 1.65;
  margin: 0 0 34px;
  max-width: 62ch;
}

.shub-btn {
  align-items: center;
  border: 1px solid var(--shub-accent);
  border-radius: 999px;
  color: var(--shub-cream);
  display: inline-flex;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  padding: 14px 26px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.45s var(--shub-ease-out), border-color 0.45s var(--shub-ease-out);
}
.shub-btn::after {
  content: "\2197";
  font-size: 14px;
  transition: transform 0.45s var(--shub-ease-out);
}
.shub-btn:hover { background: var(--shub-accent); border-color: var(--shub-accent); color: var(--shub-cream); }
.shub-btn:hover::after { transform: translate(3px, -3px); }

/* --- grid ------------------------------------------------------------ */
.shub-cert-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
}

.shub-cert {
  --mx: 50%;
  --my: 50%;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--shub-ease-out), transform 0.9s var(--shub-ease-out);
}
.shub-cert.is-in { opacity: 1; transform: none; }

.shub-cert__btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--shub-line);
  border-radius: 14px;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  height: 100%;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: border-color 0.6s var(--shub-ease-out), transform 0.6s var(--shub-ease-out),
    box-shadow 0.6s var(--shub-ease-out);
  width: 100%;
}
.shub-cert__btn:hover,
.shub-cert__btn:focus-visible {
  border-color: rgba(102, 120, 12, 0.75);
  box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.95);
  transform: translateY(-7px);
}

/* certificate artwork: never cropped, never upscaled past native size */
.shub-cert__shot {
  align-items: center;
  aspect-ratio: 4 / 3;
  background: #000;
  border-bottom: 1px solid var(--shub-line);
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 16px;
  position: relative;
}
.shub-cert__shot::after {
  background: radial-gradient(24vmax circle at var(--mx) var(--my),
    rgba(238, 233, 209, 0.16), rgba(102, 120, 12, 0.1) 45%, rgba(9, 9, 9, 0) 70%);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.6s var(--shub-ease-out);
}
.shub-cert__btn:hover .shub-cert__shot::after { opacity: 1; }
.shub-cert__shot img {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  position: relative;
  width: auto;
  z-index: 1;
}

.shub-cert__body { display: flex; flex: 1; flex-direction: column; padding: 20px 20px 18px; }

.shub-cert__kind {
  align-items: center;
  color: var(--shub-accent);
  display: flex;
  font-size: 10px;
  font-weight: 800;
  gap: 7px;
  letter-spacing: 0.2em;
  margin-bottom: 11px;
  text-transform: uppercase;
}
.shub-cert__kind b { font-size: 12px; }

.shub-cert__title {
  color: var(--shub-cream);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 6px;
}
.shub-cert__issuer {
  color: rgba(235, 234, 228, 0.52);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 16px;
}
.shub-cert__foot {
  align-items: center;
  border-top: 1px solid var(--shub-line);
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
}
.shub-cert__date {
  color: rgba(235, 234, 228, 0.44);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.shub-cert__cue {
  align-items: center;
  color: var(--shub-accent);
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  gap: 6px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.shub-cert__cue::after {
  content: "";
  background: currentColor;
  height: 1px;
  transition: width 0.5s var(--shub-ease);
  width: 0;
}
.shub-cert__btn:hover .shub-cert__cue::after { width: 22px; }

.shub-cert__skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.shub-cert__skills i {
  background: rgba(235, 234, 228, 0.06);
  border: 1px solid var(--shub-line);
  border-radius: 999px;
  color: rgba(235, 234, 228, 0.6);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 10px;
}

.shub-certs__note {
  color: rgba(235, 234, 228, 0.34);
  font-size: 11px;
  letter-spacing: 0.12em;
  margin-top: 30px;
  text-transform: uppercase;
}

/* ==================================================================
   Lightbox
   ================================================================== */
.shub-lb {
  align-items: center;
  background: rgba(6, 6, 6, 0.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  font-family: Manrope, sans-serif;
  inset: 0;
  justify-content: center;
  opacity: 0;
  padding: 28px;
  pointer-events: none;
  position: fixed;
  /* visibility is delayed by the fade duration so the overlay stays painted
     while fading out, then drops out of the a11y tree and tab order */
  transition: opacity 0.42s var(--shub-ease-out), visibility 0s linear 0.42s;
  visibility: hidden;
  z-index: 9999;
}
.shub-lb.is-open {
  opacity: 1;
  pointer-events: auto;
  /* no delay on the way in, otherwise the first frame is invisible */
  transition: opacity 0.42s var(--shub-ease-out), visibility 0s linear 0s;
  visibility: visible;
}

.shub-lb__panel {
  background: #0d0d0d;
  border: 1px solid var(--shub-line);
  border-radius: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  max-height: 88vh;
  max-width: 1180px;
  overflow: hidden;
  position: relative;
  transform: translateY(26px) scale(0.975);
  transition: transform 0.5s var(--shub-ease-out);
  width: 100%;
}
.shub-lb.is-open .shub-lb__panel { transform: none; }

.shub-lb__stage {
  align-items: center;
  background: #000;
  display: flex;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  padding: 24px;
  position: relative;
}
.shub-lb__img {
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  height: auto;
  max-height: calc(88vh - 48px);
  max-width: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.4s var(--shub-ease-out), transform 0.6s var(--shub-ease-out);
  width: auto;
}
.shub-lb__img.is-ready { opacity: 1; transform: none; }

.shub-lb__side {
  border-left: 1px solid var(--shub-line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 30px 28px;
}
.shub-lb__kind {
  color: var(--shub-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.shub-lb__title {
  color: var(--shub-cream);
  font-size: clamp(19px, 1.6vw, 26px);
  font-weight: 800;
  line-height: 1.22;
  margin: 0 0 10px;
}
.shub-lb__sub {
  color: rgba(235, 234, 228, 0.5);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  margin: -4px 0 12px;
}
.shub-lb__issuer { color: rgba(235, 234, 228, 0.62); font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.shub-lb__date { color: rgba(235, 234, 228, 0.42); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

.shub-lb__rule { background: var(--shub-line); height: 1px; margin: 22px 0; }

.shub-lb__meta { display: grid; gap: 14px; }
.shub-lb__row { display: grid; gap: 5px; }
.shub-lb__key { color: rgba(235, 234, 228, 0.36); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; }
.shub-lb__val { color: var(--shub-cream); font-size: 12px; font-weight: 600; word-break: break-all; }

.shub-lb__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.shub-lb__tags i {
  background: rgba(102, 120, 12, 0.14);
  border: 1px solid rgba(102, 120, 12, 0.4);
  border-radius: 999px;
  color: #b9c46a;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 11px;
}

.shub-lb__cta {
  align-items: center;
  border: 1px solid var(--shub-accent);
  border-radius: 999px;
  color: var(--shub-cream);
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  gap: 9px;
  justify-content: center;
  letter-spacing: 0.16em;
  margin-top: auto;
  padding: 15px 20px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.4s var(--shub-ease-out), color 0.4s var(--shub-ease-out);
}
.shub-lb__cta::after { content: "\2197"; font-size: 13px; transition: transform 0.4s var(--shub-ease-out); }
.shub-lb__cta:hover { background: var(--shub-accent); color: var(--shub-cream); }
.shub-lb__cta:hover::after { transform: translate(3px, -3px); }

.shub-lb__x {
  align-items: center;
  background: rgba(235, 234, 228, 0.08);
  border: 1px solid var(--shub-line);
  border-radius: 50%;
  color: var(--shub-cream);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 19px;
  height: 40px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 14px;
  top: 14px;
  transition: background 0.35s var(--shub-ease-out), transform 0.35s var(--shub-ease-out);
  width: 40px;
  z-index: 3;
}
.shub-lb__x:hover { background: var(--shub-accent); transform: rotate(90deg); }

.shub-lb__nav {
  align-items: center;
  background: rgba(235, 234, 228, 0.07);
  border: 1px solid var(--shub-line);
  border-radius: 50%;
  color: var(--shub-cream);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 17px;
  height: 46px;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: background 0.35s var(--shub-ease-out);
  width: 46px;
  z-index: 3;
}
.shub-lb__nav:hover { background: var(--shub-accent); }
.shub-lb__nav--prev { left: 14px; }
.shub-lb__nav--next { right: 14px; }

.shub-lb__count {
  bottom: 14px;
  color: rgba(235, 234, 228, 0.4);
  font-size: 10px;
  left: 18px;
  letter-spacing: 0.2em;
  position: absolute;
  text-transform: uppercase;
}

body.shub-lb-open,
html.shub-lb-open { overflow: hidden; }

@media (max-width: 860px) {
  .shub-lb__panel { grid-template-columns: 1fr; max-height: 92vh; }
  .shub-lb__side { border-left: 0; border-top: 1px solid var(--shub-line); }
  .shub-lb__nav { top: auto; bottom: 14px; transform: none; }
  .shub-lb__nav--prev { left: auto; right: 62px; }
  .shub-lb__nav--next { right: 14px; }
  .shub-lb__count { bottom: auto; top: 22px; left: 20px; }
  .shub-cert-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .shub-cert { opacity: 1; transform: none; transition: none; }
  .shub-lb, .shub-lb__panel, .shub-lb__img, .shub-cert__btn { transition: none !important; }
}

/* ==================================================================
   About page upgrades
   ================================================================== */

/* portrait opens the lightbox */
.media-wrapper picture.t-ma { cursor: zoom-in; }

/* --- passion captions ------------------------------------------------ */
.section-row-gallery .media-image-wrapper { overflow: hidden; }

.shub-pcap {
  align-items: flex-end;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  inset-inline: 0;
  justify-content: flex-end;
  padding: 16px 14px;
  pointer-events: none;
  position: absolute;
  text-align: left;
  z-index: 2;
}
.shub-pcap::before {
  background: linear-gradient(0deg, rgba(9, 9, 9, 0.92), rgba(9, 9, 9, 0));
  content: "";
  inset: -20% 0 0;
  position: absolute;
  z-index: -1;
}
.shub-pcap b {
  color: var(--shub-cream);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  opacity: 0;
  text-transform: uppercase;
  transform: translateY(9px);
  transition: opacity 0.55s var(--shub-ease-out), transform 0.55s var(--shub-ease-out);
}
.shub-pcap i {
  color: rgba(235, 234, 228, 0.6);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.55s var(--shub-ease-out) 0.07s, transform 0.55s var(--shub-ease-out) 0.07s;
}
.section-row-gallery .item-media {
  cursor: zoom-in;
  position: relative;
}
.section-row-gallery .item-media:hover .shub-pcap b,
.section-row-gallery .item-media:focus-visible .shub-pcap b,
.section-row-gallery .item-media:hover .shub-pcap i,
.section-row-gallery .item-media:focus-visible .shub-pcap i { opacity: 1; transform: none; }

/* --- at a glance ------------------------------------------------------ */
.shub-stats {
  background: var(--shub-ink);
  color: var(--shub-cream);
  font-family: Manrope, sans-serif;
  font-weight: 700;
  padding: calc(110 / var(--base-size) * var(--base-vw)) calc(30 / var(--base-size) * var(--base-vw));
}
.shub-stats__inner { margin: 0 auto; max-width: 1440px; }

.shub-stats__row {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
}
.shub-stat {
  border-top: 1px solid var(--shub-line);
  padding: 26px 0 0;
}
.shub-stat b {
  color: var(--shub-cream);
  display: block;
  font-family: mg, Manrope, sans-serif;
  font-size: clamp(52px, 5.6vw, 92px);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 0.9;
}
.shub-stat span {
  color: rgba(235, 234, 228, 0.5);
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  margin-top: 12px;
  text-transform: uppercase;
}

.shub-stats__cta {
  align-items: center;
  border-top: 1px solid var(--shub-line);
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: space-between;
  margin-top: 62px;
  padding-top: 38px;
}
.shub-stats__cta p {
  color: rgba(235, 234, 228, 0.72);
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  max-width: 30ch;
}

/* --- generic scroll reveal -------------------------------------------- */
.shub-rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.95s var(--shub-ease-out), transform 0.95s var(--shub-ease-out);
}
.shub-rv.is-in { opacity: 1; transform: none; }

@media (max-width: 601px) {
  .shub-stats__cta { flex-direction: column; align-items: flex-start; }
}

/* Certificate framing - the picture frame clips and scales its artwork so a
   certificate can never paint outside the rectangle, at any breakpoint or
   while the carousel applies its recede scale(). */
.shub-cert__shot,
.list-curated-work .t-card-featured-image-wrapper,
.list-all-break .t-card-featured-image-wrapper,
.list-work .t-card-featured-image-wrapper {
  overflow: hidden;
}
.shub-cert__shot > img,
.list-curated-work .t-card-featured-image,
.list-all-break .t-card-featured-image,
.list-work .t-card-featured-image {
  display: block;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  width: 100%;
}

/* The award section paints the ACTIVE heading as a full-width row above the
   body column, so its inline pointer-events:block swallows clicks meant for
   the credential underneath. Lift the body column above the heading row -
   the heading keeps its hover-reveal, and the credential stays clickable. */
.section-award .body-container-wrapper {
  pointer-events: auto;
  position: relative;
  z-index: 1000;
}

/* ==================================================================
   Certificates page-transition panel (transition-project)
   The theme omits flex-direction on .t-title-container here (unlike
   .transition-break), so CERTIFIED / ACHIEVEMENTS laid out side by side at
   font-size 295px with white-space:nowrap and ran ~476px past the viewport.
   Stack the lines, size the type to the longest word, and give the DevFest
   Goa speaker slide a real frame instead of hiding it behind the headline.
   ================================================================== */
.transition-project > .t-cr {
  flex-direction: column;
  gap: clamp(18px, 3.4vh, 40px);
}
.transition-project .t-title-container {
  flex-direction: column;
  left: auto;
  position: static;
  top: auto;
  transform: none;
  gap: 0;
}
/* 4.042em is the measured width of "ACHIEVEMENTS" at 1em; 13vw keeps it
   inside the viewport from 320px up, with a px cap for wide screens. */
.transition-project .t-title {
  font-size: min(13vw, 150px);
  white-space: normal;
}
.transition-project .t-media {
  aspect-ratio: 1212 / 681;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  height: auto;
  overflow: hidden;
  position: relative;
  width: min(62vw, 620px);
  z-index: 2;
}
.transition-project .t-media img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}
/* the slide carries its own light background - soften it so the accent
   panel does not glare behind the headline */
.transition-project .t-media::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.22));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* ==================================================================
   Featured Builds ("SHIPPED, NOT JUST STARTED")
   Two problems, both measured:
   1. .t-card-container is a flex row where the theme sizes cards
      1430 / 669 / 669 / 1430, so two cards render 804px tall and the
      section balloons to ~2256px of mostly empty page.
   2. The four project images are minimal line-art: only ~4-7% of pixels
      sit above the background, so under object-fit:cover the motifs stay
      a few pixels tall and each card reads as an empty void.
   Fix: an even 2-up grid, plus a zoom + designed surface so the existing
   artwork fills its frame. No artwork is invented.
   ================================================================== */
.list-work .t-card-container {
  display: grid;
  gap: clamp(14px, 1.6vw, 26px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.list-work .t-card-container > .t-card {
  max-width: none;
  width: auto;
}
.list-work .t-card-featured-image-wrapper {
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.42));
  display: block;
  overflow: hidden;
  position: relative;
}
/* No transform here on purpose. The cards are 16:9 and the artwork is
   16:9, so object-fit:cover already shows the entire frame - any scale
   just sliced the composition. Hover lifts tone instead of cropping. */
.list-work .t-card-featured-image-wrapper img {
  filter: contrast(1.05) saturate(1.06);
  transition: filter 0.6s ease;
}
/* soft vignette + accent wash so the frame reads as a designed surface */
.list-work .t-card-featured-image-wrapper::after {
  background: radial-gradient(120% 90% at 50% 45%, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.55));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.list-work .t-card:hover .t-card-featured-image-wrapper img,
.list-work .t-card:focus-visible .t-card-featured-image-wrapper img {
  filter: contrast(1.1) saturate(1.18) brightness(1.06);
}
/* spotlight that follows the cursor across the card */
.list-work .t-card-inner {
  --shub-spot-x: 50%;
  --shub-spot-y: 50%;
  position: relative;
}
.list-work .t-card-inner::before {
  background: radial-gradient(340px circle at var(--shub-spot-x) var(--shub-spot-y), rgba(255, 255, 255, 0.11), transparent 65%);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.45s ease;
  z-index: 1;
}
.list-work .t-card:hover .t-card-inner::before,
.list-work .t-card:focus-visible .t-card-inner::before {
  opacity: 1;
}
@media (max-width: 700px) {
  .list-work .t-card-container {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==================================================================
   Scroll reveals
   Implemented with IntersectionObserver (scroll-TRIGGERED) rather than
   CSS animation-timeline:view() because Firefox still ships view() only
   behind a flag and does not implement animation-range at all, so a
   scroll-driven version would silently never run there.
   Enhances progressively: without JS the elements stay fully visible.
   ================================================================== */
.js-reveal [data-shub-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--shub-reveal-delay, 0ms);
}
.js-reveal [data-shub-reveal="left"] {
  transform: translate3d(-32px, 0, 0);
}
.js-reveal [data-shub-reveal="right"] {
  transform: translate3d(32px, 0, 0);
}
/* clip wipe for media - compositor-only clip-path, no layout */
.js-reveal [data-shub-reveal="clip"] {
  clip-path: inset(0 0 100% 0);
  opacity: 1;
  transform: none;
  transition: clip-path 1.15s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--shub-reveal-delay, 0ms);
}
.js-reveal [data-shub-reveal="clip"].is-in {
  clip-path: inset(0 0 0 0);
}
.js-reveal [data-shub-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* WCAG 2.2.2 (Level A): infinite marquees must be pausable. The marquee
   pauses on hover/focus AND exposes a real button via enhance.js. */
.marquee-wrapper {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-wrapper:hover .marquee,
.marquee-wrapper:focus-within .marquee {
  animation-play-state: paused;
}
.shub-marquee-toggle {
  align-items: center;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  bottom: 8px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 6px;
  padding: 4px 12px;
  position: absolute;
  right: 8px;
  z-index: 20;
}
.shub-marquee-toggle:hover {
  border-color: rgba(255, 255, 255, 0.45);
}

/* ---- reduced motion: reveal everything, stop all loops ---- */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-shub-reveal],
  .js-reveal [data-shub-reveal="left"],
  .js-reveal [data-shub-reveal="right"],
  .js-reveal [data-shub-reveal="clip"] {
    clip-path: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .marquee,
  .marquee * {
    animation-play-state: paused !important;
  }
  .transition-project .t-media,
  .transition-break .t-media {
    transition: none;
  }
}

/* infinite marquees pause when explicitly stopped */
.marquee-wrapper.is-paused .marquee,
.marquee-wrapper.is-paused .marquee * {
  animation-play-state: paused !important;
}

/* ==================================================================
   Break ("SIDE QUESTS") rows on the home page.
   .list-break .t-card ships as a 140px text-only row and the image in
   its data-img attribute is never read by the card runtime (only the
   menu script reads dataset.img), so the five projects rendered as five
   bare 100px text lines. An <img> is now injected per card.

   Two details the DOM numbers hid:
   - the runtime splits each title into per-character spans and renders TWO
     copies stacked in one grid cell for the hover mask, so display must
     stay grid with a shared grid-area or every title prints twice;
   - the number is nested inside the h3, so the row is number + title on the
     left and artwork on the right via flex, not a 3-column grid.
   ================================================================== */
.list-break .t-card {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  padding: clamp(10px, 1.3vw, 18px) 0;
  pointer-events: auto;
  width: 100%;
}
.list-break .t-card-inner {
  align-items: center;
  display: flex;
  /* flex:1 1 100% because as a flex item of .t-card it was resolving to
     50% of the card and squeezing the title into a narrow column */
  flex: 1 1 100%;
  gap: clamp(14px, 2vw, 32px);
  justify-content: space-between;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}
.list-break .t-card-title {
  align-items: baseline;
  display: flex;
  flex: 1 1 auto;
  font-size: clamp(22px, 3.2vw, 54px);
  gap: 0.5em;
  line-height: 1.02;
  min-width: 0;
  text-align: left;
  width: auto;
}
.list-break .t-card-number {
  flex: 0 0 auto;
  font-size: clamp(12px, 1vw, 16px);
  left: auto;
  position: static;
  top: auto;
  transform: none;
}
.list-break .t-card-number::after {
  content: " —";
  opacity: 0.45;
}
.list-break .t-card-link {
  display: grid;
  min-width: 0;
  overflow: visible;
}
.list-break .t-card-link > * {
  grid-area: 1 / 1;
}
.list-break .t-card-media {
  border-radius: 6px;
  flex: 0 0 auto;
  height: clamp(64px, 8vw, 118px);
  opacity: 1;
  overflow: hidden;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  width: clamp(104px, 14vw, 208px);
}
/* thumbnail, not a crop: fit the whole frame */
.list-break .t-card-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: filter 0.6s ease;
  width: 100%;
}
.list-break .t-card:hover .t-card-media,
.list-break .t-card:focus-within .t-card-media {
  opacity: 1;
  transform: translateX(5px);
}
.list-break .t-card:hover .t-card-media img,
.list-break .t-card:focus-within .t-card-media img {
  filter: brightness(1.12) saturate(1.1);
}
/* Below 700px the side-by-side row squeezed the title into ~92px and the
   per-character spans wrapped to five lines, so stack instead: title on its
   own full-width line, artwork as a wide strip underneath. */
@media (max-width: 700px) {
  .list-break .t-card-inner {
    align-items: stretch;
    flex: 1 1 100%;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .list-break .t-card-title {
    font-size: clamp(20px, 6.4vw, 30px);
    width: 100%;
  }
  .list-break .t-card-media {
    height: clamp(84px, 24vw, 132px);
    opacity: 0.75;
    width: 100%;
  }

  .list-break .t-card:hover .t-card-media,
  .list-break .t-card:focus-within .t-card-media {
    transform: none;
  }
}

/* the viewfinder frame now tracks the active card via enhance.js; let it
   move smoothly instead of snapping, and keep it behind the card text */
.line-ornament-container-wrapper-inner {
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .line-ornament-container-wrapper-inner { transition: none; }
}

/* Marquee pause (WCAG 2.2.2). The theme drives the loop from its own rAF
   with non-important inline transforms and bundles GSAP privately, so the
   only lever available from outside is an !important declaration, which
   wins over those inline writes and parks the strip. */
.t-box.t-marquee.is-paused .marquee-container,
.t-box.t-marquee.is-paused .t-marquee-item,
.t-box.t-marquee.is-paused .t-marquee-item-inner {
  animation-play-state: paused !important;
  transform: none !important;
}
.t-box.t-marquee.is-paused .marquee-container {
  width: 100%;
}

.shub-sr-only {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ============================================================================
   About > CERTIFIED & VERIFIED: pointer preview must match the certificate
   The theme built the hover preview as 352.92 x 243.49 (ratio 1.449) but the
   certificate screenshots are 1.285 - 1.333. With background-size:cover that
   sliced 8 - 11% off the height of every credential, cutting off issuer text.
   Match a 4:3 box to the artwork and never crop it.
   Desktop only - below 602px the theme intentionally shows a static image.
   ========================================================================== */
@media (min-width: 602px) {
  .section-award > .t-cr .hover-reveal {
    width: calc(352.92 / var(--base-size) * var(--base-vw));
    height: calc(264.69 / var(--base-size) * var(--base-vw));
  }

  .section-award > .t-cr .hover-reveal__img {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
  }
}

/* ============================================================================
   Home > Featured Builds: show the project shots uncropped
   The theme writes an inline translate3d(...) scale(1.0617) onto the media
   wrapper for its parallax drift, which trims ~3% off every edge. Keep the
   card filling its box but stop it cropping the artwork.
   ========================================================================== */
.list-work .t-card .t-card-media-wrapper {
  transform: none !important;
}

.list-work .t-card .t-card-featured-image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}