/* ==========================================================================
   Home page, after catalinvintila.design.
   - the hero: one heavy sentence in capitals with pictures set inside it
     (the portrait and a painting, as rounded pills), the last word in the
     accent, and small spaced labels around it
   - the About statement: big capitals that light up word by word as you
     scroll (scroll.js); without motion they simply show
   - the case studies: each fills the window, its name huge over the
     darkened picture, with a counter (01 / 03)
   The artwork and contact sections below keep their own styles.
   Plain Helvetica; the site's own accent (steel blue in both themes).
   Loaded after portavia.css, only on the home page.
   ========================================================================== */
body:has(.cv-hero) {
  --cv-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pv-main:not(.pv-about-page) .sections > section:is(.cv-hero, .cv-statement, .cv-work, .cv-skills, .cv-recog) {
  width: 100%;
  max-width: none;
  padding-inline: max(var(--gx), (100% - 1240px) / 2);
  font-family: var(--cv-font);
}

/* ---- small spaced labels ------------------------------------------------- */
.pv .cv-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--cv-font);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.cv-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---- the hero: a sentence with pictures in it ----------------------------- */
.pv-main:not(.pv-about-page) .sections > section.cv-hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(32px, 6vh, 64px);
  min-height: 100svh;
  /* clear of the fixed top bar */
  padding-block: clamp(96px, 13vh, 128px) clamp(32px, 6vh, 64px);
}
.cv-hero__labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
}
.cv-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--cv-font);
  font-size: clamp(2.5rem, 0.6rem + 5.4vw, 6.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.cv-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.22em;
  overflow: hidden;
  padding-block: 0.04em;
}
.cv-line--end {
  padding-left: 1.2em;
}
.cv-w {
  display: inline-block;
}
.cv-accent {
  color: var(--accent-text);
}
.cv-pill {
  display: inline-block;
  width: 1.5em;
  height: 0.78em;
  overflow: hidden;
  border-radius: 999px;
}
.cv-pill--wide {
  width: 2.1em;
}
/* a picture in the sentence widens a little under the cursor, nudging the
   words aside */
.cv-pill {
  --grow: 0.6em;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cv-pill:hover {
  width: calc(1.5em + var(--grow));
}
.cv-pill--wide:hover {
  width: calc(2.1em + var(--grow));
}
.cv-pill img {
  transition: scale 0.6s ease;
}
.cv-pill:hover img {
  scale: 1.08;
}
@media (prefers-reduced-motion: reduce) {
  .cv-pill,
  .cv-pill img {
    transition: none;
  }
}
.cv-pill img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cv-hero__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 48px;
}
.pv .cv-hero__lede {
  max-width: 34ch;
  margin: 0;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem);
  line-height: 1.5;
  color: var(--text);
}

/* ---- the About statement ------------------------------------------------------ */
.pv-main:not(.pv-about-page) .sections > section.cv-statement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 5vh, 48px);
  min-height: 100svh;
  padding-block: clamp(80px, 12vh, 140px);
}
.pv .cv-statement__text {
  max-width: 24ch;
  margin: 0;
  font-family: var(--cv-font);
  font-size: clamp(1.75rem, 0.9rem + 2.8vw, 4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ink);
}
/* while the motion runs, the words start faint and light up as you
   scroll (scroll.js); otherwise they simply show */
.has-gsap .cv-statement__text .cv-sw {
  opacity: 0.2;
}
.cv-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 240px));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cv-stats li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cv-stats b {
  font-size: clamp(2.25rem, 1.5rem + 1.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ink);
}
.cv-stats span {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text);
}
.cv-more {
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.cv-more span {
  display: inline-block;
  color: var(--accent-text);
  transition: translate 0.25s ease;
}
.cv-more:hover span {
  translate: 6px 0;
}

/* ---- case studies: each fills the window ------------------------------------------ */
.pv-main:not(.pv-about-page) .sections > section.cv-work {
  padding-block: clamp(80px, 12vh, 140px) 0;
}
.cv-work__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: 24px;
}
.cv-projects {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 calc(-1 * max(var(--gx), (100vw - 1240px) / 2));
  padding: 0;
  list-style: none;
}
.cv-project__link {
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  background: #0c0c0e;
}
.cv-project__link > * {
  grid-area: 1 / 1;
}
.cv-project__pic {
  margin: 0;
  overflow: hidden;
}
.cv-project__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transition: opacity 0.4s ease;
}
.cv-project__link:hover .cv-project__pic img {
  opacity: 0.7;
}
.cv-project__words {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(28px, 6vh, 64px) max(var(--gx), (100vw - 1240px) / 2);
}
.pv .cv-project__words .cv-label {
  color: rgb(255 255 255 / 0.82);
}
.cv-project__name {
  font-family: var(--cv-font);
  font-size: clamp(3.5rem, 1rem + 10vw, 12rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.cv-project__meta {
  justify-content: flex-end;
}

/* one counter (01 / 03) held at the bottom of the window while the case
   studies pass; scroll.js shows it over the panels and sets the number */
.pv .cv-counter {
  position: sticky;
  top: calc(100svh - 72px);
  z-index: 3;
  height: 0;
  overflow: visible;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-variant-numeric: tabular-nums;
}
.pv .cv-counter.is-on {
  opacity: 1;
}
.cv-project__link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -6px;
}
@media (prefers-reduced-motion: reduce) {
  .cv-project__pic img,
  .cv-more span {
    transition: none;
  }
}

/* ---- phones ---------------------------------------------------------------------- */
@media (max-width: 640px) {
  .cv-line--end {
    padding-left: 0;
  }
  .cv-stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .cv-project__link {
    min-height: 80svh;
  }
}

/* ---- artwork: the gallery wall keeps its spotlight; the heading is in the
   new labels ------------------------------------------------------------- */
.pv-main:not(.pv-about-page) .sections > section.cv-art {
  padding-block: clamp(80px, 12vh, 140px);
  font-family: var(--cv-font);
}
.cv-art .container {
  max-width: 1240px;
}
.cv-art__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: 24px;
}
.cv-art .artwork__body {
  padding-top: 0;
}

/* ---- contact: a closing statement that echoes the hero ------------------------ */
.pv-main:not(.pv-about-page) .sections > section.cv-contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 5vh, 48px);
  width: 100%;
  max-width: none;
  min-height: 90svh;
  padding: clamp(80px, 12vh, 140px) max(var(--gx), (100% - 1240px) / 2);
  font-family: var(--cv-font);
}
/* the hand-drawn "hello" keeps its round sticker, the scribble centred */
.cv-contact__hi .pv-hi {
  width: clamp(96px, 9vw, 128px);
  height: clamp(96px, 9vw, 128px);
  rotate: -8deg;
}
.cv-contact__title {
  font-size: clamp(3rem, 1rem + 8.4vw, 10rem);
}
.cv-contact__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 48px;
}
.cv-email {
  font-size: clamp(1.375rem, 0.8rem + 2.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 3px no-repeat;
  transition: background-size 0.35s ease;
}
.cv-email:hover,
.cv-email:focus-visible {
  background-size: 100% 3px;
}
.cv-email:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .cv-email {
    transition: none;
  }
}

/* ==========================================================================
   Fewer capitals: sentence case across the home page, section headings set
   large, and the Quick summary centred under the headline.
   ========================================================================== */
.pv .cv-label {
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
.cv-title,
.pv .cv-statement__text,
.cv-project__name,
.cv-more {
  text-transform: none;
}
.cv-title {
  letter-spacing: -0.05em;
}
.cv-more {
  font-size: 1rem;
  letter-spacing: 0;
}

/* section headings, large, with the accent dot as their full stop */
.cv-heading {
  display: flex;
  align-items: baseline;
  gap: 0.06em;
  margin: 0;
  font-family: var(--cv-font);
  font-size: clamp(2.75rem, 1.2rem + 4.4vw, 6rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.cv-heading .cv-dot {
  width: 0.16em;
  height: 0.16em;
}
.cv-work__head,
.cv-art__head {
  align-items: flex-end;
  margin-bottom: clamp(32px, 5vh, 56px);
}

/* the Quick summary, centred under the headline */
.cv-hero__foot {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.pv .cv-hero__foot .cv-hero__lede {
  max-width: none;
}
.cv-hero__foot .pv-actions {
  justify-content: center;
}

/* the home page's buttons, in the same plain face */
.pv-main .sections > section:is(.cv-hero, .cv-contact) .pv-btn {
  font-family: var(--cv-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* ==========================================================================
   The two words that say what they mean.
   "design" is built the way it would be in a design tool, in pure CSS:
   its selection frame traces itself round the word, the square handles pop
   onto the corners, then the outlined letters fill in. The frame is four
   background lines and four background squares (nothing is positioned, so
   the line keeps its shape), sized by registered properties that one
   keyframe animation moves. Without motion it simply shows built.
   "code." is set in a monospace face; scroll.js types it out letter by
   letter on load, and a caret blinks after it.
   ========================================================================== */
@property --draw {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@property --knob {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@property --fill {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
.cv-design {
  --c: var(--accent);
  --t: 0.03em;
  --h: calc(var(--knob) * 0.13em);
  --run: calc(var(--draw) * 100%);
  padding: 0 0.08em 0.2em;
  margin-bottom: -0.16em;
  background:
    linear-gradient(var(--c) 0 0) 0 0 / var(--h) var(--h),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--h) var(--h),
    linear-gradient(var(--c) 0 0) 0 100% / var(--h) var(--h),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--h) var(--h),
    linear-gradient(var(--c) 0 0) 0 0 / var(--run) var(--t),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--t) var(--run),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--run) var(--t),
    linear-gradient(var(--c) 0 0) 0 100% / var(--t) var(--run);
  background-repeat: no-repeat;
  -webkit-text-fill-color: color-mix(in srgb, currentColor calc(var(--fill) * 100%), transparent);
  -webkit-text-stroke: calc((1 - var(--fill)) * 0.02em) currentColor;
}
/* the descender of the g stays inside the frame */
.cv-line:has(.cv-design) {
  padding-bottom: 0.2em;
  margin-bottom: -0.16em;
}
@media (prefers-reduced-motion: no-preference) {
  :root:not(.motion-paused) .cv-design {
    animation: cv-construct 2.4s cubic-bezier(0.65, 0, 0.35, 1) 0.8s both;
  }
}
@keyframes cv-construct {
  0% {
    --draw: 0;
    --knob: 0;
    --fill: 0;
  }
  45% {
    --draw: 1;
    --knob: 0;
  }
  60% {
    --knob: 1;
    --fill: 0;
  }
  100% {
    --draw: 1;
    --knob: 1;
    --fill: 1;
  }
}
.cv-code {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.86em;
  font-weight: 700;
  letter-spacing: -0.04em;
}
/* the caret, after the last letter */
.cv-code::after {
  content: "";
  display: inline-block;
  width: 0.09em;
  height: 0.82em;
  margin-left: 0.06em;
  vertical-align: -0.04em;
  background: currentColor;
}
@media (prefers-reduced-motion: no-preference) {
  .cv-code::after {
    animation: cv-blink 1.05s steps(1) infinite;
  }
}
:root.motion-paused .cv-code::after {
  animation: none;
}
@keyframes cv-blink {
  50% {
    opacity: 0;
  }
}

/* ---- About me as a band in the other theme's colours, its top and bottom
   edges stepped like pixels (a mask: a row of blocks, the solid middle, a
   row of blocks) ------------------------------------------------------- */
/* (no child combinator: GSAP holds this section in a spacer) */
.pv-main:not(.pv-about-page) .sections section.cv-statement {
  --edge: clamp(40px, 6vw, 96px);
  padding-block: calc(var(--edge) + clamp(64px, 10vh, 120px));
  -webkit-mask:
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 96%22 preserveAspectRatio=%22none%22><rect x=%220%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%2250%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22100%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22150%22 y=%2272%22 width=%2251%22 height=%2224%22/><rect x=%22200%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22250%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22300%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22325%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%22350%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22400%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22450%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22500%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22550%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22575%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%22600%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22650%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22700%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22750%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22775%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%22800%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22825%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%22850%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22900%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22950%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%221000%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221025%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%221050%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221100%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%221150%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221175%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%221200%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%221250%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%221300%22 y=%2272%22 width=%2251%22 height=%2224%22/><rect x=%221350%22 y=%2272%22 width=%2251%22 height=%2224%22/><rect x=%221400%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221450%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%221500%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221550%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221575%22 y=%2224%22 width=%2225%22 height=%2224%22/></svg>") top / 100% var(--edge) no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--edge) + 2px) no-repeat,
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 96%22 preserveAspectRatio=%22none%22><g transform=%22translate%280 96%29 scale%281 -1%29%22><rect x=%220%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%2250%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22100%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22150%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22175%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%22200%22 y=%2272%22 width=%2251%22 height=%2224%22/><rect x=%22250%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22275%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%22300%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22350%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22400%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22450%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22500%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22550%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22600%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22650%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22700%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22750%22 y=%2272%22 width=%2251%22 height=%2224%22/><rect x=%22775%22 y=%2248%22 width=%2225%22 height=%2224%22/><rect x=%22800%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22850%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22900%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22950%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%221000%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221050%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221100%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%221150%22 y=%2272%22 width=%2251%22 height=%2224%22/><rect x=%221200%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221250%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%221300%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221350%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%221400%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%221450%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221500%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221550%22 y=%2224%22 width=%2251%22 height=%2272%22/></g></svg>") bottom / 100% var(--edge) no-repeat;
  mask:
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 96%22 preserveAspectRatio=%22none%22><rect x=%220%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%2250%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22100%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22150%22 y=%2272%22 width=%2251%22 height=%2224%22/><rect x=%22200%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22250%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22300%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22325%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%22350%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22400%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22450%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22500%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22550%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22575%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%22600%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22650%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22700%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22750%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22775%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%22800%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22825%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%22850%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22900%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22950%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%221000%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221025%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%221050%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221100%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%221150%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221175%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%221200%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%221250%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%221300%22 y=%2272%22 width=%2251%22 height=%2224%22/><rect x=%221350%22 y=%2272%22 width=%2251%22 height=%2224%22/><rect x=%221400%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221450%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%221500%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221550%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221575%22 y=%2224%22 width=%2225%22 height=%2224%22/></svg>") top / 100% var(--edge) no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--edge) + 2px) no-repeat,
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 96%22 preserveAspectRatio=%22none%22><g transform=%22translate%280 96%29 scale%281 -1%29%22><rect x=%220%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%2250%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22100%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22150%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22175%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%22200%22 y=%2272%22 width=%2251%22 height=%2224%22/><rect x=%22250%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22275%22 y=%2224%22 width=%2225%22 height=%2224%22/><rect x=%22300%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22350%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22400%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22450%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22500%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22550%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22600%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22650%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22700%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22750%22 y=%2272%22 width=%2251%22 height=%2224%22/><rect x=%22775%22 y=%2248%22 width=%2225%22 height=%2224%22/><rect x=%22800%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%22850%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%22900%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%22950%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%221000%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221050%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221100%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%221150%22 y=%2272%22 width=%2251%22 height=%2224%22/><rect x=%221200%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221250%22 y=%2224%22 width=%2251%22 height=%2272%22/><rect x=%221300%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221350%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%221400%22 y=%220%22 width=%2251%22 height=%2296%22/><rect x=%221450%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221500%22 y=%2248%22 width=%2251%22 height=%2248%22/><rect x=%221550%22 y=%2224%22 width=%2251%22 height=%2272%22/></g></svg>") bottom / 100% var(--edge) no-repeat;
}
/* the light theme's band is dark ... */
:is(.cv-statement, .cv-pixels) {
  /* its own background, since GSAP holds it in a spacer outside .sections */
  background: var(--paper) 0 0 / 240px auto, var(--bg);
  --bg: #0f172a;
  --surface: #1e293b;
  --ink: #f8fafc;
  --text: #f8fafc;
  --text-2: #94a3b8;
  --muted: #94a3b8;
  --line: #334155;
  --accent: #60a5fa;
  --accent-text: #60a5fa;
  --on-accent: #0f172a;
  color: var(--ink);
}
/* ... and the dark theme's band is light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.cv-statement, .cv-pixels) {
    --bg: #f5f7f8;
    --surface: #ffffff;
    --ink: #111827;
    --text: #111827;
    --text-2: #4b5563;
    --muted: #4b5563;
    --line: #e5e7eb;
    --accent: #2e5b82;
    --accent-text: #2e5b82;
    --on-accent: #ffffff;
  }
}
:root[data-theme="dark"] :is(.cv-statement, .cv-pixels) {
  --bg: #f5f7f8;
  --surface: #ffffff;
  --ink: #111827;
  --text: #111827;
  --text-2: #4b5563;
  --muted: #4b5563;
  --line: #e5e7eb;
  --accent: #2e5b82;
  --accent-text: #2e5b82;
  --on-accent: #ffffff;
}

/* ---- Skills & expertise: one row per skill on a hairline, the name large,
   its number and a plus on the right; open, its parts show as pills ------ */
.pv-main:not(.pv-about-page) .sections > section:is(.cv-skills, .cv-recog) {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vh, 56px);
  padding-block: clamp(96px, 14vh, 160px) 0;
}
.cv-skills__list {
  border-bottom: 1px solid var(--line);
}
.cv-skill {
  border-top: 1px solid var(--line);
}
.cv-skill summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: clamp(14px, 2.2vh, 22px) 0;
  cursor: pointer;
  list-style: none;
}
.cv-skill summary::-webkit-details-marker {
  display: none;
}
.cv-skill summary::after {
  content: "+";
  width: 1em;
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  color: var(--muted);
  transition: rotate 0.25s ease;
}
.cv-skill[open] summary::after {
  rotate: 45deg;
}
.cv-skill summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
.cv-skill .cv-dot {
  width: 8px;
  height: 8px;
  border-radius: 1px;
}
.cv-skill h3 {
  margin: 0;
  font-family: var(--cv-font);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ink);
  transition: translate 0.3s ease;
}
.cv-skill summary:hover h3 {
  translate: 8px 0;
}
.cv-skill__num {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.cv-skill ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 0 clamp(18px, 3vh, 28px) 24px;
  list-style: none;
}
.cv-skill li {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text);
}

/* ---- Research & recognition: two groups of rows on hairlines: the name, a
   detail, and when or where it stands, on the right ----------------------- */
.pv .cv-recog__group {
  margin-top: 8px;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.875rem;
  color: var(--muted);
}
.cv-rows {
  margin: -16px 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.cv-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 24px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  transition: background-color 0.2s ease;
}
.cv-rows b {
  font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cv-rows span {
  font-size: 0.9375rem;
  color: var(--muted);
}
.cv-rows span:last-child {
  justify-self: end;
  text-align: right;
}
@media (max-width: 640px) {
  .cv-rows li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .cv-rows span:empty {
    display: none;
  }
  .cv-rows span:not(:last-child):not(:empty) {
    grid-row: 2;
  }
}

/* ---- each case study: its name centred over the picture, the tags above
   it and the years below, as on the screenshot's project panels ----------- */
.cv-project__words {
  align-self: center;
  align-items: center;
  text-align: center;
}
.cv-project__words .cv-label {
  justify-content: center;
}

/* ---- the close: "Let's connect." centred, the email and buttons under it,
   then the closing row ---------------------------------------------------- */
.pv-main:not(.pv-about-page) .sections > section.cv-contact {
  align-items: center;
  text-align: center;
}
.cv-contact__title .cv-line {
  justify-content: center;
}
.cv-contact__foot {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cv-contact .pv-end {
  align-self: stretch;
  text-align: left;
}

/* ---- pixel dividers: with scroll motion on, the band's edges are rows of
   square pixels that fill in as the band arrives and break up as you leave
   it (scroll.js builds the squares and scrubs them with the scroll). Without
   motion they are not needed: the band keeps its fixed stepped edges. ---- */
.cv-pixels {
  display: none;
}
.has-gsap .cv-pixels {
  display: grid;
  grid-template-columns: repeat(var(--px-cols, 24), minmax(0, 1fr));
  background: none;
}
.cv-pixels i {
  aspect-ratio: 1;
  background: var(--bg);
}
.has-gsap .pv-main:not(.pv-about-page) .sections section.cv-statement {
  padding-block: clamp(80px, 12vh, 140px);
  -webkit-mask: none;
  mask: none;
}

/* ---- the case studies as a held stack (scroll.js): all in one cell, each
   showing through its mask: the top half, anchored right, and the bottom
   half, anchored left, both --q of the width wide. The first starts full;
   the rest wipe in as you scroll. Only the one in front takes clicks. ---- */
.has-gsap .cv-projects {
  display: grid;
  gap: 0;
}
.has-gsap .cv-project {
  --q: 1;
  grid-area: 1 / 1;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) right top / calc(var(--q) * 100%) 50.5% no-repeat,
    linear-gradient(#000 0 0) left bottom / calc(var(--q) * 100%) 50% no-repeat;
  mask:
    linear-gradient(#000 0 0) right top / calc(var(--q) * 100%) 50.5% no-repeat,
    linear-gradient(#000 0 0) left bottom / calc(var(--q) * 100%) 50% no-repeat;
}
.has-gsap .cv-project.is-current {
  pointer-events: auto;
}

/* the hero sentence a touch quieter: semibold, and slightly softer than
   the pure text colour (still far above AAA contrast) */
.pv .cv-hero .cv-title {
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 88%, var(--bg));
}

/* the case studies run edge to edge: the section has no side padding, its
   heading and the counter take it instead, so the list needs no negative
   margins (GSAP drops those when it holds the list in place) */
.pv-main:not(.pv-about-page) .sections > section.cv-work {
  padding-inline: 0;
}
.cv-work :is(.cv-work__head, .cv-counter) {
  padding-inline: max(var(--gx), (100% - 1240px) / 2);
}
.cv-projects {
  margin-inline: 0;
}

/* ---- the seasons, after kigo.studio: square outlined buttons, each with a
   red seal of its season's character beside the name; the chosen one is
   filled with ink. They sit at the top right of the hero and stay there as
   you scroll (sticky), until the hero ends where the case studies begin. -- */
.cv-seasons {
  position: sticky;
  top: calc(var(--bar-h) + 20px);
  z-index: 4;
  align-self: flex-end;
  display: flex;
  margin-top: calc(-1 * clamp(16px, 4vh, 40px));
  border: 1px solid var(--ink);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--cv-font);
}
.cv-season {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cv-season + .cv-season {
  border-left: 1px solid var(--ink);
}
.cv-season__seal {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--seal);
  border-radius: 3px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Songti SC", serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--seal);
  rotate: -4deg;
  transition: rotate 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}
.cv-season:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.cv-season:hover .cv-season__seal {
  rotate: 0deg;
}
.cv-season[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}
.cv-season[aria-pressed="true"] .cv-season__seal {
  border-color: var(--seal);
  background: var(--seal);
  color: #ffffff;
  rotate: 0deg;
}
.cv-season:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
:root {
  --seal: #c8323c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --seal: #ff5a5f;
  }
}
:root[data-theme="dark"] {
  --seal: #ff5a5f;
}
/* phones: just the seals, the names kept for screen readers */
@media (max-width: 600px) {
  .cv-season {
    padding: 0 9px;
  }
  .cv-season__name {
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    margin: -1px;
  }
}

/* What falls (home.js): a layer over the window that never takes clicks,
   fading away once the hero has gone */
.falling {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease;
  --seed: rgb(120 118 112 / 0.7);
  --seed-core: rgb(110 104 94 / 0.8);
}
.falling.is-away {
  opacity: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .falling {
    --seed: rgb(190 188 182 / 0.6);
    --seed-core: rgb(170 165 155 / 0.7);
  }
}
:root[data-theme="dark"] .falling {
  --seed: rgb(190 188 182 / 0.6);
  --seed-core: rgb(170 165 155 / 0.7);
}
.falling__piece {
  position: fixed;
  top: 0;
  left: 0;
  will-change: transform, opacity;
}
.falling__piece > span {
  display: block;
}
.falling__piece svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.flutter {
  animation: flutter 1.6s ease-in-out infinite alternate;
}
.flutter--r {
  animation-name: flutter-r;
}
.drift {
  animation: drift 2.4s ease-in-out infinite alternate;
}
.hover {
  animation: hover 3s ease-in-out infinite alternate;
}
:root.motion-paused :is(.flutter, .drift, .hover) {
  animation-play-state: paused;
}
@keyframes flutter {
  from { transform: translateX(-26px) rotate(-35deg); }
  to { transform: translateX(26px) rotate(40deg); }
}
@keyframes flutter-r {
  from { transform: translateX(24px) rotate(30deg); }
  to { transform: translateX(-24px) rotate(-45deg); }
}
@keyframes drift {
  from { transform: translateX(-10px); }
  to { transform: translateX(10px); }
}
@keyframes hover {
  from { transform: translate(-18px, 6px); }
  to { transform: translate(18px, -6px); }
}

/* ---- quiet backgrounds, after kigo.studio: faint ink-wash mountains along
   the foot of the hero (three ridges, lighter as they recede, fading into
   mist at the top) and a soft sun in the season's colour behind the
   headline. Only backgrounds: nothing moves, nothing takes clicks, and the
   text keeps its contrast. Let's connect closes the page with the same
   ridges, quieter. ------------------------------------------------------ */
:root {
  --ridges: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 420%22 preserveAspectRatio=%22none%22><path d=%22M0,420 L0,50 L20,65 L40,75 L60,83 L80,91 L100,101 L120,106 L140,102 L160,91 L180,82 L200,79 L220,83 L240,88 L260,91 L280,92 L300,97 L320,107 L340,116 L360,119 L380,115 L400,112 L420,116 L440,128 L460,143 L480,157 L500,170 L520,186 L540,207 L560,227 L580,238 L600,237 L620,231 L640,225 L660,222 L680,218 L700,211 L720,199 L740,191 L760,188 L780,187 L800,181 L820,165 L840,144 L860,125 L880,111 L900,100 L920,88 L940,76 L960,70 L980,73 L1000,84 L1020,94 L1040,98 L1060,95 L1080,92 L1100,91 L1120,91 L1140,86 L1160,76 L1180,68 L1200,66 L1220,72 L1240,79 L1260,79 L1280,72 L1300,64 L1320,59 L1340,55 L1360,47 L1380,36 L1400,26 L1420,25 L1440,35 L1460,52 L1480,68 L1500,81 L1520,94 L1540,111 L1560,130 L1580,144 L1600,150 L1600,420 Z%22 fill=%22%231e293b%22 fill-opacity=%220.025%22/><path d=%22M0,420 L0,139 L20,140 L40,147 L60,149 L80,148 L100,161 L120,187 L140,212 L160,231 L180,252 L200,268 L220,268 L240,261 L260,262 L280,267 L300,265 L320,263 L340,265 L360,261 L380,245 L400,229 L420,227 L440,230 L460,231 L480,239 L500,253 L520,255 L540,242 L560,231 L580,224 L600,212 L620,199 L640,194 L660,191 L680,174 L700,151 L720,134 L740,123 L760,111 L780,110 L800,126 L820,145 L840,154 L860,163 L880,176 L900,185 L920,188 L940,200 L960,221 L980,236 L1000,238 L1020,239 L1040,238 L1060,227 L1080,215 L1100,218 L1120,231 L1140,240 L1160,246 L1180,258 L1200,266 L1220,262 L1240,259 L1260,267 L1280,277 L1300,278 L1320,278 L1340,276 L1360,261 L1380,232 L1400,206 L1420,191 L1440,177 L1460,162 L1480,158 L1500,159 L1520,149 L1540,135 L1560,133 L1580,139 L1600,144 L1600,420 Z%22 fill=%22%231e293b%22 fill-opacity=%220.04%22/><path d=%22M0,420 L0,276 L20,285 L40,312 L60,334 L80,344 L100,352 L120,346 L140,341 L160,346 L180,341 L200,334 L220,326 L240,309 L260,307 L280,313 L300,316 L320,322 L340,315 L360,300 L380,295 L400,287 L420,280 L440,274 L460,254 L480,241 L500,240 L520,243 L540,262 L560,279 L580,284 L600,296 L620,305 L640,315 L660,333 L680,334 L700,327 L720,323 L740,314 L760,319 L780,331 L800,333 L820,337 L840,336 L860,332 L880,341 L900,343 L920,334 L940,322 L960,296 L980,275 L1000,269 L1020,260 L1040,258 L1060,256 L1080,247 L1100,254 L1120,268 L1140,280 L1160,296 L1180,297 L1200,289 L1220,291 L1240,291 L1260,297 L1280,308 L1300,304 L1320,306 L1340,316 L1360,326 L1380,348 L1400,362 L1420,359 L1440,356 L1460,346 L1480,335 L1500,333 L1520,319 L1540,300 L1560,285 L1580,268 L1600,267 L1600,420 Z%22 fill=%22%231e293b%22 fill-opacity=%220.055%22/></svg>");
  --sun: #f2a7b8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ridges: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 420%22 preserveAspectRatio=%22none%22><path d=%22M0,420 L0,50 L20,65 L40,75 L60,83 L80,91 L100,101 L120,106 L140,102 L160,91 L180,82 L200,79 L220,83 L240,88 L260,91 L280,92 L300,97 L320,107 L340,116 L360,119 L380,115 L400,112 L420,116 L440,128 L460,143 L480,157 L500,170 L520,186 L540,207 L560,227 L580,238 L600,237 L620,231 L640,225 L660,222 L680,218 L700,211 L720,199 L740,191 L760,188 L780,187 L800,181 L820,165 L840,144 L860,125 L880,111 L900,100 L920,88 L940,76 L960,70 L980,73 L1000,84 L1020,94 L1040,98 L1060,95 L1080,92 L1100,91 L1120,91 L1140,86 L1160,76 L1180,68 L1200,66 L1220,72 L1240,79 L1260,79 L1280,72 L1300,64 L1320,59 L1340,55 L1360,47 L1380,36 L1400,26 L1420,25 L1440,35 L1460,52 L1480,68 L1500,81 L1520,94 L1540,111 L1560,130 L1580,144 L1600,150 L1600,420 Z%22 fill=%22%23cbd5e1%22 fill-opacity=%220.025%22/><path d=%22M0,420 L0,139 L20,140 L40,147 L60,149 L80,148 L100,161 L120,187 L140,212 L160,231 L180,252 L200,268 L220,268 L240,261 L260,262 L280,267 L300,265 L320,263 L340,265 L360,261 L380,245 L400,229 L420,227 L440,230 L460,231 L480,239 L500,253 L520,255 L540,242 L560,231 L580,224 L600,212 L620,199 L640,194 L660,191 L680,174 L700,151 L720,134 L740,123 L760,111 L780,110 L800,126 L820,145 L840,154 L860,163 L880,176 L900,185 L920,188 L940,200 L960,221 L980,236 L1000,238 L1020,239 L1040,238 L1060,227 L1080,215 L1100,218 L1120,231 L1140,240 L1160,246 L1180,258 L1200,266 L1220,262 L1240,259 L1260,267 L1280,277 L1300,278 L1320,278 L1340,276 L1360,261 L1380,232 L1400,206 L1420,191 L1440,177 L1460,162 L1480,158 L1500,159 L1520,149 L1540,135 L1560,133 L1580,139 L1600,144 L1600,420 Z%22 fill=%22%23cbd5e1%22 fill-opacity=%220.04%22/><path d=%22M0,420 L0,276 L20,285 L40,312 L60,334 L80,344 L100,352 L120,346 L140,341 L160,346 L180,341 L200,334 L220,326 L240,309 L260,307 L280,313 L300,316 L320,322 L340,315 L360,300 L380,295 L400,287 L420,280 L440,274 L460,254 L480,241 L500,240 L520,243 L540,262 L560,279 L580,284 L600,296 L620,305 L640,315 L660,333 L680,334 L700,327 L720,323 L740,314 L760,319 L780,331 L800,333 L820,337 L840,336 L860,332 L880,341 L900,343 L920,334 L940,322 L960,296 L980,275 L1000,269 L1020,260 L1040,258 L1060,256 L1080,247 L1100,254 L1120,268 L1140,280 L1160,296 L1180,297 L1200,289 L1220,291 L1240,291 L1260,297 L1280,308 L1300,304 L1320,306 L1340,316 L1360,326 L1380,348 L1400,362 L1420,359 L1440,356 L1460,346 L1480,335 L1500,333 L1520,319 L1540,300 L1560,285 L1580,268 L1600,267 L1600,420 Z%22 fill=%22%23cbd5e1%22 fill-opacity=%220.055%22/></svg>");
  }
}
:root[data-theme="dark"] {
  --ridges: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 420%22 preserveAspectRatio=%22none%22><path d=%22M0,420 L0,50 L20,65 L40,75 L60,83 L80,91 L100,101 L120,106 L140,102 L160,91 L180,82 L200,79 L220,83 L240,88 L260,91 L280,92 L300,97 L320,107 L340,116 L360,119 L380,115 L400,112 L420,116 L440,128 L460,143 L480,157 L500,170 L520,186 L540,207 L560,227 L580,238 L600,237 L620,231 L640,225 L660,222 L680,218 L700,211 L720,199 L740,191 L760,188 L780,187 L800,181 L820,165 L840,144 L860,125 L880,111 L900,100 L920,88 L940,76 L960,70 L980,73 L1000,84 L1020,94 L1040,98 L1060,95 L1080,92 L1100,91 L1120,91 L1140,86 L1160,76 L1180,68 L1200,66 L1220,72 L1240,79 L1260,79 L1280,72 L1300,64 L1320,59 L1340,55 L1360,47 L1380,36 L1400,26 L1420,25 L1440,35 L1460,52 L1480,68 L1500,81 L1520,94 L1540,111 L1560,130 L1580,144 L1600,150 L1600,420 Z%22 fill=%22%23cbd5e1%22 fill-opacity=%220.025%22/><path d=%22M0,420 L0,139 L20,140 L40,147 L60,149 L80,148 L100,161 L120,187 L140,212 L160,231 L180,252 L200,268 L220,268 L240,261 L260,262 L280,267 L300,265 L320,263 L340,265 L360,261 L380,245 L400,229 L420,227 L440,230 L460,231 L480,239 L500,253 L520,255 L540,242 L560,231 L580,224 L600,212 L620,199 L640,194 L660,191 L680,174 L700,151 L720,134 L740,123 L760,111 L780,110 L800,126 L820,145 L840,154 L860,163 L880,176 L900,185 L920,188 L940,200 L960,221 L980,236 L1000,238 L1020,239 L1040,238 L1060,227 L1080,215 L1100,218 L1120,231 L1140,240 L1160,246 L1180,258 L1200,266 L1220,262 L1240,259 L1260,267 L1280,277 L1300,278 L1320,278 L1340,276 L1360,261 L1380,232 L1400,206 L1420,191 L1440,177 L1460,162 L1480,158 L1500,159 L1520,149 L1540,135 L1560,133 L1580,139 L1600,144 L1600,420 Z%22 fill=%22%23cbd5e1%22 fill-opacity=%220.04%22/><path d=%22M0,420 L0,276 L20,285 L40,312 L60,334 L80,344 L100,352 L120,346 L140,341 L160,346 L180,341 L200,334 L220,326 L240,309 L260,307 L280,313 L300,316 L320,322 L340,315 L360,300 L380,295 L400,287 L420,280 L440,274 L460,254 L480,241 L500,240 L520,243 L540,262 L560,279 L580,284 L600,296 L620,305 L640,315 L660,333 L680,334 L700,327 L720,323 L740,314 L760,319 L780,331 L800,333 L820,337 L840,336 L860,332 L880,341 L900,343 L920,334 L940,322 L960,296 L980,275 L1000,269 L1020,260 L1040,258 L1060,256 L1080,247 L1100,254 L1120,268 L1140,280 L1160,296 L1180,297 L1200,289 L1220,291 L1240,291 L1260,297 L1280,308 L1300,304 L1320,306 L1340,316 L1360,326 L1380,348 L1400,362 L1420,359 L1440,356 L1460,346 L1480,335 L1500,333 L1520,319 L1540,300 L1560,285 L1580,268 L1600,267 L1600,420 Z%22 fill=%22%23cbd5e1%22 fill-opacity=%220.055%22/></svg>");
}
:root[data-season="summer"] {
  --sun: #f2c94c;
}
:root[data-season="autumn"] {
  --sun: #e8743b;
}
:root[data-season="winter"] {
  --sun: #9cc0e6;
}
.pv-main:not(.pv-about-page) .sections > section.cv-hero {
  background:
    var(--ridges) center bottom / 100% min(34vh, 320px) no-repeat,
    radial-gradient(circle at 74% 40%, color-mix(in srgb, var(--sun) 16%, transparent) 0, color-mix(in srgb, var(--sun) 7%, transparent) min(14vw, 180px), transparent min(24vw, 300px)),
    var(--paper) 0 0 / 240px auto,
    var(--bg);
  transition: background 0.6s ease;
}
.pv-main:not(.pv-about-page) .sections > section.cv-contact {
  background:
    var(--ridges) center bottom / 100% min(30vh, 280px) no-repeat,
    var(--paper) 0 0 / 240px auto,
    var(--bg);
}