/* R99 — Figma rEByP0d1g3H9iGDno3uTCe, Section 1
   1920 Home 493:3, 1440 Home 561:202, Mobile Home 561:221
   1920 About 559:94, 1440 About 561:136, Mobile About 561:232 */

@font-face {
  font-family: "Open Runde";
  src: url("../fonts/open-runde-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Runde";
  src: url("../fonts/open-runde-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --overlay: rgba(102, 102, 102, 0.4);
  --ink: #000000;
  --ink-muted: rgba(0, 0, 0, 0.7);
  --sheet-top: 40px;
  --sheet-radius: 32px;
  --hero-width: 190px;
  --hero-height: 88px;
  --mark-width: 76px;
  --mark-height: 36px;
  --mark-top-offset: 40px;
  --mark-to-copy: 44px;
  --copy-width: 347px;
  --about-gap: 32px;
  --bio-gap: 32px;
  --body-gap: 16px;
  --now-gap: 4px;
  --title-size: 16px;
  --title-leading: normal;
  --body-size: 14px;
  --body-leading: 24px;
  --quote-size: 14px;
  --quote-leading: 17px;
  --now-label-size: 12px;
  --now-label-leading: 20px;
  --now-name-size: 12px;
  --sheet-bottom-pad: 106px;
  --icon: 24px;
  --icon-gap: 20px;
  --social-bottom: 40px;
  --font: "Open Runde", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration: 620ms;
  --duration-out: 480ms;
  --bar-fade: 40px;
}

@media (min-width: 700px) {
  :root {
    --sheet-top: 60px;
    --sheet-radius: 44px;
    --hero-width: 402px;
    --hero-height: 188px;
    --mark-width: 76px;
    --mark-height: 36px;
    --mark-top-offset: 60px;
    --mark-to-copy: 63px;
    --copy-width: 522px;
    --about-gap: 60px;
    --bio-gap: 32px;
    --body-gap: 40px;
    --now-gap: 20px;
    --title-size: 24px;
    --title-leading: 31px;
    --body-size: 16px;
    --body-leading: 31px;
    --quote-size: 16px;
    --quote-leading: 27px;
    --now-label-size: 14px;
    --now-label-leading: 20px;
    --now-name-size: 16px;
    --sheet-bottom-pad: 193px;
    --social-bottom: 60px;
  }
}

@media (min-width: 1680px) {
  :root {
    --body-size: 18px;
    --quote-size: 20px;
  }
}

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

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  height: 100%;
  /* No iOS/Android grey tap-highlight box on any tappable element */
  -webkit-tap-highlight-color: transparent;
}

/* Tappable controls: no tap highlight, no :active fill, no long-press callout */
.r99--hero,
.sheet__logo,
.socials__link,
.sheet__scroll-thumb {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.r99--hero:active,
.sheet__logo:active,
.socials__link:active {
  background: transparent;
}

/* Focus rings are for keyboard users only. main.js sets html.is-kbd on
   keyboard input and clears it on pointer/touch, so a tap (or the script
   moving focus after a tap) never draws an outline. */
html:not(.is-kbd) :focus,
html:not(.is-kbd) :focus-visible {
  outline: none !important;
}

body {
  min-height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
}

body.is-locked { overflow: hidden; }

.stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  height: 100svh;
  background: var(--bg);
  overflow: hidden;
}

/* Home wordmark — centered, 402×188 desktop / 190×88 mobile */
.r99--hero {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--hero-width);
  height: var(--hero-height);
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  color: inherit;
  font: inherit;
  transition: transform var(--duration) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .r99--hero:hover {
    transform: translate(-50%, -50%) scale(1.02);
  }
  body.is-open .r99--hero:hover {
    transform: translate(-50%, -50%);
  }
}

.r99--hero:focus { outline: none; }
.r99--hero:focus-visible {
  outline: 2px solid #000;
  outline-offset: 8px;
}

body.is-open .r99--hero {
  cursor: default;
  pointer-events: none;
}

.r99__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: var(--hero-width);
  height: var(--hero-height);
  pointer-events: none;
  user-select: none;
}

.r99__mark--lg { display: none; }
.r99__mark--sm { display: block; }

@media (min-width: 700px) {
  .r99__mark--lg { display: block; }
  .r99__mark--sm { display: none; }
}

/* Overlay — rgba(102,102,102,0.4) over the home */
.overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration) var(--ease-out);
}

.overlay.is-visible,
body.is-open .overlay {
  opacity: 1;
  pointer-events: auto;
}

.overlay[hidden] { display: block; }
.overlay.is-uninitialized[hidden] { display: none; }

/* About sheet — full width, 60px/40px top gap, radius 44/32 */
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--sheet-top);
  bottom: 0;
  width: 100%;
  background: #fff;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  z-index: 20;
  transform: translateY(calc(100% + var(--sheet-top)));
  /* visibility flips only after the slide finishes (sheet is off-screen by
     then), so nothing of the sheet is left composited over the home page */
  visibility: hidden;
  transition: transform var(--duration) var(--ease-out), visibility 0s linear var(--duration);
  will-change: transform;
  overflow: hidden;
  isolation: isolate;
  /* Clip backdrop-filter so the blur can't bloom into the dimmed gap */
  -webkit-clip-path: inset(0 round var(--sheet-radius) var(--sheet-radius) 0 0);
  clip-path: inset(0 round var(--sheet-radius) var(--sheet-radius) 0 0);
  color: var(--ink);
  font-family: var(--font);
}

.sheet.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--duration) var(--ease-out), visibility 0s linear 0s;
}

body.is-closing .sheet {
  transition: transform var(--duration-out) var(--ease-in-out), visibility 0s linear var(--duration-out);
}

.sheet[hidden] { display: block; }
.sheet.is-uninitialized[hidden] { display: none; }

.sheet.is-dragging { transition: none; visibility: visible; }

/* Frosted bars — Figma About frames (559:94 / 561:136 / 561:232) have no bar
   layer: the sheet is plain white. So the bars must read as white, not grey:
   a near-opaque white tint over a light blur, full sheet width, and the soft
   edge is a separate white gradient (no mask on the blur layer, which some
   engines ignore or clip to the copy column, leaving a hard grey box). */
.sheet {
  --bar-tint: rgba(255, 255, 255, 0.98);
  --bar-fade-gradient: rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.78) 30%, rgba(255, 255, 255, 0.4) 62%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0) 100%;
}

/* Bottom bar — solid frosted band behind the pinned socials */
.sheet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--social-bottom) + var(--icon));
  background: #fff;
  pointer-events: none;
  z-index: 2;
}

/* Bottom bar — soft white fade above the band so copy dissolves smoothly */
.sheet::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--social-bottom) + var(--icon));
  height: var(--bar-fade);
  background: linear-gradient(to top, var(--bar-fade-gradient));
  pointer-events: none;
  z-index: 2;
}

/* Frosted top bar — R99 close mark stays pinned; copy scrolls underneath */
.sheet__bar {
  --bar-fade: 40px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--mark-top-offset);
  height: calc(var(--mark-top-offset) + var(--mark-height) + var(--bar-fade));
  box-sizing: border-box;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  /* Soft white fade on the bottom edge, below the frosted band */
  background: linear-gradient(to bottom, var(--bar-fade-gradient)) left bottom / 100% var(--bar-fade) no-repeat;
}

.sheet__bar::before {
  content: "";
  position: absolute;
  /* Start below the rounded-corner band so the blur can't leak into the dimmed gap */
  top: var(--sheet-radius);
  left: 0;
  right: 0;
  bottom: var(--bar-fade);
  background: #fff;
  pointer-events: none;
}

/* Frost only while the sheet is open and at rest. During open, close and
   drag the bands are plain white (visually the same at a 98% tint), so
   WebKit has no backdrop-filter layer that can detach from the sheet's
   transform and linger over the home page. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .sheet.is-settled .sheet__bar::before,
  .sheet.is-settled::after {
    background: var(--bar-tint);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.sheet__bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sheet-radius);
  background: #fff;
  pointer-events: none;
  border-radius: inherit;
}

/* No backdrop-filter (old engines) keeps the solid white default above.
   Reduced transparency: solid white even at rest. */
@media (prefers-reduced-transparency: reduce) {
  .sheet.is-settled .sheet__bar::before,
  .sheet.is-settled::after {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fff;
  }
}

.sheet__inner {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Logo is overlaid, so reserve its offset + height + gap in padding */
  padding: calc(var(--mark-top-offset) + var(--mark-height) + var(--mark-to-copy)) 16px var(--sheet-bottom-pad);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge */
}
.sheet__inner::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.sheet__logo {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--mark-width);
  height: var(--mark-height);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  pointer-events: auto;
}

.sheet__logo img,
.sheet__logo svg {
  display: block;
  fill: #000;
  width: var(--mark-width);
  height: var(--mark-height);
  pointer-events: none;
  user-select: none;
}

.sheet__logo:focus { outline: none; }
.sheet__logo:focus-visible {
  outline: 2px solid #000;
  outline-offset: 6px;
  border-radius: 2px;
}

.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--about-gap);
  width: min(var(--copy-width), 100%);
  text-align: center;
}

.about__bio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bio-gap);
  width: 100%;
}

.about__title {
  margin: 0;
  width: 100%;
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--title-size);
  line-height: var(--title-leading);
  color: var(--ink);
  letter-spacing: 0;
}

.about__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--body-gap);
  width: 100%;
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--ink-muted);
}

@media (min-width: 700px) {
  /* Title sits in the same 32px stack as the body copy, matching Figma Frame 6 */
  .about__body { display: contents; }

  .about__body p {
    width: 100%;
    text-wrap: pretty;
  }

  .about__body p.about__lead {
    width: 288px;
    max-width: 100%;
    text-wrap: balance;
  }
}

/* On tall desktop viewports, center the About column in the sheet
   (Figma 1920/1440: content midpoint at y=630). Logo stays pinned
   60px below the sheet top. Shorter viewports keep the top-flow
   layout so the mark and copy don't overlap. */
@media (min-width: 700px) and (min-height: 1100px) {
  .sheet__inner {
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.about__body p {
  margin: 0;
  max-width: 100%;
}

.about__quote {
  font-weight: 600;
  font-size: var(--quote-size);
  line-height: var(--quote-leading);
  color: var(--ink);
}

.about__quote-desk { display: none; }
.about__quote-mob { display: inline; }

@media (min-width: 700px) {
  .about__quote-desk { display: inline; }
  .about__quote-mob { display: none; }
}

@media (max-width: 699px) {
  .about__title {
    line-height: 19px;
  }
  .about__body p:not(.about__quote) {
    text-wrap: balance;
  }
  .about__quote {
    width: min(295px, 100%);
  }
}

.about__now {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--now-gap);
  width: 240px;
  max-width: 100%;
  text-align: center;
}

.about__now-label {
  margin: 0;
  width: 100%;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--now-label-size);
  line-height: var(--now-label-leading);
  color: var(--ink-muted);
}

.about__now-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--now-name-size);
  line-height: normal;
  color: var(--ink);
  white-space: nowrap;
}

@media (min-width: 700px) {
  .about__now-names { line-height: 19px; }
}

.about__now-names p { margin: 0; }

/* Socials — 24px icons, 20px gap, 60px from bottom on desktop, 40px on mobile */
.socials {
  position: fixed;
  left: 50%;
  bottom: max(var(--social-bottom), env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--icon-gap);
  width: max-content;
  height: var(--icon);
  z-index: 30;
}

@media (min-width: 1920px) and (min-height: 1200px) {
  .socials {
    top: 1116px;
    bottom: auto;
  }
}

.socials__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon);
  height: var(--icon);
  flex: 0 0 var(--icon);
  line-height: 0;
  color: #000;
  transition: opacity 200ms ease;
}

.socials__link img {
  width: 24px;
  height: 24px;
  display: block;
  pointer-events: none;
}

.socials__link:hover { opacity: 0.55; }
.socials__link:focus { outline: none; }
.socials__link:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
}

/* Custom scrollbar — Figma 579:372, 4×100px pill, rgba(0,0,0,0.1), 16px radius, 5px from the right */
.sheet__scroll {
  position: absolute;
  top: calc(var(--mark-top-offset) + var(--mark-height) + 16px);
  right: 5px;
  bottom: calc(var(--social-bottom) + var(--icon) + 16px);
  width: 4px;
  z-index: 4;
  pointer-events: none;
}
.sheet__scroll[hidden] { display: none; }
/* Wider hit target than the 4px thumb, especially on touch */
.sheet__scroll::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -8px;
  width: 24px;
  pointer-events: auto;
}
.sheet__scroll-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  will-change: transform;
}
.sheet__scroll-thumb:active { cursor: grabbing; }
.sheet__scroll-thumb:focus { outline: none; }
.sheet__scroll-thumb:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Page-load ripple canvas (js/ripple.js). Sits above the page background
   but below the wordmark (z 2), overlay (10), sheet (20) and socials (30). */
.ripple {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .ripple { display: none; }
}


/* Visually hidden heading for assistive tech and crawlers. Does not affect layout. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}