@font-face {
  font-family: "Orbitron";
  src: url(data:font/woff2;base64,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) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  --black:  #000000;
  --panel:  #0A0B0D;
  --line:   rgba(255,255,255,.13);
  --line-2: rgba(255,255,255,.07);
  --text:   #F4F5F7;
  --muted:  #858B96;
  --accent: #6FD6FF;

  --display: "Orbitron", "Eurostile", "Segoe UI", sans-serif;
  --sans: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Courier New", monospace;

  --pad: clamp(22px, 5vw, 64px);
  --banner-h: 52px;      /* promo banner; see "promo banner" block */
  --banner-pop: #C4149B; /* his neon magenta, darkened to read on the light bar */
  color-scheme: dark;

  /* Lucas's neon palette, sampled off the Wix site and pulled way down.
     Held as raw RGB triplets so the alpha can be tuned per layer.
     Order across the section is blue → green → pink. The violet is a low-alpha
     bridge tucked between green and pink: those two are near-complementary and
     go grey where they meet, so violet carries the blend across. */
  --glow-blue:   40, 145, 250;
  --glow-green:  42, 220, 175;
  --glow-violet: 126, 92, 255;
  --glow-pink:   255, 79, 208;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

.tag {
  margin: 0;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}
.tag em { font-style: normal; color: var(--accent); }

/* ---------- promo banner ---------- */
/* The Wix version is a magenta starburst. Same information, said quietly:
   hairline rule, mono micro-type, one accent word doing the work. */
.banner {
  position: relative;
  z-index: 5;
  /* Opaque and inverted on purpose. Any dark or translucent treatment reads as
     more page rather than as a callout — the bar has to be a separate object.
     This is the primary button's treatment (light ground, dark ink) scaled to
     full width, so it stays inside the existing vocabulary instead of being a
     promo widget bolted on. The contrast against black IS the edge; it needs
     no border. */
  background: var(--text);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.banner-in {
  min-height: var(--banner-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
  padding-block: 15px;
}
.banner p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
/* Ink on a light ground. --banner-pop is his neon magenta taken down far enough
   to hold contrast on white; the cyan accent is unreadable at this size here. */
.b-tag  { color: var(--banner-pop); }
.b-main { color: #0A0B0D; font-weight: 700; }
.b-main em { font-style: normal; color: rgba(10, 11, 13, .45); }
.b-fine { color: rgba(10, 11, 13, .55); }

.b-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 11px;
  border-radius: 50%;
  background: var(--banner-pop);
  vertical-align: middle;
  position: relative;
  top: -1px;
  animation: b-pulse 2.8s ease-out infinite;
}
@keyframes b-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(196, 20, 155, .45); }
  70%  { box-shadow: 0 0 0 8px rgba(196, 20, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(196, 20, 155, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .b-dot { animation: none; }
}

.banner a {
  color: #0A0B0D;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s;
}
.banner a:hover { color: var(--banner-pop); }
.banner :focus-visible { outline-color: #0A0B0D; }

/* Desktop only: pull the banner's height back out of the hero so the hero
   still resolves to one clean screen. Below 860px the banner wraps to several
   lines and a fixed subtraction would be wrong, so the hero keeps full height. */
@media (min-width: 861px) {
  .hero { min-height: calc(100svh - var(--banner-h)); }
}
@media (max-width: 860px) {
  .banner { letter-spacing: .16em; }
  .banner-in { flex-direction: column; align-items: flex-start; gap: 9px; }
}

/* ---------- header ---------- */
.top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px var(--pad);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.top a { text-decoration: none; color: var(--text); }
.top a:hover { color: var(--accent); }
.top .mark {
  color: var(--text);
  font-family: var(--display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .16em;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
}
.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 45%;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 22%;
  filter: contrast(1.06) saturate(.9) brightness(.92);
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.94) 12%, rgba(0,0,0,.5) 34%, rgba(0,0,0,.12) 62%, rgba(0,0,0,.5) 100%),
    linear-gradient(0deg, #000 0%, rgba(0,0,0,.06) 34%, rgba(0,0,0,.4) 100%);
}

/* Aurora, top half of the bookend — mirrors .book::before at the foot of the
   page. Sits at z-index 1: over the photo and its scrim, under the type (2)
   and the nav (3). The box overhangs the hero's top and sides so the blur's
   own soft edge is clipped away by .hero's overflow rather than showing as a
   dark band across the top of the viewport. Runs weaker than the bottom pass —
   there is a photograph under this one. */
.hero::before {
  content: "";
  position: absolute;
  top: -12%;
  left: -5%;
  right: -5%;
  height: 72%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(66% 50% at 16% 14%, rgba(var(--glow-blue), .26), transparent 70%),
    radial-gradient(66% 52% at 48% 10%, rgba(var(--glow-green), .26), transparent 70%),
    radial-gradient(52% 42% at 70%  6%, rgba(var(--glow-violet), .14), transparent 68%),
    radial-gradient(66% 50% at 88% 14%, rgba(var(--glow-pink), .22), transparent 70%);
  filter: blur(38px);
  will-change: transform;
  /* different period from the bottom pass so the two ends never pulse in sync */
  animation: aurora 34s ease-in-out -12s infinite;
}
/* barely-there drift — should read as the light breathing, never as movement */
@keyframes aurora {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(-2.5%, -1.5%, 0) scale(1.06); }
  66%      { transform: translate3d(2%, -1%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}

.hero-in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding: 130px var(--pad) 90px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.sub {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--muted);
}
.sub b { color: var(--text); font-weight: 500; }
.sub .cite {
  display: block;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--text);
  background: var(--text);
  color: #000;
  transition: background .18s, color .18s, border-color .18s;
}
.btn:hover { background: transparent; color: var(--text); }
.btn-line {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn-line:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

@media (max-width: 860px) {
  .hero-media { left: 0; }
  .hero-media img { object-position: 50% 18%; }
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 26%, rgba(0,0,0,.86) 62%, #000 92%);
  }
  .hero { align-items: flex-end; }
  .hero-in { padding-top: 46svh; }
}

/* ---------- sections ---------- */
section { padding-block: clamp(72px, 11vw, 150px); }

.head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(40px, 6vw, 72px); }
.head h1,
.head h2 {
  margin: 0;
  max-width: 20ch;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: .012em;
  text-transform: uppercase;
  line-height: 1.16;
  text-wrap: balance;
}

/* ---------- quote carousel ---------- */
.quote {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
/* shifted right so the silhouette clears the quote instead of sitting under it */
.quote-media { position: absolute; inset: 0 -16% 0 16%; z-index: 0; }
.quote-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
  filter: contrast(1.08) saturate(1.05) brightness(1.04);
}
/* scrim rides the section, not the shifted photo box, so the left stays true black */
.quote::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.94) 20%, rgba(0,0,0,.72) 40%, rgba(0,0,0,.24) 64%, rgba(0,0,0,.42) 100%),
    linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.14) 45%, rgba(0,0,0,.72) 100%);
}
.quote .wrap { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .quote-media { inset: 0; }
  .quote::after {
    background: linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.7) 45%, rgba(0,0,0,.88) 100%);
  }
}
.quote blockquote {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(1.6rem, 4.2vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
  text-wrap: balance;
}
.quote figcaption {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.quote figure { margin: 0; }

.quote-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(34px, 5vw, 60px);
}
.q-nav { display: flex; align-items: center; gap: 16px; }
.q-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.q-btn:hover { border-color: var(--accent); color: var(--accent); }
.q-count {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .24em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* slides share one grid cell: the tallest sets the height, so nothing jumps on advance */
.q-track { display: grid; }
.q-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease;
}
.q-slide.is-on { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .q-slide { transition: none; }
}

/* ---------- setup gallery ---------- */
.setup { border-top: 1px solid var(--line); }
.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.shot { margin: 0; }
.shot.wide { grid-column: 1 / -1; }
.shot .frame {
  width: 100%;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line-2);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot figcaption {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

.r-16x9 { aspect-ratio: 16 / 9; }
.r-4x5  { aspect-ratio: 4 / 5; }
.r-21x9 { aspect-ratio: 21 / 9; }

/* placeholder state — remove once real photos are in */
.frame.ph { display: grid; place-items: center; }
.frame.ph::after {
  content: attr(data-label);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 16px;
  text-align: center;
}

@media (max-width: 720px) {
  .shots { grid-template-columns: 1fr; }
  .r-21x9 { aspect-ratio: 16 / 9; }
  .quote-head { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ---------- book ---------- */
.book {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--line);
}
/* Aurora, bottom half of the bookend — blooms low in the section, reading
   blue → green → pink, light rising off the bottom edge. Deliberately NOT
   clipped: the gradients are already transparent at their own edges, so the
   blur bleeds a few px into the footer as a soft falloff rather than
   terminating on a hard horizontal cut. Pairs with .hero::before at the top
   of the page. Shared @keyframes aurora lives in the header block. */
.book::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(66% 50% at 16% 90%, rgba(var(--glow-blue), .30), transparent 70%),
    radial-gradient(66% 52% at 48% 94%, rgba(var(--glow-green), .30), transparent 70%),
    radial-gradient(52% 42% at 70% 97%, rgba(var(--glow-violet), .16), transparent 68%),
    radial-gradient(66% 50% at 88% 90%, rgba(var(--glow-pink), .26), transparent 70%);
  filter: blur(34px);
  will-change: transform;
  animation: aurora 28s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .book::before { animation: none; }
}
.book h1,
.book h2 {
  margin: 0 0 20px;
  max-width: 17ch;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vw, 2.7rem);
  font-weight: 700;
  letter-spacing: .012em;
  text-transform: uppercase;
  line-height: 1.16;
  text-wrap: balance;
}
.book p { margin: 0 0 34px; max-width: 44ch; color: var(--muted); }
/* flex, not grid: the photo hugs the copy column instead of being pushed to the
   far edge, and wraps on its own if the two can't sit side by side */
.book-in {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "heading photo"
    "copy    photo";
  align-items: center;
  gap: clamp(26px, 3.5vw, 54px);
}
.book-heading { grid-area: heading; }
.book-heading h2 { margin: 0; }
.book-copy { grid-area: copy; max-width: 470px; min-width: 0; }
.book-photo { grid-area: photo; display: flex; align-items: center; }

/* polaroid — the one warm object on the page, deliberately off-grid */
.polaroid {
  margin: 0;
  width: clamp(280px, 34vw, 430px);
  padding: 15px 15px 62px;
  background: #F2F0EA;
  box-shadow: 0 34px 70px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
  transform: rotate(3deg);
  transition: transform .45s cubic-bezier(.2,.7,.25,1);
}
.polaroid:hover { transform: rotate(0deg) scale(1.02); }
.pol-img { aspect-ratio: 1 / 1; overflow: hidden; background: #14161A; }
.pol-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
@media (prefers-reduced-motion: reduce) {
  .polaroid, .polaroid:hover { transition: none; transform: rotate(3deg); }
}

@media (max-width: 860px) {
  .book-in {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "heading" "photo";
    gap: 52px;
  }
  .book-copy { max-width: none; }
  .polaroid { width: min(360px, 100%); transform: rotate(2deg); }
}

/* ---------- hand-drawn nudge arrow ---------- */
.us { position: relative; }
.nudge {
  position: absolute;
  left: calc(100% + 14px);
  top: 62%;
  width: clamp(175px, 21vw, 295px);
  height: auto;
  overflow: visible;
  pointer-events: none;
  color: var(--accent-2, #FF35C7);
}
.nudge path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
/* second pass, thinner and faint — reads as pen wobble rather than a UI stroke */
.nudge .n-2 { stroke-width: 1.4; opacity: .42; }

.book h1.in .nudge .n-1,
.book h2.in .nudge .n-1 { animation: nudge-draw .85s ease forwards .35s; }
.book h1.in .nudge .n-2,
.book h2.in .nudge .n-2 { animation: nudge-draw .85s ease forwards .46s; }
.book h1.in .nudge .n-3,
.book h1.in .nudge .n-4,
.book h2.in .nudge .n-3,
.book h2.in .nudge .n-4 { animation: nudge-draw .22s ease forwards 1.16s; }
@keyframes nudge-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .nudge path { stroke-dashoffset: 0; }
  .book h2.in .nudge path { animation: none; }
}
/* photo stacks below the copy here, so a rightward arrow has nothing to point at */
@media (max-width: 860px) {
  .nudge { display: none; }
}

/* Netlify Forms spam honeypot — visually hidden, not display:none (some bots
   skip display:none fields, defeating the point). */
.hp { position: absolute; left: -9999px; top: -9999px; }

/* ---------- lead form ---------- */
.lead {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}
.field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.lead label {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.lead input {
  width: 100%;
  padding: 13px 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: .95rem;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .18s;
}
.lead input:hover { border-color: rgba(255,255,255,.24); }
.lead input:focus { outline: none; border-color: var(--accent); }
.lead button {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 6px;
  cursor: pointer;
}
@media (max-width: 460px) {
  .lead { grid-template-columns: 1fr; }
}
.contact {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--line);
}
.contact div {
  padding: 26px 24px 26px 0;
  border-right: 1px solid var(--line-2);
}
.contact div:last-child { border-right: 0; }
.contact dt {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.contact dd { margin: 0; font-size: 1.05rem; }
.contact a { text-decoration: none; }
.contact a:hover { color: var(--accent); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); }
.foot-in {
  padding-block: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 30px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--accent); }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(10px); }
.rv.in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.25,1); }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.in { opacity: 1; transform: none; transition: none; }
}