*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
  overflow-x: hidden;
}
main { max-width: 64rem; margin: 0 auto; padding: 0 var(--space-4); }
section { padding: var(--space-5) 0; scroll-margin-top: var(--space-3); }
#hello { min-height: 100svh; display: flex; align-items: center; position: relative; }
#contact { min-height: 70svh; }
h1, h2, h3, p, ul, ol { margin: 0; }
h2 { font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; margin-bottom: var(--space-4); }
h3 { font-size: var(--step-1); line-height: 1.25; font-weight: 600; }
p, li { max-width: var(--measure); }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
ul, ol { padding: 0; list-style: none; }

/* Hello */
.field { position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; pointer-events: none; }
.hello { position: relative; z-index: 1; }
.hello__name { color: var(--muted); margin-bottom: var(--space-3); }
.hello__tagline { font-size: var(--step-4); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; max-width: 14ch; }
.hello__sentence { margin-top: var(--space-4); font-size: var(--step-1); max-width: 34rem; }
.hello__links { margin-top: var(--space-4); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* About */
.about__body { display: grid; gap: var(--space-4); }
.about__body > h2 { margin-bottom: 0; }
.about__text { display: grid; gap: var(--space-3); max-width: var(--measure); }
/* Photo in its own column, level with the heading */
.about__body--photo { grid-template-columns: minmax(0, 1fr) 14rem; grid-template-areas: "head photo" "text photo"; grid-template-rows: auto 1fr; align-items: start; }
.about__body--photo > h2 { grid-area: head; }
.about__body--photo > .about__text { grid-area: text; }
.about__body--photo > .about__portrait { grid-area: photo; }
.about__photo { width: 100%; height: auto; display: block; }
#demo-slot:not(:empty) { margin-top: var(--space-5); }


/* Project filters */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-5); }
.filters button { font: inherit; font-size: var(--step--1); color: var(--ink); background: none; border: 1px solid var(--line); border-radius: 999px; padding: var(--space-1) var(--space-3); cursor: pointer; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.filters button:hover { border-color: var(--accent); }
.filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.filters__count { margin-left: auto; color: var(--muted); font-size: var(--step--1); }

/* Work timeline: jobs share one x-position, dated rail on the right */
.timeline { display: grid; gap: var(--space-5); }
.timeline-item { display: grid; grid-template-columns: minmax(0, 40rem) 1fr; column-gap: var(--space-5); max-width: none; }
.timeline-item article { border-left: 2px solid var(--line); padding-left: var(--space-3); display: grid; gap: var(--space-2); align-content: start; }
.timeline-rail { position: relative; padding-left: var(--space-4); }
.timeline-rail::before { content: ""; position: absolute; left: 0.25rem; top: 0.5rem; bottom: calc(-1 * var(--space-5) - 0.5rem); width: 1px; background: var(--line); }
.timeline-item:last-child .timeline-rail::before { bottom: auto; height: 0; }
.timeline-dot { position: absolute; left: 0; top: 0.4rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--bg); border: 1px solid var(--accent); }
.timeline-logo { display: block; margin-top: var(--space-3); width: 8rem; height: auto; max-height: 6rem; object-fit: contain; object-position: left center; }
.timeline-rail time { display: block; color: var(--muted); font-size: var(--step--1); line-height: 1.6; }

/* Alternating lists */
.alt-list { display: grid; gap: var(--space-5); }
.alt-item { width: 58%; max-width: none; }
.alt-item--left { justify-self: start; }
.alt-item--right { justify-self: end; }
.alt-item article { border-left: 2px solid var(--line); padding-left: var(--space-3); display: grid; gap: var(--space-2); }
.item-head { display: flex; align-items: center; gap: var(--space-2); }
.item-icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--accent); }
.item-meta { color: var(--muted); font-size: var(--step--1); }
.item-points { display: grid; gap: var(--space-2); padding-left: 1.1rem; list-style: disc; font-size: var(--step--1); }
.item-points li::marker { color: var(--muted); }
.item-tags { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--muted); font-size: var(--step--1); }
.item-links { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--step--1); }

/* Contact */
.contact__links { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.contact__links li { max-width: none; border-bottom: 1px solid var(--line); }
.contact__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2); color: var(--ink); text-decoration: none; }
.contact__row .item-icon { width: 1.5rem; height: 1.5rem; stroke-width: 1.5; }
.contact__body { display: grid; gap: var(--space-1); }
.contact__label { font-size: var(--step-1); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; }
.contact__detail { color: var(--muted); font-size: var(--step--1); }
.contact__arrow { color: var(--muted); }
.contact__row:hover .contact__label, .contact__row:focus-visible .contact__label { color: var(--accent); }

/* Contact form */
.contact__grid--form { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .contact__grid--form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-5); align-items: start; } }
.contact-form { display: grid; gap: var(--space-3); max-width: 40rem; }
.contact-form__heading { margin-bottom: var(--space-1); line-height: 1.1; }
.contact-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); }
.contact-form__field { display: grid; gap: var(--space-1); }
.contact-form__field span { font-size: var(--step--1); color: var(--muted); }
.contact-form input, .contact-form textarea { font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.75rem; width: 100%; transition: border-color 0.2s, box-shadow 0.2s; }
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(43 79 203 / 0.15); }
.contact-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.contact-form__submit { font: inherit; font-weight: 600; color: #fff; background: var(--accent); border: 0; border-radius: 999px; padding: 0.65rem 1.4rem; cursor: pointer; transition: transform 0.15s, background-color 0.2s; }
.contact-form__submit:hover { background: #1F3EA8; }
.contact-form__submit:active { transform: scale(0.97); }
.contact-form__submit:disabled { opacity: 0.6; cursor: progress; }
.contact-form__note { color: var(--muted); font-size: var(--step--1); flex: 1 1 14rem; }
.contact-form__status:empty { display: none; }
.contact-form__status[data-state="success"] { color: #1E6B3A; }
.contact-form__status[data-state="error"], .contact-form__status[data-state="invalid"] { color: #A3262A; }
.contact__row:hover .contact__arrow, .contact__row:focus-visible .contact__arrow { color: var(--accent); }
.contact__row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .contact__label, .contact__arrow { transition: color 0.2s ease, transform 0.25s ease; }
  .contact__row:hover .contact__arrow, .contact__row:focus-visible .contact__arrow { transform: translateX(6px); }
  .contact__row:hover .contact__label { transform: translateX(4px); }
}
@media (max-width: 719px) {
  .contact__row { gap: var(--space-3); padding: var(--space-3) 0; }
  .contact__row .item-icon { width: 1.75rem; height: 1.75rem; }
}

/* Side navigation */
.side-nav {
  position: fixed; right: var(--space-3); top: 50%; transform: translateY(-50%);
  display: grid; gap: var(--space-3); justify-items: end; z-index: 10;
}
.side-nav a { position: relative; display: block; padding: var(--space-1); color: var(--muted); text-decoration: none; font-size: var(--step--1); line-height: 0; }
.side-nav__dot { display: block; width: 0.55rem; height: 0.55rem; border: 1px solid var(--muted); border-radius: 50%; flex: none; transition: background-color 0.2s, border-color 0.2s; }
.side-nav a[aria-current] { color: var(--ink); }
.side-nav a[aria-current] .side-nav__dot { background: var(--accent); border-color: var(--accent); }

.side-nav__label { position: absolute; right: calc(100% + var(--space-1)); top: 50%; transform: translateY(-50%); white-space: nowrap; line-height: 1.2; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.side-nav a:hover .side-nav__label, .side-nav a:focus-visible .side-nav__label { opacity: 1; }
@media (min-width: 1181px) { .side-nav a[aria-current] .side-nav__label { opacity: 1; } }

/* Gentle hover touches (cursor devices only, never with reduced motion) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .side-nav__dot { transition: transform 0.2s, background-color 0.2s, border-color 0.2s; }
  .side-nav a:hover .side-nav__dot { transform: scale(1.6); }
  .alt-item article { transition: transform 0.25s ease, border-color 0.25s ease; }
  .alt-item:hover article { transform: translateY(-2px); border-color: var(--accent); }
  main a { text-underline-offset: 0.22em; transition: text-underline-offset 0.2s; }
  main a:hover { text-underline-offset: 0.4em; }
}

@media (max-width: 719px) {
  .timeline-item { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }
  .timeline-item article { order: 2; }
  .timeline-rail { order: 1; padding-left: 0; display: flex; align-items: center; gap: var(--space-3); }
  .timeline-rail::before, .timeline-dot { display: none; }
  .timeline-logo { width: 6rem; max-height: 4rem; margin-top: 0; order: -1; }
  .filters__count { margin-left: 0; width: 100%; }
  main { padding: 0 var(--space-3); }
  section { padding: var(--space-5) 0; }
  .side-nav { top: auto; bottom: var(--space-3); right: var(--space-3); transform: none; display: flex; gap: var(--space-3); background: var(--bg); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: 999px; }
  .side-nav a { padding: var(--space-1); }
  .side-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .about__body--photo { grid-template-columns: 1fr; grid-template-areas: "head" "text" "photo"; grid-template-rows: auto; }
  .about__portrait { max-width: 14rem; }
  .alt-item { width: 100%; }
  .alt-item article { border-left: 0; padding-left: 0; }
  .alt-item--left article { border-left: 2px solid var(--accent); padding-left: var(--space-3); }
  .alt-item--right article { border-right: 2px solid var(--accent); padding-right: var(--space-3); }
  .hello__tagline { max-width: none; }
}

/* Project visuals: opposite the text on wide screens, under it on phones */
.alt-item.has-visual { width: 100%; display: grid; gap: var(--space-4); align-items: center; }
.alt-item--left.has-visual { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
.alt-item--right.has-visual { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
.alt-item--right.has-visual article { order: 2; }
.alt-item--right.has-visual .visual { order: 1; }
.visual { min-width: 0; display: grid; gap: var(--space-2); }
.visual img { display: block; width: 100%; height: 100%; object-fit: contain; }
.visual:not(.visual--carousel) { aspect-ratio: var(--ratio); }
.visual__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; margin: 0; padding: 0; border-radius: 8px; aspect-ratio: var(--ratio); }
.visual__track::-webkit-scrollbar { display: none; }
.visual__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visual__slide { flex: 0 0 100%; scroll-snap-align: start; }
.visual--carousel { position: relative; }
.visual__controls { position: absolute; inset: 0 0 auto; aspect-ratio: var(--ratio); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-2); pointer-events: none; }
.visual__controls[hidden] { display: none; }
.visual__nav { pointer-events: auto; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: var(--ink); box-shadow: 0 2px 10px rgb(27 26 23 / 0.18); cursor: pointer; opacity: 0; transform: scale(0.9); transition: opacity 0.2s, transform 0.2s, color 0.2s; }
.visual--carousel:hover .visual__nav, .visual--carousel:focus-within .visual__nav { opacity: 1; transform: scale(1); }
.visual__nav:hover { color: var(--accent); }
.visual__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: none) { .visual__nav { display: none; } } /* phones: swipe instead */
.visual__dots { display: flex; justify-content: center; gap: 6px; }
.visual__dots[hidden] { display: none; }
.visual__dot { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width 0.3s, background-color 0.3s; }
.visual__dot.is-active { width: 18px; background: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 719px) {
  .alt-item--left.has-visual, .alt-item--right.has-visual { grid-template-columns: minmax(0, 1fr); }
  .alt-item--right.has-visual article, .alt-item--right.has-visual .visual { order: 0; }
}