/*
  Inter, self-hosted. Version 20 latin subset, variable weight 100-900, from
  the Google Fonts CDN. Inter is SIL Open Font License 1.1 (Rasmus Andersson,
  https://rsms.me/inter) — free to redistribute with this notice.

  Self-hosted rather than linked so the page never falls back to Helvetica
  because a third-party CDN is slow, blocked, or down.
*/
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
  Surfaces are layered the way the reference cards are: a deep ground, a raised
  card that carries the shadow, and controls raised again inside it. Each step
  is a lighter neutral, never a different hue.
*/
:root {
  --ground: #0a0a0a;
  /* Cards sit only just above the ground — darker than the buttons. */
  --surface: #121212;
  --surface-hover: #181818;
  --control: #1c1c1c;
  --control-hover: #242424;

  --ink: #f5f0eb;
  --ink-2: #a09a93;
  --ink-3: #6b6560;

  --hairline: rgb(255 255 255 / 7%);
  --hairline-strong: rgb(255 255 255 / 12%);

  /* Accent and the two button fills, taken from the Figma frames. */
  --accent: #1763e6;
  --accent-hover: color-mix(in srgb, var(--accent) 88%, white);
  --accent-glow: #679fff;
  --accent-ink: #ffffff;

  --button-2: #cfcfcf;
  --button-2-hover: #dedede;
  --button-2-ink: #0a0a0a;

  --shadow-toast: 0 24px 48px -12px rgb(0 0 0 / 70%);

  --radius-row: 18px;
  --radius-button: 32px;
  --radius-avatar: 16px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
}

/*
  The UA rule for [hidden] lives in the user-agent origin, so any author
  `display` on the same element beats it. Author-origin and !important, so an
  element hidden from JS — the avatar images, until they load — stays hidden.
*/
[hidden] {
  display: none !important;
}

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

/* Scrollbars hidden; scrolling itself is untouched. */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgb(245 240 235 / 20%);
  color: var(--ink);
}

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

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

ul {
  list-style: none;
}

/* One token, so the sticky bar's contents line up with the page's. */
:root {
  --page-max: 34rem;
}

.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 88px 24px 64px;
}

/* ---------------------------------------------------------------- identity */

.identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-avatar);
  background: var(--surface);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sits under the photo; visible only until (or unless) the photo loads. */
.avatar-fallback {
  position: absolute;
  color: var(--ink-2);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.avatar:has(img:not([hidden])) .avatar-fallback {
  display: none;
}

.name {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -1px;
}

.role {
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 16px;
  letter-spacing: -0.2px;
}

/* Credential sits on its own line, in the accent, so it reads as a fact. */
.credential {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 7px 13px 7px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.1px;
}

.credential-icon {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--accent);
}

/* ----------------------------------------------------------------- actions */

/* The two frames sit side by side, splitting the width evenly. */
.actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

/*
  `flex-basis: 0` rather than auto, so the pair divides the row evenly instead
  of in proportion to the two labels' lengths.
*/
.actions .button {
  flex: 1 1 0;
  min-width: 0;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-button);
  font-family: inherit;
  font-size: 16px;
  /* 22px line box + 8px padding either side lands the frame's 38px height. */
  line-height: 22px;
  font-weight: 600;
  /* Uppercase needs the letters opened up; the negative tracking that suits
     mixed case closes them into a block. */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color 0.24s var(--ease),
    transform 0.24s var(--ease);
}

/*
  Both fills are solid with an inset glow standing in for the light along the
  top edge, exactly as the Figma frames describe them.
*/
.button--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 0 4px var(--accent-glow);
}

.button--secondary {
  background: var(--button-2);
  color: var(--button-2-ink);
  box-shadow: inset 0 0 4px #ffffff;
}

/* The row arrow is a filled path, so it takes its colour from `color`. */
.row-arrow {
  fill: currentColor;
}

/* -------------------------------------------------------------------- rows */

.links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 36px;
}

/*
  A title between links. It rides in the same list so /hq can drag it among
  the rows, and takes its own top margin because the list's 6px gap is tuned
  for rows sitting next to each other, not for a new group starting.
*/
.link-section-title {
  margin: 22px 0 2px;
  padding: 0 4px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The first title opens the list, which already has its own margin above. */
.links > li:first-child .link-section-title {
  margin-top: 0;
}

.row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.24s var(--ease);
}

.row:active {
  transform: translateY(0);
}

/*
  One line per row: the domain carries the weight, the handle trails it in the
  same line. --ink-2 rather than --ink-3 because at 16px this is body-sized
  text and --ink-3 sits under the 4.5:1 contrast bar.
*/
.row-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.5px;
}

.row-handle {
  color: var(--ink-2);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.2px;
}

/*
  Official brand logos, at their own aspect ratios. Each sits in the same 28px
  square and is fitted inside it (preserveAspectRatio), so nothing is
  stretched. Tall and wide marks are nudged so they read the same optical size
  as the square ones — matching pixel boxes would make Framer look oversized
  and Gmail undersized.
*/
/* The tile is the only card left: a square that lifts the logo off the page. */
.row-tile {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--control);
  box-shadow:
    0 6px 14px -4px rgb(0 0 0 / 55%),
    inset 0 1px 0 rgb(255 255 255 / 6%);
  transition:
    background-color 0.24s var(--ease),
    border-color 0.24s var(--ease),
    box-shadow 0.24s var(--ease);
}

.row-logo {
  width: 24px;
  height: 24px;
  flex: none;
  /* Marks that carry no fill of their own would default to black here. */
  fill: var(--ink);
}

.row-logo--tall {
  transform: scale(0.88);
}

.row-logo--wide {
  transform: scale(1.06);
}

/*
  Marks whose mass sits in the centre with open corners read smaller than a
  solid mark filling the same box, so they get a nudge up.
*/
.row-logo--open {
  transform: scale(1.08);
}

.row-arrow {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--ink-3);
  transition:
    transform 0.24s var(--ease),
    color 0.24s var(--ease);
}

/* ------------------------------------------------------------------ footer */

.footer {
  margin-top: 40px;
  color: var(--ink-3);
  font-size: 13px;
}

@media (max-width: 560px) {
  .page {
    padding: 56px 20px 48px;
  }

  .name {
    font-size: 26px;
  }

  .row {
    padding: 8px 2px;
  }

  .row-name {
    font-size: 20px;
  }

  .row-handle {
    font-size: 17px;
  }

}


/*
  Hover is gated behind a real pointer. On a touchscreen :hover latches after a
  tap and the row stays lit, so every card looks selected — the fix is to give
  touch devices the pressed state below instead.
*/
@media (hover: hover) and (pointer: fine) {
  .button:hover {
    transform: translateY(-1px);
  }

  .button--primary:hover {
    background: var(--accent-hover);
  }

  .button--secondary:hover {
    background: var(--button-2-hover);
  }

  .row:hover {
    transform: translateX(2px);
  }

  .row:hover .row-tile {
    background: var(--control-hover);
    border-color: var(--hairline-strong);
    box-shadow:
      0 10px 20px -6px rgb(0 0 0 / 65%),
      inset 0 1px 0 rgb(255 255 255 / 9%);
  }

  .row:hover .row-arrow {
    color: var(--ink);
    transform: translate(2px, -2px);
  }
}

/* Touch feedback: a brief press, no state left behind. */
.button:active {
  transform: scale(0.99);
}

.row:active {
  transform: translateX(1px);
}

.button--primary:active {
  background: var(--accent-hover);
}

.button--secondary:active {
  background: var(--button-2-hover);
}

/* ------------------------------------------------------------------ toast */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  padding: 9px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgb(28 28 28 / 94%);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-toast);
  color: var(--ink);
  font-size: 13px;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition:
    opacity 0.24s var(--ease),
    transform 0.24s var(--ease);
}

.toast[data-visible="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------- entrance */

/*
  Motion animates [data-reveal] on load. The starting state is applied by
  script.js, not here, so with JavaScript off nothing is ever left invisible.
*/

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

  .button:hover,
  .row:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------- topbar */

/*
  Appears once the profile has scrolled off, carrying the two things worth
  keeping in reach: who this is, and how to book time.
*/
.topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 30;
  border-bottom: 1px solid var(--hairline);
  background: rgb(10 10 10 / 82%);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease);
}

.topbar[data-visible] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 10px 24px;
}

.topbar-avatar {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
}

.topbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topbar-fallback {
  position: absolute;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
}

.topbar-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.3px;
}

/* Narrower than the page buttons — this one sits in a 54px-tall bar. */
.topbar-cta {
  width: auto;
  min-height: 32px;
  flex: none;
  padding: 6px 16px;
  font-size: 13px;
  line-height: 18px;
}

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