/* roberttorres.film — matched to the live Squarespace site.

   Squarespace sizes the wordmark and the page inset FLUIDLY with the viewport, not
   in fixed pixels. Derived from two live measurements:
       font-size  25.072px @ vw 1512   and   24.916px @ vw 1486  ->  16px + 0.6vw
       inset      60px     @ vw 1512   and   59px     @ vw 1486  ->  4vw
       tracking   -0.50144px and -0.49832px                      ->  -0.02em
   Fixed px only matched at 1512 and drifted everywhere else, so these are fluid. */

:root {
  --ink: #1c1c1c;
  --bg: #fff;
  --inset: 4vw;
  --header-h: calc(19.2px + 4.72vw);
  --serif: "Times New Roman", Times, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, figure, figcaption, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------- header ---------- */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--inset);
  z-index: 10;
}

.site-title {
  font-size: calc(16px + 0.6vw);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; gap: 2vw; }

/* nav dropdowns (Directing / Cinematography → Narrative, Commercial) —
   desktop hover + tablet tap. Phones use the on-page filter row instead. */
.nav-item { position: relative; display: inline-flex; }
.nav-drop {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px 14px;
  background: var(--bg);
  border: 1px solid #e0e0e0;
  border-top: 0;
  min-width: 132px;
  z-index: 60;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop,
.nav-item.open .nav-drop { display: flex; }
.nav-drop a { font-size: 15px; line-height: 22px; text-decoration: none; }
.nav-drop a:hover { border-bottom: 1px solid var(--ink); }


.site-nav a {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  padding: 1.6px 0;
}

.site-nav a[aria-current="page"] { border-bottom: 1px solid var(--ink); }

.site-menu { display: none; }

/* ---------- layout ---------- */

main { padding: 0 var(--inset); }

.stack > * + * { margin-top: 52px; }

/* ---------- portfolio index (/directing1) ---------- */

.work-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: calc(var(--header-h) + 3.3vmax);
  padding-bottom: 13vmax;
}

/* Owner 2026-08-11: a narrow centred feed, not full-bleed tiles — three or
   four projects visible per screen on desktop. */
@media (min-width: 768px) {
  .work-list { max-width: 27vw; margin: 0 auto; gap: 34px; }
  .work-item figcaption {
    margin-top: 12px;
    margin-bottom: 2px;
    font-size: 16px;
    letter-spacing: -0.01em;
  }
}

/* Directing/Cinematography index rows: hairline-separated, image + title
   left, tech specs right (owner design 2026-08-11). */
.work-rows {
  max-width: 66vw;
  margin: 0 auto;
  padding-top: calc(var(--header-h) + 3.3vmax);
  padding-bottom: 15vmax;
  display: flex;
  flex-direction: column;
}
.work-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  padding: 40px 0;
  border-bottom: 1px solid #ccc;
  text-decoration: none;
}
.work-row:first-child { border-top: 1px solid #ccc; }
.wr-left { display: block; width: 34vw; flex: 0 0 auto; }
.wr-left img {
  display: block;
  width: 100%;
  height: calc(34vw * 9 / 16); /* explicit — flex + height attr beats aspect-ratio */
  object-fit: cover;
}
.wr-title {
  display: block;
  margin-top: 14px;
  font-size: calc(16px + 0.36vw);
  letter-spacing: -0.01em;
}
.wr-specs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  text-align: center;
  line-height: 24px;
  min-width: 0;
  /* match the image band so the specs centre on the image, not the row */
  height: calc(34vw * 9 / 16);
}
.wr-specs .k { font-style: italic; }
.wr-name { letter-spacing: -0.01em; }

@media (max-width: 767px) {
  /* Mobile scroll (owner 2026-08-11): no hairlines, no tech specs — image,
     then title, then the film type smaller in italics. Screenplay rows keep
     their lines (different component, untouched). */
  .work-rows { max-width: 100%; }
  .work-row { flex-direction: column; align-items: stretch; gap: 3px; padding: 0 0 44px; border-bottom: 0; }
  .work-row:first-child { border-top: 0; }
  .wr-left { width: 100%; }
  .wr-left img { height: calc(88vw * 9 / 16); }
  .wr-specs { text-align: center; height: auto; justify-content: flex-start; }
  .work-item figcaption { text-align: center; }
  .wr-title { text-align: center; }
  .wr-specs .wr-name { display: none; }
  .wr-specs .wr-rest { display: none; }
  .wr-specs .k { font-size: 14px; }
}

/* Block, not flex-column: as a column flex item the img's height comes from its
   height="…" attribute (flex content size), which beats aspect-ratio in every
   engine — tiles rendered 1080px tall after the SEO pass added dimensions. */
.work-item {
  display: block;
  text-decoration: none;
}

.work-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.work-item figcaption {
  margin-top: 20px;
  margin-bottom: calc(8px + 0.36vw);
  font-size: calc(16px + 0.72vw);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ---------- single project ----------
   All fluid, solved from live at two viewports (values as % of viewport width):
       text  left 27.2vw  width 22.5vw     (411/340 @1512, 404/334 @1486)
       media left 46.5vw  width 37.9vw     (703/573 @1512, 691/563 @1486)
   The two columns OVERLAP — text runs to 49.7vw while media starts at 46.5vw —
   because Squarespace's fluid engine lets grid areas intersect. So both children
   share one grid cell and are offset by margin rather than sitting in columns.
   Offsets are minus the 4vw that main already contributes as padding. */

.project {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 140px; /* was 96px — owner wants more air under the header */
  padding-bottom: 165px;
}

.project-text {
  grid-area: 1 / 1;
  margin-left: 23.2vw;
  /* was 22.5vw, which deliberately overlapped the media column by 3.2vw to
     match Squarespace — fine for short lines, but long specs lines (kind +
     year + format + camera) dove under the video. End before the media. */
  width: 19vw;
}

.project-media {
  grid-area: 1 / 1;
  margin-left: 42.5vw;
  width: 37.9vw;
}

.project-media img { width: 100%; height: auto; }

/* Image-variant project pages sit lower than the video ones and use a narrower
   media column. Live: text y=228 (vs 187), image y=218, width 506 = 34.05vw. */
.project--img { padding-top: 137px; padding-bottom: 277px; }
.project--img .project-media { margin-top: -10px; width: 34.05vw; }

.project p { margin: 0 0 24px; line-height: 1; }
/* Title sits directly over kind over credits — no gaps (owner 2026-08-11). */
.project-text p { margin: 0; line-height: 24px; }
/* Page text block: anchored just below the top of the media band
   (owner 2026-08-11: "not in the middle, a little below the top"). */
.project-text { align-self: start; margin-top: 24px; }
.pt-title { line-height: 24px; margin-bottom: 24px; font-weight: 700; }
.pt-rule { border: 0; border-top: 1px solid #ccc; width: 56px; margin: 14px 0; }
.project-text .pt-specs,
.project-text .pt-specs + p:not(.status) { font-style: italic; }
.project-text .pt-specs { margin-top: 10px; }
/* Kind labels stay in the markup (owner may bring them back) but hidden. */
.project-text .pt-kind { margin-top: 28px; display: none; }
/* Multi-video pages need no special casing: the uniform top anchor already
   sits the text against the first video. --fvh kept in markup, unused. */
.project .status { margin-top: 10px; }
.project .status--tight { margin-top: 0; }
.project .kind { font-style: italic; }
.project .status { font-weight: 700; }

.embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed--4x3 { aspect-ratio: 563 / 428; }  /* live measures 1.3154, not a true 4:3 */
.embed--cinema { aspect-ratio: 2.39 / 1; }

.project-nav {
  grid-area: 2 / 1;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 96px;
  font-size: 16px;
}
.project-nav a { text-decoration: none; }
.project-nav .spacer { visibility: hidden; }
.project-nav .label { display: block; margin-bottom: 6px; }

/* ---------- home ----------
   Live @1486: embed x 276 = 18.57vw, w 933 = 62.78vw, aspect 1.3159 (same as the
   project embeds). Caption x 644 = 43.34vw at a flat 16px — not the fluid size.
   Embed starts 2px above main's content box. */

.home { margin-top: -2px; padding-bottom: 214px; }
.home .embed { margin-left: 14.57vw; width: 62.78vw; aspect-ratio: 563 / 428; }
.home figcaption {
  margin-left: 39.34vw;
  margin-top: 10px;
  font-size: 16px;
  letter-spacing: normal;
  line-height: 24px;
}

/* ---------- about ----------
   Fluid, solved from live at 1486 (and cross-checked at 1512):
     text  x 174 = 11.71vw  (4vw main padding + 7.71vw)   width 563 = 37.89vw
     image x 853 = 57.40vw                                width 411 = 27.66vw
   Type: line-height 24px, 16px margins, rules centred in the text column.
   The image block starts 2px above main's content box. Social icon is 20px,
   centred in its own 220px cell (cx 284). */

.about {
  display: grid;
  grid-template-columns: 7.71vw 37.89vw 7.80vw 27.66vw;
  /* clear the fixed header — the portrait was riding up under the nav and
     covering the Directing tab (owner report 2026-08-11) */
  padding-top: var(--header-h);
  padding-bottom: 154px;
}

.about-text { grid-column: 2; grid-row: 1; padding-top: 40px; }
.about-media { grid-column: 4; grid-row: 1; margin-top: 0; }
.about-media img { width: 100%; height: auto; }

.about-text p { margin: 16px 0; line-height: 24px; }
.about-text .rule { text-align: center; }
.about-text > :first-child { margin-top: 0; }
.about-text .rule:last-of-type { margin-bottom: 0; }
.about-text .social-block { width: 220px; text-align: center; margin-top: 3px; }
.about-text .social { display: inline-block; line-height: 0; }
.about-text .social svg { width: 20px; height: 20px; fill: currentColor; }

@media (max-width: 767px) {
  .about {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    padding-bottom: 64px;
  }
  .about-text { grid-column: 1; grid-row: 2; padding-top: 0; }
  .about-media { grid-column: 1; grid-row: 1; margin-top: 0; }
  .about-media img { max-width: 411px; }
  .about-text .social-block { width: 100%; text-align: left; }
}

/* ---------- simple text pages (/cinematography) ----------
   Live @1486: single centred paragraph, x 576 = 38.76vw, w 334 = 22.48vw,
   y 260, line-height 24px, page height 757. */

.plain {
  margin-left: 34.76vw;
  width: 22.48vw;
  padding-top: 169px;
  padding-bottom: 473px;
  text-align: center;
  line-height: 24px;
}
.plain p { margin: 0; }

@media (max-width: 767px) {
  .plain { margin-left: 0; width: 100%; padding-top: 80px; padding-bottom: 160px; }
}

/* ---------- responsive ---------- */

@media (max-width: 767px) {
  :root {
    --inset: 6vw;
    --header-h: calc(37px + 12vw);
  }
  .site-header {
    height: var(--header-h);
    padding: 6vw;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0;
  }
  .site-title {
    font-size: 16px;
    line-height: 1.2;
  }
  .site-nav { display: none; }
  .site-menu {
    display: block;
    position: relative;
    width: 47px;
    height: 37px;
    margin: 0 0 0 auto;
    padding: 1px 6px;
    border: 0;
    background: transparent;
    color: var(--ink);
    appearance: none;
  }
  .burger-box {
    position: relative;
    display: flex;
    width: 35px;
    height: 35px;
  }
  .burger-line {
    position: absolute;
    left: 0;
    width: 35px;
    height: 1px;
    background: #777;
  }
  .burger-line--top { top: 7.5px; }
  .burger-line--middle { top: 17px; }
  .burger-line--bottom { top: 26.5px; }
  .work-list {
    padding-top: calc(var(--header-h) + 3.3vw);
    padding-bottom: 3.3vw;
  }
  .work-item figcaption {
    margin-bottom: calc(8px + 0.77908vw);
    font-size: calc(16px + 1.55815vw);
  }
  .project { padding-top: calc(var(--header-h) + 48px); row-gap: 36px; }
  .project-text { grid-area: 2 / 1; margin-left: 0; width: 100%; }
  .project-media { grid-area: 1 / 1; margin-left: 0; width: 100%; }
  .project-nav { grid-area: 3 / 1; }
  .project-text { margin-top: 0; text-align: center; }
  /* Mobile audit 2026-08-11: the 0-2-0 desktop rules for image-variant pages
     beat the 0-1-0 mobile resets - stills rendered as 34vw postage stamps
     with desktop paddings. Match specificity here. */
  .project--img { padding-top: calc(var(--header-h) + 48px); padding-bottom: 165px; }
  .project--img .project-media { margin-top: 0; width: 100%; }
  /* Long single words (GREYWIND, APARICIO) overflowed the 50% pagination
     columns and interlocked mid-screen: smaller type + emergency breaks. */

}

/* ---------- fluid engine ----------
   Faithful reproduction of Squarespace's per-page grid. Blocks carry the exact
   grid-area parsed from the original page, so positions are reproduced rather
   than approximated. Track structure matches theirs, including the trick of
   shrinking the gutter track by the gap so the gap doesn't push content inward:

     minmax(gutter - gap, 1fr)  repeat(24, minmax(0, cell-max))  minmax(gutter - gap, 1fr)

   At 1486 with gap 11 this yields cell = 46.42 and content starting at 59.44,
   so grid-area 1/10/9/18 resolves to x 519 w 448 in the captured geometry. */

.fe {
  --fe-gutter: 4vw;
  --fe-gap: 11px;
  --fe-mobile-gap: 11px;
  --fe-cell-max: calc((1500px - var(--fe-gap) * 23) / 24);
  --fe-container: min(1500px, calc(100vw - var(--fe-gutter) * 2));
  --fe-row: calc(var(--fe-container) * 0.0215);
  display: grid;
  grid-template-columns:
    minmax(calc(var(--fe-gutter) - var(--fe-gap)), 1fr)
    repeat(24, minmax(0, var(--fe-cell-max)))
    minmax(calc(var(--fe-gutter) - var(--fe-gap)), 1fr);
  column-gap: var(--fe-gap);
  row-gap: var(--fe-gap);
  grid-auto-rows: minmax(var(--fe-row), auto);
  /* a section reserves its full declared row count even where blocks don't reach,
     which is what creates the vertical rhythm between sections on the live site */
  grid-template-rows: repeat(var(--fe-rows, 1), minmax(var(--fe-row), auto));
  padding: var(--fe-pad-top, var(--fe-pad)) 0 var(--fe-pad-bottom, var(--fe-pad));
  align-content: center;
}

/* the first section additionally clears the fixed header: live puts its grid at
   y=225 = 125 (header) + 98 (section padding) + 2 */


.fe--nogap { --fe-gap: 0px; }
.fe--inset {
  width: calc(100% - var(--fe-gutter) * 2);
  margin-left: var(--fe-gutter);
  margin-right: var(--fe-gutter);
  --fe-container: min(1500px, calc(100vw - var(--fe-gutter) * 4));
}

.fe-b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: var(--fe-v, flex-start);
  position: relative;
}
.fe-b p { margin: 0 0 16px; line-height: 24px; }
/* live: h4 21.3496px = calc(16px + 0.36vw), weight 300, 0.02em, lh 1.235, mb 32 */
.fe-b h1, .fe-b h2, .fe-b h3, .fe-b h4 {
  font-size: calc(16px + 0.36vw);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.235;
  margin: 0 0 32px;
}
.fe-b h1 { font-size: calc(16px + 0.72vw); }
.fe-b h2 { font-size: calc(16px + 0.54vw); }
.fe-b p:last-child { margin-bottom: 0; }
/* alignment classes apply to headings too, not just paragraphs */
.fe-b .c { text-align: center; }
.fe-b .r { text-align: right; }
.fe-b strong { font-weight: 700; }
.fe-image {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fe-image > .fe-image { position: static; width: 100%; height: 100%; }
.fe-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.fe-b .embed { width: 100%; }
.fe-b--summary {
  gap: var(--fe-list-gap, 30px);
  align-items: flex-end;
}
.fe-b--summary > a {
  display: block;
  flex: 0 0 auto;
  width: var(--fe-list-image-size, 50%);
}
.fe-b--summary img {
  display: block;
  aspect-ratio: var(--fe-list-aspect, 1.5);
  object-fit: cover;
}
.vertical-line {
  width: 1px;
  height: 100%;
  min-height: 100%;
  align-self: center;
  background: currentColor;
}
.fe-social { align-self: center; line-height: 0; }
.fe-social svg { width: 20px; height: 20px; fill: currentColor; }
.fe-button {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 28px;
  border: 1px solid currentColor;
  text-decoration: none;
}

/* Fluid sections own the fixed-header clearance and their full-width grid. */
main:has(.fe) { padding: 0; }

@media (max-width: 767px) {
  .fe {
    --fe-mobile-gutter: 6vw;
    --fe-mobile-cell-max: calc((1500px - var(--fe-mobile-gap) * 7) / 8);
    grid-template-columns:
      minmax(calc(var(--fe-mobile-gutter) - var(--fe-mobile-gap)), 1fr)
      repeat(8, minmax(0, var(--fe-mobile-cell-max)))
      minmax(calc(var(--fe-mobile-gutter) - var(--fe-mobile-gap)), 1fr);
    grid-template-rows: repeat(var(--fe-mobile-rows, 1), minmax(24px, auto));
    grid-auto-rows: minmax(24px, auto);
    column-gap: var(--fe-mobile-gap);
    row-gap: var(--fe-mobile-gap);
  }
  .fe-b {
    grid-area: var(--fe-mobile-area) !important;
    justify-content: var(--fe-v-mobile, var(--fe-v, flex-start));
    margin: 0;
    padding: 0;
  }
}


/* pagination, live spec: h2 title 37.3984px = calc(16px + 1.44vw), -0.02em,
   chevron to the left of prev / right of next, and the Previous/Next words are
   .visually-hidden on the live site rather than displayed. */

.item-pagination {
  display: flex;
  justify-content: space-between;
  padding: 3vw var(--inset);
}
.item-pagination a { display: flex; align-items: center; gap: 25px; text-decoration: none; }
.item-pagination .t {
  font-size: calc(16px + 1.44vw);
  letter-spacing: -0.02em;
  line-height: 1;
}
/* live's arrow is 18×32; its 25px title gap makes a 43px icon region overall */
.item-pagination svg { width: 18px; height: 32px; flex: 0 0 18px; }
.item-pagination svg polyline { stroke: currentColor; fill: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Tablet band (iPad portrait/landscape): the desktop columns overlap here —
   16px type in a 22.5vw column dives under the media, and long pagination
   titles collide. Widen/left-shift the text so it ends before the media
   column, and let pagination titles wrap. (Tablet audit 2026-08-11.) */
@media (min-width: 768px) and (max-width: 1149px) {
  .project-text { margin-left: 2vw; width: calc(40.5vw - 24px); }
  .item-pagination { gap: 32px; }
  .item-pagination > a { max-width: 46%; min-width: 0; }
  .item-pagination .t { white-space: normal; }
}

@media (max-width: 767px) {
  .item-pagination {
    padding: 3vw 6vw;
  }
  .item-pagination > a,
  .item-pagination > span {
    flex: 0 0 50%;
    width: 50%;
    min-width: 0;
  }
  .item-pagination > a:first-child {
    justify-content: flex-start;
    text-align: left;
  }
  .item-pagination > a:last-child {
    justify-content: flex-end;
    text-align: right;
  }
  .item-pagination .t {
    display: block;
    min-width: 0;
    white-space: normal;
    /* long single words (GREYWIND, APARICIO) interlocked at 16px+3.1vw:
       smaller type + emergency breaks (mobile audit 2026-08-11) */
    font-size: calc(12px + 2vw);
    overflow-wrap: anywhere;
  }
}

/* ---------- v2: self-hosted media, stills stacks, screenplays ---------- */

.embed--file { background: #000; }
.embed--file video { position: absolute; inset: 0; width: 100%; height: 100%; }
.project-media > * + * { margin-top: 28px; }

.stills { display: flex; flex-direction: column; gap: 28px; }
.stills img { width: 100%; height: auto; }
/* Stills pages: centred gallery — text header on top, one column of images.
   The side-by-side project layout overlapped text with portrait photos. */
.project--stills { display: block; }
.project--stills .project-text {
  margin-left: 0;
  width: 100%;
  text-align: center;
  margin-bottom: 56px;
}
.project--stills .project-media {
  margin-left: auto;
  margin-right: auto;
  width: min(52vw, 780px);
}
/* Portrait photo sets read oversized at full column width — pull them in. */
.project--portrait .project-media { width: min(36vw, 540px); }
.project--stills .project-nav { margin-top: 72px; }

.script-list {
  padding-top: calc(var(--header-h) + 3.3vmax);
  padding-bottom: 16vmax;
  display: flex;
  flex-direction: column;
}
.script-list { max-width: 620px; margin: 0 auto; }
.script-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 0;
  border-bottom: 1px solid #ccc;
  text-decoration: none;
  text-align: center;
}
.script-list img {
  width: 100%;
  height: 266px; /* 21:9 of the 620px column; explicit because flex + the
                    height attribute beats aspect-ratio */
  object-fit: cover;
  margin-top: 10px;
}
@media (max-width: 767px) {
  .script-list img { height: 37.7vw; }
}
.script-list a:first-child { border-top: 1px solid #ccc; }
.script-list .t { font-size: calc(16px + 1.44vw); letter-spacing: -0.02em; line-height: 1; }
.script-list .k { font-style: italic; white-space: nowrap; }

.script {
  padding-top: calc(var(--header-h) + 3.3vmax);
  padding-bottom: 220px;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.script p { margin: 0 0 16px; line-height: 24px; }
.script .kind { font-style: italic; }
.script-head { margin-bottom: 40px; }
.script-still { width: 100%; height: auto; margin: 0 0 40px; }
.script-head p:first-child {
  font-size: calc(16px + 1.44vw);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 20px;
}
.package-item { border-top: 1px solid #ccc; padding: 22px 0 8px; }
.package-item h2 { font-size: 16px; font-weight: 400; letter-spacing: 0.04em; margin: 0 0 12px; }
.package-item .placeholder { color: #777; }
.package-request { border-top: 1px solid #ccc; padding-top: 22px; margin-top: 8px; }

@media (max-width: 767px) {
  .project--stills .project-media { margin-left: 0; width: 100%; }
  /* the kind tag stays on mobile, smaller (owner 2026-08-11) */
  .script-list .k { font-size: 14px; }
}

/* ---------- section vertical rhythm ----------
   Squarespace's fixed presets are vmax-based: at the 1486px audit viewport they
   resolve to 49.038 / 98.076 / 147.114px. Custom values are captured per
   section and emitted by build.py as calc(customSectionHeight * 0.1vmax).
   The first section also clears the fixed header — 89.3359px on this site. */

.fe--h-small  { --fe-pad: 3.3vmax; min-height: 33vh; }
.fe--h-medium { --fe-pad: 6.6vmax; min-height: 66vh; }
.fe--h-large  { --fe-pad: 9.9vmax; min-height: 99vh; }
.fe--h-custom {
  --fe-pad-top: var(--fe-custom-pad-top, 0px);
  --fe-pad-bottom: var(--fe-custom-pad-bottom, 0px);
}

main > .fe:first-of-type,
main > *:first-child.fe {
  --fe-pad-top: calc(var(--header-h) + var(--fe-pad));
}

main > .fe--h-custom:first-of-type,
main > *:first-child.fe--h-custom {
  --fe-pad-top: calc(var(--header-h) + var(--fe-custom-pad-top, 0px));
}

/* Inset Squarespace sections add one site gutter below the grid. */
main > .fe--inset:last-child { padding-bottom: var(--fe-gutter); }

/* ---------- mobile menu overlay ----------
   Measured from live at 390x844 with the burger tapped:
     overlay  .header-menu-bg  full-screen rgb(0,0,0), body scroll locked
     links    rgb(250,250,250) Times 33.15px (= 8.5vw), line-height 1,
              ~2.3px gaps, x = 35px (= 8.97vw), block centred in the area
              below the header (first link y=412 at 844h)
     burger becomes an X in place; wordmark flips light. */

.menu-overlay { display: none; }

@media (max-width: 767px) {
  html.menu-open, html.menu-open body { overflow: hidden; }

  /* iOS Safari paints the status-bar / home-indicator strips from the DOCUMENT
     background, not from fixed overlays — so fade the document itself to black
     in sync with the overlay, or those strips stay white until Safari repaints
     at the end of the animation (visible edge lag on iPhone). */
  html, body {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  html.menu-open, html.menu-open body { background-color: rgb(0, 0, 0); }

  /* Always in the render tree on mobile so it can animate. Live measured:
     opacity 0.4s cubic-bezier(0.4,0,0.2,1), visibility held 0.6s; sampled curve
     0 -> .51@142ms -> .82@214ms -> 1@~400ms. */
  .menu-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgb(0, 0, 0);
    flex-direction: column;
    justify-content: center;
    padding-top: 86px;      /* centres the block in the space below the header */
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  html.menu-open .menu-overlay {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .menu-overlay nav { display: flex; flex-direction: column; gap: 2.3px; align-items: center; text-align: center; }
  .menu-overlay a {
    color: rgb(250, 250, 250);
    font-family: var(--serif);
    font-size: 8.5vw;
    line-height: 1;
    text-decoration: none;
  }

  html.menu-open .site-header { z-index: 300; }
  .site-title { transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
  html.menu-open .site-title { color: rgb(250, 250, 250); }
  /* burger morph: live buns transition 0.25s cubic-bezier(0.2, 0.6, 0.3, 1) */
  .burger-line {
    transition: transform 0.25s cubic-bezier(0.2, 0.6, 0.3, 1),
                top 0.25s cubic-bezier(0.2, 0.6, 0.3, 1),
                opacity 0.25s cubic-bezier(0.2, 0.6, 0.3, 1),
                background 0.25s cubic-bezier(0.2, 0.6, 0.3, 1);
  }
  html.menu-open .burger-line { background: rgb(250, 250, 250); }
  html.menu-open .burger-line--top { top: 17px; transform: rotate(45deg); }
  html.menu-open .burger-line--middle { opacity: 0; }
  html.menu-open .burger-line--bottom { top: 17px; transform: rotate(-45deg); }
}