/* Form styles and responsive behavior kept separate from the design foundation. */
/* Keep off-canvas navigation and carousel transforms from widening mobile pages. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

input,
textarea {
  background: #0c0b0d;
  border: 1px solid #39323d;
  border-radius: 0.5rem;
  color: var(--white);
  font: inherit;
  padding: 0.8rem;
  width: 100%;
}

html[data-theme="light"] {
  --black: #fcfafc;
  --white: #1b151d;
  --gray: #68616b;
  --ink: #1b151d;
  --line: #e1d9e3;
}

html[data-theme="light"] .site-header {
  background: rgb(252 250 252 / 96%);
  border-bottom: 1px solid #eee8ef;
  box-shadow: 0 8px 22px rgb(46 25 49 / 7%);
}

html[data-theme="light"] .skill,
html[data-theme="light"] .contact-form,
html[data-theme="light"] .about-cta {
  background: #fff;
  border-color: #ded7e0;
  box-shadow: 0 12px 35px #5e37600a;
}

html[data-theme="light"] .about-image img {
  box-shadow: 0 24px 52px rgb(72 36 77 / 18%);
}

html[data-theme="light"] .values,
html[data-theme="light"] .site-footer {
  background: #f2edf3;
}

html[data-theme="light"] .project-template {
  background: #fff;
  border-color: #ded7e0;
}

html[data-theme="light"] .project-template:hover,
html[data-theme="light"] .project-template:focus-visible {
  box-shadow: 0 18px 42px #7e418826;
}

html[data-theme="light"] .project-template img,
html[data-theme="light"] .project-template video,
html[data-theme="light"] .project-detail-media img,
html[data-theme="light"] .project-detail-media video {
  background: #f2edf3;
}

html[data-theme="light"] .tool-category-tab:hover,
html[data-theme="light"] .tool-category-tab:focus-visible,
html[data-theme="light"] .tool-category-tab.is-active {
  color: #1b151d;
}

html[data-theme="light"] .brand-label,
html[data-theme="light"] .skill-icon-list span b,
html[data-theme="light"] .tool-label,
html[data-theme="light"] .brand-sub {
  background: #1b151d;
  border-color: #1b151d;
  color: #fff;
}

html[data-theme="light"] .copyright {
  border-top-color: #ded7e0;
}

html[data-theme="light"] input,
html[data-theme="light"] textarea {
  background: #fff;
  border-color: #cfc6d1;
  color: #171217;
}

html[data-theme="light"] .projects-section {
  background: #1a111b;
}

html[data-theme="light"] .projects-section .eyebrow,
html[data-theme="light"] .projects-section h2 {
  color: #f2f2f2;
}

input:focus,
textarea:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px #e652ed30;
  outline: 0;
}

.field small {
  color: #ff9ca0;
  display: block;
  font-size: 0.68rem;
  min-height: 1rem;
  padding-top: 0.25rem;
}

.form-feedback { font-size: 0.75rem; margin: 1rem 0 0; }
.form-feedback.success { color: #92df9f; }
.form-feedback.error { color: #ff9ca0; }
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.reveal--scale {
  transform: scale(0.94);
}

.reveal.reveal--from-left {
  transform: translateX(-34px);
}

.reveal.reveal--from-right {
  transform: translateX(34px);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal.visible .portrait,
.reveal.visible .project-card.active {
  animation: soft-float 900ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

/* Project listing: 4 columns on wide screens, then 3, 2, and 1 as space narrows. */
@media (min-width:901px) and (max-width:1200px) {
  .projects-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (min-width:701px) and (max-width:900px) {
  .projects-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@keyframes soft-float {
  0% { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}

/* Desktop presentation mode: one main section per viewport scroll. */
@media (min-width: 769px) {
  html {
    --header-offset:76px;
    scroll-padding-top:var(--header-offset);
    scroll-snap-type:y mandatory;
  }

  main > section {
    align-content:center;
    display:grid;
    height:calc(100svh - var(--header-offset));
    min-height:calc(100svh - var(--header-offset));
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  .site-footer {
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  .hero,
  .page-hero {
    height:calc(100svh - var(--header-offset));
    min-height:calc(100svh - var(--header-offset));
  }

  /* About content varies in length; allow its detailed sections to grow instead of overlapping. */
  body[data-page="about"] main > section:not(.page-hero) {
    height:auto;
  }

  /* Project listings are a continuous page: keep their heading attached to the grid. */
  main[data-project-detail] > section {
    display:block;
    height:auto;
    min-height:0;
    scroll-snap-align:none;
    scroll-snap-stop:normal;
  }

  html:has(main[data-project-detail]) {
    scroll-snap-type:none;
  }

  body[data-page="projects"] main > .projects-page {
    display:block;
    height:auto;
    min-height:calc(100svh - var(--header-offset));
    padding-top:0;
  }

  /* Match page introductions even though one is a section and one is nested. */
  body[data-page="about"] main > .page-hero,
  body[data-page="projects"] .projects-page .page-hero {
    align-content:start;
    display:grid;
    gap:0;
    padding:clamp(4rem,12svh,8rem) 0 2.25rem;
    text-align:left;
  }

  body[data-page="about"] main > .about-opening,
  body[data-page="projects"] .projects-page .page-hero {
    height:auto;
    min-height:0;
  }

  body[data-page="about"] main > .about-opening {
    grid-template-columns:minmax(0,1fr) clamp(310px,32vw,400px);
    grid-template-rows:min-content min-content minmax(0,1fr);
    min-height:calc(100svh - var(--header-offset));
    padding-bottom:clamp(4rem,12svh,8rem);
    column-gap:clamp(2rem,5vw,4rem);
  }
  .about-opening > .eyebrow,
  .about-opening > h1 { grid-column:1; }
  .about-opening-body { display:contents; }
  .about-opening-bio { grid-column:1; grid-row:3; align-self:start; }
  .about-opening .about-resume-card {
    grid-column:2;
    grid-row:1 / span 3;
    align-self:center;
    margin-top:0;
  }

  body:is([data-page="about"], [data-page="projects"]) .page-hero > .eyebrow {
    margin:0 0 .75rem;
  }

  body:is([data-page="about"], [data-page="projects"]) .page-hero > h1 {
    margin:0 0 1.5rem;
  }

  body:is([data-page="about"], [data-page="projects"]) .page-hero > p:not(.eyebrow) {
    margin:0;
    max-width:540px;
  }

  .projects-section {
    align-content: center;
    display: grid;
    overflow:clip;
    padding:clamp(.9rem,2vh,1.5rem) 0;
  }

  .projects-section .container {
    transform:none;
  }

  .projects-heading h2 {
    font-size:clamp(2.5rem,5.3vw,5.3rem);
    white-space:nowrap;
  }

  .carousel-window {
    padding:1rem 0 2rem;
  }

  .project-card {
    flex-basis:clamp(320px,24vw,400px);
  }

  .contact-page {
    min-height: calc(100svh - var(--header-offset));
    padding-block: clamp(2.5rem, 6vw, 5rem);
  }
}

@media (max-width: 768px) {
  :root {
    --container:min(640px,calc(100% - 3rem));
    --space:clamp(3rem,12vw,4.5rem);
    --intro-top:2.75rem;
    --eyebrow-gap:.75rem;
    --copy-gap:1rem;
    --intro-bottom:2rem;
  }
  body.nav-open { overflow: hidden; }
  body { padding-top:var(--header-offset,76px); }
  .site-header {
    padding:1rem 0;
    position:fixed;
    inset:0 0 auto;
    width:100%;
  }
  .nav-menu {
    align-items:flex-end;
    background:var(--black);
    box-shadow:-18px 0 45px #0008;
    display:flex;
    flex-direction:column;
    gap:1.6rem;
    height:100dvh;
    justify-content:flex-start;
    margin-left:0;
    max-width:340px;
    opacity:0;
    padding:6.25rem 1.6rem 2rem;
    pointer-events:none;
    position:fixed;
    right:0;
    text-align:right;
    top:0;
    transform:translateX(105%);
    transition:
      transform .38s cubic-bezier(.2,.8,.2,1),
      opacity .24s ease;
    width:min(82vw,340px);
    z-index:22;
  }
  .nav-menu.open {
    opacity:1;
    pointer-events:auto;
    transform:translateX(0);
  }
  .nav-links {
    align-items:flex-end;
    display:grid;
    gap:1.35rem;
    justify-items:end;
    width:100%;
  }
  .nav-links a { font-size:1.05rem; }
  .nav-links a:after {
    left:auto;
    right:0;
    transform-origin:right;
  }
  .nav > .theme-toggle {
    margin:0 .75rem 0 auto;
    position:relative;
    order:1;
    z-index:24;
    flex-shrink:0;
    transition:opacity .18s ease, visibility .18s ease;
  }
  body.nav-open .nav > .theme-toggle {
    opacity:0;
    pointer-events:none;
    visibility:hidden;
  }
  .menu-toggle {
    display:block;
    margin-left:0;
    position:relative;
    order:2;
    z-index:24;
  }
  h1 { font-size:clamp(2.8rem,14vw,4.4rem); margin-bottom:1rem; }
  h2 { font-size:clamp(2.2rem,11vw,3.5rem); margin-bottom:1rem; }
  .lead { font-size:.95rem; }
  .button-row { gap:1rem; margin-top:1.4rem; }
  .hero {
    align-items:stretch;
    display:flex;
    flex-direction:column;
    gap:0;
    grid-template-columns:1fr;
    min-height:unset;
    padding:var(--intro-top) 0 3.5rem;
  }
  /* Let the portrait sit between the role and introductory copy on phones. */
  .hero-copy { display:contents; }
  .hero-copy .eyebrow { order:1; margin:0 0 var(--eyebrow-gap); }
  .hero-copy h1 { order:2; margin:0 0 var(--copy-gap); }
  .hero-copy .hero-title { order:3; margin:0 0 1.25rem; }
  .hero-portrait { order:4; }
  .hero-copy .lead { order:5; margin:1.5rem 0 0; }
  .hero-copy .button-row { order:6; margin-top:1.5rem; }
  .portrait-stack { min-height: 360px; }
  .portrait-small { height: 260px; }
  .portrait-tall { height: 355px; }
  .statement-copy { margin-top:1rem; }
  .brand-repeat {
    display:flex;
    flex-wrap:wrap;
    gap:1.25rem 2rem;
    justify-content:center;
    margin-inline:auto;
    margin-top:1.6rem;
    max-width:360px;
  }
  .brand-item {
    flex:0 0 52px;
    min-height:42px;
  }
  .projects-section { padding:3.25rem 0 4rem; }
  .project-glow { height:460px; top:0; width:150%; }
  .projects-heading { max-width:min(100%,360px); }
  .carousel-window { padding:.5rem 0 1.3rem; }
  .project-card { flex-basis:min(76vw,340px); }
  .project-more { margin-top:1rem; }
  .projects-grid { grid-template-columns:1fr; }
  .skill { min-height: 120px; }
  .tool-list div { flex-basis:72px; }
  .about-preview, .about-detail, .contact-page { gap: 2.25rem; grid-template-columns: 1fr; }
  .experience-card { grid-template-columns: 1fr; }
  .experience-card .date { margin-bottom: -1rem; }
  .experience-bottom {
    align-items:flex-start;
    flex-direction:column;
    gap:.85rem;
  }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid .socials { grid-column: 1 / -1; }
  .value-grid, .stats { grid-template-columns: 1fr; }
  /* Give every page intro the same top inset; the listing owns its nested intro. */
  .projects-page { padding-top:0; }
  .page-hero,
  .contact-page,
  .project-detail-hero {
    min-height:0;
    padding:var(--intro-top) 0 var(--intro-bottom);
  }
  .page-hero,
  .contact-intro,
  .project-heading-copy,
  .section-intro,
  .about-copy,
  .about-cta,
  .work-cta-copy {
    display:flow-root;
  }
  /* Explicit block margins avoid browser defaults and collapsing text margins. */
  main .eyebrow { margin:0 0 var(--eyebrow-gap); }
  .page-hero h1,
  .contact-intro h1,
  .project-heading-copy h1,
  .about-copy h2,
  .about-cta h2,
  .work-cta h2 {
    margin:0 0 var(--copy-gap);
  }
  .page-hero > p:not(.eyebrow),
  .contact-intro > p:not(.eyebrow) {
    margin:0;
    max-width:min(100%,34rem);
  }
  .section-intro { margin-bottom:1.5rem; }
  .section-intro h2 { margin:0; }
  .section-intro > p:not(.eyebrow) { margin:var(--copy-gap) 0 0; }
  .about-copy > p:not(.eyebrow) { margin:0 0 var(--copy-gap); }
  .about-copy > p:last-child,
  .value-grid article > p:last-child,
  .experience-card > div > p:last-child { margin-bottom:0; }
  .work-cta-copy > p:not(.eyebrow) { margin:0 auto 1.5rem; }
  .contact-intro .email-link { margin:1.5rem 0; }
  .project-heading-copy .text-link { margin:0 0 1.5rem; }
  .project-summary { margin:1.5rem 0 0; }
  .project-description > .lead { margin:0; }
  .project-detail-media.container { width:var(--container); }
  .form-row { grid-template-columns: 1fr; }
  .site-footer { margin-top:3rem; padding-top:2.25rem; }
}

/* Small tablets share the compact layout; keep a useful two-column project grid. */
@media (min-width:701px) and (max-width:768px) {
  .projects-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:768px) {
  html { scroll-padding-top:var(--header-offset,76px); }
  .about-opening-body { gap:2rem; }
  .about-resume-card { order:-1; justify-self:center; }
  .about-cta-container { padding-block:var(--space); }
  .about-cta { width:100%; }
  .footer-grid > * { min-width:0; }
  .footer-grid p { margin-bottom:0; }
}

@media (max-width: 430px) {
  :root {
    --container:calc(100% - 3rem);
    --space:3rem;
  }
  .portrait-stack { gap: 0.7rem; min-height: 310px; }
  .portrait-small { height: 220px; }
  .portrait-tall { height: 310px; }
  .portrait-note { font-size: 0.58rem; }
  .brand-repeat { gap:1.15rem 1.6rem; max-width:310px; }
  .project-card { flex-basis:82vw; }
  .project-content { padding: 1.1rem; }
  .projects-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .statement { padding-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .reveal { opacity: 1; transform: none; will-change: auto; }
}