/* Self-hosted fonts (SIL Open Font License), Latin subset only */
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: "STIX Two Text";
  src: url("/fonts/stix-two-text-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}

:root {
  --ink: #0b0b0c;
  --bone: #ede6da;
  --bone-dim: rgba(237, 230, 218, 0.56);
  --bone-faint: rgba(237, 230, 218, 0.12);
  --surface: rgba(237, 230, 218, 0.035);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "STIX Two Text", Georgia, "Times New Roman", serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { background: var(--ink); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Soft warm light falling from above */
.glow {
  position: fixed;
  inset: -20vh -20vw auto;
  height: 90vh;
  background: radial-gradient(50% 50% at 50% 30%, rgba(237, 230, 218, 0.11), rgba(237, 230, 218, 0) 70%);
  pointer-events: none;
  animation: breathe 9s ease-in-out infinite alternate;
}

/* Film grain over everything */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  /* Equal top/bottom room so the group sits centered; bottom leaves space for the footer */
  padding:
    max(72px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(72px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
}

.mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(36px, 6vh, 64px);
  text-align: center;
}

.wordmark {
  margin: 0;
  width: min(100%, 340px);
  color: var(--bone);
  line-height: 0;
  animation: rise 1.2s var(--ease-out) both;
}


/* Chrome rendering of the wordmark (metal.js); the SVG stays as layout and fallback */
.wordmark { position: relative; }
.wordmark.is-metal .wordmark-svg { visibility: hidden; }
.wordmark-metal {
  position: absolute;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.55));
}

.wordmark-svg {
  display: block;
  width: 100%;
  height: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Vine linework from the business card, climbing both edges.
   The tile is the vine plus its vertical mirror, repeated on y, so it never runs out.
   Scale comes from the screen's long side, which doesn't change on rotation: turning a
   phone or tablet reveals more or less of the same vines instead of resizing them. */
.vine {
  position: fixed;
  top: -50vh;    /* overscan: reaches under browser toolbars and covers mid-rotation */
  bottom: -50vh;
  --vine-h: clamp(720px, 100vmax, 960px); /* height of one unmirrored vine */
  --vine-w: calc(var(--vine-h) * 1000 / 3120);
  /* Show at least ~84px of vine on phones; on wide screens show it all, clear of the content column */
  --vine-offset: min(0px, calc(max(84px, (100vw - 440px) / 2 + 24px) - var(--vine-w)));
  width: var(--vine-w);
  /* Slight top-lit bevel on the linework (filter defined inline in index.html).
     The filter sits on this wrapper and the mask on ::before, since a filter runs before its own element's mask. */
  filter: url("#vine-bevel");
  pointer-events: none;
  animation: fade 2.4s ease 0.2s both;
  transition: left 0.7s var(--ease-out), right 0.7s var(--ease-out);
}

.vine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(237, 230, 218, 0.15);
  -webkit-mask-image: url("/assets/vine-tile.svg");
  mask-image: url("/assets/vine-tile.svg");
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  -webkit-mask-size: var(--vine-w) calc(var(--vine-h) * 2);
  mask-size: var(--vine-w) calc(var(--vine-h) * 2);
  /* Keep the unflipped vine centred on screen; mirrored copies extend above and below */
  -webkit-mask-position: 0 calc(50% + var(--vine-h) / 2);
  mask-position: 0 calc(50% + var(--vine-h) / 2);
}

.vine-left { left: var(--vine-offset); }
.vine-right { right: var(--vine-offset); transform: scaleX(-1); }

.tagline {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  padding-left: 0.44em; /* balance trailing tracking */
  color: rgba(237, 230, 218, 0.72);
  animation: rise 1.2s var(--ease-out) 0.12s both;
}

@media (min-width: 768px) {
  .wordmark { width: 420px; }
  .tagline { margin-top: 24px; font-size: 1.4rem; letter-spacing: 0.5em; padding-left: 0.5em; }
}

.links {
  width: 100%;
  display: grid;
  gap: 12px;
}

.link {
  display: grid;
  grid-template-columns: 22px 1fr auto 16px;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 0 20px;
  border-radius: 18px;
  border: 1px solid var(--bone-faint);
  background: var(--surface);
  color: var(--bone);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out),
    transform 0.35s var(--ease-out);
  animation: rise 1s var(--ease-out) both;
}

.link:nth-child(1) { animation-delay: 0.28s; }
.link:nth-child(2) { animation-delay: 0.38s; }

.icon { width: 22px; height: 22px; }

.label {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.handle {
  font-family: var(--serif);
  font-size: 0.98rem;
  letter-spacing: 0.005em;
  color: var(--bone-dim);
}

.arrow {
  width: 15px;
  height: 15px;
  color: var(--bone-dim);
  transition: transform 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

@media (hover: hover) {
  .link:hover {
    background: rgba(237, 230, 218, 0.075);
    border-color: rgba(237, 230, 218, 0.3);
  }
  .link:hover .arrow {
    color: var(--bone);
    transform: translate(2px, -2px);
  }
}

.link:active { transform: scale(0.985); }

.link:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
}

.foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(28px, env(safe-area-inset-bottom));
  text-align: center;
  font-family: var(--serif);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: rgba(237, 230, 218, 0.32);
  animation: fade 1.4s ease 0.6s both;
}

@media (max-width: 360px) {
  .handle { display: none; }
  .link { grid-template-columns: 22px 1fr 16px; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes breathe {
  from { opacity: 0.75; transform: translateY(0); }
  to { opacity: 1; transform: translateY(2vh); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}