/* ============================================================
   Lok Wa — Party Photography
   Architecture mirrors instruments.supply:
     - --base-space spacing scale (sm/md/lg/xl/xxl)
     - --fs-main / --fs-big responsive type scale
     - fixed .header, flex-column .main, grid .text / .images
   ============================================================ */

@font-face {
  font-family: "Amsterdamer Garamont";
  src: url("fonts/Amsterdamer-Garamont-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Pokemon Pixel Font";
  src: url("fonts/pokemon_pixel_font.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

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

:root {
  /* ---- Spacing scale (multiples of base) ---- */
  --base-space: 16px;                              /* 16px page gutter / unit */
  --margin-sm: calc(var(--base-space) * 1);        /* 16  — gallery gutter */
  --margin-md: calc(var(--base-space) * 2);        /* 32 */
  --margin-lg: calc(var(--base-space) * 3);        /* 48  — paragraph rhythm */
  --margin-xl: calc(var(--base-space) * 5);        /* 80 */
  --margin-xxl: calc(var(--base-space) * 7);       /* 112 — section gaps */

  /* ---- Colour ---- */
  --color-text: #111111;
  --color-bg: #ffffff;

  /* ---- Type scale (responsive, overridden below) ---- */
  /* line-heights are ~8% taller than the type size; tracking is 1.5%. */
  --fs-main: 20px;  --lh-main: 22px;               /* body / small copy */
  --fs-big: 24px;   --lh-big: 22px;                /* lede + headings */
  --tracking: 0.015em;                             /* 1.5% letter-spacing */

  /* ---- Fonts ---- */
  --font-sans: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Amsterdamer Garamont", Georgia, "Times New Roman", serif;
}

@media screen and (min-width: 576px) {
  :root { --fs-big: 32px; --lh-big: 36px; }
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-weight: 500;                /* all body copy in Medium */
  font-size: var(--fs-main);
  line-height: var(--lh-main);
  letter-spacing: var(--tracking);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

/* ============================================================
   Header — three fixed nav pills across the top row, always visible
   ============================================================ */
.header__nav {
  position: fixed;
  top: var(--base-space);
  left: var(--base-space);
  right: var(--base-space);
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--margin-sm);
  pointer-events: none;            /* let clicks fall through the gaps */
}
.header__nav-right {
  display: flex;
  gap: var(--margin-sm);
}

.header__title {
  margin: 0;
  font-size: var(--fs-big);
  font-weight: 500;
  line-height: var(--lh-big);
  letter-spacing: var(--tracking);
  text-wrap: pretty;
}

/* ---- Pixel-font nav pills (outline only, per mockup) ---- */
.pill {
  all: unset;
  box-sizing: border-box;
  pointer-events: auto;            /* re-enable on the pills themselves */
  display: inline-block;
  cursor: pointer;
  font-family: "Pokemon Pixel Font", var(--font-sans);
  font-size: calc(1.11 * var(--fs-big));
  line-height: 1;
  letter-spacing: 0.02em;
  color: #000;
  padding: 5px 13px 3px 16px;
  border: 1.5px solid #000;
  border-radius: 999px;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.pill:hover { background: #ffe600; }
.pill.is-active {
  background: #ffe600;             /* selected -> yellow */
}
.pill.is-active:hover { background: #ffe600; }

/* ============================================================
   Main — flex column, large rhythmic gaps
   ============================================================ */
.main {
  display: flex;
  flex-direction: column;
  gap: var(--margin-xxl);
  padding: var(--base-space);
  /* Clear the fixed nav pill row. Pill height tracks its font-size
     (1.11 * --fs-big) plus ~17px of padding + border, so derive the
     gutter from the same variable instead of a fixed 32px. */
  padding-top: calc(var(--base-space) + (1.11 * var(--fs-big)) + 17px + var(--margin-md));
}

/* Title sits just above the intro, not a full section gap away. */
.text--title { margin-bottom: calc(var(--margin-xxl) * -1 + var(--margin-lg)); }

/* ============================================================
   Text blocks — two-column grid, content in column 1
   ============================================================ */
/* Two equal columns; content lives in column 1 => ~half screen width,
   exactly how instruments.supply sizes its copy. */
.text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.text__inner {
  grid-column: 1 / 2;
  margin: 0;
}

.text p,
.text h2 {
  margin: 0;
  font-size: var(--fs-big);
  font-weight: 500;
  line-height: var(--lh-big);
  letter-spacing: var(--tracking);
}
.text strong { font-weight: 700; }

/* Intro lede sits big; width comes from the half-screen grid column. */

/* About block: smaller body copy, titles stay big, rhythmic spacing */
.text--small p,
.text--small h2 { font-size: var(--fs-main); line-height: var(--lh-main); }
.text--small h2 { font-size: var(--fs-big); line-height: var(--lh-big); margin-top: var(--margin-lg); }
.text--small p:not(:last-child) { margin-bottom: var(--margin-sm); }
.text--small .text__lede {
  font-size: var(--fs-big);
  line-height: var(--lh-big);
  margin-bottom: var(--margin-lg);
}

/* ============================================================
   Images — responsive grid, gutter = --margin-sm
   ============================================================ */
.images {
  display: grid;
  grid-gap: var(--margin-sm);
}
.images--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.images--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Two image blocks read as one gallery: tight gutter, not a section gap. */
.images + .images { margin-top: calc(var(--margin-xxl) * -1 + var(--margin-sm)); }

.images__item {
  width: 100%;
  height: auto;
  background: #ececec;
  object-fit: cover;
}
.images--two .images__item { aspect-ratio: 3 / 2; }
.images--three .images__item { aspect-ratio: 0.74; }

/* ============================================================
   Splatter overlay
   ============================================================ */
.splatter {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 10, 12, 0);
  pointer-events: none;
  opacity: 0;
  transition: background 0.55s ease, opacity 0.55s ease;
  overflow: hidden;
}
.splatter.is-active {
  pointer-events: auto;
  opacity: 1;
  background: rgba(10, 10, 12, 0.92);
  touch-action: none;   /* keep touch-drags as pointermove, not page pan */
  /* Dragging across the pile should never select the testimonial images. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.splatter.is-closing { pointer-events: none; }

.splatter__card {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 6px;
  background: #fff;
  padding: 14px 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
.splatter__card img {
  pointer-events: none;
  border-radius: 2px;
  max-width: 360px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.splatter__hint {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
/* Gently pulse the prompt until the user first interacts. */
.splatter.is-active .splatter__hint {
  opacity: 1;
  animation: splatter-hint-pulse 1.8s ease-in-out infinite;
}
/* Once the pile has been touched, retire the prompt. */
.splatter.has-interacted .splatter__hint {
  opacity: 0;
  animation: none;
}
@keyframes splatter-hint-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* ============================================================
   Contact / Footer — full-bleed, borderless
   ============================================================ */
.contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 640px;
  padding: var(--margin-lg) var(--base-space) calc(var(--margin-xl));
}

.contact__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.contact__bg canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.liquid-glass-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.contact__inner {
  max-width: 31rem;
}

.contact__prompt {
  margin: 0 0 var(--margin-md);
  font-size: var(--fs-big);
  font-weight: 500;                /* matches the header/body paragraphs */
  line-height: var(--lh-big);
  letter-spacing: var(--tracking);
  color: #1a1205;
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- Liquid glass field ---- */
.glass {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 6px 16px rgba(80, 40, 0, 0.10),
    0 1px 2px rgba(80, 40, 0, 0.08);
  cursor: text;
  isolation: isolate;
}
.glass__effect {
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  filter: url(#glass-distortion);
  overflow: hidden;
}
.glass__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.18);
}
.glass__shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, 0.55),
    inset -1px -1px 1px rgba(255, 255, 255, 0.25),
    inset 0 0 8px rgba(255, 255, 255, 0.10);
  pointer-events: none;
}
.glass__content {
  position: relative;
  z-index: 3;
  display: block;
  padding: 2px;
}

.glass input,
.glass textarea {
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-sans);
  font-weight: 500;
  color: #2a1d08;
  resize: none;
}
.glass input {
  height: 40px;
  padding: 0 18px;
  font-size: 0.95rem;
}
.glass textarea {
  display: block;
  padding: 16px 18px;
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.4;
}
.glass ::placeholder {
  color: rgba(70, 48, 12, 0.5);
  font-style: italic;
  opacity: 1;
}
.field--input { max-width: 22.5rem; }
.field--input ::placeholder { font-style: normal; }
.field--area { margin-top: 4px; }

/* Submit reuses the .pill look (pixel font, outline, yellow hover). It swaps
   its "Submit" label for the letsparty.svg wordmark on hover/focus. */
.contact__submit {
  margin-top: var(--margin-md);
  /* Center label and wordmark on one line so the swap doesn't jump. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Fixed box so the short 0.65em wordmark doesn't shrink the pill on hover.
     Height reserves the "Submit" line-box (1em) + the pill's 8px vertical pad. */
  width: 11rem;
  height: calc(1.11 * var(--fs-big) + 8px);
}

/* Blue hover for the submit button specifically (overrides the pill's yellow). */
.contact__submit:hover,
.contact__submit:focus-visible { background: #2f6df0; }

/* "Submit" — inherits the pill's Pokemon Pixel font/size. */
.contact__submit-label { display: inline-block; }

/* "LET'S PARTY!" wordmark (letsparty.svg, Lilian italics). Height is 1em so it
   renders at exactly the pill font's size — same visual height as "Submit". */
.contact__submit-hover {
  display: none;
  height: 0.65em;
  width: auto;
  /* Wordmark ships black; invert to white so it pops on the blue hover fill. */
  filter: invert(1);
}

.contact__submit:hover .contact__submit-label,
.contact__submit:focus-visible .contact__submit-label { display: none; }

.contact__submit:hover .contact__submit-hover,
.contact__submit:focus-visible .contact__submit-hover { display: inline-block; }

/* ============================================================
   Responsive — single column below 640px (their 575px beat)
   ============================================================ */
@media screen and (max-width: 639px) {
  /* Half the all-round margins: 16px unit -> 8px. This cascades to the
     page gutter, gallery gutters, and every --margin-* multiple. */
  :root { --base-space: 8px; }

  /* Body text spans the full width on mobile (not the half-screen column). */
  .text { grid-template-columns: 1fr; }
  .text__inner { grid-column: 1 / -1; }

  .header__title { max-width: 100%; }
  .contact__inner { max-width: 100%; }
  .contact__prompt { max-width: 100%; }

  .images--two { grid-template-columns: 1fr; }
  .images--three { grid-template-columns: 1fr 1fr; }
  .images--three .images__item:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .splatter__card { padding: 6px 7px; border-radius: 4px; }
  .splatter__card img { max-width: 70vw; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}