/**
 * Portfolio theme — entry point.
 * Load this single file from site.html; swap for another theme folder later.
 */
/**
 * Portfolio theme — design tokens.
 *
 * Colors and fonts are derived from the per-site palette injected as `--site-*`
 * custom properties on <html> (see site.html). The palette ships 5 colors + 2
 * font stacks; everything below (surfaces, borders, muted text, hovers) is
 * computed from those with color-mix so both light and dark palettes stay
 * coherent. `--t-bg-secondary` is the alternate section stripe (secondary → background).
 */
.site-page[data-theme="portfolio"] {
  /* Backgrounds — primary is the page; secondary is the alternate section stripe */
  --t-bg-primary: var(--site-color-background);
  --t-bg-secondary: color-mix(
    in oklab,
    var(--site-color-secondary) 16%,
    var(--site-color-background) 84%
  );
  /* Elevated/muted — subtle UI surfaces tinted toward text */
  --t-bg-elevated: color-mix(in srgb, var(--site-color-background) 97%, var(--site-color-text));
  --t-bg-muted: color-mix(in srgb, var(--site-color-background) 90%, var(--site-color-text));

  /* Text — primary is the palette text; secondary/muted fade toward background */
  --t-text-primary: var(--site-color-text);
  --t-text-secondary: color-mix(in srgb, var(--site-color-text) 72%, var(--site-color-background));
  --t-text-muted: color-mix(in srgb, var(--site-color-text) 52%, var(--site-color-background));
  --t-text-inverse: var(--site-color-background);

  /* Accent: brand color for buttons/focus; links use the palette accent */
  --t-accent: var(--site-color-primary);
  --t-accent-hover: color-mix(in srgb, var(--site-color-primary) 82%, var(--site-color-text));
  --t-accent-contrast: var(--site-on-primary);
  --t-link: var(--site-color-accent);

  /* Borders & shadows — derived from text color so they show on any background */
  --t-border: color-mix(in srgb, var(--site-color-text) 12%, transparent);
  --t-border-strong: color-mix(in srgb, var(--site-color-text) 22%, transparent);
  --t-shadow-sm: 0 1px 2px color-mix(in srgb, var(--site-color-text) 8%, transparent);
  --t-shadow-md: 0 4px 24px color-mix(in srgb, var(--site-color-text) 10%, transparent);

  /* Glass / overlay surfaces — translucent tints of the palette background so the
     frosted header, chips, and menus adapt to light and dark palettes. */
  --t-glass-bg: color-mix(in srgb, var(--site-color-background) 62%, transparent);
  --t-glass-bg-solid: color-mix(in srgb, var(--site-color-background) 92%, transparent);
  --t-glass-border: color-mix(in srgb, var(--site-color-text) 10%, transparent);
  --t-glass-highlight: color-mix(in srgb, var(--site-color-background) 75%, transparent);
  --t-hover-surface: color-mix(in srgb, var(--site-color-text) 6%, transparent);
  --t-hover-surface-strong: color-mix(in srgb, var(--site-color-text) 10%, transparent);

  /* Radii */
  --t-radius-sm: 8px;
  --t-radius-md: 16px;
  --t-radius-lg: 24px;
  --t-radius-xl: 32px;
  --t-radius-pill: 9999px;

  /* Typography — families from the palette, sizes/weights structural */
  --t-font-sans: var(--site-font-body);
  --t-font-display: var(--site-font-heading);
  --t-font-size-xs: 0.75rem;
  --t-font-size-sm: 0.875rem;
  --t-font-size-base: 1rem;
  --t-font-size-lg: 1.125rem;
  --t-font-size-xl: 1.25rem;
  --t-font-size-2xl: clamp(2.0625rem, 4.75vw, 3.125rem);
  --t-font-size-3xl: clamp(2.25rem, 5.5vw, 3.75rem);
  --t-font-size-hero-tagline: clamp(1.5rem, 3.2vw, 2.125rem);
  --t-font-weight-normal: 400;
  --t-font-weight-medium: 500;
  --t-font-weight-semibold: 600;
  --t-font-weight-bold: 700;
  --t-line-height-tight: 1.15;
  --t-line-height-normal: 1.5;
  --t-line-height-relaxed: 1.65;
  --t-letter-spacing-tight: -0.02em;

  /* Layout */
  --t-max-width: 1120px;
  --t-header-height: 2.75rem;
  --t-header-float-gap: 0.125rem;
  --t-header-offset: calc(
    var(--t-header-float-gap) + var(--t-header-height) + 0.75rem
  );
  /* Space formerly reserved by the header in document flow — heroes add this as padding-top */
  --t-hero-top-buffer: var(--t-header-offset);
  --t-hero-top-clearance: calc(var(--t-header-offset) + var(--t-hero-top-buffer));
  --t-section-padding-y: 5rem;
  --t-section-padding-x: 1.5rem;
  --t-gap-sm: 0.5rem;
  --t-gap-md: 1rem;
  --t-gap-lg: 2rem;
  --t-gap-xl: 3rem;

  /* Component-specific (override per theme) */
  --t-btn-padding-x: 1.5rem;
  --t-btn-padding-y: 0.75rem;
  --t-card-padding: 1.75rem;
  --t-info-row-icon-size: 2.5rem;

  /* Badges */
  --t-badge-open-bg: #ecfdf5;
  --t-badge-open-text: #166534;
  --t-badge-open-border: #16a34a;
  --t-badge-hiring-bg: #eff6ff;
  --t-badge-hiring-text: #1e40af;
  --t-badge-hiring-border: #2563eb;
  --t-avatar-border: color-mix(in srgb, var(--site-color-text) 12%, transparent);
  --t-avatar-border-strong: color-mix(in srgb, var(--site-color-text) 20%, transparent);

  /* About-section photo frame + chips — chips all use the primary color */
  --t-about-image-border: var(--site-color-accent);
  --t-about-image-border-inner: color-mix(in srgb, var(--site-color-background) 92%, transparent);
  --t-about-chip-border: var(--site-color-primary);
}

/* Base layout & typography for portfolio theme */

html:has(.site-page[data-theme="portfolio"]),
html:has(.site-page[data-theme="portfolio"]) body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: clip;
}

html:has(.site-page[data-theme="portfolio"]) {
  /* Canvas behind the page — iOS/macOS overscroll reveals this, not body. */
  background: var(--site-color-background);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(.site-page[data-theme="portfolio"]) {
    scroll-behavior: auto;
  }
}

.site-page[data-theme="portfolio"] {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-normal);
  color: var(--t-text-primary);
  background: var(--t-bg-primary);
  -webkit-font-smoothing: antialiased;
}

/* Default link color for content links. Wrapped in :where() so its specificity is
   zero — any component that sets its own link color (e.g. title/name links that use
   `color: inherit` to read as text) always wins. */
:where(.site-page[data-theme="portfolio"] a:not(.t-btn):not(.t-project-card__link):not(.t-header__contact):not(.t-navbar-masthead__cta):not(.t-navbar-bar__cta):not(.t-footer__brand)) {
  color: var(--t-link);
  text-decoration: none;
}

:where(.site-page[data-theme="portfolio"] a:not(.t-btn):not(.t-project-card__link):not(.t-header__contact):not(.t-navbar-masthead__cta):not(.t-navbar-bar__cta):not(.t-footer__brand):hover) {
  color: var(--t-accent-hover);
}

.site-page[data-theme="portfolio"] a:focus-visible,
.site-page[data-theme="portfolio"] button:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
}

.site-page[data-theme="portfolio"] main {
  display: block;
}

.t-container {
  max-width: var(--t-max-width);
  margin: 0 auto;
  padding-left: var(--t-section-padding-x);
  padding-right: var(--t-section-padding-x);
}

.t-container--narrow {
  max-width: 42rem;
}

.t-section {
  padding: var(--t-section-padding-y) 0;
  scroll-margin-top: var(--t-header-offset);
}

.t-section--muted {
  /* Alternate section stripe — uses palette secondary mixed into background */
  background: var(--t-bg-secondary);
}

.t-section--experience {
  border-top: 1px solid var(--t-border);
}

.t-section__header {
  margin-bottom: var(--t-gap-xl);
}

.t-section__title {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: var(--t-letter-spacing-tight);
  margin: 0;
  color: var(--t-text-primary);
  text-align: center;
  line-height: var(--t-line-height-tight);
}

.t-section__title--left {
  text-align: left;
}

.t-section__lead {
  margin: 0.75rem auto 0;
  max-width: 36rem;
  text-align: center;
  color: var(--t-text-secondary);
  font-size: var(--t-font-size-lg);
  line-height: var(--t-line-height-relaxed);
}

.t-section__header--left .t-section__lead {
  margin-left: 0;
  text-align: left;
}

.t-grid-2 {
  display: grid;
  gap: var(--t-gap-xl);
}

@media (min-width: 900px) {
  .t-grid-2 {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}

.t-prose {
  white-space: pre-wrap;
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  font-size: var(--t-font-size-lg);
  margin: 0;
  max-width: 42rem;
}

.t-prose--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.t-more-note {
  margin: var(--t-gap-lg) 0 0;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-muted);
}

.t-post-list {
  display: flex;
  flex-direction: column;
  gap: var(--t-gap-md);
}

.t-post {
  background: var(--t-bg-elevated);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  padding: 1.25rem 1.5rem;
}

.t-post__date {
  margin: 0 0 0.5rem;
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.t-post__text {
  margin: 0;
  color: var(--t-text-secondary);
  line-height: var(--t-line-height-relaxed);
}

.t-desc-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.t-desc-list li + li {
  margin-top: 0.35rem;
}

.t-info-row__body .t-desc-list {
  margin-top: 0.625rem;
}

.t-info-row__body p.t-info-row__desc + .t-desc-list {
  margin-top: 0.5rem;
}

.t-exp-role__full-inner .t-desc-list,
.t-exp-role__body .t-desc-list,
.t-project-card .t-desc-list {
  margin-top: 0;
}

.t-project-card .t-desc-list {
  margin-bottom: 0.75rem;
}

/* Button component — variants: primary, secondary, ghost */

.site-page[data-theme="portfolio"] a.t-btn {
  text-decoration: none;
}

.site-page[data-theme="portfolio"] a.t-btn--primary {
  color: var(--t-accent-contrast);
  background: var(--t-accent);
  border-color: var(--t-accent);
}

.site-page[data-theme="portfolio"] a.t-btn--primary:hover {
  color: var(--t-accent-contrast);
  background: var(--t-accent-hover);
  border-color: var(--t-accent-hover);
}

.site-page[data-theme="portfolio"] a.t-btn--secondary {
  color: var(--t-text-primary);
  background: var(--t-bg-elevated);
  border-color: var(--t-border-strong);
}

.site-page[data-theme="portfolio"] a.t-btn--secondary:hover {
  color: var(--t-text-primary);
  background: var(--t-bg-muted);
}

.t-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--t-btn-padding-y) var(--t-btn-padding-x);
  border-radius: var(--t-radius-pill);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.t-btn--primary {
  background: var(--t-accent);
  color: var(--t-accent-contrast);
  border-color: var(--t-accent);
}

.t-btn--primary:hover {
  background: var(--t-accent-hover);
  border-color: var(--t-accent-hover);
  color: var(--t-accent-contrast);
}

.t-btn--secondary {
  background: var(--t-bg-elevated);
  color: var(--t-text-primary);
  border-color: var(--t-border-strong);
}

.t-btn--secondary:hover {
  background: var(--t-bg-muted);
  color: var(--t-text-primary);
}

.t-btn--ghost {
  background: transparent;
  color: var(--t-text-primary);
  border-color: var(--t-border-strong);
}

.t-btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--t-font-size-xs);
}

.t-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Floating glass pill navigation */

.t-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  --t-header-pad-top: 0.125rem;
  padding: var(--t-header-pad-top) var(--t-section-padding-x) 0;
  pointer-events: none;
  background: transparent;
  transition: padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.t-header.is-compact {
  --t-header-pad-top: 0.7rem;
}

.t-header__dock {
  max-width: min(var(--t-max-width), 100%);
  width: 100%;
  margin: 0 auto;
  pointer-events: auto;
  transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrolled compact pill: stay full-width until large screens (avoids squishing nav). */
.t-header.is-compact .t-header__dock {
  max-width: min(100%, calc(100vw - 2 * var(--t-section-padding-x)));
}

@media (prefers-reduced-motion: reduce) {
  .t-header,
  .t-header__dock {
    transition: none;
  }
}

.t-header__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.35rem 0.25rem 0.5rem;
  border-radius: var(--t-radius-pill);
  background: var(--t-glass-bg);
  border: 1px solid var(--t-glass-border);
  box-shadow:
    0 1px 0 var(--t-glass-highlight) inset,
    var(--t-shadow-md),
    var(--t-shadow-sm);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .t-header__bar,
  .t-mobile-nav {
    background: var(--t-glass-bg-solid);
  }
}

.t-header__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--t-text-primary);
  min-width: 0;
  flex-shrink: 0;
  padding: 0.2rem 0.35rem 0.2rem 0.25rem;
  border-radius: var(--t-radius-pill);
}

.t-header__brand:hover {
  color: var(--t-text-primary);
  background: var(--t-hover-surface);
}

.t-header__name {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(14rem, 32vw);
}

.t-logo {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--t-accent);
  color: var(--t-accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: var(--t-font-weight-bold);
  flex-shrink: 0;
}

.t-header__avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  border: 1.5px solid var(--t-avatar-border-strong);
  box-shadow: 0 0 0 1px var(--t-avatar-border);
  background: var(--t-bg-muted);
}

.t-header__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t-header__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0.25rem;
}

.t-header__nav a {
  font-size: 0.8125rem;
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-primary);
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border-radius: var(--t-radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    color 0.15s,
    background 0.15s;
}

.t-header__nav a:hover {
  color: var(--t-text-primary);
  background: var(--t-hover-surface);
}

.t-header__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  margin-left: auto;
}

.t-header__contact {
  display: none;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: var(--t-radius-pill);
  font-size: 0.8125rem;
  font-weight: var(--t-font-weight-semibold);
  color: var(--t-accent-contrast);
  text-decoration: none;
  border: 1px solid var(--t-accent);
  background: var(--t-accent);
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.t-header__contact:hover {
  background: var(--t-accent-hover);
  border-color: var(--t-accent-hover);
  color: var(--t-accent-contrast);
}

.t-header__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border: none;
  border-radius: 50%;
  background: var(--t-hover-surface);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.t-header__menu-btn:hover {
  background: var(--t-hover-surface-strong);
}

.t-header__menu-icon {
  width: 1rem;
  height: 2px;
  background: var(--t-text-primary);
  position: relative;
  display: block;
}

.t-header__menu-icon::before,
.t-header__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--t-text-primary);
}

.t-header__menu-icon::before {
  top: -4px;
}

.t-header__menu-icon::after {
  top: 4px;
}

.t-mobile-nav {
  display: none;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border-radius: var(--t-radius-lg);
  background: var(--t-glass-bg);
  border: 1px solid var(--t-glass-border);
  box-shadow: var(--t-shadow-md);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

.t-mobile-nav.is-open {
  display: flex;
}

.t-mobile-nav a {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-primary);
  padding: 0.5rem 0.75rem;
  border-radius: var(--t-radius-md);
  text-decoration: none;
}

.t-mobile-nav a:hover {
  color: var(--t-text-primary);
  background: var(--t-hover-surface);
}

@media (min-width: 601px) {
  .t-header__nav {
    display: flex;
  }

  .t-header__contact {
    display: inline-flex;
  }

  .t-header__menu-btn {
    display: none;
  }

  .t-mobile-nav {
    display: none !important;
  }

  .t-header__name {
    max-width: min(16rem, 36vw);
  }

  .t-header__bar {
    gap: 0.35rem;
    padding-left: 0.6rem;
    padding-right: 0.45rem;
  }
}

@media (min-width: 1024px) {
  /* Centered compact pill only when there is room; never narrower than content needs. */
  .t-header.is-compact .t-header__dock {
    max-width: min(100%, 36rem);
  }

  .t-header__name {
    max-width: 12rem;
  }

  .t-header__nav a {
    padding: 0.35rem 0.75rem;
  }
}

/* Hamburger layout: keep name beside avatar down to 400px. */
@media (max-width: 600px) {
  .t-header__name {
    display: block;
    max-width: min(12rem, calc(100vw - 7rem));
  }

  .t-header__bar {
    padding-right: 0.25rem;
  }
}

@media (max-width: 349px) {
  .t-header__name {
    display: none;
  }
}

/*
 * navbar variant: "navbar-masthead"
 * Magazine-style full-bleed bar — display name + ruled link row (not a floating pill).
 */

.site-page[data-theme="portfolio"]:has(.t-navbar-masthead) {
  --t-header-height: 5.25rem;
  --t-header-float-gap: 0;
  --t-header-offset: calc(var(--t-header-height) + 0.35rem);
}

@media (max-width: 719px) {
  .site-page[data-theme="portfolio"]:has(.t-navbar-masthead) {
    --t-header-height: 3.5rem;
  }
}

.t-navbar-masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--t-bg-primary) 88%, transparent);
  border-bottom: 1px solid var(--t-border);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .t-navbar-masthead {
    background: var(--t-bg-primary);
  }
}

.t-navbar-masthead.is-compact {
  background: color-mix(in srgb, var(--t-bg-primary) 94%, transparent);
  box-shadow: var(--t-shadow-sm);
}

.t-navbar-masthead__shell {
  max-width: var(--t-max-width);
  margin: 0 auto;
  padding: 0.85rem var(--t-section-padding-x) 0;
  transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.t-navbar-masthead.is-compact .t-navbar-masthead__shell {
  padding-top: 0.55rem;
  padding-bottom: 0;
}

.t-navbar-masthead__shell:not(:has(.t-navbar-masthead__nav)) {
  padding-bottom: 0.7rem;
}

.t-navbar-masthead.is-compact .t-navbar-masthead__shell:not(:has(.t-navbar-masthead__nav)) {
  padding-bottom: 0.45rem;
}

@media (prefers-reduced-motion: reduce) {
  .t-navbar-masthead,
  .t-navbar-masthead__shell,
  .t-navbar-masthead__name {
    transition: none;
  }
}

.t-navbar-masthead__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.t-navbar-masthead__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  text-decoration: none;
  color: var(--t-text-primary);
}

.t-navbar-masthead__brand:hover {
  color: var(--t-text-primary);
}

.t-navbar-masthead__avatar,
.t-navbar-masthead__mark {
  width: 2rem;
  height: 2rem;
  border-radius: 0.2rem;
  flex-shrink: 0;
  overflow: hidden;
}

.t-navbar-masthead__avatar {
  border: 1px solid var(--t-avatar-border-strong);
  background: var(--t-bg-muted);
}

.t-navbar-masthead__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t-navbar-masthead__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--t-accent);
  color: var(--t-accent-contrast);
  font-size: 0.625rem;
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.04em;
}

.t-navbar-masthead__name {
  font-family: var(--t-font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.1;
  letter-spacing: var(--t-letter-spacing-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.t-navbar-masthead.is-compact .t-navbar-masthead__name {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.t-navbar-masthead__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.t-navbar-masthead__cta {
  display: none;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--t-accent);
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--t-accent-contrast);
  background: var(--t-accent);
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}

.t-navbar-masthead__cta:hover {
  background: var(--t-accent-hover);
  color: var(--t-accent-contrast);
  border-color: var(--t-accent-hover);
}

.t-navbar-masthead__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.t-navbar-masthead__menu-btn:hover {
  background: var(--t-hover-surface);
}

.t-navbar-masthead__menu-icon {
  width: 1rem;
  height: 1px;
  background: var(--t-text-primary);
  position: relative;
  display: block;
}

.t-navbar-masthead__menu-icon::before,
.t-navbar-masthead__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--t-text-primary);
}

.t-navbar-masthead__menu-icon::before {
  top: -5px;
}

.t-navbar-masthead__menu-icon::after {
  top: 5px;
}

.t-navbar-masthead__nav {
  display: none;
  align-items: stretch;
  gap: 0;
  margin-top: 0.75rem;
  border-top: 1px solid var(--t-border);
}

.t-navbar-masthead.is-compact .t-navbar-masthead__nav {
  margin-top: 0.5rem;
}

.t-navbar-masthead__link {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Vertical padding lives on the link so hover fills the full nav-row height. */
  padding: 0.55rem 0.5rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--t-text-secondary);
  border-right: 1px solid var(--t-border);
  transition: color 0.15s, background 0.15s;
}

.t-navbar-masthead.is-compact .t-navbar-masthead__link {
  padding-top: 0.4rem;
  padding-bottom: 0.45rem;
}

.t-navbar-masthead__link:last-child {
  border-right: none;
}

.t-navbar-masthead__link:hover {
  color: var(--t-text-primary);
  background: var(--t-hover-surface);
}

/* Mobile drawer — full-bleed continuation of the frosted header (no inset box). */
.t-navbar-masthead__drawer {
  display: none;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0 0 0.5rem;
  border: none;
  border-top: 1px solid var(--t-border);
  background: transparent;
}

.t-navbar-masthead__drawer.is-open {
  display: flex;
}

.t-navbar-masthead__drawer a {
  font-size: 0.8125rem;
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-text-secondary);
  text-decoration: none;
  padding: 0.9rem var(--t-section-padding-x);
  border-bottom: 1px solid var(--t-border);
  transition:
    color 0.15s,
    background 0.15s;
}

.t-navbar-masthead__drawer a:last-of-type:not(.t-navbar-masthead__drawer-cta) {
  border-bottom: none;
}

.t-navbar-masthead__drawer a:hover {
  color: var(--t-text-primary);
  background: var(--t-hover-surface);
}

.t-navbar-masthead__drawer-cta {
  margin: 0.65rem var(--t-section-padding-x) 0.35rem;
  padding: 0.55rem 0.9rem !important;
  border: 1px solid var(--t-accent) !important;
  color: var(--t-accent-contrast) !important;
  font-weight: var(--t-font-weight-semibold) !important;
  letter-spacing: 0.06em;
  text-align: center;
  background: var(--t-accent) !important;
}

.t-navbar-masthead__drawer-cta:hover {
  background: var(--t-accent-hover) !important;
  border-color: var(--t-accent-hover) !important;
  color: var(--t-accent-contrast) !important;
}

@media (max-width: 719px) {
  /* Desktop nav is hidden; keep brand row from sitting flush on the header edge. */
  .t-navbar-masthead__shell {
    padding-bottom: 0.7rem;
  }

  .t-navbar-masthead.is-compact .t-navbar-masthead__shell {
    padding-bottom: 0.45rem;
  }

  .t-navbar-masthead:has(.t-navbar-masthead__drawer.is-open) .t-navbar-masthead__shell {
    padding-bottom: 0.55rem;
  }
}

@media (min-width: 720px) {
  .t-navbar-masthead__nav {
    display: flex;
  }

  .t-navbar-masthead__cta {
    display: inline-flex;
  }

  .t-navbar-masthead__menu-btn {
    display: none;
  }

  .t-navbar-masthead__drawer {
    display: none !important;
  }
}

@media (max-width: 419px) {
  .t-navbar-masthead__name {
    max-width: min(11rem, calc(100vw - 6.5rem));
  }

  .t-navbar-masthead__avatar,
  .t-navbar-masthead__mark {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/*
 * navbar variant: "navbar-bar"
 * Classic sticky strip — brand, plain links, filled CTA. No glass, no pill.
 */

.site-page[data-theme="portfolio"]:has(.t-navbar-bar) {
  --t-header-height: 3.5rem;
  --t-header-float-gap: 0;
  --t-header-offset: calc(var(--t-header-height) + 0.5rem);
}

.t-navbar-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--t-bg-primary) 92%, transparent);
  border-bottom: 1px solid var(--t-border);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  transition: box-shadow 0.2s ease;
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .t-navbar-bar {
    background: var(--t-bg-primary);
  }
}

.t-navbar-bar.is-compact {
  box-shadow: var(--t-shadow-sm);
}

.t-navbar-bar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--t-max-width);
  margin: 0 auto;
  min-height: var(--t-header-height);
  padding: 0 var(--t-section-padding-x);
}

.t-navbar-bar__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--t-text-primary);
}

.t-navbar-bar__brand:hover {
  color: var(--t-text-primary);
}

.t-navbar-bar__avatar,
.t-navbar-bar__mark {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.t-navbar-bar__avatar {
  border: 1px solid var(--t-avatar-border);
  background: var(--t-bg-muted);
}

.t-navbar-bar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t-navbar-bar__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--t-accent);
  color: var(--t-accent-contrast);
  font-size: 0.625rem;
  font-weight: var(--t-font-weight-bold);
}

.t-navbar-bar__name {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(14rem, 40vw);
}

.t-navbar-bar__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
}

.t-navbar-bar__nav a {
  font-size: 0.875rem;
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-secondary);
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  white-space: nowrap;
  transition: color 0.15s;
}

.t-navbar-bar__nav a:hover {
  color: var(--t-text-primary);
}

.t-navbar-bar__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

.t-navbar-bar__cta {
  display: none;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: var(--t-radius-md);
  font-size: 0.8125rem;
  font-weight: var(--t-font-weight-semibold);
  color: var(--t-accent-contrast);
  text-decoration: none;
  background: var(--t-accent);
  border: 1px solid var(--t-accent);
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.t-navbar-bar__cta:hover {
  background: var(--t-accent-hover);
  border-color: var(--t-accent-hover);
  color: var(--t-accent-contrast);
}

.t-navbar-bar__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: var(--t-radius-md);
  background: transparent;
  cursor: pointer;
}

.t-navbar-bar__menu-btn:hover {
  background: var(--t-hover-surface);
}

.t-navbar-bar__menu-icon {
  width: 1rem;
  height: 2px;
  background: var(--t-text-primary);
  position: relative;
  display: block;
}

.t-navbar-bar__menu-icon::before,
.t-navbar-bar__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--t-text-primary);
}

.t-navbar-bar__menu-icon::before {
  top: -5px;
}

.t-navbar-bar__menu-icon::after {
  top: 5px;
}

.t-navbar-bar__drawer {
  display: none;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem var(--t-section-padding-x) 0.85rem;
  border-top: 1px solid var(--t-border);
  background: var(--t-bg-primary);
}

.t-navbar-bar__drawer.is-open {
  display: flex;
}

.t-navbar-bar__drawer a {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-primary);
  text-decoration: none;
  padding: 0.65rem 0.5rem;
  border-radius: var(--t-radius-md);
}

.t-navbar-bar__drawer a:hover {
  background: var(--t-hover-surface);
  color: var(--t-text-primary);
}

.t-navbar-bar__drawer-cta {
  font-weight: var(--t-font-weight-semibold);
  color: var(--t-accent) !important;
}

@media (min-width: 720px) {
  .t-navbar-bar__nav {
    display: flex;
  }

  .t-navbar-bar__cta {
    display: inline-flex;
  }

  .t-navbar-bar__menu-btn {
    display: none;
  }

  .t-navbar-bar__drawer {
    display: none !important;
  }

  .t-navbar-bar__name {
    max-width: min(16rem, 28vw);
  }
}

@media (max-width: 379px) {
  .t-navbar-bar__name {
    display: none;
  }
}

/*
 * navbar variant: "navbar-minimal"
 * Ultra-light top line — name, spaced text links, underlined CTA. Barely-there chrome.
 */

.site-page[data-theme="portfolio"]:has(.t-navbar-minimal) {
  --t-header-height: 3rem;
  --t-header-float-gap: 0;
  --t-header-offset: calc(var(--t-header-height) + 0.75rem);
}

.t-navbar-minimal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
  border-bottom: 1px solid transparent;
}

/* Same frost for scrolled bar and open mobile drawer (one continuous surface). */
.t-navbar-minimal.is-compact,
.t-navbar-minimal:has(.t-navbar-minimal__drawer.is-open) {
  background: color-mix(in srgb, var(--t-bg-primary) 90%, transparent);
  border-bottom-color: var(--t-border);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .t-navbar-minimal.is-compact,
  .t-navbar-minimal:has(.t-navbar-minimal__drawer.is-open) {
    background: var(--t-bg-primary);
  }
}

.t-navbar-minimal__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: var(--t-max-width);
  margin: 0 auto;
  min-height: var(--t-header-height);
  padding: 0 var(--t-section-padding-x);
}

.t-navbar-minimal__brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--t-text-primary);
}

.t-navbar-minimal__brand:hover {
  color: var(--t-text-primary);
}

.t-navbar-minimal__avatar {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--t-bg-muted);
}

.t-navbar-minimal__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t-navbar-minimal__name {
  font-size: 0.9375rem;
  font-weight: var(--t-font-weight-medium);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(12rem, 42vw);
}

.t-navbar-minimal__nav {
  display: none;
  align-items: center;
  gap: 1.25rem;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.t-navbar-minimal__nav a {
  font-size: 0.875rem;
  font-weight: var(--t-font-weight-normal);
  color: var(--t-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.25rem 0;
  transition: color 0.15s;
}

.t-navbar-minimal__nav a:hover {
  color: var(--t-text-primary);
}

.t-navbar-minimal__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-left: auto;
}

.t-navbar-minimal__cta {
  display: none;
  font-size: 0.875rem;
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  white-space: nowrap;
  transition: color 0.15s;
}

.t-navbar-minimal__cta:hover {
  color: var(--t-accent);
}

.t-navbar-minimal__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--t-radius-md);
  background: transparent;
  cursor: pointer;
}

.t-navbar-minimal__menu-btn:hover {
  background: var(--t-hover-surface);
}

.t-navbar-minimal__menu-icon {
  width: 0.9rem;
  height: 1.5px;
  background: var(--t-text-primary);
  position: relative;
  display: block;
}

.t-navbar-minimal__menu-icon::before,
.t-navbar-minimal__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--t-text-primary);
}

.t-navbar-minimal__menu-icon::before {
  top: -4.5px;
}

.t-navbar-minimal__menu-icon::after {
  top: 4.5px;
}

/* Drawer sits inside the frosted header — transparent so surfaces match. */
.t-navbar-minimal__drawer {
  display: none;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0.35rem var(--t-section-padding-x) 0.75rem;
  border-top: 1px solid var(--t-border);
  background: transparent;
}

.t-navbar-minimal__drawer.is-open {
  display: flex;
}

.t-navbar-minimal__drawer a {
  font-size: 0.9375rem;
  font-weight: var(--t-font-weight-normal);
  color: var(--t-text-primary);
  text-decoration: none;
  padding: 0.7rem 0.15rem;
}

.t-navbar-minimal__drawer a:hover {
  color: var(--t-accent);
}

.t-navbar-minimal__drawer-cta {
  font-weight: var(--t-font-weight-medium);
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
}

@media (min-width: 720px) {
  .t-navbar-minimal__nav {
    display: flex;
  }

  .t-navbar-minimal__cta {
    display: inline;
  }

  .t-navbar-minimal__menu-btn {
    display: none;
  }

  .t-navbar-minimal__drawer {
    display: none !important;
  }

  .t-navbar-minimal__name {
    max-width: min(16rem, 30vw);
  }
}

@media (max-width: 379px) {
  .t-navbar-minimal__avatar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-navbar-minimal {
    transition: none;
  }
}

/*
 * navbar variant: "navbar-split"
 * Dual floating islands — brand chip left, links + contact chip right.
 * Distinct from Dock (one centered pill wrapping everything).
 */

.site-page[data-theme="portfolio"]:has(.t-navbar-split) {
  --t-header-height: 2.75rem;
  --t-header-float-gap: 0.75rem;
  --t-header-offset: calc(
    var(--t-header-float-gap) + var(--t-header-height) + 0.65rem
  );
}

.t-navbar-split {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--t-header-float-gap) var(--t-section-padding-x) 0;
  pointer-events: none;
  background: transparent;
}

.t-navbar-split__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: var(--t-max-width);
  margin: 0 auto;
  pointer-events: auto;
}

.t-navbar-split__brand,
.t-navbar-split__cluster {
  display: flex;
  align-items: center;
  min-height: var(--t-header-height);
  background: var(--t-glass-bg);
  border: 1px solid var(--t-glass-border);
  border-radius: var(--t-radius-pill);
  box-shadow:
    0 1px 0 var(--t-glass-highlight) inset,
    var(--t-shadow-sm);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .t-navbar-split__brand,
  .t-navbar-split__cluster,
  .t-navbar-split__drawer {
    background: var(--t-glass-bg-solid);
  }
}

.t-navbar-split.is-compact .t-navbar-split__brand,
.t-navbar-split.is-compact .t-navbar-split__cluster {
  box-shadow:
    0 1px 0 var(--t-glass-highlight) inset,
    var(--t-shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  .t-navbar-split__brand,
  .t-navbar-split__cluster,
  .t-navbar-split__link,
  .t-navbar-split__cta {
    transition: none;
  }
}

.t-navbar-split__brand {
  gap: 0.5rem;
  padding: 0.2rem 0.85rem 0.2rem 0.28rem;
  text-decoration: none;
  color: var(--t-text-primary);
  min-width: 0;
  flex-shrink: 1;
}

.t-navbar-split__brand:hover {
  color: var(--t-text-primary);
  background: color-mix(in srgb, var(--t-glass-bg) 80%, var(--t-hover-surface));
}

.t-navbar-split__avatar,
.t-navbar-split__mark {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.t-navbar-split__avatar {
  border: 1.5px solid var(--t-avatar-border-strong);
  background: var(--t-bg-muted);
}

.t-navbar-split__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t-navbar-split__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--t-accent);
  color: var(--t-accent-contrast);
  font-size: 0.5625rem;
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.04em;
}

.t-navbar-split__name {
  font-size: 0.8125rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(14rem, 42vw);
}

.t-navbar-split__cluster {
  gap: 0.1rem;
  padding: 0.28rem 0.4rem 0.28rem 0.35rem;
  flex-shrink: 0;
}

.t-navbar-split__nav {
  display: none;
  align-items: center;
  align-self: stretch;
  gap: 0.1rem;
}

.t-navbar-split__link {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 0.7rem;
  border-radius: var(--t-radius-pill);
  font-size: 0.8125rem;
  font-weight: var(--t-font-weight-medium);
  text-decoration: none;
  color: var(--t-text-primary);
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.t-navbar-split__link:hover {
  background: var(--t-hover-surface);
  color: var(--t-text-primary);
}

.t-navbar-split__link:focus-visible,
.t-navbar-split__brand:focus-visible,
.t-navbar-split__cta:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
}

.t-navbar-split__cta {
  display: none;
  align-items: center;
  align-self: stretch;
  margin: 0;
  padding: 0 1.05rem;
  border-radius: var(--t-radius-pill);
  font-size: 0.8125rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.01em;
  color: var(--t-accent-contrast);
  text-decoration: none;
  background: var(--t-accent);
  border: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.t-navbar-split__cta:hover {
  background: var(--t-accent-hover);
  color: var(--t-accent-contrast);
}

.t-navbar-split__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--t-hover-surface);
  cursor: pointer;
}

.t-navbar-split__menu-btn:hover {
  background: var(--t-hover-surface-strong);
}

.t-navbar-split__menu-icon {
  width: 0.9rem;
  height: 1.5px;
  background: var(--t-text-primary);
  position: relative;
  display: block;
}

.t-navbar-split__menu-icon::before,
.t-navbar-split__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--t-text-primary);
}

.t-navbar-split__menu-icon::before {
  top: -4.5px;
}

.t-navbar-split__menu-icon::after {
  top: 4.5px;
}

.t-navbar-split__drawer {
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  pointer-events: auto;
  max-width: 18rem;
  margin: 0.5rem 0 0 auto;
  padding: 0.45rem;
  border-radius: var(--t-radius-lg);
  background: var(--t-glass-bg);
  border: 1px solid var(--t-glass-border);
  box-shadow: var(--t-shadow-md);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

.t-navbar-split__drawer.is-open {
  display: flex;
}

.t-navbar-split__drawer a {
  display: flex;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-primary);
  text-decoration: none;
  padding: 0.6rem 0.75rem;
  border-radius: var(--t-radius-md);
}

.t-navbar-split__drawer a:hover {
  background: var(--t-hover-surface);
  color: var(--t-text-primary);
}

.t-navbar-split__drawer-cta {
  margin-top: 0.15rem;
  justify-content: center;
  background: var(--t-accent) !important;
  color: var(--t-accent-contrast) !important;
  font-size: 0.8125rem !important;
  font-weight: var(--t-font-weight-semibold) !important;
}

.t-navbar-split__drawer-cta:hover {
  background: var(--t-accent-hover) !important;
}

@media (min-width: 720px) {
  .t-navbar-split__nav {
    display: flex;
  }

  .t-navbar-split__cta {
    display: inline-flex;
  }

  .t-navbar-split__menu-btn {
    display: none;
  }

  .t-navbar-split__drawer {
    display: none !important;
  }

  .t-navbar-split__name {
    max-width: min(16rem, 28vw);
  }
}

@media (max-width: 719px) {
  .t-navbar-split__cta {
    display: none;
  }

  .t-navbar-split__cluster {
    padding: 0.22rem;
  }
}

@media (max-width: 379px) {
  .t-navbar-split__name {
    display: none;
  }

  .t-navbar-split__brand {
    padding-right: 0.28rem;
  }
}

/*
 * navbar variant: "navbar-segmented"
 * Three floating islands — brand left, nav links centered in their own
 * bubble, contact as a standalone pill on the right.
 */

.site-page[data-theme="portfolio"]:has(.t-navbar-segmented) {
  --t-header-height: 2.75rem;
  --t-header-float-gap: 0.75rem;
  --t-header-offset: calc(
    var(--t-header-float-gap) + var(--t-header-height) + 0.65rem
  );
}

.t-navbar-segmented {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--t-header-float-gap) var(--t-section-padding-x) 0;
  pointer-events: none;
  background: transparent;
}

.t-navbar-segmented__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  max-width: var(--t-max-width);
  margin: 0 auto;
  pointer-events: auto;
}

.t-navbar-segmented__brand,
.t-navbar-segmented__nav,
.t-navbar-segmented__menu-btn {
  background: var(--t-glass-bg);
  border: 1px solid var(--t-glass-border);
  box-shadow:
    0 1px 0 var(--t-glass-highlight) inset,
    var(--t-shadow-sm);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .t-navbar-segmented__brand,
  .t-navbar-segmented__nav,
  .t-navbar-segmented__menu-btn,
  .t-navbar-segmented__drawer {
    background: var(--t-glass-bg-solid);
  }
}

.t-navbar-segmented.is-compact .t-navbar-segmented__brand,
.t-navbar-segmented.is-compact .t-navbar-segmented__nav,
.t-navbar-segmented.is-compact .t-navbar-segmented__cta,
.t-navbar-segmented.is-compact .t-navbar-segmented__menu-btn {
  box-shadow:
    0 1px 0 var(--t-glass-highlight) inset,
    var(--t-shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  .t-navbar-segmented__brand,
  .t-navbar-segmented__nav,
  .t-navbar-segmented__link,
  .t-navbar-segmented__cta {
    transition: none;
  }
}

.t-navbar-segmented__brand {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--t-header-height);
  min-width: 0;
  padding: 0.2rem 0.85rem 0.2rem 0.28rem;
  border-radius: var(--t-radius-pill);
  text-decoration: none;
  color: var(--t-text-primary);
}

.t-navbar-segmented__brand:hover {
  color: var(--t-text-primary);
  background: color-mix(in srgb, var(--t-glass-bg) 80%, var(--t-hover-surface));
}

.t-navbar-segmented__avatar,
.t-navbar-segmented__mark {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.t-navbar-segmented__avatar {
  border: 1.5px solid var(--t-avatar-border-strong);
  background: var(--t-bg-muted);
}

.t-navbar-segmented__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t-navbar-segmented__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--t-accent);
  color: var(--t-accent-contrast);
  font-size: 0.5625rem;
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.04em;
}

.t-navbar-segmented__name {
  font-size: 0.8125rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(14rem, 42vw);
}

.t-navbar-segmented__nav {
  display: none;
  grid-column: 2;
  justify-self: center;
  align-items: center;
  align-self: stretch;
  min-height: var(--t-header-height);
  gap: 0.1rem;
  padding: 0.28rem 0.35rem;
  border-radius: var(--t-radius-pill);
}

.t-navbar-segmented__link {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 0 0.7rem;
  border-radius: var(--t-radius-pill);
  font-size: 0.8125rem;
  font-weight: var(--t-font-weight-medium);
  text-decoration: none;
  color: var(--t-text-primary);
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.t-navbar-segmented__link:hover {
  background: var(--t-hover-surface);
  color: var(--t-text-primary);
}

.t-navbar-segmented__link:focus-visible,
.t-navbar-segmented__brand:focus-visible,
.t-navbar-segmented__cta:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
}

.t-navbar-segmented__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  min-width: 0;
}

.t-navbar-segmented__cta {
  display: none;
  align-items: center;
  align-self: stretch;
  min-height: var(--t-header-height);
  padding: 0 1.15rem;
  border-radius: var(--t-radius-pill);
  font-size: 0.8125rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.01em;
  color: var(--t-accent-contrast);
  text-decoration: none;
  background: var(--t-accent);
  border: none;
  white-space: nowrap;
  box-shadow: var(--t-shadow-sm);
  transition: background 0.15s;
}

.t-navbar-segmented__cta:hover {
  background: var(--t-accent-hover);
  color: var(--t-accent-contrast);
}

.t-navbar-segmented__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
}

.t-navbar-segmented__menu-btn:hover {
  background: color-mix(in srgb, var(--t-glass-bg) 80%, var(--t-hover-surface));
}

.t-navbar-segmented__menu-icon {
  width: 0.9rem;
  height: 1.5px;
  background: var(--t-text-primary);
  position: relative;
  display: block;
}

.t-navbar-segmented__menu-icon::before,
.t-navbar-segmented__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--t-text-primary);
}

.t-navbar-segmented__menu-icon::before {
  top: -4.5px;
}

.t-navbar-segmented__menu-icon::after {
  top: 4.5px;
}

.t-navbar-segmented__drawer {
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  pointer-events: auto;
  max-width: 18rem;
  margin: 0.5rem 0 0 auto;
  padding: 0.45rem;
  border-radius: var(--t-radius-lg);
  background: var(--t-glass-bg);
  border: 1px solid var(--t-glass-border);
  box-shadow: var(--t-shadow-md);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

.t-navbar-segmented__drawer.is-open {
  display: flex;
}

.t-navbar-segmented__drawer a {
  display: flex;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-primary);
  text-decoration: none;
  padding: 0.6rem 0.75rem;
  border-radius: var(--t-radius-md);
}

.t-navbar-segmented__drawer a:hover {
  background: var(--t-hover-surface);
  color: var(--t-text-primary);
}

.t-navbar-segmented__drawer-cta {
  margin-top: 0.15rem;
  justify-content: center;
  background: var(--t-accent) !important;
  color: var(--t-accent-contrast) !important;
  font-size: 0.8125rem !important;
  font-weight: var(--t-font-weight-semibold) !important;
}

.t-navbar-segmented__drawer-cta:hover {
  background: var(--t-accent-hover) !important;
}

@media (min-width: 720px) {
  .t-navbar-segmented__nav {
    display: flex;
  }

  .t-navbar-segmented__cta {
    display: inline-flex;
  }

  .t-navbar-segmented__menu-btn {
    display: none;
  }

  .t-navbar-segmented__drawer {
    display: none !important;
  }

  .t-navbar-segmented__name {
    max-width: min(16rem, 28vw);
  }
}

@media (max-width: 719px) {
  .t-navbar-segmented__cta {
    display: none;
  }
}

@media (max-width: 379px) {
  .t-navbar-segmented__name {
    display: none;
  }

  .t-navbar-segmented__brand {
    padding-right: 0.28rem;
  }
}

/*
 * navbar variant: "navbar-overlay"
 * Creative — brand + hamburger only; a full-screen primary curtain holds the links.
 * Distinct from Bar/Minimal (inline desktop links) and Dock (pill with links in-bar).
 */

.site-page[data-theme="portfolio"]:has(.t-navbar-overlay) {
  --t-header-height: 4.25rem;
  --t-header-float-gap: 0;
  --t-header-offset: calc(var(--t-header-height) + 0.5rem);
  scrollbar-gutter: stable;
}

.t-navbar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
}

.t-navbar-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--t-header-height);
  z-index: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--t-bg-primary) 82%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  transition: opacity 0.25s ease;
}

.t-navbar-overlay:has(.t-navbar-overlay__panel.is-open)::before {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .t-navbar-overlay::before {
    background: var(--t-bg-primary);
  }
}

.t-navbar-overlay__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--t-header-height);
  max-width: var(--t-max-width);
  margin: 0 auto;
  padding: 0 var(--t-section-padding-x);
  pointer-events: auto;
}

.t-navbar-overlay__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  text-decoration: none;
  color: var(--t-text-primary);
  transition: color 0.25s ease;
}

.t-navbar-overlay__brand:hover {
  color: var(--t-text-primary);
}

.t-navbar-overlay__avatar,
.t-navbar-overlay__mark {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.15rem;
  flex-shrink: 0;
  overflow: hidden;
}

.t-navbar-overlay__avatar {
  border: 1px solid var(--t-avatar-border-strong);
  background: var(--t-bg-muted);
}

.t-navbar-overlay__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t-navbar-overlay__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--t-accent);
  color: var(--t-accent-contrast);
  font-size: 0.5625rem;
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.06em;
}

.t-navbar-overlay__name {
  font-family: var(--t-font-display);
  font-size: 0.9375rem;
  font-weight: var(--t-font-weight-normal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-navbar-overlay__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.t-navbar-overlay__bar-cta {
  font-size: 0.75rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--t-text-primary);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--t-border-strong);
}

.t-navbar-overlay__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--t-text-primary);
  transition: color 0.25s ease;
}

.t-navbar-overlay__menu-icon {
  width: 1.5rem;
  height: 2.25px;
  background: currentColor;
  position: relative;
  display: block;
  transition:
    transform 0.3s ease,
    background 0.2s ease;
}

.t-navbar-overlay__menu-icon::before,
.t-navbar-overlay__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2.25px;
  background: currentColor;
  transition: transform 0.3s ease;
}

.t-navbar-overlay__menu-icon::before {
  transform: translateY(-7px);
}

.t-navbar-overlay__menu-icon::after {
  transform: translateY(7px);
}

.t-navbar-overlay:has(.t-navbar-overlay__panel.is-open) .t-navbar-overlay__menu-btn {
  color: var(--site-on-primary);
}

.t-navbar-overlay__menu-btn[aria-expanded="true"] .t-navbar-overlay__menu-icon {
  background: transparent;
}

.t-navbar-overlay__menu-btn[aria-expanded="true"] .t-navbar-overlay__menu-icon::before {
  transform: rotate(45deg);
}

.t-navbar-overlay__menu-btn[aria-expanded="true"] .t-navbar-overlay__menu-icon::after {
  transform: rotate(-45deg);
}

.t-navbar-overlay:has(.t-navbar-overlay__panel.is-open) .t-navbar-overlay__brand {
  color: var(--site-on-primary);
}

.t-navbar-overlay:has(.t-navbar-overlay__panel.is-open) .t-navbar-overlay__avatar {
  border-color: color-mix(in srgb, var(--site-on-primary) 35%, transparent);
}

.t-navbar-overlay__panel {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: calc(var(--t-header-height) + 1.25rem) 0 2.25rem;
  background: var(--site-color-primary);
  color: var(--site-on-primary);
  transform: translate3d(0, -100%, 0);
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  backface-visibility: hidden;
  transition:
    transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.42s;
}

.t-navbar-overlay__panel.is-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  pointer-events: auto;
  overflow-y: auto;
  transition:
    transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s;
}

.t-navbar-overlay__panel-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  max-width: var(--t-max-width);
  margin: 0 auto;
  padding: 0 var(--t-section-padding-x);
  min-width: 0;
}

.t-navbar-overlay__link {
  font-family: var(--t-font-display);
  font-size: clamp(3.25rem, 12vw, 5rem);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.08;
  letter-spacing: var(--t-letter-spacing-tight);
  text-decoration: none;
  color: var(--site-on-primary);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: opacity 0.15s ease;
}

.t-navbar-overlay__link:hover,
.t-navbar-overlay__link:focus-visible {
  opacity: 0.72;
  color: var(--site-on-primary);
}

.t-navbar-overlay__cta {
  margin-top: clamp(1.1rem, 3vw, 1.75rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: clamp(0.45rem, 1vw, 0.65rem) clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px solid color-mix(in srgb, var(--site-on-primary) 55%, transparent);
  font-size: clamp(0.75rem, 1.35vw, 0.875rem);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--site-on-primary);
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.t-navbar-overlay__cta:hover,
.t-navbar-overlay__cta:focus-visible {
  background: var(--site-on-primary);
  color: var(--site-color-primary);
}

.t-navbar-overlay__brand:focus-visible,
.t-navbar-overlay__menu-btn:focus-visible,
.t-navbar-overlay__link:focus-visible,
.t-navbar-overlay__cta:focus-visible,
.t-navbar-overlay__bar-cta:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 3px;
}

.t-navbar-overlay:has(.t-navbar-overlay__panel.is-open)
  .t-navbar-overlay__brand:focus-visible,
.t-navbar-overlay:has(.t-navbar-overlay__panel.is-open)
  .t-navbar-overlay__menu-btn:focus-visible,
.t-navbar-overlay__link:focus-visible,
.t-navbar-overlay__cta:focus-visible {
  outline-color: var(--site-on-primary);
}

body.site-page:has(.t-navbar-overlay__panel.is-open) {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .t-navbar-overlay__panel {
    transform: none;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  .t-navbar-overlay__panel.is-open {
    opacity: 1;
    transition: opacity 0.2s ease, visibility 0s;
  }

  .t-navbar-overlay__menu-icon,
  .t-navbar-overlay__menu-icon::before,
  .t-navbar-overlay__menu-icon::after,
  .t-navbar-overlay__brand,
  .t-navbar-overlay__link,
  .t-navbar-overlay__cta {
    transition: none;
  }
}


@media (max-width: 419px) {
  .t-navbar-overlay__name {
    max-width: min(12rem, calc(100vw - 9rem));
  }
}

/*
 * navbar variant: "navbar-index"
 * Editorial running head — name centered, links flanking left and right.
 * Distinct from Segmented (brand left, all links in a center island) and
 * Masthead (two rows, name left, links below).
 */

.site-page[data-theme="portfolio"]:has(.t-navbar-index) {
  --t-header-height: 3.75rem;
  --t-header-float-gap: 0;
  --t-header-offset: calc(var(--t-header-height) + 0.5rem);
}

.t-navbar-index {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--t-bg-primary) 90%, transparent);
  border-bottom: 1px solid var(--t-border);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  transition: box-shadow 0.2s ease;
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .t-navbar-index {
    background: var(--t-bg-primary);
  }
}

.t-navbar-index.is-compact {
  box-shadow: var(--t-shadow-sm);
}

.t-navbar-index__shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  max-width: var(--t-max-width);
  margin: 0 auto;
  min-height: var(--t-header-height);
  padding: 0 var(--t-section-padding-x);
  min-width: 0;
}

.t-navbar-index--solo .t-navbar-index__shell {
  display: flex;
  justify-content: space-between;
}

.t-navbar-index__west {
  display: none;
  justify-content: flex-end;
  align-items: center;
  gap: 1.15rem;
  min-width: 0;
  padding-right: 0.35rem;
}

.t-navbar-index__east {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.t-navbar-index__east-nav {
  display: none;
  align-items: center;
  gap: 1.15rem;
  min-width: 0;
}

.t-navbar-index__brand {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 0.55rem;
  min-width: 0;
  max-width: 100%;
  text-decoration: none;
  color: var(--t-text-primary);
}

.t-navbar-index__brand:hover {
  color: var(--t-text-primary);
}

.t-navbar-index__avatar,
.t-navbar-index__mark {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.t-navbar-index__avatar {
  border: 1px solid var(--t-avatar-border-strong);
  background: var(--t-bg-muted);
}

.t-navbar-index__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t-navbar-index__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--t-accent);
  color: var(--t-accent-contrast);
  font-size: 0.5rem;
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.04em;
}

.t-navbar-index__name {
  font-family: var(--t-font-display);
  font-size: 0.9375rem;
  font-weight: var(--t-font-weight-normal);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-navbar-index__link {
  font-size: 0.75rem;
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--t-text-secondary);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.t-navbar-index__link:hover,
.t-navbar-index__link:focus-visible {
  color: var(--t-text-primary);
}

.t-navbar-index__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--t-border-strong);
  background: var(--t-bg-primary);
  font-size: 0.6875rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--t-text-primary);
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.t-navbar-index__cta:hover,
.t-navbar-index__cta:focus-visible {
  background: var(--t-accent);
  border-color: var(--t-accent);
  color: var(--t-accent-contrast);
}

.t-navbar-index__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.45rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--t-text-primary);
  flex-shrink: 0;
}

.t-navbar-index__menu-icon {
  width: 1.15rem;
  height: 1.5px;
  background: currentColor;
  position: relative;
  display: block;
  transition: background 0.2s ease;
}

.t-navbar-index__menu-icon::before,
.t-navbar-index__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s ease, top 0.25s ease;
}

.t-navbar-index__menu-icon::before {
  top: -5px;
}

.t-navbar-index__menu-icon::after {
  top: 5px;
}

.t-navbar-index__menu-btn[aria-expanded="true"] .t-navbar-index__menu-icon {
  background: transparent;
}

.t-navbar-index__menu-btn[aria-expanded="true"] .t-navbar-index__menu-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.t-navbar-index__menu-btn[aria-expanded="true"] .t-navbar-index__menu-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.t-navbar-index__drawer {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--t-border);
}

.t-navbar-index__drawer.is-open {
  display: flex;
}

.t-navbar-index__drawer a {
  padding: 0.9rem var(--t-section-padding-x);
  border-bottom: 1px solid var(--t-border);
  text-decoration: none;
  color: var(--t-text-primary);
  font-size: 0.9375rem;
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.04em;
}

.t-navbar-index__drawer a:hover {
  background: var(--t-hover-surface);
}

.t-navbar-index__drawer-cta {
  margin: 0.85rem var(--t-section-padding-x) 1rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--t-accent);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: var(--t-font-weight-semibold);
  color: var(--t-accent-contrast);
  background: var(--t-accent);
}

.t-navbar-index__drawer-cta:hover {
  background: var(--t-accent-hover);
  color: var(--t-accent-contrast);
}

.t-navbar-index__brand:focus-visible,
.t-navbar-index__link:focus-visible,
.t-navbar-index__cta:focus-visible,
.t-navbar-index__menu-btn:focus-visible,
.t-navbar-index__drawer a:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .t-navbar-index,
  .t-navbar-index__cta,
  .t-navbar-index__link,
  .t-navbar-index__menu-icon,
  .t-navbar-index__menu-icon::before,
  .t-navbar-index__menu-icon::after {
    transition: none;
  }
}

@media (min-width: 900px) {
  .t-navbar-index__west,
  .t-navbar-index__east-nav {
    display: flex;
  }

  .t-navbar-index__east {
    justify-content: flex-start;
    padding-left: 0.35rem;
  }

  .t-navbar-index__menu-btn {
    display: none;
  }

  .t-navbar-index__drawer {
    display: none !important;
  }

  .t-navbar-index__cta {
    margin-left: 0.35rem;
  }
}

@media (max-width: 899px) {
  .t-navbar-index__shell {
    display: flex;
    justify-content: space-between;
  }

  .t-navbar-index__brand {
    justify-self: start;
    padding: 0;
    background: transparent;
  }

  .t-navbar-index__cta {
    display: none;
  }
}

@media (max-width: 419px) {
  .t-navbar-index__name {
    max-width: min(12rem, calc(100vw - 7.5rem));
  }
}

/*
 * navbar variant: "navbar-gate"
 * Creative — brand + Menu/Close plus; stacked panels slide in from the right.
 * Distinct from Overlay (top clip-path curtain, hamburger).
 */

.site-page[data-theme="portfolio"]:has(.t-navbar-gate) {
  --t-header-height: 4rem;
  --t-header-float-gap: 0;
  --t-header-offset: calc(var(--t-header-height) + 0.5rem);
}

.t-navbar-gate {
  --gate-ease: cubic-bezier(0.65, 0.01, 0.05, 0.99);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
}

.t-navbar-gate::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--t-header-height);
  z-index: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--t-bg-primary) 82%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  transition: opacity 0.25s ease;
}

.t-navbar-gate:has(.t-navbar-gate__panel.is-open)::before {
  opacity: 0;
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .t-navbar-gate::before {
    background: var(--t-bg-primary);
  }
}

.t-navbar-gate__bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--t-header-height);
  max-width: var(--t-max-width);
  margin: 0 auto;
  padding: 0 var(--t-section-padding-x);
  pointer-events: auto;
}

.t-navbar-gate__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  text-decoration: none;
  color: var(--t-text-primary);
  transition: color 0.25s ease;
}

.t-navbar-gate__brand:hover {
  color: var(--t-text-primary);
}

.t-navbar-gate__avatar,
.t-navbar-gate__mark {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.t-navbar-gate__avatar {
  border: 1px solid var(--t-avatar-border-strong);
  background: var(--t-bg-muted);
}

.t-navbar-gate__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t-navbar-gate__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--t-accent);
  color: var(--t-accent-contrast);
  font-size: 0.5rem;
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.04em;
}

.t-navbar-gate__name {
  font-family: var(--t-font-display);
  font-size: 0.9375rem;
  font-weight: var(--t-font-weight-normal);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-navbar-gate__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.t-navbar-gate__bar-cta {
  font-size: 0.75rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--t-text-primary);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--t-border-strong);
}

.t-navbar-gate__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-right: -0.35rem;
  padding: 0.35rem 0.35rem 0.35rem 0.7rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--t-text-primary);
  transition: color 0.25s ease;
}

.t-navbar-gate__toggle-copy {
  display: grid;
  overflow: hidden;
  height: 1em;
  font-size: 0.8125rem;
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.t-navbar-gate__toggle-copy span {
  grid-area: 1 / 1;
  transition: transform 0.5s var(--gate-ease);
}

.t-navbar-gate__toggle-copy span:last-child {
  transform: translateY(110%);
}

.t-navbar-gate__toggle[aria-expanded="true"] .t-navbar-gate__toggle-copy span:first-child {
  transform: translateY(-110%);
}

.t-navbar-gate__toggle[aria-expanded="true"] .t-navbar-gate__toggle-copy span:last-child {
  transform: translateY(0);
}

.t-navbar-gate__plus-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 2.25rem;
}

.t-navbar-gate__plus {
  width: 0.72rem;
  height: 0.72rem;
  display: block;
  transition: transform 0.5s var(--gate-ease);
}

.t-navbar-gate__toggle[aria-expanded="true"] .t-navbar-gate__plus {
  transform: rotate(45deg);
}

.t-navbar-gate:has(.t-navbar-gate__panel.is-open) .t-navbar-gate__brand,
.t-navbar-gate:has(.t-navbar-gate__panel.is-open) .t-navbar-gate__toggle {
  color: var(--site-on-primary);
}

.t-navbar-gate:has(.t-navbar-gate__panel.is-open) .t-navbar-gate__avatar {
  border-color: color-mix(in srgb, var(--site-on-primary) 35%, transparent);
}

.t-navbar-gate__panel {
  position: fixed;
  inset: 0;
  z-index: 1;
  visibility: hidden;
  pointer-events: none;
}

.t-navbar-gate__panel.is-open {
  visibility: visible;
  pointer-events: auto;
}

.t-navbar-gate__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--site-color-text) 28%, transparent);
  opacity: 0;
  transition: opacity 0.45s var(--gate-ease);
}

.t-navbar-gate__panel.is-open .t-navbar-gate__veil {
  opacity: 1;
}

.t-navbar-gate__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.t-navbar-gate__layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.t-navbar-gate__layer {
  position: absolute;
  inset: 0;
  transform: translateX(101%);
  transition: transform 0.575s var(--gate-ease);
}

.t-navbar-gate__layer--1 {
  background: color-mix(in srgb, var(--site-color-accent) 55%, var(--site-color-primary));
  transition-delay: 0s;
}

.t-navbar-gate__layer--2 {
  background: color-mix(in srgb, var(--site-color-primary) 78%, var(--site-color-secondary));
  transition-delay: 0.12s;
}

.t-navbar-gate__layer--3 {
  background: var(--site-color-primary);
  transition-delay: 0.24s;
}

.t-navbar-gate__panel.is-open .t-navbar-gate__layer {
  transform: translateX(0);
}

.t-navbar-gate__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  min-height: 100%;
  max-width: var(--t-max-width);
  margin: 0 auto;
  padding: var(--t-header-height) var(--t-section-padding-x) 8.75rem;
  min-width: 0;
}

.t-navbar-gate__list {
  list-style: none;
  margin: -1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  min-width: 0;
}

.t-navbar-gate__item {
  overflow: hidden;
  max-width: 100%;
}

.t-navbar-gate__link {
  display: inline-block;
  text-decoration: none;
  color: var(--site-on-primary);
  max-width: 100%;
}

.t-navbar-gate__link-text {
  display: block;
  font-family: var(--t-font-display);
  font-size: clamp(2.75rem, 11vw, 5.5rem);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.05;
  letter-spacing: var(--t-letter-spacing-tight);
  overflow-wrap: anywhere;
  transform: translateY(120%) rotate(8deg);
  transform-origin: left center;
  transition:
    transform 0.7s var(--gate-ease),
    opacity 0.15s ease;
}

.t-navbar-gate__link:hover .t-navbar-gate__link-text,
.t-navbar-gate__link:focus-visible .t-navbar-gate__link-text {
  opacity: 0.72;
}

.t-navbar-gate__panel.is-open .t-navbar-gate__item:nth-child(1) .t-navbar-gate__link-text {
  transform: none;
  transition-delay: 0.42s, 0s;
}

.t-navbar-gate__panel.is-open .t-navbar-gate__item:nth-child(2) .t-navbar-gate__link-text {
  transform: none;
  transition-delay: 0.48s, 0s;
}

.t-navbar-gate__panel.is-open .t-navbar-gate__item:nth-child(3) .t-navbar-gate__link-text {
  transform: none;
  transition-delay: 0.54s, 0s;
}

.t-navbar-gate__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.35rem;
  min-height: 2.75rem;
  padding: clamp(0.45rem, 1vw, 0.65rem) clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px solid color-mix(in srgb, var(--site-on-primary) 55%, transparent);
  font-size: clamp(0.75rem, 1.35vw, 0.875rem);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--site-on-primary);
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    opacity 0.45s var(--gate-ease),
    transform 0.45s var(--gate-ease);
}

.t-navbar-gate__panel.is-open .t-navbar-gate__cta {
  opacity: 1;
  transform: none;
  transition-delay: 0s, 0s, 0.62s, 0.62s;
}

.t-navbar-gate__cta:hover,
.t-navbar-gate__cta:focus-visible {
  background: var(--site-on-primary);
  color: var(--site-color-primary);
}

.t-navbar-gate__brand:focus-visible,
.t-navbar-gate__toggle:focus-visible,
.t-navbar-gate__link:focus-visible,
.t-navbar-gate__cta:focus-visible,
.t-navbar-gate__bar-cta:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 3px;
}

.t-navbar-gate:has(.t-navbar-gate__panel.is-open)
  .t-navbar-gate__brand:focus-visible,
.t-navbar-gate:has(.t-navbar-gate__panel.is-open)
  .t-navbar-gate__toggle:focus-visible,
.t-navbar-gate__link:focus-visible,
.t-navbar-gate__cta:focus-visible {
  outline-color: var(--site-on-primary);
}

body.site-page:has(.t-navbar-gate__panel.is-open) {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .t-navbar-gate__layer,
  .t-navbar-gate__link-text,
  .t-navbar-gate__cta,
  .t-navbar-gate__veil,
  .t-navbar-gate__plus,
  .t-navbar-gate__toggle-copy span,
  .t-navbar-gate__brand,
  .t-navbar-gate__toggle {
    transition: none;
  }

  .t-navbar-gate__layer {
    transform: none;
    opacity: 0;
  }

  .t-navbar-gate__panel.is-open .t-navbar-gate__layer {
    opacity: 1;
  }

  .t-navbar-gate__link-text,
  .t-navbar-gate__cta {
    transform: none;
    opacity: 1;
  }
}

@media (max-width: 479px) {
  .t-navbar-gate__toggle-copy {
    display: none;
  }

  .t-navbar-gate__toggle {
    padding: 0.25rem;
    margin-right: -0.45rem;
  }
}

@media (max-width: 419px) {
  .t-navbar-gate__name {
    max-width: min(12rem, calc(100vw - 8.5rem));
  }
}

/* Hero section — intro column (avatar + greeting) beside pitch */

.t-hero {
  padding: 0 var(--t-section-padding-x) clamp(9rem, 20vw, 12rem);
  background: var(--t-bg-primary);
  border-bottom: 1px solid var(--t-border);
}

/* hero variant: "hero-minimal" */
.t-hero--minimal {
  padding-top: calc(var(--t-hero-top-clearance) + clamp(2.5rem, 8vw, 5rem));
}

.t-hero__inner {
  max-width: var(--t-max-width);
  margin: 0 auto;
}

.t-hero__top {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 768px) {
  .t-hero__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem 4rem;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .t-hero__top {
    gap: 3.5rem 5rem;
  }
}

.t-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  min-width: 0;
}

@media (min-width: 768px) {
  .t-hero__intro {
    gap: 1.5rem;
  }
}

.t-hero__pitch {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

/* Avatar + status ring + chips */
.t-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: fit-content;
}

.t-avatar-ring {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  padding: 3px;
  background: transparent;
}

.t-avatar-wrap--open .t-avatar-ring {
  padding: 4px;
  background: linear-gradient(145deg, #15803d 0%, #4ade80 45%, #16a34a 100%);
  box-shadow:
    0 0 0 1px rgba(22, 163, 74, 0.12),
    0 6px 24px rgba(22, 163, 74, 0.22);
}

.t-avatar-wrap--hiring .t-avatar-ring {
  padding: 4px;
  background: linear-gradient(145deg, #1e40af 0%, #60a5fa 50%, #2563eb 100%);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.12),
    0 6px 24px rgba(37, 99, 235, 0.22);
}

.t-avatar-wrap--both .t-avatar-ring {
  padding: 4px;
  background: conic-gradient(
    from 220deg,
    #16a34a,
    #4ade80,
    #2563eb,
    #93c5fd,
    #16a34a
  );
  box-shadow:
    0 0 0 1px rgba(28, 61, 54, 0.08),
    0 6px 28px rgba(22, 163, 74, 0.16),
    0 6px 28px rgba(37, 99, 235, 0.14);
  animation: t-avatar-ring-shift 10s ease-in-out infinite;
}

@keyframes t-avatar-ring-shift {
  0%,
  100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(12deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-avatar-wrap--both .t-avatar-ring {
    animation: none;
  }
}

.t-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--t-bg-muted);
  flex-shrink: 0;
  border: 2px solid var(--t-avatar-border-strong);
  box-shadow:
    var(--t-shadow-sm),
    0 0 0 1px var(--t-avatar-border);
}

.t-avatar-wrap--open .t-avatar {
  border-color: rgba(22, 163, 74, 0.45);
  box-shadow:
    var(--t-shadow-sm),
    0 0 0 1px rgba(22, 163, 74, 0.15);
}

.t-avatar-wrap--hiring .t-avatar {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow:
    var(--t-shadow-sm),
    0 0 0 1px rgba(37, 99, 235, 0.15);
}

.t-avatar-wrap--both .t-avatar {
  border-color: rgba(28, 61, 54, 0.28);
  box-shadow:
    var(--t-shadow-sm),
    0 0 0 1px rgba(28, 61, 54, 0.1);
}

.t-avatar--lg {
  width: 7rem;
  height: 7rem;
}

.t-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.t-avatar__initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-font-size-xl);
  font-weight: var(--t-font-weight-semibold);
  background: var(--t-accent);
  color: var(--t-accent-contrast);
}

.t-avatar--lg .t-avatar__initials {
  font-size: var(--t-font-size-2xl);
}

.t-avatar-chips {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 32%);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  max-width: calc(100% + 1rem);
  pointer-events: none;
}

.t-avatar-chip {
  display: inline-block;
  padding: 0.22rem 0.6rem;
  border-radius: var(--t-radius-pill);
  font-size: 0.625rem;
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: nowrap;
  border: 1.5px solid transparent;
  box-shadow:
    0 2px 8px rgba(20, 20, 19, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.65) inset;
  pointer-events: auto;
  cursor: default;
  transform-origin: center bottom;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.45, 0.64, 1),
    box-shadow 0.25s ease;
}

.t-avatar-chip--open {
  background: var(--t-badge-open-bg);
  color: var(--t-badge-open-text);
  border-color: var(--t-badge-open-border);
}

.t-avatar-chip--hiring {
  background: var(--t-badge-hiring-bg);
  color: var(--t-badge-hiring-text);
  border-color: var(--t-badge-hiring-border);
}

@media (hover: hover) {
  .t-avatar-chip--open:hover {
    transform: rotate(-7deg) translateY(-3px) scale(1.06);
    box-shadow:
      0 6px 16px rgba(22, 163, 74, 0.28),
      0 0 0 1px rgba(255, 255, 255, 0.7) inset;
  }

  .t-avatar-chip--hiring:hover {
    transform: rotate(7deg) translateY(-3px) scale(1.06);
    box-shadow:
      0 6px 16px rgba(37, 99, 235, 0.28),
      0 0 0 1px rgba(255, 255, 255, 0.7) inset;
  }

  .t-avatar-wrap--both .t-avatar-chip--open:hover {
    transform: rotate(-8deg) translateY(-4px) scale(1.06);
  }

  .t-avatar-wrap--both .t-avatar-chip--hiring:hover {
    transform: rotate(8deg) translateY(-4px) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-avatar-chip {
    transition: none;
  }

  @media (hover: hover) {
    .t-avatar-chip--open:hover,
    .t-avatar-chip--hiring:hover {
      transform: none;
    }
  }
}

.t-hero__greeting {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-3xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  margin: 0;
  color: var(--t-text-primary);
  max-width: 100%;
}

.t-hero__tagline {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-hero-tagline);
  font-weight: var(--t-font-weight-semibold);
  color: var(--t-text-primary);
  line-height: var(--t-line-height-tight);
  letter-spacing: var(--t-letter-spacing-tight);
}

.t-hero__subtitle {
  margin: 0;
  color: var(--t-text-secondary);
  line-height: var(--t-line-height-relaxed);
  font-size: var(--t-font-size-lg);
  max-width: 38rem;
}

.t-hero__pitch .t-btn-group {
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .t-avatar--lg {
    width: 8.75rem;
    height: 8.75rem;
  }

  .t-avatar-chip {
    font-size: 0.6875rem;
    padding: 0.25rem 0.65rem;
  }
}

@media (min-width: 1024px) {
  .t-avatar--lg {
    width: 10rem;
    height: 10rem;
  }
}

@media (max-width: 767px) {
  .t-hero__greeting {
    font-size: var(--t-font-size-2xl);
  }

  .t-avatar-wrap--both .t-avatar-chips {
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    transform: translate(-50%, 28%);
  }
}

/*
 * hero variant: "hero-atelier"
 * Split layout — copy left, portrait right, L-frame and location pin.
 */
.site-page[data-theme="portfolio"] .t-hero--atelier {
  position: relative;
  padding: calc(var(--t-hero-top-clearance) + clamp(1.25rem, 3.5vw, 2.25rem)) 0
    clamp(3rem, 8vw, 5rem);
  border-bottom: none;
  background: var(--t-bg-primary);
  overflow: clip;
}

.site-page[data-theme="portfolio"] .t-hero-atelier__inner {
  position: relative;
  z-index: 1;
}

.site-page[data-theme="portfolio"] .t-hero-atelier__stage {
  display: flex;
  justify-content: center;
  width: 100%;
}

.site-page[data-theme="portfolio"] .t-hero-atelier__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 5vw, 3rem);
  width: 100%;
  max-width: 68rem;
}

@media (min-width: 900px) {
  .site-page[data-theme="portfolio"] .t-hero-atelier__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: center;
    gap: clamp(2.5rem, 4vw, 3.75rem);
  }

  .site-page[data-theme="portfolio"] .t-hero-atelier__visual {
    justify-self: end;
  }
}

/* Split layout is edge-tight until the centered grid has real side room. */
@media (min-width: 900px) and (max-width: 1099px) {
  .site-page[data-theme="portfolio"] .t-hero--atelier {
    padding-inline: var(--t-section-padding-x);
  }
}

/* —— Copy column —— */
.site-page[data-theme="portfolio"] .t-hero-atelier__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
  min-width: 0;
  width: 100%;
  text-align: left;
}

@media (min-width: 900px) {
  .site-page[data-theme="portfolio"] .t-hero-atelier__content {
    flex: 1;
    max-width: none;
  }
}

.site-page[data-theme="portfolio"] .t-hero-atelier__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: var(--t-line-height-normal);
}

.site-page[data-theme="portfolio"] .t-hero-atelier__intro-label {
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-hero-atelier__intro-name {
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-hero-atelier__headline {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3.5rem);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.12;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
  text-wrap: balance;
}

.site-page[data-theme="portfolio"] .t-hero-atelier__rule {
  display: block;
  width: clamp(3rem, 10vw, 4.5rem);
  height: 3px;
  border-radius: var(--t-radius-pill);
  background: linear-gradient(
    90deg,
    var(--site-color-primary),
    var(--site-color-accent)
  );
}

.site-page[data-theme="portfolio"] .t-hero-atelier__subtitle {
  margin: 0;
  max-width: 40rem;
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-hero-atelier__subtitle {
    font-size: var(--t-font-size-lg);
  }
}

.site-page[data-theme="portfolio"] .t-hero-atelier__location {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--t-font-size-base);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-hero-atelier__location-icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-hero-atelier__actions {
  margin-top: 0.25rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.site-page[data-theme="portfolio"] .t-hero-atelier__actions .t-btn {
  border-radius: var(--t-radius-sm);
}

/* —— Portrait column —— */
.site-page[data-theme="portfolio"] .t-hero-atelier__visual {
  position: relative;
  flex-shrink: 0;
}

.site-page[data-theme="portfolio"] .t-hero-atelier__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(14rem, 42vw, 20rem);
  height: clamp(14rem, 42vw, 20rem);
  transform: translate(-42%, -52%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--site-color-secondary) 38%, transparent) 0%,
    color-mix(in srgb, var(--site-color-primary) 14%, transparent) 42%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

.site-page[data-theme="portfolio"] .t-hero-atelier__frame {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: clamp(11rem, 26vw, 16rem);
  border-left: 4px solid var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-hero-atelier__photo-slot {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

.site-page[data-theme="portfolio"] .t-hero-atelier__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 0;
  box-shadow: 0 16px 40px
    color-mix(in srgb, var(--site-color-text) 12%, transparent);
}

.site-page[data-theme="portfolio"] .t-hero-atelier__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--site-color-primary) 88%, var(--site-color-text)),
    color-mix(
      in srgb,
      var(--site-color-secondary) 55%,
      var(--site-color-primary)
    )
  );
}

.site-page[data-theme="portfolio"] .t-hero-atelier__photo--initials span {
  font-family: var(--t-font-display);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-accent-contrast);
}

.site-page[data-theme="portfolio"] .t-hero-atelier__role {
  margin: 0;
  width: 100%;
  padding: 0.55rem 0.65rem 0.45rem;
  border-bottom: 4px solid var(--site-color-primary);
  font-family: var(--t-font-sans);
  font-size: clamp(0.6875rem, 1.4vw, 0.8125rem);
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--site-color-primary);
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: wrap;
}

@media (max-width: 899px) {
  .site-page[data-theme="portfolio"] .t-hero-atelier__content {
    align-items: center;
    text-align: center;
  }

  .site-page[data-theme="portfolio"] .t-hero-atelier__intro {
    justify-content: center;
  }

  .site-page[data-theme="portfolio"] .t-hero-atelier__actions {
    justify-content: center;
  }

  .site-page[data-theme="portfolio"] .t-hero-atelier__location {
    justify-content: center;
  }
}

/*
 * hero variant: "hero-sticker"
 * Playful centered hero — inline portrait, floating pills, fanned link cards.
 */
.site-page[data-theme="portfolio"] .t-hero--sticker {
  position: relative;
  padding: calc(var(--t-hero-top-clearance) + clamp(0.75rem, 2vw, 1.25rem))
    var(--t-section-padding-x) clamp(5.5rem, 12vw, 8.5rem);
  border-bottom: none;
  background: var(--t-bg-primary);
  overflow: visible;
  cursor: var(--t-hero-sticker-card-cursor, auto);
}

.site-page[data-theme="portfolio"] .t-hero--sticker * {
  cursor: inherit;
}

.site-page[data-theme="portfolio"] .t-hero-sticker__inner {
  position: relative;
  z-index: 1;
  max-width: min(72rem, 100%);
  margin: 0 auto;
}

.site-page[data-theme="portfolio"] .t-hero-sticker__stage {
  position: relative;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(0.75rem, 2vw, 1.5rem)
    clamp(2rem, 5vw, 3rem);
}

/* —— Floating skill stickers (in-flow chip bands above/below title) —— */
.site-page[data-theme="portfolio"] .t-hero-sticker__chip-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-hero-sticker__chip-band--top {
  margin-bottom: clamp(0.35rem, 1.25vw, 0.65rem);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__chip-band--bottom {
  margin-top: clamp(0.5rem, 1.5vw, 0.85rem);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__float {
  flex: 0 0 auto;
  color: var(--t-text-primary);
  opacity: 0.94;
  pointer-events: auto;
}

.site-page[data-theme="portfolio"] .t-hero-sticker__chip-band--top .t-hero-sticker__float--tr {
  margin-left: auto;
}

.site-page[data-theme="portfolio"] .t-hero-sticker__chip-band--bottom .t-hero-sticker__float--mr {
  margin-left: auto;
}

.site-page[data-theme="portfolio"]
  .t-hero-sticker__float--tl
  .t-hero-sticker__pill {
  transform: rotate(-11deg);
}

.site-page[data-theme="portfolio"]
  .t-hero-sticker__float--tr
  .t-hero-sticker__pill {
  transform: rotate(9deg);
}

.site-page[data-theme="portfolio"]
  .t-hero-sticker__float--ml
  .t-hero-sticker__pill {
  transform: rotate(-6deg);
}

.site-page[data-theme="portfolio"]
  .t-hero-sticker__float--mr
  .t-hero-sticker__pill {
  transform: rotate(4deg);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  line-height: 1.2;
  border: 1.5px solid var(--t-text-primary);
  border-radius: var(--t-radius-pill);
  box-shadow: 2px 2px 0
    color-mix(in srgb, var(--t-text-primary) 18%, transparent);
  white-space: nowrap;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.22s ease;
}

.site-page[data-theme="portfolio"]
  .t-hero-sticker__float--tl
  .t-hero-sticker__pill:hover {
  transform: rotate(-14deg) translateY(-4px) scale(1.05);
  box-shadow: 4px 5px 0
    color-mix(in srgb, var(--t-text-primary) 22%, transparent);
}

.site-page[data-theme="portfolio"]
  .t-hero-sticker__float--tr
  .t-hero-sticker__pill:hover {
  transform: rotate(12deg) translateY(-4px) scale(1.05);
  box-shadow: 4px 5px 0
    color-mix(in srgb, var(--t-text-primary) 22%, transparent);
}

.site-page[data-theme="portfolio"]
  .t-hero-sticker__float--ml
  .t-hero-sticker__pill:hover {
  transform: rotate(-9deg) translateY(-4px) scale(1.05);
  box-shadow: 4px 5px 0
    color-mix(in srgb, var(--t-text-primary) 22%, transparent);
}

.site-page[data-theme="portfolio"]
  .t-hero-sticker__float--mr
  .t-hero-sticker__pill:hover {
  transform: rotate(7deg) translateY(-4px) scale(1.05);
  box-shadow: 4px 5px 0
    color-mix(in srgb, var(--t-text-primary) 22%, transparent);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__pill--sky {
  background: color-mix(
    in oklab,
    #7dd3fc 35%,
    var(--site-color-background) 65%
  );
}

.site-page[data-theme="portfolio"] .t-hero-sticker__pill--rose {
  background: color-mix(
    in oklab,
    #fbcfe8 40%,
    var(--site-color-background) 60%
  );
}

.site-page[data-theme="portfolio"] .t-hero-sticker__pill--mint {
  background: color-mix(
    in oklab,
    #a7f3d0 38%,
    var(--site-color-background) 62%
  );
}

.site-page[data-theme="portfolio"] .t-hero-sticker__pill--sand {
  background: color-mix(
    in oklab,
    #fde68a 42%,
    var(--site-color-background) 58%
  );
}

/* —— Headline —— */
.site-page[data-theme="portfolio"] .t-hero-sticker__copy {
  position: relative;
  z-index: 1;
  text-align: center;
}

.site-page[data-theme="portfolio"] .t-hero-sticker__headline-zone {
  position: relative;
}

.site-page[data-theme="portfolio"] .t-hero-sticker__headline {
  margin: 0 auto;
  max-width: 58rem;
  font-family: var(--t-font-display);
  font-size: clamp(1.75rem, 4.5vw, 3.1rem);
  font-weight: var(--t-font-weight-bold);
  line-height: 1.22;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__greeting,
.site-page[data-theme="portfolio"] .t-hero-sticker__tagline {
  display: inline;
}

.site-page[data-theme="portfolio"] .t-hero-sticker__subtitle {
  margin: clamp(0.5rem, 1.5vw, 1rem) auto 0;
  max-width: 52rem;
  font-family: var(--t-font-sans);
  font-size: clamp(0.95rem, 2vw, 1.125rem);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__photo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  margin: 0 0.12em;
  vertical-align: -0.12em;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--site-color-background);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--t-text-primary) 12%, transparent),
    0 6px 20px color-mix(in srgb, var(--t-text-primary) 14%, transparent);
  background: var(--t-bg-elevated);
  pointer-events: auto;
  transition:
    width 0.28s cubic-bezier(0.34, 1.35, 0.64, 1),
    height 0.28s cubic-bezier(0.34, 1.35, 0.64, 1),
    margin 0.28s cubic-bezier(0.34, 1.35, 0.64, 1),
    box-shadow 0.28s ease,
    vertical-align 0.28s cubic-bezier(0.34, 1.35, 0.64, 1);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__photo-wrap:hover {
  width: 1.55em;
  height: 1.55em;
  margin-inline: 0.28em;
  vertical-align: -0.06em;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--t-text-primary) 14%, transparent),
    0 10px 28px color-mix(in srgb, var(--t-text-primary) 18%, transparent);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-page[data-theme="portfolio"] .t-hero-sticker__photo-wrap--initials {
  font-family: var(--t-font-sans);
  font-size: 0.42em;
  font-weight: var(--t-font-weight-bold);
  color: var(--t-text-secondary);
}

/* —— Sticker CTA buttons (chunky tilted pills, same language as skill chips) —— */
.site-page[data-theme="portfolio"] .t-hero-sticker__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.85rem, 2.5vw, 1.35rem);
  margin-top: clamp(0.35rem, 1.5vw, 0.75rem);
  padding: 0 clamp(0.5rem, 2vw, 1.25rem);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  max-width: 100%;
  padding: 0.85rem 1.45rem 0.9rem 1.55rem;
  text-decoration: none;
  color: var(--t-text-primary);
  font-family: var(--t-font-sans);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: var(--t-font-weight-bold);
  line-height: 1.15;
  letter-spacing: var(--t-letter-spacing-tight);
  border: 2px solid var(--t-text-primary);
  border-radius: var(--t-radius-pill);
  box-shadow: 4px 4px 0
    color-mix(in srgb, var(--t-text-primary) 22%, transparent);
  transition:
    transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

.site-page[data-theme="portfolio"] .t-hero-sticker__btn--primary {
  background: var(--site-color-primary);
  color: var(--site-on-primary);
  transform: rotate(-3.5deg);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__btn--secondary {
  background: color-mix(
    in oklab,
    var(--site-color-accent) 22%,
    var(--site-color-background) 78%
  );
  color: var(--t-text-primary);
  border-color: color-mix(
    in srgb,
    var(--site-color-accent) 55%,
    var(--t-text-primary) 45%
  );
  transform: rotate(3deg);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__btn:hover {
  box-shadow: 6px 7px 0
    color-mix(in srgb, var(--t-text-primary) 26%, transparent);
  filter: brightness(1.03);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__btn--primary:hover {
  transform: rotate(-5deg) translateY(-4px) scale(1.04);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__btn--secondary:hover {
  transform: rotate(4.5deg) translateY(-4px) scale(1.04);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__btn:active {
  box-shadow: 2px 2px 0
    color-mix(in srgb, var(--t-text-primary) 20%, transparent);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__btn--primary:active {
  transform: rotate(-2deg) translateY(1px) scale(0.99);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__btn--secondary:active {
  transform: rotate(2deg) translateY(1px) scale(0.99);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__btn:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 4px;
}

.site-page[data-theme="portfolio"] .t-hero-sticker__btn-label {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-page[data-theme="portfolio"] .t-hero-sticker__btn-arrow {
  flex-shrink: 0;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.site-page[data-theme="portfolio"] .t-hero-sticker__btn:hover .t-hero-sticker__btn-arrow {
  transform: translateX(3px);
}

@media (max-width: 720px) {
  .site-page[data-theme="portfolio"] .t-hero-sticker__stage {
    padding-top: clamp(2.25rem, 6vw, 2.75rem);
    padding-bottom: clamp(2.25rem, 6vw, 2.75rem);
  }

  .site-page[data-theme="portfolio"] .t-hero-sticker__chip-band--top {
    margin-bottom: 0.25rem;
  }

  .site-page[data-theme="portfolio"] .t-hero-sticker__chip-band--bottom {
    margin-top: 0.4rem;
  }

  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--tl
    .t-hero-sticker__pill {
    transform: rotate(-11deg) scale(0.85);
  }

  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--tr
    .t-hero-sticker__pill {
    transform: rotate(9deg) scale(0.85);
  }

  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--ml
    .t-hero-sticker__pill {
    transform: rotate(-6deg) scale(0.85);
  }

  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--mr
    .t-hero-sticker__pill {
    transform: rotate(4deg) scale(0.85);
  }

  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--tl
    .t-hero-sticker__pill:hover {
    transform: rotate(-14deg) translateY(-3px) scale(0.92);
  }

  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--tr
    .t-hero-sticker__pill:hover {
    transform: rotate(12deg) translateY(-3px) scale(0.92);
  }

  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--ml
    .t-hero-sticker__pill:hover {
    transform: rotate(-9deg) translateY(-3px) scale(0.92);
  }

  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--mr
    .t-hero-sticker__pill:hover {
    transform: rotate(7deg) translateY(-3px) scale(0.92);
  }

  .site-page[data-theme="portfolio"] .t-hero-sticker__cta {
    flex-direction: column;
    gap: 0.75rem;
  }

  .site-page[data-theme="portfolio"] .t-hero-sticker__btn {
    width: min(100%, 18rem);
    justify-content: space-between;
  }

  .site-page[data-theme="portfolio"] .t-hero-sticker__btn--primary,
  .site-page[data-theme="portfolio"] .t-hero-sticker__btn--secondary {
    transform: none;
  }

  .site-page[data-theme="portfolio"] .t-hero-sticker__btn--primary:hover,
  .site-page[data-theme="portfolio"] .t-hero-sticker__btn--secondary:hover {
    transform: translateY(-3px) scale(1.02);
  }

  .site-page[data-theme="portfolio"] .t-hero-sticker__btn--primary:active,
  .site-page[data-theme="portfolio"] .t-hero-sticker__btn--secondary:active {
    transform: translateY(1px) scale(0.99);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-hero-sticker__photo-wrap {
    transition: none;
  }

  .site-page[data-theme="portfolio"] .t-hero-sticker__photo-wrap:hover {
    width: 1.15em;
    height: 1.15em;
    margin: 0 0.12em;
    vertical-align: -0.12em;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--t-text-primary) 12%, transparent),
      0 6px 20px color-mix(in srgb, var(--t-text-primary) 14%, transparent);
  }

  .site-page[data-theme="portfolio"] .t-hero-sticker__pill {
    transition: none;
  }

  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--tl
    .t-hero-sticker__pill:hover,
  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--tr
    .t-hero-sticker__pill:hover,
  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--ml
    .t-hero-sticker__pill:hover,
  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--mr
    .t-hero-sticker__pill:hover {
    transform: none;
    box-shadow: 2px 2px 0
      color-mix(in srgb, var(--t-text-primary) 18%, transparent);
  }

  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--tl
    .t-hero-sticker__pill {
    transform: rotate(-11deg);
  }

  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--tr
    .t-hero-sticker__pill {
    transform: rotate(9deg);
  }

  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--ml
    .t-hero-sticker__pill {
    transform: rotate(-6deg);
  }

  .site-page[data-theme="portfolio"]
    .t-hero-sticker__float--mr
    .t-hero-sticker__pill {
    transform: rotate(4deg);
  }

  .site-page[data-theme="portfolio"] .t-hero-sticker__btn,
  .site-page[data-theme="portfolio"] .t-hero-sticker__btn-arrow {
    transition: none;
  }

  .site-page[data-theme="portfolio"] .t-hero-sticker__btn--primary:hover {
    transform: rotate(-3.5deg);
  }

  .site-page[data-theme="portfolio"] .t-hero-sticker__btn--secondary:hover {
    transform: rotate(3deg);
  }

  .site-page[data-theme="portfolio"]
    .t-hero-sticker__btn:hover
    .t-hero-sticker__btn-arrow {
    transform: none;
  }
}

/*
 * hero variant: "hero-terminal"
 * Dark terminal aesthetic — scramble text, grid, noise, framed portrait.
 */
.site-page[data-theme="portfolio"] .t-hero--terminal {
  --ht-mono:
    ui-monospace, "Cascadia Code", "SF Mono", "Fira Code", Menlo, monospace;

  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(30rem, 72vh, 42rem);
  padding: calc(var(--t-hero-top-clearance) + clamp(1.25rem, 3vw, 2.5rem))
    var(--t-section-padding-x) clamp(2.75rem, 6.5vw, 4.5rem);
  overflow: hidden;
  background: var(--t-bg-primary);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-hero--terminal ::selection {
  background: color-mix(in srgb, var(--t-accent) 30%, transparent);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-hero-terminal__noise {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: overlay;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image:
    linear-gradient(to right, var(--t-text-secondary) 1px, transparent 1px),
    linear-gradient(to bottom, var(--t-text-secondary) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: min(64rem, 100%);
  margin: 0 auto;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__mono {
  font-family: var(--ht-mono);
}

.site-page[data-theme="portfolio"] .t-hero-terminal__accent {
  color: var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-hero-terminal__pin {
  flex-shrink: 0;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: clamp(2.5rem, 6.5vw, 4.5rem);
  font-weight: var(--t-font-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-hero-terminal__title.is-scramble-locked,
.site-page[data-theme="portfolio"] .t-hero-terminal__role.is-scramble-locked {
  white-space: nowrap;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__greeting {
  color: var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-hero-terminal__cursor {
  display: inline-block;
  width: 3px;
  height: 0.88em;
  margin-left: 0.2rem;
  vertical-align: middle;
  background: var(--t-accent);
  animation: t-hero-terminal-blink 1.06s step-end infinite;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__role-cursor {
  width: 2px;
  height: 1em;
  background: color-mix(in oklab, var(--t-accent) 60%, transparent);
}

@keyframes t-hero-terminal-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.site-page[data-theme="portfolio"] .t-hero-terminal__role-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__role {
  margin: 0;
  padding-inline-start: 0;
  text-indent: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-hero-terminal__role-text.is-done {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-hero-terminal__subtitle {
  margin: 0;
  max-width: 32rem;
  font-size: 1rem;
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-hero-terminal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.5rem;
  padding-top: 0.25rem;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__action {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.875rem;
  color: var(--t-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__action--primary {
  color: var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-hero-terminal__action:hover,
.site-page[data-theme="portfolio"] .t-hero-terminal__action:focus-visible {
  color: color-mix(in oklab, var(--t-accent) 80%, var(--t-text-primary) 20%);
}

.site-page[data-theme="portfolio"]
  .t-hero-terminal__action:not(.t-hero-terminal__action--primary):hover,
.site-page[data-theme="portfolio"]
  .t-hero-terminal__action:not(
    .t-hero-terminal__action--primary
  ):focus-visible {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-hero-terminal__action-label {
  position: relative;
}

.site-page[data-theme="portfolio"]
  .t-hero-terminal__action--primary
  .t-hero-terminal__action-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2rem;
  height: 1px;
  background: color-mix(in oklab, var(--t-accent) 30%, transparent);
  transition: background 0.2s ease;
}

.site-page[data-theme="portfolio"]
  .t-hero-terminal__action--primary:hover
  .t-hero-terminal__action-label::after,
.site-page[data-theme="portfolio"]
  .t-hero-terminal__action--primary:focus-visible
  .t-hero-terminal__action-label::after {
  background: color-mix(in oklab, var(--t-accent) 60%, transparent);
}

.site-page[data-theme="portfolio"]
  .t-hero-terminal__action:not(.t-hero-terminal__action--primary)
  .t-hero-terminal__action-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  width: 0;
  height: 1px;
  background: var(--t-text-secondary);
  transition: width 0.3s ease;
}

.site-page[data-theme="portfolio"]
  .t-hero-terminal__action:not(.t-hero-terminal__action--primary):hover
  .t-hero-terminal__action-label::after,
.site-page[data-theme="portfolio"]
  .t-hero-terminal__action:not(.t-hero-terminal__action--primary):focus-visible
  .t-hero-terminal__action-label::after {
  width: 100%;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__action-icon {
  transition: transform 0.2s ease;
}

.site-page[data-theme="portfolio"]
  .t-hero-terminal__action--primary:hover
  .t-hero-terminal__action-icon,
.site-page[data-theme="portfolio"]
  .t-hero-terminal__action--primary:focus-visible
  .t-hero-terminal__action-icon {
  transform: translate(2px, 2px);
}

.site-page[data-theme="portfolio"] .t-hero-terminal__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  width: 100%;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__frame {
  position: relative;
  width: min(100%, 13.5rem);
}

.site-page[data-theme="portfolio"] .t-hero-terminal__corner {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  border-color: color-mix(in oklab, var(--t-accent) 40%, transparent);
  pointer-events: none;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-page[data-theme="portfolio"] .t-hero-terminal__corner--tl {
  top: -0.5rem;
  left: -0.5rem;
  border-top: 1px solid;
  border-left: 1px solid;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__corner--tr {
  top: -0.5rem;
  right: -0.5rem;
  border-top: 1px solid;
  border-right: 1px solid;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__corner--bl {
  bottom: -0.5rem;
  left: -0.5rem;
  border-bottom: 1px solid;
  border-left: 1px solid;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__corner--br {
  bottom: -0.5rem;
  right: -0.5rem;
  border-bottom: 1px solid;
  border-right: 1px solid;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__photo-slot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--t-bg-elevated);
  border: 1px solid var(--t-border-strong);
  transition: border-color 0.35s ease;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}

.site-page[data-theme="portfolio"]
  .t-hero-terminal__frame:hover
  .t-hero-terminal__corner {
  width: 1.85rem;
  height: 1.85rem;
  border-color: var(--t-accent);
}

.site-page[data-theme="portfolio"]
  .t-hero-terminal__frame:hover
  .t-hero-terminal__corner--tl {
  transform: translate(-4px, -4px);
}

.site-page[data-theme="portfolio"]
  .t-hero-terminal__frame:hover
  .t-hero-terminal__corner--tr {
  transform: translate(4px, -4px);
}

.site-page[data-theme="portfolio"]
  .t-hero-terminal__frame:hover
  .t-hero-terminal__corner--bl {
  transform: translate(-4px, 4px);
}

.site-page[data-theme="portfolio"]
  .t-hero-terminal__frame:hover
  .t-hero-terminal__corner--br {
  transform: translate(4px, 4px);
}

.site-page[data-theme="portfolio"]
  .t-hero-terminal__frame:hover
  .t-hero-terminal__photo-slot {
  border-color: color-mix(
    in oklab,
    var(--t-accent) 35%,
    var(--t-border-strong) 65%
  );
}

.site-page[data-theme="portfolio"] .t-hero-terminal__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: color-mix(in oklab, var(--t-accent) 12%, var(--t-bg-elevated));
}

.site-page[data-theme="portfolio"] .t-hero-terminal__photo--initials span {
  font-family: var(--t-font-mono, var(--t-font-sans));
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-hero-terminal__scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in oklab, var(--t-accent) 5%, transparent),
    transparent
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.site-page[data-theme="portfolio"]
  .t-hero-terminal__frame:hover
  .t-hero-terminal__scanline {
  opacity: 1;
}

.site-page[data-theme="portfolio"] .t-hero-terminal__location {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  margin: clamp(1rem, 4vw, 3rem) 0 0;
  width: min(100%, 13.5rem);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-text-muted);
  text-align: right;
}

@media (max-width: 899px) {
  .site-page[data-theme="portfolio"] .t-hero-terminal__copy {
    align-items: center;
    text-align: center;
  }

  .site-page[data-theme="portfolio"] .t-hero-terminal__title,
  .site-page[data-theme="portfolio"] .t-hero-terminal__role,
  .site-page[data-theme="portfolio"] .t-hero-terminal__subtitle {
    text-align: center;
  }

  .site-page[data-theme="portfolio"] .t-hero-terminal__role-block {
    align-items: center;
  }

  .site-page[data-theme="portfolio"] .t-hero-terminal__actions {
    justify-content: center;
  }

  .site-page[data-theme="portfolio"] .t-hero-terminal__aside {
    align-items: center;
  }

  .site-page[data-theme="portfolio"] .t-hero-terminal__location {
    justify-content: center;
    text-align: center;
  }
}

@media (min-width: 900px) {
  .site-page[data-theme="portfolio"] .t-hero-terminal__layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 4vw, 3rem);
    align-items: stretch;
  }

  .site-page[data-theme="portfolio"] .t-hero-terminal__frame {
    width: min(100%, 15rem);
  }

  .site-page[data-theme="portfolio"] .t-hero-terminal__location {
    width: min(100%, 15rem);
  }

  .site-page[data-theme="portfolio"] .t-hero-terminal__title {
    font-size: clamp(3rem, 5.5vw, 5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-hero-terminal__cursor {
    animation: none;
    opacity: 1;
  }

  .site-page[data-theme="portfolio"] .t-hero-terminal__noise {
    display: none;
  }

  .site-page[data-theme="portfolio"] .t-hero-terminal__corner {
    transition: none;
  }

  .site-page[data-theme="portfolio"]
    .t-hero-terminal__frame:hover
    .t-hero-terminal__corner {
    transform: none;
  }
}

/*
 * hero variant: "hero-playful"
 * Pop-art split layout — greeting badge, bold tagline headline, draggable photo card.
 */
.site-page[data-theme="portfolio"] .t-hero--playful {
  --hero-playful-scroll: 0;
  --hero-playful-shape-1: var(--site-color-primary);
  --hero-playful-shape-2: color-mix(in srgb, var(--site-color-primary) 82%, white);
  --hero-playful-shape-3: color-mix(in srgb, var(--site-color-primary) 62%, white);
  --hero-playful-shape-4: color-mix(in srgb, var(--site-color-primary) 88%, var(--site-color-text));
  --hero-playful-sticker: var(--site-color-primary);
  --hero-playful-star: color-mix(in srgb, var(--site-color-accent) 75%, white);

  position: relative;
  min-height: auto;
  display: flex;
  align-items: center;
  padding: calc(var(--t-hero-top-clearance) + 1.5rem) var(--t-section-padding-x)
    clamp(3rem, 7vw, 4.5rem);
  border-bottom: none;
  background: var(--t-bg-primary);
  overflow: clip;
}

.site-page[data-theme="portfolio"] .t-hero-playful__dots {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--t-text-primary) 18%, transparent) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-hero-playful__shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-hero-playful__shape {
  position: absolute;
  opacity: 0.72;
}

.site-page[data-theme="portfolio"] .t-hero-playful__shape--1 {
  top: 13%;
  left: 4%;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: var(--hero-playful-shape-1);
  transform: translateY(calc(var(--hero-playful-scroll) * -40px))
    rotate(calc(var(--hero-playful-scroll) * 20deg));
}

.site-page[data-theme="portfolio"] .t-hero-playful__shape--2 {
  top: 60%;
  right: 8%;
  width: 6rem;
  height: 6rem;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: var(--hero-playful-shape-2);
  transform: translateY(calc(var(--hero-playful-scroll) * -60px))
    rotate(calc(var(--hero-playful-scroll) * -15deg));
}

.site-page[data-theme="portfolio"] .t-hero-playful__shape--3 {
  top: 46%;
  left: 12%;
  bottom: auto;
  width: 6rem;
  height: 6rem;
  background: var(--hero-playful-shape-3);
  transform: translateY(calc(var(--hero-playful-scroll) * -30px))
    rotate(calc(var(--hero-playful-scroll) * 25deg));
}

.site-page[data-theme="portfolio"] .t-hero-playful__shape--4 {
  top: 30%;
  right: 10%;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50% 50% 0 50%;
  background: var(--hero-playful-shape-4);
  transform: translateY(calc(var(--hero-playful-scroll) * -50px));
}

.site-page[data-theme="portfolio"] .t-hero-playful__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
}

.site-page[data-theme="portfolio"] .t-hero-playful__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-hero-playful__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2.5rem, 4vw, 4rem);
  }

  /* Rectangle sits beside the CTA / social row in the copy column */
  .site-page[data-theme="portfolio"] .t-hero-playful__shape--3 {
    top: 76%;
    left: 29%;
  }

  .site-page[data-theme="portfolio"] .t-hero-playful__shape--1 {
    top: 17%;
    left: 4%;
  }

  .site-page[data-theme="portfolio"] .t-hero-playful__shape--4 {
    top: 30%;
    right: 26%;
  }
}

.site-page[data-theme="portfolio"] .t-hero-playful__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-hero-playful__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.5rem 1rem;
  border: 2px solid var(--t-text-primary);
  border-radius: var(--t-radius-pill);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-bold);
  color: var(--t-text-primary);
  background: color-mix(in srgb, var(--t-bg-primary) 88%, transparent);
}

.site-page[data-theme="portfolio"] .t-hero-playful__badge-star {
  flex-shrink: 0;
  color: var(--hero-playful-star);
}

.site-page[data-theme="portfolio"] .t-hero-playful__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12em;
  font-family: var(--t-font-display);
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.site-page[data-theme="portfolio"] .t-hero-playful__title-line {
  display: block;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-hero-playful__title-line--accent {
  color: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-hero-playful__subtitle {
  margin: 0;
  max-width: 28rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-hero-playful__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-top: 0.25rem;
}

.site-page[data-theme="portfolio"] .t-hero-playful__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-bold);
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-page[data-theme="portfolio"] .t-hero-playful__cta--primary {
  color: var(--site-on-primary);
  background: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-hero-playful__cta--primary:hover,
.site-page[data-theme="portfolio"] .t-hero-playful__cta--primary:focus-visible {
  background: var(--t-accent-hover);
  color: var(--site-on-primary);
}

.site-page[data-theme="portfolio"] .t-hero-playful__cta--primary:hover .t-hero-playful__cta-icon,
.site-page[data-theme="portfolio"]
  .t-hero-playful__cta--primary:focus-visible
  .t-hero-playful__cta-icon {
  transform: translate(2px, 2px);
}

.site-page[data-theme="portfolio"] .t-hero-playful__cta-icon {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.site-page[data-theme="portfolio"] .t-hero-playful__cta-icon svg {
  display: block;
}

.site-page[data-theme="portfolio"] .t-hero-playful__cta--ghost {
  color: var(--t-text-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding-inline: 0.25rem;
}

.site-page[data-theme="portfolio"] .t-hero-playful__cta--ghost:hover,
.site-page[data-theme="portfolio"] .t-hero-playful__cta--ghost:focus-visible {
  color: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-hero-playful__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.site-page[data-theme="portfolio"] .t-hero-playful__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--t-text-primary);
  border-radius: 50%;
  color: var(--t-text-primary);
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-page[data-theme="portfolio"] .t-hero-playful__social-icon {
  width: 1.125rem;
  height: 1.125rem;
  background-color: currentColor;
  -webkit-mask-image: var(--social-icon);
  mask-image: var(--social-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-hero-playful__social-link:hover,
.site-page[data-theme="portfolio"] .t-hero-playful__social-link:focus-visible {
  background: var(--t-text-primary);
  color: var(--t-text-inverse);
}

.site-page[data-theme="portfolio"] .t-hero-playful__visual {
  display: flex;
  justify-content: center;
}

.site-page[data-theme="portfolio"] .t-hero-playful__photo-drag {
  position: relative;
  cursor: pointer;
  user-select: none;
  border: none;
  padding: 0;
  background: transparent;
  font: inherit;
}

.site-page[data-theme="portfolio"] .t-hero-playful__photo-drag:focus-visible {
  outline: 2px solid var(--site-color-accent);
  outline-offset: 6px;
  border-radius: 2.5rem;
}

.site-page[data-theme="portfolio"] .t-hero-playful__photo-drag.is-clicked .t-hero-playful__photo-card {
  animation:
    t-hero-playful-photo-click 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    t-hero-playful-shadow-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-page[data-theme="portfolio"] .t-hero-playful__photo-drag.is-clicked .t-hero-playful__photo-glow {
  animation: t-hero-playful-glow-pulse 0.5s ease;
}

@keyframes t-hero-playful-photo-click {
  0% {
    transform: scale(1) rotate(0deg);
  }
  35% {
    transform: scale(1.05) rotate(6deg);
  }
  65% {
    transform: scale(0.98) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes t-hero-playful-shadow-pop {
  0%,
  100% {
    box-shadow: 8px 8px 0 0 var(--t-text-primary);
  }
  40% {
    box-shadow: 14px 14px 0 0 var(--site-color-accent);
  }
}

@keyframes t-hero-playful-glow-pulse {
  0%,
  100% {
    opacity: 0.28;
    transform: scale(1);
  }
  45% {
    opacity: 0.5;
    transform: scale(1.08);
  }
}

.site-page[data-theme="portfolio"] .t-hero-playful__photo-glow {
  position: absolute;
  inset: -1rem;
  border-radius: 3rem;
  background: var(--site-color-accent);
  opacity: 0.28;
  filter: blur(24px);
}

.site-page[data-theme="portfolio"] .t-hero-playful__photo-card {
  position: relative;
  width: min(18rem, 78vw);
  aspect-ratio: 3 / 4;
  border: 4px solid var(--t-text-primary);
  border-radius: 2.5rem;
  background: var(--t-bg-primary);
  box-shadow: 8px 8px 0 0 var(--t-text-primary);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-hero-playful__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-page[data-theme="portfolio"] .t-hero-playful__photo--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 100%;
  color: var(--t-text-muted);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-page[data-theme="portfolio"] .t-hero-playful__sticker {
  position: absolute;
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-hero-playful__sticker--star {
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-color-primary);
  transform: rotate(12deg);
}

.site-page[data-theme="portfolio"] .t-hero-playful__sticker--star svg {
  width: 1.75rem;
  height: 1.75rem;
}

.site-page[data-theme="portfolio"] .t-hero-playful__sticker--location {
  bottom: 1rem;
  left: 1rem;
  max-width: calc(100% - 3rem);
  padding: 0.4rem 1rem;
  border-radius: var(--t-radius-pill);
  background: var(--hero-playful-sticker);
  color: var(--t-text-inverse);
  font-family: var(--t-font-sans);
  font-size: 0.75rem;
  font-weight: var(--t-font-weight-bold);
  white-space: normal;
  line-height: 1.3;
  transform: rotate(-6deg);
}

/* Entrance motion */
.site-page[data-theme="portfolio"] .t-hero-playful__reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"]
  .t-hero--playful.is-ready
  .t-hero-playful__reveal {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"]
  .t-hero--playful.is-ready
  .t-hero-playful__social-link {
  animation: t-hero-playful-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1)
    backwards;
  animation-delay: calc(600ms + var(--social-i, 0) * 80ms);
}

.site-page[data-theme="portfolio"] .t-hero-playful__social-link:nth-child(1) {
  --social-i: 0;
}
.site-page[data-theme="portfolio"] .t-hero-playful__social-link:nth-child(2) {
  --social-i: 1;
}
.site-page[data-theme="portfolio"] .t-hero-playful__social-link:nth-child(3) {
  --social-i: 2;
}

@keyframes t-hero-playful-pop-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-hero-playful__shape {
    transform: none !important;
  }

  .site-page[data-theme="portfolio"] .t-hero-playful__reveal,
  .site-page[data-theme="portfolio"]
    .t-hero--playful.is-ready
    .t-hero-playful__reveal {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .site-page[data-theme="portfolio"] .t-hero-playful__photo-drag {
    cursor: default;
  }

  .site-page[data-theme="portfolio"] .t-hero-playful__photo-drag.is-clicked .t-hero-playful__photo-card,
  .site-page[data-theme="portfolio"] .t-hero-playful__photo-drag.is-clicked .t-hero-playful__photo-glow {
    animation: none;
  }
}

@media (max-width: 1023px) {
  .site-page[data-theme="portfolio"] .t-hero--playful {
    padding-bottom: clamp(4.5rem, 14vw, 6rem);
  }

  .site-page[data-theme="portfolio"] .t-hero-playful__copy {
    align-items: center;
    text-align: center;
  }

  .site-page[data-theme="portfolio"] .t-hero-playful__subtitle {
    margin-inline: auto;
  }

  .site-page[data-theme="portfolio"] .t-hero-playful__actions,
  .site-page[data-theme="portfolio"] .t-hero-playful__social {
    justify-content: center;
  }
}

/*
 * hero variant: "hero-letterhead"
 * Manifesto nameplate — oversized name, large square portrait, location under photo.
 */
.site-page[data-theme="portfolio"] .t-hero--letterhead {
  position: relative;
  min-height: clamp(26rem, 64vh, 36rem);
  display: flex;
  align-items: center;
  padding: calc(var(--t-hero-top-clearance) + clamp(1.5rem, 3.5vw, 2.5rem))
    var(--t-section-padding-x) clamp(2.5rem, 5.5vw, 4rem);
  border-bottom: 1px solid var(--t-border);
  background:
    radial-gradient(
      ellipse 55% 70% at 72% 48%,
      color-mix(in srgb, var(--site-color-primary) 6%, transparent) 0%,
      transparent 70%
    ),
    var(--t-bg-primary);
  overflow: clip;
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__inner {
  width: 100%;
  max-width: var(--t-max-width);
  margin-inline: auto;
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-width: 0;
}

@media (min-width: 720px) {
  .site-page[data-theme="portfolio"] .t-hero-letterhead__stage {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.25rem, 3vw, 3.5rem);
  }
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 32rem;
  text-align: center;
}

@media (min-width: 720px) {
  .site-page[data-theme="portfolio"] .t-hero-letterhead__copy {
    align-items: flex-start;
    text-align: left;
  }
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__kicker {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__nameplate {
  margin: 0;
  max-width: 100%;
  font-family: var(--t-font-display);
  font-size: clamp(2.5rem, 7.5vw, 4.75rem);
  font-weight: var(--t-font-weight-semibold);
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--t-text-primary);
  text-wrap: balance;
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__redline {
  display: block;
  width: 3.5rem;
  height: 3px;
  margin: 0.25rem auto 0.1rem;
  background: var(--site-color-accent);
}

@media (min-width: 720px) {
  .site-page[data-theme="portfolio"] .t-hero-letterhead__redline {
    margin-inline: 0;
  }
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__manifesto {
  margin: 0;
  max-width: 30rem;
  font-family: var(--t-font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.35;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
  text-wrap: balance;
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__manifesto--name {
  font-size: clamp(2.5rem, 7.5vw, 4.75rem);
  font-style: normal;
  font-weight: var(--t-font-weight-semibold);
  line-height: 0.94;
  letter-spacing: -0.045em;
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__standfirst {
  margin: 0;
  max-width: 28rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__role {
  margin: 0.1rem 0 0;
  font-family: var(--t-font-sans);
  font-size: 0.75rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__actions {
  margin-top: 0.45rem;
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 720px) {
  .site-page[data-theme="portfolio"] .t-hero-letterhead__actions {
    justify-content: flex-start;
  }
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__actions .t-btn {
  border-radius: 0;
  letter-spacing: 0.04em;
}

/* —— Square portrait + location caption —— */
.site-page[data-theme="portfolio"] .t-hero-letterhead__portrait {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  flex: 0 0 auto;
  order: -1;
  width: clamp(12rem, 55vw, 16rem);
}

@media (min-width: 720px) {
  .site-page[data-theme="portfolio"] .t-hero-letterhead__portrait {
    order: 0;
    width: clamp(12rem, 32vw, 26rem);
  }
}

@media (min-width: 900px) {
  .site-page[data-theme="portfolio"] .t-hero-letterhead__portrait {
    width: clamp(16rem, 38vw, 26rem);
  }
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid
    color-mix(in srgb, var(--t-border) 55%, var(--site-color-primary));
  background: color-mix(in srgb, var(--site-color-secondary) 12%, var(--t-bg-primary));
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--site-color-primary) 75%, var(--site-color-text)),
    color-mix(in srgb, var(--site-color-secondary) 70%, var(--site-color-primary))
  );
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__photo--initials span {
  font-family: var(--t-font-display);
  font-size: clamp(2.75rem, 7vw, 4.25rem);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: -0.04em;
  color: var(--site-on-primary);
}

.site-page[data-theme="portfolio"] .t-hero-letterhead__location {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: 0.75rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--t-text-secondary);
  text-align: center;
}

@media (min-width: 720px) {
  .site-page[data-theme="portfolio"] .t-hero-letterhead__copy {
    max-width: min(32rem, 100%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-page[data-theme="portfolio"] .t-hero-letterhead__copy > * {
    animation: t-hero-letterhead-rise 0.55s ease-out both;
  }

  .site-page[data-theme="portfolio"] .t-hero-letterhead__copy > *:nth-child(1) {
    animation-delay: 0.05s;
  }
  .site-page[data-theme="portfolio"] .t-hero-letterhead__copy > *:nth-child(2) {
    animation-delay: 0.1s;
  }
  .site-page[data-theme="portfolio"] .t-hero-letterhead__copy > *:nth-child(3) {
    animation-delay: 0.14s;
  }
  .site-page[data-theme="portfolio"] .t-hero-letterhead__copy > *:nth-child(4) {
    animation-delay: 0.18s;
  }
  .site-page[data-theme="portfolio"] .t-hero-letterhead__copy > *:nth-child(5) {
    animation-delay: 0.22s;
  }
  .site-page[data-theme="portfolio"] .t-hero-letterhead__copy > *:nth-child(6) {
    animation-delay: 0.26s;
  }
  .site-page[data-theme="portfolio"] .t-hero-letterhead__copy > *:nth-child(7) {
    animation-delay: 0.3s;
  }

  .site-page[data-theme="portfolio"] .t-hero-letterhead__portrait {
    animation: t-hero-letterhead-portrait 0.7s ease-out 0.12s both;
  }
}

@keyframes t-hero-letterhead-rise {
  from {
    opacity: 0;
    transform: translateY(0.65rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes t-hero-letterhead-portrait {
  from {
    opacity: 0;
    transform: translateX(0.9rem) translateY(0.35rem);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

/*
 * hero variant: "hero-cover"
 * Magazine cover — issue kicker, oversized tagline, postage-stamp portrait tucked into the type.
 */
.site-page[data-theme="portfolio"] .t-hero--cover {
  --cover-stamp-rot: -3.5deg;
  --cover-title-size: clamp(1.9rem, 4.2vw, 3.5rem);
  --cover-stamp-size: max(10.5rem, calc(var(--cover-title-size) * 4.85));
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(40rem, 100vh);
  min-height: max(40rem, 100svh);
  padding: calc(var(--t-hero-top-clearance) + clamp(1rem, 2.8vw, 2rem))
    var(--t-section-padding-x) clamp(3rem, 8vw, 5.5rem);
  border-bottom: 1px solid var(--t-border);
  overflow: clip;
  background: var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-hero-cover__inner,
.site-page[data-theme="portfolio"] .t-hero-cover__stage,
.site-page[data-theme="portfolio"] .t-hero-cover__copy,
.site-page[data-theme="portfolio"] .t-hero-cover__headline,
.site-page[data-theme="portfolio"] .t-hero-cover__footer {
  box-sizing: border-box;
}

.site-page[data-theme="portfolio"] .t-hero-cover__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: var(--t-max-width);
  margin-inline: auto;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-hero-cover__ghost {
  position: absolute;
  inset-inline: -0.15em;
  top: -0.22em;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  font-family: var(--t-font-display);
  font-size: clamp(3.75rem, 16vw, 11rem);
  font-weight: var(--t-font-weight-normal);
  line-height: 0.8;
  letter-spacing: -0.06em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--site-color-text) 7%, transparent);
  pointer-events: none;
  user-select: none;
}

.site-page[data-theme="portfolio"] .t-hero-cover__kicker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: var(--t-line-height-normal);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-hero-cover__kicker::after {
  content: "";
  flex: 1 1 auto;
  min-width: 2.5rem;
  height: 1px;
  background: var(--t-border-strong);
}

.site-page[data-theme="portfolio"] .t-hero-cover__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-hero-cover__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
  min-width: 0;
  width: 100%;
}

.site-page[data-theme="portfolio"] .t-hero-cover__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  min-width: 0;
  width: 100%;
}

.site-page[data-theme="portfolio"] .t-hero-cover__headline {
  margin: 0;
  max-width: 100%;
  font-size: var(--cover-title-size);
  font-weight: var(--t-font-weight-normal);
  line-height: 0.98;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.site-page[data-theme="portfolio"] .t-hero-cover__deck {
  margin: 0;
  max-width: 38rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  font-weight: var(--t-font-weight-normal);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-hero-cover__actions {
  margin-top: 0.25rem;
}

.site-page[data-theme="portfolio"] .t-hero-cover__stamp {
  --stamp-mat: var(--t-bg-elevated);
  --stamp-hole: 0.38rem;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(58vw, var(--cover-stamp-size));
  margin: 0;
  padding: 0.55rem 0.55rem 0.45rem;
  flex: 0 0 auto;
  order: -1;
  background-color: var(--stamp-mat);
  background-image: radial-gradient(
    circle,
    var(--t-bg-primary) calc(var(--stamp-hole) - 0.5px),
    transparent var(--stamp-hole)
  );
  background-size: calc(var(--stamp-hole) * 2) calc(var(--stamp-hole) * 2);
  background-position: calc(var(--stamp-hole) * -1) calc(var(--stamp-hole) * -1);
  box-shadow: var(--t-shadow-md);
  transform: rotate(var(--cover-stamp-rot));
}

.site-page[data-theme="portfolio"] .t-hero-cover__stamp-well {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: color-mix(in srgb, var(--site-color-secondary) 14%, var(--t-bg-muted));
}

.site-page[data-theme="portfolio"] .t-hero-cover__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.site-page[data-theme="portfolio"] .t-hero-cover__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--site-color-primary) 78%, var(--site-color-text)),
    color-mix(in srgb, var(--site-color-secondary) 68%, var(--site-color-primary))
  );
}

.site-page[data-theme="portfolio"] .t-hero-cover__photo--initials span {
  font-family: var(--t-font-display);
  font-size: calc(var(--cover-title-size) * 1.15);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: -0.04em;
  color: var(--site-on-primary);
}

.site-page[data-theme="portfolio"] .t-hero-cover__stamp-caption {
  margin: 0.45rem 0.1rem 0.15rem;
  font-family: var(--t-font-sans);
  font-size: 0.68rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
  color: var(--t-text-secondary);
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-hero--cover {
    --cover-stamp-rot: 5.5deg;
  }

  .site-page[data-theme="portfolio"] .t-hero-cover__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: clamp(1rem, 2.5vw, 1.75rem);
  }

  .site-page[data-theme="portfolio"] .t-hero-cover__copy {
    grid-column: 1;
    align-self: start;
  }

  .site-page[data-theme="portfolio"] .t-hero-cover__stamp {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    width: var(--cover-stamp-size);
    max-width: none;
    margin-top: 0.15rem;
    justify-self: end;
    align-self: start;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-page[data-theme="portfolio"] .t-hero-cover__stamp {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .site-page[data-theme="portfolio"] .t-hero-cover__stamp:hover,
  .site-page[data-theme="portfolio"] .t-hero-cover__stamp:focus-within {
    transform: rotate(0deg);
  }
}

/*
 * hero variant: "hero-spread"
 * Large portrait rail, greeting masthead, compact CTAs.
 */
.site-page[data-theme="portfolio"] .t-hero--spread {
  position: relative;
  padding: calc(var(--t-hero-top-clearance) + clamp(1.25rem, 3.5vw, 2.5rem))
    var(--t-section-padding-x) clamp(3rem, 8vw, 5.5rem);
  border-bottom: 1px solid var(--t-border);
  background: var(--t-bg-primary);
  overflow: clip;
}

.site-page[data-theme="portfolio"] .t-hero-spread__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--t-max-width);
  margin-inline: auto;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-hero-spread__stage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-hero-spread__portrait {
  position: relative;
  width: min(100%, 22rem);
  flex-shrink: 0;
}

.site-page[data-theme="portfolio"] .t-hero-spread__photo-slot {
  position: relative;
  overflow: hidden;
  background: var(--t-bg-muted);
}

.site-page[data-theme="portfolio"] .t-hero-spread__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--site-color-text) 18%, transparent) 0%,
    transparent 38%
  );
}

.site-page[data-theme="portfolio"] .t-hero-spread__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
}

.site-page[data-theme="portfolio"] .t-hero-spread__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--site-color-primary) 88%, var(--site-color-text)),
    color-mix(in srgb, var(--site-color-secondary) 55%, var(--site-color-primary))
  );
}

.site-page[data-theme="portfolio"] .t-hero-spread__photo--initials span {
  font-family: var(--t-font-display);
  font-size: clamp(2.25rem, 10vw, 3.5rem);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-accent-contrast);
}

.site-page[data-theme="portfolio"] .t-hero-spread__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-hero-spread__kicker {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: var(--t-line-height-normal);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-hero-spread__name {
  margin: 0;
  max-width: 18ch;
  font-family: var(--t-font-display);
  font-size: clamp(2.15rem, 5.4vw, 3.35rem);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.08;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.site-page[data-theme="portfolio"] .t-hero-spread__tagline {
  margin: 0;
  max-width: 32rem;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.4;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
  text-wrap: pretty;
}

.site-page[data-theme="portfolio"] .t-hero-spread__bio {
  margin: 0;
  max-width: 34rem;
  font-size: var(--t-font-size-sm);
  line-height: 1.75;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-hero-spread__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 0.35rem;
}

.site-page[data-theme="portfolio"] .t-hero-spread__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem 0.6rem 1.25rem;
  border-radius: var(--t-radius-pill);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  text-decoration: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-page[data-theme="portfolio"] .t-hero-spread__cta svg {
  display: block;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-page[data-theme="portfolio"] .t-hero-spread__cta--primary {
  background: var(--t-accent);
  border: 1px solid var(--t-accent);
  color: var(--t-accent-contrast);
}

.site-page[data-theme="portfolio"] .t-hero-spread__actions .t-btn {
  min-height: 2.75rem;
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-hero-spread__stage {
    display: grid;
    grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 3.75rem);
  }

  .site-page[data-theme="portfolio"] .t-hero-spread__portrait {
    width: 100%;
  }

  .site-page[data-theme="portfolio"] .t-hero-spread__info {
    padding-left: 1.25rem;
    border-left: 2px solid var(--site-color-accent);
    gap: 1.1rem;
  }

  .site-page[data-theme="portfolio"] .t-hero--spread-fallback .t-hero-spread__info {
    padding-left: 0;
    border-left: none;
  }
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-hero-spread__stage {
    grid-template-columns: minmax(20rem, 24.5rem) minmax(0, 1fr);
  }

  .site-page[data-theme="portfolio"] .t-hero-spread__name {
    font-size: clamp(2.5rem, 3.6vw, 3.5rem);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site-page[data-theme="portfolio"] .t-hero-spread__photo {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .site-page[data-theme="portfolio"] .t-hero-spread__photo-slot:hover .t-hero-spread__photo {
    transform: scale(1.04);
  }

  .site-page[data-theme="portfolio"] .t-hero-spread__cta--primary:hover {
    background: var(--t-accent-hover);
    border-color: var(--t-accent-hover);
    color: var(--t-accent-contrast);
  }

  .site-page[data-theme="portfolio"] .t-hero-spread__cta--primary:hover svg {
    transform: rotate(-45deg);
  }
}

.site-page[data-theme="portfolio"] .t-hero-spread__cta:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-hero-spread__cta,
  .site-page[data-theme="portfolio"] .t-hero-spread__cta svg,
  .site-page[data-theme="portfolio"] .t-hero-spread__photo {
    transition: none;
  }
}

/*
 * hero variant: "hero-billboard"
 * Oversized stacked name with an oval portrait through the middle.
 */
.site-page[data-theme="portfolio"] .t-hero--billboard {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  padding: calc(var(--t-hero-top-clearance) + clamp(0.25rem, 1.2vw, 0.7rem))
    var(--t-section-padding-x) clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--t-border);
  background: var(--t-bg-primary);
  overflow: clip;
}

.site-page[data-theme="portfolio"] .t-hero-billboard__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  width: 100%;
  /*
   * Unlike other sections, the wordmark should be allowed to run out
   * toward the section's side padding instead of being boxed in by the
   * shared --t-max-width — that gives long names more room before the
   * char-aware sizing below has to shrink them. .t-hero-billboard__below
   * carries its own max-width for readable tagline/bio line length, so it
   * stays narrow and centered even though .inner itself is unbounded.
   */
  max-width: none;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-hero-billboard__wordmark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /*
   * Bleed back through the section's side padding so the name can sit
   * a few pixels from the viewport edge. The tagline block below keeps
   * the normal inset.
   */
  --t-billboard-edge: 0.35rem;
  width: calc(100% + 2 * (var(--t-section-padding-x) - var(--t-billboard-edge)));
  margin-inline: calc(var(--t-billboard-edge) - var(--t-section-padding-x));
  min-width: 0;
  container-type: inline-size;
}

.site-page[data-theme="portfolio"] .t-hero-billboard__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  width: 100%;
  font-family: var(--t-font-display);
  font-size: clamp(3.4rem, 18vw, 13.25rem);
  font-weight: var(--t-font-weight-bold);
  line-height: 0.74;
  letter-spacing: -0.07em;
  text-transform: uppercase;
  text-align: center;
  color: var(--site-color-primary);
  overflow-wrap: anywhere;
}

.site-page[data-theme="portfolio"] .t-hero-billboard__given,
.site-page[data-theme="portfolio"] .t-hero-billboard__family {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  /* Own em tracking so it scales with this line, not the parent's used px. */
  letter-spacing: -0.07em;
  /*
   * Safe size before the fit script runs: character count keeps a long
   * nowrap line inside the wordmark on any heading font. The script then
   * grows the line until it fills that width, up to the name's own cap.
   */
  font-size: clamp(
    2.25rem,
    min(18vw, calc(100cqw / (max(var(--t-name-chars, 8), 1) * 0.7))),
    13.25rem
  );
}

.site-page[data-theme="portfolio"] .t-hero-billboard__portrait {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: clamp(4.25rem, 9.5vw, 7.85rem);
  aspect-ratio: 5 / 8;
  height: auto;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: var(--t-radius-pill);
  box-shadow: var(--t-shadow-md);
  background: var(--t-bg-muted);
}

@media (max-width: 767px) {
  .site-page[data-theme="portfolio"] .t-hero-billboard__portrait {
    width: clamp(3rem, 14vw, 3.75rem);
  }
}

.site-page[data-theme="portfolio"] .t-hero-billboard__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.site-page[data-theme="portfolio"] .t-hero-billboard__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--site-color-primary) 88%, var(--site-color-text)),
    color-mix(in srgb, var(--site-color-secondary) 55%, var(--site-color-primary))
  );
}

.site-page[data-theme="portfolio"] .t-hero-billboard__photo--initials span {
  font-family: var(--t-font-display);
  font-size: clamp(1.1rem, 3vw, 1.75rem);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-accent-contrast);
}

.site-page[data-theme="portfolio"] .t-hero-billboard__below {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  max-width: 38rem;
  text-align: center;
}

.site-page[data-theme="portfolio"] .t-hero-billboard__tagline {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.4;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-secondary);
  text-wrap: pretty;
}

.site-page[data-theme="portfolio"] .t-hero-billboard__bio {
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: 1.7;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-hero-billboard__actions {
  justify-content: center;
  margin-top: 0.35rem;
}

@media (prefers-reduced-motion: no-preference) {
  .site-page[data-theme="portfolio"] .t-hero-billboard__given,
  .site-page[data-theme="portfolio"] .t-hero-billboard__family,
  .site-page[data-theme="portfolio"] .t-hero-billboard__below {
    animation: t-hero-billboard-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .site-page[data-theme="portfolio"] .t-hero-billboard__family {
    animation-delay: 0.08s;
  }

  .site-page[data-theme="portfolio"] .t-hero-billboard__portrait {
    animation: t-hero-billboard-in-center 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
  }

  .site-page[data-theme="portfolio"] .t-hero-billboard__below {
    animation-delay: 0.28s;
  }
}

@keyframes t-hero-billboard-in {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(-0.7rem);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes t-hero-billboard-in-center {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translate(-50%, calc(-50% - 0.7rem));
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site-page[data-theme="portfolio"] .t-hero-billboard__photo {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .site-page[data-theme="portfolio"] .t-hero-billboard__portrait:hover .t-hero-billboard__photo {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-hero-billboard__given,
  .site-page[data-theme="portfolio"] .t-hero-billboard__family,
  .site-page[data-theme="portfolio"] .t-hero-billboard__portrait,
  .site-page[data-theme="portfolio"] .t-hero-billboard__below {
    animation: none;
  }
}

/* About section — copy left, image + chips right */

.t-section--about {
  background: var(--t-bg-primary);
}

.t-about {
  display: grid;
  gap: var(--t-gap-xl);
  align-items: center;
}

@media (min-width: 900px) {
  .t-about {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 4rem 6rem;
  }
}

.t-about__content {
  text-align: left;
  max-width: 36rem;
}

.t-about__title {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  margin: 0 0 1.5rem;
  color: var(--t-text-primary);
}

.t-about__body {
  font-size: var(--t-font-size-lg);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  white-space: pre-wrap;
}

.t-about__body p {
  margin: 0 0 1.25rem;
}

.t-about__body p:last-child {
  margin-bottom: 0;
}

.t-about__visual {
  position: relative;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--t-radius-xl);
  overflow: visible;
}

@media (min-width: 900px) {
  .t-about__visual {
    margin: 0 0 0 auto;
    max-width: none;
  }
}

.t-about__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--t-radius-xl);
  border: 3.5px solid var(--t-about-image-border);
  box-shadow:
    var(--t-shadow-md),
    inset 0 0 0 1.5px var(--t-about-image-border-inner);
}

.t-about__chips {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.t-about-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--t-radius-pill);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-primary);
  background: var(--t-glass-bg-solid);
  border: 2.5px solid var(--t-about-chip-border);
  box-shadow:
    0 1px 0 var(--t-glass-highlight) inset,
    var(--t-shadow-md);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  white-space: nowrap;
  max-width: calc(100% - 1rem);
  pointer-events: auto;
  cursor: default;
  transform-origin: center center;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.45, 0.64, 1),
    box-shadow 0.25s ease;
}

.t-about-chip__emoji {
  font-size: 1.05em;
  line-height: 1;
}

.t-about-chip__label {
  line-height: 1.2;
}

.t-about-chip--top-left {
  top: 18%;
  left: 4%;
  transform: rotate(-9deg);
}

.t-about-chip--top-right {
  top: 12%;
  right: -6%;
  transform: rotate(7deg);
}

.t-about-chip--bottom-left {
  bottom: 14%;
  left: -8%;
}

.t-about-chip--bottom-right {
  bottom: 10%;
  right: -4%;
  transform: rotate(-6deg);
}

@media (hover: hover) {
  .t-about-chip--top-left:hover {
    transform: rotate(-13deg) translateY(-3px) scale(1.05);
    box-shadow:
      0 1px 0 var(--t-glass-highlight) inset,
      0 8px 20px color-mix(in srgb, var(--site-color-primary) 22%, transparent);
  }

  .t-about-chip--top-right:hover {
    transform: rotate(11deg) translateY(-3px) scale(1.05);
    box-shadow:
      0 1px 0 var(--t-glass-highlight) inset,
      0 8px 20px color-mix(in srgb, var(--site-color-primary) 22%, transparent);
  }

  .t-about-chip--bottom-left:hover {
    transform: rotate(-4deg) translateY(-3px) scale(1.05);
    box-shadow:
      0 1px 0 var(--t-glass-highlight) inset,
      0 8px 20px color-mix(in srgb, var(--site-color-primary) 22%, transparent);
  }

  .t-about-chip--bottom-right:hover {
    transform: rotate(-10deg) translateY(-3px) scale(1.05);
    box-shadow:
      0 1px 0 var(--t-glass-highlight) inset,
      0 8px 20px color-mix(in srgb, var(--site-color-primary) 22%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-about-chip {
    transition: none;
  }

  @media (hover: hover) {
    .t-about-chip--top-left:hover {
      transform: rotate(-9deg);
    }

    .t-about-chip--top-right:hover {
      transform: rotate(7deg);
    }

    .t-about-chip--bottom-left:hover {
      transform: none;
    }

    .t-about-chip--bottom-right:hover {
      transform: rotate(-6deg);
    }
  }
}

@media (max-width: 899px) {
  .t-about__content {
    text-align: center;
    margin-inline: auto;
  }

  .t-about-chip--top-left {
    left: 0;
  }

  .t-about-chip--top-right {
    right: 0;
  }

  .t-about-chip--bottom-left {
    left: 0;
  }

  .t-about-chip--bottom-right {
    right: 0;
  }
}

@media (max-width: 480px) {
  .t-about-chip {
    font-size: var(--t-font-size-xs);
    padding: 0.35rem 0.6rem;
  }

  .t-about-chip--top-right,
  .t-about-chip--bottom-right {
    max-width: 48%;
    white-space: normal;
    text-align: left;
  }
}

/*
 * about variant: "about-editorial"
 * Split layout — organic image frame, corner chips, editorial headline.
 */
.site-page[data-theme="portfolio"] .t-section--about-editorial {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(32rem, 85vh, 48rem);
  padding-block: clamp(4rem, 10vw, 6rem);
  background: var(--t-bg-primary);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-about-editorial__inner {
  position: relative;
  z-index: 1;
}

.site-page[data-theme="portfolio"] .t-about-editorial__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-about-editorial__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
    gap: clamp(3rem, 10vw, 10rem);
  }
}

.site-page[data-theme="portfolio"] .t-about-editorial__visual {
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-about-editorial__visual {
    max-width: none;
    margin-inline: 0;
  }
}

.site-page[data-theme="portfolio"] .t-about-editorial__frame {
  position: relative;
}

.site-page[data-theme="portfolio"] .t-about-editorial__chips {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.site-page[data-theme="portfolio"] .t-about-editorial__chip {
  position: absolute;
  z-index: 2;
  padding: 0.375rem 0.75rem;
  border-radius: var(--t-radius-pill);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-secondary);
  background: var(--t-glass-bg-solid);
  border: 1px solid var(--t-border);
  box-shadow: var(--t-shadow-sm);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  max-width: calc(100% - 1rem);
  opacity: 0;
}

.site-page[data-theme="portfolio"] .t-about-editorial__chip--top-left {
  top: -0.875rem;
  left: -0.75rem;
}

.site-page[data-theme="portfolio"] .t-about-editorial__chip--top-right {
  top: -0.875rem;
  right: -0.75rem;
}

.site-page[data-theme="portfolio"] .t-about-editorial__chip--bottom-left {
  bottom: -0.875rem;
  left: -0.75rem;
}

.site-page[data-theme="portfolio"] .t-about-editorial__chip--bottom-right {
  bottom: -0.875rem;
  right: -0.75rem;
}

.site-page[data-theme="portfolio"] .t-about-editorial__image-shell {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 45% 55% 50% 50% / 40% 40% 60% 60%;
}

.site-page[data-theme="portfolio"] .t-about-editorial__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.1);
}

.site-page[data-theme="portfolio"] .t-about-editorial__leaf {
  position: absolute;
  right: -2.25rem;
  bottom: -2.25rem;
  width: 7rem;
  height: 7rem;
  color: var(--site-color-secondary);
  opacity: 0.4;
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-about-editorial__copy {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: 36rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-about-editorial__copy {
    max-width: none;
  }
}

.site-page[data-theme="portfolio"] .t-about-editorial__title {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.1;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-about-editorial__title-lead,
.site-page[data-theme="portfolio"] .t-about-editorial__title-accent {
  display: block;
}

.site-page[data-theme="portfolio"] .t-about-editorial__title-accent {
  font-family: var(--t-font-display);
  font-style: italic;
  color: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-about-editorial__rule {
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-about-editorial__body {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: 1.9;
  color: var(--t-text-secondary);
  width: 100%;
  white-space: pre-wrap;
}

.site-page[data-theme="portfolio"] .t-about-editorial__body p {
  margin: 0 0 1.25rem;
}

.site-page[data-theme="portfolio"] .t-about-editorial__body p:last-child {
  margin-bottom: 0;
}

.site-page[data-theme="portfolio"] .t-about-editorial__reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"]
  .t-about-editorial__visual.t-about-editorial__reveal {
  transform: translateX(-2.5rem);
}

.site-page[data-theme="portfolio"]
  .t-about-editorial__copy.t-about-editorial__reveal {
  transform: translateX(2.5rem);
}

.site-page[data-theme="portfolio"]
  .t-section--about-editorial.is-visible
  .t-about-editorial__reveal {
  opacity: 1;
  transform: translate(0, 0);
}

.site-page[data-theme="portfolio"]
  .t-section--about-editorial.is-visible
  .t-about-editorial__chip {
  animation: t-about-editorial-chip-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)
    both;
  animation-delay: calc(0.55s + var(--chip-index, 0) * 0.1s);
}

.site-page[data-theme="portfolio"] .t-about-editorial__chip:nth-child(1) {
  --chip-index: 0;
}
.site-page[data-theme="portfolio"] .t-about-editorial__chip:nth-child(2) {
  --chip-index: 1;
}
.site-page[data-theme="portfolio"] .t-about-editorial__chip:nth-child(3) {
  --chip-index: 2;
}
.site-page[data-theme="portfolio"] .t-about-editorial__chip:nth-child(4) {
  --chip-index: 3;
}

@keyframes t-about-editorial-chip-in {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 1023px) {
  .site-page[data-theme="portfolio"] .t-about-editorial__copy {
    margin-inline: auto;
    text-align: center;
  }

  .site-page[data-theme="portfolio"] .t-about-editorial__rule {
    margin-inline: auto;
  }

  .site-page[data-theme="portfolio"] .t-about-editorial__chip--top-right,
  .site-page[data-theme="portfolio"] .t-about-editorial__chip--bottom-right {
    right: 0;
  }

  .site-page[data-theme="portfolio"] .t-about-editorial__chip--top-left,
  .site-page[data-theme="portfolio"] .t-about-editorial__chip--bottom-left {
    left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-about-editorial__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-page[data-theme="portfolio"] .t-about-editorial__chip {
    opacity: 1;
  }

  .site-page[data-theme="portfolio"]
    .t-section--about-editorial.is-visible
    .t-about-editorial__chip {
    animation: none;
  }
}

/*
 * about variant: "about-pop"
 * Neo-brutalist split — dot grid, watermark, bold headline, theme chips, offset photo card.
 */
.site-page[data-theme="portfolio"] .t-section--about-pop {
  --about-pop-chip-tone-1: var(--site-color-accent);
  --about-pop-chip-tone-2: var(--site-color-secondary);
  --about-pop-chip-tone-3: var(--site-color-primary);
  --about-pop-chip-tone-4: var(--site-color-accent);
  --about-pop-shadow: var(--site-color-accent);

  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(32rem, 90vh, 52rem);
  padding-block: clamp(4rem, 10vw, 6rem);
  background: var(--t-bg-primary);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-about-pop__dots {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--t-text-primary) 16%, transparent) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-about-pop__title-wrap {
  position: relative;
}

.site-page[data-theme="portfolio"] .t-about-pop__watermark {
  position: absolute;
  top: 50%;
  left: -0.5rem;
  z-index: 0;
  font-family: var(--t-font-display);
  font-size: clamp(4.5rem, 14vw, 9rem);
  font-weight: var(--t-font-weight-bold);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--t-text-primary) 7%, transparent);
  pointer-events: none;
  user-select: none;
  transform: translateY(-52%);
}

.site-page[data-theme="portfolio"] .t-about-pop__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.site-page[data-theme="portfolio"] .t-about-pop__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-about-pop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 4vw, 3rem);
  }
}

.site-page[data-theme="portfolio"] .t-about-pop__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  z-index: 1;
}

.site-page[data-theme="portfolio"] .t-about-pop__title,
.site-page[data-theme="portfolio"] .t-about-pop__body,
.site-page[data-theme="portfolio"] .t-about-pop__chips {
  position: relative;
  z-index: 1;
}

.site-page[data-theme="portfolio"] .t-about-pop__title-wrap.t-about-pop__reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"] .t-section--about-pop.is-visible .t-about-pop__title-wrap.t-about-pop__reveal {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-about-pop__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-bold);
  line-height: 1.05;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-about-pop__title-line {
  display: block;
}

.site-page[data-theme="portfolio"] .t-about-pop__title-line--accent {
  color: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-about-pop__body {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  white-space: pre-wrap;
}

.site-page[data-theme="portfolio"] .t-about-pop__body p {
  margin: 0 0 1.25rem;
}

.site-page[data-theme="portfolio"] .t-about-pop__body p:last-child {
  margin-bottom: 0;
}

.site-page[data-theme="portfolio"] .t-about-pop__chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
}

.site-page[data-theme="portfolio"] .t-about-pop__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 100%;
}

.site-page[data-theme="portfolio"] .t-about-pop__chip {
  --about-pop-chip-bg: color-mix(
    in srgb,
    var(--about-pop-chip-tone) 34%,
    var(--site-color-background)
  );

  width: max-content;
  max-width: 100%;
  padding: 0.5rem 0.625rem;
  border: 2px solid var(--t-text-primary);
  border-radius: 1rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-bold);
  line-height: 1.25;
  white-space: nowrap;
  background: var(--about-pop-chip-bg);
  color: var(--t-text-primary);
  color: color-contrast(
    var(--about-pop-chip-bg) vs var(--site-color-text),
    var(--site-color-background)
  );
  opacity: 0;
  transform: scale(0.7);
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    background 0.25s ease;
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-about-pop__chip:hover {
    transform: translate(-2px, -2px) scale(1.04);
    box-shadow: 3px 3px 0 0 var(--t-text-primary);
    background: color-mix(
      in srgb,
      var(--about-pop-chip-tone) 48%,
      var(--site-color-background)
    );
  }
}

.site-page[data-theme="portfolio"] .t-about-pop__chip:nth-child(1) {
  --about-pop-chip-tone: var(--about-pop-chip-tone-1);
}

.site-page[data-theme="portfolio"] .t-about-pop__chip:nth-child(2) {
  --about-pop-chip-tone: var(--about-pop-chip-tone-2);
}

.site-page[data-theme="portfolio"] .t-about-pop__chip:nth-child(3) {
  --about-pop-chip-tone: var(--about-pop-chip-tone-3);
}

.site-page[data-theme="portfolio"] .t-about-pop__chip:nth-child(4) {
  --about-pop-chip-tone: var(--about-pop-chip-tone-4);
}

.site-page[data-theme="portfolio"] .t-about-pop__visual {
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-about-pop__visual {
    max-width: none;
    margin-inline: 0;
  }
}

.site-page[data-theme="portfolio"] .t-about-pop__card {
  position: relative;
}

.site-page[data-theme="portfolio"] .t-about-pop__card-shadow {
  position: absolute;
  inset: 0;
  border: 2px solid var(--t-text-primary);
  border-radius: var(--t-radius-lg);
  background: var(--about-pop-shadow);
  transform: translate(0.75rem, 0.75rem);
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-about-pop__card-frame {
  position: relative;
  border: 2px solid var(--t-text-primary);
  border-radius: var(--t-radius-lg);
  overflow: hidden;
  background: var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-about-pop__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s ease;
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-about-pop__card-frame:hover .t-about-pop__image {
    transform: scale(1.05);
  }
}

.site-page[data-theme="portfolio"] .t-about-pop__caption {
  display: flex;
  justify-content: flex-end;
  padding: 0.875rem 1.25rem;
  border-top: 2px solid var(--t-text-primary);
  background: var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-about-pop__caption-title {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-bold);
  color: var(--t-text-primary);
  text-align: right;
}

.site-page[data-theme="portfolio"] .t-about-pop__caption-icon {
  flex-shrink: 0;
}

.site-page[data-theme="portfolio"] .t-about-pop__reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"] .t-about-pop__visual.t-about-pop__reveal {
  transform: translateY(3rem);
}

.site-page[data-theme="portfolio"] .t-section--about-pop.is-visible .t-about-pop__reveal {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-section--about-pop.is-visible .t-about-pop__chip {
  animation: t-about-pop-chip-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(0.45s + var(--chip-index, 0) * 0.07s);
}

.site-page[data-theme="portfolio"] .t-about-pop__chip:nth-child(1) {
  --chip-index: 0;
}
.site-page[data-theme="portfolio"] .t-about-pop__chip:nth-child(2) {
  --chip-index: 1;
}
.site-page[data-theme="portfolio"] .t-about-pop__chip:nth-child(3) {
  --chip-index: 2;
}
.site-page[data-theme="portfolio"] .t-about-pop__chip:nth-child(4) {
  --chip-index: 3;
}

@keyframes t-about-pop-chip-in {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 1023px) {
  .site-page[data-theme="portfolio"] .t-about-pop__watermark {
    left: 50%;
    transform: translate(-50%, -52%);
  }

  .site-page[data-theme="portfolio"] .t-about-pop__copy {
    text-align: center;
    align-items: center;
  }

  .site-page[data-theme="portfolio"] .t-about-pop__chips {
    margin-inline: auto;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-about-pop__reveal,
  .site-page[data-theme="portfolio"] .t-about-pop__title-wrap.t-about-pop__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-page[data-theme="portfolio"] .t-about-pop__chip {
    opacity: 1;
    transform: none;
    transition: none;
  }

  @media (hover: hover) {
    .site-page[data-theme="portfolio"] .t-about-pop__chip:hover {
      transform: none;
      box-shadow: none;
    }
  }

  .site-page[data-theme="portfolio"] .t-section--about-pop.is-visible .t-about-pop__chip {
    animation: none;
  }

  .site-page[data-theme="portfolio"] .t-about-pop__image {
    transition: none;
  }
}

/*
 * about variant: "about-grid"
 * Centered bordered grid with side gutters, skill marquees, photo, bio, and tags.
 */
.site-page[data-theme="portfolio"] .t-section--about-grid {
  --about-grid-border: var(--t-text-primary);

  padding: 0;
  background: var(--t-bg-primary);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-about-grid__marquee {
  overflow: hidden;
  border-bottom: 2px solid var(--about-grid-border);
}

.site-page[data-theme="portfolio"] .t-about-grid__marquee--bottom {
  border-bottom: none;
  border-top: 2px solid var(--about-grid-border);
  background: var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-about-grid__marquee--top {
  background: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-about-grid__marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding-block: 0.5rem;
}

.site-page[data-theme="portfolio"] .t-about-grid__marquee-track--forward {
  animation: t-about-grid-marquee 100s linear infinite;
}

.site-page[data-theme="portfolio"] .t-about-grid__marquee-track--reverse {
  animation: t-about-grid-marquee 100s linear infinite reverse;
}

.site-page[data-theme="portfolio"] .t-about-grid__marquee-item {
  flex-shrink: 0;
  margin-right: 2rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-page[data-theme="portfolio"]
  .t-about-grid__marquee--top
  .t-about-grid__marquee-item {
  color: color-mix(in srgb, var(--site-on-primary) 62%, transparent);
}

.site-page[data-theme="portfolio"]
  .t-about-grid__marquee--bottom
  .t-about-grid__marquee-item {
  color: color-mix(in srgb, var(--t-text-muted) 85%, transparent);
}

.site-page[data-theme="portfolio"] .t-about-grid__marquee-sep {
  margin-left: 2rem;
  opacity: 0.35;
}

@keyframes t-about-grid-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.333%);
  }
}

.site-page[data-theme="portfolio"] .t-about-grid__shell {
  display: grid;
  grid-template-columns: minmax(2.5rem, 1fr) minmax(
      0,
      var(--t-max-width)
    ) minmax(2.5rem, 1fr);
}

.site-page[data-theme="portfolio"] .t-about-grid__gutter {
  border-right: 2px solid var(--about-grid-border);
  background: var(--t-bg-primary);
  min-height: 100%;
}

.site-page[data-theme="portfolio"] .t-about-grid__gutter--right {
  border-right: none;
}

.site-page[data-theme="portfolio"] .t-about-grid__board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-right: 2px solid var(--about-grid-border);
}

.site-page[data-theme="portfolio"] .t-about-grid__cell {
  border-right: 2px solid var(--about-grid-border);
  border-bottom: 2px solid var(--about-grid-border);
  background: var(--t-bg-primary);
  transition: background-color 0.45s ease;
}

.site-page[data-theme="portfolio"]
  .t-about-grid__board
  > .t-about-grid__cell:last-child {
  border-bottom: none;
}

.site-page[data-theme="portfolio"]
  .t-about-grid__board:has(.t-about-grid__cell--tags)
  .t-about-grid__cell--bio {
  border-bottom: none;
}

.site-page[data-theme="portfolio"] .t-about-grid__heading,
.site-page[data-theme="portfolio"] .t-about-grid__body,
.site-page[data-theme="portfolio"] .t-about-grid__label,
.site-page[data-theme="portfolio"] .t-about-grid__company-name,
.site-page[data-theme="portfolio"] .t-about-grid__company-note {
  transition: color 0.45s ease;
}

.site-page[data-theme="portfolio"] .t-about-grid__cell--photo,
.site-page[data-theme="portfolio"] .t-about-grid__cell--tags {
  border-right: none;
}

.site-page[data-theme="portfolio"] .t-about-grid__cell--title,
.site-page[data-theme="portfolio"] .t-about-grid__cell--bio {
  grid-column: span 2;
}

.site-page[data-theme="portfolio"]
  .t-about-grid__board:not(:has(.t-about-grid__cell--photo))
  .t-about-grid__cell--title {
  grid-column: 1 / -1;
  border-right: none;
}

.site-page[data-theme="portfolio"]
  .t-about-grid__board:not(:has(.t-about-grid__cell--photo))
  .t-about-grid__cell--bio {
  border-right: none;
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-about-grid__cell--title:hover,
  .site-page[data-theme="portfolio"] .t-about-grid__cell--bio:hover {
    background: var(--site-color-primary);
  }

  .site-page[data-theme="portfolio"]
    .t-about-grid__cell--title:hover
    .t-about-grid__heading,
  .site-page[data-theme="portfolio"]
    .t-about-grid__cell--bio:hover
    .t-about-grid__body,
  .site-page[data-theme="portfolio"]
    .t-about-grid__cell--bio:hover
    .t-about-grid__label,
  .site-page[data-theme="portfolio"]
    .t-about-grid__cell--bio:hover
    .t-about-grid__company-name,
  .site-page[data-theme="portfolio"]
    .t-about-grid__cell--bio:hover
    .t-about-grid__company-note {
    color: var(--site-on-primary);
  }

  .site-page[data-theme="portfolio"] .t-about-grid__tag:hover {
    background: var(--site-color-primary);
    border-color: var(--site-color-primary);
    color: var(--site-on-primary);
  }
}

.site-page[data-theme="portfolio"] .t-about-grid__cell--title {
  display: flex;
  align-items: center;
  min-height: 8rem;
  padding: clamp(1.5rem, 4vw, 2rem);
}

.site-page[data-theme="portfolio"] .t-about-grid__heading {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  line-height: var(--t-line-height-tight);
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-about-grid__cell--photo {
  position: relative;
  min-height: 14rem;
  padding: 0;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-about-grid__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"]
    .t-about-grid__cell--photo:hover
    .t-about-grid__image {
    transform: scale(1.08);
  }
}

.site-page[data-theme="portfolio"] .t-about-grid__photo-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--site-color-primary) 22%, transparent);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-about-grid__photo-location {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  padding: 0.25rem 0.5rem;
  font-family: var(--t-font-sans);
  font-size: 0.5625rem;
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--site-on-primary);
  background: color-mix(in srgb, var(--site-color-primary) 72%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.site-page[data-theme="portfolio"] .t-about-grid__cell--bio,
.site-page[data-theme="portfolio"] .t-about-grid__cell--tags {
  padding: clamp(1.5rem, 4vw, 2rem);
}

.site-page[data-theme="portfolio"] .t-about-grid__label {
  margin: 0 0 1rem;
  font-family: var(--t-font-sans);
  font-size: 0.5625rem;
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-about-grid__body {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  max-width: 36rem;
  white-space: pre-wrap;
}

.site-page[data-theme="portfolio"] .t-about-grid__body p {
  margin: 0 0 1.25rem;
}

.site-page[data-theme="portfolio"] .t-about-grid__body p:last-child {
  margin-bottom: 0;
}

.site-page[data-theme="portfolio"] .t-about-grid__career {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-about-grid__company {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.site-page[data-theme="portfolio"] .t-about-grid__company-name {
  font-family: var(--t-font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-about-grid__company-note {
  flex-shrink: 0;
  font-family: var(--t-font-sans);
  font-size: 0.5625rem;
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-about-grid__tags {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-page[data-theme="portfolio"] .t-about-grid__tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--t-border-strong);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.35;
  color: var(--t-text-primary);
  transition:
    background-color 0.45s ease,
    color 0.45s ease,
    border-color 0.45s ease;
}

.site-page[data-theme="portfolio"] .t-about-grid__reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"]
  .t-about-grid__cell--title.t-about-grid__reveal {
  transform: translateX(-1.5rem);
}

.site-page[data-theme="portfolio"]
  .t-section--about-grid.is-visible
  .t-about-grid__reveal {
  opacity: 1;
  transform: translate(0, 0);
}

@media (max-width: 1199px) {
  .site-page[data-theme="portfolio"] .t-about-grid__shell {
    grid-template-columns: minmax(1rem, 1.25rem) minmax(0, 1fr) minmax(
        1rem,
        1.25rem
      );
  }

  .site-page[data-theme="portfolio"] .t-about-grid__board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-page[data-theme="portfolio"] .t-about-grid__cell--title,
  .site-page[data-theme="portfolio"] .t-about-grid__cell--bio {
    grid-column: 1 / -1;
  }

  .site-page[data-theme="portfolio"] .t-about-grid__cell--title {
    grid-row: 1;
  }

  .site-page[data-theme="portfolio"] .t-about-grid__cell--photo {
    grid-column: 1;
    grid-row: 2;
    border-right: 2px solid var(--about-grid-border);
  }

  .site-page[data-theme="portfolio"] .t-about-grid__cell--tags {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    min-width: 0;
  }

  .site-page[data-theme="portfolio"] .t-about-grid__cell--bio {
    grid-row: 3;
  }

  .site-page[data-theme="portfolio"]
    .t-about-grid__board:not(:has(.t-about-grid__cell--tags))
    .t-about-grid__cell--photo {
    grid-column: 1 / -1;
    border-right: none;
  }

  .site-page[data-theme="portfolio"]
    .t-about-grid__board:not(:has(.t-about-grid__cell--tags))
    .t-about-grid__cell--bio {
    grid-row: 3;
  }

  .site-page[data-theme="portfolio"]
    .t-about-grid__board:not(:has(.t-about-grid__cell--photo))
    .t-about-grid__cell--tags {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .site-page[data-theme="portfolio"]
    .t-about-grid__board:not(:has(.t-about-grid__cell--photo)):not(
      :has(.t-about-grid__cell--tags)
    )
    .t-about-grid__cell--bio {
    grid-row: 2;
  }

  .site-page[data-theme="portfolio"]
    .t-about-grid__board:has(.t-about-grid__cell--tags)
    .t-about-grid__cell--bio {
    border-bottom: 2px solid var(--about-grid-border);
  }
}

@media (max-width: 767px) {
  .site-page[data-theme="portfolio"] .t-about-grid__shell {
    grid-template-columns: 1fr;
  }

  .site-page[data-theme="portfolio"] .t-about-grid__gutter {
    display: none;
  }

  .site-page[data-theme="portfolio"] .t-about-grid__board {
    grid-column: 1;
    border-right: none;
    grid-template-columns: 1fr;
  }

  .site-page[data-theme="portfolio"] .t-about-grid__cell,
  .site-page[data-theme="portfolio"] .t-about-grid__cell--title,
  .site-page[data-theme="portfolio"] .t-about-grid__cell--bio,
  .site-page[data-theme="portfolio"] .t-about-grid__cell--photo,
  .site-page[data-theme="portfolio"] .t-about-grid__cell--tags {
    grid-column: 1;
    grid-row: auto;
    border-right: none;
  }

  .site-page[data-theme="portfolio"]
    .t-about-grid__board:has(.t-about-grid__cell--tags)
    .t-about-grid__cell--bio {
    border-bottom: 2px solid var(--about-grid-border);
  }

  .site-page[data-theme="portfolio"] .t-about-grid__cell--photo {
    min-height: 16rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-about-grid__marquee-track {
    animation: none;
  }

  .site-page[data-theme="portfolio"] .t-about-grid__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-page[data-theme="portfolio"] .t-about-grid__image {
    transition: none;
  }
}

/*
 * about variant: "about-aurora"
 * Immersive editorial — aurora glow, gradient headline, glass chips, skill ticker.
 */
.site-page[data-theme="portfolio"] .t-section--about-aurora {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2.5rem, 5vw, 4rem);
  min-width: 0;
  max-width: 100%;
  min-height: clamp(32rem, 88vh, 52rem);
  padding-block: clamp(4rem, 10vw, 6rem);
  background: var(--t-bg-primary);
  overflow-x: clip;
  overflow-y: hidden;
}

/* Aurora glow blob — single, palette-derived, sits behind the image */
.site-page[data-theme="portfolio"] .t-about-aurora__blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 130%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--site-color-accent) 62%, transparent),
    transparent 68%);
  filter: blur(clamp(2.5rem, 6vw, 4rem));
  opacity: 0.6;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  animation: t-about-aurora-float 16s ease-in-out infinite;
}

@keyframes t-about-aurora-float {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-46%, -54%) scale(1.06); }
}

@media (max-width: 959px) {
  .site-page[data-theme="portfolio"] .t-about-aurora__blob {
    top: 68%;
  }
}

.site-page[data-theme="portfolio"] .t-about-aurora__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  /* Cap at the site column on desktop; at the parent on small screens so
     t-container padding is inside the box and overflow-x: clip cannot crop copy. */
  max-width: min(100%, var(--t-max-width));
}

.site-page[data-theme="portfolio"] .t-about-aurora__grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: center;
  min-width: 0;
}

@media (min-width: 960px) {
  .site-page[data-theme="portfolio"] .t-about-aurora__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 7vw, 5rem);
  }
}

/* Visual */
.site-page[data-theme="portfolio"] .t-about-aurora__visual {
  position: relative;
  width: min(100%, 22rem);
  max-width: 22rem;
  justify-self: center;
  margin-inline: auto;
}

@media (min-width: 960px) {
  .site-page[data-theme="portfolio"] .t-about-aurora__visual {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    margin-inline: 0;
  }
}

.site-page[data-theme="portfolio"] .t-about-aurora__frame {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--t-radius-xl);
  overflow: hidden;
  border: 1px solid var(--t-border);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--site-color-accent) 22%, transparent),
    var(--t-shadow-md);
  background: var(--t-bg-elevated);
}

.site-page[data-theme="portfolio"] .t-about-aurora__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-about-aurora__frame:hover .t-about-aurora__image {
    transform: scale(1.04);
  }
}

.site-page[data-theme="portfolio"] .t-about-aurora__frame-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--site-color-background) 40%, transparent);
}

/* Copy */
.site-page[data-theme="portfolio"] .t-about-aurora__copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
  max-width: 40rem;
  width: 100%;
}

@media (min-width: 960px) {
  .site-page[data-theme="portfolio"] .t-about-aurora__copy {
    max-width: none;
  }
}

.site-page[data-theme="portfolio"] .t-about-aurora__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
}

.site-page[data-theme="portfolio"] .t-about-aurora__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-about-aurora__meta-icon {
  flex-shrink: 0;
  color: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-about-aurora__title {
  margin: 0;
  min-width: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.08;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.site-page[data-theme="portfolio"] .t-about-aurora__title-lead,
.site-page[data-theme="portfolio"] .t-about-aurora__title-accent {
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
}

.site-page[data-theme="portfolio"] .t-about-aurora__title-accent {
  margin-top: 0.08em;
  font-style: italic;
  background: linear-gradient(
    100deg,
    var(--site-color-primary),
    var(--site-color-accent) 60%,
    var(--site-color-secondary)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.site-page[data-theme="portfolio"] .t-about-aurora__body {
  min-width: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: 1.85;
  color: var(--t-text-secondary);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.site-page[data-theme="portfolio"] .t-about-aurora__body p {
  margin: 0 0 1.15rem;
}

.site-page[data-theme="portfolio"] .t-about-aurora__body p:last-child {
  margin-bottom: 0;
}

/* Chips on a vertical rail */
.site-page[data-theme="portfolio"] .t-about-aurora__chips {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
}

.site-page[data-theme="portfolio"] .t-about-aurora__chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-page[data-theme="portfolio"] .t-about-aurora__chip {
  padding: 0.4rem 0.85rem;
  border-radius: var(--t-radius-pill);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--t-text-secondary);
  background: var(--t-glass-bg-solid);
  border: 1px solid var(--t-glass-border);
  box-shadow: var(--t-shadow-sm);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    background 0.3s ease;
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-about-aurora__chip:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--site-color-accent) 14%, var(--t-glass-bg-solid));
    box-shadow: var(--t-shadow-md);
  }
}

/* Skill ticker */
.site-page[data-theme="portfolio"] .t-about-aurora__ticker {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  /* Keep the marquee from inflating this flex item (and the section) to the track's min-content width. */
  contain: inline-size;
  border-top: 1px solid var(--t-border);
  border-bottom: 1px solid var(--t-border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.site-page[data-theme="portfolio"] .t-about-aurora__ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding-block: 0.7rem;
  white-space: nowrap;
  animation: t-about-aurora-ticker 38s linear infinite;
}

.site-page[data-theme="portfolio"] .t-about-aurora__ticker-item {
  display: inline-flex;
  align-items: center;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.02em;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-about-aurora__ticker-sep {
  margin-inline: 1.25rem;
  color: var(--site-color-accent);
  opacity: 0.7;
}

@keyframes t-about-aurora-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

/* Reveal */
.site-page[data-theme="portfolio"] .t-about-aurora__reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"]
  .t-about-aurora__visual.t-about-aurora__reveal {
  transform: translateY(1.5rem);
}

@media (min-width: 960px) {
  .site-page[data-theme="portfolio"]
    .t-about-aurora__visual.t-about-aurora__reveal {
    transform: translateX(-2rem);
  }
}

.site-page[data-theme="portfolio"]
  .t-section--about-aurora.is-visible .t-about-aurora__reveal {
  opacity: 1;
  transform: translate(0, 0);
}

.site-page[data-theme="portfolio"]
  .t-section--about-aurora.is-visible .t-about-aurora__chip {
  animation: t-about-aurora-chip-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(0.5s + var(--chip-index, 0) * 0.08s);
}

.site-page[data-theme="portfolio"] .t-about-aurora__chip:nth-child(1) { --chip-index: 0; }
.site-page[data-theme="portfolio"] .t-about-aurora__chip:nth-child(2) { --chip-index: 1; }
.site-page[data-theme="portfolio"] .t-about-aurora__chip:nth-child(3) { --chip-index: 2; }
.site-page[data-theme="portfolio"] .t-about-aurora__chip:nth-child(4) { --chip-index: 3; }

@keyframes t-about-aurora-chip-in {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Layout fallback when image is missing — center the copy, widen it */
.site-page[data-theme="portfolio"] .t-section--about-aurora:not(:has(.t-about-aurora__visual)) .t-about-aurora__copy {
  margin-inline: auto;
  max-width: 46rem;
}

/* Small screens */
@media (max-width: 959px) {
  .site-page[data-theme="portfolio"] .t-about-aurora__copy {
    text-align: left;
    justify-self: stretch;
  }

  .site-page[data-theme="portfolio"] .t-about-aurora__title {
    font-size: clamp(1.625rem, 6vw, var(--t-font-size-2xl));
  }

  .site-page[data-theme="portfolio"] .t-about-aurora__chip {
    white-space: normal;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-about-aurora__blob,
  .site-page[data-theme="portfolio"] .t-about-aurora__ticker-track {
    animation: none;
  }

  .site-page[data-theme="portfolio"] .t-about-aurora__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-page[data-theme="portfolio"] .t-about-aurora__chip {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-page[data-theme="portfolio"]
    .t-section--about-aurora.is-visible .t-about-aurora__chip {
    animation: none;
  }

  .site-page[data-theme="portfolio"] .t-about-aurora__image {
    transition: none;
  }
}

/*
 * about variant: "about-spotlight"
 * Two-column spread — highlighter headline + body left, layered portrait visual right.
 */
.site-page[data-theme="portfolio"] .t-section--about-spotlight {
  position: relative;
  padding-block: clamp(4rem, 10vw, 6rem);
  background: var(--t-bg-primary);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-about-spotlight__inner {
  position: relative;
  max-width: var(--t-max-width);
}

/* Content (left column) */
.site-page[data-theme="portfolio"] .t-about-spotlight__content {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  min-width: 0;
}

/* Kicker head */
.site-page[data-theme="portfolio"] .t-about-spotlight__head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-page[data-theme="portfolio"] .t-about-spotlight__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-about-spotlight__kicker-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--site-color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-color-accent) 18%, transparent);
}

.site-page[data-theme="portfolio"] .t-about-spotlight__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--t-border-strong), transparent);
}

/* Title with highlighter mark */
.site-page[data-theme="portfolio"] .t-about-spotlight__title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.35em;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.05;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
  max-width: 18ch;
}

.site-page[data-theme="portfolio"] .t-about-spotlight__title-line {
  display: inline;
}

.site-page[data-theme="portfolio"] .t-about-spotlight__title-mark {
  display: inline;
  position: relative;
  font-style: italic;
  color: var(--site-color-primary);
  background-image: linear-gradient(
    180deg,
    transparent 58%,
    color-mix(in srgb, var(--site-color-accent) 38%, transparent) 58%,
    color-mix(in srgb, var(--site-color-accent) 38%, transparent) 92%,
    transparent 92%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-inline: 0.1em;
}

/* Spread — two columns: content left, portrait visual right (top-aligned) */
.site-page[data-theme="portfolio"] .t-about-spotlight__spread {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 5vw, 3rem);
  align-items: start;
}

@media (min-width: 880px) {
  .site-page[data-theme="portfolio"] .t-about-spotlight__spread {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 6vw, 4.5rem);
  }
}

/* Visual — layered portrait card with accent slab + vertical label */
.site-page[data-theme="portfolio"] .t-about-spotlight__visual {
  position: relative;
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
}

@media (min-width: 880px) {
  .site-page[data-theme="portfolio"] .t-about-spotlight__visual {
    max-width: none;
    margin-inline: 0;
    margin-top: 0.25rem;
  }
}

.site-page[data-theme="portfolio"] .t-about-spotlight__visual-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--t-radius-lg);
  overflow: hidden;
  border: 1px solid var(--t-border);
  box-shadow: var(--t-shadow-md);
  background: var(--t-bg-elevated);
}

.site-page[data-theme="portfolio"] .t-about-spotlight__visual-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-about-spotlight__visual:hover .t-about-spotlight__visual-image {
    transform: scale(1.04);
  }
}

.site-page[data-theme="portfolio"] .t-about-spotlight__visual-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 60%,
    color-mix(in srgb, var(--t-text-primary) 28%, transparent) 100%
  );
}

/* Location stamp inside the image */
.site-page[data-theme="portfolio"] .t-about-spotlight__stamp {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--t-radius-pill);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-text-inverse);
  background: color-mix(in srgb, var(--t-text-primary) 72%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--t-text-inverse) 22%, transparent);
}

.site-page[data-theme="portfolio"] .t-about-spotlight__stamp-icon {
  flex-shrink: 0;
  color: var(--site-color-accent);
}

/* Body column (spread) */
.site-page[data-theme="portfolio"] .t-about-spotlight__body-col {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.site-page[data-theme="portfolio"] .t-about-spotlight__body-stack {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 48rem;
}

.site-page[data-theme="portfolio"] .t-about-spotlight__rail {
  display: none;
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-about-spotlight__rail {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.5rem;
  }
}

.site-page[data-theme="portfolio"] .t-about-spotlight__rail-tick {
  width: 1.5rem;
  height: 1px;
  background: var(--t-border-strong);
}

.site-page[data-theme="portfolio"] .t-about-spotlight__rail-tick:first-child {
  width: 2.25rem;
  height: 2px;
  background: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-about-spotlight__body {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-lg);
  line-height: 1.8;
  color: var(--t-text-secondary);
  white-space: pre-wrap;
}

.site-page[data-theme="portfolio"] .t-about-spotlight__body p {
  margin: 0 0 1.15rem;
}

.site-page[data-theme="portfolio"] .t-about-spotlight__body p:last-child {
  margin-bottom: 0;
}

/* Tags */
.site-page[data-theme="portfolio"] .t-about-spotlight__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-page[data-theme="portfolio"] .t-about-spotlight__tag {
  padding: 0.45rem 0.9rem;
  border-radius: var(--t-radius-sm);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--t-text-primary);
  background: var(--t-bg-secondary);
  border: 1px solid var(--t-border);
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-about-spotlight__tag:hover {
    transform: translateY(-3px);
    border-color: var(--site-color-accent);
    box-shadow: 0 4px 0 -2px var(--site-color-accent);
  }
}

/* Reveal */
.site-page[data-theme="portfolio"] .t-about-spotlight__reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"]
  .t-section--about-spotlight.is-visible .t-about-spotlight__reveal {
  opacity: 1;
  transform: translate(0, 0);
}

/* Small screens */
@media (max-width: 879px) {
  .site-page[data-theme="portfolio"] .t-about-spotlight__title {
    font-size: clamp(2rem, 8vw, var(--t-font-size-2xl));
    max-width: 100%;
  }

  .site-page[data-theme="portfolio"] .t-about-spotlight__visual {
    max-width: 18rem;
  }

  .site-page[data-theme="portfolio"] .t-about-spotlight__body {
    font-size: var(--t-font-size-base);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-about-spotlight__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-page[data-theme="portfolio"] .t-about-spotlight__visual-image {
    transition: none;
  }

  .site-page[data-theme="portfolio"] .t-about-spotlight__tag {
    transition: none;
  }
}

/* About variant — "about-dossier"
   Identity card: large portrait plate, key-value spec list, summary, tag pills. */

.t-section--about-dossier {
  background: var(--t-bg-primary);
}

.t-about-dossier__card {
  width: 100%;
  box-sizing: border-box;
  background: var(--t-bg-elevated);
  border: 1px solid var(--t-border-strong);
  border-radius: var(--t-radius-lg);
  box-shadow: var(--t-shadow-md);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.t-about-dossier__spread {
  display: grid;
  gap: var(--t-gap-lg);
  align-items: start;
}

@media (min-width: 800px) {
  .t-about-dossier__spread {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: stretch;
  }
}

/* ---- Portrait plate ---- */

.t-about-dossier__portrait {
  position: relative;
  width: 100%;
  max-width: none;
  min-width: 0;
  aspect-ratio: 4 / 3;
  max-height: min(22rem, 50svh);
  border-radius: var(--t-radius-md);
  overflow: hidden;
  border: 1px solid var(--t-border-strong);
  background: var(--t-bg-secondary);
  box-shadow: var(--t-shadow-sm);
}

@media (min-width: 800px) {
  .t-about-dossier__portrait {
    max-height: none;
    margin-inline: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

.t-about-dossier__portrait-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.t-about-dossier__portrait--fallback {
  display: grid;
  place-items: center;
}

.t-about-dossier__portrait-initials {
  font-family: var(--t-font-display);
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--t-text-secondary);
}

/* ---- Copy sheet ---- */

.t-about-dossier__sheet {
  display: flex;
  flex-direction: column;
  gap: var(--t-gap-md);
  min-width: 0;
}

.t-about-dossier__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

/* ---- Key-value spec list ---- */

.t-about-dossier__specs {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.t-about-dossier__spec {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--t-border);
}
.t-about-dossier__spec:last-child {
  border-bottom: 1px solid var(--t-border);
}

.t-about-dossier__spec-label {
  flex: 0 0 6.5rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.t-about-dossier__spec-value {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-normal);
  color: var(--t-text-primary);
  min-width: 0;
}

/* ---- Summary ---- */

.t-about-dossier__summary {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.t-about-dossier__summary-label {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.t-about-dossier__body {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  white-space: pre-wrap;
}

/* ---- Tag pills ---- */

.t-about-dossier__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.t-about-dossier__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  border-radius: var(--t-radius-pill);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-primary);
  background: color-mix(in srgb, var(--site-color-accent) 18%, var(--t-bg-primary));
  border: 1px solid color-mix(in srgb, var(--site-color-accent) 42%, var(--t-border));
  cursor: default;
  transform-origin: center center;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.45, 0.64, 1),
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease;
}

@media (hover: hover) {
  .t-about-dossier__tag:hover {
    transform: translateY(-2px) scale(1.04);
    background: color-mix(in srgb, var(--site-color-accent) 30%, var(--t-bg-primary));
    border-color: var(--site-color-accent);
    box-shadow: var(--t-shadow-sm);
  }
}

/* ---- Reveal ---- */

.t-about-dossier__reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.t-section--about-dossier.is-visible .t-about-dossier__reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-about-dossier__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .t-about-dossier__tag {
    transition: none;
  }

  .t-about-dossier__tag:hover {
    transform: none;
  }
}

/* ---- Responsive ---- */

@media (max-width: 799px) {
  .t-about-dossier__spread {
    grid-template-columns: minmax(0, 1fr);
  }

  .t-about-dossier__spec {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }

  .t-about-dossier__spec-label {
    flex-basis: 100%;
  }
}

/* About variant — "about-atelier"
   Studio board: pinned photo card overlapping a note card, pinned tag chips.
   Subtle rotations, palette-only, professional restraint. */

.t-section--about-atelier,
.t-section--about-atelier *,
.t-section--about-atelier *::before,
.t-section--about-atelier *::after {
  box-sizing: border-box;
}

.t-section--about-atelier {
  background: var(--t-bg-primary);
  min-width: 0;
}

.t-section--about-atelier + .t-section {
  border-top: none;
}

.t-about-atelier__inner {
  /* Cap at the site column; keep t-container padding inside the box so
     html overflow-x: clip cannot crop the note body on small viewports. */
  width: 100%;
  min-width: 0;
  max-width: min(100%, var(--t-max-width));
}

.t-about-atelier__board {
  position: relative;
  display: grid;
  gap: var(--t-gap-xl);
  align-items: start;
  min-width: 0;
  max-width: 100%;
}

/* ---- Photo card ---- */

.t-about-atelier__photo {
  position: relative;
  margin: 0;
  padding: 0.6rem 0.6rem 0;
  background: var(--t-bg-primary);
  border: 1px solid var(--t-border-strong);
  border-radius: var(--t-radius-sm);
  box-shadow: var(--t-shadow-md);
  min-width: 0;
  max-width: 100%;
}

.t-about-atelier__photo--rotate {
  transform: rotate(-3deg);
}

.t-about-atelier__pin {
  position: absolute;
  top: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--site-color-accent);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--site-color-text) 30%, transparent),
    inset 0 -1px 1px color-mix(in srgb, var(--site-color-text) 25%, transparent),
    inset 0 1px 1px color-mix(in srgb, var(--t-bg-primary) 60%, transparent);
  z-index: 2;
}

.t-about-atelier__photo-frame {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: calc(var(--t-radius-sm) - 2px);
  background: var(--t-bg-secondary);
}

.t-about-atelier__photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t-about-atelier__photo-caption {
  margin: 0.5rem 0 0.4rem;
  text-align: center;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

/* ---- Note card ---- */

.t-about-atelier__copy {
  display: flex;
  flex-direction: column;
  gap: var(--t-gap-md);
  min-width: 0;
}

.t-about-atelier__note {
  position: relative;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--t-bg-primary);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-md);
  box-shadow: var(--t-shadow-sm);
  min-width: 0;
  max-width: 100%;
}

.t-about-atelier__note--rotate {
  transform: rotate(2deg);
}

/* Tape strip at the top of the note */
.t-about-atelier__note-tape {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 5rem;
  height: 1.1rem;
  background: color-mix(in srgb, var(--site-color-accent) 22%, transparent);
  border-left: 1px dashed color-mix(in srgb, var(--site-color-text) 18%, transparent);
  border-right: 1px dashed color-mix(in srgb, var(--site-color-text) 18%, transparent);
  opacity: 0.7;
}

.t-about-atelier__title {
  margin: 0 0 1rem;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
  overflow-wrap: break-word;
}

.t-about-atelier__body {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%;
}

/* ---- Pinned tag chips ---- */

.t-about-atelier__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.t-about-atelier__tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: var(--t-radius-pill);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-primary);
  background: color-mix(in srgb, var(--site-color-accent) 18%, var(--t-bg-primary));
  border: 1px solid color-mix(in srgb, var(--site-color-accent) 42%, var(--t-border));
  box-shadow: var(--t-shadow-sm);
  cursor: default;
  transform-origin: center center;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.45, 0.64, 1),
    box-shadow 0.25s ease,
    background-color 0.22s ease,
    border-color 0.22s ease;
}

.t-about-atelier__tag:nth-child(odd) {
  transform: rotate(-2deg);
}
.t-about-atelier__tag:nth-child(even) {
  transform: rotate(1.5deg);
}

@media (hover: hover) {
  .t-about-atelier__tag:nth-child(odd):hover {
    transform: rotate(-5deg) translateY(-3px) scale(1.05);
    background: color-mix(in srgb, var(--site-color-accent) 30%, var(--t-bg-primary));
    border-color: var(--site-color-accent);
    box-shadow: var(--t-shadow-md);
  }

  .t-about-atelier__tag:nth-child(even):hover {
    transform: rotate(4deg) translateY(-3px) scale(1.05);
    background: color-mix(in srgb, var(--site-color-accent) 30%, var(--t-bg-primary));
    border-color: var(--site-color-accent);
    box-shadow: var(--t-shadow-md);
  }
}

/* ---- Reveal ---- */

.t-about-atelier__reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.t-section--about-atelier.is-visible .t-about-atelier__reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-about-atelier__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .t-about-atelier__photo--rotate,
  .t-about-atelier__note--rotate,
  .t-about-atelier__tag {
    transform: none !important;
    transition: none;
  }
}

/* ---- Responsive ---- */

@media (max-width: 899px) {
  .t-about-atelier__photo {
    width: min(100%, 24rem);
    max-width: 100%;
    margin-inline: auto;
  }

  .t-about-atelier__copy,
  .t-about-atelier__note {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .t-about-atelier__copy {
    margin-top: 1.5rem;
  }

  .t-about-atelier__photo--rotate,
  .t-about-atelier__note--rotate {
    transform: none;
  }

  .t-about-atelier__tag:nth-child(odd),
  .t-about-atelier__tag:nth-child(even) {
    transform: none;
  }
}

/* Desktop: photo stretches down to the chips; light gap so copy isn't covered. */
@media (min-width: 900px) {
  .t-about-atelier__board {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-rows: auto auto;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    row-gap: var(--t-gap-md);
    align-items: stretch;
  }

  .t-about-atelier__copy {
    display: contents;
  }

  .t-about-atelier__photo {
    grid-column: 1;
    grid-row: 1 / span 2;
    z-index: 1;
    margin-right: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .t-about-atelier__photo-frame {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: auto;
  }

  .t-about-atelier__photo-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .t-about-atelier__note {
    grid-column: 2;
    grid-row: 1;
    z-index: 1;
    min-width: 0;
  }

  .t-about-atelier__tags {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }
}

/* About variant — "about-folio"
   Portrait beside bio, dotted rules in the copy column. */

.t-section--about-folio {
  background: var(--t-bg-primary);
}

/* ---- Spread: photo | rail ---- */

.t-about-folio__spread {
  display: grid;
  gap: var(--t-gap-lg);
  align-items: start;
}

@media (min-width: 860px) {
  .t-about-folio__spread {
    --folio-spread-gap: clamp(1.5rem, 3vw, 2.75rem);
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--folio-spread-gap);
    align-items: stretch;
    container-type: inline-size;
  }
}

.t-about-folio__feature {
  position: relative;
  width: 100%;
  max-width: 22rem;
  min-height: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--t-radius-sm);
  overflow: hidden;
  border: 1px solid var(--t-border-strong);
  background: var(--t-bg-secondary);
}

@media (min-width: 860px) {
  .t-about-folio__feature {
    max-width: none;
    aspect-ratio: auto;
    min-height: min(
      44rem,
      80vh,
      calc((100cqw - var(--folio-spread-gap)) * 0.5625)
    );
    max-height: min(44rem, 80vh);
  }
}

.t-about-folio__feature-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Right column ---- */

.t-about-folio__rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--t-gap-md);
}

@media (min-width: 860px) {
  .t-about-folio__rail {
    min-height: 100%;
  }

  .t-about-folio__copy {
    flex: 1 1 auto;
  }

  .t-about-folio__stub {
    margin-top: auto;
  }
}

/* Shared dotted rule with punch holes */
.t-about-folio__rule {
  position: relative;
  flex: 1 1 auto;
  min-width: 2rem;
  height: 0;
  border-top: 1.5px dotted var(--t-border-strong);
}

.t-about-folio__rule::before,
.t-about-folio__rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--t-bg-primary);
  border: 1px solid var(--t-border-strong);
  transform: translateY(-50%);
}

.t-about-folio__rule::before {
  left: -0.15rem;
}
.t-about-folio__rule::after {
  right: -0.15rem;
}

.t-about-folio__index {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.t-about-folio__index-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.35rem;
  flex: 0 1 auto;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.t-about-folio__index-sep {
  color: var(--t-text-muted);
  opacity: 0.7;
}

.t-about-folio__copy {
  min-width: 0;
}

.t-about-folio__title {
  margin: 0 0 1rem;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.t-about-folio__body {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  white-space: pre-wrap;
}

.t-about-folio__stub {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.t-about-folio__stub .t-about-folio__rule {
  flex: 0 0 auto;
  width: 100%;
}

.t-about-folio__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.t-about-folio__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  border-radius: var(--t-radius-sm);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-primary);
  background: color-mix(in srgb, var(--site-color-accent) 18%, var(--t-bg-primary));
  border: 1px solid color-mix(in srgb, var(--site-color-accent) 42%, var(--t-border));
  cursor: default;
  transform-origin: center center;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.45, 0.64, 1),
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease;
}

@media (hover: hover) {
  .t-about-folio__tag:hover {
    transform: translateY(-2px) scale(1.04);
    background: color-mix(in srgb, var(--site-color-accent) 30%, var(--t-bg-primary));
    border-color: var(--site-color-accent);
    box-shadow: var(--t-shadow-sm);
  }
}

/* ---- Reveal ---- */

.t-about-folio__reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.t-section--about-folio.is-visible .t-about-folio__reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-about-folio__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .t-about-folio__tag {
    transition: none;
  }

  .t-about-folio__tag:hover {
    transform: none;
  }
}

/* ---- Responsive ---- */

@media (max-width: 859px) {
  .t-about-folio__feature {
    margin-inline: auto;
  }
}

/* Experience — minimal vertical list */

.t-section--experience {
  background: var(--t-bg-primary);
}

.t-exp-intro {
  max-width: 55rem;
  margin: 0 auto 2rem;
  text-align: left;
}

.t-exp-intro__title {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  text-align: center;
  color: var(--t-text-primary);
}

.t-section--experience .t-exp-intro,
.t-section--education .t-exp-intro {
  margin-bottom: 4rem;
}

.t-exp-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 55rem;
  margin-inline: auto;
}

.t-exp-role {
  width: 100%;
  padding: 1rem 0;
  text-align: left;
  border-bottom: 1px solid var(--t-border);
}

.t-exp-role:first-child {
  padding-top: 0;
}

.t-exp-role:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.t-exp-role__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-bottom: 0.5rem;
}

.t-exp-role__head-main {
  flex: 1;
  min-width: 0;
}

.t-exp-role__company {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  text-align: left;
  color: var(--t-text-primary);
}

.t-exp-role__company a {
  color: inherit;
  text-decoration: none;
}

.t-exp-role__company a:hover {
  color: var(--t-accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.t-exp-role__logo {
  flex-shrink: 0;
  width: auto;
  height: 3.5rem;
  max-width: 10rem;
  object-fit: contain;
  object-position: right center;
}

.t-exp-role__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  margin: 0.5rem 0 0;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-snug, 1.35);
}

.t-exp-role__position {
  font-weight: var(--t-font-weight-normal);
  color: var(--t-text-primary);
}

.t-exp-role__dates {
  color: var(--t-text-muted);
}

.t-exp-role__position:not(:first-child)::before,
.t-exp-role__dates:not(:first-child)::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--t-text-muted);
}

.t-exp-role__body {
  width: 100%;
  margin-bottom: 0.65rem;
}

.t-exp-role__summary {
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.t-exp-role__summary-text {
  display: inline;
}

.t-exp-role__toggle {
  display: inline;
  appearance: none;
  margin: 0 0 0 0.35em;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: inherit;
  font-weight: var(--t-font-weight-normal);
  line-height: inherit;
  color: var(--t-text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: baseline;
}

.t-exp-role__toggle-more,
.t-exp-role__toggle-less {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.t-exp-role__toggle-more[hidden],
.t-exp-role__toggle-less[hidden] {
  display: none !important;
}

.t-exp-role__toggle[aria-expanded="false"] .t-exp-role__toggle-less,
.t-exp-role__toggle[aria-expanded="true"] .t-exp-role__toggle-more {
  display: none !important;
}

.t-exp-role__toggle-icon {
  flex-shrink: 0;
  width: 0.85em;
  height: 0.85em;
  margin-top: 0.05em;
}

.t-exp-role__toggle:hover {
  color: var(--t-accent-hover);
}

.t-exp-role__full {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  margin-top: 0;
  padding-left: 1rem;
  border-left: 2px solid transparent;
  overflow: hidden;
  opacity: 0;
  transition:
    grid-template-rows 0.35s ease,
    margin-top 0.35s ease,
    opacity 0.3s ease,
    border-color 0.35s ease;
}

.t-exp-role__full.is-open {
  grid-template-rows: 1fr;
  margin-top: 0.5rem;
  border-left-color: var(--t-border);
  opacity: 1;
}

.t-exp-role__full-inner {
  min-height: 0;
  overflow: hidden;
}

.t-exp-role__full-inner p {
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.t-exp-role__full-inner .t-desc-list {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .t-exp-role__full {
    transition: none;
  }
}

.t-exp-role__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.t-exp-role__skills li {
  padding: 0.15rem 0.45rem;
  border-radius: var(--t-radius-pill);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.25;
  color: var(--t-text-secondary);
  background: var(--t-bg-elevated);
  border: 1px solid var(--t-border);
}

.t-section--volunteer {
  background: var(--t-bg-secondary);
}

.t-section--projects {
  background: var(--t-bg-primary);
}

.t-exp-role--simple .t-exp-role__body {
  margin-bottom: 0;
}

/*
 * experience variant: "experience-shipped"
 * Two-pane company list with role detail and expandable bullets.
 */
.site-page[data-theme="portfolio"] .t-section--experience-shipped {
  --exp-shipped-board-bg: var(--t-bg-primary);
  --exp-shipped-nav-bg: var(--t-bg-primary);
  --exp-shipped-detail-bg: color-mix(
    in srgb,
    var(--t-bg-secondary) 42%,
    var(--t-bg-primary) 58%
  );
  --exp-shipped-tab-active-bg: var(--t-bg-elevated);

  padding-block: clamp(6rem, 12vw, 9rem);
  background: var(--t-bg-primary);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__container {
  max-width: 72rem;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__header.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__board {
  display: grid;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  overflow: hidden;
  background: var(--exp-shipped-board-bg);
  box-shadow: var(--t-shadow-sm);
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.7s ease 0.08s,
    transform 0.7s ease 0.08s;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__board.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__nav {
  display: flex;
  flex-direction: column;
  background: var(--exp-shipped-nav-bg);
  border-bottom: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__tab {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.25rem;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--t-border) 65%, transparent);
  background: var(--exp-shipped-nav-bg);
  color: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.5s ease var(--exp-shipped-stagger, 0.1s),
    background-color 0.2s ease;
}

.site-page[data-theme="portfolio"]
  .t-exp-shipped__board.is-visible
  .t-exp-shipped__tab {
  opacity: 1;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__tab:last-child {
  border-bottom: 0;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__tab:hover {
  background: color-mix(
    in srgb,
    var(--exp-shipped-tab-active-bg) 55%,
    var(--exp-shipped-nav-bg)
  );
}

.site-page[data-theme="portfolio"] .t-exp-shipped__tab.is-active {
  background: var(--exp-shipped-tab-active-bg);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__tab-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--t-border);
  background: var(--t-bg-muted);
  color: var(--t-text-muted);
  overflow: hidden;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.site-page[data-theme="portfolio"]
  .t-exp-shipped__tab.is-active
  .t-exp-shipped__tab-mark {
  background: var(--t-text-primary);
  border-color: var(--t-text-primary);
  color: var(--t-text-inverse);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__tab-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.2rem;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__tab-initials {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.02em;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__tab-copy {
  min-width: 0;
  flex: 1;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__tab-company {
  display: block;
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  color: var(--t-text-primary);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__tab-dates {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__tab-indicator {
  flex-shrink: 0;
  width: 0.2rem;
  height: 2rem;
  border-radius: var(--t-radius-pill);
  background: transparent;
  transition: background-color 0.2s ease;
}

.site-page[data-theme="portfolio"]
  .t-exp-shipped__tab.is-active
  .t-exp-shipped__tab-indicator {
  background: var(--t-link);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  background: var(--exp-shipped-detail-bg);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__panel {
  display: none;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__panel.is-active {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  animation: t-exp-shipped-panel-in 0.35s ease;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__panel-intro {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__panel-eyebrow {
  margin: 0 0 0.25rem;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--t-link);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__panel-role {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  font-weight: var(--t-font-weight-semibold);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__panel-dates {
  margin: 0.35rem 0 0;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__panel-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  border: 1px solid var(--t-border);
  background: var(--t-bg-primary);
  color: var(--t-text-muted);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__panel-link:hover {
  border-color: var(--t-link);
  color: var(--t-link);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__panel-rule {
  width: 2.5rem;
  height: 1px;
  margin-bottom: 1.5rem;
  background: var(--t-link);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__panel-summary {
  margin: 0 0 1rem;
  font-size: var(--t-font-size-sm);
  line-height: 1.85;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__chips li {
  padding: 0.2rem 0.75rem;
  border-radius: var(--t-radius-pill);
  font-size: 0.6875rem;
  font-weight: var(--t-font-weight-medium);
  line-height: 1.35;
  color: var(--t-text-secondary);
  background: var(--t-bg-primary);
  border: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  color: var(--t-link);
  cursor: pointer;
  transition: color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__details-toggle:hover {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__details-chevron {
  transition: transform 0.3s ease;
}

.site-page[data-theme="portfolio"]
  .t-exp-shipped__details-toggle[aria-expanded="true"]
  .t-exp-shipped__details-chevron {
  transform: rotate(180deg);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__details:not(.is-open):not(.t-exp-shipped__details--static) {
  display: none;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__details.is-open,
.site-page[data-theme="portfolio"] .t-exp-shipped__details--static {
  display: block;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__details-inner {
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-exp-shipped__details-text,
.site-page[data-theme="portfolio"] .t-exp-shipped__details-inner p {
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-shipped__details-inner .t-desc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"]
  .t-exp-shipped__details-inner
  .t-desc-list
  li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.65rem;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"]
  .t-exp-shipped__details-inner
  .t-desc-list
  li::before {
  content: "";
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--t-link);
}

@keyframes t-exp-shipped-panel-in {
  from {
    opacity: 0;
    transform: translateX(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (min-width: 900px) {
  .site-page[data-theme="portfolio"] .t-exp-shipped__board {
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr);
  }

  .site-page[data-theme="portfolio"] .t-exp-shipped__nav {
    border-bottom: 0;
    border-right: 1px solid var(--t-border);
  }

  .site-page[data-theme="portfolio"] .t-exp-shipped__tab {
    padding-inline: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-exp-shipped__header,
  .site-page[data-theme="portfolio"] .t-exp-shipped__board,
  .site-page[data-theme="portfolio"] .t-exp-shipped__tab,
  .site-page[data-theme="portfolio"] .t-exp-shipped__panel.is-active,
  .site-page[data-theme="portfolio"] .t-exp-shipped__details,
  .site-page[data-theme="portfolio"] .t-exp-shipped__details-chevron {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/*
 * experience variant: "experience-timeline"
 * Vertical timeline with accent dots and expandable role highlights.
 */
.site-page[data-theme="portfolio"] .t-section--experience-timeline {
  --exp-timeline-accent: var(--site-color-primary);

  padding-block: clamp(6rem, 12vw, 9rem);
  background: var(--t-bg-primary);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__container {
  max-width: 56rem;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__header {
  margin-bottom: clamp(3rem, 6vw, 5rem);
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__header.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-exp-timeline__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-timeline__track {
  position: relative;
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 0.7s ease 0.08s,
    transform 0.7s ease 0.08s;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__track.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-exp-timeline__line {
  position: absolute;
  left: 1.3rem;
  top: 0;
  width: 1px;
  height: 0;
  background: var(--t-border-strong);
  transition: height 1.5s ease 0.3s;
}

.site-page[data-theme="portfolio"]
  .t-exp-timeline__track.is-visible
  .t-exp-timeline__line {
  height: 100%;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__item {
  position: relative;
  padding-left: 3.5rem;
  opacity: 0;
  transform: translateX(-1.25rem);
  transition:
    opacity 0.7s ease var(--exp-timeline-stagger, 0.2s),
    transform 0.7s ease var(--exp-timeline-stagger, 0.2s);
}

.site-page[data-theme="portfolio"]
  .t-exp-timeline__track.is-visible
  .t-exp-timeline__item {
  opacity: 1;
  transform: translateX(0);
}

.site-page[data-theme="portfolio"] .t-exp-timeline__dot {
  position: absolute;
  left: 0;
  top: 1.75rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--exp-timeline-accent);
  border-radius: 50%;
  background: var(--t-bg-primary);
  color: var(--exp-timeline-accent);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__dot-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.25rem;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__dot-initials {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.02em;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__card {
  padding-block: 2rem;
  border-bottom: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"]
  .t-exp-timeline__item:first-of-type
  .t-exp-timeline__card {
  padding-top: 0;
}

.site-page[data-theme="portfolio"]
  .t-exp-timeline__item:last-of-type
  .t-exp-timeline__card {
  border-bottom: 0;
}

.site-page[data-theme="portfolio"]
  .t-exp-timeline__item:first-of-type
  .t-exp-timeline__dot {
  top: 0.25rem;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__card-intro {
  min-width: 0;
  flex: 1;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.75rem;
  margin-bottom: 0.35rem;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__company {
  font-size: 0.625rem;
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--exp-timeline-accent);
}

.site-page[data-theme="portfolio"] .t-exp-timeline__dates {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-exp-timeline__role {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-normal);
  line-height: var(--t-line-height-snug);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-timeline__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  color: var(--t-text-muted);
  text-decoration: none;
  transition:
    opacity 0.2s ease,
    color 0.2s ease;
}

.site-page[data-theme="portfolio"]
  .t-exp-timeline__card:hover
  .t-exp-timeline__link,
.site-page[data-theme="portfolio"] .t-exp-timeline__link:focus-visible {
  opacity: 1;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__link:hover {
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-timeline__summary {
  margin: 0 0 1.25rem;
  font-size: var(--t-font-size-sm);
  line-height: 1.9;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-timeline__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__chips li {
  padding: 0.2rem 0.625rem;
  border-radius: var(--t-radius-pill);
  border: 1px solid var(--t-border);
  font-size: 0.625rem;
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--t-text-muted);
  background: transparent;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--t-font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--t-text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__toggle:hover,
.site-page[data-theme="portfolio"]
  .t-exp-timeline__toggle[aria-expanded="true"] {
  color: var(--exp-timeline-accent);
}

.site-page[data-theme="portfolio"] .t-exp-timeline__toggle-icon {
  transition: transform 0.3s ease;
}

.site-page[data-theme="portfolio"]
  .t-exp-timeline__toggle[aria-expanded="true"]
  .t-exp-timeline__toggle-icon {
  transform: rotate(180deg);
}

.site-page[data-theme="portfolio"]
  .t-exp-timeline__highlights:not(.is-open):not(
    .t-exp-timeline__highlights--static
  ) {
  display: none;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__highlights.is-open,
.site-page[data-theme="portfolio"] .t-exp-timeline__highlights--static {
  display: block;
  margin-top: 1rem;
}

.site-page[data-theme="portfolio"] .t-exp-timeline__highlights-inner {
  padding-left: 1.25rem;
  border-left: 1px solid
    color-mix(in srgb, var(--exp-timeline-accent) 22%, var(--t-border));
}

.site-page[data-theme="portfolio"] .t-exp-timeline__highlights-text,
.site-page[data-theme="portfolio"] .t-exp-timeline__highlights-inner p {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  padding-left: 0;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"]
  .t-exp-timeline__highlights-inner
  > p::before {
  content: "";
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--exp-timeline-accent);
  opacity: 0.65;
}

.site-page[data-theme="portfolio"]
  .t-exp-timeline__highlights-inner
  .t-desc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"]
  .t-exp-timeline__highlights-inner
  .t-desc-list
  li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.75rem;
  padding-left: 0;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"]
  .t-exp-timeline__highlights-inner
  .t-desc-list
  li::before {
  content: "";
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--exp-timeline-accent);
  opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-exp-timeline__header,
  .site-page[data-theme="portfolio"] .t-exp-timeline__track,
  .site-page[data-theme="portfolio"] .t-exp-timeline__item,
  .site-page[data-theme="portfolio"] .t-exp-timeline__line,
  .site-page[data-theme="portfolio"] .t-exp-timeline__toggle-icon {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .site-page[data-theme="portfolio"]
    .t-exp-timeline__track.is-visible
    .t-exp-timeline__line {
    height: 100%;
  }
}

/*
 * experience variant: "experience-pop"
 * Neo-brutalist stacked expandable role cards on a dot grid.
 */
.site-page[data-theme="portfolio"] .t-section--experience-pop {
  --exp-pop-accent: var(--site-color-primary);
  --exp-pop-ink: var(--t-text-primary);
  --exp-pop-shadow: var(--t-text-primary);

  position: relative;
  padding-block: clamp(6rem, 12vw, 9rem);
  background: var(--t-bg-primary);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-exp-pop__dots {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--t-text-primary) 16%, transparent) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-exp-pop__inner {
  position: relative;
  z-index: 1;
  max-width: 64rem;
}

.site-page[data-theme="portfolio"] .t-exp-pop__header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.site-page[data-theme="portfolio"] .t-exp-pop__header.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-exp-pop__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--exp-pop-ink);
}

.site-page[data-theme="portfolio"] .t-exp-pop__stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 0.6s ease 0.08s,
    transform 0.6s ease 0.08s;
}

.site-page[data-theme="portfolio"] .t-exp-pop__stack.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-exp-pop__card {
  position: relative;
  border: 2px solid var(--exp-pop-ink);
  border-radius: var(--t-radius-lg);
  background: var(--t-bg-primary);
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--exp-pop-shadow);
  opacity: 0;
  transition:
    opacity 0.5s ease var(--exp-pop-stagger, 0s),
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease;
}

.site-page[data-theme="portfolio"] .t-exp-pop__stack.is-visible .t-exp-pop__card {
  opacity: 1;
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-exp-pop__card:hover:not(.is-open) {
    transform: translate(-3px, -3px);
    box-shadow: 5px 5px 0 var(--exp-pop-shadow);
  }
}

.site-page[data-theme="portfolio"] .t-exp-pop__card.is-open {
  box-shadow: 6px 6px 0 var(--exp-pop-accent);
}

.site-page[data-theme="portfolio"] .t-exp-pop__card-accent {
  height: 0.25rem;
  background: var(--exp-pop-accent);
}

.site-page[data-theme="portfolio"] .t-exp-pop__card-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  padding: 1.25rem 1.5rem;
  border: 0;
  background: var(--t-bg-primary);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-exp-pop__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--exp-pop-ink);
  border-radius: 1rem;
  background: var(--exp-pop-accent);
  color: var(--exp-pop-ink);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-exp-pop__mark-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.25rem;
}

.site-page[data-theme="portfolio"] .t-exp-pop__mark-initials {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.02em;
}

.site-page[data-theme="portfolio"] .t-exp-pop__head-copy {
  flex: 1;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-exp-pop__company {
  display: block;
  font-size: var(--t-font-size-base);
  font-weight: var(--t-font-weight-bold);
  color: var(--exp-pop-ink);
}

.site-page[data-theme="portfolio"] .t-exp-pop__role {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-exp-pop__head-aside {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.site-page[data-theme="portfolio"] .t-exp-pop__dates {
  display: none;
  font-size: var(--t-font-size-xs);
  letter-spacing: 0.04em;
  color: var(--t-text-muted);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .site-page[data-theme="portfolio"] .t-exp-pop__dates {
    display: block;
  }
}

.site-page[data-theme="portfolio"] .t-exp-pop__expand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--exp-pop-ink);
  border-radius: 0.75rem;
  background: var(--t-bg-primary);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-bold);
  line-height: 1;
  color: var(--exp-pop-ink);
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.site-page[data-theme="portfolio"] .t-exp-pop__card.is-open .t-exp-pop__expand-icon {
  background: var(--exp-pop-ink);
  color: var(--t-text-inverse);
}

.site-page[data-theme="portfolio"] .t-exp-pop__expand-plus[hidden],
.site-page[data-theme="portfolio"] .t-exp-pop__expand-minus[hidden] {
  display: none !important;
}

.site-page[data-theme="portfolio"] .t-exp-pop__card-body {
  display: none;
  border-top: 2px solid var(--exp-pop-ink);
}

.site-page[data-theme="portfolio"] .t-exp-pop__card-body.is-open {
  display: block;
}

.site-page[data-theme="portfolio"] .t-exp-pop__card-body-inner {
  padding: 1.25rem 1.5rem 1.5rem;
}

.site-page[data-theme="portfolio"] .t-exp-pop__summary {
  margin: 0 0 1.25rem;
  font-size: var(--t-font-size-sm);
  line-height: 1.85;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-pop__bullets {
  margin-bottom: 1.25rem;
}

.site-page[data-theme="portfolio"] .t-exp-pop__bullet-text,
.site-page[data-theme="portfolio"] .t-exp-pop__bullets p {
  margin: 0 0 0.75rem;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-pop__bullets .t-desc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-exp-pop__bullets .t-desc-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.65rem;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-pop__bullets .t-desc-list li::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.45rem;
  border: 2px solid var(--exp-pop-ink);
  border-radius: 50%;
  background: var(--exp-pop-accent);
}

.site-page[data-theme="portfolio"] .t-exp-pop__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

.site-page[data-theme="portfolio"] .t-exp-pop__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-exp-pop__chips li {
  padding: 0.2rem 0.75rem;
  border: 2px solid var(--exp-pop-ink);
  border-radius: var(--t-radius-pill);
  font-size: 0.6875rem;
  font-weight: var(--t-font-weight-bold);
  line-height: 1.35;
  color: var(--exp-pop-ink);
  background: var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-exp-pop__chips li:nth-child(odd) {
  background: color-mix(in srgb, var(--exp-pop-accent) 22%, var(--t-bg-primary));
}

.site-page[data-theme="portfolio"] .t-exp-pop__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--exp-pop-ink);
  border-radius: 0.75rem;
  color: var(--exp-pop-ink);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-exp-pop__link:hover {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-exp-pop__header,
  .site-page[data-theme="portfolio"] .t-exp-pop__stack,
  .site-page[data-theme="portfolio"] .t-exp-pop__card,
  .site-page[data-theme="portfolio"] .t-exp-pop__expand-icon {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/*
 * experience variant: "experience-tenure"
 * Chronogram catalog — monumental start years cut by a horizon line,
 * company seals, asymmetric role plaques (museum wall + Swiss poster).
 */
.site-page[data-theme="portfolio"] .t-section--experience-tenure {
  --exp-tenure-accent: var(--site-color-primary);
  --exp-tenure-year: color-mix(
    in srgb,
    var(--site-color-text) 14%,
    var(--site-color-background)
  );
  --exp-tenure-horizon: color-mix(
    in srgb,
    var(--exp-tenure-accent) 72%,
    var(--site-color-text)
  );

  padding-block: clamp(5.5rem, 11vw, 9rem);
  background:
    radial-gradient(
      120% 70% at 0% 0%,
      color-mix(in srgb, var(--exp-tenure-accent) 7%, transparent),
      transparent 55%
    ),
    var(--t-bg-primary);
  overflow: clip;
}

.site-page[data-theme="portfolio"] .t-exp-tenure__container {
  max-width: min(var(--t-max-width), 62rem);
}

/* —— Header —— */
.site-page[data-theme="portfolio"] .t-exp-tenure__header {
  margin-bottom: clamp(2.75rem, 6vw, 4.5rem);
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.site-page[data-theme="portfolio"] .t-exp-tenure__header.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-exp-tenure__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

/* —— Chapters —— */
.site-page[data-theme="portfolio"] .t-exp-tenure__catalog {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.site-page[data-theme="portfolio"] .t-exp-tenure__chapter {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2rem, 4.5vw, 3.25rem);
  border-top: 1px solid var(--t-border);
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.75s ease calc(var(--exp-tenure-i, 0) * 0.04s),
    transform 0.75s ease calc(var(--exp-tenure-i, 0) * 0.04s);
}

.site-page[data-theme="portfolio"] .t-exp-tenure__chapter.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-exp-tenure__chapter:last-child {
  border-bottom: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-exp-tenure__chapter--current {
  border-top-color: color-mix(
    in srgb,
    var(--exp-tenure-accent) 35%,
    var(--t-border)
  );
}

/* —— Chronogram (year monument + seal) —— */
.site-page[data-theme="portfolio"] .t-exp-tenure__chronogram {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.85rem;
  min-height: 5.5rem;
  align-self: start;
  transition: transform 0.35s ease;
}

.site-page[data-theme="portfolio"] .t-exp-tenure__years {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: end;
  min-width: 0;
  padding-bottom: 0.35rem;
}

.site-page[data-theme="portfolio"] .t-exp-tenure__year-end {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--t-font-display);
  font-size: clamp(3.75rem, 14vw, 7.25rem);
  font-weight: var(--t-font-weight-normal);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.055em;
  line-height: 0.82;
  color: var(--exp-tenure-year);
  transition: color 0.35s ease, transform 0.45s ease;
}

.site-page[data-theme="portfolio"] .t-exp-tenure__year-end--span {
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.site-page[data-theme="portfolio"]
  .t-exp-tenure__chapter.is-visible
  .t-exp-tenure__year-end {
  color: color-mix(
    in srgb,
    var(--site-color-text) 22%,
    var(--site-color-background)
  );
}

.site-page[data-theme="portfolio"]
  .t-exp-tenure__chapter:hover
  .t-exp-tenure__year-end {
  color: color-mix(
    in srgb,
    var(--exp-tenure-accent) 58%,
    var(--site-color-background)
  );
  transform: translateX(-0.15rem);
}

.site-page[data-theme="portfolio"] .t-exp-tenure__year-start {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  margin: 0 0.65rem 0 0;
  padding-bottom: 0.05em;
  font-family: var(--t-font-sans);
  font-size: clamp(0.7rem, 1.4vw, 0.8rem);
  font-weight: var(--t-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-text-secondary);
  white-space: nowrap;
}

.site-page[data-theme="portfolio"]
  .t-exp-tenure__chapter--current
  .t-exp-tenure__year-start {
  color: var(--exp-tenure-accent);
}

.site-page[data-theme="portfolio"] .t-exp-tenure__horizon {
  grid-column: 2;
  grid-row: 2;
  display: block;
  height: 2px;
  width: 100%;
  margin-top: 0;
  align-self: center;
  background: var(--exp-tenure-horizon);
  transform: scaleX(0.22);
  transform-origin: left center;
  transition:
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
    height 0.3s ease,
    background 0.3s ease;
}

.site-page[data-theme="portfolio"]
  .t-exp-tenure__chapter.is-visible
  .t-exp-tenure__horizon {
  transform: scaleX(1);
}

.site-page[data-theme="portfolio"]
  .t-exp-tenure__chapter--current
  .t-exp-tenure__horizon {
  background: var(--exp-tenure-accent);
}

.site-page[data-theme="portfolio"]
  .t-exp-tenure__chapter:hover
  .t-exp-tenure__horizon {
  height: 4px;
  background: var(--exp-tenure-accent);
}

/* Seal */
.site-page[data-theme="portfolio"] .t-exp-tenure__seal {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.5rem, 7vw, 4.75rem);
  height: clamp(3.5rem, 7vw, 4.75rem);
  margin-bottom: 0.35rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  transform: rotate(-2deg);
  transition: transform 0.4s ease;
}

.site-page[data-theme="portfolio"]
  .t-exp-tenure__chapter:hover
  .t-exp-tenure__seal {
  transform: rotate(0deg) translateY(-0.15rem);
}

.site-page[data-theme="portfolio"]
  .t-exp-tenure__chapter--current
  .t-exp-tenure__seal {
  transform: rotate(0deg);
}

.site-page[data-theme="portfolio"] .t-exp-tenure__seal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}

.site-page[data-theme="portfolio"] .t-exp-tenure__seal-initials {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.06em;
  color: var(--t-text-secondary);
}

/* —— Plaque (role body) —— */
.site-page[data-theme="portfolio"] .t-exp-tenure__plaque {
  position: relative;
  min-width: 0;
  max-width: 28rem;
  padding-left: 1.15rem;
  border-left: 1px solid
    color-mix(in srgb, var(--exp-tenure-accent) 28%, var(--t-border));
  transition: border-left-color 0.3s ease;
}

.site-page[data-theme="portfolio"]
  .t-exp-tenure__chapter:hover
  .t-exp-tenure__plaque {
  border-left-color: var(--exp-tenure-accent);
}

.site-page[data-theme="portfolio"] .t-exp-tenure__institution {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-exp-tenure__role {
  margin: 0.45rem 0 0;
  font-family: var(--t-font-display);
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: 1.12;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-tenure__provenance {
  margin: 0.7rem 0 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-variant-numeric: tabular-nums;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-tenure__summary {
  margin: 0.95rem 0 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-tenure__toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.25;
  color: var(--t-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-exp-tenure__toggle:hover {
  color: var(--t-accent-hover);
}

.site-page[data-theme="portfolio"] .t-exp-tenure__full {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    grid-template-rows 0.35s ease,
    margin-top 0.35s ease,
    opacity 0.3s ease;
}

.site-page[data-theme="portfolio"] .t-exp-tenure__full.is-open,
.site-page[data-theme="portfolio"] .t-exp-tenure__full--static {
  grid-template-rows: 1fr;
  margin-top: 0.85rem;
  opacity: 1;
}

.site-page[data-theme="portfolio"] .t-exp-tenure__full-inner {
  min-height: 0;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-exp-tenure__full-inner p,
.site-page[data-theme="portfolio"] .t-exp-tenure__full-inner .t-desc-list {
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"]
  .t-exp-tenure__full-inner
  .t-desc-list
  li
  + li {
  margin-top: 0.55rem;
}

/* —— Mobile —— */
@media (max-width: 800px) {
  .site-page[data-theme="portfolio"] .t-exp-tenure__chapter {
    grid-template-columns: 1fr;
    gap: 1.15rem;
    align-items: start;
  }

  .site-page[data-theme="portfolio"] .t-exp-tenure__chronogram {
    min-height: 0;
  }

  .site-page[data-theme="portfolio"] .t-exp-tenure__year-end {
    font-size: clamp(3.25rem, 18vw, 5rem);
  }

  .site-page[data-theme="portfolio"] .t-exp-tenure__seal {
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.15rem;
  }

  .site-page[data-theme="portfolio"] .t-exp-tenure__plaque {
    max-width: none;
    padding-left: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-exp-tenure__header,
  .site-page[data-theme="portfolio"] .t-exp-tenure__chapter,
  .site-page[data-theme="portfolio"] .t-exp-tenure__horizon,
  .site-page[data-theme="portfolio"] .t-exp-tenure__year-end,
  .site-page[data-theme="portfolio"] .t-exp-tenure__seal,
  .site-page[data-theme="portfolio"] .t-exp-tenure__chronogram,
  .site-page[data-theme="portfolio"] .t-exp-tenure__full {
    transition: none !important;
    transform: none !important;
  }

  .site-page[data-theme="portfolio"] .t-exp-tenure__header,
  .site-page[data-theme="portfolio"] .t-exp-tenure__chapter {
    opacity: 1;
  }

  .site-page[data-theme="portfolio"] .t-exp-tenure__horizon {
    transform: scaleX(1);
  }
}

/*
 * experience variant: "experience-cast"
 * Role write-up on the left; company chips on the right in columns of five
 * (second column after five; cap at two, then the roster scrolls).
 */
.site-page[data-theme="portfolio"] .t-section--experience-cast {
  --exp-cast-accent: var(--site-color-accent);
  --exp-cast-primary: var(--site-color-primary);
  --exp-cast-on-primary: var(--site-on-primary);
  --exp-cast-chip-h: 3.55rem;
  --exp-cast-chip-w: 13.25rem;
  --exp-cast-chip-gap: 0.45rem;
  --exp-cast-per-col: 5;

  padding-block: clamp(5.5rem, 11vw, 9rem);
  background: var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-exp-cast__container {
  max-width: min(var(--t-max-width), 72rem);
}

.site-page[data-theme="portfolio"] .t-exp-cast__header {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.site-page[data-theme="portfolio"] .t-exp-cast__header.is-visible {
  opacity: 1;
  transform: none;
}

.site-page[data-theme="portfolio"] .t-exp-cast__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-cast__board {
  --exp-cast-progress: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "main"
    "roster";
  gap: 1.25rem;
  align-items: start;
  opacity: 0;
  transform: translateY(0.85rem);
  transition:
    opacity 0.7s ease 0.05s,
    transform 0.7s ease 0.05s;
}

.site-page[data-theme="portfolio"] .t-exp-cast__board.is-visible {
  opacity: 1;
  transform: none;
}

.site-page[data-theme="portfolio"] .t-exp-cast__roster {
  grid-area: roster;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-exp-cast__main {
  grid-area: main;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-exp-cast__lineup {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--exp-cast-chip-gap);
}

.site-page[data-theme="portfolio"] .t-exp-cast__poster {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
  min-height: var(--exp-cast-chip-h);
  padding: 0.45rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--t-border) 55%, transparent);
  border-radius: var(--t-radius-md);
  background: var(--t-bg-primary);
  color: var(--t-text-primary);
  text-align: left;
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-exp-cast__poster:hover:not(.is-current) {
  background: color-mix(in srgb, var(--exp-cast-accent) 10%, var(--t-bg-primary));
}

.site-page[data-theme="portfolio"] .t-exp-cast__poster.is-current {
  border-color: transparent;
  background: var(--exp-cast-primary);
  color: var(--exp-cast-on-primary);
}

.site-page[data-theme="portfolio"] .t-exp-cast__poster:focus-visible {
  outline: 2px solid var(--exp-cast-primary);
  outline-offset: 2px;
}

.site-page[data-theme="portfolio"] .t-exp-cast__poster.is-current:focus-visible {
  outline-color: var(--exp-cast-on-primary);
}

.site-page[data-theme="portfolio"] .t-exp-cast__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  overflow: hidden;
  border-radius: calc(var(--t-radius-md) - 2px);
  background: var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-exp-cast__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.site-page[data-theme="portfolio"] .t-exp-cast__initials {
  font-family: var(--t-font-display);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-cast__poster-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.05rem;
}

.site-page[data-theme="portfolio"] .t-exp-cast__company {
  font-family: var(--t-font-body);
  font-size: 0.8125rem;
  font-weight: var(--t-font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-page[data-theme="portfolio"] .t-exp-cast__year {
  font-family: var(--t-font-body);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  opacity: 0.72;
}

.site-page[data-theme="portfolio"] .t-exp-cast__progress {
  flex: 0 0 3px;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--t-border) 55%, transparent);
}

.site-page[data-theme="portfolio"] .t-exp-cast__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--exp-cast-primary);
  transform: scaleX(var(--exp-cast-progress, 0));
  transform-origin: left center;
}

.site-page[data-theme="portfolio"] .t-exp-cast__script[hidden] {
  display: none;
}

.site-page[data-theme="portfolio"] .t-exp-cast__lede {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0 0 0.95rem;
}

.site-page[data-theme="portfolio"] .t-exp-cast__lede-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3.15rem;
  height: 3.15rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--t-border) 55%, transparent);
  border-radius: var(--t-radius-md);
  background: var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-exp-cast__lede-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.site-page[data-theme="portfolio"] .t-exp-cast__lede-initials {
  font-family: var(--t-font-display);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-cast__lede-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.site-page[data-theme="portfolio"] .t-exp-cast__role {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--t-text-primary);
  overflow-wrap: break-word;
}

.site-page[data-theme="portfolio"] .t-exp-cast__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.3rem 0 0;
  font-family: var(--t-font-body);
  font-size: 0.875rem;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-cast__dot {
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-exp-cast__summary {
  margin: 0 0 0.75rem;
  font-family: var(--t-font-body);
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-cast__more {
  margin: 0 0 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--exp-cast-primary);
  font-family: var(--t-font-body);
  font-size: 0.8125rem;
  font-weight: var(--t-font-weight-medium);
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-exp-cast__more:focus-visible {
  outline: 2px solid var(--exp-cast-primary);
  outline-offset: 3px;
}

.site-page[data-theme="portfolio"] .t-exp-cast__long {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
  color: var(--t-text-secondary);
  font-size: var(--t-font-size-sm);
}

.site-page[data-theme="portfolio"] .t-exp-cast__long.is-open {
  grid-template-rows: 1fr;
}

.site-page[data-theme="portfolio"] .t-exp-cast__long-inner {
  overflow: hidden;
  min-height: 0;
}

.site-page[data-theme="portfolio"] .t-exp-cast__long .t-desc-list {
  margin: 0;
}

.site-page[data-theme="portfolio"] .t-exp-cast__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-exp-cast__chips li {
  padding: 0.2rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--t-border) 70%, transparent);
  border-radius: var(--t-radius-pill);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--t-text-muted);
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-exp-cast__board {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main roster";
    gap: 1.5rem 1.35rem;
  }

  .site-page[data-theme="portfolio"] .t-exp-cast__roster {
    flex-direction: row;
    gap: 0.65rem;
  }

  .site-page[data-theme="portfolio"] .t-exp-cast__progress {
    flex: 0 0 3px;
    width: 3px;
    height: auto;
    align-self: stretch;
  }

  .site-page[data-theme="portfolio"] .t-exp-cast__progress-fill {
    transform: scaleY(var(--exp-cast-progress, 0));
    transform-origin: top center;
  }

  .site-page[data-theme="portfolio"] .t-exp-cast__lineup {
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--exp-cast-rows, 5), var(--exp-cast-chip-h));
    grid-template-columns: repeat(var(--exp-cast-cols, 1), minmax(11.5rem, var(--exp-cast-chip-w)));
  }

  .site-page[data-theme="portfolio"] .t-exp-cast__poster {
    width: 100%;
    height: var(--exp-cast-chip-h);
    min-height: 0;
  }

  .site-page[data-theme="portfolio"] .t-exp-cast__board--scroll .t-exp-cast__roster {
    max-height: calc(
      var(--exp-cast-per-col) * var(--exp-cast-chip-h) +
        (var(--exp-cast-per-col) - 1) * var(--exp-cast-chip-gap)
    );
  }

  .site-page[data-theme="portfolio"] .t-exp-cast__board--scroll .t-exp-cast__lineup {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-exp-cast__board {
    gap: 2rem 1.75rem;
  }

  .site-page[data-theme="portfolio"] .t-exp-cast__lineup {
    grid-template-columns: repeat(var(--exp-cast-cols, 1), var(--exp-cast-chip-w));
  }

  .site-page[data-theme="portfolio"] .t-exp-cast__poster {
    padding: 0.5rem 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-exp-cast__header,
  .site-page[data-theme="portfolio"] .t-exp-cast__board,
  .site-page[data-theme="portfolio"] .t-exp-cast__long {
    transition: none;
    transform: none;
  }
}

/*
 * experience variant: "experience-reel"
 * Year-plate filmstrip sharing one top edge; featured role sits above as a headline.
 * Structure borrowed from 21st Hero Carousel filmstrip; plates use years + seals, not photos.
 */
.site-page[data-theme="portfolio"] .t-section--experience-reel {
  --exp-reel-accent: var(--site-color-accent);
  --exp-reel-primary: var(--site-color-primary);
  --exp-reel-plate: var(--site-color-accent);
  --exp-reel-plate-ink: var(--site-on-accent);
  --exp-reel-plate-active: var(--site-color-primary);
  --exp-reel-plate-active-ink: var(--site-on-primary);
  --exp-reel-gap: 0.65rem;
  --exp-reel-count: 1;
  --exp-reel-progress: 0;

  padding-block: clamp(5.5rem, 11vw, 9rem);
  background: var(--t-bg-primary);
  overflow-x: clip;
}

.site-page[data-theme="portfolio"] .t-exp-reel__container {
  max-width: min(var(--t-max-width), 70rem);
}

.site-page[data-theme="portfolio"] .t-exp-reel__header {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  opacity: 0;
  transform: translateY(1.15rem);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.site-page[data-theme="portfolio"] .t-exp-reel__header.is-visible {
  opacity: 1;
  transform: none;
}

.site-page[data-theme="portfolio"] .t-exp-reel__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-reel__stage {
  min-width: 0;
  opacity: 0;
  transform: translateY(1.15rem);
  transition:
    opacity 0.7s ease 0.08s,
    transform 0.7s ease 0.08s;
}

.site-page[data-theme="portfolio"] .t-exp-reel__stage.is-visible {
  opacity: 1;
  transform: none;
}

.site-page[data-theme="portfolio"] .t-exp-reel__feature {
  display: grid;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-exp-reel__panel {
  grid-area: 1 / 1;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-exp-reel__panel:not(.is-active) {
  visibility: hidden;
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-exp-reel__headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem 1.25rem;
  width: 100%;
  min-width: 0;
  margin-bottom: 1.15rem;
}

.site-page[data-theme="portfolio"] .t-exp-reel__headline--no-mark {
  grid-template-columns: minmax(0, 1fr);
}

.site-page[data-theme="portfolio"] .t-exp-reel__headline-copy {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-exp-reel__credit {
  margin: 0;
  font-family: var(--t-font-body);
  font-size: 0.6875rem;
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-exp-reel__role {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--t-text-primary);
  overflow-wrap: break-word;
}

.site-page[data-theme="portfolio"] .t-exp-reel__dates {
  margin: 0;
  font-family: var(--t-font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-reel__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 4.25rem;
  height: 4.25rem;
  overflow: hidden;
  background: var(--t-bg-elevated);
  color: var(--t-text-primary);
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-exp-reel__mark {
    width: 5.25rem;
    height: 5.25rem;
  }
}

.site-page[data-theme="portfolio"] .t-exp-reel__mark-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-page[data-theme="portfolio"] .t-exp-reel__mark-initials {
  font-family: var(--t-font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-reel__copy {
  min-width: 0;
  max-width: 40rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.site-page[data-theme="portfolio"] .t-exp-reel__summary {
  margin: 0;
  font-family: var(--t-font-body);
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-reel__toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--t-border-strong);
  background: transparent;
  font-family: var(--t-font-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-text-primary);
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-exp-reel__toggle:focus-visible {
  outline: 2px solid var(--exp-reel-primary);
  outline-offset: 3px;
}

.site-page[data-theme="portfolio"] .t-exp-reel__details {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows 0.4s ease, margin-top 0.4s ease;
}

.site-page[data-theme="portfolio"] .t-exp-reel__details.is-open {
  grid-template-rows: 1fr;
  margin-top: 0.85rem;
}

.site-page[data-theme="portfolio"] .t-exp-reel__details-inner {
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-reel__details--static {
  display: block;
}

.site-page[data-theme="portfolio"] .t-exp-reel__details--static .t-exp-reel__details-inner {
  overflow: visible;
}

.site-page[data-theme="portfolio"] .t-exp-reel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-exp-reel__chips li {
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-pill);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-exp-reel__progress {
  width: 100%;
  min-width: 0;
  margin-bottom: 0.85rem;
}

.site-page[data-theme="portfolio"] .t-exp-reel__progress-track {
  display: block;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background: var(--t-border-strong);
}

.site-page[data-theme="portfolio"] .t-exp-reel__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--exp-reel-primary);
  transform: scaleX(var(--exp-reel-progress));
  transform-origin: left center;
  will-change: transform;
}

.site-page[data-theme="portfolio"] .t-exp-reel__strip {
  display: grid;
  grid-template-columns: repeat(min(3, var(--exp-reel-count)), minmax(0, 1fr));
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-exp-reel__strip {
    grid-template-columns: repeat(min(3, var(--exp-reel-count)), minmax(0, 1fr));
    gap: var(--exp-reel-gap);
  }
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-exp-reel__strip {
    grid-template-columns: repeat(min(5, var(--exp-reel-count)), minmax(0, 1fr));
  }
}

.site-page[data-theme="portfolio"] .t-exp-reel__plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 4rem;
  min-width: 0;
  padding: 0.4rem;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--exp-reel-plate);
  color: var(--exp-reel-plate-ink);
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-exp-reel__plate {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.35rem;
    height: 6.25rem;
    padding: 0.65rem 0.6rem 0.55rem;
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-exp-reel__plate {
    gap: 0.4rem;
    height: 8.75rem;
    padding: 0.7rem 0.65rem 0.6rem;
  }
}

.site-page[data-theme="portfolio"] .t-exp-reel__plate.is-active {
  background: var(--exp-reel-plate-active);
  color: var(--exp-reel-plate-active-ink);
}

.site-page[data-theme="portfolio"] .t-exp-reel__plate:focus-visible {
  outline: 2px solid var(--exp-reel-primary);
  outline-offset: 3px;
}

.site-page[data-theme="portfolio"] .t-exp-reel__plate-year {
  display: none;
  font-family: var(--t-font-display);
  font-size: clamp(0.95rem, 2.4vw, 1.35rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: inherit;
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-exp-reel__plate-year {
    display: block;
  }
}

.site-page[data-theme="portfolio"] .t-exp-reel__plate-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 50%;
  background: var(--t-bg-elevated);
  margin-top: 0;
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-exp-reel__plate-seal {
    width: 1.85rem;
    height: 1.85rem;
    margin-top: auto;
  }
}

.site-page[data-theme="portfolio"] .t-exp-reel__plate-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-page[data-theme="portfolio"] .t-exp-reel__plate-initials {
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-reel__plate-company {
  display: none;
  max-width: 100%;
  font-family: var(--t-font-body);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-exp-reel__plate-company {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-exp-reel__header,
  .site-page[data-theme="portfolio"] .t-exp-reel__stage,
  .site-page[data-theme="portfolio"] .t-exp-reel__plate,
  .site-page[data-theme="portfolio"] .t-exp-reel__details {
    transition: none;
  }
}

/*
 * experience variant: "experience-spread"
 * Editorial role bands — company + facts + narrative, color mark on hover.
 */

.site-page[data-theme="portfolio"] .t-section--experience-spread {
  --exp-spread-rule: var(--t-border);
  --exp-spread-ghost: color-mix(in srgb, var(--site-color-text) 10%, transparent);

  padding-block: clamp(5.5rem, 11vw, 8.5rem);
  background: var(--t-bg-primary);
  overflow-x: clip;
}

.site-page[data-theme="portfolio"] .t-exp-spread__container {
  max-width: var(--t-max-width);
}

.site-page[data-theme="portfolio"] .t-exp-spread__header {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}

.site-page[data-theme="portfolio"] .t-exp-spread__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-spread__folio {
  border-top: 1px solid var(--exp-spread-rule);
}

.site-page[data-theme="portfolio"] .t-exp-spread__band {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--exp-spread-rule);
}

.site-page[data-theme="portfolio"] .t-exp-spread__ghost {
  display: block;
  position: absolute;
  top: 1.15rem;
  right: var(--t-section-padding-x);
  z-index: 0;
  width: 2.75rem;
  height: 2.75rem;
  opacity: 0;
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-exp-spread__ghost-img,
.site-page[data-theme="portfolio"] .t-exp-spread__ghost-initials {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-page[data-theme="portfolio"] .t-exp-spread__ghost-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--t-font-display);
  font-size: 1.25rem;
  font-weight: var(--t-font-weight-bold);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: 1;
  color: var(--exp-spread-ghost);
}

.site-page[data-theme="portfolio"] .t-exp-spread__grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(100%, var(--t-max-width));
  margin-inline: auto;
  padding: 1.35rem var(--t-section-padding-x);
  padding-right: calc(var(--t-section-padding-x) + 3.35rem);
}

.site-page[data-theme="portfolio"] .t-exp-spread__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.75rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-exp-spread__mark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  overflow: hidden;
  background: var(--t-bg-muted);
}

.site-page[data-theme="portfolio"] .t-exp-spread__mark-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-page[data-theme="portfolio"] .t-exp-spread__mark-initials {
  font-family: var(--t-font-display);
  font-size: 0.7rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-exp-spread__company {
  margin: 0;
  min-width: 0;
  font-family: var(--t-font-display);
  font-size: clamp(1.45rem, 5.5vw, 1.75rem);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-spread__years {
  margin: 0;
  width: 100%;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-exp-spread__facts {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-exp-spread__fact {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-exp-spread__fact-label {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-normal);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-exp-spread__fact-value {
  margin: 0;
  min-width: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  line-height: 1.35;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-spread__fact-dates {
  font-variant-numeric: tabular-nums;
}

.site-page[data-theme="portfolio"] .t-exp-spread__fact-link {
  display: inline;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--t-border-strong);
}

.site-page[data-theme="portfolio"] .t-exp-spread__fact-link:hover {
  color: var(--t-link);
  border-bottom-color: var(--t-link);
}

.site-page[data-theme="portfolio"] .t-exp-spread__copy {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-exp-spread__lede {
  margin: 0;
  max-width: 36rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-spread__lede-text + .t-exp-spread__toggle {
  margin-left: 0.4em;
}

.site-page[data-theme="portfolio"] .t-exp-spread__toggle {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--t-link);
  font: inherit;
  font-weight: var(--t-font-weight-medium);
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-exp-spread__toggle:hover {
  color: var(--t-accent-hover);
}

.site-page[data-theme="portfolio"] .t-exp-spread__full {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;
}

.site-page[data-theme="portfolio"] .t-exp-spread__full.is-open {
  grid-template-rows: 1fr;
}

.site-page[data-theme="portfolio"] .t-exp-spread__full-inner {
  min-height: 0;
  overflow: hidden;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-spread__full-inner p,
.site-page[data-theme="portfolio"] .t-exp-spread__full-inner .t-desc-list {
  margin: 0;
}

.site-page[data-theme="portfolio"] .t-exp-spread__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-exp-spread__skills li {
  padding-inline: 0.65rem;
  border-inline-end: 1px solid var(--t-border);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-exp-spread__skills li:first-child {
  padding-inline-start: 0;
}

.site-page[data-theme="portfolio"] .t-exp-spread__skills li:last-child {
  border-inline-end: 0;
  padding-inline-end: 0;
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-exp-spread__grid,
  .site-page[data-theme="portfolio"] .t-exp-spread__grid:not(.t-exp-spread__grid--no-facts):not(.t-exp-spread__grid--no-copy) {
    display: grid;
    grid-template-columns: minmax(11rem, 14rem) minmax(13rem, 17rem) minmax(0, 1fr);
    grid-template-areas: none;
    gap: 1.15rem 2rem;
    align-items: start;
    padding-block: 1.65rem;
  }

  .site-page[data-theme="portfolio"] .t-exp-spread__brand,
  .site-page[data-theme="portfolio"] .t-exp-spread__grid:not(.t-exp-spread__grid--no-facts):not(.t-exp-spread__grid--no-copy) .t-exp-spread__brand,
  .site-page[data-theme="portfolio"] .t-exp-spread__facts,
  .site-page[data-theme="portfolio"] .t-exp-spread__grid:not(.t-exp-spread__grid--no-facts):not(.t-exp-spread__grid--no-copy) .t-exp-spread__facts,
  .site-page[data-theme="portfolio"] .t-exp-spread__copy,
  .site-page[data-theme="portfolio"] .t-exp-spread__grid:not(.t-exp-spread__grid--no-facts):not(.t-exp-spread__grid--no-copy) .t-exp-spread__copy {
    grid-area: auto;
  }

  .site-page[data-theme="portfolio"] .t-exp-spread__grid--no-copy,
  .site-page[data-theme="portfolio"] .t-exp-spread__grid--no-facts {
    grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr);
  }

  .site-page[data-theme="portfolio"] .t-exp-spread__company {
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  }

  .site-page[data-theme="portfolio"] .t-exp-spread__ghost {
    top: 1.4rem;
    width: 3.15rem;
    height: 3.15rem;
  }

  .site-page[data-theme="portfolio"] .t-exp-spread__ghost-initials {
    font-size: 1.45rem;
  }
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-exp-spread__grid,
  .site-page[data-theme="portfolio"] .t-exp-spread__grid:not(.t-exp-spread__grid--no-facts):not(.t-exp-spread__grid--no-copy) {
    grid-template-columns: 15rem 16.5rem minmax(0, 1fr);
    gap: 1.25rem 2.25rem;
    padding-block: 1.85rem;
    padding-right: calc(var(--t-section-padding-x) + 6.5rem);
  }

  .site-page[data-theme="portfolio"] .t-exp-spread__grid--no-copy,
  .site-page[data-theme="portfolio"] .t-exp-spread__grid--no-facts {
    grid-template-columns: 15rem minmax(0, 1fr);
  }

  .site-page[data-theme="portfolio"] .t-exp-spread__ghost {
    top: 50%;
    width: 5.5rem;
    height: 5.5rem;
    transform: translateY(-50%);
  }

  .site-page[data-theme="portfolio"] .t-exp-spread__ghost-initials {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
  }
}

@media (hover: hover) and (pointer: fine) {
  .site-page[data-theme="portfolio"] .t-exp-spread__ghost {
    transition: opacity 0.28s ease;
  }

  .site-page[data-theme="portfolio"] .t-exp-spread__band:hover .t-exp-spread__ghost {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-exp-spread__ghost,
  .site-page[data-theme="portfolio"] .t-exp-spread__full {
    transition: none;
  }

  .site-page[data-theme="portfolio"] .t-exp-spread__ghost {
    opacity: 0;
  }
}

/*
 * experience variant: "experience-docket"
 * Filing docket — year + seal on a rail, every role's brief visible.
 */

.site-page[data-theme="portfolio"] .t-section--experience-docket {
  padding-block: clamp(5.5rem, 11vw, 8.5rem);
  background: var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-exp-docket__container {
  max-width: 52rem;
}

.site-page[data-theme="portfolio"] .t-exp-docket__mast {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}

.site-page[data-theme="portfolio"] .t-exp-docket__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-docket__files {
  display: flex;
  flex-direction: column;
}

.site-page[data-theme="portfolio"] .t-exp-docket__file {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7rem 1.75rem;
  padding: 1.15rem 0 1.25rem;
  border-bottom: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-exp-docket__file:last-child {
  border-bottom: 0;
}

.site-page[data-theme="portfolio"] .t-exp-docket__rail {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-exp-docket__tab {
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-exp-docket__file--current .t-exp-docket__tab {
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-exp-docket__seal {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  overflow: hidden;
  background: var(--t-bg-muted);
}

.site-page[data-theme="portfolio"] .t-exp-docket__seal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-page[data-theme="portfolio"] .t-exp-docket__seal-initials {
  font-family: var(--t-font-display);
  font-size: 0.72rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-docket__matter {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-exp-docket__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-exp-docket__who {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-exp-docket__role {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: 1.25;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-exp-docket__company {
  margin: 0.15rem 0 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  letter-spacing: 0.04em;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-docket__dates {
  margin: 0.1rem 0 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-exp-docket__brief {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-exp-docket__summary,
.site-page[data-theme="portfolio"] .t-exp-docket__long {
  margin: 0;
  max-width: 38rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-exp-docket__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-exp-docket__skills li {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-exp-docket__more {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--t-link);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-exp-docket__more:hover {
  color: var(--t-accent-hover);
}

.site-page[data-theme="portfolio"] .t-exp-docket__full {
  display: grid;
  grid-template-rows: 0fr;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  transition: grid-template-rows 0.28s ease;
}

.site-page[data-theme="portfolio"] .t-exp-docket__full.is-open {
  grid-template-rows: 1fr;
}

.site-page[data-theme="portfolio"] .t-exp-docket__full-inner {
  min-height: 0;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-exp-docket__full-inner p,
.site-page[data-theme="portfolio"] .t-exp-docket__full-inner .t-desc-list {
  margin: 0;
}

.site-page[data-theme="portfolio"] .t-exp-docket__link {
  color: var(--t-link);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  text-decoration: none;
  border-bottom: 1px solid var(--t-border-strong);
}

.site-page[data-theme="portfolio"] .t-exp-docket__link:hover {
  color: var(--t-accent-hover);
  border-bottom-color: var(--t-accent-hover);
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-exp-docket__file {
    grid-template-columns: 5.75rem minmax(0, 1fr);
    align-items: start;
    gap: 0 1.75rem;
    padding: 1.35rem 0 1.4rem;
  }

  .site-page[data-theme="portfolio"] .t-exp-docket__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding-top: 0.2rem;
  }

  .site-page[data-theme="portfolio"] .t-exp-docket__head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
  }

  .site-page[data-theme="portfolio"] .t-exp-docket__who {
    flex: 1 1 auto;
  }

  .site-page[data-theme="portfolio"] .t-exp-docket__role {
    font-size: 1.35rem;
  }

  .site-page[data-theme="portfolio"] .t-exp-docket__dates {
    margin: 0;
    flex-shrink: 0;
    text-align: end;
  }

  .site-page[data-theme="portfolio"] .t-exp-docket__file--no-year {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-exp-docket__full {
    transition: none;
  }
}

/* Education — timeline with logo connectors + flip stack */

.t-section--education {
  background: var(--t-bg-primary);
}

.t-edu-layout {
  display: grid;
  gap: 2.5rem;
  align-items: start;
  width: 100%;
  max-width: 55rem;
  margin-inline: auto;
}

.t-edu-layout__main {
  min-width: 0;
  order: 1;
}

@media (min-width: 900px) {
  .t-edu-layout {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 20%);
    gap: 2rem;
  }

  .t-edu-layout__main,
  .t-edu-stack-wrap {
    order: unset;
  }
}

/* Timeline */
.t-edu-timeline {
  display: flex;
  flex-direction: column;
}

.t-edu-entry {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 1.35rem;
  padding-bottom: 2.5rem;
}

.t-edu-entry:last-child {
  padding-bottom: 0;
}

.t-edu-entry__connector {
  position: relative;
  display: flex;
  justify-content: center;
}

.t-edu-entry__connector::after {
  content: "";
  position: absolute;
  top: 3.15rem;
  bottom: -2.5rem;
  left: 50%;
  width: 1px;
  background: var(--t-border-strong);
  transform: translateX(-50%);
}

.t-edu-entry:last-child .t-edu-entry__connector::after {
  display: none;
}

.t-edu-entry__logo-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--t-radius-md);
  background: var(--t-bg-elevated);
  border: 1px solid var(--t-border);
  box-shadow: 0 2px 10px rgb(0 0 0 / 4%);
}

.t-edu-entry__logo {
  width: 100%;
  height: 100%;
  padding: 0.35rem;
  object-fit: contain;
  box-sizing: border-box;
}

.t-edu-entry__initials {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 0.95rem;
  font-weight: var(--t-font-weight-normal);
  letter-spacing: 0.02em;
  color: var(--t-text-primary);
}

.t-edu-entry__content {
  min-width: 0;
  padding-top: 0.1rem;
}

.t-edu-entry__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.55rem;
}

.t-edu-entry__school {
  margin: 0;
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-bold);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.t-edu-entry__school a {
  color: inherit;
  text-decoration: none;
}

.t-edu-entry__school a:hover {
  filter: brightness(0.85);
}

.t-edu-badge {
  flex-shrink: 0;
  padding: 0.15rem 0.45rem;
  border-radius: var(--t-radius-pill);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.25;
  color: var(--t-text-secondary);
  background: var(--t-bg-elevated);
  border: 1px solid var(--t-border);
}

.t-edu-entry__meta {
  margin: 0.5rem 0 0;
}

.t-edu-entry__summary {
  margin: 0.75rem 0 0;
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.t-edu-entry__body {
  margin-top: 0;
}

.t-edu-entry__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.t-edu-entry__skills li {
  padding: 0.15rem 0.45rem;
  border-radius: var(--t-radius-pill);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.25;
  color: var(--t-text-secondary);
  background: var(--t-bg-elevated);
  border: 1px solid var(--t-border);
}

/* School photo stack — below timeline on mobile, sidebar on desktop */
.t-edu-stack-wrap {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 22rem;
  margin-inline: auto;
  order: 2;
}

@media (min-width: 900px) {
  .t-edu-stack-wrap {
    max-width: none;
    margin-inline: 0;
    align-self: start;
  }
}

.t-edu-stack {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 4 / 5;
  min-height: 18rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.t-edu-stack__card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--t-radius-lg);
  background: var(--t-bg-muted);
  border: 1px solid var(--t-border);
  box-shadow: 0 8px 28px rgb(0 0 0 / 8%);
  transition:
    transform 0.4s ease,
    opacity 0.35s ease;
  transform-origin: center center;
}

.t-edu-stack__media {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

.t-edu-stack__chip {
  flex-shrink: 0;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border-top: 1px solid var(--t-border);
  background: var(--t-bg-elevated);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.25;
  text-align: center;
  color: var(--t-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-edu-stack__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0.5rem;
  box-sizing: border-box;
}

.t-edu-stack__image--cover {
  padding: 0;
  object-fit: cover;
  object-position: center;
}

.t-edu-stack__fallback {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(2.5rem, 8vw, 3.5rem);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
}

.t-edu-stack__card[data-edu-depth="0"] {
  z-index: 3;
  transform: rotate(0deg) translateX(0);
  opacity: 1;
}

.t-edu-stack__card[data-edu-depth="1"] {
  z-index: 2;
  transform: rotate(6deg) translateX(10px) translateY(5px);
  opacity: 0.92;
}

.t-edu-stack__card[data-edu-depth="2"] {
  z-index: 1;
  transform: rotate(12deg) translateX(18px) translateY(8px);
  opacity: 0.85;
}

.t-edu-stack__card[data-edu-depth="3"],
.t-edu-stack__card[data-edu-depth="4"] {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transform: rotate(16deg) translateX(22px);
}

@media (prefers-reduced-motion: reduce) {
  .t-edu-stack__card {
    transition: none;
  }
}

/* Courses */
.t-edu-courses {
  width: 100%;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--t-border);
}

.t-edu-courses__title {
  margin: 0 0 0.75rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.t-edu-courses__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.t-edu-courses__item {
  padding: 0.4rem 0;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.t-edu-courses__name {
  color: var(--t-text-primary);
  font-weight: var(--t-font-weight-medium);
}

.t-edu-courses__via a {
  color: var(--t-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.t-edu-courses__via a:hover {
  color: var(--t-accent);
}

/*
 * education variant: "education-showcase"
 * Split card with image panel, degree switcher, and school details.
 */
.site-page[data-theme="portfolio"] .t-section--education-showcase {
  --edu-showcase-accent: var(--site-color-primary);
  --edu-showcase-detail-bg: var(--t-bg-primary);
  --edu-showcase-visual-fallback: color-mix(
    in srgb,
    var(--t-bg-secondary) 35%,
    var(--t-text-primary) 65%
  );

  padding-block: clamp(6rem, 12vw, 9rem);
  background: var(--t-bg-primary);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__container {
  max-width: 72rem;
}

.site-page[data-theme="portfolio"] .t-section--education-showcase .t-exp-intro {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.site-page[data-theme="portfolio"] .t-section--education-showcase .t-exp-intro.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__card {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease 0.08s,
    transform 0.7s ease 0.08s;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__board {
  display: grid;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  overflow: hidden;
  background: var(--t-bg-primary);
  box-shadow: var(--t-shadow-sm);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__visual {
  position: relative;
  min-height: 21rem;
  background: var(--edu-showcase-visual-fallback);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__visual-panel {
  display: none;
  position: relative;
  min-height: 21rem;
  height: 100%;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__visual-panel.is-active {
  display: block;
  animation: t-edu-showcase-fade-in 0.5s ease;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__visual-panel--fallback {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--edu-showcase-accent) 35%, var(--t-bg-secondary)),
    var(--edu-showcase-visual-fallback)
  );
}

.site-page[data-theme="portfolio"] .t-edu-showcase__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__image--cover {
  object-fit: cover;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--t-text-primary) 80%, transparent),
    color-mix(in srgb, var(--t-text-primary) 20%, transparent) 45%,
    transparent
  );
}

.site-page[data-theme="portfolio"] .t-edu-showcase__stack-chip {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 2;
  padding: 0.35rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--t-text-inverse) 25%, transparent);
  border-radius: var(--t-radius-pill);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-inverse);
  background: color-mix(in srgb, var(--t-text-primary) 45%, transparent);
  backdrop-filter: blur(8px);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__visual-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: 1.75rem;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__degree-badge {
  display: inline-block;
  padding: 0.35rem 1rem;
  border-radius: var(--t-radius-pill);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-bold);
  color: var(--site-on-primary);
  background: var(--edu-showcase-accent);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__field {
  margin: 0.75rem 0 0;
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-normal);
  line-height: var(--t-line-height-snug);
  color: color-mix(in srgb, var(--t-text-inverse) 82%, transparent);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__dots {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__dot {
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--t-text-inverse) 60%, transparent);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__dot.is-active {
  background: var(--t-text-inverse);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--edu-showcase-detail-bg);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__panel {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__panel.is-active {
  display: flex;
  animation: t-edu-showcase-slide-in 0.4s ease;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__school-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__school-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--t-border);
  border-radius: 0.75rem;
  background: color-mix(
    in srgb,
    var(--t-bg-secondary) 55%,
    var(--t-bg-primary)
  );
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__school-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.25rem;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__school-initials {
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-bold);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__school-copy {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__school-name {
  display: block;
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__degree {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--t-border);
  border-radius: 0.75rem;
  color: var(--t-text-muted);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__link:hover {
  border-color: var(--edu-showcase-accent);
  color: var(--edu-showcase-accent);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__rule {
  width: 2rem;
  height: 1px;
  margin-bottom: 1.5rem;
  background: var(--edu-showcase-accent);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__highlight {
  margin: 0 0 1.25rem;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-base);
  line-height: 1.85;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__description {
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: 1.9;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__tabs-bar {
  position: relative;
  flex-shrink: 0;
  padding: 1rem clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
  background: var(--edu-showcase-detail-bg);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__tabs-bar::before {
  content: "";
  position: absolute;
  top: 0;
  right: clamp(1.5rem, 3vw, 2.5rem);
  left: clamp(1.5rem, 3vw, 2.5rem);
  height: 1px;
  background: color-mix(in srgb, var(--t-border) 70%, transparent);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__tab {
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--t-border);
  border-radius: 0.75rem;
  background: color-mix(
    in srgb,
    var(--t-bg-secondary) 30%,
    var(--t-bg-primary)
  );
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-muted);
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.site-page[data-theme="portfolio"] .t-edu-showcase__tab.is-active {
  border-color: var(--edu-showcase-accent);
  color: var(--site-on-primary);
  background: var(--edu-showcase-accent);
}

.site-page[data-theme="portfolio"] .t-edu-showcase__tab:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc((100% - 0.5rem) / 2);
  justify-self: center;
}

@media (min-width: 900px) {
  .site-page[data-theme="portfolio"] .t-edu-showcase__board {
    grid-template-columns: minmax(16rem, 5fr) minmax(0, 7fr);
  }

  .site-page[data-theme="portfolio"] .t-edu-showcase__visual,
  .site-page[data-theme="portfolio"] .t-edu-showcase__visual-panel {
    min-height: 24rem;
  }
}

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

@keyframes t-edu-showcase-slide-in {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-section--education-showcase .t-exp-intro,
  .site-page[data-theme="portfolio"] .t-edu-showcase__card,
  .site-page[data-theme="portfolio"] .t-edu-showcase__visual-panel.is-active,
  .site-page[data-theme="portfolio"] .t-edu-showcase__panel.is-active {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/*
 * education variant: "education-cards"
 * Image cards grid without timeline ruler.
 */
.site-page[data-theme="portfolio"] .t-section--education-cards {
  padding-block: clamp(6rem, 12vw, 9rem);
  background: var(--t-bg-primary);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-edu-cards__container {
  max-width: 64rem;
}

.site-page[data-theme="portfolio"] .t-section--education-cards .t-exp-intro {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.site-page[data-theme="portfolio"] .t-section--education-cards .t-exp-intro.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-edu-cards__grid {
  display: grid;
  gap: 1.5rem;
}

.site-page[data-theme="portfolio"] .t-edu-cards__card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  background: var(--t-bg-elevated);
  opacity: 0;
  transform: translateY(1.875rem);
  transition:
    opacity 0.6s ease var(--edu-cards-stagger, 0.3s),
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

.site-page[data-theme="portfolio"] .t-edu-cards__card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-edu-cards__card.is-visible:hover {
    border-color: var(--site-color-primary);
    background: color-mix(in srgb, var(--site-color-primary) 7%, var(--t-bg-elevated));
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--site-color-primary) 22%, transparent),
      0 10px 36px color-mix(in srgb, var(--site-color-primary) 22%, transparent);
  }

  .site-page[data-theme="portfolio"] .t-edu-cards__card:hover .t-edu-cards__image {
    transform: scale(1.06);
  }
}

.site-page[data-theme="portfolio"] .t-edu-cards__media {
  position: relative;
  height: clamp(11rem, 24vw, 14rem);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-edu-cards__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(40%) brightness(0.72);
  transition: transform 0.7s ease;
}

.site-page[data-theme="portfolio"] .t-edu-cards__image--cover {
  object-fit: cover;
}

.site-page[data-theme="portfolio"] .t-edu-cards__degree-chip {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: 0.35rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--t-text-inverse) 35%, transparent);
  border-radius: var(--t-radius-pill);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--t-text-inverse);
  background: color-mix(in srgb, var(--t-bg-primary) 22%, transparent);
  backdrop-filter: blur(8px);
}

.site-page[data-theme="portfolio"] .t-edu-cards__chip {
  display: inline-block;
  flex-shrink: 0;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-pill);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--t-text-secondary);
  background: transparent;
}

.site-page[data-theme="portfolio"] .t-edu-cards__media-period {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--t-text-inverse) 60%, transparent);
}

.site-page[data-theme="portfolio"] .t-edu-cards__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

.site-page[data-theme="portfolio"] .t-edu-cards__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-page[data-theme="portfolio"] .t-edu-cards__card-head-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: 0.5rem;
}

.site-page[data-theme="portfolio"] .t-edu-cards__school-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-edu-cards__school-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--t-border);
  border-radius: 0.5rem;
  background: var(--t-bg-muted);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-edu-cards__school-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.2rem;
}

.site-page[data-theme="portfolio"] .t-edu-cards__school-initials {
  font-size: 0.625rem;
  font-weight: var(--t-font-weight-bold);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-edu-cards__school-copy {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-edu-cards__school-name {
  display: block;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-edu-cards__field {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.625rem;
  letter-spacing: 0.03em;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-edu-cards__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  color: var(--t-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-edu-cards__link:hover,
.site-page[data-theme="portfolio"] .t-edu-cards__link:focus-visible {
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-edu-cards__divider {
  height: 1px;
  background: var(--t-border);
}

.site-page[data-theme="portfolio"] .t-edu-cards__highlight {
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: 1.85;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-edu-cards__description {
  margin: 0;
  font-size: var(--t-font-size-xs);
  line-height: 1.8;
  color: var(--t-text-muted);
}

@media (min-width: 900px) {
  .site-page[data-theme="portfolio"] .t-edu-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-page[data-theme="portfolio"] .t-edu-cards__card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 1.5rem) / 2);
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-section--education-cards .t-exp-intro,
  .site-page[data-theme="portfolio"] .t-edu-cards__card,
  .site-page[data-theme="portfolio"] .t-edu-cards__image {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/*
 * education variant: "education-ruler"
 * Horizontal year ruler with school picker detail panel.
 */
.site-page[data-theme="portfolio"] .t-section--education-ruler {
  --edu-ruler-tone-1: var(--site-color-accent);
  --edu-ruler-tone-2: var(--site-color-secondary);
  --edu-ruler-tone-3: var(--site-color-primary);
  --edu-ruler-tone-4: var(--site-color-accent);
  --edu-ruler-board-bg: var(--t-bg-primary);
  --edu-ruler-nav-bg: var(--t-bg-primary);
  --edu-ruler-detail-bg: color-mix(
    in srgb,
    var(--t-bg-secondary) 42%,
    var(--t-bg-primary) 58%
  );
  --edu-ruler-tab-active-bg: var(--t-bg-elevated);

  padding-block: clamp(6rem, 12vw, 9rem);
  background: var(--t-bg-primary);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__container {
  max-width: 72rem;
}

.site-page[data-theme="portfolio"] .t-section--education-ruler .t-exp-intro {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.site-page[data-theme="portfolio"]
  .t-section--education-ruler
  .t-exp-intro.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Timeline ruler */
.site-page[data-theme="portfolio"] .t-edu-ruler__timeline {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  opacity: 0;
  transition: opacity 0.6s ease 0.3s;
  overflow: visible;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__timeline.is-visible {
  opacity: 1;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__ruler {
  position: relative;
  padding-top: 2.85rem;
  overflow: visible;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__years {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
  margin-top: 0.35rem;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__year {
  font-family: var(--t-font-sans);
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__track {
  position: relative;
  height: 0.375rem;
  border-radius: var(--t-radius-pill);
  background: var(--t-bg-muted);
  overflow: visible;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__marker {
  --edu-ruler-tone: var(--edu-ruler-tone-1);

  position: absolute;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__marker--tone-1 {
  --edu-ruler-tone: var(--edu-ruler-tone-1);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__marker--tone-2 {
  --edu-ruler-tone: var(--edu-ruler-tone-2);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__marker--tone-3 {
  --edu-ruler-tone: var(--edu-ruler-tone-3);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__marker--tone-4 {
  --edu-ruler-tone: var(--edu-ruler-tone-4);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__segment {
  top: 0;
  left: var(--edu-ruler-left);
  height: 100%;
  width: 0;
  border-radius: var(--t-radius-pill);
  background: var(--edu-ruler-tone);
  opacity: 0.92;
  transition:
    width 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--edu-ruler-marker-delay, 0.4s),
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

.site-page[data-theme="portfolio"]
  .t-edu-ruler__timeline.is-visible
  .t-edu-ruler__segment {
  width: var(--edu-ruler-width);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__dot {
  top: 50%;
  left: var(--edu-ruler-left);
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--edu-ruler-tone);
  box-shadow: 0 0 0 2px var(--t-bg-primary);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1)
      var(--edu-ruler-marker-delay, 0.4s),
    opacity 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

.site-page[data-theme="portfolio"]
  .t-edu-ruler__timeline.is-visible
  .t-edu-ruler__dot {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.92;
}

.site-page[data-theme="portfolio"]
  .t-section--education-ruler.is-tab-active
  .t-edu-ruler__marker:not(.is-highlighted) {
  opacity: 0.28;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__marker.is-highlighted {
  opacity: 1;
  filter: brightness(1.08);
  z-index: 1;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__segment.is-highlighted {
  transform: scaleY(1.45);
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--edu-ruler-tone) 35%, var(--t-bg-primary));
}

.site-page[data-theme="portfolio"] .t-edu-ruler__dot.is-highlighted {
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow:
    0 0 0 2px var(--t-bg-primary),
    0 0 0 4px color-mix(in srgb, var(--edu-ruler-tone) 45%, transparent);
}

/* School chips above bar ends, aligned to ending year */
.site-page[data-theme="portfolio"] .t-edu-ruler__chips {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5rem;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__chip {
  --edu-ruler-tone: var(--edu-ruler-tone-1);

  position: absolute;
  bottom: 0.1rem;
  left: var(--edu-ruler-chip-left);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--edu-ruler-tone);
  cursor: pointer;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0.35rem) scale(0.85);
  opacity: 0;
  transition:
    opacity 0.15s ease,
    color 0.15s ease,
    filter 0.15s ease;
}

.site-page[data-theme="portfolio"]
  .t-edu-ruler__timeline.is-visible
  .t-edu-ruler__chip {
  opacity: 0.92;
  transform: translateX(-50%) translateY(0) scale(1);
  animation: t-edu-ruler-chip-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1)
    var(--edu-ruler-chip-delay, 0.55s) both;
}

@keyframes t-edu-ruler-chip-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(0.35rem) scale(0.85);
  }
}

.site-page[data-theme="portfolio"] .t-edu-ruler__chip--tone-1 {
  --edu-ruler-tone: var(--edu-ruler-tone-1);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__chip--tone-2 {
  --edu-ruler-tone: var(--edu-ruler-tone-2);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__chip--tone-3 {
  --edu-ruler-tone: var(--edu-ruler-tone-3);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__chip--tone-4 {
  --edu-ruler-tone: var(--edu-ruler-tone-4);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__chip-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  border: 1px solid
    color-mix(in srgb, var(--edu-ruler-tone) 32%, var(--t-border));
  background: color-mix(
    in srgb,
    var(--edu-ruler-tone) 10%,
    var(--t-bg-primary)
  );
  box-shadow: var(--t-shadow-sm);
  overflow: hidden;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__chip-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.18rem;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__chip-initials {
  font-family: var(--t-font-sans);
  font-size: 0.625rem;
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.02em;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__chip-arrow {
  flex-shrink: 0;
  opacity: 0.85;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.site-page[data-theme="portfolio"]
  .t-edu-ruler__chip:hover
  .t-edu-ruler__chip-mark,
.site-page[data-theme="portfolio"]
  .t-edu-ruler__chip:focus-visible
  .t-edu-ruler__chip-mark {
  border-color: var(--edu-ruler-tone);
  transform: translateY(-1px);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__chip:focus-visible {
  outline: none;
}

.site-page[data-theme="portfolio"]
  .t-edu-ruler__chip:focus-visible
  .t-edu-ruler__chip-mark {
  box-shadow:
    var(--t-shadow-sm),
    0 0 0 2px color-mix(in srgb, var(--edu-ruler-tone) 35%, transparent);
}

.site-page[data-theme="portfolio"]
  .t-edu-ruler__chip.is-active
  .t-edu-ruler__chip-mark {
  border-color: var(--edu-ruler-tone);
  border-width: 2px;
  background: var(--t-bg-primary);
  box-shadow:
    0 0 0 2px var(--t-bg-primary),
    0 0 0 3px color-mix(in srgb, var(--edu-ruler-tone) 45%, transparent);
}

.site-page[data-theme="portfolio"]
  .t-edu-ruler__chip.is-active
  .t-edu-ruler__chip-initials {
  color: var(--edu-ruler-tone);
}

.site-page[data-theme="portfolio"]
  .t-section--education-ruler.is-tab-active
  .t-edu-ruler__chip:not(.is-highlighted) {
  opacity: 0.38;
  filter: grayscale(0.15);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__chip.is-highlighted {
  opacity: 1;
  filter: none;
  z-index: 1;
}

.site-page[data-theme="portfolio"]
  .t-edu-ruler__chip.is-highlighted
  .t-edu-ruler__chip-arrow {
  opacity: 1;
  transform: translateY(2px);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 0.15rem;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tick {
  width: 1px;
  height: 0.5rem;
  background: var(--t-border-strong);
}

/* Shipped-style board */
.site-page[data-theme="portfolio"] .t-edu-ruler__board {
  display: grid;
  gap: 0;
  align-items: start;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  overflow: hidden;
  background: var(--edu-ruler-board-bg);
  box-shadow: var(--t-shadow-sm);
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease 0.08s,
    transform 0.7s ease 0.08s;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__board.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__nav {
  display: flex;
  flex-direction: column;
  background: var(--edu-ruler-nav-bg);
  border-bottom: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tab {
  --edu-ruler-tone: var(--edu-ruler-tone-1);

  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.25rem;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--t-border) 65%, transparent);
  background: var(--edu-ruler-nav-bg);
  color: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.5s ease var(--edu-ruler-stagger, 0.1s),
    background-color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tab--tone-1 {
  --edu-ruler-tone: var(--edu-ruler-tone-1);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tab--tone-2 {
  --edu-ruler-tone: var(--edu-ruler-tone-2);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tab--tone-3 {
  --edu-ruler-tone: var(--edu-ruler-tone-3);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tab--tone-4 {
  --edu-ruler-tone: var(--edu-ruler-tone-4);
}

.site-page[data-theme="portfolio"]
  .t-edu-ruler__board.is-visible
  .t-edu-ruler__tab {
  opacity: 1;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tab:last-child {
  border-bottom: 0;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tab:hover {
  background: color-mix(
    in srgb,
    var(--edu-ruler-tab-active-bg) 55%,
    var(--edu-ruler-nav-bg)
  );
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tab.is-active {
  background: var(--edu-ruler-tab-active-bg);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tab-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  border: 1px solid
    color-mix(in srgb, var(--edu-ruler-tone) 28%, var(--t-border));
  background: color-mix(in srgb, var(--edu-ruler-tone) 10%, var(--t-bg-muted));
  color: var(--edu-ruler-tone);
  overflow: hidden;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.site-page[data-theme="portfolio"]
  .t-edu-ruler__tab.is-active
  .t-edu-ruler__tab-mark {
  background: var(--edu-ruler-tone);
  border-color: var(--edu-ruler-tone);
  color: var(--site-on-primary);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tab-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.2rem;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tab-initials {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.02em;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tab-copy {
  min-width: 0;
  flex: 1;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tab-school {
  display: block;
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  color: var(--t-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tab-dates {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__tab-indicator {
  flex-shrink: 0;
  width: 0.2rem;
  height: 2rem;
  border-radius: var(--t-radius-pill);
  background: transparent;
  transition: background-color 0.2s ease;
}

.site-page[data-theme="portfolio"]
  .t-edu-ruler__tab.is-active
  .t-edu-ruler__tab-indicator {
  background: var(--edu-ruler-tone);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__detail {
  min-width: 0;
  align-self: start;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel {
  --edu-ruler-tone: var(--edu-ruler-tone-1);
  --edu-ruler-on-tone: var(--site-on-accent);

  display: none;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel--tone-1 {
  --edu-ruler-tone: var(--edu-ruler-tone-1);
  --edu-ruler-on-tone: var(--site-on-accent);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel--tone-2 {
  --edu-ruler-tone: var(--edu-ruler-tone-2);
  --edu-ruler-on-tone: var(--site-color-background);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel--tone-3 {
  --edu-ruler-tone: var(--edu-ruler-tone-3);
  --edu-ruler-on-tone: var(--site-on-primary);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel--tone-4 {
  --edu-ruler-tone: var(--edu-ruler-tone-4);
  --edu-ruler-on-tone: var(--site-on-accent);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel.is-active {
  display: block;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--edu-ruler-detail-bg);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-content {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-top {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-top--no-visual {
  display: block;
  margin-bottom: 0;
}

.site-page[data-theme="portfolio"]
  .t-edu-ruler__panel-top--no-visual
  .t-edu-ruler__panel-head {
  margin-bottom: 1.25rem;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-body {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-main {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-head {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-intro {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-aside {
  flex: 0 0 auto;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-visual {
  position: relative;
  width: clamp(7.75rem, 28vw, 12rem);
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: var(--t-radius-md);
  overflow: hidden;
  border: 1.5px solid var(--edu-ruler-tone);
  background: var(--t-bg-muted);
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--edu-ruler-tone) 18%, transparent);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(35%) brightness(0.75);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-image--cover {
  object-fit: cover;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-eyebrow {
  margin: 0 0 0.25rem;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--edu-ruler-tone);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-degree {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  font-weight: var(--t-font-weight-semibold);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-field {
  margin: 0.35rem 0 0;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-dates {
  margin: 0.35rem 0 0;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  border: 1px solid var(--t-border);
  background: var(--t-bg-primary);
  color: var(--t-text-muted);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-link:hover,
.site-page[data-theme="portfolio"] .t-edu-ruler__panel-link:focus-visible {
  border-color: var(--edu-ruler-tone);
  color: var(--edu-ruler-tone);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-rule {
  width: 2.5rem;
  height: 1px;
  margin-bottom: 1.25rem;
  background: var(--edu-ruler-tone);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-summary {
  margin: 0 0 1rem;
  font-size: var(--t-font-size-sm);
  line-height: 1.85;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__panel-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.75rem;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  color: var(--edu-ruler-tone);
  cursor: pointer;
  transition: color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__details-toggle:hover {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__details-chevron {
  transition: transform 0.3s ease;
}

.site-page[data-theme="portfolio"]
  .t-edu-ruler__details-toggle[aria-expanded="true"]
  .t-edu-ruler__details-chevron {
  transform: rotate(180deg);
}

.site-page[data-theme="portfolio"]
  .t-edu-ruler__details:not(.is-open):not(.t-edu-ruler__details--static) {
  display: none;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__details.is-open,
.site-page[data-theme="portfolio"] .t-edu-ruler__details--static {
  display: block;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__details-inner {
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__details-text,
.site-page[data-theme="portfolio"] .t-edu-ruler__details-inner p {
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-edu-ruler__details-inner .t-desc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-edu-ruler__details-inner .t-desc-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.65rem;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"]
  .t-edu-ruler__details-inner
  .t-desc-list
  li::before {
  content: "";
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--edu-ruler-tone);
}

@keyframes t-edu-ruler-panel-in {
  from {
    opacity: 0;
    transform: translateX(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (min-width: 601px) {
  /* Side-by-side: image beside title + summary; actions/details full width below */
  .site-page[data-theme="portfolio"] .t-edu-ruler__panel-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.25rem;
    row-gap: 0;
    align-items: start;
  }

  .site-page[data-theme="portfolio"]
    .t-edu-ruler__panel-top:not(.t-edu-ruler__panel-top--no-visual) {
    display: contents;
    margin-bottom: 0;
  }

  .site-page[data-theme="portfolio"]
    .t-edu-ruler__panel-top:not(.t-edu-ruler__panel-top--no-visual)
    .t-edu-ruler__panel-head {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 1.25rem;
  }

  .site-page[data-theme="portfolio"]
    .t-edu-ruler__panel-top:not(.t-edu-ruler__panel-top--no-visual)
    .t-edu-ruler__panel-aside {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .site-page[data-theme="portfolio"] .t-edu-ruler__panel-body {
    display: contents;
  }

  .site-page[data-theme="portfolio"] .t-edu-ruler__panel-main {
    grid-column: 1;
    grid-row: 2;
  }

  .site-page[data-theme="portfolio"] .t-edu-ruler__panel-actions {
    grid-column: 1 / -1;
    margin-top: 1.25rem;
  }

  .site-page[data-theme="portfolio"]
    .t-edu-ruler__panel-body
    > .t-edu-ruler__details {
    grid-column: 1 / -1;
  }

  .site-page[data-theme="portfolio"] .t-edu-ruler__panel-visual {
    width: clamp(8.5rem, 16vw, 13.5rem);
  }
}

@media (min-width: 900px) {
  .site-page[data-theme="portfolio"] .t-edu-ruler__board {
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr);
  }

  .site-page[data-theme="portfolio"] .t-edu-ruler__nav {
    border-bottom: 0;
    border-right: 1px solid var(--t-border);
  }

  .site-page[data-theme="portfolio"] .t-edu-ruler__tab {
    padding-inline: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-section--education-ruler .t-exp-intro,
  .site-page[data-theme="portfolio"] .t-edu-ruler__timeline,
  .site-page[data-theme="portfolio"] .t-edu-ruler__board,
  .site-page[data-theme="portfolio"] .t-edu-ruler__tab,
  .site-page[data-theme="portfolio"] .t-edu-ruler__panel.is-active,
  .site-page[data-theme="portfolio"] .t-edu-ruler__segment,
  .site-page[data-theme="portfolio"] .t-edu-ruler__dot,
  .site-page[data-theme="portfolio"] .t-edu-ruler__chip,
  .site-page[data-theme="portfolio"] .t-edu-ruler__details,
  .site-page[data-theme="portfolio"] .t-edu-ruler__details-chevron {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    width: var(--edu-ruler-width) !important;
  }

  .site-page[data-theme="portfolio"]
    .t-edu-ruler__timeline.is-visible
    .t-edu-ruler__dot {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.92;
  }

  .site-page[data-theme="portfolio"]
    .t-edu-ruler__timeline.is-visible
    .t-edu-ruler__chip {
    transform: translateX(-50%);
    opacity: 0.92;
  }
}

/*
 * education variant: "education-flip"
 * Click flip cards — school badge with logo, white pill, accent offset shadow.
 */
.site-page[data-theme="portfolio"] .t-section--education-flip {
  position: relative;
  padding-block: clamp(6rem, 12vw, 9rem);
  background: var(--t-bg-primary);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-edu-flip__backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--t-text-primary) 14%, transparent) 1px,
    transparent 1px
  );
  background-size: 1.5rem 1.5rem;
}

.site-page[data-theme="portfolio"] .t-edu-flip__container {
  position: relative;
  z-index: 1;
  max-width: 64rem;
}

.site-page[data-theme="portfolio"] .t-section--education-flip .t-exp-intro {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.site-page[data-theme="portfolio"]
  .t-section--education-flip
  .t-exp-intro.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-edu-flip__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .site-page[data-theme="portfolio"] .t-edu-flip__card {
    flex: 0 1 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }
}

/* Per-card accent tokens (theme palette only) */
.site-page[data-theme="portfolio"] .t-edu-flip__card[data-accent="0"] {
  --edu-flip-badge: var(--site-color-accent);
  --edu-flip-back: color-mix(
    in srgb,
    var(--site-color-accent) 24%,
    var(--t-bg-secondary)
  );
  --edu-flip-shadow: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-edu-flip__card[data-accent="1"] {
  --edu-flip-badge: var(--site-color-secondary);
  --edu-flip-back: color-mix(
    in srgb,
    var(--site-color-secondary) 24%,
    var(--t-bg-secondary)
  );
  --edu-flip-shadow: var(--site-color-secondary);
}

.site-page[data-theme="portfolio"] .t-edu-flip__card[data-accent="2"] {
  --edu-flip-badge: var(--site-color-primary);
  --edu-flip-back: color-mix(
    in srgb,
    var(--site-color-primary) 20%,
    var(--t-bg-secondary)
  );
  --edu-flip-shadow: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-edu-flip__card[data-accent="3"] {
  --edu-flip-badge: color-mix(
    in srgb,
    var(--site-color-accent) 55%,
    var(--site-color-secondary) 45%
  );
  --edu-flip-back: color-mix(
    in srgb,
    var(--site-color-accent) 14%,
    var(--site-color-secondary) 14%,
    var(--t-bg-secondary) 72%
  );
  --edu-flip-shadow: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-edu-flip__card {
  position: relative;
  width: 100%;
  min-width: 0;
  height: clamp(22rem, 42vw, 26.25rem);
  /* Keep transforms off this node — Safari flattens 3D when perspective + transform coexist. */
  perspective: 1200px;
  -webkit-perspective: 1200px;
  outline: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease var(--edu-flip-stagger, 0.15s);
}

.site-page[data-theme="portfolio"] .t-edu-flip__card.is-visible {
  opacity: 1;
}

.site-page[data-theme="portfolio"] .t-edu-flip__card-inner {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-page[data-theme="portfolio"] .t-edu-flip__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--t-text-primary);
  border-radius: var(--t-radius-lg);
  /* Explicit face transforms + translateZ help Safari honor backface hiding. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.site-page[data-theme="portfolio"] .t-edu-flip__front {
  overflow: hidden;
  transform: rotateY(0deg) translateZ(1px);
  -webkit-transform: rotateY(0deg) translateZ(1px);
  box-shadow: 5px 5px 0 var(--edu-flip-shadow, var(--site-color-primary));
  /* Mid-flip opacity swap: Safari sometimes ignores backface-visibility. */
  opacity: 1;
  transition: opacity 0s linear 0.3s;
}

.site-page[data-theme="portfolio"] .t-edu-flip__back {
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0s linear 0.3s;
}

.site-page[data-theme="portfolio"]
  .t-edu-flip__card--no-image
  .t-edu-flip__front {
  background: linear-gradient(
    145deg,
    color-mix(
      in srgb,
      var(--edu-flip-back, var(--t-bg-secondary)) 55%,
      var(--t-bg-primary)
    ),
    var(--t-bg-secondary)
  );
}

.site-page[data-theme="portfolio"] .t-edu-flip__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-page[data-theme="portfolio"] .t-edu-flip__image--cover {
  object-fit: cover;
}

.site-page[data-theme="portfolio"] .t-edu-flip__front-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--t-text-primary) 82%, transparent) 0%,
    color-mix(in srgb, var(--t-text-primary) 22%, transparent) 45%,
    transparent 100%
  );
}

.site-page[data-theme="portfolio"] .t-edu-flip__meta-badge {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  width: fit-content;
  max-width: calc(100% - 2.5rem);
  margin: 1.25rem;
}

.site-page[data-theme="portfolio"] .t-edu-flip__meta-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--t-radius-md);
  background: var(--edu-flip-shadow, var(--site-color-primary));
  transform: translate(4px, 4px);
}

.site-page[data-theme="portfolio"] .t-edu-flip__meta-badge-inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.65rem;
  border: 2px solid var(--t-text-primary);
  border-radius: var(--t-radius-md);
  background: var(--t-bg-primary);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-edu-flip__meta-mark {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border: 2px solid var(--t-text-primary);
  border-radius: var(--t-radius-sm);
  background: var(--edu-flip-badge, var(--site-color-accent));
}

.site-page[data-theme="portfolio"] .t-edu-flip__meta-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-page[data-theme="portfolio"] .t-edu-flip__meta-initials {
  font-family: var(--t-font-display);
  font-size: 0.625rem;
  font-weight: var(--t-font-weight-bold);
  line-height: 1;
  text-align: center;
}

.site-page[data-theme="portfolio"] .t-edu-flip__meta-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-width: 0;
  padding-right: 0.15rem;
}

.site-page[data-theme="portfolio"] .t-edu-flip__meta-school {
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-bold);
  line-height: var(--t-line-height-tight);
}

.site-page[data-theme="portfolio"] .t-edu-flip__meta-detail {
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  line-height: var(--t-line-height-normal);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-edu-flip__back-chip {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: calc(100% - 4px);
  max-width: calc(100% - 4px);
  margin-bottom: calc(1rem + 4px);
}

.site-page[data-theme="portfolio"] .t-edu-flip__back-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--t-radius-md);
  background: var(--edu-flip-shadow, var(--site-color-primary));
  transform: translate(4px, 4px);
}

.site-page[data-theme="portfolio"] .t-edu-flip__back-chip-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0.85rem 1rem;
  border: 2px solid var(--t-text-primary);
  border-radius: var(--t-radius-md);
  background: var(--t-bg-primary);
  color: var(--t-text-primary);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-edu-flip__back-chip-copy {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-edu-flip__back-chip-field {
  margin: 0 0 0.2rem;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-bold);
  line-height: var(--t-line-height-tight);
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.site-page[data-theme="portfolio"] .t-edu-flip__back-chip-school {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-bold);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-secondary);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.site-page[data-theme="portfolio"] .t-edu-flip__back-chip-detail {
  margin: 0.15rem 0 0;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  line-height: var(--t-line-height-normal);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-edu-flip__back-chip-mark {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border: 2px solid var(--t-text-primary);
  border-radius: var(--t-radius-sm);
  background: var(--edu-flip-badge, var(--site-color-accent));
}

.site-page[data-theme="portfolio"] .t-edu-flip__back-chip-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-page[data-theme="portfolio"] .t-edu-flip__back-chip-initials {
  font-family: var(--t-font-display);
  font-size: 0.625rem;
  font-weight: var(--t-font-weight-bold);
  line-height: 1;
  text-align: center;
}

.site-page[data-theme="portfolio"] .t-edu-flip__front-foot {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
}

.site-page[data-theme="portfolio"] .t-edu-flip__field {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-base);
  font-weight: var(--t-font-weight-bold);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-inverse);
}

.site-page[data-theme="portfolio"] .t-edu-flip__stack-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.25rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--t-text-primary) 18%, transparent);
  border-radius: var(--t-radius-pill);
  background: color-mix(in srgb, var(--t-bg-primary) 72%, transparent);
  color: var(--t-text-primary);
  font-size: 0.625rem;
  font-weight: var(--t-font-weight-bold);
}

.site-page[data-theme="portfolio"] .t-edu-flip__stack-chip--front {
  padding: 0.35rem 0.75rem;
  border-color: color-mix(in srgb, var(--t-text-inverse) 22%, transparent);
  background: color-mix(in srgb, var(--t-text-primary) 58%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--t-text-inverse);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--t-text-primary) 22%, transparent);
}

.site-page[data-theme="portfolio"] .t-edu-flip__hint {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: var(--t-radius-pill);
  background: color-mix(in srgb, var(--t-text-primary) 52%, transparent);
  backdrop-filter: blur(6px);
  color: color-mix(in srgb, var(--t-text-inverse) 88%, transparent);
  font-size: 0.625rem;
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-edu-flip__back {
  transform: rotateY(180deg) translateZ(1px);
  -webkit-transform: rotateY(180deg) translateZ(1px);
  box-sizing: border-box;
  min-width: 0;
  padding: 1.5rem;
  padding-right: calc(1.5rem + 4px);
  padding-bottom: calc(1.5rem + 4px);
  background: var(--edu-flip-back, var(--t-bg-secondary));
  box-shadow: none;
}

.site-page[data-theme="portfolio"] .t-edu-flip__back-main {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.site-page[data-theme="portfolio"] .t-edu-flip__rule {
  width: 2rem;
  height: 0.25rem;
  margin-bottom: 1rem;
  border-radius: var(--t-radius-pill);
  background: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-edu-flip__highlight {
  margin: 0 0 0.75rem;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: color-mix(in srgb, var(--t-text-primary) 82%, transparent);
}

.site-page[data-theme="portfolio"] .t-edu-flip__description {
  margin: 0;
  font-size: var(--t-font-size-xs);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-edu-flip__back-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 2px solid
    color-mix(in srgb, var(--t-text-primary) 14%, transparent);
}

.site-page[data-theme="portfolio"] .t-edu-flip__link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: auto;
  border: 2px solid var(--t-text-primary);
  border-radius: var(--t-radius-sm);
  background: var(--t-bg-primary);
  color: var(--t-text-primary);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-edu-flip__link:hover {
    opacity: 0.65;
  }
}

.site-page[data-theme="portfolio"]
  .t-edu-flip__card.is-flipped
  .t-edu-flip__card-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.site-page[data-theme="portfolio"]
  .t-edu-flip__card.is-flipped
  .t-edu-flip__front {
  opacity: 0;
  pointer-events: none;
  box-shadow: none;
}

.site-page[data-theme="portfolio"]
  .t-edu-flip__card.is-flipped
  .t-edu-flip__back {
  opacity: 1;
  pointer-events: auto;
  box-shadow: 5px 5px 0 var(--edu-flip-shadow, var(--site-color-primary));
}

.site-page[data-theme="portfolio"]
  .t-edu-flip__card.is-flipped
  .t-edu-flip__hint {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-edu-flip__card {
    height: auto;
    perspective: none;
  }

  .site-page[data-theme="portfolio"] .t-edu-flip__card-inner {
    transform: none !important;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto;
  }

  .site-page[data-theme="portfolio"] .t-edu-flip__face {
    position: relative;
    inset: auto;
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  .site-page[data-theme="portfolio"] .t-edu-flip__back {
    border-top: none;
    border-radius: 0 0 var(--t-radius-lg) var(--t-radius-lg);
  }

  .site-page[data-theme="portfolio"] .t-edu-flip__front {
    min-height: clamp(14rem, 32vw, 18rem);
    border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0;
  }

  .site-page[data-theme="portfolio"] .t-edu-flip__hint {
    display: none;
  }
}

/*
 * education variant: "education-diploma"
 * Yearbook spreads — school copy beside a captioned polaroid, date range in the meta.
 * Not a card grid, register, flip deck, or framed certificate.
 */

.site-page[data-theme="portfolio"] .t-section--education-diploma {
  padding-block: clamp(5.5rem, 11vw, 8.5rem);
  background: var(--t-bg-primary);
  overflow-x: clip;
}

.site-page[data-theme="portfolio"] .t-edu-diploma__container {
  max-width: 48rem;
}

.site-page[data-theme="portfolio"] .t-edu-diploma__masthead {
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.site-page[data-theme="portfolio"] .t-edu-diploma__masthead.is-visible {
  opacity: 1;
  transform: none;
}

.site-page[data-theme="portfolio"] .t-edu-diploma__spreads {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.site-page[data-theme="portfolio"] .t-edu-diploma__spread {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  opacity: 0;
  transform: translateY(1.15rem);
  transition:
    opacity 0.6s ease var(--edu-diploma-stagger, 0.1s),
    transform 0.6s ease var(--edu-diploma-stagger, 0.1s);
}

.site-page[data-theme="portfolio"] .t-edu-diploma__spread.is-visible {
  opacity: 1;
  transform: none;
}

.site-page[data-theme="portfolio"] .t-edu-diploma__copy {
  min-width: 0;
  width: 100%;
}

.site-page[data-theme="portfolio"] .t-edu-diploma__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.7rem;
  margin: 0 0 0.4rem;
}

.site-page[data-theme="portfolio"] .t-edu-diploma__badge {
  margin: 0;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-edu-diploma__dates {
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-edu-diploma__school {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: 1.2;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-edu-diploma__school a {
  color: inherit;
  text-decoration: none;
}

.site-page[data-theme="portfolio"] .t-edu-diploma__school a:hover,
.site-page[data-theme="portfolio"] .t-edu-diploma__school a:focus-visible {
  color: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-edu-diploma__degree {
  margin: 0.4rem 0 0;
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-edu-diploma__field {
  margin: 0.15rem 0 0;
  font-size: var(--t-font-size-xs);
  letter-spacing: 0.03em;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-edu-diploma__summary {
  margin: 0.85rem 0 0;
  max-width: 34rem;
  font-size: var(--t-font-size-sm);
  line-height: 1.75;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-edu-diploma__toggle {
  margin-top: 0.3rem;
}

.site-page[data-theme="portfolio"] .t-edu-diploma__long {
  margin-top: 0.55rem;
  max-width: 34rem;
  font-size: var(--t-font-size-sm);
  line-height: 1.75;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-edu-diploma__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-edu-diploma__skills li {
  font-size: var(--t-font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-edu-diploma__polaroid {
  position: relative;
  z-index: 1;
  width: min(100%, 11.5rem);
  margin: 0.15rem auto 0;
  padding: 0.5rem 0.5rem 0;
  background: var(--t-bg-primary);
  border: 1px solid color-mix(in srgb, var(--site-color-text) 10%, transparent);
  box-shadow:
    0 1px 1px color-mix(in srgb, var(--site-color-text) 6%, transparent),
    0 10px 24px color-mix(in srgb, var(--site-color-text) 11%, transparent);
  transform: rotate(-1.7deg);
  transform-origin: center 70%;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-page[data-theme="portfolio"] .t-edu-diploma__polaroid::before {
  content: "";
  position: absolute;
  top: -0.38rem;
  left: 50%;
  z-index: 2;
  width: 2.75rem;
  height: 0.72rem;
  background: color-mix(in srgb, var(--site-color-accent) 34%, var(--t-bg-primary));
  opacity: 0.88;
  transform: translateX(-50%) rotate(-3deg);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-page[data-theme="portfolio"] .t-edu-diploma__spread:nth-child(even) .t-edu-diploma__polaroid {
  transform: rotate(1.9deg);
}

.site-page[data-theme="portfolio"] .t-edu-diploma__spread:nth-child(even) .t-edu-diploma__polaroid::before {
  transform: translateX(-50%) rotate(2.4deg);
}

.site-page[data-theme="portfolio"] .t-edu-diploma__polaroid-frame {
  display: block;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-edu-diploma__polaroid-image,
.site-page[data-theme="portfolio"] .t-edu-diploma__polaroid-fallback {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 40%;
  background: color-mix(in srgb, var(--site-color-accent) 10%, var(--t-bg-muted));
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-page[data-theme="portfolio"] .t-edu-diploma__polaroid-image--cover {
  object-fit: cover;
}

.site-page[data-theme="portfolio"] .t-edu-diploma__polaroid-fallback {
  display: grid;
  place-items: center;
}

.site-page[data-theme="portfolio"] .t-edu-diploma__polaroid-crest {
  width: 3.75rem;
  height: 3.75rem;
  object-fit: contain;
}

.site-page[data-theme="portfolio"] .t-edu-diploma__polaroid-initials {
  font-family: var(--t-font-display);
  font-size: clamp(2.25rem, 8vw, 3rem);
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--site-color-accent) 70%, var(--t-text-primary));
}

.site-page[data-theme="portfolio"] .t-edu-diploma__polaroid-caption {
  margin: 0;
  padding: 0.5rem 0.1rem 0.65rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-edu-diploma__spread.is-visible .t-edu-diploma__polaroid:hover {
    transform: rotate(0deg) translateY(-0.45rem) scale(1.03);
    box-shadow:
      0 2px 6px color-mix(in srgb, var(--site-color-text) 8%, transparent),
      0 22px 44px color-mix(in srgb, var(--site-color-text) 16%, transparent);
  }

  .site-page[data-theme="portfolio"] .t-edu-diploma__spread.is-visible .t-edu-diploma__polaroid:hover::before {
    transform: translateX(-50%) rotate(0deg);
  }

  .site-page[data-theme="portfolio"] .t-edu-diploma__spread.is-visible .t-edu-diploma__polaroid:hover .t-edu-diploma__polaroid-image,
  .site-page[data-theme="portfolio"] .t-edu-diploma__spread.is-visible .t-edu-diploma__polaroid:hover .t-edu-diploma__polaroid-fallback {
    transform: scale(1.07);
  }
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-edu-diploma__spreads {
    gap: 1.65rem;
  }

  .site-page[data-theme="portfolio"] .t-edu-diploma__spread {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;
    gap: 1.15rem;
  }

  .site-page[data-theme="portfolio"] .t-edu-diploma__copy {
    flex: 1 1 18rem;
    max-width: 26rem;
    width: auto;
  }

  .site-page[data-theme="portfolio"] .t-edu-diploma__polaroid {
    flex: 0 0 11.5rem;
    width: 11.5rem;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-edu-diploma__masthead,
  .site-page[data-theme="portfolio"] .t-edu-diploma__spread {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .site-page[data-theme="portfolio"] .t-edu-diploma__polaroid,
  .site-page[data-theme="portfolio"] .t-edu-diploma__spread:nth-child(even) .t-edu-diploma__polaroid,
  .site-page[data-theme="portfolio"] .t-edu-diploma__spread.is-visible .t-edu-diploma__polaroid:hover {
    transform: none;
    transition: none;
  }

  .site-page[data-theme="portfolio"] .t-edu-diploma__polaroid-image,
  .site-page[data-theme="portfolio"] .t-edu-diploma__polaroid-fallback,
  .site-page[data-theme="portfolio"] .t-edu-diploma__spread.is-visible .t-edu-diploma__polaroid:hover .t-edu-diploma__polaroid-image,
  .site-page[data-theme="portfolio"] .t-edu-diploma__spread.is-visible .t-edu-diploma__polaroid:hover .t-edu-diploma__polaroid-fallback {
    transform: none;
    transition: none;
  }
}

/*
 * education variant: "education-almanac"
 * Academic register with dotted year leaders, school crests,
 * and a faded campus wash. Typographic catalog — not a timeline,
 * card grid, or split switcher.
 */

.site-page[data-theme="portfolio"] .t-section--education-almanac {
  padding-block: clamp(5.5rem, 11vw, 8.5rem);
  background: var(--t-bg-primary);
  overflow-x: clip;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__container {
  max-width: 54rem;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__masthead {
  max-width: none;
  margin: 0 auto 2.75rem;
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__masthead.is-visible {
  opacity: 1;
  transform: none;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__register {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-edu-almanac__entry {
  position: relative;
  display: grid;
  gap: 0.85rem 1.25rem;
  min-width: 0;
  padding: 1.65rem 0 1.75rem;
  overflow-x: clip;
  border-bottom: 1px solid var(--t-border);
  opacity: 0;
  transform: translateY(1.15rem);
  transition:
    opacity 0.6s ease var(--edu-almanac-stagger, 0.1s),
    transform 0.6s ease var(--edu-almanac-stagger, 0.1s);
}

.site-page[data-theme="portfolio"] .t-edu-almanac__entry.is-visible {
  opacity: 1;
  transform: none;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__watermark {
  position: absolute;
  top: 0.35rem;
  right: -0.15rem;
  z-index: 0;
  font-family: var(--t-font-display);
  font-size: clamp(4.25rem, 18vw, 7.5rem);
  font-weight: var(--t-font-weight-normal);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--site-color-text);
  opacity: 0.055;
  pointer-events: none;
  user-select: none;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__entry--has-plate .t-edu-almanac__watermark {
  display: none;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__chapter {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__leader {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__school {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--t-font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: 1.2;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-edu-almanac__school a {
  color: inherit;
  text-decoration: none;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__school a:hover,
.site-page[data-theme="portfolio"] .t-edu-almanac__school a:focus-visible {
  color: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-edu-almanac__dots {
  flex: 1 1 1.5rem;
  min-width: 1.25rem;
  height: 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--site-color-text) 38%, transparent);
  transform: translateY(-0.28em);
}

.site-page[data-theme="portfolio"] .t-edu-almanac__dates,
.site-page[data-theme="portfolio"] .t-edu-almanac__entry--has-plate .t-edu-almanac__dates {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  padding-right: 0.75rem;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-text-muted);
  white-space: nowrap;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__plate {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: min(62%, 21rem);
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to left,
    #000 0%,
    rgb(0 0 0 / 0.94) 18%,
    rgb(0 0 0 / 0.5) 55%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to left,
    #000 0%,
    rgb(0 0 0 / 0.94) 18%,
    rgb(0 0 0 / 0.5) 55%,
    transparent 100%
  );
}

.site-page[data-theme="portfolio"] .t-edu-almanac__plate-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  opacity: 0.82;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__plate-image--cover {
  object-fit: cover;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      var(--t-bg-primary) 0%,
      color-mix(in srgb, var(--t-bg-primary) 82%, transparent) 14%,
      color-mix(in srgb, var(--t-bg-primary) 38%, transparent) 32%,
      transparent 52%
    ),
    linear-gradient(
      to left,
      color-mix(in srgb, var(--t-bg-primary) 16%, transparent) 0%,
      color-mix(in srgb, var(--t-bg-primary) 46%, transparent) 48%,
      var(--t-bg-primary) 100%
    );
  box-shadow:
    inset 0 3.4rem 2.4rem -0.35rem var(--t-bg-primary),
    inset 0 -2.1rem 1.7rem -0.75rem var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-edu-almanac__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  margin-top: 0.7rem;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__crest {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__crest-logo {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__crest-initials {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-edu-almanac__meta-copy {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__degree {
  margin: 0;
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-edu-almanac__field {
  margin: 0.1rem 0 0;
  font-size: var(--t-font-size-xs);
  letter-spacing: 0.03em;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-edu-almanac__excerpt {
  margin: 0.85rem 0 0;
  max-width: 38rem;
  font-size: var(--t-font-size-sm);
  line-height: 1.75;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-edu-almanac__toggle {
  margin-top: 0.3rem;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__long {
  margin-top: 0.55rem;
  max-width: 38rem;
  font-size: var(--t-font-size-sm);
  line-height: 1.75;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-edu-almanac__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-edu-almanac__skills li {
  font-size: var(--t-font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-edu-almanac__entry {
    padding: 2rem 0 2.1rem;
  }

  .site-page[data-theme="portfolio"] .t-edu-almanac__watermark {
    right: 0.25rem;
    top: 0.5rem;
  }

  .site-page[data-theme="portfolio"] .t-edu-almanac__plate {
    width: min(48%, 22rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-edu-almanac__masthead,
  .site-page[data-theme="portfolio"] .t-edu-almanac__entry {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Recognition & work — full-width timeline + sidebar */

.t-section--recognition {
  background: var(--t-bg-primary);
  padding-top: var(--t-section-padding-y);
}

.t-section--recognition .t-exp-intro {
  width: 100%;
  max-width: none;
  margin: 0 0 2rem;
  text-align: left;
}

.t-section--recognition .t-exp-intro__title {
  text-align: left;
}

.t-recog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.25rem;
}

.t-recog-filter {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-pill);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.25;
  color: var(--t-text-secondary);
  background: var(--t-bg-elevated);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.t-recog-filter:hover:not(.is-active) {
  border-color: var(--t-border-strong);
  color: var(--t-text-primary);
}

.t-recog-filter.is-active {
  border-color: var(--t-accent);
  color: var(--t-accent-contrast);
  background: var(--t-accent);
}

.t-recog-filter.is-active:hover {
  border-color: var(--t-accent-hover);
  background: var(--t-accent-hover);
  color: var(--t-accent-contrast);
}

.t-recog-filter:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
}

.t-recog-layout {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .t-recog-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(13rem, 16rem);
    gap: 2.75rem;
  }

  .t-recog-layout--full {
    grid-template-columns: minmax(0, 1fr);
  }

  .t-recog-timeline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 0;
    padding-left: 0;
  }

  .t-recog-year-rule {
    grid-column: 1 / -1;
  }

  .t-recog-entry {
    margin-left: 0;
    grid-template-columns: 3rem 0.85rem minmax(0, 1fr);
    column-gap: 0.65rem;
    padding-bottom: 1.75rem;
  }

  .t-recog-entry__marker {
    font-size: var(--t-font-size-xs);
  }
}

/* Timeline */
.t-recog-timeline {
  position: relative;
  padding-left: 4.5rem;
}

.t-recog-year-rule {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.75rem 0 1.25rem;
  padding-left: 0;
  color: var(--t-text-muted);
  font-size: var(--t-font-size-xs);
  letter-spacing: 0.06em;
}

.t-recog-year-rule::before,
.t-recog-year-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--t-border-strong);
}

.t-recog-year-rule:first-child {
  margin-top: 0;
}

.t-recog-entry {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 1.25rem minmax(0, 1fr);
  gap: 0 1rem;
  margin-left: -4.5rem;
  padding-bottom: 2rem;
}

.t-recog-entry:last-child {
  padding-bottom: 0;
}

.t-recog-entry__marker {
  grid-column: 1;
  padding-top: 0.2rem;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-muted);
  text-align: right;
}

.t-recog-entry__rail {
  grid-column: 2;
  position: relative;
  display: flex;
  justify-content: center;
}

.t-recog-entry__rail::before {
  content: "";
  position: absolute;
  top: 0.85rem;
  bottom: -2rem;
  width: 1px;
  background: var(--t-border-strong);
}

.t-recog-entry:last-child .t-recog-entry__rail::before {
  bottom: 0;
}

.t-recog-entry__dot {
  position: relative;
  z-index: 1;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--t-bg-elevated);
  border: 2px solid var(--t-border-strong);
}

.t-recog-entry__dot--project {
  border-color: #d97706;
  background: #f59e0b;
}

.t-recog-entry__dot--award {
  border-color: #e11d48;
  background: #f43f5e;
}

.t-recog-entry__dot--certification {
  border-color: #2563eb;
  background: #3b82f6;
}

.t-recog-entry__dot--writing {
  border-color: #16a34a;
  background: #22c55e;
}

.t-recog-entry__dot--patent {
  border-color: #7c3aed;
  background: #8b5cf6;
}

.t-recog-entry__body {
  grid-column: 3;
  min-width: 0;
}

.t-recog-entry__category {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.t-recog-entry__category--project {
  color: #b45309;
}

.t-recog-entry__category--award {
  color: #be123c;
}

.t-recog-entry__category--certification {
  color: #1d4ed8;
}

.t-recog-entry__category--writing {
  color: #15803d;
}

.t-recog-entry__category--patent {
  color: #6d28d9;
}

.t-recog-entry__title {
  margin: 0;
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-semibold);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.t-recog-entry__title a {
  color: inherit;
  text-decoration: none;
}

.t-recog-entry__title a:hover {
  color: var(--t-accent);
}

.t-recog-entry__subtitle {
  margin: 0.2rem 0 0;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-secondary);
}

.t-recog-entry__summary {
  margin: 0.5rem 0 0;
  font-size: var(--t-font-size-sm);
  font-style: italic;
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.t-recog-entry__details {
  margin: 0.45rem 0 0;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.t-recog-entry__details p {
  margin: 0 0 0.35rem;
}

.t-recog-entry__details p:last-child {
  margin-bottom: 0;
}

.t-recog-entry__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.t-recog-entry__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-top: 0.65rem;
}

.t-recog-pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--t-radius-pill);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.3;
}

.t-recog-pill--project {
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 16%, var(--t-bg-elevated));
}

.t-recog-pill--patent {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #6d28d9;
  background: color-mix(in srgb, #8b5cf6 12%, var(--t-bg-elevated));
}

.t-recog-pill--certification {
  color: #1d4ed8;
  background: color-mix(in srgb, #3b82f6 14%, var(--t-bg-elevated));
}

.t-recog-pill--writing {
  color: #15803d;
  background: color-mix(in srgb, #22c55e 14%, var(--t-bg-elevated));
}

.t-recog-pill--award {
  color: #be123c;
  background: color-mix(in srgb, #f43f5e 14%, var(--t-bg-elevated));
}

.t-recog-entry__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-secondary);
  text-decoration: none;
}

.t-recog-entry__link:hover {
  color: var(--t-accent);
}

.t-recog-entry[hidden],
.t-recog-year-rule[hidden] {
  display: none !important;
}

/* Sidebar */
.t-recog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.t-recog-spotlight__eyebrow {
  margin: 0 0 0.65rem;
  font-size: 0.62rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.t-recog-spotlight__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem 1.2rem 1.2rem;
  background: var(--t-bg-elevated);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
}

.t-recog-spotlight__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: 0.85rem;
  border-radius: var(--t-radius-sm);
  flex-shrink: 0;
}

.t-recog-spotlight__content {
  width: 100%;
  min-width: 0;
}

.t-recog-spotlight__card--project .t-recog-spotlight__icon {
  color: #d97706;
  background: color-mix(in srgb, #f59e0b 18%, var(--t-bg-primary));
}

.t-recog-spotlight__card--patent .t-recog-spotlight__icon {
  color: #7c3aed;
  background: color-mix(in srgb, #8b5cf6 14%, var(--t-bg-primary));
}

.t-recog-spotlight__title {
  margin: 0;
  font-size: var(--t-font-size-base);
  font-weight: var(--t-font-weight-semibold);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.t-recog-spotlight__title a {
  color: inherit;
  text-decoration: none;
}

.t-recog-spotlight__title a:hover {
  color: var(--t-accent);
}

.t-recog-spotlight__meta {
  margin: 0.25rem 0 0;
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
}

.t-recog-spotlight__summary {
  margin: 0.5rem 0 0;
  font-size: var(--t-font-size-sm);
  font-style: italic;
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.t-recog-spotlight__details {
  margin: 0.4rem 0 0;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.t-recog-spotlight__details p {
  margin: 0 0 0.3rem;
}

.t-recog-spotlight__details p:last-child {
  margin-bottom: 0;
}

.t-recog-spotlight__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.t-recog-spotlight__chips .t-recog-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

@media (max-width: 899px) {
  .t-recog-timeline {
    padding-left: 3.75rem;
  }

  .t-recog-entry {
    grid-template-columns: 3.25rem 1rem minmax(0, 1fr);
    margin-left: -3.75rem;
  }

  .t-recog-entry__marker {
    font-size: var(--t-font-size-xs);
  }
}

/*
 * recognition variant: "recognition-vault"
 * Tabbed category cards with ambient backdrop.
 */
.site-page[data-theme="portfolio"] .t-section--recognition-vault {
  --recog-vault-card-bg: var(--t-bg-elevated);
  --recog-vault-tab-bg: color-mix(
    in srgb,
    var(--t-bg-elevated) 75%,
    var(--t-bg-primary)
  );
  --recog-vault-tab-active-bg: var(--t-accent);
  --recog-vault-tab-active-fg: var(--t-accent-contrast);

  position: relative;
  isolation: isolate;
  padding-block: clamp(5rem, 10vw, 7rem);
  background-color: var(--t-bg-primary);
  overflow: visible;
}

.site-page[data-theme="portfolio"] .t-section--recognition-vault::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    circle min(17rem, 44vw) at calc(50% - min(36rem, 50vw) + 11rem)
      clamp(10rem, 16vw, 13rem),
    color-mix(in srgb, var(--t-accent) 20%, transparent) 0%,
    color-mix(in srgb, var(--t-accent) 8%, transparent) 40%,
    transparent 58%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 4.5rem,
    #000 calc(100% - 2rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 4.5rem,
    #000 calc(100% - 2rem),
    transparent 100%
  );
}

.site-page[data-theme="portfolio"] .t-recog-vault__container {
  position: relative;
  z-index: 1;
  max-width: 72rem;
}

.site-page[data-theme="portfolio"] .t-recog-vault__header {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.site-page[data-theme="portfolio"] .t-recog-vault__header.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-recog-vault__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-vault__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 0.6s ease 0.12s,
    transform 0.6s ease 0.12s;
}

.site-page[data-theme="portfolio"] .t-recog-vault__tabs.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-recog-vault__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--t-border);
  border-radius: 0.85rem;
  background: var(--recog-vault-tab-bg);
  backdrop-filter: blur(8px);
  color: var(--t-text-secondary);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.2;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.45s ease var(--recog-vault-stagger, 0.1s),
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.site-page[data-theme="portfolio"]
  .t-recog-vault__tabs.is-visible
  .t-recog-vault__tab {
  opacity: 1;
}

.site-page[data-theme="portfolio"] .t-recog-vault__tab:hover:not(.is-active) {
  border-color: color-mix(in srgb, var(--t-link) 35%, var(--t-border));
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-vault__tab.is-active {
  border-color: var(--recog-vault-tab-active-bg);
  background: var(--recog-vault-tab-active-bg);
  color: var(--recog-vault-tab-active-fg);
}

.site-page[data-theme="portfolio"] .t-recog-vault__tab-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  display: block;
  background-color: currentColor;
  -webkit-mask-image: var(--recog-icon);
  mask-image: var(--recog-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-recog-vault__tab-count {
  font-size: 0.75em;
  opacity: 0.65;
}

.site-page[data-theme="portfolio"] .t-recog-vault__panels {
  opacity: 0;
  transition: opacity 0.6s ease 0.24s;
}

.site-page[data-theme="portfolio"] .t-recog-vault__panels.is-visible {
  opacity: 1;
}

.site-page[data-theme="portfolio"] .t-recog-vault__grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-recog-vault__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.site-page[data-theme="portfolio"] .t-recog-vault__card {
  padding: clamp(1.25rem, 2.5vw, 1.5rem);
  border: 1px solid var(--t-border);
  border-radius: 1rem;
  background: var(--recog-vault-card-bg);
  backdrop-filter: blur(8px);
  box-shadow: var(--t-shadow-sm);
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity 0.45s ease var(--recog-vault-card-stagger, 0.05s),
    transform 0.45s ease var(--recog-vault-card-stagger, 0.05s),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.site-page[data-theme="portfolio"]
  .t-recog-vault__panels.is-visible
  .t-recog-vault__card {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-recog-vault__card[hidden] {
  display: none !important;
}

.site-page[data-theme="portfolio"] .t-recog-vault__card:hover {
  border-color: color-mix(in srgb, var(--t-link) 30%, var(--t-border));
  box-shadow: var(--t-shadow-md);
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-copy {
  min-width: 0;
  flex: 1;
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-title {
  margin: 0 0 0.35rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-medium);
  line-height: var(--t-line-height-snug);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-meta {
  margin: 0 0 0.75rem;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-summary {
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: 1.75;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 0.45rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--t-link);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.4;
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-toggle:hover {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-toggle-more[hidden],
.site-page[data-theme="portfolio"] .t-recog-vault__card-toggle-less[hidden] {
  display: none;
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-details {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: 1.65;
  color: var(--t-text-secondary);
  overflow: hidden;
  transition: grid-template-rows 0.28s ease, margin-top 0.28s ease;
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-details.is-open {
  grid-template-rows: 1fr;
  margin-top: 0.55rem;
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-details > * {
  min-height: 0;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-details-inner p {
  margin: 0 0 0.3rem;
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-details-inner p:last-child {
  margin-bottom: 0;
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-pills .t-recog-pill {
  color: var(--t-accent);
  background: color-mix(in srgb, var(--t-accent) 12%, var(--t-bg-elevated));
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--t-border);
  border-radius: 0.75rem;
  background: var(--t-bg-primary);
  color: var(--t-text-muted);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-recog-vault__card-link:hover {
  border-color: var(--t-link);
  color: var(--t-link);
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-recog-vault__header,
  .site-page[data-theme="portfolio"] .t-recog-vault__tabs,
  .site-page[data-theme="portfolio"] .t-recog-vault__panels,
  .site-page[data-theme="portfolio"] .t-recog-vault__tab,
  .site-page[data-theme="portfolio"] .t-recog-vault__card,
  .site-page[data-theme="portfolio"] .t-recog-vault__card-details {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/*
 * recognition variant: "recognition-showcase"
 * Category stats row + unified achievement card grid.
 */
.site-page[data-theme="portfolio"] .t-section--recognition-showcase {
  --recog-showcase-accent: var(--t-accent);
  --recog-showcase-icon-border: color-mix(
    in srgb,
    var(--recog-showcase-accent) 45%,
    var(--t-border-strong)
  );
  --recog-showcase-icon-surface: color-mix(
    in srgb,
    var(--recog-showcase-accent) 7%,
    var(--t-glass-bg)
  );
  --recog-showcase-icon-surface-solid: color-mix(
    in srgb,
    var(--recog-showcase-accent) 5%,
    var(--t-glass-bg-solid)
  );

  padding-block: clamp(5rem, 10vw, 7rem);
  background: var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__container {
  max-width: 72rem;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__header.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__title {
  margin: 0 0 0.75rem;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__lead {
  margin: 0;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity 0.6s ease 0.1s;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__stats.is-visible {
  opacity: 1;
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-recog-showcase__stats {
    gap: 1rem;
  }
}

.site-page[data-theme="portfolio"] .t-recog-showcase__stat {
  display: block;
  width: auto;
  min-width: 7.5rem;
  max-width: 10.5rem;
  flex: 0 1 auto;
  padding: 1rem 0.65rem;
  border: 1px solid var(--t-border);
  border-radius: 1rem;
  background: var(--t-bg-elevated);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity 0.45s ease var(--recog-showcase-stagger, 0.08s),
    transform 0.45s ease var(--recog-showcase-stagger, 0.08s),
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__stats.is-visible .t-recog-showcase__stat {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__stat:hover {
  border-color: var(--t-border-strong);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__stat.is-active:hover {
  border-color: var(--recog-showcase-accent);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__stat.is-active {
  border-color: var(--recog-showcase-accent);
  background: color-mix(
    in srgb,
    var(--recog-showcase-accent) 8%,
    var(--t-bg-elevated)
  );
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--recog-showcase-accent) 20%, transparent);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__stat.is-active .t-recog-showcase__stat-icon {
  border-color: var(--recog-showcase-accent);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__stat.is-active .t-recog-showcase__stat-count,
.site-page[data-theme="portfolio"] .t-recog-showcase__stat.is-active .t-recog-showcase__stat-label {
  color: var(--recog-showcase-accent);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__stat-icon,
.site-page[data-theme="portfolio"] .t-recog-showcase__card-icon {
  background: var(--recog-showcase-icon-surface-solid);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 1px 0 var(--t-glass-highlight) inset;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-page[data-theme="portfolio"] .t-recog-showcase__stat-icon,
  .site-page[data-theme="portfolio"] .t-recog-showcase__card-icon {
    background: var(--recog-showcase-icon-surface);
  }
}

.site-page[data-theme="portfolio"] .t-recog-showcase__stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 0.5rem;
  border: 1px solid var(--recog-showcase-icon-border);
  border-radius: 0.75rem;
  color: var(--recog-showcase-accent);
  transition: border-color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__stat-svg {
  width: 1rem;
  height: 1rem;
  display: block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--recog-icon);
  mask-image: var(--recog-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__stat-count {
  display: block;
  margin: 0;
  font-family: var(--t-font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.1;
  color: var(--t-text-primary);
  transition: color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__stat-label {
  display: block;
  margin: 0.25rem 0 0;
  font-size: 0.625rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-text-muted);
  line-height: 1.3;
  transition: color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__grid {
  display: grid;
  gap: 1.15rem;
  align-items: stretch;
  opacity: 0;
  transition: opacity 0.6s ease 0.16s;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__grid.is-visible {
  opacity: 1;
}

@media (min-width: 640px) {
  .site-page[data-theme="portfolio"] .t-recog-showcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-recog-showcase__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  border: 1px solid var(--t-border);
  border-radius: 1rem;
  background: var(--t-bg-elevated);
  overflow: hidden;
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--recog-showcase-card-stagger, 0.05s),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--recog-showcase-card-stagger, 0.05s),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card[hidden] {
  display: none;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card:hover {
  border-color: var(--t-border-strong);
  box-shadow: var(--t-shadow-md);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-accent {
  height: 0.25rem;
  background: linear-gradient(
    90deg,
    var(--recog-showcase-accent),
    color-mix(in srgb, var(--recog-showcase-accent) 55%, transparent)
  );
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card:hover .t-recog-showcase__card-accent {
  transform: scaleX(1.04);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.5rem;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-head {
  margin-bottom: 1rem;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--recog-showcase-icon-border);
  border-radius: 0.85rem;
  color: var(--recog-showcase-accent);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--recog-icon);
  mask-image: var(--recog-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-link {
  display: inline-flex;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--t-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-link:hover {
  color: var(--recog-showcase-accent);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-link-icon {
  display: block;
  flex-shrink: 0;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-title {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.35;
  color: var(--t-text-primary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-meta {
  margin: 0.375rem 0 0;
  font-size: var(--t-font-size-sm);
  line-height: 1.35;
  color: var(--t-text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-summary {
  margin: 0.75rem 0 0;
  font-size: var(--t-font-size-sm);
  line-height: 1.65;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-toggle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 0.45rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--t-link);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.4;
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-toggle:hover {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-toggle-more[hidden],
.site-page[data-theme="portfolio"] .t-recog-showcase__card-toggle-less[hidden] {
  display: none;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-details {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: 1.55;
  color: var(--t-text-secondary);
  overflow: hidden;
  transition: grid-template-rows 0.28s ease, margin-top 0.28s ease;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-details.is-open {
  grid-template-rows: 1fr;
  margin-top: 0.5rem;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-details > * {
  min-height: 0;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-details-inner p {
  margin: 0;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.75rem 0 1rem;
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-pills .t-recog-pill {
  color: var(--t-accent);
  background: color-mix(in srgb, var(--t-accent) 12%, var(--t-bg-elevated));
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-recog-showcase__card-badge {
  font-size: 0.6875rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--recog-showcase-accent);
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-recog-showcase__header,
  .site-page[data-theme="portfolio"] .t-recog-showcase__stats,
  .site-page[data-theme="portfolio"] .t-recog-showcase__grid,
  .site-page[data-theme="portfolio"] .t-recog-showcase__stat,
  .site-page[data-theme="portfolio"] .t-recog-showcase__card,
  .site-page[data-theme="portfolio"] .t-recog-showcase__card-accent,
  .site-page[data-theme="portfolio"] .t-recog-showcase__card-details {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/*
 * recognition variant: "recognition-timeline"
 * Theme background, stat chips, and a vertical achievement timeline.
 */
.site-page[data-theme="portfolio"] .t-section--recognition-timeline {
  --recog-timeline-accent: var(--t-accent);
  --recog-timeline-icon-border: color-mix(
    in srgb,
    var(--recog-timeline-accent) 45%,
    var(--t-border-strong)
  );
  --recog-timeline-icon-surface: color-mix(
    in srgb,
    var(--recog-timeline-accent) 7%,
    var(--t-glass-bg)
  );
  --recog-timeline-icon-surface-solid: color-mix(
    in srgb,
    var(--recog-timeline-accent) 5%,
    var(--t-glass-bg-solid)
  );

  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 7rem);
  background: var(--t-bg-primary);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: radial-gradient(
    circle at 1px 1px,
    color-mix(in srgb, var(--t-text-primary) 8%, transparent) 1px,
    transparent 0
  );
  background-size: 40px 40px;
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__container {
  position: relative;
  z-index: 1;
  max-width: 56rem;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  height: 8rem;
  background: linear-gradient(
    to top,
    var(--t-bg-primary),
    transparent
  );
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__header.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem 0.4rem 0.65rem;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-pill);
  background: var(--t-bg-elevated);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__stat:hover {
  border-color: var(--t-border-strong);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__stat.is-active {
  border-color: var(--recog-timeline-accent);
  background: color-mix(
    in srgb,
    var(--recog-timeline-accent) 8%,
    var(--t-bg-elevated)
  );
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--recog-timeline-accent) 20%, transparent);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__stat.is-active:hover {
  border-color: var(--recog-timeline-accent);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__stat.is-active .t-recog-timeline__stat-icon,
.site-page[data-theme="portfolio"] .t-recog-timeline__stat.is-active .t-recog-timeline__stat-copy {
  color: var(--recog-timeline-accent);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--recog-timeline-accent);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__stat-svg,
.site-page[data-theme="portfolio"] .t-recog-timeline__node-svg,
.site-page[data-theme="portfolio"] .t-recog-timeline__meta-icon {
  display: block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--recog-icon);
  mask-image: var(--recog-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__stat-svg {
  width: 0.875rem;
  height: 0.875rem;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__stat-copy {
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
  transition: color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__entry[hidden] {
  display: none;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__track {
  opacity: 0;
  transition: opacity 0.6s ease 0.12s;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__track.is-visible {
  opacity: 1;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1rem;
  opacity: 0;
  transform: translateX(-1.25rem);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--recog-timeline-stagger, 0.05s),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--recog-timeline-stagger, 0.05s);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__entry.is-visible {
  opacity: 1;
  transform: translateX(0);
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-recog-timeline__entry {
    gap: 0 1.5rem;
  }
}

.site-page[data-theme="portfolio"] .t-recog-timeline__rail {
  position: relative;
  display: flex;
  justify-content: center;
  width: 2rem;
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-recog-timeline__rail {
    width: 2.5rem;
  }
}

.site-page[data-theme="portfolio"] .t-recog-timeline__rail::after {
  content: "";
  position: absolute;
  top: 2rem;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    var(--t-border-strong),
    transparent
  );
}

.site-page[data-theme="portfolio"] .t-recog-timeline__entry--last .t-recog-timeline__rail::after {
  display: none;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.15rem;
  border: 1px solid var(--recog-timeline-icon-border);
  border-radius: 0.65rem;
  background: var(--recog-timeline-icon-surface-solid);
  color: var(--recog-timeline-accent);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 0 0 2px var(--t-bg-primary);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-page[data-theme="portfolio"] .t-recog-timeline__node {
    background: var(--recog-timeline-icon-surface);
  }
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-recog-timeline__node {
    width: 2.25rem;
    height: 2.25rem;
  }
}

.site-page[data-theme="portfolio"] .t-recog-timeline__node-svg {
  width: 0.9rem;
  height: 0.9rem;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-wrap {
  padding-bottom: 2.5rem;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__entry--last .t-recog-timeline__card-wrap {
  padding-bottom: 0;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card {
  overflow: hidden;
  border: 1px solid var(--t-border);
  border-radius: 0.85rem;
  background: var(--t-bg-elevated);
  color: var(--t-text-primary);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card:hover {
  border-color: var(--t-border-strong);
  box-shadow: var(--t-shadow-md);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-accent {
  height: 0.25rem;
  background: var(--recog-timeline-accent);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-body {
  padding: 1.5rem;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-badge {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.35rem;
  font-size: 0.625rem;
  font-weight: var(--t-font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--recog-timeline-accent);
  background: color-mix(in srgb, var(--recog-timeline-accent) 12%, transparent);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-title {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.35;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-link {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--t-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-link:hover {
  color: var(--recog-timeline-accent);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-link-icon {
  display: block;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.75rem;
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__meta-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-summary {
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 0.45rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--t-link);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.4;
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-toggle:hover {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-toggle-more[hidden],
.site-page[data-theme="portfolio"] .t-recog-timeline__card-toggle-less[hidden] {
  display: none;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-details {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  overflow: hidden;
  transition: grid-template-rows 0.28s ease, margin-top 0.28s ease;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-details.is-open {
  grid-template-rows: 1fr;
  margin-top: 0.55rem;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-details > * {
  min-height: 0;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-details-inner p {
  margin: 0 0 0.3rem;
}

.site-page[data-theme="portfolio"] .t-recog-timeline__card-details-inner p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-recog-timeline__header,
  .site-page[data-theme="portfolio"] .t-recog-timeline__track,
  .site-page[data-theme="portfolio"] .t-recog-timeline__entry,
  .site-page[data-theme="portfolio"] .t-recog-timeline__card-details {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/*
 * recognition variant: "recognition-ledger"
 * Numbered credentials register with dotted title-to-year leaders.
 */

.site-page[data-theme="portfolio"] .t-section--recognition-ledger {
  padding-block: clamp(5.5rem, 11vw, 8rem);
  background: var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__container {
  max-width: 62rem;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__count {
  margin: 0;
  flex-shrink: 0;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__count-num {
  font-family: var(--t-font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: 1;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__index {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 0 2.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__index::-webkit-scrollbar {
  display: none;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__index-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0;
  padding: 0.65rem 1rem 0.7rem;
  border: 0;
  border-right: 1px solid var(--t-border);
  border-radius: 0;
  background: transparent;
  color: var(--t-text-secondary);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__index-item:first-child {
  padding-left: 0;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__index-item:last-child {
  border-right: 0;
  padding-right: 0;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__index-item:hover {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__index-item.is-active {
  color: var(--t-text-primary);
  box-shadow: inset 0 -2px 0 var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__index-n {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__register {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__row {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__row[hidden] {
  display: none !important;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__entry {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.75rem 1.25rem;
  padding: 1.35rem 0 1.45rem;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__num {
  font-family: var(--t-font-display);
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: var(--t-text-muted);
  transition: color 0.15s ease;
}

.site-page[data-theme="portfolio"]
  .t-recog-ledger__row:hover
  .t-recog-ledger__num {
  color: var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__body {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__headline {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__entry-title {
  margin: 0;
  flex: 0 1 auto;
  max-width: 100%;
  font-family: var(--t-font-display);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: 1.3;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__leaders {
  flex: 1 1 1.5rem;
  min-width: 1.25rem;
  height: 0;
  border-bottom: 1px dotted
    color-mix(in srgb, var(--t-text-muted) 70%, transparent);
  transform: translateY(-0.28em);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__year {
  flex: 0 0 auto;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__ext {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--t-text-muted);
  transform: translateY(0.12em);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__ext:hover {
  color: var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__cite {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.4rem;
  margin: 0.4rem 0 0;
  font-size: var(--t-font-size-xs);
  line-height: 1.45;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__kind {
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__dot {
  color: var(--t-border-strong);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__summary {
  margin: 0.65rem 0 0;
  max-width: 52rem;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__toggle {
  margin: 0.55rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-accent);
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__toggle:hover {
  color: var(--t-accent-hover);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__details {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  overflow: hidden;
  transition: grid-template-rows 0.28s ease;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__details.is-open {
  grid-template-rows: 1fr;
  margin-top: 0.5rem;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__details-inner {
  min-height: 0;
  overflow: hidden;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-ledger__details-inner p {
  margin: 0 0 0.4rem;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__details-inner p:last-child {
  margin-bottom: 0;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-recog-ledger__marks li {
  font-size: var(--t-font-size-xs);
  letter-spacing: 0.02em;
  color: var(--t-text-muted);
  border-bottom: 1px solid var(--t-border-strong);
}

@media (max-width: 639px) {
  .site-page[data-theme="portfolio"] .t-recog-ledger__entry {
    grid-template-columns: 2.15rem minmax(0, 1fr);
    gap: 0.5rem 0.85rem;
    padding: 1.15rem 0 1.25rem;
  }

  .site-page[data-theme="portfolio"] .t-recog-ledger__headline {
    flex-wrap: wrap;
    row-gap: 0.2rem;
  }

  .site-page[data-theme="portfolio"] .t-recog-ledger__leaders {
    display: none;
  }

  .site-page[data-theme="portfolio"] .t-recog-ledger__entry-title {
    flex: 1 1 calc(100% - 2rem);
  }

  .site-page[data-theme="portfolio"] .t-recog-ledger__year {
    order: 3;
    width: 100%;
    margin-top: 0.15rem;
  }

  .site-page[data-theme="portfolio"] .t-recog-ledger__ext {
    order: 2;
  }

  .site-page[data-theme="portfolio"] .t-recog-ledger__num {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-recog-ledger__details {
    transition: none;
  }
}

/*
 * recognition variant: "recognition-citations"
 * Year-chapter bibliography with hanging-indent citation rows.
 */

.site-page[data-theme="portfolio"] .t-section--recognition-citations {
  padding-block: clamp(5.5rem, 11vw, 8rem);
  background: var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-recog-citations__container {
  max-width: 42rem;
}

.site-page[data-theme="portfolio"] .t-recog-citations__header {
  margin: 0 0 1.5rem;
}

.site-page[data-theme="portfolio"] .t-recog-citations__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-citations__contents {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.15rem;
  margin: 0 0 2.25rem;
}

.site-page[data-theme="portfolio"] .t-recog-citations__contents-item {
  margin: 0;
  padding: 0.15rem 0.35rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--t-text-secondary);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  line-height: 1.4;
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-recog-citations__contents-item:hover {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-citations__contents-item.is-active {
  color: var(--t-accent);
  box-shadow: inset 0 -1px 0 var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-recog-citations__contents-item.is-active .t-recog-citations__contents-n {
  color: inherit;
}

.site-page[data-theme="portfolio"] .t-recog-citations__contents-item:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
}

.site-page[data-theme="portfolio"] .t-recog-citations__contents-n {
  font-variant-numeric: tabular-nums;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-citations__contents-sep {
  padding: 0 0.2rem;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-citations__corpus {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.site-page[data-theme="portfolio"] .t-recog-citations__chapter {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-recog-citations__chapter[hidden] {
  display: none !important;
}

.site-page[data-theme="portfolio"] .t-recog-citations__chapter--undated {
  padding-top: 0;
}

.site-page[data-theme="portfolio"] .t-recog-citations__year {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin: 0 0 0.85rem;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-normal);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: 1.2;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-citations__year time {
  flex: 0 0 auto;
}

.site-page[data-theme="portfolio"] .t-recog-citations__year-rule {
  flex: 1 1 auto;
  min-width: 2rem;
  height: 0;
  border-bottom: 1px solid var(--t-border);
  transform: translateY(-0.28em);
}

.site-page[data-theme="portfolio"] .t-recog-citations__year--silent {
  margin-bottom: 0.5rem;
}

.site-page[data-theme="portfolio"] .t-recog-citations__bib {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-recog-citations__row {
  margin: 0;
  padding: 0.85rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--t-border) 40%, transparent);
}

.site-page[data-theme="portfolio"] .t-recog-citations__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.site-page[data-theme="portfolio"] .t-recog-citations__row:first-child {
  padding-top: 0;
}

.site-page[data-theme="portfolio"] .t-recog-citations__row[hidden] {
  display: none !important;
}

.site-page[data-theme="portfolio"] .t-recog-citations__cite {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.35rem 0.65rem;
  align-items: start;
}

.site-page[data-theme="portfolio"] .t-recog-citations__row--no-icon .t-recog-citations__cite {
  grid-template-columns: minmax(0, 1fr);
}

.site-page[data-theme="portfolio"] .t-recog-citations__mark {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.2rem;
  background-color: currentColor;
  color: var(--t-text-muted);
  -webkit-mask-image: var(--recog-icon);
  mask-image: var(--recog-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-recog-citations__row:hover .t-recog-citations__mark {
  color: var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-recog-citations__body {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-recog-citations__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.35rem;
  margin: 0 0 0.25rem;
  font-size: var(--t-font-size-xs);
  line-height: 1.45;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-citations__kind {
  font-weight: var(--t-font-weight-medium);
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-citations__sep {
  color: var(--t-border-strong);
}

.site-page[data-theme="portfolio"] .t-recog-citations__work {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-base);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: 1.35;
  color: var(--t-text-primary);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.site-page[data-theme="portfolio"] .t-recog-citations__work-link {
  color: var(--t-link);
  text-decoration: none;
}

.site-page[data-theme="portfolio"] .t-recog-citations__work-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.site-page[data-theme="portfolio"] .t-recog-citations__ext {
  display: inline-block;
  margin-left: 0.35em;
  vertical-align: -0.12em;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-citations__work-link:hover .t-recog-citations__ext {
  color: var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-recog-citations__work-link:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
}

.site-page[data-theme="portfolio"] .t-recog-citations__snippet {
  margin: 0.4rem 0 0;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-citations__toggle {
  margin: 0.45rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-accent);
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-recog-citations__toggle:hover {
  color: var(--t-accent-hover);
}

.site-page[data-theme="portfolio"] .t-recog-citations__toggle:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
}

.site-page[data-theme="portfolio"] .t-recog-citations__details {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  overflow: hidden;
  transition: grid-template-rows 0.28s ease;
}

.site-page[data-theme="portfolio"] .t-recog-citations__details.is-open {
  grid-template-rows: 1fr;
  margin-top: 0.4rem;
}

.site-page[data-theme="portfolio"] .t-recog-citations__details-inner {
  min-height: 0;
  overflow: hidden;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-citations__details-inner p {
  margin: 0 0 0.4rem;
}

.site-page[data-theme="portfolio"] .t-recog-citations__details-inner p:last-child {
  margin-bottom: 0;
}

.site-page[data-theme="portfolio"] .t-recog-citations__locators {
  margin: 0.5rem 0 0;
  font-size: var(--t-font-size-xs);
  line-height: 1.5;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-citations__src {
  margin: 0.45rem 0 0;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
}

.site-page[data-theme="portfolio"] .t-recog-citations__src a {
  color: var(--t-link);
  text-decoration: none;
}

.site-page[data-theme="portfolio"] .t-recog-citations__src a:hover {
  color: var(--t-accent-hover);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-recog-citations__cite {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.4rem 0.75rem;
  }

  .site-page[data-theme="portfolio"] .t-recog-citations__row--no-icon .t-recog-citations__cite {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-page[data-theme="portfolio"] .t-recog-citations__corpus {
    gap: 2.1rem;
  }
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-recog-citations__year {
    font-size: var(--t-font-size-xl);
  }

  .site-page[data-theme="portfolio"] .t-recog-citations__row {
    padding: 1rem 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-recog-citations__details {
    transition-duration: 0.01ms;
  }
}

/*
 * recognition variant: "recognition-dossier"
 * Sticky year index beside letterhead honor pages.
 */

.site-page[data-theme="portfolio"] .t-section--recognition-dossier {
  padding-block: clamp(5.5rem, 11vw, 8rem);
  background: var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__container {
  max-width: var(--t-max-width);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__header {
  margin: 0 0 1.75rem;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__index,
.site-page[data-theme="portfolio"] .t-recog-dossier__pages,
.site-page[data-theme="portfolio"] .t-recog-dossier__page,
.site-page[data-theme="portfolio"] .t-recog-dossier__page-title {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__toc-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__index {
  position: sticky;
  top: var(--t-header-offset);
  z-index: 4;
  padding: 0.1rem 0 1.25rem;
  background: var(--t-bg-primary);
  overflow-anchor: none;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__toc-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__toc-list::-webkit-scrollbar {
  display: none;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__toc-year {
  flex: 0 0 auto;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__toc-year-link,
.site-page[data-theme="portfolio"] .t-recog-dossier__toc-link {
  display: block;
  padding: 0.4rem 0.7rem;
  color: var(--t-text-muted);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__toc-year-link:hover,
.site-page[data-theme="portfolio"] .t-recog-dossier__toc-link:hover {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__toc-year-link.is-active,
.site-page[data-theme="portfolio"] .t-recog-dossier__toc-year-link[aria-current="true"],
.site-page[data-theme="portfolio"] .t-recog-dossier__toc-link.is-active,
.site-page[data-theme="portfolio"] .t-recog-dossier__toc-link[aria-current="true"] {
  color: var(--t-accent);
  font-weight: var(--t-font-weight-medium);
  border-bottom-color: var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__toc-year-link:focus-visible,
.site-page[data-theme="portfolio"] .t-recog-dossier__toc-link:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__toc-titles {
  display: none;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__pages {
  padding-top: 0;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__chapter {
  margin: 0;
  padding-top: 0;
  scroll-margin-top: calc(var(--t-header-offset) + 4.5rem);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__chapter-year {
  margin: 0 0 0.45rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--t-border);
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: 1.2;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__page {
  padding: 1.15rem 0 1.6rem;
  border-block-end: 1px solid var(--t-border);
  scroll-margin-top: calc(var(--t-header-offset) + 4.5rem);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__page:last-child {
  border-block-end: 0;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__letterhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__class {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__mark {
  flex-shrink: 0;
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  background-color: currentColor;
  color: var(--t-text-muted);
  -webkit-mask-image: var(--recog-icon);
  mask-image: var(--recog-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__kind {
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__date {
  flex-shrink: 0;
  font-size: var(--t-font-size-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__page-title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: 1.3;
  color: var(--t-text-primary);
  overflow-wrap: anywhere;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__page-title a {
  color: var(--t-link);
  text-decoration: none;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__page-title a:hover {
  color: var(--t-accent-hover);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__title-ext {
  display: inline-block;
  margin-left: 0.4em;
  vertical-align: -0.08em;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__page-title a:hover .t-recog-dossier__title-ext {
  color: var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__cite {
  margin: 0.4rem 0 0;
  font-size: var(--t-font-size-sm);
  line-height: 1.45;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__summary {
  margin: 0.7rem 0 0;
  max-width: 40rem;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__toggle {
  margin: 0.5rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-link);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__toggle:hover {
  color: var(--t-accent-hover);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__toggle:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__details {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  overflow: hidden;
  transition: grid-template-rows 0.28s ease;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__details.is-open {
  grid-template-rows: 1fr;
  margin-top: 0.4rem;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__details-inner {
  min-height: 0;
  overflow: hidden;
  max-width: 40rem;
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__exhibits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__exhibit {
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__exhibit:not(:last-child)::after {
  content: "·";
  margin-left: 0.75rem;
  color: var(--t-border-strong);
}

.site-page[data-theme="portfolio"] .t-recog-dossier__ext {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.7rem;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--t-link);
  text-decoration: none;
}

.site-page[data-theme="portfolio"] .t-recog-dossier__ext:hover {
  color: var(--t-accent-hover);
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-recog-dossier__spread {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }

  .site-page[data-theme="portfolio"] .t-recog-dossier__index {
    position: sticky;
    top: calc(var(--t-header-offset) + 1.5rem);
    z-index: auto;
    align-self: start;
    max-height: calc(100svh - var(--t-header-offset) - 3rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.35rem 0 0;
    background: transparent;
  }

  .site-page[data-theme="portfolio"] .t-recog-dossier__toc-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    overflow: visible;
    border-inline-start: 1px solid var(--t-border-strong);
  }

  .site-page[data-theme="portfolio"] .t-recog-dossier__toc-year {
    flex: none;
  }

  .site-page[data-theme="portfolio"] .t-recog-dossier__toc-year-link,
  .site-page[data-theme="portfolio"] .t-recog-dossier__toc-link {
    border-bottom: 0;
    border-inline-start: 2px solid transparent;
    margin-inline-start: -1px;
    padding: 0.35rem 0 0.35rem 1rem;
  }

  .site-page[data-theme="portfolio"] .t-recog-dossier__toc-year-link.is-active,
  .site-page[data-theme="portfolio"] .t-recog-dossier__toc-year-link[aria-current="true"],
  .site-page[data-theme="portfolio"] .t-recog-dossier__toc-link.is-active,
  .site-page[data-theme="portfolio"] .t-recog-dossier__toc-link[aria-current="true"] {
    border-bottom-color: transparent;
    border-inline-start-color: var(--t-accent);
  }

  .site-page[data-theme="portfolio"] .t-recog-dossier__toc-titles {
    display: block;
    margin: 0 0 0.35rem 0.75rem;
    padding: 0;
    list-style: none;
  }

  .site-page[data-theme="portfolio"] .t-recog-dossier__toc-link {
    font-size: var(--t-font-size-xs);
    letter-spacing: 0;
    font-variant-numeric: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .site-page[data-theme="portfolio"] .t-recog-dossier__pages {
    max-width: 40rem;
    padding-top: 0;
  }

  .site-page[data-theme="portfolio"] .t-recog-dossier__chapter,
  .site-page[data-theme="portfolio"] .t-recog-dossier__page {
    scroll-margin-top: calc(var(--t-header-offset) + 0.75rem);
  }

  .site-page[data-theme="portfolio"] .t-recog-dossier__chapter {
    margin: 0 0 0.35rem;
    padding-top: 0.5rem;
  }

  .site-page[data-theme="portfolio"] .t-recog-dossier__chapter-year {
    margin: 0 0 0.65rem;
    padding-bottom: 0.45rem;
  }
}

@media (min-width: 1440px) {
  .site-page[data-theme="portfolio"] .t-recog-dossier__spread {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-recog-dossier__details {
    transition: none;
  }
}

/*
 * recognition variant: "recognition-years"
 * Horizontal year spine that stages one honor in large type.
 */

.site-page[data-theme="portfolio"] .t-section--recognition-years {
  padding-block: clamp(5.5rem, 11vw, 8rem);
  background: var(--t-bg-primary);
  overflow-x: clip;
}

.site-page[data-theme="portfolio"] .t-recog-years__container {
  max-width: min(var(--t-max-width), 70rem);
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-recog-years__header {
  margin: 0 0 1.75rem;
}

.site-page[data-theme="portfolio"] .t-recog-years__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-years__board {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-recog-years__spine {
  position: relative;
  margin: 0 0 2rem;
}

.site-page[data-theme="portfolio"] .t-recog-years__track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.15rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-bottom: 1px solid var(--t-border-strong);
}

.site-page[data-theme="portfolio"] .t-recog-years__track::-webkit-scrollbar {
  display: none;
}

.site-page[data-theme="portfolio"] .t-recog-years__spine-fade {
  position: absolute;
  top: 0;
  bottom: 1px;
  width: 2.5rem;
  pointer-events: none;
  z-index: 1;
}

.site-page[data-theme="portfolio"] .t-recog-years__spine-fade--start {
  left: 0;
  background: linear-gradient(
    to right,
    var(--t-bg-primary),
    color-mix(in srgb, var(--site-color-background) 0%, transparent)
  );
}

.site-page[data-theme="portfolio"] .t-recog-years__spine-fade--end {
  right: 0;
  background: linear-gradient(
    to left,
    var(--t-bg-primary),
    color-mix(in srgb, var(--site-color-background) 0%, transparent)
  );
}

.site-page[data-theme="portfolio"] .t-recog-years__tick {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: center;
}

.site-page[data-theme="portfolio"] .t-recog-years__year-radio,
.site-page[data-theme="portfolio"] .t-recog-years__honor-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-page[data-theme="portfolio"] .t-recog-years__year-label {
  display: block;
  padding: 0.5rem 0.7rem 0.65rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--t-text-muted);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
}

.site-page[data-theme="portfolio"] .t-recog-years__year-label:hover {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-years__year-radio:checked + .t-recog-years__year-label {
  color: var(--t-accent);
  box-shadow: inset 0 -2px 0 var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-recog-years__year-radio:focus-visible + .t-recog-years__year-label,
.site-page[data-theme="portfolio"] .t-recog-years__honor-radio:focus-visible + .t-recog-years__index-label {
  outline: 2px solid var(--t-border-strong);
  outline-offset: 2px;
}

.site-page[data-theme="portfolio"] .t-recog-years__panel {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-recog-years__honors,
.site-page[data-theme="portfolio"] .t-recog-years__honor {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-recog-years__kicker {
  margin: 0 0 0.35rem;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-years__year {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: clamp(3rem, 18vw, 4rem);
  font-weight: var(--t-font-weight-normal);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: 0.9;
  color: color-mix(in srgb, var(--site-color-text) 22%, transparent);
}

.site-page[data-theme="portfolio"] .t-recog-years__year-undated {
  margin: 0 0 0.35rem;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-xl);
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-years__honor-title {
  margin: 0.35rem 0 0;
  max-width: 38rem;
  font-family: var(--t-font-display);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: 1.2;
  color: var(--t-text-primary);
  overflow-wrap: anywhere;
}

.site-page[data-theme="portfolio"] .t-recog-years__honor--bare .t-recog-years__honor-title {
  margin-top: 0.15rem;
}

.site-page[data-theme="portfolio"] .t-recog-years__honor-title a {
  color: var(--t-link);
  text-decoration: none;
}

.site-page[data-theme="portfolio"] .t-recog-years__honor-title a:hover {
  color: var(--t-accent-hover);
}

.site-page[data-theme="portfolio"] .t-recog-years__ext {
  display: inline-block;
  margin-left: 0.4em;
  vertical-align: 0.12em;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-years__honor-title a:hover .t-recog-years__ext {
  color: var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-recog-years__cite {
  margin: 0.5rem 0 0;
  max-width: 38rem;
  font-size: var(--t-font-size-sm);
  line-height: 1.45;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-years__summary {
  margin: 0.85rem 0 0;
  max-width: 38rem;
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-years__more {
  margin: 0.55rem 0 0;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-recog-years__more summary {
  cursor: pointer;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.04em;
  color: var(--t-link);
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-recog-years__more summary::-webkit-details-marker {
  display: none;
}

.site-page[data-theme="portfolio"] .t-recog-years__more-body {
  margin-top: 0.4rem;
  max-width: 38rem;
}

.site-page[data-theme="portfolio"] .t-recog-years__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.85rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-recog-years__marks li {
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-recog-years__link {
  margin: 0.7rem 0 0;
  font-size: var(--t-font-size-xs);
}

.site-page[data-theme="portfolio"] .t-recog-years__link a {
  color: var(--t-link);
  text-decoration: none;
}

.site-page[data-theme="portfolio"] .t-recog-years__link a:hover {
  color: var(--t-accent-hover);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.site-page[data-theme="portfolio"] .t-recog-years__index {
  min-width: 0;
  max-height: min(22rem, 70vh);
  overflow-y: auto;
  border-top: 1px solid var(--t-border);
  padding-top: 0.85rem;
}

.site-page[data-theme="portfolio"] .t-recog-years__index-item {
  position: relative;
  border-bottom: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-recog-years__index-item:last-child {
  border-bottom: 0;
}

.site-page[data-theme="portfolio"] .t-recog-years__index-label {
  display: block;
  padding: 0.55rem 0.35rem 0.55rem 0.65rem;
  cursor: pointer;
  box-shadow: inset 2px 0 0 transparent;
}

.site-page[data-theme="portfolio"] .t-recog-years__index-label:hover {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-recog-years__honor-radio:checked + .t-recog-years__index-label {
  color: var(--t-accent);
  box-shadow: inset 2px 0 0 var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-recog-years__index-text {
  min-width: 0;
  font-size: var(--t-font-size-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .site-page[data-theme="portfolio"] .t-recog-years__year {
    font-size: clamp(3.75rem, 12vw, 5.5rem);
  }

  .site-page[data-theme="portfolio"] .t-recog-years__index {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 1rem;
  }
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-recog-years__year {
    font-size: clamp(4.5rem, 9vw, 6.5rem);
  }

  .site-page[data-theme="portfolio"] .t-recog-years__panel:has(.t-recog-years__index) {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
    gap: 2.5rem;
    align-items: start;
  }

  .site-page[data-theme="portfolio"] .t-recog-years__index {
    display: block;
    border-top: 0;
    padding-top: 0;
    max-height: min(28rem, 70vh);
  }
}

@media (min-width: 1440px) {
  .site-page[data-theme="portfolio"] .t-recog-years__spine-fade {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-recog-years__track {
    scroll-behavior: auto;
  }
}

/* Recent posts — column masonry (newest left-to-right on the top row) */

.t-section--activity {
  background: var(--t-bg-primary);
}

.t-section--activity .t-exp-intro {
  width: 100%;
  max-width: none;
  margin: 0 0 3rem;
  text-align: center;
}

.t-section--activity .t-exp-intro__title {
  text-align: center;
}

.t-activity-masonry {
  display: flex;
  gap: 1rem;
  width: 100%;
  align-items: flex-start;
}

.t-activity-masonry__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.t-activity-masonry--cols-3 {
  display: flex;
}

.t-activity-masonry--cols-2,
.t-activity-masonry--cols-1 {
  display: none;
}

@media (max-width: 52rem) {
  .t-activity-masonry--cols-3 {
    display: none;
  }

  .t-activity-masonry--cols-2 {
    display: flex;
  }
}

@media (max-width: 36rem) {
  .t-activity-masonry--cols-2 {
    display: none;
  }

  .t-activity-masonry--cols-1 {
    display: flex;
  }
}

.t-activity-card-link {
  display: block;
  width: 100%;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.t-activity-card-link--static {
  cursor: default;
}

.t-activity-card {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1rem 1rem 0.85rem;
  box-sizing: border-box;
  background: var(--t-bg-elevated);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.t-activity-card-link:hover .t-activity-card,
.t-activity-card-link:focus-visible .t-activity-card {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--t-accent) 35%, var(--t-border));
  box-shadow: 0 6px 16px rgb(15 23 42 / 0.1);
}

.t-activity-card-link:focus-visible {
  outline: none;
}

.t-activity-card-link:focus-visible .t-activity-card {
  outline: 2px solid color-mix(in srgb, var(--t-accent) 50%, transparent);
  outline-offset: 2px;
}

.t-activity-masonry__footer {
  margin-top: 1.5rem;
  text-align: center;
}

.t-activity-view-all {
  margin: 0;
}

.t-activity-view-all a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-secondary);
  text-decoration: none;
  background: var(--t-bg-elevated);
  border: 1px solid var(--t-border);
  border-radius: 999px;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.t-activity-view-all a:hover {
  color: var(--t-accent);
  border-color: var(--t-accent);
}

.t-activity-card__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
}

.t-activity-card__avatar {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 50%;
  background: var(--t-bg-primary);
  border: 1px solid var(--t-border);
}

.t-activity-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.t-activity-card__name {
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  line-height: 1.3;
  color: var(--t-text-primary);
}

.t-activity-card__time {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--t-text-muted);
}

.t-activity-card__comment {
  margin-bottom: 0.65rem;
}

.t-activity-card__comment .t-activity-card__text:last-child {
  margin-bottom: 0;
}

.t-activity-card__embed {
  margin-top: 0.15rem;
  padding: 0.65rem 0.7rem 0.55rem;
  background: var(--t-bg-primary);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-md);
}

.t-activity-card--repost .t-activity-card__header {
  margin-bottom: 0.5rem;
}

.t-activity-card__embed-header {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 0.45rem;
}

.t-activity-card__embed-name {
  font-size: 0.75rem;
  font-weight: var(--t-font-weight-semibold);
  line-height: 1.3;
  color: var(--t-text-primary);
}

.t-activity-card__embed-meta {
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--t-text-muted);
}

.t-activity-card__embed-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}

.t-activity-card__embed-text {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--t-text-secondary);
}

.t-activity-card__embed-media {
  overflow: hidden;
  margin: 0 -0.05rem -0.05rem;
  border-radius: calc(var(--t-radius-md) - 2px);
}

.t-activity-card__embed-image {
  display: block;
  width: 100%;
  max-height: 9rem;
  object-fit: cover;
  vertical-align: middle;
}

.t-activity-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.t-activity-card__text {
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: 1.55;
  color: var(--t-text-primary);
}

/* Clamp post copy in the card; ellipsis is added by the browser. */
.t-activity-card__text--clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.t-activity-card__embed-text--clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.t-activity-card__media {
  margin-top: 0.75rem;
  overflow: hidden;
  border-radius: var(--t-radius-md);
  border: 1px solid var(--t-border);
}

.t-activity-card__image {
  display: block;
  width: 100%;
  max-height: 14rem;
  object-fit: cover;
  vertical-align: middle;
}

.t-activity-card__footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--t-border);
}

.t-activity-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-muted);
}

.t-activity-card__stat svg {
  flex-shrink: 0;
  opacity: 0.72;
}

/*
 * activity variant: "activity-masonry"
 * Offset masonry grid with engagement stats card in column 3 (desktop).
 */
.site-page[data-theme="portfolio"] .t-section--activity-masonry {
  padding-block: clamp(4rem, 10vw, 6rem);
  background: var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-activity-masonry__container {
  max-width: 72rem;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__header {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-activity-masonry {
  display: none;
  width: 100%;
}

.site-page[data-theme="portfolio"] .t-activity-masonry--cols-3 {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__col--offset {
  margin-top: 2.5rem;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__col--featured {
  margin-top: 1.25rem;
}

@media (max-width: 52rem) {
  .site-page[data-theme="portfolio"] .t-activity-masonry--cols-3 {
    display: none;
  }

  .site-page[data-theme="portfolio"] .t-activity-masonry--cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
  }

  .site-page[data-theme="portfolio"] .t-activity-masonry--cols-2 .t-activity-masonry__stats {
    grid-column: 1 / -1;
  }
}

@media (max-width: 36rem) {
  .site-page[data-theme="portfolio"] .t-activity-masonry--cols-2 {
    display: none;
  }

  .site-page[data-theme="portfolio"] .t-activity-masonry--cols-1 {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
}

.site-page[data-theme="portfolio"] .t-activity-masonry--cols-1 {
  display: none;
}

@media (max-width: 36rem) {
  .site-page[data-theme="portfolio"] .t-activity-masonry--cols-1 {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  padding: 1.75rem;
  border-radius: var(--t-radius-xl);
  background: var(--site-color-primary);
  color: var(--site-on-primary, var(--t-bg-elevated));
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: var(--t-radius-md);
  background: color-mix(in srgb, var(--site-on-primary, #fff) 14%, transparent);
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-icon {
  display: block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: currentColor;
  opacity: 0.72;
  -webkit-mask-image: var(--stats-icon);
  mask-image: var(--stats-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-badge-icon {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  color: var(--site-on-primary, #fff);
  opacity: 0.92;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 55%, transparent);
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.25rem;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-primary {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-value {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: clamp(2.5rem, 4vw, 3rem);
  font-weight: var(--t-font-weight-semibold);
  line-height: 1;
  letter-spacing: -0.02em;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-caption {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: color-mix(in srgb, currentColor 45%, transparent);
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-divider {
  height: 1px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-row {
  display: flex;
  gap: 1.25rem;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-item {
  flex: 1 1 0;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-inline .t-activity-masonry__stats-icon {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.85;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-inline .t-activity-masonry__stats-svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.85;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-subvalue {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: 1.375rem;
  font-weight: var(--t-font-weight-semibold);
  line-height: 1.2;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__stats-subcaption {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: color-mix(in srgb, currentColor 45%, transparent);
}

/* Post cards */
.site-page[data-theme="portfolio"] .t-activity-masonry-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-xl);
  background: var(--t-bg-elevated);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card:hover {
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.1);
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__thumb {
  position: relative;
  flex-shrink: 0;
  height: 11rem;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__thumb-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card:hover .t-activity-masonry-card__thumb-image {
  transform: scale(1.04);
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.28),
    transparent 55%
  );
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  padding: 0.25rem 0.75rem;
  font-size: 0.68rem;
  font-weight: var(--t-font-weight-semibold);
  color: var(--t-accent);
  background: color-mix(in srgb, var(--t-accent) 10%, var(--t-bg-elevated));
  border-radius: 999px;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__quote {
  padding: 1rem;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  background: var(--t-bg-secondary);
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__quote-author {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  font-weight: var(--t-font-weight-bold);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__quote-text {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--t-text-secondary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__comment {
  margin: 0;
  font-size: var(--t-font-size-sm);
  font-style: italic;
  line-height: 1.75;
  color: var(--t-text-primary);
  border-left: 4px solid color-mix(in srgb, var(--t-accent) 30%, transparent);
  padding-left: 0.75rem;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__text {
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: 1.8;
  color: var(--t-text-primary);
  white-space: pre-line;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__expand {
  margin: 0;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__expand-summary {
  cursor: pointer;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__expand-summary::-webkit-details-marker {
  display: none;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__expand[open] > .t-activity-masonry-card__expand-summary {
  display: none;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__expand-panel {
  display: block;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__expand-panel-inner {
  min-height: 0;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: var(--t-font-weight-semibold);
  color: var(--t-accent);
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__toggle--more {
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__toggle-icon {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__toggle-icon--up {
  transform: rotate(180deg);
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__time {
  font-size: 0.625rem;
  font-family: var(--t-font-mono, ui-monospace, monospace);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--t-text-muted);
  text-decoration: none;
  border: 1px solid var(--t-border);
  border-radius: 999px;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card__link:hover {
  color: var(--t-accent);
  border-color: var(--t-accent);
}

.site-page[data-theme="portfolio"] .t-section--activity-masonry .t-activity-masonry__footer {
  margin-top: 1.5rem;
  text-align: center;
}

/* Reveal animation */
.site-page[data-theme="portfolio"] .t-activity-masonry__reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    box-shadow 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-activity-masonry__reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card[data-reveal-index="1"].is-visible {
  transition-delay: 0.08s;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card[data-reveal-index="2"].is-visible {
  transition-delay: 0.16s;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card[data-reveal-index="3"].is-visible {
  transition-delay: 0.24s;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card[data-reveal-index="4"].is-visible {
  transition-delay: 0.32s;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card[data-reveal-index="5"].is-visible {
  transition-delay: 0.4s;
}

.site-page[data-theme="portfolio"] .t-activity-masonry-card[data-reveal-index="6"].is-visible {
  transition-delay: 0.48s;
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-activity-masonry__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * activity variant: "activity-live-feed"
 * Expandable feed rows — excerpt un-clamps in place; extras reveal below.
 */
.site-page[data-theme="portfolio"] .t-section--activity-live-feed {
  padding-block: clamp(4rem, 10vw, 6rem);
  background: var(--t-bg-primary);
  color: var(--t-text-secondary);
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-activity-live__container {
  max-width: 56rem;
}

.site-page[data-theme="portfolio"] .t-activity-live__header {
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.site-page[data-theme="portfolio"] .t-activity-live__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-light);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-activity-live__title::after {
  content: "_";
  color: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-activity-live__feed {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--t-border);
}

.site-page[data-theme="portfolio"] .t-activity-live__row {
  background: var(--t-bg-primary);
  transition: background-color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-activity-live__row:hover {
  background: color-mix(
    in srgb,
    var(--site-color-primary) 7%,
    var(--t-bg-primary)
  );
}

.site-page[data-theme="portfolio"] .t-activity-live__summary {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.15rem 1rem;
  cursor: pointer;
  list-style: none;
}

.site-page[data-theme="portfolio"]
  .t-activity-live__summary::-webkit-details-marker {
  display: none;
}

.site-page[data-theme="portfolio"] .t-activity-live__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-page[data-theme="portfolio"] .t-activity-live__meta-spacer {
  flex: 1;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-activity-live__tag {
  flex-shrink: 0;
  padding: 0.2rem 0.45rem;
  font-family: var(--t-font-mono, ui-monospace, monospace);
  font-size: 0.56rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-color-accent);
  background: color-mix(in srgb, var(--site-color-accent) 8%, transparent);
  border: 1px solid
    color-mix(in srgb, var(--site-color-accent) 22%, transparent);
  border-radius: var(--t-radius-sm);
}

.site-page[data-theme="portfolio"] .t-activity-live__tag--repost {
  color: var(--site-color-secondary);
  background: color-mix(in srgb, var(--site-color-secondary) 8%, transparent);
  border-color: color-mix(
    in srgb,
    var(--site-color-secondary) 22%,
    transparent
  );
}

.site-page[data-theme="portfolio"] .t-activity-live__row-meta {
  flex-shrink: 0;
}

.site-page[data-theme="portfolio"] .t-activity-live__time {
  font-family: var(--t-font-mono, ui-monospace, monospace);
  font-size: 0.625rem;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-activity-live__chevron {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--t-text-muted);
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.site-page[data-theme="portfolio"]
  .t-activity-live__row:hover
  .t-activity-live__chevron {
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"]
  .t-activity-live__row[open]
  .t-activity-live__chevron {
  transform: rotate(180deg);
}

.site-page[data-theme="portfolio"] .t-activity-live__excerpt {
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: 1.65;
  color: var(--t-text-muted);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  transition: color 0.2s ease;
}

.site-page[data-theme="portfolio"]
  .t-activity-live__row:hover
  .t-activity-live__excerpt {
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"]
  .t-activity-live__row[open]
  .t-activity-live__excerpt {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-activity-live__extras {
  padding: 0 1rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-page[data-theme="portfolio"] .t-activity-live__thumb {
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-page[data-theme="portfolio"] .t-activity-live__thumb-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 20rem;
  height: auto;
  object-fit: contain;
}

.site-page[data-theme="portfolio"] .t-activity-live__embed {
  padding: 1rem;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-md);
  background: var(--t-bg-elevated);
}

.site-page[data-theme="portfolio"] .t-activity-live__embed-author {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: var(--t-font-weight-semibold);
  line-height: 1.3;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-activity-live__embed-text {
  margin: 0;
  font-size: var(--t-font-size-sm);
  line-height: 1.65;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-activity-live__attribution {
  margin: 0;
  font-size: 0.75rem;
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-activity-live__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-activity-live__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--t-font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-activity-live__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  font-family: var(--t-font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  color: var(--t-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.15s ease;
}

.site-page[data-theme="portfolio"] .t-activity-live__link:hover {
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"]
  .t-section--activity-live-feed
  .t-activity-live__footer {
  margin-top: 1.5rem;
  text-align: center;
}

.site-page[data-theme="portfolio"]
  .t-section--activity-live-feed
  .t-activity-view-all
  a {
  color: var(--t-text-secondary);
  background: transparent;
  border-color: var(--t-border);
}

.site-page[data-theme="portfolio"]
  .t-section--activity-live-feed
  .t-activity-view-all
  a:hover {
  color: var(--site-color-accent);
  border-color: color-mix(in srgb, var(--site-color-accent) 35%, transparent);
}

.site-page[data-theme="portfolio"] .t-activity-live__reveal {
  opacity: 0;
  transform: translateX(-0.75rem);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.site-page[data-theme="portfolio"] .t-activity-live__reveal.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.site-page[data-theme="portfolio"]
  .t-activity-live__row[data-reveal-index="1"].is-visible {
  transition-delay: 0.06s;
}

.site-page[data-theme="portfolio"]
  .t-activity-live__row[data-reveal-index="2"].is-visible {
  transition-delay: 0.12s;
}

.site-page[data-theme="portfolio"]
  .t-activity-live__row[data-reveal-index="3"].is-visible {
  transition-delay: 0.18s;
}

.site-page[data-theme="portfolio"]
  .t-activity-live__row[data-reveal-index="4"].is-visible {
  transition-delay: 0.24s;
}

.site-page[data-theme="portfolio"]
  .t-activity-live__row[data-reveal-index="5"].is-visible {
  transition-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-activity-live__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * activity variant: "activity-gazette"
 * 3-column grid — latest post spans two cells; remaining posts fill one each.
 */

.site-page[data-theme="portfolio"] .t-section--activity-gazette {
  padding-block: clamp(5rem, 10vw, 7.5rem);
  background: var(--t-bg-primary);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-activity-gazette__container {
  max-width: var(--t-max-width);
}

.site-page[data-theme="portfolio"] .t-activity-gazette__masthead {
  margin: 0 0 clamp(2rem, 4.5vw, 3.25rem);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-activity-gazette__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-activity-gazette__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 1.35rem;
  align-items: stretch;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__cell--lead {
  grid-column: span 2;
  grid-row: span 2;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__cell--solo {
  grid-column: 1 / -1;
  grid-row: auto;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__lead {
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__lead-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.85rem;
  margin-bottom: 0.85rem;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__kind {
  font-family: var(--t-font-sans);
  font-size: 0.6875rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-activity-gazette__kind--compact {
  letter-spacing: 0.1em;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__time,
.site-page[data-theme="portfolio"] .t-activity-gazette__brief-time {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-activity-gazette__byline {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-activity-gazette__lead-copy {
  display: flow-root;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__lead-push {
  float: right;
  width: 0;
  height: 4.25em;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__lead-media {
  float: right;
  clear: right;
  width: min(42%, 13.75rem);
  margin: 0.15rem 0 0.55rem 1.15rem;
  overflow: hidden;
  border: 1px solid var(--t-border);
  background: var(--t-bg-muted);
}

.site-page[data-theme="portfolio"] .t-activity-gazette__lead-image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__lead-text {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.55;
  color: var(--t-text-primary);
  max-height: 9.3em;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-line;
  transition: color 0.15s ease;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__quote {
  margin: 1.15rem 0 0;
  padding: 0.85rem 0 0.85rem 1rem;
  border-left: 2px solid var(--site-color-accent);
  background: transparent;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__quote-author {
  margin: 0 0 0.3rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-activity-gazette__quote-text {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  max-height: 6.4em;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__lead-footer {
  margin-top: 1.25rem;
  border-top: 1px solid var(--t-border);
  clear: both;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__lead-link {
  display: block;
  min-width: 0;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__lead-link--static {
  cursor: default;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__lead-link:hover .t-activity-gazette__lead-text,
.site-page[data-theme="portfolio"] .t-activity-gazette__lead-link:focus-visible .t-activity-gazette__lead-text {
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-activity-gazette__lead-link:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 4px;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__brief-link {
  display: block;
  min-width: 0;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__brief-link--static {
  cursor: default;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__brief {
  height: 100%;
  padding: 0 0 0.15rem;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__brief-link:hover .t-activity-gazette__brief-text,
.site-page[data-theme="portfolio"] .t-activity-gazette__brief-link:focus-visible .t-activity-gazette__brief-text {
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-activity-gazette__brief-link:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 4px;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__brief-copy {
  display: flow-root;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__brief-media {
  float: right;
  width: 4.35rem;
  margin: 0.15rem 0 0.4rem 0.8rem;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--t-bg-muted);
  border: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-activity-gazette__brief-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__brief-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.65rem;
  margin-bottom: 0.3rem;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__brief-text {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: 1.5;
  color: var(--t-text-primary);
  max-height: 4.5em;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-line;
  transition: color 0.15s ease;
}

.site-page[data-theme="portfolio"] .t-activity-gazette__footer {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}

@media (max-width: 52rem) {
  .site-page[data-theme="portfolio"] .t-activity-gazette__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-page[data-theme="portfolio"] .t-activity-gazette__cell--lead {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 36rem) {
  .site-page[data-theme="portfolio"] .t-activity-gazette__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
  }

  .site-page[data-theme="portfolio"] .t-activity-gazette__cell--lead {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .site-page[data-theme="portfolio"] .t-activity-gazette__lead-push {
    display: none;
  }

  .site-page[data-theme="portfolio"] .t-activity-gazette__lead-media {
    width: min(46%, 9.5rem);
    margin: 0.1rem 0 0.45rem 0.85rem;
  }

  .site-page[data-theme="portfolio"] .t-activity-gazette__lead-text {
    font-size: var(--t-font-size-base);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-activity-gazette__lead-text,
  .site-page[data-theme="portfolio"] .t-activity-gazette__brief-text {
    transition: none;
  }
}

/*
 * activity variant: "activity-folio"
 * Publication plates — monumental running index, open excerpts, print-like rules.
 */

.site-page[data-theme="portfolio"] .t-section--activity-folio {
  --folio-rule: color-mix(in srgb, var(--site-color-text) 18%, transparent);
  --folio-num: color-mix(in srgb, var(--site-color-text) 22%, var(--site-color-background));
  --folio-spine: var(--site-color-accent);

  padding-block: clamp(5.25rem, 11vw, 8rem);
  background: var(--t-bg-primary);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-activity-folio__container {
  max-width: 58rem;
}

.site-page[data-theme="portfolio"] .t-activity-folio__header {
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--folio-rule);
}

.site-page[data-theme="portfolio"] .t-activity-folio__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-activity-folio__plates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.site-page[data-theme="portfolio"] .t-activity-folio__item {
  margin: 0;
  padding: 0;
}

.site-page[data-theme="portfolio"] .t-activity-folio__plate {
  display: grid;
  grid-template-columns: minmax(3.75rem, 5.25rem) minmax(0, 1fr);
  gap: clamp(0.85rem, 2.5vw, 1.75rem);
  align-items: start;
  padding-block: clamp(1.65rem, 3.4vw, 2.35rem);
  border-bottom: 1px solid var(--folio-rule);
}

.site-page[data-theme="portfolio"] .t-activity-folio__item:first-child .t-activity-folio__plate {
  padding-top: 0;
}

.site-page[data-theme="portfolio"] .t-activity-folio__item:last-child .t-activity-folio__plate {
  border-bottom: 0;
}

.site-page[data-theme="portfolio"] .t-activity-folio__num {
  display: block;
  font-family: var(--t-font-display);
  font-size: clamp(2.35rem, 6vw, 3.75rem);
  font-variant-numeric: tabular-nums;
  font-weight: var(--t-font-weight-normal);
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: var(--folio-num);
  user-select: none;
}

.site-page[data-theme="portfolio"] .t-activity-folio__body {
  min-width: 0;
  padding-left: 1.15rem;
  border-left: 2px solid var(--folio-spine);
}

.site-page[data-theme="portfolio"] .t-activity-folio__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.85rem;
  margin-bottom: 0.55rem;
}

.site-page[data-theme="portfolio"] .t-activity-folio__kind {
  font-family: var(--t-font-sans);
  font-size: 0.6875rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-activity-folio__time {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-activity-folio__text {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-primary);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.site-page[data-theme="portfolio"] .t-activity-folio__expand {
  margin: 0;
}

.site-page[data-theme="portfolio"] .t-activity-folio__toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 0.45rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--t-accent);
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-activity-folio__toggle-more,
.site-page[data-theme="portfolio"] .t-activity-folio__toggle-less {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.site-page[data-theme="portfolio"] .t-activity-folio__toggle-more[hidden],
.site-page[data-theme="portfolio"] .t-activity-folio__toggle-less[hidden] {
  display: none !important;
}

.site-page[data-theme="portfolio"] .t-activity-folio__toggle-icon {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
}

.site-page[data-theme="portfolio"] .t-activity-folio__toggle-icon--up {
  transform: rotate(180deg);
}

.site-page[data-theme="portfolio"] .t-activity-folio__toggle:hover,
.site-page[data-theme="portfolio"] .t-activity-folio__toggle:focus-visible {
  color: var(--t-accent-hover);
}

.site-page[data-theme="portfolio"] .t-activity-folio__quote {
  margin: 0.9rem 0 0;
  padding: 0.75rem 0 0.15rem;
  border: 0;
  border-top: 1px dashed var(--t-border-strong);
}

.site-page[data-theme="portfolio"] .t-activity-folio__quote-author {
  margin: 0 0 0.25rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-activity-folio__quote-text {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.site-page[data-theme="portfolio"] .t-activity-folio__media {
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid var(--t-border);
  background: var(--t-bg-muted);
}

.site-page[data-theme="portfolio"] .t-activity-folio__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.site-page[data-theme="portfolio"] .t-activity-folio__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.95rem;
}

.site-page[data-theme="portfolio"] .t-activity-folio__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  color: var(--t-text-muted);
  text-decoration: none;
}

.site-page[data-theme="portfolio"] .t-activity-folio__open:hover,
.site-page[data-theme="portfolio"] .t-activity-folio__open:focus-visible {
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-activity-folio__more {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}

@media (max-width: 40rem) {
  .site-page[data-theme="portfolio"] .t-activity-folio__plate {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
  }

  .site-page[data-theme="portfolio"] .t-activity-folio__num {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
  }

  .site-page[data-theme="portfolio"] .t-activity-folio__body {
    padding-left: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-activity-folio__open {
    transition: none;
  }
}

/*
 * activity variant: "activity-vitrine"
 * One grid — latest post spans the first row; remaining posts fill 2×2
 * with top-left media and wrapping copy.
 */

.site-page[data-theme="portfolio"] .t-section--activity-vitrine {
  padding-block: clamp(5rem, 10vw, 7.5rem);
  background: var(--t-bg-primary);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__container {
  max-width: min(var(--t-max-width), 68rem);
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__header {
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.75rem;
  row-gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__cell {
  min-width: 0;
  margin: 0;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__cell--lead {
  grid-column: 1 / -1;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__feature-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.25rem);
  align-items: start;
  min-width: 0;
  width: 100%;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__object {
  min-width: 0;
  max-height: 20rem;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 20rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: var(--t-bg-muted);
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__copy {
  min-width: 0;
  min-height: 0;
  width: 100%;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__feature--type .t-activity-vitrine__expand {
  max-width: min(56rem, 100%);
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__excerpt {
  margin: 0;
  max-width: min(56rem, 100%);
  max-height: 7.2em;
  overflow: hidden;
  font-family: var(--t-font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: 1.2;
  color: var(--t-text-primary);
  overflow-wrap: anywhere;
  white-space: pre-line;
  transition: color 0.15s ease;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__kind {
  font-family: var(--t-font-sans);
  font-size: 0.6875rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__time {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__text {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: 1.6;
  color: var(--t-text-primary);
  max-height: 12.8em;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-line;
  transition: color 0.15s ease;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__quote {
  margin: 0.7rem 0 0;
  padding: 0 0 0 0.85rem;
  border: 0;
  border-left: 1px solid var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__quote-author {
  margin: 0 0 0.25rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__quote-text {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  overflow-wrap: anywhere;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__expand {
  margin: 0;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__feature [data-activity-full]:not([hidden]) {
  max-height: none;
  overflow: visible;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__toggle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  margin-top: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--t-accent);
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__toggle-more,
.site-page[data-theme="portfolio"] .t-activity-vitrine__toggle-less {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__toggle-more[hidden],
.site-page[data-theme="portfolio"] .t-activity-vitrine__toggle-less[hidden] {
  display: none !important;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__toggle-icon {
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__toggle-icon--up {
  transform: rotate(180deg);
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__toggle:hover,
.site-page[data-theme="portfolio"] .t-activity-vitrine__toggle:focus-visible {
  color: var(--t-accent-hover);
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__card .t-activity-vitrine__toggle {
  clear: both;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__card-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__feature:has(.t-activity-vitrine__card-link:hover) .t-activity-vitrine__excerpt,
.site-page[data-theme="portfolio"] .t-activity-vitrine__feature:has(.t-activity-vitrine__card-link:hover) .t-activity-vitrine__text,
.site-page[data-theme="portfolio"] .t-activity-vitrine__card:has(.t-activity-vitrine__card-link:hover) .t-activity-vitrine__card-text {
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__card-link:focus-visible {
  outline: 1px solid var(--site-color-primary);
  outline-offset: 4px;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__card {
  position: relative;
  height: 100%;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__card .t-activity-vitrine__meta {
  margin-bottom: 0.45rem;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__card-body {
  display: flow-root;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__card-media {
  float: left;
  width: 5.75rem;
  margin: 0.1rem 0.9rem 0.45rem 0;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--t-bg-muted);
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__card-text {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: 1.55;
  color: var(--t-text-primary);
  overflow-wrap: anywhere;
  white-space: pre-line;
  transition: color 0.15s ease;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__card .t-activity-vitrine__quote {
  margin-top: 0.7rem;
  clear: both;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__card .t-activity-vitrine__quote-text {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.site-page[data-theme="portfolio"] .t-activity-vitrine__more {
  margin-top: clamp(2rem, 4.5vw, 3rem);
  text-align: center;
}

@media (max-width: 36rem) {
  .site-page[data-theme="portfolio"] .t-activity-vitrine__grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1.35rem;
    row-gap: 2rem;
  }

  .site-page[data-theme="portfolio"] .t-activity-vitrine__card-media {
    width: 4.75rem;
    margin-right: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-activity-vitrine__excerpt,
  .site-page[data-theme="portfolio"] .t-activity-vitrine__text,
  .site-page[data-theme="portfolio"] .t-activity-vitrine__card-text {
    transition: none;
  }
}

/*
 * activity variant: "activity-reel"
 * Album stills on a 3→2→1 grid (same 52rem / 36rem steps as gazette). No sprocket rails.
 * 21st: Cinematic List (daiwiikharihar), Gallery Grid with Captions (ln-dev7).
 * Colors: only --site-color-* / on-tokens. No index numbers.
 */

.site-page[data-theme="portfolio"] .t-section--activity-reel {
  padding-block: clamp(4.75rem, 10vw, 7.5rem);
  background: var(--site-color-background);
  color: var(--site-color-text);
}

.site-page[data-theme="portfolio"] .t-activity-reel__container {
  max-width: var(--t-max-width);
}

.site-page[data-theme="portfolio"] .t-activity-reel__header {
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
  text-align: center;
}

.site-page[data-theme="portfolio"] .t-activity-reel__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--site-color-text);
}

.site-page[data-theme="portfolio"] .t-activity-reel__strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 1.5rem;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

.site-page[data-theme="portfolio"] .t-activity-reel__frame {
  margin: 0;
  min-width: 0;
  display: flex;
}

.site-page[data-theme="portfolio"] .t-activity-reel__still {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--site-color-background);
  border: 1px solid var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-activity-reel__corner {
  position: absolute;
  z-index: 1;
  width: 1.15rem;
  height: 1.15rem;
  pointer-events: none;
  border-color: var(--site-color-accent);
  border-style: solid;
}

.site-page[data-theme="portfolio"] .t-activity-reel__corner--tl {
  top: -1px;
  left: -1px;
  border-width: 3px 0 0 3px;
}

.site-page[data-theme="portfolio"] .t-activity-reel__corner--tr {
  top: -1px;
  right: -1px;
  border-width: 3px 3px 0 0;
}

.site-page[data-theme="portfolio"] .t-activity-reel__corner--bl {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 3px 3px;
}

.site-page[data-theme="portfolio"] .t-activity-reel__corner--br {
  bottom: -1px;
  right: -1px;
  border-width: 0 3px 3px 0;
}

.site-page[data-theme="portfolio"] .t-activity-reel__slate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.75rem 1.15rem 0.45rem;
}

.site-page[data-theme="portfolio"] .t-activity-reel__time {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  color: var(--site-color-text);
}

.site-page[data-theme="portfolio"] .t-activity-reel__open {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
  color: var(--site-color-accent);
  text-decoration: none;
}

.site-page[data-theme="portfolio"] .t-activity-reel__open:hover,
.site-page[data-theme="portfolio"] .t-activity-reel__open:focus-visible {
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-activity-reel__picture {
  margin: 0;
  padding: 0 1.15rem;
}

.site-page[data-theme="portfolio"] .t-activity-reel__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--site-color-secondary);
}

.site-page[data-theme="portfolio"] .t-activity-reel__copy {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.7rem 1.15rem 1.1rem;
}

.site-page[data-theme="portfolio"] .t-activity-reel__text {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: 1.55;
  color: var(--site-color-text);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.site-page[data-theme="portfolio"] .t-activity-reel__toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 0.4rem;
  padding: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--site-color-accent);
  background: none;
  border: 0;
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-activity-reel__toggle-more,
.site-page[data-theme="portfolio"] .t-activity-reel__toggle-less {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.site-page[data-theme="portfolio"] .t-activity-reel__toggle-more[hidden],
.site-page[data-theme="portfolio"] .t-activity-reel__toggle-less[hidden] {
  display: none !important;
}

.site-page[data-theme="portfolio"] .t-activity-reel__toggle-icon {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
}

.site-page[data-theme="portfolio"] .t-activity-reel__toggle-icon--up {
  transform: rotate(180deg);
}

.site-page[data-theme="portfolio"] .t-activity-reel__toggle:hover,
.site-page[data-theme="portfolio"] .t-activity-reel__toggle:focus-visible {
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-activity-reel__quote {
  margin: 0.75rem 0 0;
  padding: 0 0 0 0.8rem;
  border-left: 2px solid var(--site-color-accent);
  text-align: start;
}

.site-page[data-theme="portfolio"] .t-activity-reel__quote-author,
.site-page[data-theme="portfolio"] .t-activity-reel__quote-text {
  margin: 0;
  font-family: var(--t-font-sans);
  color: var(--site-color-text);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.site-page[data-theme="portfolio"] .t-activity-reel__quote-author {
  margin-bottom: 0.2rem;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
}

.site-page[data-theme="portfolio"] .t-activity-reel__quote-text {
  font-size: var(--t-font-size-xs);
  line-height: 1.45;
}

.site-page[data-theme="portfolio"] .t-activity-reel__more {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}

@media (max-width: 52rem) {
  .site-page[data-theme="portfolio"] .t-activity-reel__strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 36rem) {
  .site-page[data-theme="portfolio"] .t-activity-reel__strip {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.35rem;
  }

  .site-page[data-theme="portfolio"] .t-activity-reel__frame:nth-child(n + 4) {
    display: none;
  }
}

/*
 * activity variant: "activity-deck"
 * Sticky stacking deck with bookmark tabs and polaroid media.
 * 21st: Stacking Cards (danielpetho), Feature Polaroid (ravikatiyar162),
 * Tabs like bookmark (k3menn).
 * Colors: only --site-color-* / on-tokens. White faces. No index numbers.
 */

.site-page[data-theme="portfolio"] .t-section--activity-deck {
  padding-block: clamp(4.75rem, 10vw, 7.5rem);
  background: var(--site-color-background);
  color: var(--site-color-text);
}

.site-page[data-theme="portfolio"] .t-activity-deck__container {
  max-width: min(var(--t-max-width), 42rem);
}

.site-page[data-theme="portfolio"] .t-activity-deck__header {
  margin-bottom: clamp(1.75rem, 4.5vw, 2.5rem);
}

.site-page[data-theme="portfolio"] .t-activity-deck__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--site-color-text);
}

.site-page[data-theme="portfolio"] .t-activity-deck__pile {
  list-style: none;
  margin: 0;
  padding: 0.7rem 0.55rem 0.55rem 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.site-page[data-theme="portfolio"] .t-activity-deck__item {
  position: sticky;
  top: calc(var(--t-header-offset) + (var(--deck-i, 0) * 0.55rem));
  z-index: calc(1 + var(--deck-i, 0));
  margin: 0;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-activity-deck__item + .t-activity-deck__item {
  margin-top: -1.15rem;
}

.site-page[data-theme="portfolio"] .t-activity-deck__card {
  position: relative;
  min-width: 0;
  padding: 1.35rem 1.1rem 2.4rem;
  background: var(--site-color-background);
  border: 1px solid var(--site-color-primary);
  box-shadow: 0.4rem 0.4rem 0 var(--site-color-primary);
  transform: rotate(calc((var(--deck-i, 0) % 2 - 0.5) * 1.15deg));
  transform-origin: top center;
}

.site-page[data-theme="portfolio"] .t-activity-deck__tab {
  position: absolute;
  top: -0.7rem;
  left: 0.9rem;
  padding: 0.18rem 0.55rem 0.22rem;
  font-family: var(--t-font-sans);
  font-size: 0.625rem;
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-on-accent);
  background: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-activity-deck__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}

.site-page[data-theme="portfolio"] .t-activity-deck__time {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  color: var(--site-color-text);
}

.site-page[data-theme="portfolio"] .t-activity-deck__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.site-page[data-theme="portfolio"] .t-activity-deck__copy {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-activity-deck__text {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: 1.55;
  color: var(--site-color-text);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.site-page[data-theme="portfolio"] .t-activity-deck__toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 0.4rem;
  padding: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.04em;
  color: var(--site-color-accent);
  background: none;
  border: 0;
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-activity-deck__toggle-more,
.site-page[data-theme="portfolio"] .t-activity-deck__toggle-less {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.site-page[data-theme="portfolio"] .t-activity-deck__toggle-more[hidden],
.site-page[data-theme="portfolio"] .t-activity-deck__toggle-less[hidden] {
  display: none !important;
}

.site-page[data-theme="portfolio"] .t-activity-deck__toggle-icon {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
}

.site-page[data-theme="portfolio"] .t-activity-deck__toggle-icon--up {
  transform: rotate(180deg);
}

.site-page[data-theme="portfolio"] .t-activity-deck__toggle:hover,
.site-page[data-theme="portfolio"] .t-activity-deck__toggle:focus-visible {
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-activity-deck__quote {
  margin: 0.75rem 0 0;
  padding: 0 0 0 0.8rem;
  border-left: 2px solid var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-activity-deck__quote-author,
.site-page[data-theme="portfolio"] .t-activity-deck__quote-text {
  margin: 0;
  font-family: var(--t-font-sans);
  color: var(--site-color-text);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.site-page[data-theme="portfolio"] .t-activity-deck__quote-author {
  margin-bottom: 0.2rem;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
}

.site-page[data-theme="portfolio"] .t-activity-deck__quote-text {
  font-size: var(--t-font-size-xs);
  line-height: 1.45;
}

.site-page[data-theme="portfolio"] .t-activity-deck__polaroid {
  margin: 0 auto;
  width: min(9.5rem, 42%);
  padding: 0.4rem 0.4rem 0.85rem;
  background: var(--site-color-background);
  border: 1px solid var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-activity-deck__polaroid-image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--site-color-secondary);
}

.site-page[data-theme="portfolio"] .t-activity-deck__open {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
  color: var(--site-color-accent);
  text-decoration: none;
}

.site-page[data-theme="portfolio"] .t-activity-deck__open:hover,
.site-page[data-theme="portfolio"] .t-activity-deck__open:focus-visible {
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-activity-deck__more {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}

@media (min-width: 40rem) {
  .site-page[data-theme="portfolio"] .t-activity-deck__layout:not(.t-activity-deck__layout--type) {
    grid-template-columns: minmax(0, 1fr) 8.5rem;
    gap: 1.1rem;
  }

  .site-page[data-theme="portfolio"] .t-activity-deck__polaroid {
    margin: 0.15rem 0 0 auto;
    width: 8.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-activity-deck__item {
    position: static;
  }

  .site-page[data-theme="portfolio"] .t-activity-deck__item + .t-activity-deck__item {
    margin-top: 0.85rem;
  }

  .site-page[data-theme="portfolio"] .t-activity-deck__card {
    transform: none;
  }
}

/* Testimonials — stacked cards */

.t-section--testimonials {
  background: var(--t-bg-primary);
  padding-bottom: calc(var(--t-section-padding-y) + 3rem);
}

.t-testimonials-header {
  margin-bottom: 3rem;
  text-align: center;
}

.t-testimonials-header__title {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: 1.05;
  color: var(--t-text-primary);
}

.t-testimonials-header__lead {
  font-weight: var(--t-font-weight-normal);
}

.t-testimonials-header__accent {
  margin-left: 0.2em;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: var(--t-font-weight-normal);
  color: var(--t-text-secondary);
}

.t-testimonials-stack-wrap {
  max-width: 32rem;
  margin-inline: auto;
}

.t-testimonial-stack {
  position: relative;
  display: block;
  width: 100%;
  min-height: 18rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.t-testimonial-stack:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 6px;
  border-radius: var(--t-radius-md);
}

.t-testimonial-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.65rem 1.75rem 1.5rem;
  background: var(--t-bg-elevated);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  box-shadow: 0 12px 40px rgb(0 0 0 / 8%);
  transition:
    transform 0.4s ease,
    opacity 0.35s ease;
  transform-origin: center center;
}

.t-testimonial-card__quote {
  display: block;
  width: 1.35rem;
  height: auto;
  margin-bottom: 0.85rem;
  opacity: 0.55;
  flex-shrink: 0;
}

.t-testimonial-card__text {
  flex: 1;
  margin: 0;
  font-size: var(--t-font-size-base);
  font-style: italic;
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.t-testimonial-card__footer {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--t-border);
  font-style: normal;
}

.t-testimonial-card__name {
  display: block;
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  font-style: normal;
  color: var(--t-text-primary);
}

.t-testimonial-card__role {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
}

.t-testimonial-card__relation {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
}

.t-testimonial-card[data-testimonial-depth="0"] {
  z-index: 3;
  transform: rotate(0deg) translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.t-testimonial-card[data-testimonial-depth="1"] {
  z-index: 2;
  transform: rotate(7deg) translateX(12px) translateY(6px);
  opacity: 0.92;
  pointer-events: none;
}

.t-testimonial-card[data-testimonial-depth="2"] {
  z-index: 1;
  transform: rotate(14deg) translateX(22px) translateY(10px);
  opacity: 0.85;
  pointer-events: none;
}

.t-testimonial-card[data-testimonial-depth="3"],
.t-testimonial-card[data-testimonial-depth="4"] {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transform: rotate(18deg) translateX(28px);
}

@media (min-width: 900px) {
  .t-testimonials-stack-wrap {
    max-width: 36rem;
  }

  .t-testimonial-stack {
    min-height: 19rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-testimonial-card {
    transition: none;
  }
}

/* InfoRow — experience, awards, education list items */

.t-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.t-info-list--timeline .t-info-row {
  position: relative;
  padding-left: 1.5rem;
  border-bottom: none;
  padding-bottom: 1.75rem;
}

.t-info-list--timeline .t-info-row::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.5rem;
  bottom: -0.25rem;
  width: 1px;
  background: var(--t-border-strong);
}

.t-info-list--timeline .t-info-row:last-child::before {
  display: none;
}

.t-info-list--timeline .t-info-row::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--t-bg-elevated);
  border: 2px solid var(--t-accent);
}

.t-info-row {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--t-border);
}

.t-info-row:first-child {
  padding-top: 0;
}

.t-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.t-info-list--timeline .t-info-row:first-child {
  padding-top: 0;
}

.t-info-list--timeline .t-info-row:last-child {
  padding-bottom: 0;
}

.t-info-row__icon {
  width: var(--t-info-row-icon-size);
  height: var(--t-info-row-icon-size);
  border-radius: var(--t-radius-sm);
  background: var(--t-bg-elevated);
  border: 1px solid var(--t-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-bold);
  color: var(--t-text-secondary);
}

.t-info-list--timeline .t-info-row__icon {
  display: none;
}

.t-info-row__body {
  flex: 1;
  min-width: 0;
}

.t-info-row__title {
  margin: 0 0 0.2rem;
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-semibold);
  color: var(--t-text-primary);
  line-height: var(--t-line-height-tight);
}

.t-info-row__title a {
  color: inherit;
  text-decoration: none;
}

.t-info-row__title a:hover {
  color: var(--t-accent);
}

.t-info-row__subtitle {
  margin: 0 0 0.25rem;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-secondary);
  font-weight: var(--t-font-weight-medium);
}

.t-info-row__meta {
  margin: 0;
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
}

.t-info-row__desc {
  margin: 0.625rem 0 0;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-secondary);
  line-height: var(--t-line-height-relaxed);
}

.t-column-heading {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-lg);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: var(--t-letter-spacing-tight);
  margin: 0 0 1.25rem;
  color: var(--t-text-primary);
}

.t-aside-block {
  background: var(--t-bg-elevated);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  padding: 1.5rem;
}

.t-aside-block .t-column-heading {
  font-size: var(--t-font-size-base);
  margin-bottom: 1rem;
}

.t-aside-block .t-info-row {
  padding: 0.875rem 0;
}

.t-aside-block .t-info-row__icon {
  width: 2rem;
  height: 2rem;
  font-size: 0.65rem;
}

.t-experience-aside {
  display: flex;
  flex-direction: column;
  gap: var(--t-gap-lg);
}

.t-edu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.t-edu-item {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--t-border);
}

.t-edu-item:first-child {
  padding-top: 0;
}

.t-edu-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.t-edu-item__school {
  margin: 0 0 0.2rem;
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  color: var(--t-text-primary);
}

.t-edu-item__detail {
  margin: 0 0 0.2rem;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-secondary);
  line-height: var(--t-line-height-normal);
}

.t-edu-item__dates {
  margin: 0;
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
}

.t-grid-2--single {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .t-grid-2--single .t-experience-aside {
    max-width: 22rem;
  }
}

/* Card — featured works, projects */

.t-card-grid {
  display: grid;
  gap: var(--t-gap-lg);
}

@media (min-width: 640px) {
  .t-card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.t-project-card {
  background: var(--t-bg-elevated);
  border-radius: var(--t-radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--t-border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.t-project-card:hover {
  border-color: var(--t-border-strong);
  box-shadow: var(--t-shadow-sm);
}

.t-project-card__visual {
  display: none;
}

.t-project-card__tag {
  display: inline-block;
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--t-accent);
}

.t-project-card__title {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xl);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
}

.t-project-card__title a {
  color: inherit;
  text-decoration: none;
}

.t-project-card__title a:hover {
  color: var(--t-accent);
}

.t-project-card__date {
  margin: 0;
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
}

.t-project-card__desc {
  margin: 0;
  color: var(--t-text-secondary);
  line-height: var(--t-line-height-relaxed);
  font-size: var(--t-font-size-sm);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.t-project-card__link {
  margin-top: 0.25rem;
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  color: var(--t-accent);
  text-decoration: none;
  align-self: flex-start;
}

.t-project-card__link:hover {
  text-decoration: underline;
}

.t-project-card__link::after {
  content: " →";
}

/* Stats grid */

.t-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  overflow: hidden;
  background: var(--t-bg-elevated);
}

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

.t-stat {
  padding: 2rem 1.5rem;
  text-align: center;
  border-right: 1px solid var(--t-border);
  border-bottom: 1px solid var(--t-border);
}

.t-stat:nth-child(2n) {
  border-right: none;
}

@media (min-width: 640px) {
  .t-stat {
    border-bottom: none;
  }

  .t-stat:nth-child(2n) {
    border-right: 1px solid var(--t-border);
  }

  .t-stat:last-child {
    border-right: none;
  }
}

@media (max-width: 639px) {
  .t-stat:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

.t-stat__value {
  display: block;
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: var(--t-letter-spacing-tight);
  margin-bottom: 0.35rem;
  color: var(--t-text-primary);
}

.t-stat__label {
  font-size: var(--t-font-size-sm);
  color: var(--t-text-secondary);
}

/* Testimonials / recommendations */

.t-quote-list {
  display: grid;
  gap: var(--t-gap-lg);
  max-width: 48rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .t-quote-list--grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }
}

.t-quote {
  margin: 0;
  padding: 0;
  border: none;
}

.t-quote-list .t-quote {
  text-align: left;
  background: var(--t-bg-elevated);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.t-quote__text {
  margin: 0 0 1rem;
  font-size: var(--t-font-size-base);
  font-style: normal;
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  flex: 1;
}

.t-quote__text::before {
  content: "\201C";
  font-family: var(--t-font-sans);
  font-size: 2rem;
  font-weight: var(--t-font-weight-bold);
  line-height: 0;
  color: var(--t-accent);
  display: block;
  margin-bottom: 0.5rem;
}

.t-quote__footer {
  font-size: var(--t-font-size-sm);
  color: var(--t-text-primary);
  font-style: normal;
  font-weight: var(--t-font-weight-semibold);
}

.t-quote__role {
  display: block;
  font-weight: var(--t-font-weight-normal);
  color: var(--t-text-muted);
  margin-top: 0.15rem;
}

/* Skill tags on experience roles */

.t-skill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
}

.t-skill-tag {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--t-radius-sm);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-secondary);
  background: var(--t-bg-elevated);
  border: 1px solid var(--t-border);
  line-height: 1.4;
}

/* cta variant: "cta-beacon" */

.site-page[data-theme="portfolio"] .t-cta {
  text-align: center;
  padding: clamp(5.5rem, 12vw, 8.5rem) var(--t-section-padding-x);
  background: var(--t-bg-secondary);
  border-top: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-cta__actions {
  justify-content: center;
}

.site-page[data-theme="portfolio"] .t-cta__title {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-bold);
  letter-spacing: var(--t-letter-spacing-tight);
  margin: 0 0 0.75rem;
  line-height: var(--t-line-height-tight);
}

.site-page[data-theme="portfolio"] .t-cta__lead {
  margin: 0 auto 1.75rem;
  max-width: 40rem;
  color: var(--t-text-secondary);
  font-size: var(--t-font-size-lg);
  line-height: var(--t-line-height-relaxed);
}

.site-page[data-theme="portfolio"] .t-cta__meta {
  margin-top: 1.25rem;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-muted);
}

/*
 * cta variant: "cta-pop"
 * Neo-brutalist split layout with dot grid, ghost watermark, and bold contact cards.
 */
.site-page[data-theme="portfolio"] .t-section--cta-pop {
  --cta-pop-shadow: var(--t-text-primary);

  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(24rem, 58vh, 34rem);
  padding: clamp(5rem, 11vw, 7.5rem) clamp(1.5rem, 5vw, 2rem);
  overflow: hidden;
  background: var(--t-bg-primary);
  border-top: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-cta-pop__dots {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--t-text-primary) 14%, transparent) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-cta-pop__ghost {
  position: absolute;
  right: 0;
  bottom: -0.5rem;
  z-index: 0;
  font-family: var(--t-font-display);
  font-size: clamp(5rem, 22vw, 14rem);
  font-weight: var(--t-font-weight-bold);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--t-text-primary) 7%, transparent);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.site-page[data-theme="portfolio"] .t-cta-pop__inner {
  position: relative;
  z-index: 1;
  width: min(100%, var(--t-max-width));
  margin-inline: auto;
}

.site-page[data-theme="portfolio"] .t-cta-pop__badge {
  margin-bottom: 2.5rem;
}

.site-page[data-theme="portfolio"] .t-cta-pop__badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--site-color-primary);
  border-radius: var(--t-radius-pill);
  background: transparent;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-bold);
  color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-cta-pop__badge-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--cta-icon);
  mask-image: var(--cta-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-cta-pop__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 3rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-cta-pop__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 5vw, 4rem);
  }
}

.site-page[data-theme="portfolio"] .t-cta-pop__copy {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.site-page[data-theme="portfolio"] .t-cta-pop__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-bold);
  line-height: 0.95;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-pop__lead {
  margin: 0;
  max-width: 28rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-cta-pop__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-page[data-theme="portfolio"] .t-cta-pop__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  border: 2px solid var(--t-text-primary);
  border-radius: 1.5rem;
  background: var(--t-bg-primary);
  color: var(--t-text-primary);
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--cta-pop-shadow);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.site-page[data-theme="portfolio"] .t-cta-pop__card-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-cta-pop__card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 1rem;
  background: var(--t-bg-muted);
}

.site-page[data-theme="portfolio"] .t-cta-pop__card-icon-wrap--mail {
  background: color-mix(in srgb, var(--t-text-primary) 22%, var(--site-color-primary));
}

.site-page[data-theme="portfolio"] .t-cta-pop__card-icon-wrap--linkedin {
  background: #0077b5;
}

.site-page[data-theme="portfolio"] .t-cta-pop__card-icon-wrap--linkedin .t-cta-pop__card-icon {
  background-color: var(--t-text-inverse);
}

.site-page[data-theme="portfolio"] .t-cta-pop__card-icon {
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--t-text-primary);
  -webkit-mask-image: var(--cta-icon);
  mask-image: var(--cta-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-cta-pop__card-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-cta-pop__card-label {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  font-weight: var(--t-font-weight-bold);
}

.site-page[data-theme="portfolio"] .t-cta-pop__card-meta {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-page[data-theme="portfolio"] .t-cta-pop__card-arrow {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background-color: var(--t-text-primary);
  -webkit-mask-image: var(--cta-icon);
  mask-image: var(--cta-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform 0.3s ease;
}

.site-page[data-theme="portfolio"] .t-cta-pop__card-arrow--dark {
  background-color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-pop__card--mail {
  background: var(--site-color-primary);
  border-color: var(--t-text-primary);
  color: var(--site-on-primary);
}

.site-page[data-theme="portfolio"] .t-cta-pop__card--mail .t-cta-pop__card-meta {
  color: color-mix(in srgb, var(--site-on-primary) 72%, transparent);
}

.site-page[data-theme="portfolio"] .t-cta-pop__card--mail .t-cta-pop__card-icon,
.site-page[data-theme="portfolio"] .t-cta-pop__card--mail .t-cta-pop__card-arrow {
  background-color: currentColor;
}

.site-page[data-theme="portfolio"] .t-cta-pop__card--linkedin {
  background: var(--t-bg-primary);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-pop__card--linkedin .t-cta-pop__card-meta {
  color: var(--t-text-muted);
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-cta-pop__card:hover,
  .site-page[data-theme="portfolio"] .t-cta-pop__card:focus-visible {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 var(--cta-pop-shadow);
  }

  .site-page[data-theme="portfolio"] .t-cta-pop__card:hover .t-cta-pop__card-arrow,
  .site-page[data-theme="portfolio"] .t-cta-pop__card:focus-visible .t-cta-pop__card-arrow {
    transform: translate(0.125rem, -0.125rem);
  }

  .site-page[data-theme="portfolio"] .t-cta-pop__card--linkedin:hover,
  .site-page[data-theme="portfolio"] .t-cta-pop__card--linkedin:focus-visible {
    box-shadow: 6px 6px 0 var(--site-color-accent);
  }
}

.site-page[data-theme="portfolio"] .t-cta-pop__reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"] .t-section--cta-pop.is-visible .t-cta-pop__reveal {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-cta-pop__card {
    transition: none;
  }

  .site-page[data-theme="portfolio"] .t-cta-pop__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * cta variant: "cta-split"
 * Secondary-stripe split layout with status badge and contact panels.
 */
.site-page[data-theme="portfolio"] .t-section--cta-split {
  --cta-split-mono:
    ui-monospace, "Cascadia Code", "SF Mono", "Fira Code", Menlo, monospace;

  position: relative;
  padding: clamp(9rem, 20vw, 14rem) clamp(2rem, 7vw, 5rem);
  overflow: hidden;
  background: var(--t-bg-secondary);
  color: var(--t-text-primary);
  border-top: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-cta-split__grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--t-text-primary) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--t-text-primary) 6%, transparent) 1px, transparent 1px);
  background-size: 5rem 5rem;
}

.site-page[data-theme="portfolio"] .t-cta-split__inner {
  position: relative;
  z-index: 1;
  width: min(100%, var(--t-max-width));
  margin-inline: auto;
}

.site-page[data-theme="portfolio"] .t-cta-split__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 2.75rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-cta-split__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5rem);
  }
}

.site-page[data-theme="portfolio"] .t-cta-split__copy {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  text-align: left;
}

.site-page[data-theme="portfolio"] .t-cta-split__role {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.site-page[data-theme="portfolio"] .t-cta-split__role-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-cta-split__role-text {
  font-family: var(--cta-split-mono);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-cta-split__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.1;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-split__lead {
  margin: 0;
  max-width: 36rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: 1.85;
  color: var(--t-text-secondary);
  text-align: left;
}

.site-page[data-theme="portfolio"] .t-cta-split__panels {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.site-page[data-theme="portfolio"] .t-cta-split__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--t-border-strong);
  text-decoration: none;
  background: color-mix(in srgb, var(--t-bg-primary) 42%, transparent);
  transition:
    border-color 0.4s ease,
    background-color 0.4s ease,
    color 0.3s ease;
}

.site-page[data-theme="portfolio"] .t-cta-split__panel-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-cta-split__panel-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border: 1px solid var(--t-border-strong);
  transition: border-color 0.4s ease;
}

.site-page[data-theme="portfolio"] .t-cta-split__panel-icon {
  width: 1rem;
  height: 1rem;
  background-color: var(--t-text-muted);
  -webkit-mask-image: var(--cta-icon);
  mask-image: var(--cta-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.4s ease;
}

.site-page[data-theme="portfolio"] .t-cta-split__panel-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-cta-split__panel-label {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-normal);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-split__panel-meta {
  font-family: var(--cta-split-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--t-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-page[data-theme="portfolio"] .t-cta-split__panel-arrow {
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--t-text-muted);
  transition: color 0.3s ease;
}

@keyframes t-cta-split-arrow-sway {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(0.2rem);
  }

  75% {
    transform: translateX(-0.2rem);
  }
}

.site-page[data-theme="portfolio"] .t-cta-split__panel--secondary {
  background: var(--t-bg-primary);
}

.site-page[data-theme="portfolio"] .t-cta-split__panel--secondary .t-cta-split__panel-label {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-split__panel--secondary .t-cta-split__panel-meta {
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-cta-split__panel--secondary .t-cta-split__panel-icon {
  background-color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-split__panel--secondary .t-cta-split__panel-arrow {
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-cta-split__panel--primary {
  background: var(--site-color-primary);
  border-color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-cta-split__panel--primary .t-cta-split__panel-label {
  color: var(--site-on-primary);
}

.site-page[data-theme="portfolio"] .t-cta-split__panel--primary .t-cta-split__panel-meta {
  color: color-mix(in srgb, var(--site-on-primary) 72%, transparent);
}

.site-page[data-theme="portfolio"] .t-cta-split__panel--primary .t-cta-split__panel-icon-wrap {
  border-color: color-mix(in srgb, var(--site-on-primary) 28%, transparent);
}

.site-page[data-theme="portfolio"] .t-cta-split__panel--primary .t-cta-split__panel-icon {
  background-color: var(--site-on-primary);
}

.site-page[data-theme="portfolio"] .t-cta-split__panel--primary .t-cta-split__panel-arrow {
  color: color-mix(in srgb, var(--site-on-primary) 72%, transparent);
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-cta-split__panel--primary:hover,
  .site-page[data-theme="portfolio"] .t-cta-split__panel--primary:focus-visible {
    border-color: var(--t-accent-hover);
    background: var(--t-accent-hover);
  }

  .site-page[data-theme="portfolio"] .t-cta-split__panel--primary:hover .t-cta-split__panel-icon-wrap,
  .site-page[data-theme="portfolio"] .t-cta-split__panel--primary:focus-visible .t-cta-split__panel-icon-wrap {
    border-color: color-mix(in srgb, var(--site-on-primary) 40%, transparent);
  }

  .site-page[data-theme="portfolio"] .t-cta-split__panel--primary:hover .t-cta-split__panel-icon,
  .site-page[data-theme="portfolio"] .t-cta-split__panel--primary:focus-visible .t-cta-split__panel-icon {
    background-color: var(--site-on-primary);
  }

  .site-page[data-theme="portfolio"] .t-cta-split__panel--primary:hover .t-cta-split__panel-arrow,
  .site-page[data-theme="portfolio"] .t-cta-split__panel--primary:focus-visible .t-cta-split__panel-arrow {
    color: var(--site-on-primary);
    transform: translate(0.125rem, -0.125rem);
  }

  .site-page[data-theme="portfolio"] .t-cta-split__panel--secondary:hover,
  .site-page[data-theme="portfolio"] .t-cta-split__panel--secondary:focus-visible {
    border-color: var(--t-text-primary);
    background: var(--t-bg-primary);
  }

  .site-page[data-theme="portfolio"] .t-cta-split__panel--secondary:hover .t-cta-split__panel-icon-wrap,
  .site-page[data-theme="portfolio"] .t-cta-split__panel--secondary:focus-visible .t-cta-split__panel-icon-wrap {
    border-color: var(--t-text-primary);
  }

  .site-page[data-theme="portfolio"] .t-cta-split__panel--secondary:hover .t-cta-split__panel-icon,
  .site-page[data-theme="portfolio"] .t-cta-split__panel--secondary:focus-visible .t-cta-split__panel-icon {
    background-color: var(--t-text-primary);
  }

  .site-page[data-theme="portfolio"] .t-cta-split__panel--secondary:hover .t-cta-split__panel-arrow,
  .site-page[data-theme="portfolio"] .t-cta-split__panel--secondary:focus-visible .t-cta-split__panel-arrow {
    color: var(--t-text-primary);
    animation: t-cta-split-arrow-sway 1.5s ease-in-out infinite;
  }
}

.site-page[data-theme="portfolio"] .t-cta-split__reveal {
  opacity: 0;
  transform: translateY(1.875rem);
  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"] .t-section--cta-split.is-visible .t-cta-split__reveal {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-cta-split__panel--secondary:hover .t-cta-split__panel-arrow,
  .site-page[data-theme="portfolio"] .t-cta-split__panel--secondary:focus-visible .t-cta-split__panel-arrow {
    animation: none;
  }

  .site-page[data-theme="portfolio"] .t-cta-split__panel-arrow {
    transition: color 0.3s ease;
  }

  .site-page[data-theme="portfolio"] .t-cta-split__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * cta variant: "cta-canvas"
 * Closing section with ring motif and contact actions.
 */
.site-page[data-theme="portfolio"] .t-section--cta-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 8vw, 5.5rem) var(--t-section-padding-x);
  background: var(--t-bg-secondary);
  border-top: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-cta-canvas__inner {
  width: min(100%, 48rem);
  margin-inline: auto;
  text-align: center;
}

.site-page[data-theme="portfolio"] .t-cta-canvas__ring {
  position: relative;
  width: 5rem;
  height: 5rem;
  margin: 0 auto 2rem;
}

.site-page[data-theme="portfolio"] .t-cta-canvas__ring-line {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--site-color-accent) 30%, transparent);
}

.site-page[data-theme="portfolio"] .t-cta-canvas__ring-line--mid {
  inset: 0.5rem;
  border-color: color-mix(in srgb, var(--site-color-accent) 20%, transparent);
}

.site-page[data-theme="portfolio"] .t-cta-canvas__ring-line--inner {
  inset: 1rem;
  border-color: color-mix(in srgb, var(--site-color-accent) 15%, transparent);
}

.site-page[data-theme="portfolio"] .t-cta-canvas__ring-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--site-color-accent);
  -webkit-mask-image: var(--cta-icon);
  mask-image: var(--cta-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-cta-canvas__title {
  margin: 0 0 1.25rem;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.05;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-canvas__lead {
  margin: 0 auto 2rem;
  max-width: 36rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: 1.75;
  color: var(--t-text-secondary);
  white-space: pre-wrap;
}

.site-page[data-theme="portfolio"] .t-cta-canvas__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

@media (min-width: 640px) {
  .site-page[data-theme="portfolio"] .t-cta-canvas__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.site-page[data-theme="portfolio"] .t-cta-canvas__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--t-radius-pill);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  text-decoration: none;
  transition:
    background-color 0.5s ease,
    color 0.5s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.site-page[data-theme="portfolio"] .t-cta-canvas__btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.site-page[data-theme="portfolio"] .t-cta-canvas__btn-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--cta-icon);
  mask-image: var(--cta-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform 0.3s ease;
}

.site-page[data-theme="portfolio"] .t-cta-canvas__btn--primary {
  background: var(--site-color-primary);
  color: var(--site-on-primary);
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-cta-canvas__btn--primary:hover,
  .site-page[data-theme="portfolio"] .t-cta-canvas__btn--primary:focus-visible {
    background: var(--t-accent-hover);
    color: var(--site-on-primary);
  }

  .site-page[data-theme="portfolio"] .t-cta-canvas__btn--primary:hover .t-cta-canvas__btn-icon,
  .site-page[data-theme="portfolio"] .t-cta-canvas__btn--primary:focus-visible .t-cta-canvas__btn-icon {
    transform: translate(0.125rem, -0.125rem);
  }

  .site-page[data-theme="portfolio"] .t-cta-canvas__btn--secondary:hover,
  .site-page[data-theme="portfolio"] .t-cta-canvas__btn--secondary:focus-visible {
    border-color: var(--site-color-accent);
    color: var(--t-text-primary);
  }
}

.site-page[data-theme="portfolio"] .t-cta-canvas__btn--secondary {
  padding-inline: 1.5rem;
  border: 1px solid var(--t-border-strong);
  color: var(--t-text-secondary);
  background: color-mix(in srgb, var(--t-bg-primary) 50%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.site-page[data-theme="portfolio"] .t-cta-canvas__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.site-page[data-theme="portfolio"] .t-cta-canvas__ornament-line {
  width: 4rem;
  height: 1px;
  background: var(--t-border-strong);
}

.site-page[data-theme="portfolio"] .t-cta-canvas__ornament-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-cta-canvas__reveal {
  opacity: 0;
  transform: translateY(1.875rem);
  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"] .t-cta-canvas__ring.t-cta-canvas__reveal {
  transform: scale(0.6);
  transition:
    opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-page[data-theme="portfolio"] .t-section--cta-canvas.is-visible .t-cta-canvas__reveal {
  opacity: 1;
  transform: translateY(0);
}

.site-page[data-theme="portfolio"] .t-section--cta-canvas.is-visible .t-cta-canvas__ring.t-cta-canvas__reveal {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-cta-canvas__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * cta variant: "cta-compose"
 * Tall closer with a command-bar contact action.
 */
.site-page[data-theme="portfolio"] .t-section--cta-compose {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 20rem;
  padding-top: clamp(5rem, 8vw, 6.5rem);
  padding-bottom: clamp(9rem, 13vw, 13rem);
  padding-inline: var(--t-section-padding-x);
  overflow: hidden;
  background: var(--t-bg-primary);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-compose__inner {
  width: min(100%, var(--t-max-width));
  margin-inline: auto;
}

.site-page[data-theme="portfolio"] .t-cta-compose__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.75rem;
  align-items: start;
}

@media (min-width: 900px) {
  .site-page[data-theme="portfolio"] .t-section--cta-compose {
    min-height: 30rem;
  }
  .site-page[data-theme="portfolio"] .t-cta-compose__stage {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
    gap: clamp(3rem, 6vw, 5.5rem);
    align-items: end;
  }
}

.site-page[data-theme="portfolio"] .t-cta-compose__copy {
  max-width: 36rem;
}

.site-page[data-theme="portfolio"] .t-cta-compose__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  line-height: var(--t-line-height-tight);
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-compose__lead {
  margin: 1.25rem 0 0;
  max-width: 36rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  white-space: pre-wrap;
}

.site-page[data-theme="portfolio"] .t-cta-compose__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-cta-compose__command {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--t-radius-sm);
  background: var(--t-accent);
  color: var(--t-accent-contrast);
  text-decoration: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-page[data-theme="portfolio"] .t-cta-compose__command:hover {
  background: var(--t-accent-hover);
  color: var(--t-accent-contrast);
  transform: translateY(-1px);
}

.site-page[data-theme="portfolio"] .t-cta-compose__command:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 3px;
}

.site-page[data-theme="portfolio"] .t-cta-compose__command--secondary {
  background: var(--t-bg-elevated);
  color: var(--t-text-primary);
  border-color: var(--t-border-strong);
}

.site-page[data-theme="portfolio"] .t-cta-compose__command--secondary:hover {
  background: var(--t-bg-muted);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"]
  .t-cta-compose__command--secondary
  .t-cta-compose__command-icon,
.site-page[data-theme="portfolio"]
  .t-cta-compose__command--secondary
  .t-cta-compose__kbd {
  background-color: var(--t-text-primary);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"]
  .t-cta-compose__command--secondary
  .t-cta-compose__kbd {
  background: var(--t-bg-muted);
  border-color: var(--t-border-strong);
  box-shadow: 0 1px 0 var(--t-border);
}

.site-page[data-theme="portfolio"]
  .t-cta-compose__command--secondary
  .t-cta-compose__command-meta {
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-cta-compose__command-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  background-color: var(--t-accent-contrast);
  -webkit-mask-image: var(--cta-icon);
  mask-image: var(--cta-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-cta-compose__command-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.site-page[data-theme="portfolio"] .t-cta-compose__command-label {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.site-page[data-theme="portfolio"] .t-cta-compose__command-meta {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-normal);
  color: color-mix(in srgb, var(--t-accent-contrast) 72%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-page[data-theme="portfolio"] .t-cta-compose__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  border-radius: 6px;
  border: 1px solid
    color-mix(in srgb, var(--t-accent-contrast) 40%, transparent);
  background: color-mix(in srgb, var(--t-accent-contrast) 16%, transparent);
  box-shadow: 0 1px 0
    color-mix(in srgb, var(--t-accent-contrast) 22%, transparent);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.875rem;
  font-weight: var(--t-font-weight-medium);
  line-height: 1;
  color: var(--t-accent-contrast);
}

.site-page[data-theme="portfolio"] .t-cta-compose__reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"]
  .t-section--cta-compose.is-visible
  .t-cta-compose__reveal {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-cta-compose__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-page[data-theme="portfolio"] .t-cta-compose__command:hover {
    transform: none;
  }
}

/*
 * cta variant: "cta-crest"
 * Engraved stationery plate — crest seal and contact buttons.
 */
.site-page[data-theme="portfolio"] .t-section--cta-crest {
  padding: clamp(4.5rem, 10vw, 7.25rem) var(--t-section-padding-x);
  background: var(--t-bg-primary);
  border-top: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-cta-crest__inner {
  width: min(100%, 54rem);
  margin-inline: auto;
}

.site-page[data-theme="portfolio"] .t-cta-crest__plate {
  --crest-frame: color-mix(in srgb, var(--site-color-accent) 22%, var(--t-border-strong));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: clamp(2.25rem, 5vw, 3.25rem) clamp(1.65rem, 5vw, 3.15rem) clamp(1.8rem, 4vw, 2.5rem);
  background: var(--t-bg-primary);
  border: 1px solid var(--crest-frame);
}

.site-page[data-theme="portfolio"] .t-cta-crest__corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.site-page[data-theme="portfolio"] .t-cta-crest__corner {
  position: absolute;
  width: 2rem;
  height: 2rem;
  border: 0 solid var(--crest-frame);
}

.site-page[data-theme="portfolio"] .t-cta-crest__corner--tl {
  top: 0.85rem;
  left: 0.85rem;
  border-top-width: 1px;
  border-left-width: 1px;
}

.site-page[data-theme="portfolio"] .t-cta-crest__corner--tr {
  top: 0.85rem;
  right: 0.85rem;
  border-top-width: 1px;
  border-right-width: 1px;
}

.site-page[data-theme="portfolio"] .t-cta-crest__corner--bl {
  bottom: 0.85rem;
  left: 0.85rem;
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.site-page[data-theme="portfolio"] .t-cta-crest__corner--br {
  bottom: 0.85rem;
  right: 0.85rem;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

.site-page[data-theme="portfolio"] .t-cta-crest__mark {
  position: relative;
  z-index: 1;
  width: 5.25rem;
  height: 5.25rem;
  margin-bottom: 0.15rem;
}

.site-page[data-theme="portfolio"] .t-cta-crest__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.site-page[data-theme="portfolio"] .t-cta-crest__ring--outer {
  border: 1px solid color-mix(in srgb, var(--site-color-accent) 55%, transparent);
}

.site-page[data-theme="portfolio"] .t-cta-crest__ring--inner {
  inset: 0.28rem;
  border: 1px solid color-mix(in srgb, var(--site-color-accent) 28%, transparent);
}

.site-page[data-theme="portfolio"] .t-cta-crest__photo {
  position: absolute;
  inset: 0.52rem;
  display: block;
  width: calc(100% - 1.04rem);
  height: calc(100% - 1.04rem);
  object-fit: cover;
  border-radius: 50%;
  background: var(--t-bg-muted);
}

.site-page[data-theme="portfolio"] .t-cta-crest__photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-lg);
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
  background: color-mix(in srgb, var(--site-color-primary) 12%, var(--t-bg-elevated));
}

.site-page[data-theme="portfolio"] .t-cta-crest__title {
  position: relative;
  z-index: 1;
  margin: 0.15rem 0 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  line-height: var(--t-line-height-tight);
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-crest__lead {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 40rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  white-space: pre-wrap;
}

.site-page[data-theme="portfolio"] .t-cta-crest__actions {
  position: relative;
  z-index: 1;
  justify-content: center;
  margin-top: 0.5rem;
}

.site-page[data-theme="portfolio"] .t-cta-crest__sign {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.45rem;
}

.site-page[data-theme="portfolio"] .t-cta-crest__sign-place {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-cta-crest__reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.75s ease,
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"] .t-section--cta-crest.is-visible .t-cta-crest__reveal {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-cta-crest__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * cta variant: "cta-colophon"
 * Magazine end-matter — hairline rules, name sign-off, compact contact links.
 */
.site-page[data-theme="portfolio"] .t-section--cta-colophon {
  padding: clamp(6rem, 12vw, 8.5rem) var(--t-section-padding-x);
  background: var(--t-bg-primary);
  border-top: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-cta-colophon__inner {
  width: min(100%, var(--t-max-width));
  margin-inline: auto;
  text-align: start;
}

.site-page[data-theme="portfolio"] .t-cta-colophon__mast {
  max-width: 38rem;
  padding-bottom: clamp(1.5rem, 3vw, 2.15rem);
  border-bottom: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-cta-colophon__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-colophon__lead {
  margin: 0.85rem 0 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  white-space: pre-wrap;
}

.site-page[data-theme="portfolio"] .t-cta-colophon__endmatter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding-top: 1.15rem;
  border-bottom: 1px solid var(--t-border);
  padding-bottom: 1.15rem;
}

.site-page[data-theme="portfolio"] .t-cta-colophon--no-mast .t-cta-colophon__endmatter {
  border-top: 1px solid var(--t-border);
}

@media (min-width: 720px) {
  .site-page[data-theme="portfolio"] .t-cta-colophon__endmatter {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem 1.5rem;
  }
}

.site-page[data-theme="portfolio"] .t-cta-colophon__sign {
  margin: 0;
  min-width: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: 1.4;
}

.site-page[data-theme="portfolio"] .t-cta-colophon__name {
  color: var(--t-text-primary);
  font-weight: var(--t-font-weight-medium);
}

.site-page[data-theme="portfolio"] .t-cta-colophon__sep,
.site-page[data-theme="portfolio"] .t-cta-colophon__place {
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-cta-colophon__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.5rem;
  min-width: 0;
}

@media (min-width: 720px) {
  .site-page[data-theme="portfolio"] .t-cta-colophon__actions {
    margin-inline-start: auto;
  }
}

.site-page[data-theme="portfolio"] .t-cta-colophon__link {
  color: var(--t-text-secondary);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-medium);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px solid var(--t-border-strong);
  padding-bottom: 0.08em;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-cta-colophon__link--primary {
  color: var(--t-text-primary);
  border-bottom-color: var(--site-color-accent);
}

.site-page[data-theme="portfolio"] .t-cta-colophon__link[data-external="true"]::after {
  content: " ↗";
  font-size: 0.85em;
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-cta-colophon__link:hover {
    color: var(--t-accent);
    border-bottom-color: var(--t-accent);
  }
}

.site-page[data-theme="portfolio"] .t-cta-colophon__link:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 3px;
}

.site-page[data-theme="portfolio"] .t-cta-colophon__reveal {
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"] .t-section--cta-colophon.is-visible .t-cta-colophon__reveal {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-cta-colophon__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * cta variant: "cta-ticket"
 * Museum-ticket closer — perforated stub with contact buttons on the tear-off.
 */
.site-page[data-theme="portfolio"] .t-section--cta-ticket {
  --ticket-notch: 0.65rem;
  padding: clamp(6.5rem, 13vw, 9.5rem) var(--t-section-padding-x);
  background: var(--t-bg-primary);
  border-top: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-cta-ticket__inner {
  width: min(100%, 56rem);
  margin-inline: auto;
}

.site-page[data-theme="portfolio"] .t-cta-ticket__ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "main"
    "tear"
    "stub";
  min-width: 0;
  background: var(--t-bg-primary);
  border: 1px solid var(--t-border);
  box-shadow: var(--t-shadow-sm);
}

.site-page[data-theme="portfolio"] .t-cta-ticket__main {
  grid-area: main;
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.35rem, 4vw, 2.15rem);
}

.site-page[data-theme="portfolio"] .t-cta-ticket__serial {
  margin: 0 0 1rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--t-font-size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-cta-ticket__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-ticket__lead {
  margin: 0.85rem 0 0;
  max-width: 34rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  white-space: pre-wrap;
}

.site-page[data-theme="portfolio"] .t-cta-ticket__tear {
  grid-area: tear;
  position: relative;
  width: 100%;
  height: 1.35rem;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0 6px,
    color-mix(in srgb, var(--t-border-strong) 78%, transparent) 6px 8px
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(100% - 2.4rem) 1px;
}

.site-page[data-theme="portfolio"] .t-cta-ticket__tear::before,
.site-page[data-theme="portfolio"] .t-cta-ticket__tear::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--ticket-notch) * 2);
  height: calc(var(--ticket-notch) * 2);
  border-radius: 50%;
  background: var(--t-bg-primary);
  box-shadow: 0 0 0 1px var(--t-border);
  translate: 0 -50%;
}

.site-page[data-theme="portfolio"] .t-cta-ticket__tear::before {
  left: calc(var(--ticket-notch) * -1);
}

.site-page[data-theme="portfolio"] .t-cta-ticket__tear::after {
  right: calc(var(--ticket-notch) * -1);
}

.site-page[data-theme="portfolio"] .t-cta-ticket__stub {
  grid-area: stub;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  min-width: 0;
  padding: 0.35rem clamp(1.35rem, 4vw, 2.15rem) clamp(1.5rem, 4vw, 2.15rem);
}

.site-page[data-theme="portfolio"] .t-cta-ticket__stub-mark {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-cta-ticket__actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-cta-ticket__btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.75rem;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.55rem 0.9rem;
  border-radius: var(--t-radius-sm);
  text-decoration: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.site-page[data-theme="portfolio"] .t-cta-ticket__btn--primary {
  background: var(--t-accent);
  color: var(--t-accent-contrast);
}

.site-page[data-theme="portfolio"] .t-cta-ticket__btn--secondary {
  background: var(--t-bg-muted);
  color: var(--t-text-primary);
  border: 1px solid var(--t-border-strong);
}

.site-page[data-theme="portfolio"] .t-cta-ticket__btn-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-image: var(--cta-icon);
  mask-image: var(--cta-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-cta-ticket__btn-label {
  min-width: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  line-height: 1.2;
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-cta-ticket__btn--primary:hover {
    background: var(--t-accent-hover);
    color: var(--t-accent-contrast);
  }

  .site-page[data-theme="portfolio"] .t-cta-ticket__btn--secondary:hover {
    background: var(--t-hover-surface);
    color: var(--t-text-primary);
  }
}

.site-page[data-theme="portfolio"] .t-cta-ticket__btn:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 3px;
}

@media (min-width: 720px) {
  .site-page[data-theme="portfolio"] .t-cta-ticket__ticket {
    grid-template-columns: minmax(0, 1fr) 1.35rem minmax(11.5rem, 14.5rem);
    grid-template-areas: "main tear stub";
    align-items: stretch;
  }

  .site-page[data-theme="portfolio"] .t-cta-ticket__tear {
    width: 1.35rem;
    height: auto;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0 6px,
      color-mix(in srgb, var(--t-border-strong) 78%, transparent) 6px 8px
    );
    background-size: 1px calc(100% - 2.4rem);
  }

  .site-page[data-theme="portfolio"] .t-cta-ticket__tear::before,
  .site-page[data-theme="portfolio"] .t-cta-ticket__tear::after {
    top: auto;
    left: 50%;
    right: auto;
    translate: -50% 0;
  }

  .site-page[data-theme="portfolio"] .t-cta-ticket__tear::before {
    top: calc(var(--ticket-notch) * -1);
  }

  .site-page[data-theme="portfolio"] .t-cta-ticket__tear::after {
    bottom: calc(var(--ticket-notch) * -1);
  }

  .site-page[data-theme="portfolio"] .t-cta-ticket__stub {
    padding: clamp(1.5rem, 4vw, 2.25rem) 1.15rem;
  }
}

.site-page[data-theme="portfolio"] .t-cta-ticket--no-stub .t-cta-ticket__ticket {
  grid-template-areas: "main";
  grid-template-columns: minmax(0, 1fr);
}

.site-page[data-theme="portfolio"] .t-cta-ticket__reveal {
  opacity: 0;
  transform: translateY(0.85rem);
  transition:
    opacity 0.7s ease,
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"] .t-section--cta-ticket.is-visible .t-cta-ticket__reveal {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-cta-ticket__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * cta variant: "cta-salon"
 * Correspondence index — wide title, salon divider, TOC contact rows.
 */
.site-page[data-theme="portfolio"] .t-section--cta-salon {
  padding: clamp(6.25rem, 12vw, 9rem) var(--t-section-padding-x);
  background: var(--t-bg-primary);
  border-top: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-cta-salon__inner {
  width: min(100%, var(--t-max-width));
  margin-inline: auto;
}

.site-page[data-theme="portfolio"] .t-cta-salon__host {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-text-muted);
}

.site-page[data-theme="portfolio"] .t-cta-salon__host-name {
  font-family: var(--t-font-display);
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-salon__title {
  margin: 0;
  max-width: min(100%, 42rem);
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  letter-spacing: var(--t-letter-spacing-tight);
  line-height: var(--t-line-height-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-salon--no-host .t-cta-salon__title {
  margin-top: 0;
}

.site-page[data-theme="portfolio"] .t-cta-salon__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.65rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-cta-salon__pitch {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-cta-salon__lead {
  margin: 0;
  max-width: 32rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-base);
  line-height: var(--t-line-height-relaxed);
  color: var(--t-text-secondary);
  white-space: pre-wrap;
}

.site-page[data-theme="portfolio"] .t-cta-salon__rule {
  width: 3rem;
  height: 1px;
  background: var(--t-border-strong);
  flex-shrink: 0;
}

.site-page[data-theme="portfolio"] .t-cta-salon__index {
  min-width: 0;
  width: 100%;
}

.site-page[data-theme="portfolio"] .t-cta-salon--index-only .t-cta-salon__index {
  max-width: 28rem;
}

.site-page[data-theme="portfolio"] .t-cta-salon__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-page[data-theme="portfolio"] .t-cta-salon__item {
  margin: 0;
}

.site-page[data-theme="portfolio"] .t-cta-salon__row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  min-height: 3rem;
  box-sizing: border-box;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--t-border);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-cta-salon__item:first-child .t-cta-salon__row {
  border-top: 1px solid var(--t-border);
}

.site-page[data-theme="portfolio"] .t-cta-salon__kicker {
  min-width: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  font-weight: var(--t-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-salon__leader {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 1px;
  align-self: center;
  background-image: repeating-linear-gradient(
    to right,
    var(--t-border-strong) 0 2px,
    transparent 2px 6px
  );
}

.site-page[data-theme="portfolio"] .t-cta-salon__arrow {
  flex-shrink: 0;
  color: var(--t-text-muted);
  font-size: var(--t-font-size-sm);
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

@media (hover: hover) {
  .site-page[data-theme="portfolio"] .t-cta-salon__row:hover .t-cta-salon__kicker {
    color: var(--t-link);
  }

  .site-page[data-theme="portfolio"] .t-cta-salon__row:hover .t-cta-salon__leader {
    background-image: repeating-linear-gradient(
      to right,
      var(--site-color-accent) 0 2px,
      transparent 2px 6px
    );
  }

  .site-page[data-theme="portfolio"] .t-cta-salon__row:hover .t-cta-salon__arrow {
    color: var(--t-accent);
    transform: translateX(0.2rem);
  }
}

.site-page[data-theme="portfolio"] .t-cta-salon__row:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 3px;
}

@media (min-width: 900px) {
  .site-page[data-theme="portfolio"] .t-cta-salon__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(16rem, 22rem);
    gap: clamp(1.5rem, 4vw, 2.75rem);
    align-items: start;
  }

  .site-page[data-theme="portfolio"] .t-cta-salon__rule {
    width: 1px;
    height: auto;
    min-height: 6rem;
    align-self: stretch;
  }

  .site-page[data-theme="portfolio"] .t-cta-salon--index-only .t-cta-salon__body {
    display: flex;
    grid-template-columns: none;
  }
}

.site-page[data-theme="portfolio"] .t-cta-salon__reveal {
  opacity: 0;
  transform: translateY(0.85rem);
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"] .t-section--cta-salon.is-visible .t-cta-salon__reveal {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-cta-salon__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-page[data-theme="portfolio"] .t-cta-salon__row:hover .t-cta-salon__arrow {
    transform: none;
  }
}

/*
 * Shared Pro contact form. Surfaces follow the site background + primary
 * so ThemePanel recolors the fields and submit with the rest of the page.
 */
.site-page[data-theme="portfolio"] .t-contact-form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .site-page[data-theme="portfolio"] .t-contact-form {
    grid-template-columns: 1fr 1fr;
  }

  .site-page[data-theme="portfolio"] .t-contact-form__field--full,
  .site-page[data-theme="portfolio"] .t-contact-form__status,
  .site-page[data-theme="portfolio"] .t-contact-form__submit {
    grid-column: 1 / -1;
  }
}

.site-page[data-theme="portfolio"] .t-contact-form__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.site-page[data-theme="portfolio"] .t-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-contact-form__label {
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-xs);
  font-weight: var(--t-font-weight-medium);
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-contact-form__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-sm);
  appearance: none;
  -webkit-appearance: none;
  background: var(--site-color-background);
  color: var(--t-text-primary);
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: 1.4;
}

.site-page[data-theme="portfolio"] .t-contact-form__input:focus {
  outline: 2px solid var(--site-color-primary);
  outline-offset: 1px;
  border-color: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-contact-form__input--area {
  min-height: 5rem;
  resize: vertical;
}

.site-page[data-theme="portfolio"] .t-contact-form__submit {
  justify-self: start;
  margin-top: 0.25rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.site-page[data-theme="portfolio"] .t-contact-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.site-page[data-theme="portfolio"] .t-contact-form__status {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: 1.5;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-contact-form__status.is-error {
  color: var(--t-text-primary);
}

/*
 * cta variant: "cta-letter"
 * Split closer: pitch left, contact form right.
 */
.site-page[data-theme="portfolio"] .t-section--cta-letter {
  padding: var(--t-section-padding-y) var(--t-section-padding-x);
  background: var(--t-bg-primary);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-letter__inner {
  width: min(100%, var(--t-max-width));
  margin-inline: auto;
}

.site-page[data-theme="portfolio"] .t-cta-letter__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--t-gap-lg, 2rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .site-page[data-theme="portfolio"] .t-cta-letter__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
  }
}

.site-page[data-theme="portfolio"] .t-cta-letter__copy {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
  text-align: left;
}

.site-page[data-theme="portfolio"] .t-cta-letter__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.15;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-letter__lead {
  margin: 0;
  max-width: 36rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: 1.8;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] a.t-cta-letter__follow {
  margin-top: 0.35rem;
  gap: 0.45rem;
  line-height: 1;
}

.site-page[data-theme="portfolio"] a.t-cta-letter__follow:hover {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-letter__follow-icon {
  flex-shrink: 0;
  display: block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--cta-icon);
  mask-image: var(--cta-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-cta-letter__follow-label {
  line-height: 1;
}

.site-page[data-theme="portfolio"] .t-cta-letter__form-wrap {
  min-width: 0;
}

.site-page[data-theme="portfolio"] .t-cta-letter__reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease var(--reveal-delay, 0ms),
    transform 0.7s ease var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"] .t-section--cta-letter.is-visible .t-cta-letter__reveal {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-cta-letter__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * cta variant: "cta-desk"
 * Centered correspondence: pitch, primary rule, then the form.
 */
.site-page[data-theme="portfolio"] .t-section--cta-desk {
  padding: var(--t-section-padding-y) var(--t-section-padding-x);
  background: var(--site-color-background);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-desk__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 36rem);
  margin-inline: auto;
}

.site-page[data-theme="portfolio"] .t-cta-desk__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.site-page[data-theme="portfolio"] .t-cta-desk__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.15;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-desk__lead {
  margin: 0.85rem 0 0;
  max-width: 32rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: 1.8;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] .t-cta-desk__rule {
  display: block;
  width: 2.5rem;
  height: 2px;
  margin: 1.35rem 0 1.75rem;
  background: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-cta-desk__form-wrap {
  width: 100%;
  min-width: 0;
  text-align: left;
}

.site-page[data-theme="portfolio"] a.t-cta-desk__follow {
  margin-top: 1rem;
  gap: 0.45rem;
  line-height: 1;
}

.site-page[data-theme="portfolio"] a.t-cta-desk__follow:hover {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-desk__follow-icon {
  flex-shrink: 0;
  display: block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--cta-icon);
  mask-image: var(--cta-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-cta-desk__follow-label {
  line-height: 1;
}

.site-page[data-theme="portfolio"] .t-cta-desk__reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease var(--reveal-delay, 0ms),
    transform 0.7s ease var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"] .t-section--cta-desk.is-visible .t-cta-desk__reveal {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-cta-desk__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * cta variant: "cta-panel"
 * Primary-filled intro beside the form. Recolors with ThemePanel primary.
 */
.site-page[data-theme="portfolio"] .t-section--cta-panel {
  padding: var(--t-section-padding-y) var(--t-section-padding-x);
  background: var(--site-color-background);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-panel__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--t-gap-lg);
  align-items: stretch;
  width: min(100%, var(--t-max-width));
  margin-inline: auto;
}

@media (min-width: 960px) {
  .site-page[data-theme="portfolio"] .t-cta-panel__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(1.75rem, 4vw, 3rem);
  }
}

.site-page[data-theme="portfolio"] .t-cta-panel__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  box-sizing: border-box;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--site-color-primary);
  color: var(--site-on-primary);
  border-radius: var(--t-radius-lg);
}

.site-page[data-theme="portfolio"] .t-cta-panel__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.15;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--site-on-primary);
}

.site-page[data-theme="portfolio"] .t-cta-panel__lead {
  margin: 0;
  max-width: 28rem;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: 1.8;
  color: color-mix(in srgb, var(--site-on-primary) 78%, transparent);
}

.site-page[data-theme="portfolio"] a.t-cta-panel__follow {
  margin-top: auto;
  padding-top: 0.5rem;
  gap: 0.45rem;
  line-height: 1;
  color: var(--site-on-primary);
  border-color: color-mix(in srgb, var(--site-on-primary) 38%, transparent);
}

.site-page[data-theme="portfolio"] a.t-cta-panel__follow:hover {
  color: var(--site-on-primary);
  background: color-mix(in srgb, var(--site-on-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--site-on-primary) 55%, transparent);
}

.site-page[data-theme="portfolio"] .t-cta-panel__follow-icon {
  flex-shrink: 0;
  display: block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--cta-icon);
  mask-image: var(--cta-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-cta-panel__follow-label {
  line-height: 1;
}

.site-page[data-theme="portfolio"] .t-cta-panel__form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

@media (min-width: 960px) {
  .site-page[data-theme="portfolio"] .t-cta-panel__form-wrap {
    padding-block: 0.5rem;
  }
}

.site-page[data-theme="portfolio"] .t-cta-panel__reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease var(--reveal-delay, 0ms),
    transform 0.7s ease var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"] .t-section--cta-panel.is-visible .t-cta-panel__reveal {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-cta-panel__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * cta variant: "cta-frame"
 * Headline + follow, then a primary-spined form card on the site background.
 */
.site-page[data-theme="portfolio"] .t-section--cta-frame {
  padding: var(--t-section-padding-y) var(--t-section-padding-x);
  background: var(--site-color-background);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-frame__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  width: min(100%, var(--t-max-width));
  margin-inline: auto;
}

.site-page[data-theme="portfolio"] .t-cta-frame__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

@media (min-width: 800px) {
  .site-page[data-theme="portfolio"] .t-cta-frame__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
  }
}

.site-page[data-theme="portfolio"] .t-cta-frame__copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  max-width: 38rem;
}

.site-page[data-theme="portfolio"] .t-cta-frame__title {
  margin: 0;
  font-family: var(--t-font-display);
  font-size: var(--t-font-size-2xl);
  font-weight: var(--t-font-weight-normal);
  line-height: 1.15;
  letter-spacing: var(--t-letter-spacing-tight);
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-frame__lead {
  margin: 0;
  font-family: var(--t-font-sans);
  font-size: var(--t-font-size-sm);
  line-height: 1.8;
  color: var(--t-text-secondary);
}

.site-page[data-theme="portfolio"] a.t-cta-frame__follow {
  flex-shrink: 0;
  gap: 0.45rem;
  line-height: 1;
}

.site-page[data-theme="portfolio"] a.t-cta-frame__follow:hover {
  color: var(--t-text-primary);
}

.site-page[data-theme="portfolio"] .t-cta-frame__follow-icon {
  flex-shrink: 0;
  display: block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--cta-icon);
  mask-image: var(--cta-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.site-page[data-theme="portfolio"] .t-cta-frame__follow-label {
  line-height: 1;
}

.site-page[data-theme="portfolio"] .t-cta-frame__card {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 3.5vw, 2.15rem);
  background: var(--site-color-background);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-md);
}

.site-page[data-theme="portfolio"] .t-cta-frame__card::before {
  content: "";
  position: absolute;
  top: 0.85rem;
  bottom: 0.85rem;
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--site-color-primary);
}

.site-page[data-theme="portfolio"] .t-cta-frame__reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.7s ease var(--reveal-delay, 0ms),
    transform 0.7s ease var(--reveal-delay, 0ms);
}

.site-page[data-theme="portfolio"] .t-section--cta-frame.is-visible .t-cta-frame__reveal {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-page[data-theme="portfolio"] .t-cta-frame__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Footer */

.t-footer {
  padding: 1.25rem 0 1rem;
  border-top: 1px solid var(--t-border);
  background: var(--t-bg-primary);
}

.t-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.t-footer__inner--solo {
  justify-content: center;
  text-align: center;
}

.t-footer__copy {
  margin: 0;
  font-size: var(--t-font-size-sm);
  color: var(--t-text-muted);
}

.t-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  text-decoration: none;
}

.t-footer__brand-text {
  font-size: var(--t-font-size-xs);
  color: var(--t-text-muted);
}

.t-footer__brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.325rem;
  flex-shrink: 0;
}

.t-footer__brand-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.t-footer__brand-wordmark {
  font-size: 1rem;
  font-weight: var(--t-font-weight-semibold);
  line-height: 1;
  letter-spacing: -0.03em;
}

.t-footer__brand-wordmark-linkd {
  color: #1d4ed8;
}

.t-footer__brand-wordmark-folio {
  color: var(--t-text-primary);
}


/* Titles — heading font + regular weight (overrides per-component family/weight) */
.site-page[data-theme="portfolio"] :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .t-section__title,
  .t-hero__greeting,
  .t-hero__tagline,
  .t-hero-sticker__headline,
  .t-hero-playful__title,
  .t-hero-cover__headline,
  .t-navbar-masthead__name,
  .t-navbar-overlay__name,
  .t-navbar-overlay__link,
  .t-navbar-index__name,
  .t-navbar-gate__name,
  .t-navbar-gate__link-text,
  .t-about__title,
  .t-about-editorial__title,
  .t-about-pop__title,
  .t-about-grid__heading,
  .t-about-grid__company-name,
  .t-about-aurora__title,
  .t-about-spotlight__title,
  .t-about-dossier__title,
  .t-about-atelier__title,
  .t-about-folio__title,
  .t-cta-canvas__title,
  .t-cta-split__title,
  .t-cta-pop__title,
  .t-cta-compose__title,
  .t-cta-crest__title,
  .t-cta-colophon__title,
  .t-cta-ticket__title,
  .t-cta-salon__title,
  .t-cta-letter__title,
  .t-cta-desk__title,
  .t-cta-panel__title,
  .t-cta-frame__title,
  .t-exp-intro__title,
  .t-project-card__title,
  .t-info-row__title,
  .t-column-heading,
  .t-cta__title,
  .t-subsection-title,
  .t-edu-courses__title
) {
  font-family: var(--t-font-display);
  font-weight: var(--t-font-weight-normal);
}

.site-page[data-theme="portfolio"] :is(
  .t-section--experience,
  .t-section--projects,
  .t-section--volunteer
) .t-exp-role__company {
  font-weight: var(--t-font-weight-bold);
}