/* Avi Gallery
   Desktop: each section is a 1440×768 "slide" (the Canva page size), scaled to the window width.
   Elements carry their slide coordinates as --x/--y/--w/--h, in slide pixels.
   Phones: the same elements stack in reading order. */

:root {
  --bg: #0e0a0a;
  --ink: #eeeee6;
  --muted: #aba9a8;
  --display: "Italiana", "Didot", "Bodoni 72", serif;
  --sans: "Outfit", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
main { container-type: inline-size; overflow-x: clip; }
h1, h2, h3, h4, p, ul, dl, dd, blockquote, figure { margin: 0; padding: 0; }
a { color: inherit; }

/* ---------- slide layout ---------- */
.slide {
  --u: calc(100cqw / 1440);
  position: relative;
  height: calc(768 * var(--u));
  overflow: hidden;
}
.el {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}
.frame, .box-outline, .pill { height: calc(var(--h) * var(--u)); }

/* ---------- images ---------- */
.frame { overflow: hidden; }
.frame img {
  position: absolute;
  left: calc(var(--l) * 1%);
  top: calc(var(--t) * 1%);
  width: calc(var(--iw) * 1%);
  height: calc(var(--ih) * 1%);
  max-width: none;
  object-fit: cover;
  display: block;
}
.arch { border-radius: 50% 50% 0 0 / var(--arch) var(--arch) 0 0; }
.outline, .box-outline { outline: calc(2.5 * var(--u)) solid var(--ink); outline-offset: calc(-2.5 * var(--u)); }
.outline img { z-index: -1; }
.outline { isolation: isolate; }
.box-outline { background: transparent; }

/* ---------- type ---------- */
.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
}
.xl { font-size: calc(114.667 * var(--u)); line-height: calc(100 * var(--u)); }
.lg { font-size: calc(66.667 * var(--u)); line-height: calc(58 * var(--u)); }
.md { font-size: calc(60 * var(--u)); line-height: calc(67 * var(--u)); }
.sm { font-size: calc(26.667 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: calc(2.4 * var(--u)); }
.hero h1 { padding-top: calc(18 * var(--u)); }

.eyebrow {
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: calc(2 * var(--u));
  text-transform: uppercase;
}
.body {
  font-size: calc(18.667 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: calc(0.187 * var(--u));
  color: var(--muted);
  font-weight: 300;
}
.body p + p { margin-top: calc(24 * var(--u)); }
.lead {
  font-size: calc(32 * var(--u));
  line-height: calc(40 * var(--u));
  letter-spacing: calc(0.32 * var(--u));
  font-weight: 300;
}

.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: calc(1.5 * var(--u)) solid var(--ink);
  border-radius: 50%;
  text-decoration: none;
  text-transform: uppercase;
  font-size: calc(15.86 * var(--u));
  line-height: calc(17 * var(--u));
  letter-spacing: calc(1.6 * var(--u));
  transition: background .2s, color .2s;
}
.pill:hover, .pill:focus-visible { background: var(--ink); color: var(--bg); }

/* ---------- films: one flowing grid, sized in slide units ---------- */
.films-section {
  --u: calc(100cqw / 1440);
  padding: calc(88 * var(--u)) calc(92 * var(--u)) calc(110 * var(--u));
}
.films-section h2 { margin-bottom: calc(64 * var(--u)); }
.film-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: calc(64 * var(--u));
  row-gap: calc(80 * var(--u));
}
.film-media {
  width: 100%;
  aspect-ratio: 369 / 263;
  background: #000;
  overflow: hidden;
}
.film-media video, .film-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film h3 {
  margin-top: calc(31 * var(--u));
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(26.667 * var(--u));
  line-height: calc(32 * var(--u));
  letter-spacing: calc(2.4 * var(--u));
  white-space: nowrap;
}
.film ul { list-style: none; margin-top: calc(23 * var(--u)); }
.film li {
  border-top: 1px solid var(--muted);
  padding-top: calc(11 * var(--u));
  height: calc(45 * var(--u));
  font-size: calc(18.667 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: calc(0.187 * var(--u));
  font-weight: 300;
}

.film-link, .canvas-link a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #eeeee660;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.film-link:hover, .canvas-link a:hover { text-decoration-color: var(--ink); }
.film-link {
  display: inline-block;
  margin-top: calc(10 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(22 * var(--u));
  letter-spacing: calc(0.16 * var(--u));
  font-weight: 300;
}

/* ---------- quote, contact, footer ---------- */
.quote { display: flex; align-items: center; min-height: calc(402 * var(--u)); }
.contact div + div { margin-top: calc(24 * var(--u)); }
.contact dt {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: calc(26.667 * var(--u));
  line-height: calc(32 * var(--u));
  letter-spacing: calc(2.4 * var(--u));
}
.contact dd {
  margin-top: calc(3 * var(--u));
  color: var(--muted);
  text-transform: uppercase;
  font-size: calc(18.667 * var(--u));
  line-height: calc(22 * var(--u));
  letter-spacing: calc(1.87 * var(--u));
  font-weight: 300;
}
.disclaimer h4 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(18.677 * var(--u));
  line-height: calc(22 * var(--u));
  letter-spacing: calc(1.68 * var(--u));
}
.disclaimer p {
  margin-top: calc(6 * var(--u));
  color: var(--muted);
  font-size: calc(13.608 * var(--u));
  line-height: calc(17 * var(--u));
  font-weight: 300;
}
.contact-art { z-index: 2; }

/* ---------- contact form ---------- */
.contact-form { display: flex; flex-direction: column; gap: calc(18 * var(--u)); z-index: 3; }
.form-row { display: flex; gap: calc(28 * var(--u)); }
.form-row label { flex: 1; min-width: 0; }
.contact-form label { display: block; }
.contact-form label span {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: calc(18.667 * var(--u));
  line-height: calc(22 * var(--u));
  letter-spacing: calc(1.68 * var(--u));
}
.contact-form input, .contact-form textarea {
  display: block;
  width: 100%;
  margin-top: calc(6 * var(--u));
  padding: calc(6 * var(--u)) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--muted);
  border-radius: 0;
  color: var(--ink);
  font: 300 calc(18.667 * var(--u)) / calc(24 * var(--u)) var(--sans);
  resize: none;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--ink); }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { box-shadow: 0 1px 0 var(--ink); }
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; align-items: center; gap: calc(24 * var(--u)); }
.form-send { --h: 58; width: calc(170 * var(--u)); background: transparent; color: var(--ink); font-family: var(--sans); cursor: pointer; }
.form-send:disabled { opacity: .5; cursor: wait; }
.form-status { color: var(--muted); font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 300; }

/* ---------- remembering Avi ---------- */
.remember-section {
  --u: calc(100cqw / 1440);
  padding: calc(40 * var(--u)) calc(92 * var(--u)) calc(110 * var(--u));
}
.remember-section h2 { margin-bottom: calc(48 * var(--u)); text-align: center; }
.remember-links { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(28 * var(--u)); }
.remember-pill {
  --h: 92;
  width: calc(250 * var(--u));
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  cursor: pointer;
}

/* The letter opens in a floating window in the middle of the screen. */
.letter {
  position: fixed;
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  width: min(460px, calc(100vw - 32px));
  max-height: min(72vh, 680px);
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  background: #1a1414;
  color: var(--ink);
  border: 1px solid #eeeee640;
  box-shadow: 0 24px 60px #000a;
}
.letter[open] { display: flex; animation: letter-in .3s ease; }
@keyframes letter-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)); } }
.letter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 14px 24px;
  border-bottom: 1px solid #eeeee620;
}
.letter-head h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 1.6px;
}
.letter-close {
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid #eeeee640;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.letter-close:hover, .letter-close:focus-visible { background: var(--ink); color: var(--bg); }
.letter-body {
  overflow-y: auto;
  padding: 20px 24px 24px;
  color: #cfcdca;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 300;
  overscroll-behavior: contain;
}
.letter-body p + p { margin-top: 14px; }
.letter-body:focus-visible { outline: 1px solid #eeeee640; outline-offset: -4px; }
.letter-sign { text-align: right; color: var(--ink); }
.letter-lead { font-family: var(--display); text-transform: uppercase; letter-spacing: 1.4px; font-size: 18px; line-height: 1.35; color: var(--ink); }
.event-details { margin: 14px 0 18px; border-top: 1px solid #eeeee620; }
.event-details div { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid #eeeee620; }
.event-details dt { flex: none; width: 52px; color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: 1.2px; padding-top: 2px; }
.event-details dd { margin: 0; color: var(--ink); }
.letter-body blockquote { margin: 14px 0 0; padding-left: 16px; border-left: 1px solid #eeeee640; font-style: italic; }
.letter-body blockquote p + p { margin-top: 12px; }
.letter-link a { color: var(--ink); text-underline-offset: 3px; }
.letter-support { margin-top: 22px !important; padding-top: 14px; border-top: 1px solid #eeeee620; color: var(--muted); font-size: 13px; line-height: 1.55; }
.letter-support a { color: var(--ink); white-space: nowrap; }

/* ---------- reveal on scroll (only when JS runs) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- phones: stack everything ---------- */
@media (max-width: 760px) {
  .slide {
    --u: 0.36px;               /* scales the type sizes above to phone size */
    height: auto;
    overflow: visible;
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .el { position: relative; left: auto; top: auto; width: 100%; }
  .frame { height: auto; aspect-ratio: var(--w) / var(--h); max-height: 80vh; }
  .xl { font-size: 54px; line-height: 50px; }
  .lg { font-size: 36px; line-height: 34px; }
  .md { font-size: 30px; line-height: 36px; }
  .sm { font-size: 18px; line-height: 24px; letter-spacing: 1.6px; }
  .eyebrow { font-size: 14px; line-height: 18px; letter-spacing: 1.4px; }
  .body { font-size: 15px; line-height: 22px; }
  .body p + p { margin-top: 14px; }
  .lead { font-size: 21px; line-height: 28px; }
  .hero h1 { padding-top: 0; order: -2; }
  .hero .eyebrow { order: -1; }
  .hero-a { max-height: 60vh; }
  .hero-b-outline { display: none; }
  .hero-b { width: 70%; align-self: flex-end; margin-top: -120px; outline: 2px solid var(--ink); }
  .pill { width: 170px; height: 58px; font-size: 13px; line-height: 15px; letter-spacing: 1.3px; border-width: 1px; }
  .canvas-portrait, .foundation-art, .contact-art { width: 80%; align-self: center; }
  .remember-section { padding: 40px 16px; }
  .remember-section h2 { margin-bottom: 24px; }
  .remember-links { gap: 14px; }
  .remember-pill { width: 170px; height: 64px; }
  .letter { width: calc(100vw - 16px); max-height: 80vh; }
  .films-section { padding: 40px 16px; }
  .films-section h2 { margin-bottom: 28px; }
  .film-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .film h3 { margin-top: 16px; font-size: 20px; line-height: 26px; letter-spacing: 1.8px; white-space: normal; }
  .film ul { margin-top: 12px; }
  .film li { height: auto; padding: 8px 0; font-size: 15px; line-height: 20px; }
  .film-link { margin-top: 8px; font-size: 14px; line-height: 20px; }
  .gallery { padding-top: 10px; padding-bottom: 10px; }
  .gallery.bleed { padding-left: 0; padding-right: 0; }
  .quote { min-height: 0; }
  .contact div + div { margin-top: 16px; }
  .contact-form { gap: 16px; }
  .form-row { flex-direction: column; gap: 16px; }
  .contact-form label span { font-size: 14px; line-height: 18px; letter-spacing: 1.3px; }
  .contact-form input, .contact-form textarea { font-size: 16px; line-height: 22px; padding: 6px 0; margin-top: 4px; }
  .form-actions { gap: 16px; flex-wrap: wrap; }
  .form-status { font-size: 13px; line-height: 18px; }
  .contact dt { font-size: 18px; line-height: 24px; letter-spacing: 1.6px; }
  .contact dd { font-size: 13px; line-height: 18px; letter-spacing: 1.3px; }
  .disclaimer h4 { font-size: 14px; line-height: 18px; }
  .disclaimer p { font-size: 11px; line-height: 15px; }
  .outline, .box-outline { outline-width: 1.5px; outline-offset: -1.5px; }
}