/*
  Portfolio / Alex Rudnicki
  Design system, visual design, and front-end code by Alex Rudnicki.
  © 2026 Alex Rudnicki. All rights reserved.
*/
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding:
    calc(var(--nav-height) + env(safe-area-inset-top) + var(--hero-y))
    var(--side)
    var(--section-y);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(var(--space-4), 1.65vw, var(--space-5));
}

.hero-top {
  width: fit-content;
  max-width: 100%;
  -webkit-user-select: none;
  user-select: none;
  animation: fade-in var(--duration-hero) var(--ease-standard) both;
}
.hero-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(var(--space-2), 0.82vw, var(--space-3));
  width: min(100%, var(--measure-hero-proof));
  -webkit-user-select: none;
  user-select: none;
  animation: fade-in var(--duration-hero) var(--ease-standard) both;
}

.hero h1 {
  width: fit-content;
  max-width: 100%;
  -webkit-user-select: text;
  user-select: text;
  margin: 0;
  font-weight: var(--weight-heading);
  letter-spacing: 0;
}
.h1-name {
  display: block;
  width: fit-content;
  max-width: 100%;
  font-size: var(--type-home-title);
  color: var(--accent);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
}

.hero-statement {
  width: 100%;
  -webkit-user-select: text;
  user-select: text;
  margin: 0 0 clamp(var(--space-2), 0.55vw, var(--space-3));
  font-size: var(--type-home-statement);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-statement);
  color: var(--text);
  text-wrap: balance;
}
.hero-statement-inner {
  display: inline-block;
  max-width: var(--measure-hero-statement);
}
.hero-proof-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}
.hero-proof {
  width: 100%;
  -webkit-user-select: text;
  user-select: text;
  margin: 0;
  font-size: var(--type-hero-proof);
  font-weight: var(--weight-body);
  line-height: var(--leading-copy-medium);
  color: var(--muted);
  text-wrap: balance;
}

.hero-socials {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.hero-social-link {
  display: inline-grid;
  place-items: center;
  width: var(--control-size);
  height: var(--control-size);
  color: var(--muted);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-control);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-decelerate);
}
.hero-social-link:hover {
  color: var(--accent);
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  transform: translateY(var(--lift-control));
}
.hero-social-link svg {
  width: var(--icon-size);
  height: var(--icon-size);
}
.section-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-y) var(--side);
}

h2.sec-title {
  font-size: var(--type-section);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-solid);
  color: var(--text);
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}
.case-wide {
  grid-column: 1 / -1;
}
.case-wide .case-card {
  flex-direction: row-reverse;
}
.case-wide .case-thumb {
  width: var(--case-wide-thumb);
  aspect-ratio: unset;
  align-self: stretch;
  flex-shrink: 0;
  border-radius: var(--radius-surface) 0 0 var(--radius-surface);
}
.work-grid > article {
  display: flex;
  min-width: 0;
}
.case-card {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  min-height: 100%;
  background: color-mix(in srgb, var(--off-white) 96%, transparent);
  border: 1px solid var(--border-surface);
  border-radius: var(--radius-surface);
  overflow: hidden;
  color: inherit;
  isolation: isolate;
  box-shadow: var(--shadow-card);
  transition:
    transform var(--duration-fast) var(--ease-decelerate),
    box-shadow var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}
.case-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone-white) 18%, transparent), color-mix(in srgb, var(--navy) 1.2%, transparent));
  z-index: 0;
}
.case-card:hover {
  transform: translateY(var(--lift-card));
  box-shadow: var(--shadow-card-hover);
  border-color: color-mix(in srgb, var(--accent-muted) 30%, transparent);
}
.case-card:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.case-body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--case-card-pad);
  min-width: 0;
}
.case-meta {
  display: flex;
  align-items: center;
  gap: var(--tag-gap);
  flex-wrap: wrap;
  margin-bottom: var(--case-card-gap);
}
.case-tag {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tag-gap-tight) var(--tag-gap);
  min-width: 0;
  margin: 0;
}
.case-tag span {
  display: inline-flex;
  flex: 0 0 auto;
  max-width: 100%;
  font-size: var(--type-tag);
  font-weight: var(--tag-weight);
  letter-spacing: 0;
  color: var(--tag-text);
  border: 1px solid var(--tag-border);
  background: var(--tag-bg);
  border-radius: var(--radius-chip);
  padding: var(--tag-pad);
  line-height: var(--leading-label);
  white-space: nowrap;
  overflow-wrap: normal;
}
.case-card h3 {
  max-width: 100%;
  font-size: var(--type-case-title);
  font-weight: var(--weight-heading);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-heading);
  color: var(--text);
  margin-bottom: var(--case-card-gap);
  overflow-wrap: break-word;
}
.case-desc {
  font-size: var(--type-body-sm);
  color: var(--muted);
  line-height: var(--leading-body);
  margin-bottom: var(--case-card-body-gap);
  overflow-wrap: break-word;
}
.case-card-impact {
  margin-top: auto;
  padding: var(--case-accent-pad);
  background: transparent;
  border-left: var(--case-card-accent-rule) solid color-mix(in srgb, var(--accent) 68%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--case-card-impact-gap);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.case-card:hover .case-card-impact { border-left-color: var(--accent); }
.case-card-impact strong {
  display: flex;
  align-items: center;
  gap: var(--case-card-label-gap);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  line-height: var(--leading-solid);
  text-transform: none;
  color: var(--accent-muted);
}
.case-card-impact strong::before {
  content: '';
  display: inline-block;
  width: var(--case-card-label-rule-w);
  height: var(--case-card-label-rule-h);
  background: var(--accent-muted);
  flex-shrink: 0;
  opacity: var(--case-card-label-rule-opacity);
}
.case-card-impact span {
  display: block;
  font-size: var(--type-body-sm);
  line-height: var(--leading-copy-compact);
  font-weight: var(--weight-body);
  color: var(--text);
  letter-spacing: 0;
  overflow-wrap: break-word;
}

.case-link {
  display: inline-flex;
  align-items: center;
  gap: var(--case-card-link-icon-gap);
  width: fit-content;
  margin-top: var(--case-card-link-gap);
  padding: 0 0 var(--case-card-link-pad-block-end);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: 0;
  color: var(--accent);
  border-bottom: var(--case-card-link-rule) solid currentColor;
  transition: color var(--duration-fast) var(--ease-standard);
}
.case-link::after {
  content: '→';
  font-size: var(--type-body-sm);
  line-height: var(--leading-solid);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.case-card:hover .case-link { color: var(--accent-muted); }
.case-card:hover .case-link::after { transform: translateX(var(--case-card-hover-shift)); }

.case-thumb {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: var(--case-card-thumb-ratio);
  height: auto;
  min-height: 0;
  margin: 0;
  background: var(--panel-bg);
  border-radius: var(--radius-surface) var(--radius-surface) 0 0;
  overflow: hidden;
}
.case-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--navy) 8%, transparent), color-mix(in srgb, var(--navy) 44%, transparent)),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--blue-pale) 18%, transparent), transparent 38%);
  z-index: 1;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.case-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--case-card-thumb-focus-x) var(--case-card-thumb-focus-y);
  display: block;
  filter: saturate(0.78);
  transition:
    transform var(--duration-image) var(--ease-decelerate),
    filter var(--duration-filter) var(--ease-standard);
}
.case-card:hover .case-thumb img {
  transform: scale(1.02);
  filter: saturate(0.92);
}
.case-thumb-img--focus-low { --case-card-thumb-focus-y: var(--case-card-thumb-focus-y-low); }

@media (hover: none) {
  .case-link { border-bottom-color: currentColor; }
  .case-card { border-color: color-mix(in srgb, var(--accent-muted) 28%, transparent); }
  .case-link::after { transform: translateX(var(--case-card-hover-shift)); }
  .case-card:hover .case-card-impact { border-left-color: var(--accent-muted); }
}
.pv-grid {
  --pv-gap: var(--perspective-gap);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--pv-gap);
  row-gap: 0;
  padding-top: var(--space-2);
  list-style: none;
}
.pv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-1) 0 0;
}
.pv-card + .pv-card { padding-left: 0; }
.pv-card + .pv-card::before {
  content: '';
  position: absolute;
  left: calc(var(--pv-gap) / -2);
  top: 0.1rem;
  bottom: 0.05rem;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--border-dark) 52%, transparent) 20%,
    color-mix(in srgb, var(--border-dark) 28%, transparent) 68%,
    transparent
  );
}
.pv-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin-bottom: var(--stack-md);
}
.pv-index {
  display: block;
  color: var(--accent-muted);
  font-size: var(--type-perspective-index);
  font-weight: var(--weight-heading);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}
.pv-card h3 {
  max-width: var(--measure-pv-title);
  font-size: var(--type-feature-title);
  font-weight: var(--weight-heading);
  color: var(--text);
  margin-bottom: var(--space-sm);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-heading);
}
.pv-card p {
  max-width: var(--measure-pv-body);
  font-size: var(--type-body-sm);
  color: var(--muted);
  line-height: var(--leading-body);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--content-gap);
  align-items: start;
}
.about-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-surface);
  border: 1px solid var(--border-surface);
  background: color-mix(in srgb, var(--off-white) 96%, transparent);
  box-shadow: var(--shadow-media);
  overflow: hidden;
}
.about-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.about-text h3 {
  font-size: var(--type-about-statement);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-brief);
  color: var(--text);
  margin: 0 0 var(--stack-lg);
  overflow-wrap: break-word;
}
.about-text p {
  font-size: var(--type-body);
  color: var(--muted);
  line-height: var(--leading-body);
  margin-bottom: var(--stack-md);
}
.about-text p strong { font-weight: var(--weight-strong); color: var(--text); }
.about-hi { color: var(--accent); }
.contact-section {
  position: relative;
  z-index: var(--z-section);
  --contact-bg:            var(--panel-bg);
  --contact-text:          var(--panel-text);
  --contact-muted:         var(--panel-muted);
  --contact-accent:        var(--panel-soft);
  --contact-surface:       var(--panel-control-bg);
  --contact-surface-hover: var(--panel-control-bg-hover);
  --contact-border:        var(--panel-control-border);
  --contact-border-hover:  var(--panel-control-border-hover);
  background: var(--contact-bg);
  color: var(--contact-text);
}
.contact-wrap {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding-block: var(--contact-y);
  padding-inline: var(--side);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--contact-col-min), 0.78fr);
  gap: var(--stack-xl);
  align-items: center;
  text-align: left;
}
.contact-copy { min-width: 0; }
.contact-heading {
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--contact-muted);
  line-height: var(--leading-ui);
  margin: 0 0 var(--space-sm);
}
.contact-prompt {
  max-width: var(--measure-contact-prompt);
  font-size: var(--type-contact-prompt);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display-tight);
  color: var(--contact-text);
  margin-bottom: var(--stack-lg);
  text-wrap: balance;
}
.contact-prompt em { font-style: normal; color: var(--contact-accent); }
.contact-sub {
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  color: var(--contact-muted);
  max-width: 47ch;
  line-height: var(--leading-body);
}
.contact-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
.contact-link {
  position: relative;
  min-height: var(--contact-control-min);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--stack-md);
  font-family: var(--font);
  font-size: var(--type-body-sm);
  font-weight: var(--weight-strong);
  letter-spacing: 0;
  text-transform: none;
  color: var(--contact-text);
  background: var(--contact-surface);
  border: 1px solid var(--contact-border);
  border-radius: var(--radius-control);
  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-decelerate);
}
.contact-link::after {
  content: '→';
  margin-left: auto;
  font-size: var(--type-body-sm);
  line-height: var(--leading-solid);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.contact-link svg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  flex-shrink: 0;
}
.contact-link > span {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}
.contact-link:hover {
  color: var(--contact-text);
  background: var(--contact-surface-hover);
  border-color: var(--contact-border-hover);
  transform: translateY(var(--lift-control));
}
.contact-link:hover::after { transform: translateX(var(--action-arrow-shift)); }
.contact-link:focus-visible {
  outline: var(--focus-ring-invert);
  outline-offset: var(--focus-offset);
}
#home, #work, #perspectives, #about, #contact {
  scroll-margin-top: calc(var(--nav-height) + env(safe-area-inset-top));
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (max-width: 960px) {
  .pv-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;
  }
  .pv-card {
    display: grid;
    grid-template-columns: clamp(var(--space-12), 10vw, var(--space-14)) minmax(0, 1fr);
    column-gap: var(--stack-compact);
    row-gap: var(--space-1);
    min-height: auto;
    padding: var(--space-4) 0;
  }
  .pv-card + .pv-card {
    padding-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--border-dark) 52%, transparent);
  }
  .pv-card + .pv-card::before { content: none; }
  .pv-head {
    grid-column: 1;
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-1);
    margin-bottom: 0;
  }
  .pv-card h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    max-width: min(100%, 30rem);
    margin-bottom: 0;
  }
  .pv-card p {
    grid-column: 2;
    grid-row: 2;
    max-width: 42rem;
  }
}
@media (max-width: 1000px) {
  .contact-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
  .case-wide .case-card {
    flex-direction: column-reverse;
  }
  .case-wide .case-thumb {
    width: 100%;
    aspect-ratio: var(--case-card-thumb-ratio);
    align-self: auto;
    border-radius: var(--radius-surface) var(--radius-surface) 0 0;
  }
  h2.sec-title { max-width: 9ch; }
  #work h2.sec-title { max-width: none; white-space: nowrap; }
  #perspectives h2.sec-title { max-width: 11ch; }
  #about h2.sec-title { max-width: 8ch; }

  .about-text h3 { line-height: var(--leading-copy-compact); }
  .about-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .about-img { max-width: var(--about-img-max); }

  .case-card {
    background: color-mix(in srgb, var(--off-white) 98%, transparent);
    box-shadow: var(--shadow-card-mobile);
  }
  .case-card:hover {
    transform: none;
    box-shadow: var(--shadow-card-mobile);
  }

  .pv-card h3 { max-width: min(100%, 28rem); }
  .pv-card p { max-width: 34rem; font-size: var(--type-meta); line-height: var(--leading-copy-medium); }
}
@media (max-width: 480px) {
  .hero { gap: var(--stack-compact); }
  .h1-name {
    max-width: 8.6ch;
    line-height: var(--leading-display);
    white-space: normal;
  }
  .hero-proof { line-height: var(--leading-copy-compact); }
  .hero-social-link { width: var(--control-size-mobile); height: var(--control-size-mobile); }

  .pv-card {
    grid-template-columns: clamp(var(--space-10), 12vw, var(--space-12)) minmax(0, 1fr);
    gap: var(--space-1) var(--space-2);
    padding: var(--stack-compact) 0;
  }
  .pv-head { grid-row: 1; }
  .pv-card h3 { align-self: center; }
  .pv-card p { grid-column: 1 / -1; grid-row: 2; max-width: none; font-size: var(--type-meta); }

  .about-img { max-width: var(--about-img-max-mobile); }

  .contact-sub { font-size: var(--type-body-sm); line-height: var(--leading-body); }
  .contact-links { grid-template-columns: 1fr; }
  .contact-link { min-height: var(--contact-control-min-mobile); padding: var(--space-sm) var(--stack-md); }
}
[data-theme="night"] .h1-name { color: var(--text); }

[data-theme="night"] .hero-social-link { color: var(--text); }
[data-theme="night"] .hero-social-link:hover { color: var(--text); }

[data-theme="night"] .about-img {
  background: color-mix(in srgb, var(--off-white) 76%, transparent);
  box-shadow: var(--shadow-media);
}
[data-theme="night"] .about-img img {
  filter: saturate(0.88) brightness(0.82) contrast(1.04);
}

[data-theme="night"] .case-card {
  background: color-mix(in srgb, var(--off-white) 76%, transparent);
  box-shadow: var(--shadow-card);
}
[data-theme="night"] .case-card::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 4.9%, transparent), color-mix(in srgb, var(--accent) 1.7%, transparent));
}
[data-theme="night"] .case-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: color-mix(in srgb, var(--accent) 44%, transparent);
}
[data-theme="night"] .case-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cream-nav) 10%, transparent), color-mix(in srgb, var(--cream-nav) 38%, transparent)),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 38%);
  z-index: 1;
  mix-blend-mode: normal;
  pointer-events: none;
}
[data-theme="night"] .case-thumb img {
  filter: saturate(0.62) brightness(0.88);
}
[data-theme="night"] .case-card:hover .case-thumb img {
  filter: saturate(0.72) brightness(0.92);
}
[data-theme="night"] .pv-card + .pv-card::before {
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--accent-label) 34%, transparent) 20%,
    color-mix(in srgb, var(--accent-label) 18%, transparent) 68%,
    transparent
  );
}