/* POPTANI — Index direction, 12 Nov.
   The page as a numbered sequence: hero 00, the eight disclosures 01–08, the
   email ask 09. Cosmetic only — no copy lives in this file except the entry
   numerals, which are generated by a CSS counter and hidden from assistive
   technology where the browser supports content alt text.

   ONE file, enqueued after everything else on the home page (functions.php,
   poptani_index_direction_styles, priority 20, so it follows dist/styles.css
   on the live page). It does not rely on that order: every selector starts
   html:root body.home main#poptani-cinema and carries more classes than the
   rule it replaces, because the draft preview injects theme.css at runtime,
   after this file. Where the rule being replaced is !important, so is this.

   To undo the whole direction: remove the enqueue. Nothing else was edited
   except header.php, which lost the header email form. */

/* Full Aviano Regular, digits only. The faces in poptani-fonts.css are subset
   to the wordmark letters A I N O P T, so they cannot set a numeral. The
   unicode-range means this file is fetched only for 0–9. Confirm the web
   licence covers serving the full file before publishing. */
@font-face {
  font-family: "POPTANI Aviano Numerals";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Aviano-Regular.woff2") format("woff2");
  unicode-range: U+0030-0039;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
html:root body.home main#poptani-cinema {
  --pi-rail: clamp(2rem, 6vw, 2.5rem);
  --pi-gap: clamp(2rem, 5vw, 5.5rem);
  --pi-num: clamp(4rem, 9vw, 7.5rem);
  --pi-ink: #292B2D;
  --pi-text: #3B3D3F;
  --pi-title: #866D50;
  --pi-rule: rgba(134, 109, 80, .34);
  --pi-veil: rgba(247, 246, 242, .88);
  --pi-photo-ground: #ECE8DF;
  --pi-bar: #000000;
  --pi-bar-ink: #FFFFFF;
  --pi-bar-rule: #4A4A4A;
  --pi-bar-placeholder: #C4BEB4;
  --pi-numerals: "POPTANI Aviano Numerals", "POPTANI Martel", Georgia, serif;
  counter-reset: pi-entry;
}

html:root[data-poptani-header-theme="night"] body.home main#poptani-cinema {
  --pi-ink: #F3EFE6;
  --pi-text: #BFB9AF;
  --pi-title: #C18641;
  --pi-rule: #2A3C66;
  --pi-veil: rgba(8, 18, 44, .84);
  --pi-photo-ground: #0D1A3A;
  --pi-bar: #F3EFE6;
  --pi-bar-ink: #08122C;
  --pi-bar-rule: #BFB9AF;
  --pi-bar-placeholder: #5A6079;
}

@media (max-width: 900px) {
  html:root body.home main#poptani-cinema { --pi-rail: 1.5rem; --pi-gap: 1.5rem; }
}
@media (max-width: 420px) {
  html:root body.home main#poptani-cinema { --pi-rail: 1.25rem; }
}

/* ── 00 · Hero: full-bleed photograph, text on a veil ───────────────────────
   The photograph is one line when it arrives:
     --poptani-hero-photo: url("…");
   on the selector below. Until then the frame carries a quiet ground so the
   veil still reads as a panel. The veil is the left column plus a rail either
   side — 683px at 1440 — so its edge lands in the gutter the sections use. */
html:root body.home main#poptani-cinema > .poptani-frame.poptani-frame--one {
  background-color: var(--pi-photo-ground);
  background-image: var(--poptani-hero-photo, none);
  background-size: cover;
  background-position: center;
}

html:root body.home main#poptani-cinema > .poptani-frame--one > .poptani-copy {
  width: calc(2 * var(--pi-rail) + (100% - 2 * var(--pi-rail) - var(--pi-gap)) * .46809);
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  padding: 11rem var(--pi-rail) clamp(3rem, 5vw, 4.5rem);
  justify-content: flex-end;
  background: var(--pi-veil);
  color: var(--pi-ink);
}

html:root body.home main#poptani-cinema .poptani-frame--one .poptani-copy .poptani-signature {
  margin: 0;
  color: var(--pi-ink);
  font-size: clamp(2.75rem, 5vw, 4.5rem) !important;
  font-weight: 100 !important;
  line-height: 1.04 !important;
  letter-spacing: -.03em;
  text-wrap: balance;
}

html:root body.home main#poptani-cinema .poptani-frame--one .poptani-copy .poptani-signature::before {
  content: "00";
  content: "00" / "";
  display: block;
  margin-bottom: 1.75rem;
  color: var(--pi-text);
  font-family: var(--pi-numerals);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1;
}

html:root body.home main#poptani-cinema .poptani-frame--one .poptani-copy .poptani-signature > span + span {
  margin-top: .39em;
}

/* Charcoal, not crimson: the wordmark is now the only crimson on the page. */
html:root body.home main#poptani-cinema .poptani-frame--one .poptani-copy .poptani-signature .poptani-signature__anchor {
  color: var(--pi-ink);
  font-weight: 100 !important;
}

html:root body.home main#poptani-cinema .poptani-frame--one .poptani-copy .poptani-intro {
  margin-top: 2.5rem;
  color: var(--pi-text);
  font-family: "POPTANI Martel", Georgia, serif;
  font-size: .9375rem;
  font-weight: 400 !important;
  letter-spacing: normal;
  line-height: 1.7;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  html:root body.home main#poptani-cinema > .poptani-frame--one > .poptani-copy {
    width: 100%;
    padding-top: 9.5rem;
  }
}

/* ── Sections 2 and 3: a rule, a small label, numbered entries ──────────── */
html:root body.home main#poptani-cinema > .poptani-frame.poptani-frame--ivory {
  padding-top: clamp(4.5rem, 9vw, 8rem);
}

html:root body.home main#poptani-cinema > .poptani-frame--ivory > .poptani-copy,
html:root body.home main#poptani-cinema > .poptani-frame--two > .poptani-copy {
  border-top: 1px solid var(--pi-rule);
  padding-top: 1.75rem !important;
  padding-bottom: clamp(5.5rem, 10vw, 9rem) !important;
}

html:root body.home main#poptani-cinema .poptani-copy .poptani-heading:not(.poptani-heading--final),
html:root body.home main#poptani-cinema .poptani-strategy--illustrated .poptani-strategy__eyebrow {
  color: var(--pi-text);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

html:root body.home main#poptani-cinema .poptani-proof summary,
html:root body.home main#poptani-cinema .poptani-story summary {
  counter-increment: pi-entry;
  grid-template-columns: var(--pi-num) minmax(0, 1fr) 1.5rem;
  column-gap: 1rem;
  padding: 1.75rem 0;
}

html:root body.home main#poptani-cinema .poptani-proof summary { align-items: start; }
html:root body.home main#poptani-cinema .poptani-story summary { align-items: baseline; }

html:root body.home main#poptani-cinema .poptani-proof summary::before,
html:root body.home main#poptani-cinema .poptani-story summary::before {
  content: counter(pi-entry, decimal-leading-zero);
  content: counter(pi-entry, decimal-leading-zero) / "";
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--pi-ink);
  font-family: var(--pi-numerals);
  font-size: clamp(2.125rem, 4.4vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
}

html:root body.home main#poptani-cinema .poptani-story summary::before { grid-row: 1; }

/* Caps labels leave the gold: gold is for titles only. */
html:root body.home main#poptani-cinema .poptani-proof summary .poptani-proof__value {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--pi-text);
}

html:root body.home main#poptani-cinema .poptani-proof summary .poptani-proof__label,
html:root body.home main#poptani-cinema .poptani-story summary h3 {
  grid-column: 2;
  color: var(--pi-title);
  font-family: "POPTANI Palanquin", "Helvetica Neue", Helvetica, sans-serif;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-wrap: pretty;
}

html:root body.home main#poptani-cinema .poptani-proof summary .poptani-proof__label {
  grid-row: 2;
  margin: .35rem 0 0;
}

html:root body.home main#poptani-cinema .poptani-story summary h3 {
  grid-row: 1;
  margin: 0;
}

/* Plus when closed, a true minus when open — same face, weight and width. */
html:root body.home main#poptani-cinema .poptani-proof summary::after,
html:root body.home main#poptani-cinema .poptani-story summary::after {
  content: "+";
  content: "+" / "";
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  color: var(--pi-text);
  font-family: "POPTANI Palanquin", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.625rem;
  font-weight: 200;
  line-height: 1.2;
  transform: none;
  transition: none;
}

html:root body.home main#poptani-cinema .poptani-proof summary::after { grid-row: 1 / span 2; }

html:root body.home main#poptani-cinema .poptani-proof details[open] summary::after,
html:root body.home main#poptani-cinema .poptani-story details[open] summary::after {
  content: "\2212";
  content: "\2212" / "";
  transform: none;
}

html:root body.home main#poptani-cinema .poptani-proof .poptani-proof__body,
html:root body.home main#poptani-cinema .poptani-story .poptani-story__body {
  max-width: 66ch;
  margin-left: calc(var(--pi-num) + 1rem);
  padding-bottom: 1.75rem;
}

/* The two subheadings under "Building the house" had no night colour and sat
   at 1.7:1 on the navy. They follow the body text tier in both modes now. */
html:root body.home main#poptani-cinema .poptani-story .poptani-story__body h4 {
  color: var(--pi-text);
}

@media (max-width: 900px) {
  html:root body.home main#poptani-cinema > .poptani-frame--ivory > .poptani-copy,
  html:root body.home main#poptani-cinema > .poptani-frame--two > .poptani-copy {
    width: auto;
    margin-inline: var(--pi-rail);
    padding-inline: 0;
  }
}

/* ── 09 · The ask ───────────────────────────────────────────────────────── */
html:root body.home main#poptani-cinema > section.poptani-frame.poptani-frame--three:last-child > .poptani-copy {
  width: auto !important;
  max-width: none;
  margin-inline: var(--pi-rail);
  border-top: 1px solid var(--pi-rule);
  padding: 1.75rem 0 clamp(5rem, 9vw, 8rem) !important;
  background: none;
  color: var(--pi-text);
}

html:root body.home main#poptani-cinema > section.poptani-frame.poptani-frame--three:last-child > .poptani-copy::before {
  counter-increment: pi-entry;
  content: counter(pi-entry, decimal-leading-zero);
  content: counter(pi-entry, decimal-leading-zero) / "";
  display: block;
  margin-bottom: clamp(2.5rem, 6vw, 5.5rem);
  color: var(--pi-ink);
  font-family: var(--pi-numerals);
  font-size: clamp(2.125rem, 4.4vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
}

html:root body.home main#poptani-cinema .poptani-frame--three .poptani-copy .poptani-heading.poptani-heading--final {
  max-width: 13em;
  color: var(--pi-ink);
  font-size: clamp(2.375rem, 6.2vw, 5.5rem);
  font-weight: 100;
  letter-spacing: -.03em;
  line-height: 1.04;
}

html:root body.home main#poptani-cinema .poptani-frame--three .poptani-copy .poptani-invitation {
  max-width: 66ch;
  color: var(--pi-text);
}

html:root body.home main#poptani-cinema .poptani-frame--three .poptani-copy .poptani-contact {
  max-width: 40rem;
  margin-top: 3rem;
  color: var(--pi-text);
}

html:root body.home main#poptani-cinema .poptani-frame--three .poptani-contact > label {
  margin-bottom: .625rem;
  color: var(--pi-text);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* One solid bar: the field and its Send are a single object. Black in day;
   at night black on navy is 1.3:1 and vanishes, so the bar inverts to bone. */
html:root body.home main#poptani-cinema .poptani-frame--three .poptani-contact .poptani-contact__row {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 4rem;
  border-bottom: 0;
  background: var(--pi-bar);
}

html:root body.home main#poptani-cinema .poptani-frame--three .poptani-contact .poptani-contact__row input[type="email"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 4rem;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  padding: 0 1.5rem;
  background: transparent;
  box-shadow: none;
  color: var(--pi-bar-ink);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.5;
}

html:root body.home main#poptani-cinema .poptani-frame--three .poptani-contact .poptani-contact__row input[type="email"]::placeholder {
  color: var(--pi-bar-placeholder);
  opacity: 1;
}

html:root body.home main#poptani-cinema .poptani-frame--three .poptani-contact .poptani-contact__row button {
  flex: none;
  width: auto;
  min-width: 0;
  min-height: 4rem;
  border: 0;
  border-left: 1px solid var(--pi-bar-rule);
  padding: 0 1.75rem;
  background: transparent;
  color: var(--pi-bar-ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

html:root body.home main#poptani-cinema .poptani-frame--three .poptani-contact .poptani-contact__row input[type="email"]:focus-visible,
html:root body.home main#poptani-cinema .poptani-frame--three .poptani-contact .poptani-contact__row button:focus-visible {
  outline: 2px solid var(--pi-bar-ink);
  outline-offset: -6px;
  box-shadow: none;
}

html:root body.home main#poptani-cinema .poptani-frame--three .poptani-contact .poptani-contact__note,
html:root body.home main#poptani-cinema .poptani-frame--three .poptani-contact .poptani-contact__status {
  color: var(--pi-text);
}

/* ── Closing band: the five principles as one quiet line ────────────────────
   Set as a sentence in the reading face with middle dots, on the page ground
   under a hairline, so they stop reading as a row of navigation links. The
   wordmark keeps its own face and colour from style.css. */
html:root body.home main#poptani-cinema > section.poptani-frame.poptani-frame--three:last-child > .poptani-closing-banner {
  display: block !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin-inline: var(--pi-rail);
  border-top: 1px solid var(--pi-rule);
  padding: 1.75rem 0 3.5rem !important;
  background: transparent;
  color: var(--pi-text);
}

html:root body.home main#poptani-cinema .poptani-frame--three .poptani-closing-banner .poptani-closing-banner__inner {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1fr);
  column-gap: var(--pi-gap);
  row-gap: 1rem;
  align-items: start;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  text-align: left;
  transform: none;
}

html:root body.home main#poptani-cinema .poptani-frame--three .poptani-closing-banner .poptani-closing-banner__wordmark {
  grid-column: 1;
  align-self: baseline;
  margin: 0;
}

html:root body.home main#poptani-cinema .poptani-frame--three .poptani-closing-banner .poptani-closing-banner__principles {
  grid-column: 2;
  align-self: baseline;
  display: block;
  width: auto;
  max-width: 66ch;
  margin: 0;
  padding: 0;
  color: var(--pi-text);
  font-family: "POPTANI Martel", Georgia, serif;
  font-size: .9375rem;
  line-height: 1.7;
  transform: none;
}

html:root body.home main#poptani-cinema .poptani-frame--three .poptani-closing-banner .poptani-closing-banner__principles li {
  display: inline;
  white-space: normal;
}

html:root body.home main#poptani-cinema .poptani-frame--three .poptani-closing-banner .poptani-closing-banner__principles li + li::before {
  content: "\00b7\0020";
  content: "\00b7\0020" / "";
  white-space: pre-wrap;
}

@media (max-width: 900px) {
  html:root body.home main#poptani-cinema .poptani-frame--three .poptani-closing-banner .poptani-closing-banner__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  html:root body.home main#poptani-cinema .poptani-frame--three .poptani-closing-banner .poptani-closing-banner__principles {
    grid-column: 1;
  }
}