@font-face {
  font-family: "BudMax";
  src: url('/assets/budmax.woff2?v=0.5.2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #111111;
  --paper: #f3f1eb;
  --white: #f8f7f2;
  --edge: clamp(28px, 4.6vw, 82px);
  --safe-top: max(20px, env(safe-area-inset-top));
  --safe-bottom: max(22px, env(safe-area-inset-bottom));
  --step-size: 100svh;
  --stage-height: 100svh;
  --scrollport-height: 100dvh;
}

* { box-sizing: border-box; }
html {
  background: var(--paper);
  color: var(--ink);
  overscroll-behavior-y: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(17,17,17,.26) transparent;
}
html::-webkit-scrollbar { width: 6px; background: transparent; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  min-height: 34px;
  border-radius: 999px;
  background: rgba(17,17,17,.26);
}
html::-webkit-scrollbar-thumb:hover { background: rgba(17,17,17,.42); }
html[data-motion-ready="false"] .stage { visibility: hidden; }
html[data-motion-ready="true"] .stage { visibility: visible; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "BudMax", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-synthesis: none;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
button, input, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }

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

.app-root { min-height: 100%; }
.experience { position: relative; min-height: 100svh; touch-action: pan-y pinch-zoom; }
.stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.stage * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.scroll-track { position: relative; z-index: -1; }
.snap-anchor {
  height: var(--step-size);
}
/* The final anchor equals the live scrollport, so scrollHeight - innerHeight is
   always exactly four rail steps even when mobile browser chrome changes. */
.snap-anchor:last-child {
  height: var(--scrollport-height);
}

.paper-plane {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--paper);
}
.image-plane {
  position: absolute;
  inset: -5%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: calc(50% + var(--image-shift, 0px)) 50%;
  filter: blur(14px) grayscale(1) contrast(1.10) brightness(.61);
  transform: scale(1.085);
  will-change: opacity, background-position;
}
.image-front {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.30), rgba(0,0,0,.04) 46%, rgba(0,0,0,.35)),
    url('/assets/macro-front.jpg');
}
.image-top {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.46), rgba(0,0,0,.08) 48%, rgba(0,0,0,.42)),
    url('/assets/macro-top.jpg');
  filter: blur(12px) grayscale(1) contrast(1.12) brightness(.56);
}
.grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .13;
  mix-blend-mode: soft-light;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.motion-object {
  position: absolute;
  z-index: 10;
  margin: 0;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
}
.motion-object[aria-hidden="true"] { pointer-events: none; }
.budmax-text {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: inherit;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.budmax-text use { fill: currentColor; }
.stage img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Opening field: two independent objects using the full desktop width. */
.opening-logo {
  left: 4.8vw;
  top: 4.2svh;
  width: min(49vw, 900px);
  color: var(--ink);
}
.hero-logo { display: block; width: 100%; height: auto; }
.ready-object {
  right: 5.2vw;
  bottom: 7.4svh;
  width: min(39vw, 700px);
  color: var(--ink);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: max(17px, calc(var(--safe-bottom) + 1px));
  z-index: 30;
  width: 30px;
  height: 24px;
  margin-left: -15px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity 80ms linear;
}
.scroll-cue:disabled { pointer-events: none; }
.scroll-cue-chevron {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 9px;
  height: 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
  animation: cue-pulse 3.1s ease-in-out infinite;
}
@keyframes cue-pulse {
  0%, 100% { opacity: .18; }
  50% { opacity: .58; }
}

.not-object {
  right: var(--edge);
  bottom: 8.4svh;
  width: min(57vw, 930px);
  color: var(--white);
}
.milk-object {
  left: var(--edge);
  top: 18svh;
  width: min(55vw, 920px);
  color: var(--ink);
}

/* Thesis plate: statement and interpretation both retain authority. */
.thesis-head {
  left: var(--edge);
  top: 7.2svh;
  width: min(58vw, 960px);
  color: var(--white);
}
.thesis-copy {
  left: 20vw;
  bottom: 7.2svh;
  width: min(74vw, 1200px);
  color: var(--white);
}

.final-head {
  left: var(--edge);
  top: 16svh;
  width: min(79vw, 1260px);
  color: var(--ink);
  opacity: .54;
}
.get-milk {
  right: var(--edge);
  bottom: 13svh;
  width: clamp(280px, 31vw, 500px);
  border: 0;
  padding: 0 50px 16px 0;
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.get-milk-copy { width: 77%; }
.cta-rule {
  position: absolute;
  left: 0;
  right: auto;
  width: calc(77% - 20px);
  bottom: 0;
  height: 1px;
  background: currentColor;
}
.cta-arrow {
  position: absolute;
  right: auto;
  left: calc(77% - 13px);
  bottom: 7px;
  width: 12px;
  height: 12px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transition: transform 150ms linear;
}
.get-milk:hover .cta-arrow,
.get-milk:focus-visible .cta-arrow { transform: translate(3px, -3px); }

.site-legal {
  left: var(--edge);
  right: var(--edge);
  bottom: max(14px, var(--safe-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: rgba(17,17,17,.68);
  font-size: clamp(10px, .68vw, 12px);
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: lowercase;
  white-space: nowrap;
}
.legal-links { display: flex; gap: 18px; }
.legal-links a { text-decoration: none; border-bottom: 1px solid transparent; }
.legal-links a:hover,
.legal-links a:focus-visible { border-bottom-color: currentColor; }

.trusted-row {
  left: var(--edge);
  right: var(--edge);
  bottom: 23svh;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 36px;
  color: rgba(17,17,17,.46);
}
.trusted-label { font-size: 11px; letter-spacing: 0; }
.trusted-marks { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.trusted-marks img { max-width: 120px; max-height: 34px; filter: grayscale(1); opacity: .62; }

@media (max-width: 700px) {
  :root { --edge: 24px; }
  .opening-logo {
    left: 3vw;
    top: 5.5svh;
    width: 94vw;
  }
  .ready-object {
    left: var(--edge);
    right: auto;
    bottom: 8.8svh;
    width: 84vw;
  }
  .not-object {
    left: 5vw;
    right: auto;
    bottom: 17svh;
    width: 90vw;
  }
  .milk-object {
    left: 3vw;
    top: 42svh;
    width: 94vw;
  }
  .image-plane {
    inset: -13%;
    background-size: auto 102%;
    background-position: calc(50% + var(--image-shift, 0px)) 50%;
    filter: blur(10px) grayscale(1) contrast(1.09) brightness(.59);
    transform: scale(1.20);
  }
  .image-top { filter: blur(9px) grayscale(1) contrast(1.11) brightness(.56); }
  .thesis-head {
    left: var(--edge);
    top: 7.3svh;
    width: calc(100vw - 48px);
  }
  .thesis-copy {
    left: var(--edge);
    bottom: 18svh;
    width: calc(100vw - 48px);
  }
  .final-head {
    left: var(--edge);
    top: 16svh;
    width: calc(100vw - 48px);
    opacity: .54;
  }
  .get-milk {
    left: var(--edge);
    right: auto;
    bottom: 12svh;
    width: min(77vw, 350px);
  }
  .site-legal {
    left: var(--edge);
    right: var(--edge);
    bottom: max(10px, var(--safe-bottom));
    display: grid;
    justify-content: stretch;
    gap: 6px;
    font-size: 10px;
    white-space: normal;
  }
  .legal-links { gap: 15px; }
  .scroll-cue { bottom: max(13px, var(--safe-bottom)); }

}

/* Tall tablets need their own field. The desktop proportions are correct in
   landscape, but under-fill the longer portrait canvas. */
@media (min-width: 701px) and (max-width: 1024px) and (orientation: portrait) {
  :root { --edge: 4vw; }
  .opening-logo {
    left: 4vw;
    top: 4.5svh;
    width: 70vw;
  }
  .ready-object {
    right: 5vw;
    bottom: 8.5svh;
    width: 58vw;
  }
  .not-object {
    right: 4vw;
    bottom: 14svh;
    width: 82vw;
  }
  .milk-object {
    left: 4vw;
    top: 34svh;
    width: 88vw;
  }
  .thesis-head {
    left: 4vw;
    top: 6.8svh;
    width: 78vw;
  }
  .thesis-copy {
    left: 10vw;
    bottom: 13svh;
    width: 86vw;
  }
  .final-head {
    left: 4vw;
    top: 13svh;
    width: 88vw;
  }
  .get-milk {
    right: 4vw;
    bottom: 13svh;
    width: 48vw;
  }
  .site-legal {
    left: 4vw;
    right: 4vw;
    font-size: 11px;
  }
}

@media (max-height: 700px) and (min-width: 701px) {
  .opening-logo { top: 2.5svh; width: min(44vw, 760px); }
  .ready-object, .not-object { bottom: 5.8svh; }
  .thesis-head { top: 4.8svh; width: min(53vw, 880px); }
  .thesis-copy { bottom: 4.8svh; width: min(69vw, 1100px); }
  .final-head { top: 12svh; }
  .get-milk { bottom: 11svh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue-chevron,
  .get-milk { animation: none; }
}