/* =============================================================================
   krisminter.com

   Few elements, each one generous. The restraint is in the element count, not
   in the scale: type is large, space is wide, the portrait is a real moment.

   No texture overlays, no icon set, no captions, no index numerals, no labels
   above headings, no monospace. What is left has to be set perfectly, because
   there is nothing else on the page to look at.

   House rule from Avenue 510: no em-dashes anywhere, comments included.
   ========================================================================== */

:root {
  --gold: 36 46% 44%;          /* Avenue 510's accent, used on hover and nowhere else */

  /* A real scale, not two sizes. Display sits tight, body sits open, which is
     how a type family is supposed to behave across sizes. */
  /* Capped at 4.25rem rather than 5rem: the headline is a full sentence now,
     and at 5rem it broke into ragged four line settings inside the column. */
  --t-display: clamp(2.35rem,  1.25rem + 4.7vw,  4.25rem);
  --t-h2:      clamp(1.875rem, 1.35rem + 2.3vw,  3.25rem);
  --t-h3:      clamp(1.25rem,  1.13rem + .55vw,  1.5rem);
  --t-lead:    clamp(1.25rem,  1.09rem + .72vw,  1.625rem);
  --t-body:    clamp(1.0625rem, 1.02rem + .2vw,  1.1875rem);
  --t-small:   .875rem;

  --w-page: 60rem;
  --w-text: 36rem;
  --pad: clamp(1.5rem, .3rem + 5vw, 5rem);
  --gap: clamp(5.5rem, 3rem + 9vw, 10.5rem);

  /* Long, slow, decelerating. Motion should finish, not snap. */
  --ease: cubic-bezier(.16, 1, .3, 1);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

:root[data-theme="light"] {
  --bg:    hsl(40 25% 97.5%);
  --t1:    hsl(192 26% 10%);
  --t2:    hsl(192 26% 10% / .64);
  --t3:    hsl(192 26% 10% / .42);
  --hair:  hsl(192 26% 10% / .1);
  --accent: hsl(var(--gold));
  --img:   grayscale(1) contrast(1.09) brightness(.955);
  --shade:
    0 32px 64px -32px hsl(192 26% 10% / .3),
    0 8px 20px -12px hsl(192 26% 10% / .14);
}

:root[data-theme="dark"] {
  --bg:    hsl(195 20% 6.5%);
  --t1:    hsl(40 18% 95%);
  --t2:    hsl(40 18% 95% / .62);
  --t3:    hsl(40 18% 95% / .4);
  --hair:  hsl(40 18% 95% / .13);
  --accent: hsl(36 44% 62%);
  --img:   grayscale(1) contrast(1.06) brightness(.88);
  --shade:
    0 32px 64px -32px hsl(0 0% 0% / .7),
    0 8px 20px -12px hsl(0 0% 0% / .5);
}

/* ------------------------------------------------------------------ base -- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--t2);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -.011em;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: hsl(var(--gold) / .2); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 3px;
}

.skip {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 30;
  padding: .7rem 1.1rem;
  background: var(--t1);
  color: var(--bg);
  border-radius: .6rem;
  font-size: var(--t-small);
  transform: translateY(-180%);
  transition: transform .3s var(--ease);
}
.skip:focus-visible { transform: none; }

/* ------------------------------------------------------------------- top -- */

/* Same width, same centring, same inline padding as main. Previously this sat
   flush to the viewport edge while the content below was centred in a 60rem
   column, so the name and the headline started on two different margins. */
.top {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem) var(--pad) 0;
}
.wordmark {
  display: inline-block;
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -.022em;
  color: var(--t1);
  transition: opacity .3s var(--ease);
}
.wordmark:hover { opacity: .55; }

/* ------------------------------------------------------------------ main -- */

main {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ------------------------------------------------------------------ hero -- */

/* Tightened deliberately. The old top padding topped out at 11rem, which pushed
   the portrait most of a screen below the fold on a laptop. The air above the
   headline is now roughly the same as the air below it. */
.hero {
  padding-top: clamp(1.75rem, 1rem + 2.4vw, 3.25rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.display {
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.038em;
  color: var(--t1);
  max-width: 20ch;
}

/* Each line rises out of its own mask. Written into the markup so it plays on
   load without waiting for script, and so the text is real text throughout. */
.ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.ln > span,
.hero-sub > span { display: block; }

.js .ln > span,
.js .hero-sub > span {
  transform: translateY(110%);
  animation: rise-in 1.15s var(--ease) forwards;
}
.js .ln:nth-child(1) > span { animation-delay: .05s; }
.js .ln:nth-child(2) > span { animation-delay: .14s; }
.js .hero-sub > span        { animation-delay: .26s; }

@keyframes rise-in { to { transform: none; } }

.hero-sub {
  overflow: hidden;
  /* Sized to the line that is actually there. At 30rem it broke after "Saye"
     and left "Labs." alone on a second row. */
  max-width: 40rem;
  margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  font-size: var(--t-lead);
  line-height: 1.42;
  letter-spacing: -.022em;
  color: var(--t3);
}

/* -------------------------------------------------------------- portrait -- */

/* The portrait was shot against a blown out white wall. Presented large on an
   off white page its own background merges with the paper and the top corners
   vanish, so the radius reads as a rendering fault rather than a decision. Two
   fixes, both quiet: the grade pulls the highlights down a few percent so the
   backdrop settles into a distinct tone, and a hairline sits inside the radius
   so the edge is always described. */
.portrait {
  position: relative;
  width: min(27rem, 100%);
  margin-bottom: var(--gap);
  border-radius: clamp(1rem, .5rem + 1.6vw, 1.75rem);
  overflow: hidden;
  box-shadow: var(--shade);
  isolation: isolate;
  /* The ratio lives on the frame, not the image. An <img> carries its width
     and height attributes into the UA stylesheet as presentational hints, so
     an author rule that sets only `width` leaves `height: 1000px` standing and
     the picture renders stretched. Sizing the frame and letting the image fill
     it sidesteps that entirely. */
  aspect-ratio: 1 / 1;
}
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--hair);
  pointer-events: none;
}
/* The source's own 1:1 framing. Cropping tighter clipped the shoulders and
   made a well composed headshot feel cramped. */
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img);
}

/* --------------------------------------------------------------- chapter -- */

.chapter { padding-bottom: var(--gap); }
.chapter:last-of-type { padding-bottom: clamp(4rem, 2rem + 6vw, 7rem); }

h2 {
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.032em;
  color: var(--t1);
  margin-bottom: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
}

/* A heading that is also a link. Sized in em so the arrow tracks the heading
   at every breakpoint, with the stroke widened in viewBox units to hold the
   same optical weight it has at the smaller size in the contact list. */
h2 a {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  transition: color .3s var(--ease);
}
h2 a:hover { color: var(--accent); }
h2 a svg {
  width: .42em; height: .42em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--t3);
  transition: color .3s var(--ease), transform .45s var(--ease);
}
h2 a:hover svg { color: var(--accent); transform: translate(.09em, -.09em); }

.prose { max-width: var(--w-text); }
.prose p + p { margin-top: 1.1em; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.42;
  letter-spacing: -.022em;
  color: var(--t1);
  max-width: var(--w-text);
}
.prose .lead { margin-bottom: 1.6em; }

/* ------------------------------------------------------------------ film -- */
/* Ported from the Avenue 510 hero tour frame so the two properties show the
   same component: 16:9 stage, bottom weighted scrim, corner label, and a gold
   play button with two rings pinging out of it. The gold is Avenue's own
   primary and stays fixed in both appearances, because it belongs to that
   brand rather than to this page's palette. */

.film,
.film-live {
  --avenue-gold: 36 46% 44%;
  position: relative;
  display: block;
  width: min(44rem, 100%);
  margin-top: clamp(2.25rem, 1.4rem + 2.8vw, 3.5rem);
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  appearance: none;
  background: var(--bg);
  border-radius: clamp(1rem, .5rem + 1.6vw, 1.75rem);
  overflow: hidden;
  box-shadow: 0 32px 80px -32px rgb(0 0 0 / .4);
  isolation: isolate;
}
.film::after,
.film-live::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--hair);
  pointer-events: none;
}

/* Poster sits under the clip and holds the frame until it can play, so there
   is no gap and no decode flash. The clip's own opening frame, so the handover
   is invisible. */
.film-poster,
.film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-poster { transition: opacity .3s var(--ease); }
.film.is-playing .film-poster { opacity: 0; }

/* Holds the label and the button against a bright frame. */
.film-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgb(0 0 0 / .45), rgb(0 0 0 / .05), rgb(0 0 0 / .2));
}

.film-badge {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 1rem;
  pointer-events: none;
  padding: .25rem .625rem;
  border-radius: .75rem;
  background: rgb(0 0 0 / .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: .625rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .95);
}

/* The whole stage is the click target, as on Avenue. */
.film-btn {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
}
.film-btn > * { grid-area: 1 / 1; }

.film-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: hsl(var(--avenue-gold) / .35);
  animation: film-ping 2.4s ease-out infinite;
}
.film-ring:nth-child(2) { animation-delay: 1.2s; }

@keyframes film-ping {
  0%        { transform: scale(1);    opacity: .55; }
  80%, 100% { transform: scale(1.65); opacity: 0; }
}

.film-core {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: hsl(var(--avenue-gold) / .95);
  border: 1px solid hsl(var(--avenue-gold));
  box-shadow: 0 2px 4px rgb(0 0 0 / .12);
  transition: background-color .3s var(--ease);
}
.film:hover .film-core,
.film-btn:focus-visible .film-core { background: hsl(var(--avenue-gold)); }
.film-core svg {
  width: 28px;
  height: 28px;
  fill: #fff;
  margin-left: 2px;   /* a triangle's optical centre sits left of its box */
}

.film-live iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.statement {
  margin-top: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.026em;
  color: var(--t1);
}

/* ------------------------------------------------------------------ path -- */

.path li {
  display: grid;
  gap: .5rem 2.5rem;
  padding: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem) 0;
  border-top: 1px solid var(--hair);
}
.path li:last-child { border-bottom: 1px solid var(--hair); }

@media (min-width: 46rem) {
  .path li { grid-template-columns: 9rem minmax(0, 1fr); }
}

.when {
  font-size: var(--t-small);
  color: var(--t3);
  letter-spacing: -.004em;
  padding-top: .35em;
}
.what { max-width: var(--w-text); }
.what h3 {
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.024em;
  color: var(--t1);
  margin-bottom: .4em;
}
/* Some entries are the fact and nothing else. Drop the trailing margin so the
   row does not sit taller than the words in it. */
.what h3:last-child { margin-bottom: 0; }

/* Entries that run to two paragraphs need the same separation the prose gets.
   Scoping that rule to .prose alone ran them together here. */
.what p + p { margin-top: 1em; }

/* ----------------------------------------------------------------- links -- */

.links { max-width: var(--w-text); }
.links li { border-top: 1px solid var(--hair); }
.links li:last-child { border-bottom: 1px solid var(--hair); }

.links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.1rem, .8rem + 1vw, 1.5rem) 0;
  font-size: var(--t-lead);
  letter-spacing: -.022em;
  color: var(--t1);
  transition: color .3s var(--ease), padding-left .45s var(--ease);
}
.links a:hover { color: var(--accent); padding-left: .75rem; }

.links svg {
  width: 1.05em; height: 1.05em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--t3);
  transition: color .3s var(--ease), transform .45s var(--ease);
}
.links a:hover svg { color: var(--accent); transform: translate(3px, -3px); }

/* ----------------------------------------------------------------- foot -- */

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding: 2rem var(--pad) 2.75rem;
  border-top: 1px solid var(--hair);
  font-size: var(--t-small);
  color: var(--t3);
}

.appearance {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--t3);
  cursor: pointer;
  transition: color .3s var(--ease);
}
.appearance:hover { color: var(--t1); }
.appearance-dot {
  width: .55rem; height: .55rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color .3s var(--ease);
}
.appearance[aria-pressed="true"] .appearance-dot { background: currentColor; }

/* ---------------------------------------------------------------- reveal -- */
/* Scoped to html.js, so with scripting off nothing is ever hidden. */

.js .rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
}
.js .rise.in { opacity: 1; transform: none; }

/* --------------------------------------------------------------- narrow -- */

@media (max-width: 46rem) {
  .display { max-width: none; }
  .portrait { width: 100%; }
}

/* --------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .rise { opacity: 1; transform: none; }
  .js .ln > span, .js .hero-sub > span { transform: none; }
  .film-ring { animation: none !important; opacity: .3; }
}

/* ---------------------------------------------------------------- print -- */

@media print {
  .skip, .appearance { display: none !important; }
  body { background: #fff; color: #000; }
  .js .rise, .js .ln > span, .js .hero-sub > span { opacity: 1 !important; transform: none !important; }
  .chapter { break-inside: avoid; padding-bottom: 2rem; }
}