@font-face {
  font-family: 'Reenie Beanie';
  src: url('./assets/fonts/ReenieBeanie.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: 'Oooh Baby';
  src: url('./assets/fonts/OoohBaby-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

/* Keep the handwritten name aligned with the portrait. */
[data-site-content="site.name"] {
  display: flex;
  align-items: center;
  width: 345px;
  height: 84px;
  padding: 0;
  overflow: visible;
  font: 400 72px/1 'Reenie Beanie', 'Segoe Print', cursive !important;
  white-space: nowrap;
}

[data-site-content="site.name"] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Optical alignment of the lettering beside the portrait. */
  transform: translateY(6px);
}

.home-identity {
  position: relative;
  min-height: 80px;
  gap: 20px !important;
  margin-bottom: 48px !important;
  overflow: visible;
}

.home-identity-portrait,
.home-identity-portrait img {
  width: 80px !important;
  height: 80px !important;
}

.home-identity-portrait {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.home-identity-portrait img {
  display: block;
  border-radius: 0 !important;
  -webkit-mask: url('./assets/portrait-paper-mask.svg') center / 100% 100% no-repeat;
  mask: url('./assets/portrait-paper-mask.svg') center / 100% 100% no-repeat;
}

/* Extra room lets the static paper folds lift outward without moving the photo. */
.home-identity-portrait::after {
  content: '';
  position: absolute;
  inset: -10px;
  z-index: 1;
  background: url('./assets/portrait-paper-rim.svg?v=folds-2') center / 100% 100% no-repeat;
  pointer-events: none;
}

.home-identity-name { overflow: visible; }

/* Temporarily hide these decorations; remove this rule to restore them. */
.bloch-sphere-hero,
.magnifier-layer {
  display: none !important;
}

.home-contact {
  flex-shrink: 0;
  margin: -20px 8% 0 auto;
  color: #49453f;
  font: 400 28px/1.2 'Reenie Beanie', 'Segoe Print', cursive;
  white-space: nowrap;
  transform: translateY(16px) rotate(5deg);
  transform-origin: center;
}

.home-contact span {
  display: inline-block;
  filter: url('./assets/signature-pencil-edge.svg#pencil-edge');
  -webkit-mask-image: url('./assets/signature-ink-grain.svg?v=pencil-tooth-1');
  mask-image: url('./assets/signature-ink-grain.svg?v=pencil-tooth-1');
}

.home-contact:hover { color: var(--d2); }
.home-contact:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

[data-link-accent] {
  --link-accent: var(--a1);
  background-image: linear-gradient(transparent 58%, var(--link-accent) 58%);
  color: var(--ink);
}

[data-link-accent="coral"] { --link-accent: var(--a1); }
[data-link-accent="blue"] { --link-accent: var(--a2); }
[data-link-accent="green"] { --link-accent: var(--a3); }
[data-link-accent="gold"] { --link-accent: var(--a4); }

[data-screen-label="Home"] div:has(> [data-site-content="site.name"]) {
  display: flex;
  align-items: center;
  gap: 14px;
}

.home-social-links {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 7px;
  margin: 0;
}

.home-social-links a {
  display: block;
  width: 20px;
  height: 20px;
  color: #000;
  line-height: 0;
  transition: color 140ms ease, opacity 140ms ease;
}

.home-social-links svg {
  display: block;
  width: 100%;
  height: 100%;
}

#dc-root .home-social-links a:hover {
  color: var(--d2);
  opacity: .65;
}

.home-social-links a:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* Every foreground element shares this fixed coordinate system. */
.site-stage {
  position: relative;
  min-height: 0;
  height: calc(var(--site-canvas-height, 665px) * var(--site-scale, 1));
  overflow: hidden;
}

.site-canvas {
  --page-gutter: max(20px, 7.125vw);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 1875px;
  margin: 0;
  /* Keep the page gutter at its screen size despite the content transform. */
  padding: 0 calc(var(--page-gutter) / var(--site-scale, 1));
  box-sizing: border-box;
  transform: scale(var(--site-scale, 1));
  transform-origin: top left;
}


/* Published homepage composition. */
.home-intro {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  font-family: var(--head);
  font-weight: 400;
  font-size: 30.5px;
  line-height: 1.4;
  text-wrap: wrap;
}

.home-intro-copy,
.home-interests {
  font-size: inherit;
}

.home-interests {
  display: block;
  margin-top: 24px;
  line-height: inherit;
  text-wrap: pretty;
}

.home-interest-aside {
  font-size: .7em;
}

.home-history {
  max-width: 1380px;
  margin-top: 44px;
  color: #49453f;
  font-family: 'Reenie Beanie', 'Segoe Print', cursive;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.45;
}

.home-history-group + .home-history-group { margin-top: 30px; }
.home-history h2 { margin: 0 0 10px; font: inherit; }
.home-history ul { margin: 0; padding-left: 1.1em; }
.home-history li { padding-left: .15em; }
.home-history li + li { margin-top: 10px; }
.home-history a { text-decoration: underline; text-underline-offset: .14em; }
.home-history a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.home-explore {
  display: flex;
  align-items: baseline;
  gap: .55em;
  width: fit-content;
  margin: calc(clamp(64px, 8svh, 112px) / var(--site-scale, 1)) 0 0;
  font-family: var(--head);
  font-size: 30.5px;
  font-weight: 400;
  line-height: 1.4;
}

.home-explore-dot { opacity: .6; }

.home-explore a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.home-explore a:hover { color: var(--d2); }
.home-explore a:focus-visible { outline: 2px solid var(--d2); outline-offset: 5px; }

.home-atom-doodle {
  display: inline-block;
  width: 1.45em;
  height: auto;
  margin-left: .25em;
  vertical-align: -.35em;
  transform-origin: 50% 60%;
  transition: filter 180ms ease;
}

.home-history a:is(:hover, :focus-visible) > .home-atom-doodle {
  /* Recolor the ink to the link-hover purple (#7c5b8d), preserving transparency. */
  filter: brightness(0) invert(32.788%) sepia(100%) saturate(174.970%) hue-rotate(235.588deg);
}

@keyframes atom-doodle-wiggle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-.5px) rotate(-3deg); }
  40% { transform: translateX(.5px) rotate(2.5deg); }
  60% { transform: translateX(-.35px) rotate(-2deg); }
  80% { transform: translateX(.25px) rotate(1deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .home-history a:is(:hover, :focus-visible) > .home-atom-doodle {
    animation: atom-doodle-wiggle 440ms ease-in-out;
  }
}

.astro-link {
  color: inherit;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}

.astro-link-paw {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .22em;
  vertical-align: -.15em;
  object-fit: contain;
}

.astro-link:hover { color: var(--d2); }

.astro-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.site-canvas > main:has(> [data-screen-label="Home"]) {
  padding-top: 76px !important;
  padding-bottom: calc(clamp(64px, 6svh, 96px) / var(--site-scale, 1)) !important;
}

[data-screen-label="Home"] {
  display: flex;
  flex-direction: column;
  /* Let the paper end shortly after the copy, including on tall screens. */
  min-height: 0;
}

[data-screen-label="Home"] > .bloch-sphere-hero {
  position: relative;
  top: auto;
  right: auto;
  flex-shrink: 0;
  box-sizing: content-box;
  width: 232px;
  height: auto;
  padding-top: 64px;
  margin: auto 0 0 auto;
}

/* Phone copy flows at its reading size instead of shrinking the desktop canvas. */
@media (max-width: 900px) {
  .site-stage { height: auto; }

  .site-canvas {
    --site-scale: 1;
    position: relative;
    width: 100%;
    padding-inline: max(24px, 6vw);
    transform: none;
  }

  .site-canvas > main:has(> [data-screen-label="Home"]) {
    padding-top: 32px !important;
    padding-bottom: 56px !important;
  }

  .home-identity {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px !important;
    margin-bottom: 32px !important;
  }

  .home-identity-portrait,
  .home-identity-portrait img {
    width: 56px !important;
    height: 56px !important;
  }

  .home-identity-name { flex-wrap: wrap; min-width: 0; }

  [data-site-content="site.name"] {
    width: auto;
    height: auto;
    font-size: clamp(42px, 8vw, 54px) !important;
  }

  .home-social-links a { width: 26px; height: 26px; }

  .home-contact {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    font-size: 26px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    transform: none;
  }

  .home-intro { font-size: 22px; line-height: 1.5; }
  .home-interest-aside { font-size: 18px; }
  .home-history { margin-top: 36px; font-size: 28px; line-height: 1.3; }
  .home-history li + li { margin-top: 16px; }

  .home-explore {
    flex-wrap: wrap;
    margin-top: 48px;
    font-size: 22px;
  }

  .home-explore a { padding-block: 8px; }
}