/* ============================================================
   VARIABLES
   ============================================================ */

:root {
  /* Semantic tokens, mapped onto the palette in colors.css. */
  --color-bg: var(--paper);
  --color-bg-alt: var(--paper-d1);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-l1);
  --color-accent: var(--accent);
  --color-accent-dark: var(--accent-d1);
  --color-border: color-mix(in oklch, var(--ink) 12%, transparent);

  /* Spacing scale — 4px (0.25rem) base grid. */
  --space-3xs: 0.25rem;   /* 4px */
  --space-2xs: 0.5rem;    /* 8px */
  --space-xs:  0.75rem;   /* 12px */
  --space-sm:  1rem;      /* 16px */
  --space-md:  1.25rem;   /* 20px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 2.5rem;    /* 40px */
  --space-3xl: 3rem;      /* 48px */
  --space-4xl: 4rem;      /* 64px */
  --space-5xl: 5rem;      /* 80px */
  --space-6xl: 7.5rem;    /* 120px */

  --gutter: var(--space-xl);
  --max-width: 90rem;             /* 1440px — hard cap on the page */
  --wide-width: 75rem;            /* 1200px — alignwide */
  --content-max-width: 42.5rem;   /* 680px — reading measure */

  --radius: 0.25rem;

  /* Type scale */
  --fs-xs:   0.8125rem;                    /* 13px */
  --fs-sm:   0.875rem;                     /* 14px */
  --fs-base: 1.125rem;                     /* 18px — body copy (Archivo runs narrow) */
  --fs-md:   1.25rem;                      /* 20px */
  --fs-lg:   1.5rem;                       /* 24px */
  --fs-xl:   clamp(1.75rem, 3vw, 2.25rem);
  --fs-2xl:  clamp(2.25rem, 5vw, 3.5rem);  /* page titles */
  --fs-3xl:  clamp(3rem, 8vw, 6rem);       /* 404 */

  --lh-tight:   1.15;
  --lh-base:    1.65;

  --transition-fast: 0.2s ease;
  --transition-slow: 0.4s ease;

  --z-header:  900;
  --z-overlay: 1000;

  /* Gravity Forms (css/forms.css) */
  --form-field-bg: transparent;
  --form-field-border: var(--color-border);
  --form-field-border-focus: var(--color-text);
  --form-label: var(--color-text-muted);
  --form-error: oklch(52% 0.18 25);
}



/* ============================================================
   RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

img,
video,
iframe,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: var(--lh-tight);
  overflow-wrap: break-word;
  text-wrap: balance;
}

p,
li,
blockquote,
figcaption {
  text-wrap: pretty;
  hanging-punctuation: first allow-end last;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 0.2rem;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: var(--z-overlay);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-text);
  color: var(--color-bg);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}



/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--content {
  max-width: calc(var(--content-max-width) + var(--gutter) * 2);
}

.content {
  min-height: 60vh;
}



/* ============================================================
   BUTTONS
   ============================================================ */

.btn,
.wp-block-button__link {
  display: inline-block;
  padding: var(--space-xs) var(--space-xl);
  border: 1px solid var(--color-text);
  border-radius: 0;
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.btn:hover,
.wp-block-button__link:hover {
  background: transparent;
  color: var(--color-text);
}

.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--color-text);
}

.is-style-outline .wp-block-button__link:hover {
  background: var(--color-text);
  color: var(--color-bg);
}



/* ============================================================
   SITE HEADER
   ============================================================ */

.site-header {
  position: relative;
  z-index: var(--z-header);
  padding-block: var(--space-lg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

.site-header__logo {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.site-header__logo a {
  text-decoration: none;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav a {
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a,
.section-portfolio .main-nav .menu-item-object-project > a {
  color: var(--color-accent);
}

/* Social icons (header + footer) */

.main-nav .social-icons,
.social-nav .social-icons {
  gap: var(--space-sm);
}

.social-icons a {
  display: flex;
  align-items: center;
  color: inherit;
}

.social-icons a:hover {
  color: var(--color-accent);
}

.social-icons__svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
}

/* Hamburger — hidden on desktop, see MOBILE. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: var(--space-2xs);
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.is-nav-open .nav-toggle__bar:nth-child(2) { transform: translateY(6px) rotate(45deg); }
.is-nav-open .nav-toggle__bar:nth-child(3) { opacity: 0; }
.is-nav-open .nav-toggle__bar:nth-child(4) { transform: translateY(-6px) rotate(-45deg); }



/* ============================================================
   SITE FOOTER
   ============================================================ */

.site-footer {
  margin-top: var(--space-5xl);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-xl);
}

.site-footer p {
  margin: 0;
}

.social-nav ul {
  display: flex;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-nav a {
  text-decoration: none;
}



/* ============================================================
   PAGE / ENTRY CONTENT
   Gutenberg blocks sit at the reading measure by default;
   .alignwide and .alignfull break out of it.
   ============================================================ */

.entry__header {
  padding-block: var(--space-4xl) var(--space-2xl);
}

.entry__title {
  margin: 0;
  font-size: var(--fs-2xl);
}

.entry-content > * {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: 0;
}

/* Keep the gutter on small screens without padding every block. */
@media (max-width: calc(42.5rem + 4rem)) {
  .entry-content > *:not(.alignfull) {
    margin-inline: var(--gutter);
  }
}

.entry-content > .alignwide {
  max-width: var(--wide-width);
}

.entry-content > .alignfull {
  max-width: none;
}

.entry-content > * + * {
  margin-block-start: var(--space-lg);
}

.entry-content > :is(h2, h3, h4) {
  margin-block-start: var(--space-3xl);
}

/* Images, galleries, video and embeds (YouTube…) get 2rem of air
   above and below so they never butt up against the copy. */
.entry-content > :is(.wp-block-image, .wp-block-gallery, .wp-block-video, .wp-block-embed, .wp-block-cover, figure) {
  margin-block: var(--space-xl);
}

.entry-content > :is(.wp-block-image, .wp-block-gallery, .wp-block-video, .wp-block-embed, .wp-block-cover, figure) + * {
  margin-block-start: var(--space-xl);
}

.entry-content h2 { font-size: var(--fs-xl); }
.entry-content h3 { font-size: var(--fs-lg); }

.entry-content blockquote,
.entry-content .wp-block-quote {
  margin-inline: auto;
  padding-left: var(--space-lg);
  border-left: 1px solid var(--color-accent);
  font-style: italic;
}

.entry-content figcaption {
  margin-top: var(--space-2xs);
  color: var(--color-text-muted);
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
}

.entry-content--home > :first-child {
  margin-top: 0;
}



/* ============================================================
   TIMELINE (Experience page — page-experience.php, ACF "Jobs")
   <ol class="timeline"> of <li class="timeline__entry">. Dates sit
   in a left column on wide screens, with a hairline and a dot
   marking each role; the newest role's dot is the accent colour.
   ============================================================ */

.timeline {
  list-style: none;
  padding: 0;
}

.entry-content > .experience {
  margin-block-start: var(--space-xl);
}

/* Under its own heading (About page) — a clear break from the bio. */
.entry-content > * + .experience:has(.experience__heading) {
  margin-block-start: var(--space-5xl);
  padding-top: var(--space-3xl);
  border-top: 1px solid var(--color-border);
}

.experience__heading {
  margin: 0 0 var(--space-2xl);
  font-size: var(--fs-xl);
}

.experience .timeline {
  margin: 0;
}

.timeline__entry {
  position: relative;
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  column-gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.timeline__entry > * {
  grid-column: 2;
  margin: 0;
}

/* the hairline + dot, in the gutter between dates and content */
.timeline__entry::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  bottom: -0.55rem;
  left: calc(9.5rem + var(--space-2xl) / 2);
  border-left: 1px solid var(--color-border);
}

.timeline__entry:last-child::before {
  bottom: auto;
  height: 0;
}

.timeline__entry::after {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: calc(9.5rem + var(--space-2xl) / 2 - 3.5px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-text-muted);
}

.timeline__entry:first-child::after {
  background: var(--color-accent);
  box-shadow: none;
}

.timeline .timeline__dates {
  grid-column: 1;
  grid-row: 1 / span 4;
  padding-top: 0.15rem;
  color: var(--color-text-muted);
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
}

.timeline .timeline__role {
  font-size: var(--fs-lg);
  font-weight: 450; /* a touch heavier than other headings (300) */
  margin: 0;
}

.timeline .timeline__org {
  margin: var(--space-3xs) 0 var(--space-xs);
  color: var(--color-accent);
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.timeline__description {
  color: var(--color-text-muted);
  font-size: var(--fs-base);
}

.timeline__description > * {
  margin: 0;
}

.timeline__description > * + * {
  margin-top: var(--space-xs);
}



/* ============================================================
   TITLE WEIGHT
   Headings are Archivo Light (300) by default; page titles and
   project titles sit one step heavier (Regular 400).
   ============================================================ */

.entry__title,
.portfolio__title,
.project__title,
.project-card__title,
.error-404 h1 {
  font-weight: 400;
}



/* ============================================================
   PROJECT SLIDER block (blocks/project-slider)
   ============================================================ */

.project-slider {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.entry-content > .project-slider {
  margin-block: 0 var(--space-xl);
}

.entry-content > * + .project-slider {
  margin-block-start: var(--space-xl);
}

.project-slider__swiper {
  overflow: hidden;
  background: var(--color-bg-alt);
}

.project-slider__slide {
  overflow: hidden;
}

.project-slider__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Every slide is the same height (no jumping as it moves). */
.project-slider--tallest .project-slider__slide   { aspect-ratio: var(--slider-ratio, 3 / 2); }
.project-slider--landscape .project-slider__slide { aspect-ratio: 3 / 2; }
.project-slider--wide .project-slider__slide      { aspect-ratio: 16 / 9; }
.project-slider--square .project-slider__slide    { aspect-ratio: 1; }

.project-slider__img {
  height: 100%;
}

/* Fit the tallest: whole images, centred, on the page background. */
.project-slider--tallest .project-slider__swiper {
  background: none;
}

.project-slider--tallest .project-slider__img {
  object-fit: contain;
}

/* Crop shapes: fill the frame. */
.project-slider:not(.project-slider--tallest) .project-slider__img {
  object-fit: cover;
}

/* Arrows: soft circles over the image, fade in on hover/focus. */
.project-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in oklch, var(--color-bg) 88%, transparent);
  color: var(--color-text);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.project-slider__arrow svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.project-slider__arrow:hover,
.project-slider__arrow:focus-visible {
  opacity: 1;
  background: var(--color-bg);
}

.project-slider__arrow--prev { left: var(--space-sm); }
.project-slider__arrow--next { right: var(--space-sm); }

/* Dots: under the image. */
.project-slider__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}

.project-slider__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: color-mix(in oklch, var(--color-text) 20%, transparent);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.project-slider__dot:hover {
  background: color-mix(in oklch, var(--color-text) 45%, transparent);
}

.project-slider__dot.is-active {
  background: var(--color-accent);
  transform: scale(1.15);
}

/* Block editor: a still preview of the first image + an image count. */
.editor-styles-wrapper .project-slider .swiper-wrapper {
  display: block;
}

.editor-styles-wrapper .project-slider__slide:not(:first-child),
.editor-styles-wrapper .project-slider__dots {
  display: none;
}

.project-slider__count {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--ff-ui);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-slider--empty {
  padding: var(--space-2xl);
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
  text-align: center;
}



/* ============================================================
   SLIDER (Gallery block → "Slider" style, js/slider.js)
   ============================================================ */

.wp-block-gallery.is-style-slider.is-slider-ready {
  display: block;
}

.slider {
  position: relative;
  width: 100%;
}

.slider .swiper-slide {
  /* Undo Gutenberg's gallery-item sizing inside the slider. */
  width: 100% !important;
  margin: 0 !important;
}

.slider .swiper-slide img {
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: cover;
}

.slider .swiper-slide figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-lg) var(--gutter);
  background: linear-gradient(transparent, rgb(0 0 0 / 0.5));
  color: #fff;
  font-size: var(--fs-sm);
}

.slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in oklch, var(--color-bg) 85%, transparent);
  color: var(--color-text);
  font-size: var(--fs-md);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background var(--transition-fast);
}

.slider__arrow:hover {
  background: var(--color-bg);
}

.slider__arrow--prev { left: var(--space-lg); }
.slider__arrow--next { right: var(--space-lg); }

.slider__pagination {
  position: absolute;
  bottom: var(--space-lg) !important;
  z-index: 2;
  text-align: center;
}

.slider__pagination .swiper-pagination-bullet {
  background: var(--color-bg);
  opacity: 0.6;
}

.slider__pagination .swiper-pagination-bullet-active {
  opacity: 1;
}



/* ============================================================
   HOME INTRO — job title above the marquee
   ============================================================ */

.home-intro {
  padding-block: var(--space-4xl) var(--space-3xl);
}

.home-intro__hello {
  margin: 0;
  font-size: clamp(3.5rem, 10vw, 9.5rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 0.95;
  animation: marquee-item-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-intro__lede {
  max-width: 40ch;
  margin: var(--space-lg) 0 0;
  color: var(--color-text-muted);
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: 300;
  line-height: 1.3;
  animation: marquee-item-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}



/* Name + tiny round avatar, kept together on one line. (The underline
   only draws under text, so it stops at the photo.) */
.home-intro__name {
  white-space: nowrap;
}

.home-intro__name:hover .home-intro__avatar {
  transform: scale(1.08);
}

.home-intro__avatar {
  transition: transform var(--transition-slow);
}

.home-intro__avatar {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin: 0 0 0 0.3em;
  border-radius: 999px;
  object-fit: cover;
  object-position: 50% 30%;
  vertical-align: -0.22em;
}

/* TEXT LINKS — links in the home intro and in written content
   (pages, project write-ups, Experience descriptions, form text):
   accent-blue text with a hairline accent underline, offset 3px.
   Everything else (nav, buttons, cards, project details, prev/next)
   keeps its own style. */
.highlight-link,
.entry-content :is(p, li, blockquote, figcaption, h2, h3, h4, h5, h6, td, dd) a:not(.wp-block-button__link, .btn),
.timeline__description a,
.portfolio__intro a,
.gform_wrapper .gfield_description a,
.gform_confirmation_message a {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  /* Hover: text and underline fade together to the body text colour. */
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.highlight-link:hover,
.highlight-link:focus-visible,
.entry-content :is(p, li, blockquote, figcaption, h2, h3, h4, h5, h6, td, dd) a:not(.wp-block-button__link, .btn):is(:hover, :focus-visible),
.timeline__description a:is(:hover, :focus-visible),
.portfolio__intro a:is(:hover, :focus-visible),
.gform_wrapper .gfield_description a:is(:hover, :focus-visible),
.gform_confirmation_message a:is(:hover, :focus-visible) {
  color: var(--color-text);
}

/* Project details (section link, Read link): no highlight — their own
   colour, underline on hover only. */
.project__types a,
.project__meta a {
  text-decoration: none;
}

.project__types a:hover,
.project__meta a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}



/* ============================================================
   MARQUEE (home page)
   Horizontal masonry of project images drifting right → left.
   Column widths are in --marquee-h units so the collage keeps
   its proportions at any height.
   ============================================================ */

.marquee {
  --marquee-h: clamp(20rem, 58svh, 34rem);
  --marquee-gap: var(--space-lg);
  --marquee-duration: 160s; /* replaced by js/marquee.js */
  overflow: hidden;
  padding-block: 0 var(--space-xl);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}

/* Pause to look/click, and when off-screen. */
/* Keeps drifting under the mouse; pauses only for keyboard focus
   (so tabbing to a link doesn't chase it) and when off-screen. */
.marquee:has(:focus-visible) .marquee__track,
.marquee.is-offscreen .marquee__track {
  animation-play-state: paused;
}

/* Intro cascade: each first-set image fades up in turn
   (--intro-delay is set per item in project-marquee.php). */
.marquee__item[style*="--intro-delay"] {
  animation: marquee-item-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) var(--intro-delay) both;
}

@keyframes marquee-item-in {
  from {
    opacity: 0;
    transform: translate3d(2.5rem, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.marquee__set {
  display: flex;
  gap: var(--marquee-gap);
  height: var(--marquee-h);
  /* trailing gap so set 2 sits exactly one gap after set 1 */
  padding-right: var(--marquee-gap);
}

.marquee__col {
  display: flex;
  flex-direction: column;
  gap: var(--marquee-gap);
  flex: none;
}

/* Column shapes */
/* Column shapes — every column is flush top and bottom; spare
   space is a patterned filler tile (see FILLERS below). */
.marquee__col--tall      { width: calc(var(--marquee-h) * 0.62); }
.marquee__col--wide      { width: calc(var(--marquee-h) * 1.0); }
.marquee__col--stack     { width: calc(var(--marquee-h) * 0.72); }
.marquee__col--stack-alt { width: calc(var(--marquee-h) * 0.56); }

.marquee__col--tall .marquee__item                  { flex: 1; }
.marquee__col--wide .marquee__item                  { height: 70%; }
.marquee__col--stack .marquee__item:first-child     { height: 58%; }
.marquee__col--stack .marquee__item:last-child      { flex: 1; }
.marquee__col--stack-alt .marquee__item:first-child { height: 38%; }
.marquee__col--stack-alt .marquee__item:last-child  { height: 44%; }

/* FILLERS
   Wide columns: odd ones fill below the image, even ones above.
   Stack-alt columns: a small strip on top.
   Two patterns alternate: fine diagonal hatch / soft dot grid. */
.marquee__col--wide::after,
.marquee__col--stack-alt::before {
  content: "";
  flex: 1;
  min-height: 0;
  background-color: var(--color-bg-alt);
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in oklch, var(--color-text) 9%, transparent) 0 1px,
    transparent 1px 9px
  );
}

.marquee__col--wide:nth-child(even)::after {
  order: -1; /* filler above the image */
}

.marquee__col--stack-alt::before,
.marquee__col--wide:nth-child(4n)::after {
  background-image: radial-gradient(
    color-mix(in oklch, var(--color-text) 16%, transparent) 1px,
    transparent 1.5px
  );
  background-size: 10px 10px;
}

/* Fillers fade in with their column's cascade. */
.marquee__col[style*="--intro-delay"]::before,
.marquee__col[style*="--intro-delay"]::after {
  animation: marquee-filler-in 1.4s ease var(--intro-delay) both;
}

@keyframes marquee-filler-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.marquee__item {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--color-bg-alt);
  text-decoration: none;
}

.marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease, filter var(--transition-slow);
}

.marquee__caption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xl) var(--space-md) var(--space-md);
  background: linear-gradient(transparent, rgb(0 0 0 / 0.55));
  color: #fff;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.marquee__client {
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.marquee__title {
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: var(--lh-tight);
}

.marquee__item:hover,
.marquee__item:focus-visible {
  color: #fff;
}

.marquee__item:hover img,
.marquee__item:focus-visible img {
  transform: scale(1.04);
}

.marquee__item:hover .marquee__caption,
.marquee__item:focus-visible .marquee__caption {
  opacity: 1;
  transform: none;
}

/* Home: the strip is the page, so the footer sits closer. */
.home .site-footer {
  margin-top: var(--space-xl);
}

/* Reduced motion: no drift — a hand-scrollable strip instead. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
  }

  .home-intro__hello,
  .home-intro__lede,
  .marquee__track,
  .marquee__item[style*="--intro-delay"],
  .marquee__col[style*="--intro-delay"]::before,
  .marquee__col[style*="--intro-delay"]::after {
    animation: none;
  }

  .marquee__set[aria-hidden] {
    display: none;
  }
}



/* ============================================================
   PORTFOLIO
   ============================================================ */

.portfolio__header {
  padding-block: var(--space-4xl) var(--space-3xl);
}

.portfolio__title {
  margin: 0;
  font-size: var(--fs-2xl);
}

.portfolio__intro {
  max-width: var(--content-max-width);
  color: var(--color-text-muted);
}

.portfolio__header {
  margin-bottom: var(--space-2xl);
}

.portfolio__intro {
  max-width: 44rem;
  margin-top: var(--space-lg);
  color: var(--color-text-muted);
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.4;
}

.portfolio__intro p {
  margin: 0;
}

/* Grid section tabs (All / Built from Scratch / …) */

.section-tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin: 0 0 var(--space-2xl);
  /* Baseline drawn inside the scroll box (a border would be clipped
     under the active tab's underline). */
  box-shadow: inset 0 -1px 0 var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-tabs::-webkit-scrollbar {
  display: none;
}

.section-tabs__link {
  position: relative;
  flex: none;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid transparent;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.section-tabs__link:hover {
  color: var(--color-text);
}

/* On load the tabs cascade in, left to right, as the page-transition
   overlay clears (--i is each tab's position, set in the template). */
.section-tabs__link {
  animation: tab-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.45s + var(--i, 0) * 0.08s) both;
}

@keyframes tab-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.6rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-tabs__link {
    animation: none;
  }
}

.section-tabs__link[aria-current] {
  border-color: var(--color-text);
  color: var(--color-text);
}

.section-group[hidden] {
  display: none;
}

/* One section showing: the tab already names it. */
.section-groups:not([data-current-section="all"]) .portfolio__section-title {
  display: none;
}

/* Grid sections (Built from Scratch, …) */

.portfolio__section-title {
  margin: var(--space-4xl) 0 var(--space-lg);
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.section-group:first-child .portfolio__section-title,
.section-groups[data-current-section="all"] .section-group:not([hidden]):first-child .portfolio__section-title {
  margin-top: 0;
}

/* No featured image yet: a soft patterned tile with the client. */
.project-placeholder {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding: var(--space-lg);
  background-color: var(--color-bg-alt);
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in oklch, var(--color-text) 7%, transparent) 0 1px,
    transparent 1px 9px
  );
}

.project-placeholder__label {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 300;
  color: var(--color-text-muted);
}

/* Grid */

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-2xl) var(--space-lg);
}

.project-card__link {
  display: block;
  text-decoration: none;
}

.project-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.project-card__link:hover .project-card__image img {
  transform: scale(1.03);
}

.project-card__meta {
  margin: var(--space-md) 0 0;
  color: var(--color-text-muted);
  font-family: var(--ff-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.project-card__title {
  margin: var(--space-2xs) 0 var(--space-2xs);
  font-size: var(--fs-lg);
}

.project-card__description {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Single project — pinned details left, content scrolls right.
   (.project-single, not .project: WordPress adds a "project" class to
   every project card too.) */

.project-single {
  display: grid;
  grid-template-columns: minmax(16rem, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--space-5xl);
  padding-top: var(--space-4xl);
}

.project__header.project__header {
  position: sticky;
  top: var(--space-2xl);
  padding: 0;
}

/* Content column: full width of its column, no centring. */
.project__body > *,
.project__body > .alignwide,
.project__body > .alignfull {
  max-width: none;
  margin-inline: 0;
}

.project__body > :first-child {
  margin-top: 0;
}


.project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-3xl);
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-family: var(--ff-ui);
  font-size: 0.8125rem;
}

.project__meta dt {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.project__meta dd {
  margin: var(--space-3xs) 0 0;
}


.project__types {
  margin: 0 0 var(--space-sm);
  font-family: var(--ff-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.project__types a {
  color: var(--color-accent);
}

.project__title {
  margin: 0;
  /* Smaller than other page titles — some project titles are long. */
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.12;
}

.project__description {
  margin-top: var(--space-lg);
  color: var(--color-text-muted);
  font-size: var(--fs-md);
}

.project-nav a {
  text-decoration: none;
}

.project-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-5xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
}


/* Prev/next: one line, long titles cut with "…" (arrows stay). */
.project-nav__prev a,
.project-nav__next a {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  max-width: 100%;
}

.project-nav__next a {
  justify-content: flex-end;
}

.project-nav__title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.project-nav__arrow {
  flex: none;
}

.project-nav__next {
  text-align: right;
}



/* ============================================================
   404
   ============================================================ */

.error-404 {
  padding-block: var(--space-6xl);
  text-align: center;
}

.error-404 h1 {
  margin: 0;
  font-size: var(--fs-3xl);
}



/* ============================================================
   MOTION
   Page transition overlay (js/transitions.js) and scroll reveals
   (js/reveal.js). Everything here is switched off for
   prefers-reduced-motion at the end of this section.
   ============================================================ */

/* Arriving: the overlay covers the page, then fades away (CSS only). */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--color-bg);
  pointer-events: none;
  animation: page-arrive 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both;
}

@keyframes page-arrive {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}

/* Leaving: the overlay rises from the bottom to cover the page. */
.is-leaving .page-transition {
  visibility: visible;
  opacity: 1;
  animation: page-leave 0.45s cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes page-leave {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Scroll reveals — gentle fade up. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
}

/* Transitions only once everything is hidden (js/reveal.js adds
   .reveal-ready a frame later), so nothing fades *out* on load. */
.reveal-ready .reveal {
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
}

/* Reading text and career beats: slower, softer. (:not(.is-revealed)
   so this smaller offset can't outrank the settled state above.) */
.entry-content > p.reveal:not(.is-revealed),
.entry-content > blockquote.reveal:not(.is-revealed),
.timeline__entry.reveal:not(.is-revealed) {
  transform: translate3d(0, 1rem, 0);
}

.reveal-ready .entry-content > p.reveal,
.reveal-ready .entry-content > blockquote.reveal,
.reveal-ready .timeline__entry.reveal {
  transition-duration: 1.6s, 1.6s;
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Small finishing touches */
.main-nav a,
.project-nav a {
  transition: color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

@media (prefers-reduced-motion: reduce) {
  .page-transition {
    display: none;
  }

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



/* ============================================================
   ABOUT + EXPERIENCE — title on the left (aligned with the logo),
   content on the right starting level with the title. Stacks on
   small screens.
   ============================================================ */

@media (min-width: 62rem) {

  .page-about article.entry,
  .page-experience article.entry {
    display: grid;
    grid-template-columns: minmax(14rem, 4fr) minmax(0, 8fr);
    column-gap: var(--space-5xl);
    align-items: start;
    max-width: var(--max-width);
    margin-inline: auto;
    padding: var(--space-4xl) var(--gutter) 0;
  }

  .page-about .entry__header,
  .page-experience .entry__header {
    padding: 0;
    max-width: none;
    margin: 0;
  }

  .page-about .entry__title,
  .page-experience .entry__title {
    margin-top: -0.12em; /* optical: cap height level with the content top */
  }

  .page-about .entry-content,
  .page-experience .entry-content {
    min-width: 0;
  }

  /* Reading width, left-aligned in the column (no centring). */
  .page-about .entry-content > *,
  .page-experience .entry-content > * {
    max-width: var(--content-max-width);
    margin-inline: 0;
  }

  .page-about .entry-content > .is-style-lede.is-style-lede {
    max-width: min(46rem, 100%);
    margin-inline: 0; /* overrides the centred-column lede offset */
  }

  .page-about .entry-content > :first-child,
  .page-experience .entry-content > :first-child {
    margin-top: 0;
  }
}



/* ============================================================
   LET'S TALK (page slug "contact") — two columns on wide screens:
   intro + form + sign-off on the left, the P.S. and Spotify playlist
   (a Group with class "contact__aside") pinned on the right.
   ============================================================ */

@media (min-width: 62rem) {

  .page-contact {
    --contact-aside: 22rem;
    --contact-width: calc(var(--content-max-width) + var(--space-5xl) + var(--contact-aside));
  }

  .page-contact .entry-content {
    display: grid;
    grid-template-columns: minmax(0, var(--content-max-width)) var(--contact-aside);
    column-gap: var(--space-5xl);
    align-items: start;
    max-width: calc(var(--contact-width) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .page-contact .entry-content > * {
    grid-column: 1;
    max-width: none;
    margin-inline: 0;
  }

  .page-contact .entry-content > .contact__aside {
    grid-column: 2;
    grid-row: 1 / span 20;
    position: sticky;
    top: var(--space-2xl);
    margin-block-start: 0;
  }
}

/* The aside's own contents */
.contact__aside > .wp-block-group__inner-container > *,
.contact__aside > * {
  margin: 0;
}

.contact__aside .contact__aside-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--ff-ui);
  font-size: 1.25rem;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.contact__aside .page-note {
  margin: 0 0 var(--space-lg);
  padding: 0;
  border: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.contact__aside .wp-block-embed {
  margin: 0;
}

/* Full Spotify player (cover + track list), as in her embed code. */
.contact__aside .wp-block-embed-spotify iframe {
  width: 100%;
  height: 352px;
  border-radius: 12px;
}

/* Small screens: it simply follows the sign-off, under a hairline. */
@media (max-width: 61.99rem) {
  .entry-content > .contact__aside {
    margin-block-start: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
  }
}



/* ============================================================
   LEDE — Paragraph block style "Lede" (registered in functions.php)
   ============================================================ */

.is-style-lede {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: 0;
}

/* A touch wider than the reading column (still left-aligned with
   it) and balanced, so the opening line breaks into even lines
   instead of leaving a short tail. */
.entry-content > .is-style-lede {
  max-width: min(46rem, 100%);
  margin-inline-end: auto;
  text-wrap: balance;
}

@media (min-width: 50.01rem) {
  .entry-content > .is-style-lede {
    /* keep the left edge on the text column while running past it */
    margin-inline-start: max(0px, calc((100% - var(--content-max-width)) / 2));
  }
}

.entry-content > .is-style-lede + * {
  margin-block-start: var(--space-xl);
}



/* ============================================================
   SIGN-OFFS & NOTES (block classes, set in the editor)
   .signoff__closing  "Yours in…" line, sits tight above the name
   .signoff           "— Marli" in the light display face
   .page-note         small grey footnote under a hairline (P.S.,
                      byline note)
   .contact__email    "Prefer email?" line on Contact
   ============================================================ */

.entry-content > .gform_wrapper,
.entry-content > .gform_confirmation_wrapper {
  margin-block: var(--space-2xl) var(--space-xl);
}

.contact__email {
  color: var(--color-text-muted);
}

.entry-content > .signoff__closing {
  margin-block-start: var(--space-2xl);
}

.entry-content > .signoff {
  margin-block-start: var(--space-2xl);
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 300;
}

.entry-content > .signoff__closing + .signoff {
  margin-block-start: var(--space-2xs);
}

.entry-content > .page-note {
  margin-block-start: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}



/* ============================================================
   ROUNDED IMAGE (core "Rounded" style) — a true circle
   ============================================================ */

/* The figure keeps the full text width (so it lines up left with the
   paragraphs); the photo itself is the small circle. */
.wp-block-image.is-style-rounded img {
  width: 15rem;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 999px;
}



/* ============================================================
   LABELS — Bebas Neue
   Nav and all the small labels use Bebas Neue (--ff-ui). It's a
   single-weight, capitals-only condensed face, so: never bolded (no
   faux bold), sized up from the old label sizes, lighter tracking.
   ============================================================ */

.main-nav a,
.btn,
.wp-block-button__link,
.site-footer,
.entry-content figcaption,
.timeline .timeline__dates,
.timeline .timeline__org,
.marquee__client,
.section-tabs,
.portfolio__section-title,
.project-card__meta,
.project__meta,
.project__types,
.project-nav,
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label,
.gform_wrapper .gfield_required,
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
  font-family: var(--ff-ui);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
}

/* Small labels: 12–13px before → 16px in Bebas. */
.site-footer,
.entry-content figcaption,
.timeline .timeline__dates,
.timeline .timeline__org,
.marquee__client,
.section-tabs,
.portfolio__section-title,
.project-card__meta,
.project__meta,
.project__types,
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label,
.gform_wrapper .gfield_required {
  font-size: 1rem;
}

/* Required marker: a small accent asterisk right after the label.
   (GF nests .gfield_required_asterisk inside .gfield_required.) */
.gform_wrapper .gfield_required {
  display: inline;
  margin: 0 0 0 0.1em;
  padding: 0;
  color: var(--color-accent);
  font-family: var(--ff-body);
  font-size: 0.875rem;
  line-height: 1;
  vertical-align: 0.15em;
}

.gform_wrapper .gfield_required .gfield_required_asterisk {
  margin: 0;
  padding: 0;
  font-size: inherit;
}

/* Empty "required fields" note wrapper (text removed in functions.php). */
.gform_wrapper .gform_required_legend:empty {
  display: none;
}

/* Nav, buttons, prev/next: 14px before → 18px. */
.main-nav a,
.btn,
.wp-block-button__link,
.project-nav,
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
  font-size: 1.125rem;
}

/* Nav: Bebas Neue has a single (heavy) weight, so it's lightened
   visually — a step smaller, softer ink, a little more air. */
.main-nav a {
  font-size: 1rem;
  letter-spacing: 0.07em;
  color: color-mix(in oklch, var(--color-text) 72%, var(--color-bg));
}

.main-nav a:hover {
  color: var(--color-text);
}

.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a,
.section-portfolio .main-nav .menu-item-object-project > a {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px; /* nav: a little more air than text links (3px) */
}

/* Project meta (card line, section/note line, Client / Year / Read
   labels): a touch smaller and softer — secondary to the titles. */
.project-card__meta,
.project__types,
.project__meta dt {
  font-size: 0.875rem;
  color: color-mix(in oklch, var(--color-text) 62%, var(--color-bg));
}

/* Footer copyright: small print. */
.site-footer__copyright {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}

/* Section headings in the Work grid read as labels, a step up. */
.portfolio__section-title {
  font-size: 1.25rem;
}

/* Client / Year / Read labels: size/colour set with the other meta above. */
.project__meta dt {
  letter-spacing: 0.04em;
}

/* The values under Client / Year / Read are content, not labels. */
.project__meta dd {
  font-family: var(--ff-body);
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0;
}



/* ============================================================
   MOBILE (max-width: 50rem)
   ============================================================ */

@media (max-width: 50rem) {

  :root {
    --gutter: var(--space-md);
  }

  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: grid;
    place-items: center;
    background: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
  }

  .is-nav-open .main-nav {
    opacity: 1;
    visibility: visible;
  }

  .is-nav-open {
    overflow: hidden;
  }

  .main-nav {
    align-content: center;
    gap: var(--space-3xl);
  }

  .main-nav .social-icons {
    flex-direction: row;
  }

  .main-nav .social-icons__svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
  }

  .main-nav a {
    font-size: var(--fs-md);
  }

  .slider__arrow {
    display: none;
  }

  .home-intro {
    padding-block: var(--space-2xl) var(--space-lg);
  }

  .marquee {
    --marquee-h: clamp(18rem, 52svh, 26rem);
    --marquee-gap: var(--space-sm);
  }

  /* Section tabs scroll sideways — fade the right edge as a hint. */
  .section-tabs {
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
    padding-right: var(--space-2xl);
  }

  /* Timeline: dates above each role, line down the left edge. */
  .timeline__entry {
    grid-template-columns: 1fr;
    padding-left: var(--space-xl);
  }

  .timeline__entry > * {
    grid-column: 1;
  }

  .timeline .timeline__dates {
    grid-row: auto;
    margin-bottom: var(--space-3xs);
    text-align: left;
  }

  .timeline__entry::before {
    left: 3.5px;
  }

  .timeline__entry::after {
    left: 0;
    top: 0.3rem;
  }

  .project-single {
    grid-template-columns: minmax(0, 1fr); /* min 0: wide content (sliders) can't stretch the column */
    gap: var(--space-2xl);
    padding-top: var(--space-2xl);
  }

  .project__header.project__header {
    position: static;
  }

  .project__body > *:not(.alignfull) {
    margin-inline: 0;
  }


  .project-nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .project-nav__all {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: center;
  }

}