/* Frame and Pheras: off-white paper, black ink and one red accent. Playfair Display for headings (big italics),
   Manrope for text, IBM Plex Mono for captions, frame numbers and labels. Change the colours and fonts here;
   base.css reads these variables. */
:root {
  --bg: #F5F2EC;
  --surface: #FBFAF7;
  --soft: #ECE7DE;
  --ink: #141414;
  --muted: #57524A;
  --line: #DCD5C8;
  --line-strong: #A9A091;
  --brand: #141414;
  --brand-hover: #C8102E;
  --brand-ink: #F5F2EC;
  --brand-text: #141414;
  --red: #C8102E;
  --red-text: #B00E28;
  --eyebrow: #B00E28;
  --focus: #C8102E;
  --head: "Playfair Display", Georgia, "Times New Roman", serif;
  --body: "Manrope", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius: 2px;
  --radius-lg: 3px;
  --btn-radius: 0;
  --wrap: 1240px;
  --out-bg: #141414;
  --out-ink: #F5F2EC;
  --out-accent: #FF6B6B;
  --out-btn: #C8102E;
  --out-btn-ink: #FFFFFF;
  --out-warn: #FFB3A8;
  --ok-on-dark: #9FE0B2;
}
h1, h2, h3 { font-weight: 500; letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--red); }
.mono, .eyebrow { font-family: var(--mono); }
.mono { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.eyebrow { font-weight: 500; letter-spacing: .14em; }
.btn { font-weight: 700; letter-spacing: .02em; }
.btn-primary:hover { color: #fff; }
.btn-ghost { border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.text-link { font-family: var(--mono); font-weight: 500; font-size: .86rem; letter-spacing: .04em; text-transform: uppercase; }
.lede { color: var(--muted); }
.sec-title { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.05; }
.price-note a, .about-intro a { color: var(--red-text); }

/* numbered section labels: "01 —— What we shoot" */
.sec-no { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font: 500 .78rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sec-no span { color: var(--red-text); }
.sec-no::after { content: ""; flex: 1; height: 1px; background: var(--ink); opacity: .85; }
.sec-no span::after { content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 14px; vertical-align: middle; background: var(--ink); }

/* announce strip */
.announce { font: 500 .76rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: var(--bg); }
.announce span { color: #FF8A8A; }

/* header */
.header { background: color-mix(in srgb, var(--bg) 95%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ink); }
.logo { display: flex; align-items: center; gap: 10px; min-height: 40px; text-decoration: none; color: var(--ink); }
.logo-mark { width: 40px; height: 40px; flex: none; }
.logo span { display: grid; line-height: 1.05; }
.logo b { font: 600 1.35rem var(--head); letter-spacing: -.01em; white-space: nowrap; }
.logo b i { font-weight: 400; color: var(--red); }
.logo small { margin-top: 3px; font: 500 .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nav a { font-weight: 600; font-size: .95rem; color: var(--ink); gap: 6px; border-radius: 0; }
.nav-no { font: 500 .66rem var(--mono); color: var(--muted); }
.nav a:hover { color: var(--red-text); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--red); }
.nav a[aria-current="page"] .nav-no { color: var(--red-text); }
@media (max-width: 1180px) and (min-width: 961px) { .nav a { padding: 8px 7px; font-size: .9rem; } .nav-no { display: none; } }
@media (max-width: 960px) { .nav-open .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--red); padding-left: 14px; } }
@media (max-width: 520px) { .header-cta { display: none; } }
@media (max-width: 420px) { .logo small { display: none; } .logo b { font-size: 1.12rem; } .logo-mark { width: 34px; height: 34px; } }
.nav-toggle { border-color: var(--ink); border-radius: 0; color: var(--ink); }

/* film frames: the drawn "photographs" */
.ph { margin: 0; }
.ph-film { position: relative; padding: 16px 7px; background: #141414; }
.ph-film::before, .ph-film::after { content: ""; position: absolute; left: 6px; right: 6px; height: 6px; background: repeating-linear-gradient(90deg, transparent 0 5px, #EDE7DC 5px 13px, transparent 13px 18px); opacity: .9; }
.ph-film::before { top: 5px; }
.ph-film::after { bottom: 5px; }
.ph-film svg { width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 3); filter: saturate(.86) contrast(1.02); }
.ph-film > svg { box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.ph-cap { margin-top: 8px; font: 500 .7rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
.ph-cap span { color: var(--red-text); }

/* hero: issue line, big italic headline and a collage */
.hero { padding-block: clamp(22px, 4vw, 44px) clamp(48px, 7vw, 96px); }
.issue { display: flex; flex-wrap: wrap; gap: 6px 28px; justify-content: space-between; padding-bottom: 12px; border-bottom: 3px double var(--ink); font: 500 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.issue span:first-child { color: var(--red-text); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: clamp(28px, 4vw, 52px); }
@media (max-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { font-size: clamp(2.9rem, 7.4vw, 6rem); line-height: .96; letter-spacing: -.025em; font-weight: 500; }
.hero h1 em { display: block; }
.hero .lede { margin: 24px 0 28px; max-width: 46ch; }
.hero-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 34px 0 0; border-top: 1px solid var(--ink); }
.hero-meta div { padding: 12px 12px 0 0; display: flex; flex-direction: column-reverse; gap: 2px; }
.hero-meta div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.hero-meta dt { font: 500 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero-meta dd { margin: 0; font: italic 500 clamp(1.5rem, 3vw, 2rem)/1 var(--head); }
.collage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: start; }
.collage .c1 { grid-column: 1 / 5; grid-row: 1 / 3; --ar: 4 / 3; }
.collage .c2 { grid-column: 5 / 7; grid-row: 1; --ar: 4 / 3; transform: rotate(1.4deg); }
.collage .c3 { grid-column: 5 / 7; grid-row: 2; --ar: 4 / 3; }
.collage .c4 { grid-column: 1 / 4; --ar: 16 / 9; transform: rotate(-1.2deg); }
.collage .c5 { grid-column: 4 / 7; --ar: 16 / 9; }
@media (max-width: 600px) {
  .collage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .collage .c1 { grid-column: 1 / -1; grid-row: auto; }
  .collage .c2, .collage .c3, .collage .c4, .collage .c5 { grid-column: auto; grid-row: auto; margin-top: 0; --ar: 1 / 1; }
  .collage .c5 { display: none; }
  .collage .c4 { grid-column: 1 / -1; --ar: 16 / 9; }
}
@media (prefers-reduced-motion: no-preference) {
  .collage .ph { animation: develop .9s ease-out both; }
  .collage .c2 { animation-delay: .12s; } .collage .c3 { animation-delay: .24s; } .collage .c4 { animation-delay: .36s; } .collage .c5 { animation-delay: .48s; }
  @keyframes develop { from { opacity: 0; filter: brightness(1.6) saturate(0); } to { opacity: 1; filter: none; } }
}

/* the events index */
.ix { list-style: none; border-top: 1px solid var(--ink); }
.ix li { display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px 28px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.ix-no { font: 500 .8rem var(--mono); color: var(--red-text); }
.ix h3 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-style: italic; font-weight: 400; }
.ix p { color: var(--muted); }
.ix-meta { display: grid; gap: 2px; font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ix-meta span:first-child { color: var(--ink); }
@media (max-width: 820px) { .ix li { grid-template-columns: 44px minmax(0, 1fr); } .ix li p { grid-column: 2; } }

/* contact sheet */
.contact-sheet { background: var(--soft); }
.sheet { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 26px 18px; }
.sheet-who { margin-top: 4px; font-size: .92rem; color: var(--muted); }
.sheet-who b { display: block; font: italic 500 1.2rem var(--head); color: var(--ink); }

/* stats */
.stats-band { padding-block: clamp(30px, 4vw, 52px); border-block: 1px solid var(--ink); }
.stats div { border-left: 1px solid var(--line); }
.stats div:first-child { border-left: 0; }
.stats dd { font-style: italic; font-weight: 500; }
.stats dd, .numbers-band .stats dd { color: var(--ink); }
.stats dt { font: 500 .72rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.numbers-band { background: var(--soft); border-block: 1px solid var(--ink); }

/* films */
.films { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 40px 28px; }
.films.is-two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.film { display: grid; gap: 14px; align-content: start; }
.film-poster { position: relative; overflow: hidden; background: #000; padding-block: 7%; }
.film-poster svg { width: 100%; height: auto; aspect-ratio: 2.1 / 1; filter: saturate(.8) brightness(.78); }
.film-play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; transform: translate(-50%, -50%); color: #fff; }
.film-play svg { width: 100%; height: 100%; aspect-ratio: 1; filter: none; }
.film-dur { position: absolute; right: 10px; bottom: 6px; font: 500 .72rem var(--mono); color: #fff; letter-spacing: .06em; }
.film-title { position: absolute; left: 12px; bottom: 4px; max-width: 70%; font: italic 500 clamp(.95rem, 2vw, 1.15rem)/1.2 var(--head); color: #fff; }
.film-body { display: grid; gap: 6px; }
.film-body .mono { color: var(--red-text); }
.film-body h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-style: italic; font-weight: 500; }
.film-who { font-weight: 700; font-size: .92rem; }
.film-body p:last-child { color: var(--muted); }

/* packages on the home page */
.pk-band { background: var(--surface); border-block: 1px solid var(--line); }
.presets { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); border-top: 1px solid var(--ink); }
.presets > li { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px clamp(18px, 2.4vw, 30px); border-bottom: 1px solid var(--line); }
.presets > li + li { border-left: 1px solid var(--line); }
@media (max-width: 900px) { .presets > li + li { border-left: 0; } }
.presets > li.is-featured { background: var(--bg); box-shadow: inset 0 3px 0 var(--red); }
.presets .pk-flag { position: static; align-self: start; padding: 2px 8px; border-radius: 0; background: var(--red); color: #fff; font: 500 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.presets h3 { font-size: 2.2rem; font-style: italic; font-weight: 500; }
.pr-for { color: var(--muted); }
.pr-price b { font: 600 clamp(1.7rem, 3vw, 2.1rem) var(--head); font-variant-numeric: tabular-nums; }
.pr-price .mono { color: var(--muted); }
.pr-list { list-style: none; display: grid; gap: 6px; margin-bottom: 8px; font-size: .95rem; }
.pr-list li { padding-left: 18px; position: relative; }
.pr-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--red); }
.presets .btn { margin-top: auto; align-self: start; }

/* quotes */
.quotes-band { background: var(--soft); }
.quotes li { border-radius: 0; background: transparent; border: 0; border-top: 1px solid var(--ink); padding: 22px 0 0; }
.quotes blockquote { font: italic 400 clamp(1.15rem, 2vw, 1.35rem)/1.45 var(--head); }
.quotes blockquote p::before { content: "“"; display: block; font: 400 3.4rem/.7 var(--head); color: var(--red); margin-bottom: 4px; }
.q-by { font: 500 .72rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* cards, packages, gallery, steps (shared components) */
.card-item, .steps li, .values li, .card, .done { border-radius: 0; }
.values li { background: transparent; border: 0; border-top: 1px solid var(--ink); padding: 18px 0 0; }
.values h3 { font-style: italic; font-size: 1.4rem; }
.g-filters button { border-radius: 0; font: 500 .78rem var(--mono); letter-spacing: .08em; text-transform: uppercase; border-color: var(--ink); background: transparent; }
.g-filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.g-grid { gap: 34px 22px; }
.g-item figure { border: 0; border-radius: 0; background: transparent; }
.g-item figcaption { padding: 6px 0 0; }
.g-item figcaption b { font: italic 500 1.25rem var(--head); }
.tm-art { border-radius: 0; }
.team h3 { font-style: italic; font-size: 1.4rem; }
.tm-role { font: 500 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red-text); }
.about-art { border-radius: 0; overflow: visible; }
.about-hero { padding-bottom: clamp(32px, 4vw, 56px); }
.about-grid h1 em { color: var(--red); }

/* inner pages */
.page-head { border-bottom: 1px solid var(--ink); margin-bottom: clamp(28px, 4vw, 48px); }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 500; line-height: 1; letter-spacing: -.02em; max-width: 18ch; }
.soft-band { background: var(--soft); }
.narrow { max-width: 860px; }
.data-table { background: var(--surface); }
.data-table thead th { font-family: var(--mono); font-weight: 500; }
.data-table th[scope="row"] { font: italic 500 1.08rem var(--head); }
.proc { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); column-gap: 40px; border-top: 1px solid var(--ink); }
.proc li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.proc-no { font: italic 500 2rem/1 var(--head); color: var(--red); }
.proc h3 { font-size: 1.35rem; margin-bottom: 6px; }
.proc p { color: var(--muted); }
.tl-when { font-family: var(--mono); font-weight: 500; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--red-text); }
.tl-what::before { border-radius: 0; background: var(--red); box-shadow: 0 0 0 4px var(--soft); }
.tl li::before { background: var(--ink); width: 1px; }
.tl-what h3 { font-style: italic; font-size: 1.35rem; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(28px, 5vw, 64px); }
.two-col .sec-title { font-size: clamp(1.5rem, 3vw, 2rem); }
.pay { list-style: none; display: grid; border-top: 1px solid var(--ink); }
.pay li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pay b { font: italic 500 1.9rem/1 var(--head); color: var(--red); }
.faq-index a { border-radius: 0; font: 500 .78rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.faq-group h2 { font-style: italic; }
.incl { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 24px; }
.incl li { border-top: 1px solid var(--ink); padding-top: 16px; }
.incl h3 { font-style: italic; font-size: 1.3rem; margin-bottom: 6px; }
.incl p { color: var(--muted); }
.empty h1 em { color: var(--red); }

/* package builder */
.tool-step { border-radius: 0; border-color: var(--line); }
.tool-step > h2, fieldset.tool-step > legend { font: 500 1.35rem var(--head); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
fieldset.tool-step > legend .hint { font: 400 .85rem var(--body); color: var(--muted); }
.step-no { font: 500 .78rem var(--mono); color: var(--red-text); letter-spacing: .08em; }
.preset-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.preset-btn { display: grid; gap: 4px; align-content: start; text-align: left; min-height: 48px; padding: 14px 16px; border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); cursor: pointer; }
.preset-btn b { font: italic 600 1.3rem var(--head); }
.preset-btn small { color: var(--muted); font-size: .84rem; line-height: 1.35; }
.preset-btn .mono { margin-top: 4px; }
.preset-btn:hover { box-shadow: inset 0 -3px 0 var(--red); }
.preset-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.preset-btn[aria-pressed="true"] small { color: #CFC8BC; }
.preset-btn[aria-pressed="true"] .mono { color: #FF8A8A; }
.evs { display: grid; border-top: 1px solid var(--ink); }
.ev { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ev-on { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; min-height: 44px; }
.ev-on input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--red); flex: none; }
.ev-on span { display: grid; }
.ev-on b { font: italic 500 1.25rem/1.2 var(--head); }
.ev-on small { font: 500 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ev.is-off .ev-on b { color: var(--muted); }
.is-off .stepper, .is-off .seg, [data-cine-row].is-off { opacity: .4; }
.ev-hrs .input { width: 64px; }
.stepper button { border-radius: 0; border-color: var(--ink); background: transparent; }
.stepper button:disabled { cursor: not-allowed; }
.seg { display: inline-flex; border: 1.5px solid var(--ink); background: var(--surface); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 42px; padding: 0 12px; font: 500 .74rem var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.seg input:checked + span { background: var(--ink); color: var(--bg); }
.seg input[value="film"]:checked + span { background: var(--red); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--red); outline-offset: -3px; }
@media (max-width: 640px) { .ev { grid-template-columns: auto minmax(0, 1fr); } .ev-on { grid-column: 1 / -1; } .seg { justify-self: end; } }
@media (max-width: 380px) { .seg span { padding: 0 8px; font-size: .68rem; } .ev-hrs button { width: 40px; height: 40px; } .ev-hrs .input { width: 54px; } }
.included { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--soft); font-size: .95rem; }
.included .ic { color: var(--red); margin-top: 1px; }
.album { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 12px 0; border-block: 1px solid var(--line); }
.album .stepper-row { flex: 0 1 auto; gap: 8px 14px; }
.opt-box { border-radius: 0; }
.opt-box em { color: var(--red-text); font-family: var(--mono); font-weight: 500; }
.opt input:checked + .opt-box { border-color: var(--ink); background: var(--surface); box-shadow: inset 3px 0 0 var(--red), inset 0 0 0 1px var(--ink); }
.tool-out { border-radius: 0; gap: 16px; }
.tool-out .eyebrow { color: #FF8A8A; }
.sum-total { font-style: italic; font-weight: 500; color: #fff; }
.sum-final div:nth-child(3) dt, .sum-final div:nth-child(3) dd { font-weight: 800; opacity: 1; color: #fff; }
.sum-final div:nth-child(4) dd { color: var(--out-accent); }
.dates { border-top: 1px solid rgba(255,255,255,.2); padding-top: 12px; }
.dates .mono { color: #CFC8BC; margin-bottom: 8px; }
.dates ol { list-style: none; display: grid; gap: 6px; font-size: .92rem; }
.dates li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.dates li span { opacity: .85; }
.dates li b { font-family: var(--mono); font-weight: 500; font-size: .84rem; }
.dates-empty { opacity: .8; }
.tool-out .btn-primary:hover { background: #A50D25; }
.tool-out .btn.is-disabled { opacity: .45; cursor: not-allowed; }
.tool-out .btn { border-radius: 0; }

/* CTA + footer */
.cta-band { padding-block: clamp(52px, 7vw, 96px); background: var(--bg); border-top: 1px solid var(--ink); }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 26px 40px; align-items: end; }
@media (max-width: 820px) { .cta-band .wrap { grid-template-columns: minmax(0, 1fr); } }
.cta-band h2 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); line-height: 1; letter-spacing: -.02em; }
.cta-band h2 em { display: block; }
.cta-band p:not(.sec-no) { margin-top: 14px; max-width: 54ch; color: var(--muted); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.footer { background: var(--ink); color: #D9D3C8; --footer-line: rgba(255,255,255,.16); }
.f-mast { font: 500 clamp(2.6rem, 9vw, 7.4rem)/.95 var(--head); letter-spacing: -.03em; color: var(--bg); padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.2); }
.f-mast i { font-weight: 400; color: #FF6B6B; }
.footer h2 { color: #fff; font-family: var(--mono); font-weight: 500; }
.f-about { max-width: 36ch; }
.footer a:hover { color: #fff; }
.footer .credit a { color: #fff; }
.wa-float { border-radius: 0; }