:root {
  --bg-start: #ffffff;
  --bg-end: #ebe3e5;
  --text: #171717;
  --muted: #8a8587;
  --line: rgba(23, 23, 23, 0.22);
  --accent: #d7ff00;
  --page-width: 920px;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--bg-start); }

body {
  margin: 0;
  background: rgb(var(--scroll-bg, 255 255 255));
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.55;
  transition: background-color 80ms linear;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  width: min(var(--page-width), calc(100% - 48px));
  margin: 0 auto;
  padding: 68px 0 64px;
}

/* Level 1 — main identity */
h1 {
  margin: 0;
  max-width: 100%;
  font-size: clamp(3rem, 7.5vw, 6.25rem);
  line-height: .88;
  letter-spacing: -.065em;
  font-weight: 700;
}

h1 a {
  color: inherit;
  text-decoration: none;
}

h1 a:hover,
h1 a:focus-visible {
  color: var(--accent);
  background-color: transparent;
  text-decoration: none;
}

/* Descriptor line below the name */
h1 + p {
  margin: 20px 0 0;
  max-width: none;
  font-size: clamp(.92rem, 1.6vw, 1.08rem);
  line-height: 1.3;
  letter-spacing: .015em;
}

/* Level 2 — section subtitles */
h2 {
  margin: 64px 0 20px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  line-height: 1.2;
  letter-spacing: .035em;
  font-weight: 600;
}

/* Years / metadata: intentionally secondary, not a fourth hierarchy level */
h3 {
  margin: 27px 0 10px;
  font-size: .78rem;
  line-height: 1.2;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--muted);
}

/* Level 3 — body text */
p {
  max-width: 760px;
  margin: 0 0 7px;
}

strong { font-weight: 600; }
em { font-style: italic; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(23, 23, 23, .42);
  text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
  color: var(--accent);
  background-color: #171717;
  text-decoration-color: var(--accent);
}

ul {
  margin: 0 0 14px;
  padding-left: 1.15rem;
}

li { margin: 0 0 4px; }

footer {
  margin-top: 72px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .74rem;
  line-height: 1.4;
  color: var(--muted);
}

@media (max-width: 640px) {
  .page {
    width: min(100% - 30px, var(--page-width));
    padding: 42px 0 40px;
  }

  h1 { letter-spacing: -.055em; }
  h1 + p { margin-top: 14px; }
  h2 { margin-top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

@media print {
  body { background: #fff !important; }
  .page { width: 100%; padding: 0; }
  a { text-decoration: none; }
  footer { display: none; }
}


/* Kenneth Russo header artwork */
.bio-content {
  position: relative;
}
.hero-artwork {
  float: right;
  width: clamp(130px, 21vw, 220px);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0 0 22px 38px;
  display: block;
}
.bio-content h1 {
  max-width: calc(100% - 245px);
}
.bio-content h1 + p {
  max-width: calc(100% - 245px);
}
.bio-content h2:first-of-type {
  clear: both;
}
@media (max-width: 700px) {
  .hero-artwork {
    float: none;
    width: min(100%, 300px);
    margin: 24px 0 28px;
  }
  .bio-content h1,
  .bio-content h1 + p {
    max-width: none;
  }
}

/* v39 — subtle scroll interaction layer */
.kr-scroll-nav {
  position: fixed;
  left: max(14px, calc((100vw - var(--page-width)) / 2 - 92px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 72px;
  height: 210px;
  pointer-events: none;
  font-size: 8px;
  letter-spacing: .14em;
  font-weight: 600;
}

.kr-scroll-track,
.kr-scroll-progress {
  position: absolute;
  left: 3px;
  top: 4px;
  width: 1px;
  height: calc(100% - 8px);
}

.kr-scroll-track { background: rgba(23,23,23,.16); }

.kr-scroll-progress {
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}

.kr-scroll-step {
  position: absolute;
  left: 0;
  width: 72px;
  transform: translateY(-50%);
  color: rgba(23,23,23,.30);
  transition: color .25s ease;
}

.kr-scroll-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid rgba(23,23,23,.22);
  background: rgb(var(--scroll-bg, 255 255 255));
  transform: translateY(-50%);
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.kr-scroll-step span {
  display: block;
  margin-left: 15px;
  white-space: nowrap;
}

.kr-scroll-step.is-active { color: #171717; }

.kr-scroll-step.is-active::before,
.kr-scroll-step.is-passed::before {
  background: var(--accent);
  border-color: var(--accent);
}

.kr-scroll-step.is-active::before { transform: translateY(-50%) scale(1.35); }

/* Section reveal: only enabled after JS is ready. */
.kr-motion-ready .kr-reveal {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1);
}

.kr-motion-ready .kr-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Existing section rules visually draw themselves when they enter the viewport. */
.kr-motion-ready h2.kr-rule {
  border-top-color: transparent;
  position: relative;
}

.kr-motion-ready h2.kr-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}

.kr-motion-ready h2.kr-rule.is-visible::before { transform: scaleX(1); }

/* The existing artwork wrapper receives only a very small scroll offset.
   Its image hover/zoom remains untouched. */
.hero-artwork-wrap {
  will-change: transform;
}

@media (max-width: 700px) {
  .kr-scroll-nav {
    left: 6px;
    width: 10px;
    height: 170px;
  }
  .kr-scroll-step { width: 10px; }
  .kr-scroll-step span { display: none; }
  .kr-scroll-track,
  .kr-scroll-progress { left: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .kr-scroll-nav { display: none; }
  .kr-motion-ready .kr-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .kr-motion-ready h2.kr-rule::before {
    transform: scaleX(1);
    transition: none;
  }
  .hero-artwork-wrap { transform: none !important; }
}

/* v40 — years become momentary markers while scrolling through Selected */
.bio-content h3 {
  transition: color .45s ease, transform .45s ease;
}
.bio-content h3.kr-year-active {
  color: var(--accent);
  transform: translateX(2px);
}


/* v41 — WORK / YEAR */
.kr-view-toggle{display:flex;align-items:baseline;gap:7px;margin:-8px 0 26px;font-size:.69rem;line-height:1;letter-spacing:.09em;font-weight:600;color:var(--muted)}
.kr-view-toggle button{appearance:none;border:0;padding:3px 1px;background:transparent;color:var(--muted);font:inherit;letter-spacing:inherit;cursor:pointer}
.kr-view-toggle button:hover,.kr-view-toggle button:focus-visible{color:var(--accent)}
.kr-view-toggle button.is-active{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.kr-view-sep{color:rgba(23,23,23,.28)}
.kr-year-view{margin-top:0}.kr-year-view[hidden]{display:none!important}
.kr-year-heading{margin:30px 0 11px;color:var(--accent);font-size:.82rem;letter-spacing:.07em}
.kr-year-list{margin:0 0 24px;padding-left:0;list-style:none}
.kr-year-list li{margin:0 0 8px;max-width:820px}
.kr-year-work{color:var(--muted)}


/* v43 — remove only the lateral BIO / SELECTED / LINKS rail */
.kr-scroll-nav { display: none !important; }

/* Years: dark by default, white at the active scroll position */
.bio-content h3.kr-year-active {
  color: #ffffff !important;
}
.kr-year-view .kr-year-heading {
  color: #171717 !important;
}
.kr-year-view .kr-year-heading.kr-year-active {
  color: #ffffff !important;
}


/* v44 — final WORK / YEAR corrections */
.kr-scroll-nav { display: none !important; }
#kr-work-view[hidden],
.kr-year-view[hidden] { display: none !important; }

.kr-year-view .kr-year-heading {
  color: #171717 !important;
}
.bio-content h3.kr-year-active,
.kr-year-view .kr-year-heading.kr-year-active {
  color: #ffffff !important;
}


/* v45 — bottom-quarter glass field */
.kr-bottom-glass {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 13vh;
  z-index: 12;
  pointer-events: none;
  opacity: var(--glass-opacity, 1);
  backdrop-filter: blur(10px) saturate(108%);
  -webkit-backdrop-filter: blur(10px) saturate(108%);
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.025) 28%,
      rgba(255,255,255,0.075) 66%,
      rgba(255,255,255,0.13) 100%
    );
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.30) 22%, rgba(0,0,0,.78) 62%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.30) 22%, rgba(0,0,0,.78) 62%, #000 100%);
  transition: opacity 70ms linear;
}

@media (max-width: 700px) {
  .kr-bottom-glass {
    height: 13vh;
    backdrop-filter: blur(8px) saturate(106%);
    -webkit-backdrop-filter: blur(8px) saturate(106%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kr-bottom-glass { transition: none; }
}

@media print {
  .kr-bottom-glass { display: none !important; }
}


/* v47 — diagonal lower-right glass field */
.kr-bottom-glass {
  left: auto;
  right: 0;
  bottom: 0;
  width: min(58vw, 760px);
  height: 18vh;

  /* Diagonal entrance from upper-right/lower-left, concentrated at bottom-right */
  -webkit-clip-path: polygon(38% 100%, 100% 0, 100% 100%);
  clip-path: polygon(38% 100%, 100% 0, 100% 100%);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.025) 34%,
      rgba(255,255,255,0.075) 68%,
      rgba(255,255,255,0.14) 100%
    );

  -webkit-mask-image: linear-gradient(
    135deg,
    transparent 0%,
    rgba(0,0,0,.24) 28%,
    rgba(0,0,0,.78) 67%,
    #000 100%
  );
  mask-image: linear-gradient(
    135deg,
    transparent 0%,
    rgba(0,0,0,.24) 28%,
    rgba(0,0,0,.78) 67%,
    #000 100%
  );
}

@media (max-width: 700px) {
  .kr-bottom-glass {
    width: 72vw;
    height: 15vh;
    -webkit-clip-path: polygon(34% 100%, 100% 4%, 100% 100%);
    clip-path: polygon(34% 100%, 100% 4%, 100% 100%);
  }
}


/* v48 — 17% diagonal glass: high on the right, low on the left */
.kr-bottom-glass {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 17vh;

  /*
    Upper glass boundary:
    highest at the right edge, descending diagonally toward the left.
  */
  -webkit-clip-path: polygon(0 88%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 88%, 100% 0, 100% 100%, 0 100%);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.025) 30%,
      rgba(255,255,255,0.075) 66%,
      rgba(255,255,255,0.14) 100%
    );

  -webkit-mask-image: linear-gradient(
    135deg,
    transparent 0%,
    rgba(0,0,0,.24) 28%,
    rgba(0,0,0,.78) 68%,
    #000 100%
  );
  mask-image: linear-gradient(
    135deg,
    transparent 0%,
    rgba(0,0,0,.24) 28%,
    rgba(0,0,0,.78) 68%,
    #000 100%
  );
}

@media (max-width: 700px) {
  .kr-bottom-glass {
    width: 100vw;
    height: 17vh;
    -webkit-clip-path: polygon(0 86%, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 86%, 100% 0, 100% 100%, 0 100%);
  }
}


/* v49 — stronger 23% diagonal glass */
.kr-bottom-glass {
  height: 23vh;

  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);

  -webkit-clip-path: polygon(0 88%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 88%, 100% 0, 100% 100%, 0 100%);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.055) 28%,
      rgba(255,255,255,0.14) 64%,
      rgba(255,255,255,0.24) 100%
    );

  -webkit-mask-image: linear-gradient(
    135deg,
    transparent 0%,
    rgba(0,0,0,.38) 24%,
    rgba(0,0,0,.88) 64%,
    #000 100%
  );
  mask-image: linear-gradient(
    135deg,
    transparent 0%,
    rgba(0,0,0,.38) 24%,
    rgba(0,0,0,.88) 64%,
    #000 100%
  );
}

@media (max-width: 700px) {
  .kr-bottom-glass {
    height: 23vh;
    backdrop-filter: blur(13px) saturate(114%);
    -webkit-backdrop-filter: blur(13px) saturate(114%);
    -webkit-clip-path: polygon(0 86%, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 86%, 100% 0, 100% 100%, 0 100%);
  }
}

/* v50 — white arrow cursor on interactive links */
@media (hover: hover) and (pointer: fine) {
  a:hover, a:focus-visible, .kr-view-toggle button:hover {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28'%3E%3Cpath d='M2 2 L2 22 L7.5 16.5 L11.5 25 L15 23.5 L11 15 L19 15 Z' fill='white' stroke='%23171717' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, pointer;
  }
}


/* v51: persistent, pointer-painted fluid background; never intercepts clicks */
.kr-fluid-background {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .68;
}
.page { position: relative; z-index: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .kr-fluid-background { display: none !important; }
}
@media print { .kr-fluid-background { display: none !important; } }