:root {
  /* The hero starts moving while the curtain is still parting, so the page is
     already alive by the time it is revealed rather than arriving afterwards. */
  --intro-delay: 1.3s;

  --nude: #e4cbae;
  --white: #fbf6ef;
  --espresso: #2a1b12;
  --espresso-soft: #4a3626;
  --brass: #a9824c;
  --line: rgba(42, 27, 18, 0.16);

  --c-style: #cf6b7c;
  --c-beauty: #e08a4f;
  --c-taste: #c1603e;
  --c-everyday: #5f8360;
  --c-home: #cf9a2e;
  --c-escape: #4d7f96;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--espresso);
  font-family: 'Manrope', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 500; letter-spacing: -0.01em; }

.eyebrow {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent, var(--brass));
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; }

/* ---------- Nav ---------- */
.masthead-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 246, 239, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.masthead-nav .wrap { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; }
.wordmark { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 600; }
.nav-links { display: flex; gap: 24px; list-style: none; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.nav-links a { opacity: 0.7; transition: opacity 0.2s ease, color 0.2s ease; }
.nav-links li:nth-child(1) a:hover { opacity: 1; color: var(--c-style); }
.nav-links li:nth-child(2) a:hover { opacity: 1; color: var(--c-beauty); }
.nav-links li:nth-child(3) a:hover { opacity: 1; color: var(--c-taste); }
.nav-links li:nth-child(4) a:hover { opacity: 1; color: var(--c-everyday); }
.nav-links li:nth-child(5) a:hover { opacity: 1; color: var(--c-home); }
.nav-links li:nth-child(6) a:hover { opacity: 1; color: var(--c-escape); }
.nav-links li:last-child a { background: var(--espresso); color: var(--white); padding: 8px 16px; border-radius: 999px; opacity: 1; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ---------- Hero ---------- */
.cover { padding: 70px 0 90px; border-bottom: 1px solid var(--line); position: relative; }

.cover-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  margin-top: 26px;
}

.cover h1 {
  font-size: clamp(3.2rem, 8vw, 6rem);
  line-height: 0.94;
  text-transform: uppercase;
}
.cover h1 em { font-style: italic; font-weight: 400; color: var(--c-taste); }

.cover-copy p {
  margin-top: 24px;
  font-size: 1.05rem;
  color: var(--espresso-soft);
  max-width: 42ch;
}

.cover-note {
  margin-top: 22px;
  font-size: 0.8rem;
  color: var(--espresso-soft);
  border-left: 2px solid var(--c-taste);
  padding-left: 14px;
}

.photo-frame-wrap { position: relative; }

.blob {
  position: absolute;
  width: 340px; height: 340px;
  background: var(--c-beauty);
  opacity: 0.35;
  border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
  top: -30px; right: -30px;
  z-index: 0;
  filter: blur(2px);
}

.photo-frame {
  position: relative;
  z-index: 1;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 14px 14px 54px;
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(42, 27, 18, 0.18);
  transform: rotate(-3deg);
  max-width: 380px;
  margin: 0 auto;
}

.photo-slot {
  aspect-ratio: 4 / 5;
  background: repeating-linear-gradient(45deg, rgba(42,27,18,0.05), rgba(42,27,18,0.05) 10px, transparent 10px, transparent 20px);
  border: 1.5px dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
  font-size: 0.8rem; color: var(--espresso-soft);
}

.photo-slot.has-photo {
  border: none;
  padding: 0;
  background: none;
  overflow: hidden;
}
.photo-slot.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-caption {
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
  text-align: center;
}

.photo-tag {
  position: absolute;
  bottom: -16px; right: -18px;
  background: var(--c-taste);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  transform: rotate(6deg);
  z-index: 2;
  box-shadow: 0 8px 18px rgba(42, 27, 18, 0.25);
}

@media (max-width: 860px) {
  .cover-grid { grid-template-columns: 1fr; }
  .photo-frame { margin-top: 40px; }
}

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 56px; align-items: center; }
.about-copy { position: relative; }
.doodle { position: absolute; top: -34px; left: -6px; font-size: 1.6rem; color: var(--accent); }
.about-heading {
  font-family: 'Caveat', cursive;
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--nude);
  transform: rotate(-2deg);
  margin-bottom: 18px;
}
.about-copy p { font-size: 1rem; color: rgba(251, 246, 239, 0.82); max-width: 46ch; margin-bottom: 14px; }
.about-photo-wrap { position: relative; }
.about-photo-frame {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 12px;
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  transform: rotate(3deg);
  max-width: 320px;
  margin: 0 auto;
}
.about-photo-frame .photo-slot { aspect-ratio: 4 / 5; }
.about-caption {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--accent);
  transform: rotate(-2deg);
}
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .doodle { display: none; }
}

/* ---------- Contents index ---------- */
.contents { padding: 60px 0; border-bottom: 1px solid var(--line); }
.contents .eyebrow { margin-bottom: 28px; display: block; }
.toc-list { list-style: none; }
.toc-item { border-bottom: 1px dashed var(--line); }
.toc-item:first-child { border-top: 1px dashed var(--line); }
.toc-item a { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; width: 100%; transition: padding-left 0.2s ease; }
.toc-item a:hover { padding-left: 8px; }
.toc-num { font-family: 'Fraunces', serif; font-style: italic; font-size: 1rem; width: 32px; color: var(--accent); }
.toc-name { font-family: 'Fraunces', serif; font-size: 1.5rem; text-transform: uppercase; }
.toc-leader { flex: 1; border-bottom: 1px dotted var(--line); margin-bottom: 6px; }
.toc-count { font-size: 0.85rem; font-weight: 700; color: var(--accent); }

/* ---------- Sections ---------- */
.section {
  padding: 80px 0;
  border-bottom: 1px solid var(--line);
}

.section.on-dark { background: var(--espresso); color: var(--white); border-bottom: none; }
.section.on-dark .section-desc { color: rgba(251, 246, 239, 0.72); }
.section.on-dark .toc-leader { border-color: rgba(251, 246, 239, 0.25); }
.section.on-dark .slot { border-color: rgba(251, 246, 239, 0.3); background: rgba(251,246,239,0.05); color: rgba(251,246,239,0.7); }
.section.on-dark .brand-name { color: var(--white); }

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.section-title { font-size: clamp(2rem, 5vw, 3.2rem); text-transform: uppercase; margin-top: 8px; }
.section-desc { max-width: 34ch; font-size: 0.95rem; color: var(--espresso-soft); text-align: right; }
@media (max-width: 720px) { .section-head { flex-direction: column; align-items: flex-start; } .section-desc { text-align: left; } }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px 22px; }

.brand-card { display: flex; flex-direction: column; gap: 12px; }
.brand-card:nth-child(3n+1) .slot { transform: rotate(-1.6deg); }
.brand-card:nth-child(3n+2) .slot { transform: rotate(1.2deg); }
.brand-card:nth-child(3n) .slot { transform: rotate(-0.6deg); }

.slot {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1.5px dashed var(--line);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px;
  font-size: 0.76rem; color: var(--espresso-soft);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: 0 10px 22px rgba(42, 27, 18, 0.08);
}

.play-badge {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px;
  background: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(42,27,18,0.2);
}
.play-badge svg { width: 10px; height: 10px; }

.brand-name { font-family: 'Fraunces', serif; font-size: 1.02rem; }

/* ---------- Credits ---------- */
.credits { padding: 80px 0; border-bottom: 1px solid var(--line); }
.credits-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; margin-top: 40px; list-style: none; }
.credits-list li {
  aspect-ratio: 3 / 2;
  border: 1.5px dashed var(--line);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  padding: 12px;
  background: rgba(169, 130, 76, 0.06);
}
.credits-list li.has-logo {
  background: var(--white);
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(42, 27, 18, 0.15);
}
.credits-list li.has-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.credits-list li.has-logo.logo-clean { background: var(--white); }
.credits-list li.has-logo.logo-clean img { object-fit: contain; padding: 20%; box-sizing: border-box; }
.credits .eyebrow { display: block; text-align: center; }

/* ---------- Connect ---------- */
.connect { background: var(--espresso); color: var(--white); padding: 90px 0 80px; position: relative; overflow: hidden; }
.connect-bg {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(251, 246, 239, 0.05), rgba(251, 246, 239, 0.05) 12px, transparent 12px, transparent 24px);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 40px;
  font-size: 0.85rem; color: rgba(251, 246, 239, 0.35);
}
.connect-bg.has-photo { background: none; padding: 0; }
.connect-bg.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.connect-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 27, 18, 0.55), rgba(42, 27, 18, 0.88)); }
.connect-content { position: relative; z-index: 2; }
.connect-heading {
  font-family: 'Fraunces', serif;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  line-height: 0.95;
  margin-bottom: 44px;
}
.connect-heading .line-two { display: block; margin-left: 52px; }
.connect-grid { display: flex; justify-content: center; }
.postcard { max-width: 560px; width: 100%; }

.postcard {
  background: var(--white);
  color: var(--espresso);
  border-radius: 4px;
  padding: 30px 30px 26px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 2;
}
.postcard-label { font-family: 'Fraunces', serif; font-style: italic; text-align: center; font-size: 1.1rem; letter-spacing: 0.04em; margin-bottom: 22px; }
.postcard-body { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.postcard-fields { display: flex; flex-direction: column; gap: 18px; border-right: 1px solid var(--line); padding-right: 20px; }
.field-label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--espresso-soft); margin-bottom: 3px; }
.field-value { font-size: 0.92rem; word-break: break-word; }
.field-value a { border-bottom: 1px solid var(--c-taste); padding-bottom: 1px; }
.postcard-note { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; text-align: right; }
.stamp { width: 50px; height: 62px; border: 1.5px dashed var(--line); border-radius: 2px; }
.stamp.has-photo {
  border: 3px solid var(--white);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  transform: rotate(-4deg);
  overflow: hidden;
}
.stamp.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.note-text { font-family: 'Caveat', cursive; font-size: 1.5rem; font-weight: 600; color: var(--c-taste); transform: rotate(-2deg); margin-top: auto; }

.connect-photos { position: relative; min-height: 380px; }
.film-strip { display: flex; flex-direction: column; gap: 8px; transform: rotate(4deg); max-width: 220px; margin-left: auto; }
.film-frame {
  aspect-ratio: 1 / 1;
  border: 1.5px dashed rgba(251, 246, 239, 0.3);
  background: rgba(251, 246, 239, 0.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: rgba(251, 246, 239, 0.55);
  text-align: center; padding: 8px;
}
.connect-circle {
  position: absolute;
  width: 190px; height: 190px;
  border-radius: 50%;
  border: 8px solid var(--white);
  overflow: hidden;
  top: 38%; right: 6%;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.4);
  background: repeating-linear-gradient(45deg, rgba(42,27,18,0.06), rgba(42,27,18,0.06) 8px, transparent 8px, transparent 16px);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; color: var(--espresso-soft); text-align: center; padding: 10px;
}

@media (max-width: 860px) {
  .connect-grid { grid-template-columns: 1fr; }
  .connect-heading .line-two { margin-left: 0; }
  .connect-photos { min-height: 260px; margin-top: 30px; }
  .connect-circle { position: static; margin: 20px auto 0; }
  .film-strip { max-width: 160px; margin: 0 auto; }
}

footer { padding: 28px 0; text-align: center; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--espresso-soft); }

/* ---------- Video cells (added) ---------- */
.brand-card .slot { padding: 0; overflow: hidden; }
.slot-wrap { position: relative; }
.brand-card.has-badge { padding-bottom: 34px; }
.brand-card .slot > .slot-label {
  padding: 16px;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}

/* A slot that holds a playable video */
.slot.has-video {
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  border-width: 1.5px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.slot.has-video:hover, .slot.has-video:focus-visible {
  box-shadow: 0 16px 34px rgba(42, 27, 18, 0.22);
}
.brand-card:nth-child(3n+1) .slot.has-video:hover { transform: rotate(-1.6deg) translateY(-4px); }
.brand-card:nth-child(3n+2) .slot.has-video:hover { transform: rotate(1.2deg) translateY(-4px); }
.brand-card:nth-child(3n) .slot.has-video:hover   { transform: rotate(-0.6deg) translateY(-4px); }

.slot.has-video {
  border-style: solid;
  border-color: transparent;
  background: var(--espresso);
}
.slot-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: var(--espresso);
}
.slot.has-video .play-badge {
  width: 44px; height: 44px;
  top: 50%; left: 50%; right: auto;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}
.slot.has-video .play-badge svg { width: 15px; height: 15px; margin-left: 3px; }
.slot.has-video.has-video:hover .play-badge { transform: translate(-50%, -50%) scale(1.12); }

.slot-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(42, 27, 18, 0.85));
  color: var(--white);
  font-size: 0.72rem;
  text-align: left;
  line-height: 1.35;
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 12, 7, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lightbox[open], .lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-inner {
  position: relative;
  max-width: min(94vw, 520px);
  width: 100%;
  display: flex; flex-direction: column; gap: 14px;
}
.lightbox video {
  width: 100%;
  max-height: 78vh;
  border-radius: 6px;
  background: #000;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  display: block;
}
.lightbox-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  color: var(--white);
}
.lightbox-brand { font-family: 'Fraunces', serif; font-size: 1.2rem; }
.lightbox-link {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap;
}
.lightbox-caption { color: rgba(251, 246, 239, 0.72); font-size: 0.85rem; }
.lightbox-close {
  position: absolute; top: -46px; right: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(251, 246, 239, 0.35);
  background: transparent;
  color: var(--white);
  font-size: 1.1rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(251, 246, 239, 0.12); }
body.no-scroll { overflow: hidden; }

/* Logos rendered from the database */
.credits-list li.is-loading { opacity: 0.35; }
.lightbox[hidden] { display: none; }

/* ---------- Brand logo badge on the frame edge ---------- */
.brand-badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--white);
  border: 2px solid var(--white);
  box-shadow: 0 8px 20px rgba(42, 27, 18, 0.3);
  z-index: 3;
  pointer-events: none;
  transition: transform 0.25s ease;
}
.brand-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand-badge.contain img {
  object-fit: contain;
  padding: 18%;
  box-sizing: border-box;
}
.slot-wrap:hover .brand-badge { transform: translate(-50%, 50%) scale(1.06); }
@media (max-width: 520px) {
  .brand-badge { width: 46px; height: 46px; }
  .brand-card.has-badge { padding-bottom: 28px; }
}

/* A card whose video is an external embed has no frame to show. */
.slot.is-embed {
  background: color-mix(in srgb, var(--accent) 26%, var(--espresso));
  border-color: transparent;
}
.slot-provider {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 246, 239, 0.75);
}

/* ---------- Embedded players in the lightbox ---------- */
.lightbox iframe {
  width: 100%;
  height: min(78vh, 740px);
  border: 0;
  border-radius: 6px;
  background: #000;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  display: block;
}
.lightbox video[hidden], .lightbox iframe[hidden] { display: none; }

/* ---------- Inline playback ---------- */
.slot.has-video .slot-media { cursor: pointer; }

.play-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: opacity 0.2s ease;
}
.slot.is-playing .play-overlay {
  opacity: 0;
  pointer-events: none;
}

/* Link out to the original post, revealed on hover like the controls. */
.slot-link {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  background: rgba(251, 246, 239, 0.94);
  color: var(--espresso);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.2s ease;
  box-shadow: 0 4px 10px rgba(42, 27, 18, 0.25);
}
.slot:hover .slot-link,
.slot-link:focus-visible { opacity: 1; }
@media (hover: none) {
  .slot-link { opacity: 1; }
}

/* ==========================================================================
   Motion
   Transform and opacity only, so nothing here forces layout. Anything that
   animates starts from its finished state and is only moved once the page
   has said it is ready, so a visitor with JavaScript off sees the page whole.
   ========================================================================== */

body.motion-ready .section,
body.motion-ready .contents,
body.motion-ready .credits {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.motion-ready .section.is-visible,
body.motion-ready .contents.is-visible,
body.motion-ready .credits.is-visible {
  opacity: 1;
  transform: none;
}

/* Cards, table-of-contents rows and logos arrive one after another. */
body.motion-ready .reveal-item {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.55s ease var(--stagger, 0ms),
              transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--stagger, 0ms);
}
body.motion-ready .reveal-item.is-visible {
  opacity: 1;
  transform: none;
}
/* The logo strip is never hidden: it fades with its section, nothing more. */

/* ---------- Hero entrance ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes settle {
  from { opacity: 0; transform: rotate(-9deg) translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: rotate(-3deg); }
}
@keyframes drift {
  from { opacity: 0; transform: scale(0.82) translate(14px, 10px); }
  to   { opacity: 0.35; transform: none; }
}
@keyframes tagPop {
  from { opacity: 0; transform: rotate(20deg) scale(0.6); }
  to   { opacity: 1; transform: rotate(6deg) scale(1); }
}

body.motion-ready .cover .eyebrow { animation: rise 0.7s calc(var(--intro-delay) + 0.05s) both cubic-bezier(0.22, 0.61, 0.36, 1); }
body.motion-ready .cover h1       { animation: rise 0.8s calc(var(--intro-delay) + 0.12s) both cubic-bezier(0.22, 0.61, 0.36, 1); }
body.motion-ready .cover-copy p   { animation: rise 0.8s calc(var(--intro-delay) + 0.22s) both cubic-bezier(0.22, 0.61, 0.36, 1); }
body.motion-ready .cover-note     { animation-delay: calc(var(--intro-delay) + 0.32s); }
body.motion-ready .photo-frame    { animation: settle 1s calc(var(--intro-delay) + 0.2s) both cubic-bezier(0.22, 0.61, 0.36, 1); }
body.motion-ready .blob           { animation: drift 1.2s calc(var(--intro-delay) + 0.1s) both ease-out; }
body.motion-ready .photo-tag      { animation: tagPop 0.6s calc(var(--intro-delay) + 0.75s) both cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ---------- Nav ---------- */
.nav-links a { position: relative; }
.nav-links li:not(:last-child) a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-links li:not(:last-child) a:hover::after,
.nav-links li:not(:last-child) a.is-current::after { transform: scaleX(1); }
.nav-links a.is-current { opacity: 1; }

/* Table of contents rows lead with their number. */
.toc-item a { transition: padding-left 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); }
.toc-item a:hover { padding-left: 12px; }
.toc-num { transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); }
.toc-item a:hover .toc-num { transform: translateX(3px); }

/* Logos lift slightly under the cursor. */
.credits-list li.has-logo {
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.3s ease;
}
.credits-list li.has-logo:hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 14px 26px rgba(42, 27, 18, 0.24);
}

/* The postcard tilts up as it comes into view. */
body.motion-ready .connect .postcard {
  opacity: 0;
  transform: translateY(26px) rotate(-1.5deg);
  transition: opacity 0.8s ease 0.15s, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
}
body.motion-ready .connect.is-visible .postcard { opacity: 1; transform: none; }

/* Anyone who has asked for less motion gets the finished page, immediately. */
body.motion-off .section,
body.motion-off .contents,
body.motion-off .credits,
body.motion-off .reveal-item,
body.motion-off .connect .postcard {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
body.motion-off .cover .eyebrow,
body.motion-off .cover h1,
body.motion-off .cover-copy p,
body.motion-off .photo-frame,
body.motion-off .blob,
body.motion-off .photo-tag { animation: none !important; }

/* ==========================================================================
   Photo cells
   A campaign that is stills rather than film gets the same polaroid framing
   as the photographs at the top of the page.
   ========================================================================== */
.brand-card.is-photo { padding-bottom: 34px; }

.photo-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 12px 46px;
  box-shadow: 0 16px 34px rgba(42, 27, 18, 0.18);
  transform: rotate(-2deg);
  position: relative;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.3s ease;
}
.brand-card:nth-child(3n+2) .photo-card { transform: rotate(1.6deg); }
.brand-card:nth-child(3n) .photo-card   { transform: rotate(-0.8deg); }
.slot-wrap:hover .photo-card {
  transform: rotate(0deg) translateY(-5px);
  box-shadow: 0 22px 44px rgba(42, 27, 18, 0.26);
}

/* The photo itself is the button, so it is clickable and keyboard reachable. */
.photo-shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--espresso);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.photo-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.slot-wrap:hover .photo-shot img { transform: scale(1.04); }

.photo-card-caption {
  position: absolute;
  left: 12px; right: 12px; bottom: 14px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.25;
  text-align: center;
  color: var(--espresso);
  /* Leave the badge room so a long caption never runs under it. */
  padding: 0 34px;
}
.section.on-dark .photo-card-caption { color: var(--espresso); }

/* On a polaroid the badge sits in the corner like a sticker, so it never
   covers the handwritten line. */
.brand-card.is-photo .brand-badge {
  left: auto;
  right: 6px;
  bottom: 4px;
  transform: translateY(50%) rotate(-6deg);
  width: 50px; height: 50px;
}
.brand-card.is-photo .slot-wrap:hover .brand-badge {
  transform: translateY(50%) rotate(-6deg) scale(1.08);
}
@media (max-width: 520px) {
  .brand-card.is-photo .brand-badge { width: 42px; height: 42px; }
  .photo-card-caption { padding: 0 26px; font-size: 0.85rem; }
}

.lightbox-photo {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 6px;
  background: #000;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  display: block;
}
.lightbox img[hidden] { display: none; }

/* ==========================================================================
   Opening sequence
   The page starts behind a closed curtain carrying the name, which parts to
   reveal the site. Driven entirely by CSS: if JavaScript never runs, or fails,
   the curtain still opens on schedule and can never trap the page.
   ========================================================================== */
#intro {
  position: fixed;
  inset: 0;
  z-index: 400;
  /* Takes itself out of play once the panels are clear of the screen. */
  animation: introEnd 0.01s 2.35s forwards;
}
@keyframes introEnd {
  to { visibility: hidden; pointer-events: none; }
}

.intro-panel {
  position: absolute;
  left: 0;
  right: 0;
  /* A hair over half, so no seam shows down the middle. */
  height: 50.2%;
  background: var(--espresso);
  will-change: transform;
}
.intro-top {
  top: 0;
  animation: introOpenTop 1.05s 1.2s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.intro-bottom {
  bottom: 0;
  animation: introOpenBottom 1.05s 1.2s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes introOpenTop { to { transform: translateY(-100%); } }
@keyframes introOpenBottom { to { transform: translateY(100%); } }

.intro-mark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  color: var(--white);
  animation: introMarkOut 0.45s 1.05s ease-in forwards;
}
@keyframes introMarkOut {
  to { opacity: 0; transform: translateY(-12px); }
}

.intro-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nude);
  animation: rise 0.7s 0.1s both cubic-bezier(0.22, 0.61, 0.36, 1);
}
.intro-name {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2.6rem, 8vw, 5.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  animation: rise 0.9s 0.26s both cubic-bezier(0.22, 0.61, 0.36, 1);
}
.intro-name em { font-style: italic; font-weight: 400; color: var(--nude); }

.intro-rule {
  display: block;
  height: 1px;
  width: 0;
  background: var(--brass);
  animation: introRule 0.8s 0.5s both cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes introRule { to { width: min(300px, 46vw); } }

/* A repeat visit within the same session, or a request for less motion, skips
   the whole thing: no curtain, and the hero arrives straight away. */
html.intro-seen { --intro-delay: 0s; }
html.intro-seen #intro { display: none; }
html.intro-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  :root { --intro-delay: 0s; }
  #intro { display: none; }
  html.intro-lock { overflow: visible; }
}