/* HAIFOTO components. Every colour, size step, duration and easing comes from tokens.css; this sheet holds layout and states. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
[data-theme] { color: var(--ink); }
[data-theme="cinema"] { color-scheme: dark; }
[data-theme="paper"] { color-scheme: light; }
.hf-page, .hf-section, .hf-themed { background: var(--surface); color: var(--ink); }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, h4, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--surface); }
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
[hidden] { display: none !important; }
.hf-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.no-accent { --record: var(--ink); --on-record: var(--surface); }

/* ---------- type: the token classes, made uppercase and fluid ---------- */
.display-xl, .display-l, .display-m, .display-s, .title, .title-s { text-transform: uppercase; font-kerning: normal; font-synthesis: none; }
.display-xl { font-size: var(--fluid-display-xl); }
.display-l { font-size: var(--fluid-display-l); }
.display-m { font-size: var(--fluid-display-m); }
.display-s { font-size: var(--fluid-display-s); }
.quote-l { font-size: var(--fluid-quote-l); }
.lede { font-size: var(--fluid-lede); line-height: 1.4; }
.label, .meta-s { text-transform: uppercase; }
.meta, .meta-s, .slate { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-muted); }
.subtle { color: var(--ink-subtle); }
.measure { max-width: 34em; }
.measure-s { max-width: 24em; }
.prose a, a.inline { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.prose a:hover, a.inline:hover { text-decoration-thickness: 2px; }

/* ---------- layout ---------- */
.hf-page { container: page / inline-size; overflow-x: clip; }
.hf-wrap { width: 100%; max-width: calc(var(--grid-max) + 2 * var(--grid-margin)); margin-inline: auto; padding-inline: var(--grid-margin); }
.hf-grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); }
.hf-section { padding-block: var(--space-9); position: relative; }
.hf-section--flush { padding-block: 0; }
.hf-section--tight { padding-block: var(--space-8); }
.hf-rule { border: 0; border-top: var(--border-hair) solid var(--line); margin: 0; }
.hf-stack > * + * { margin-top: var(--space-5); }
.hf-stack--s > * + * { margin-top: var(--space-2); }
.hf-eyebrow { display: flex; gap: var(--space-3); align-items: baseline; font-family: var(--font-mono); font-size: 13px; line-height: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); }
.hf-eyebrow b { font-weight: 500; color: var(--ink); }
.hf-head { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: end; margin-bottom: var(--space-7); }
.hf-head > .hf-eyebrow { grid-column: 1 / 4; align-self: start; padding-top: 0.6em; }
.hf-head > h2, .hf-head > h1 { grid-column: 4 / 13; }
.hf-head > .hf-head__aside { grid-column: 10 / 13; justify-self: end; }
.hf-head--split > h2 { grid-column: 4 / 10; }
.hf-head:has(> .hf-head__aside) > h2 { grid-column: 4 / 10; }
.hf-grid > .hf-eyebrow { grid-column: 1 / 4; align-self: start; padding-top: 0.6em; }

/* ---------- crop marks and frame lines ---------- */
[data-crop] { position: relative; --crop: var(--ink-subtle); --crop-len: 14px; --crop-gap: 6px; }
.hf-crop { position: absolute; width: 0; height: 0; pointer-events: none; }
.hf-crop::before, .hf-crop::after { content: ""; position: absolute; background: var(--crop); }
.hf-crop::before { width: var(--crop-len); height: 1px; }
.hf-crop::after { width: 1px; height: var(--crop-len); }
.hf-crop--tl { top: 0; left: 0; } .hf-crop--tl::before { right: var(--crop-gap); top: 0; } .hf-crop--tl::after { bottom: var(--crop-gap); left: 0; }
.hf-crop--tr { top: 0; right: 0; } .hf-crop--tr::before { left: var(--crop-gap); top: 0; } .hf-crop--tr::after { bottom: var(--crop-gap); right: 0; }
.hf-crop--bl { bottom: 0; left: 0; } .hf-crop--bl::before { right: var(--crop-gap); bottom: 0; } .hf-crop--bl::after { top: var(--crop-gap); left: 0; }
.hf-crop--br { bottom: 0; right: 0; } .hf-crop--br::before { left: var(--crop-gap); bottom: 0; } .hf-crop--br::after { top: var(--crop-gap); right: 0; }
.hf-framelines { position: relative; }
.hf-framelines::after { content: ""; position: absolute; inset: 8%; border: var(--border-hair) solid var(--on-frame-muted); opacity: 0.5; pointer-events: none; }

/* ---------- film frames ---------- */
.hf-frame { position: relative; display: block; background: var(--frame); color: var(--on-frame); aspect-ratio: var(--ratio-wide); overflow: hidden; }
.hf-frame--scope { aspect-ratio: var(--ratio-scope); }
.hf-frame--vertical { aspect-ratio: var(--ratio-vertical); }
.hf-frame--feed { aspect-ratio: var(--ratio-feed); }
.hf-frame--square { aspect-ratio: var(--ratio-square); }
.hf-frame--fill { aspect-ratio: auto; height: 100%; }
.hf-frame > .hf-art, .hf-frame > img, .hf-frame > video, .hf-frame__pic > .hf-art, .hf-frame__pic > img, .hf-frame__pic > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-frame__pic { position: absolute; inset: 0; overflow: hidden; }
.hf-frame--letterbox .hf-frame__pic { inset: auto 0; top: 50%; transform: translateY(-50%); aspect-ratio: var(--ratio-scope); }
.hf-art, .hf-frame .hf-pic { transition: transform var(--dur-title) var(--ease-title); transform-origin: 50% 55%; }
.hf-pic { display: block; width: 100%; height: auto; }
/* stills cut from a 2.39:1 film carry black bars in a 16:9 file: wherever the picture is placed (absolutely) in a box, the bars fall outside it */
img.hf-pic.hf-pic--lb { position: absolute; left: 0; right: 0; top: -17.2%; bottom: auto; width: 100%; height: 134.4%; object-fit: cover; }
.hf-burn { position: absolute; z-index: 3; padding: 2px 6px; background: var(--scrim); font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-frame-muted); font-variant-numeric: tabular-nums; }
.hf-burn--tl { top: var(--space-3); left: var(--space-3); }
.hf-burn--tr { top: var(--space-3); right: var(--space-3); }
.hf-burn--bl { bottom: var(--space-3); left: var(--space-3); }
.hf-burn--br { bottom: var(--space-3); right: var(--space-3); }
.hf-grain::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.07; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- the play triangle (the wordmark's own proportion, 0.54 : 1) ---------- */
.hf-tri { display: inline-block; flex: none; width: 0.46em; height: 0.85em; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform var(--dur-quick) var(--ease-title); }
.hf-tri--back { transform: rotate(180deg); }
.hf-tri--down { transform: rotate(90deg); }
.hf-list-tri > li { position: relative; padding-left: 1.4em; }
.hf-list-tri > li::before { content: ""; position: absolute; left: 0.1em; top: 0.52em; width: 0.4em; height: 0.74em; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.hf-icon { width: 24px; height: 24px; }
.hf-wordmark { width: 100%; height: auto; max-width: var(--logo-max); }
.hf-aperture { width: 100%; height: auto; }

/* ---------- buttons and links ---------- */
.hf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); height: 48px; padding: 0 var(--space-5); border: var(--border-hair) solid transparent; border-radius: var(--radius-0); background: transparent; color: inherit; font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-instant) var(--ease-title), color var(--dur-instant) var(--ease-title), border-color var(--dur-instant) var(--ease-title); }
.hf-btn:hover .hf-tri, .hf-link:hover .hf-tri, .hf-btn:focus-visible .hf-tri, .hf-link:focus-visible .hf-tri { transform: translateX(3px); }
.hf-btn:hover .hf-tri--back, .hf-link:hover .hf-tri--back { transform: rotate(180deg) translateX(3px); }
.hf-btn:active { transform: translateY(1px); }
.hf-btn--primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.hf-btn--primary:hover { background: var(--ink-muted); border-color: var(--ink-muted); }
.hf-btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.hf-btn--ghost:hover { border-color: var(--ink); }
.hf-btn--text { height: auto; padding: 0; border: 0; }
.hf-btn--sm { height: 36px; padding: 0 var(--space-4); }
.hf-btn--lg { height: 60px; padding: 0 var(--space-6); font-size: 14px; }
.hf-btn--block { width: 100%; justify-content: space-between; }
.hf-btn[disabled], .hf-btn.is-disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }
.hf-link { display: inline-flex; align-items: center; gap: var(--space-2); padding-block: var(--space-1); font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: inherit; background: none; border: 0; cursor: pointer; }
.hf-link span:not(.hf-tri) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-quick) var(--ease-title); padding-bottom: 3px; }
.hf-link:hover span:not(.hf-tri), .hf-link:focus-visible span:not(.hf-tri) { background-size: 100% 1px; }
.hf-iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; transition: background-color var(--dur-instant) var(--ease-title); }
.hf-iconbtn:hover { background: var(--surface-alt); }
.hf-iconbtn[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.hf-frame .hf-iconbtn:hover, .hf-player .hf-iconbtn:hover { background: var(--grey-800); }
.hf-player .hf-iconbtn[aria-pressed="true"] { background: var(--on-frame); color: var(--frame); }

/* ---------- tags ---------- */
.hf-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hf-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-2); border: var(--border-hair) solid var(--line-strong); border-radius: var(--radius-0); font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hf-tag--solid { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.hf-tag--quiet { border-color: transparent; padding: 0; color: var(--ink-subtle); }
.hf-tag--rec { border-color: var(--record); color: var(--record); }
.hf-tag--rec::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-full); background: currentColor; animation: hf-blink 1.6s steps(1, end) infinite; }
.hf-tag--fill-rec { background: var(--record); border-color: var(--record); color: var(--on-record); }
.hf-tag--approval { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.hf-tag--approval::before { content: ""; width: 9px; height: 5px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
.hf-frame .hf-tag, .hf-on-frame .hf-tag { color: var(--on-frame); border-color: var(--grey-500); }
.hf-frame .hf-tag--quiet, .hf-on-frame .hf-tag--quiet { color: var(--on-frame-muted); border-color: transparent; }
@keyframes hf-blink { 50% { opacity: 0.25; } }

/* ---------- header ---------- */
.hf-header { position: relative; z-index: var(--layer-header); display: flex; align-items: center; gap: var(--space-6); height: 80px; padding-inline: var(--grid-margin); color: var(--ink); }
.hf-header--over { position: absolute; top: 0; left: 0; right: 0; color: var(--on-frame); }
.hf-header--solid { background: var(--surface); border-bottom: var(--border-hair) solid var(--line); }
.hf-header__logo { display: block; width: var(--logo-header); flex: none; color: inherit; }
.hf-nav { display: flex; gap: var(--space-6); margin-left: auto; }
.hf-nav a { position: relative; font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; padding-block: var(--space-2); }
.hf-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-quick) var(--ease-title); }
.hf-nav a:hover::after, .hf-nav a[aria-current="page"]::after { transform: scaleX(1); }
.hf-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.hf-header--over .hf-btn--primary { background: var(--on-frame); border-color: var(--on-frame); color: var(--frame); }
.hf-header--over .hf-btn--primary:hover { background: var(--on-frame-muted); border-color: var(--on-frame-muted); }
.hf-menubtn { display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-2) 0 var(--space-3); border: 0; background: transparent; color: inherit; cursor: pointer; font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- full-screen menu ---------- */
.hf-menu { position: fixed; inset: 0; z-index: var(--layer-menu); display: flex; flex-direction: column; background: var(--surface); color: var(--ink); clip-path: circle(0% at calc(100% - 64px) 40px); visibility: hidden; transition: clip-path var(--dur-iris) var(--ease-iris), visibility 0s linear var(--dur-iris); }
.hf-menu.is-open { clip-path: circle(150% at calc(100% - 64px) 40px); visibility: visible; transition: clip-path var(--dur-iris) var(--ease-iris), visibility 0s; }
.hf-menu--static { position: relative; inset: auto; min-height: 640px; clip-path: none; visibility: visible; }
.hf-menu__top { display: flex; align-items: center; height: 80px; padding-inline: var(--grid-margin); border-bottom: var(--border-hair) solid var(--line); }
.hf-menu__top .hf-header__logo { margin-right: auto; }
.hf-menu__body { flex: 1; display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); padding: var(--space-7) var(--grid-margin); align-content: center; }
.hf-menu__links { grid-column: 1 / 9; }
.hf-menu__links a { display: grid; grid-template-columns: 4em auto 1fr; align-items: baseline; gap: var(--space-4); padding-block: 0.06em; text-decoration: none; }
.hf-menu__links .meta { color: var(--ink-subtle); }
.hf-menu__links .hf-tri { width: 0.36em; height: 0.66em; align-self: center; opacity: 0; transform: translateX(-0.3em); transition: opacity var(--dur-quick) var(--ease-title), transform var(--dur-quick) var(--ease-title); }
.hf-menu__links a:hover .hf-tri, .hf-menu__links a:focus-visible .hf-tri, .hf-menu__links a[aria-current="page"] .hf-tri { opacity: 1; transform: none; }
.hf-menu__aside { grid-column: 9 / 13; align-self: end; display: grid; gap: var(--space-6); }
.hf-menu__aside dt { color: var(--ink-subtle); margin-bottom: var(--space-1); }
.hf-menu__foot { display: flex; justify-content: space-between; padding: var(--space-4) var(--grid-margin); border-top: var(--border-hair) solid var(--line); color: var(--ink-subtle); }

/* ---------- footer ---------- */
.hf-footer { padding: var(--space-9) var(--grid-margin) var(--space-5); border-top: var(--border-hair) solid var(--line); background: var(--surface); color: var(--ink); }
.hf-footer__cols { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-6); }
.hf-footer__col { grid-column: span 3; display: grid; gap: var(--space-2); align-content: start; }
.hf-footer__col h4 { color: var(--ink-subtle); margin-bottom: var(--space-2); }
.hf-footer__col a { text-decoration: none; }
.hf-footer__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* the wordmark signs off small, like a maker's mark: never a full-width banner */
.hf-footer__mark { display: block; width: var(--logo-footer); margin-top: var(--space-9); color: var(--ink); }
.hf-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-hair) solid var(--line); color: var(--ink-subtle); }
.hf-footer__base a { text-decoration: none; }
.hf-footer__base nav { display: flex; gap: var(--space-5); }

/* ---------- film card ---------- */
.hf-film { display: block; color: inherit; text-decoration: none; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34' viewBox='0 0 22 34'%3E%3Cpath d='M2 2 19.5 17 2 32Z' fill='%23f6f4f1' stroke='%230d0c0b' stroke-width='2'/%3E%3C/svg%3E") 4 17, pointer; }
.hf-film__frame { position: relative; }
.hf-film.is-previewing .hf-art, .hf-film.is-previewing .hf-pic { transform: scale(1.035); }
.hf-film__cue { position: absolute; z-index: 3; left: var(--space-3); top: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 10px; background: var(--scrim); color: var(--on-frame); font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; transform: translateY(-6px); transition: opacity var(--dur-calm) var(--ease-title), transform var(--dur-calm) var(--ease-title); }
.hf-film.is-previewing .hf-film__cue { opacity: 1; transform: none; }
.hf-film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hf-film__meta { display: grid; grid-template-columns: 3.2em 1fr auto; column-gap: var(--space-4); row-gap: var(--space-1); align-items: baseline; padding-top: var(--space-4); }
.hf-film__no { color: var(--ink-subtle); }
.hf-film__title { grid-column: 2; }
.hf-film__brand { grid-column: 2; color: var(--ink-muted); }
.hf-film__meta .hf-tags { grid-column: 3; grid-row: 1 / span 2; align-self: start; justify-content: flex-end; }
.hf-film:hover .hf-film__title, .hf-film:focus-visible .hf-film__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.hf-film--s .hf-film__meta { grid-template-columns: 2.6em 1fr; }
.hf-film--s .hf-film__meta .hf-tags { grid-column: 2; grid-row: auto; justify-content: flex-start; margin-top: var(--space-2); }

/* ---------- player ---------- */
.hf-player { background: var(--frame); color: var(--on-frame); }
.hf-player .hf-frame { background: var(--frame); }
.hf-player__bigplay { position: absolute; z-index: 4; left: 0; bottom: 0; display: flex; align-items: center; gap: var(--space-3); height: 12.8%; min-height: 48px; padding: 0 var(--space-4); border: 0; background: transparent; color: var(--on-frame); cursor: pointer; }
.hf-player__bigplay .hf-tri { width: 18px; height: 33px; }
/* captions are burned into the lower third of many films: on a full-height frame the big play sits top left, never over the picture's lower third */
.hf-frame:not(.hf-frame--letterbox) > .hf-player__bigplay { top: 0; bottom: auto; background: var(--scrim); height: 56px; }
.hf-player__bigplay:hover .hf-tri { transform: translateX(4px); }
.hf-player__bigplay span.label { color: var(--on-frame); }
.hf-player.is-playing .hf-player__bigplay { opacity: 0; pointer-events: none; transition: opacity var(--dur-calm) var(--ease-exit); }
.hf-player__cc { position: absolute; z-index: 4; left: 50%; bottom: 13%; transform: translateX(-50%); max-width: 80%; padding: 4px 12px; background: var(--scrim); color: var(--on-frame); font-family: var(--font-sans); font-size: 19px; line-height: 28px; text-align: center; display: none; }
.hf-player.has-cc .hf-player__cc { display: block; }
.hf-player[data-burned-captions] .hf-player__cc, .hf-player[data-burned-captions] [data-act="cc"] { display: none; }
.hf-player__burned { display: none; }
.hf-player[data-burned-captions] .hf-player__burned { display: inline-flex; color: var(--on-frame-muted); }
.hf-player__video { z-index: 1; opacity: 0; transition: opacity var(--dur-calm) var(--ease-title); }
.hf-player.is-playing .hf-player__video { opacity: 1; }
.hf-player--v { max-width: 420px; }
.hf-player--v .hf-player__bar { flex-wrap: wrap; height: auto; padding: 4px; }
.hf-player--v .hf-player__scrub { order: 10; flex-basis: 100%; }
.hf-player .hf-frame:not(.hf-frame--letterbox) > .hf-burn--tl { display: none; }
.hf-player--v .hf-player__tc { min-width: 0; font-size: 13px; }
.hf-player__bar { display: flex; align-items: center; gap: var(--space-2); height: 56px; padding: 0 var(--space-2); border-top: var(--border-hair) solid var(--grey-800); }
.hf-player__tc { min-width: 9.6em; padding-inline: var(--space-2); color: var(--on-frame); font-family: var(--font-mono); font-size: 15px; line-height: 20px; font-variant-numeric: tabular-nums; }
.hf-player__scrub { position: relative; flex: 1; height: 44px; cursor: pointer; }
.hf-player__scrub::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--grey-700); }
.hf-player__fill { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; width: 0; background: var(--on-frame); }
.hf-player__fill::after { content: ""; position: absolute; right: -6px; top: -5px; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--on-frame); }
.hf-player__chapter { position: absolute; top: 50%; width: 1px; height: 10px; margin-top: -5px; background: var(--grey-400); left: calc(var(--at) * 100%); }
.hf-player__dur { color: var(--on-frame-muted); font-family: var(--font-mono); font-size: 13px; padding-inline: var(--space-2); }

/* ---------- section patterns used on pages ---------- */
.hf-hero { position: relative; min-height: max(560px, 50cqi); display: grid; align-content: end; background: var(--frame); color: var(--on-frame); overflow: hidden; }
.hf-hero__film { position: absolute; inset: 0; }
.hf-hero__film > .hf-frame { position: absolute; inset: 0; aspect-ratio: auto; }
.hf-hero__scrim { position: absolute; inset: auto 0 0 0; height: 46%; background: var(--scrim); }
.hf-hero__body { position: relative; z-index: 3; padding: 0 var(--grid-margin) var(--space-7); display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: end; }
.hf-hero__title { grid-column: 4 / 10; color: var(--on-frame); }
.hf-hero__line { grid-column: 9 / 13; display: grid; gap: var(--space-5); padding-bottom: 0.4em; }
.hf-letterbox { position: absolute; left: 0; right: 0; height: var(--bar, 12%); background: var(--frame); z-index: 2; }
.hf-letterbox--top { top: 0; } .hf-letterbox--bottom { bottom: 0; }

.hf-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; border-top: var(--border-hair) solid var(--line); border-bottom: var(--border-hair) solid var(--line); }
.hf-strip > * { scroll-snap-align: start; border-left: var(--border-hair) solid var(--line); }
.hf-strip > *:first-child { border-left: 0; }
.hf-strip--grid { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
.hf-strip--grid > * { border-bottom: var(--border-hair) solid var(--line); }
.hf-strip--grid > *:nth-child(4n + 1) { border-left: 0; }
.hf-strip--grid > *:nth-last-child(-n + 4) { border-bottom: 0; }
.hf-statement em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em; font-size: 1.04em; }
.hf-crafts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gutter); border-top: var(--border-hair) solid var(--line); }
.hf-crafts li { display: flex; gap: var(--space-4); align-items: baseline; padding-block: var(--space-4); border-bottom: var(--border-hair) solid var(--line); }
.hf-crafts li .meta { color: var(--ink-subtle); min-width: 2.4em; }

/* ---------- process step ---------- */
.hf-step { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-5); padding-block: var(--space-8); border-top: var(--border-hair) solid var(--line); }
.hf-step__no { grid-column: 1 / 3; font-family: var(--font-display); font-weight: 900; font-size: var(--fluid-display-l); line-height: 0.82; color: var(--ink); }
.hf-step__main { grid-column: 3 / 7; display: grid; gap: var(--space-5); align-content: start; }
.hf-step__title { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.hf-step__io { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); padding-top: var(--space-4); border-top: var(--border-hair) solid var(--line); }
.hf-step__io dt { color: var(--ink-subtle); margin-bottom: var(--space-2); }
.hf-step__media { grid-column: 7 / 13; }
.hf-step--flip .hf-step__main { grid-column: 9 / 13; grid-row: 1; }
.hf-step--flip .hf-step__media { grid-column: 3 / 9; grid-row: 1; }
.hf-step--stack .hf-step__main { grid-column: 3 / 13; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: start; }
.hf-step--stack .hf-step__title { grid-column: 1 / 6; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.hf-step--stack .hf-step__io { grid-column: 6 / 11; padding-top: 0; border-top: 0; }
.hf-step--stack .hf-step__media { grid-column: 3 / 13; margin-top: var(--space-4); }
.hf-step__card { display: grid; grid-template-rows: auto auto 1fr; gap: var(--space-3); padding: var(--space-5); min-height: 100%; text-decoration: none; color: inherit; }
.hf-step__card .meta { color: var(--ink-subtle); display: flex; justify-content: space-between; }
.hf-step__card .hf-step__thumb { margin-top: var(--space-2); }
.hf-dot-approval { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--ink); vertical-align: middle; }

/* ---------- case-study artefacts ---------- */
.hf-artefact { position: relative; background: var(--surface-alt); color: var(--ink); border: var(--border-hair) solid var(--line); }
.hf-artefact__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: var(--border-hair) solid var(--line); font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); }
.hf-artefact__body { padding: var(--space-5); }

/* brief card */
.hf-brief { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; }
.hf-brief__logo { position: relative; overflow: hidden; aspect-ratio: var(--ratio-square); margin: var(--space-5); background: var(--frame); border: var(--border-hair) solid var(--line); }
.hf-brief__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-brief__idea { padding: var(--space-5) var(--space-5) var(--space-5) 0; display: grid; gap: var(--space-5); align-content: space-between; }
.hf-brief__idea blockquote { text-indent: -0.4em; }
.hf-brief__rows { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); }
.hf-brief__rows dt { color: var(--ink-subtle); }

/* concept card */
.hf-concepts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.hf-concept { display: grid; grid-template-rows: auto auto auto 1fr auto; }
.hf-concept .hf-frame { margin: 0; }
.hf-concept__body { display: grid; gap: var(--space-4); padding: var(--space-5); align-content: start; }
.hf-concept__letter { font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 0.8; }
.hf-concept dl { display: grid; gap: var(--space-3); }
.hf-concept dt { color: var(--ink-subtle); }
.hf-concept.is-chosen { border-color: var(--ink); }
.hf-concept:not(.is-chosen) { opacity: 0.72; }

/* beat sheet */
.hf-beats__track { position: relative; height: 56px; margin-bottom: var(--space-5); border-bottom: var(--border-hair) solid var(--line-strong); }
.hf-beats__act { position: absolute; top: 0; bottom: 0; left: calc(var(--from) * 100%); width: calc((var(--to) - var(--from)) * 100%); border-left: var(--border-hair) solid var(--line); padding: 0 var(--space-2); color: var(--ink-subtle); }
.hf-beats__mark { position: absolute; bottom: -5px; left: calc(var(--at) * 100%); display: grid; place-items: center; width: 22px; height: 22px; margin-left: -11px; background: var(--ink); color: var(--surface); font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.hf-beats__ticks { position: relative; height: 16px; margin-bottom: var(--space-6); color: var(--ink-subtle); }
.hf-beats__ticks span { position: absolute; left: calc(var(--at) * 100%); transform: translateX(-50%); }
.hf-beats__ticks span:first-child { transform: none; }
.hf-beats__ticks span:last-child { transform: translateX(-100%); }
.hf-beats__list { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: var(--space-4); counter-reset: beat; }
.hf-beats__list li { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-3); border-top: var(--border-bold) solid var(--ink); }
.hf-beats__list .meta { color: var(--ink-subtle); }

/* storyboard */
.hf-board { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.hf-panel { display: grid; gap: var(--space-3); align-content: start; }
.hf-panel__frame { position: relative; aspect-ratio: var(--ratio-panel); background: var(--surface-alt); border: var(--border-hair) solid var(--line-strong); color: var(--ink-muted); overflow: hidden; }
.hf-panel__frame .hf-sketch { position: absolute; inset: 6%; width: 88%; height: 88%; }
.hf-panel__frame .hf-panel__sh { position: absolute; top: 6px; left: 8px; }
.hf-panel__frame .hf-panel__dur { position: absolute; top: 6px; right: 8px; }
.hf-panel__note { color: var(--ink-muted); }
.hf-panel__cam { justify-self: start; }

/* colour keys */
.hf-keys { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--space-5); }
.hf-key { display: grid; gap: var(--space-3); }
.hf-key__sw { display: grid; grid-template-columns: 3fr 2fr 1fr 1fr; height: 56px; outline: var(--border-hair) solid var(--line); }
.hf-key .hf-frame { outline: var(--border-hair) solid var(--line); }
.hf-key__sw i { display: block; }
.hf-key__hex { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--ink-subtle); }

/* character and location sheet */
.hf-sheet { display: grid; grid-template-columns: 2fr 1fr; }
.hf-sheet > .hf-artefact__bar { grid-column: 1 / -1; }
.hf-sheet__art { position: relative; min-height: 360px; border-right: var(--border-hair) solid var(--line); background: var(--surface); color: var(--ink-muted); }
.hf-sheet__art svg { position: absolute; inset: var(--space-5); width: calc(100% - 2 * var(--space-5)); height: calc(100% - 2 * var(--space-5)); }
.hf-sheet__side { display: grid; gap: var(--space-5); align-content: start; padding: var(--space-5); }
.hf-sheet__sw { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.hf-sheet__sw i { display: block; aspect-ratio: 1; border: var(--border-hair) solid var(--line); }
.hf-sheet__titleblock { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--border-hair) solid var(--line); }
.hf-sheet__titleblock div { padding: var(--space-3) var(--space-4); border-left: var(--border-hair) solid var(--line); display: grid; gap: 2px; }
.hf-sheet__titleblock div:first-child { border-left: 0; }
.hf-sheet__titleblock .meta-s { color: var(--ink-subtle); }

/* sound */
.hf-wave { display: flex; align-items: center; gap: 2px; height: 96px; }
.hf-wave i { flex: 1; min-width: 1px; background: var(--ink-muted); }
.hf-cuemap { position: relative; }
.hf-cuemap__cue { position: absolute; top: -26px; bottom: 0; left: calc(var(--in) * 100%); width: calc((var(--out) - var(--in)) * 100%); border-left: var(--border-hair) solid var(--ink); padding-left: var(--space-2); pointer-events: none; }
.hf-table { width: 100%; border-collapse: collapse; }
.hf-table th { text-align: left; font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: var(--border-hair) solid var(--line-strong); }
.hf-table td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: var(--border-hair) solid var(--line); vertical-align: baseline; }
.hf-table td.meta, .hf-table td .meta { font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink-muted); white-space: nowrap; }

/* edit timeline */
.hf-edit { --label: 64px; font-family: var(--font-mono); }
.hf-edit__ruler { position: relative; height: 28px; margin-left: var(--label); border-bottom: var(--border-hair) solid var(--line-strong); color: var(--ink-subtle); font-size: 11px; }
.hf-edit__ruler span { position: absolute; bottom: 6px; left: calc(var(--at) * 100%); transform: translateX(-50%); }
.hf-edit__ruler span:first-child { transform: none; }
.hf-edit__ruler span:last-child { transform: translateX(-100%); }
.hf-edit__tracks { position: relative; }
.hf-edit__track { display: grid; grid-template-columns: var(--label) 1fr; height: 40px; border-bottom: var(--border-hair) solid var(--line); }
.hf-edit__track > b { display: grid; align-items: center; font-weight: 500; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-subtle); border-right: var(--border-hair) solid var(--line); }
.hf-edit__lane { position: relative; }
.hf-edit__clip { position: absolute; top: 5px; bottom: 5px; left: calc(var(--in) * 100%); width: calc((var(--out) - var(--in)) * 100%); padding: 0 6px; overflow: hidden; white-space: nowrap; font-size: 10px; line-height: 30px; letter-spacing: 0.04em; text-transform: uppercase; background: var(--grey-700); color: var(--grey-50); border-right: 1px solid var(--surface-alt); }
.hf-edit__clip--title { background: var(--grey-500); color: var(--grey-950); }
.hf-edit__clip--audio { background: var(--grey-800); color: var(--grey-200); }
.hf-edit__clip--music { background: var(--grey-600); color: var(--grey-50); }
[data-theme="paper"] .hf-edit__clip { background: var(--grey-800); }
[data-theme="paper"] .hf-edit__clip--title { background: var(--grey-400); }
[data-theme="paper"] .hf-edit__clip--audio { background: var(--grey-600); color: var(--grey-50); }
[data-theme="paper"] .hf-edit__clip--music { background: var(--grey-700); }
.hf-edit__head { position: absolute; top: -28px; bottom: 0; left: calc(var(--label) + (100% - var(--label)) * var(--at)); width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.hf-edit__head::before { content: ""; position: absolute; top: 0; left: -6px; width: 14px; height: 14px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.hf-edit__head span { position: absolute; top: -26px; left: -1px; transform: translateX(-50%); padding: 2px 6px; background: var(--ink); color: var(--surface); font-size: 11px; white-space: nowrap; }

/* deliverables matrix */
.hf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hf-matrix { width: 100%; border-collapse: collapse; }
.hf-matrix th, .hf-matrix td { padding: var(--space-4) var(--space-3); border-bottom: var(--border-hair) solid var(--line); text-align: center; }
.hf-matrix thead th { font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); border-bottom-color: var(--line-strong); vertical-align: bottom; }
.hf-matrix thead th b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: 0.01em; color: var(--ink); margin-bottom: var(--space-1); }
.hf-matrix tbody th { text-align: left; font-weight: 400; padding-left: 0; }
.hf-matrix__fmt { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); align-items: center; }
.hf-matrix__shape { justify-self: center; border: 1.5px solid var(--ink); }
.hf-matrix__fmt b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; }
.hf-matrix__fmt small { display: block; color: var(--ink-subtle); font-size: 14px; line-height: 21px; }
.hf-cell { display: inline-block; width: 14px; height: 14px; vertical-align: middle; }
.hf-cell--yes { background: var(--ink); }
.hf-cell--opt { border: 1.5px solid var(--line-strong); }
.hf-cell--no { width: 12px; height: 1.5px; background: var(--line-strong); }
.hf-matrix__legend { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-4); color: var(--ink-muted); }
.hf-matrix__legend span { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ---------- CTA band and quote ---------- */
.hf-cta { padding-block: var(--space-10); }
.hf-cta__grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-6); align-items: end; }
.hf-cta__title { grid-column: 1 / 10; }
.hf-cta__title em { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; font-size: 0.86em; line-height: 1; letter-spacing: -0.01em; }
.hf-cta__act { grid-column: 10 / 13; display: grid; gap: var(--space-4); justify-items: start; padding-bottom: 0.5em; }
.hf-quote { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); }
.hf-quote blockquote { grid-column: 3 / 12; text-indent: -0.42em; }
.hf-quote figcaption { grid-column: 3 / 12; margin-top: var(--space-5); color: var(--ink-subtle); }

/* ---------- packages, FAQ, credits, index ---------- */
.hf-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); }
.hf-pack { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--space-5); padding-top: var(--space-5); border-top: var(--border-bold) solid var(--ink); }
.hf-pack__price { display: grid; gap: var(--space-1); }
.hf-pack__price .meta { color: var(--ink-subtle); }
.hf-pack ul { display: grid; gap: var(--space-2); align-content: start; }
.hf-faq { border-top: var(--border-hair) solid var(--line-strong); }
.hf-faq details { border-bottom: var(--border-hair) solid var(--line); }
.hf-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding-block: var(--space-5); cursor: pointer; list-style: none; font-size: 22px; line-height: 30px; font-weight: 500; }
.hf-faq summary::-webkit-details-marker { display: none; }
.hf-faq summary .hf-icon { flex: none; transition: transform var(--dur-quick) var(--ease-title); }
.hf-faq details[open] summary .hf-icon { transform: rotate(45deg); }
.hf-faq details > div { padding: 0 0 var(--space-6); max-width: 40em; color: var(--ink-muted); }
.hf-credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--grid-gutter); }
.hf-credits div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding-block: var(--space-3); border-bottom: var(--border-hair) solid var(--line); }
.hf-credits dt { color: var(--ink-subtle); }
.hf-credits__crafts { display: grid; gap: var(--space-4); align-content: start; padding-top: var(--space-3); }
.hf-credits__crafts ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-2) var(--space-5); }
.hf-index { width: 100%; border-collapse: collapse; }
.hf-index td, .hf-index th { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: var(--border-hair) solid var(--line); text-align: left; vertical-align: baseline; }
.hf-index th { font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); border-bottom-color: var(--line-strong); }
.hf-index a { text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-3); }
.hf-index a .hf-tri { width: 0.32em; height: 0.6em; opacity: 0; transition: opacity var(--dur-quick) var(--ease-title); }
.hf-index tr:hover a .hf-tri, .hf-index a:focus-visible .hf-tri { opacity: 1; }
.hf-index td.meta { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); }

/* ---------- photography placeholder: the zone scale ---------- */
.hf-zones { display: grid; grid-template-columns: repeat(var(--n, 11), minmax(0, 1fr)); gap: var(--space-3); }
.hf-zone { display: grid; gap: var(--space-2); }
.hf-zone i { display: block; aspect-ratio: var(--ratio-feed); border: var(--border-hair) solid var(--line); }
.hf-zone span { display: flex; justify-content: space-between; color: var(--ink-subtle); }

/* ---------- forms ---------- */
.hf-form { display: grid; gap: var(--space-7); }
.hf-field { display: grid; gap: var(--space-3); border: 0; padding: 0; margin: 0; min-width: 0; }
.hf-field > label:not([class]), .hf-field > legend, .hf-flabel { display: flex; align-items: baseline; gap: var(--space-2); padding: 0; font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.hf-field > legend { width: 100%; margin-bottom: var(--space-3); }
.hf-req { color: var(--record); text-decoration: none; border: 0; font-size: 17px; line-height: 1; font-weight: 500; }
.hf-opt { margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-subtle); }
.hf-help { color: var(--ink-subtle); font-size: 14px; line-height: 21px; }
.hf-input { width: 100%; height: 56px; padding: 0; border: 0; border-bottom: var(--border-hair) solid var(--line-strong); border-radius: var(--radius-0); background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 19px; line-height: 30px; transition: border-color var(--dur-instant) var(--ease-title), box-shadow var(--dur-instant) var(--ease-title); }
.hf-input::placeholder, .hf-textarea::placeholder { color: var(--ink-subtle); opacity: 1; }
.hf-input:hover { border-bottom-color: var(--ink-muted); }
.hf-input:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.hf-input:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.hf-textarea { width: 100%; min-height: 148px; padding: var(--space-4); border: var(--border-hair) solid var(--line-strong); border-radius: var(--radius-0); background: var(--surface-alt); color: var(--ink); font-family: var(--font-sans); font-size: 19px; line-height: 30px; resize: vertical; }
.hf-textarea:focus { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); border-color: var(--ink); }
.hf-count { justify-self: end; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-subtle); }
.hf-field.is-error .hf-input { border-bottom-color: var(--record); box-shadow: 0 1px 0 0 var(--record); }
.hf-field.is-error .hf-textarea { border-color: var(--record); }
.hf-error { display: flex; gap: var(--space-2); align-items: baseline; color: var(--record); font-size: 14px; line-height: 21px; }
.hf-error[hidden] { display: none; }
.hf-error::before { content: ""; flex: none; width: 0.46em; height: 0.85em; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translateY(1px); }

/* choice chips (single: radio, multi: checkbox) */
.hf-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hf-choice { position: relative; display: inline-flex; }
.hf-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hf-choice span { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: var(--border-hair) solid var(--line-strong); font-size: 16px; line-height: 20px; font-weight: 500; color: var(--ink); background: transparent; transition: background-color var(--dur-quick) var(--ease-title), color var(--dur-quick) var(--ease-title), border-color var(--dur-quick) var(--ease-title); }
.hf-choice:hover span { border-color: var(--ink); }
.hf-choice input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.hf-choice input:focus-visible + span { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.hf-choice input[type="checkbox"] + span::before { content: ""; width: 12px; height: 12px; border: 1.5px solid currentColor; flex: none; }
.hf-choice input[type="checkbox"]:checked + span::before { width: 11px; height: 6px; border-width: 0 0 1.5px 1.5px; border-top: 0; border-right: 0; transform: translateY(-2px) rotate(-45deg); }
.hf-choice--unsure span { border-style: dashed; color: var(--ink-muted); }
.hf-choices--tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.hf-choices--tiles .hf-choice span { display: grid; align-content: space-between; gap: var(--space-6); min-height: 168px; padding: var(--space-5); width: 100%; }
.hf-choices--tiles .hf-choice span b { font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: 0.92; text-transform: uppercase; letter-spacing: 0.005em; }
.hf-choices--tiles .hf-choice span small { font-size: 14px; line-height: 21px; font-weight: 400; color: var(--ink-muted); }
.hf-choices--tiles .hf-choice input:checked + span small { color: inherit; opacity: 0.8; }
.hf-choices--tiles .hf-choice { display: flex; min-width: 0; }

/* budget segments */
.hf-seg { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.hf-seg .hf-choice { display: flex; margin-left: -1px; }
.hf-seg .hf-choice:first-child { margin-left: 0; }
.hf-seg .hf-choice span { width: 100%; justify-content: center; min-height: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.hf-seg .hf-choice input:checked + span { position: relative; z-index: 1; }

/* date with "not sure" */
.hf-daterow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: end; }
.hf-input[type="date"] { font-family: var(--font-mono); font-size: 17px; }
.hf-input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.7; cursor: pointer; }

/* file drop zone: framed by crop marks, not dashes */
.hf-drop { position: relative; display: grid; place-items: center; align-content: center; gap: var(--space-3); min-height: 200px; margin-block: var(--space-2); padding: var(--space-6) var(--space-5); background: var(--surface-alt); border: var(--border-hair) solid transparent; text-align: center; cursor: pointer; --crop: var(--line-strong); --crop-len: 10px; --crop-gap: 4px; transition: border-color var(--dur-quick) var(--ease-title); }
.hf-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hf-drop:focus-within { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.hf-drop .hf-icon { width: 28px; height: 28px; }
.hf-drop__lead { font-size: 19px; line-height: 30px; }
.hf-drop__lead u { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hf-drop.is-over { border-color: var(--ink); --crop: var(--ink); }
.hf-drop.is-error { border-color: var(--record); }
.hf-drop__files { display: grid; }
.hf-drop__files li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-4); align-items: center; min-height: 52px; border-bottom: var(--border-hair) solid var(--line); }
.hf-drop__files li:first-child { border-top: var(--border-hair) solid var(--line); }
.hf-drop__files .meta { color: var(--ink-subtle); }
.hf-drop__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* consent checkbox */
.hf-check { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); align-items: start; cursor: pointer; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.hf-check input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.hf-check__box { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid var(--line-strong); color: var(--surface); transition: background-color var(--dur-quick) var(--ease-title); }
.hf-check__box .hf-icon { width: 18px; height: 18px; opacity: 0; }
.hf-check input:checked + .hf-check__box { background: var(--ink); border-color: var(--ink); }
.hf-check input:checked + .hf-check__box .hf-icon { opacity: 1; }
.hf-check input:focus-visible + .hf-check__box { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.hf-check:hover .hf-check__box { border-color: var(--ink); }
.hf-field.is-error .hf-check__box { border-color: var(--record); }

/* stepper */
.hf-stepper { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--space-2); counter-reset: step; }
.hf-stepper li { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-bold) solid var(--line); color: var(--ink-subtle); }
.hf-stepper li .meta { display: flex; align-items: center; gap: var(--space-2); }
.hf-stepper li b { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.hf-stepper li.is-done { color: var(--ink-muted); border-top-color: var(--ink-muted); }
.hf-stepper li.is-done .meta::after { content: ""; width: 9px; height: 5px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
.hf-stepper li.is-current { color: var(--ink); border-top-color: var(--ink); }
.hf-stepper--rail { grid-template-columns: 1fr; gap: 0; }
.hf-stepper--rail li { grid-template-columns: 3em 1fr; padding-block: var(--space-4); border-top: 0; border-left: var(--border-bold) solid var(--line); padding-left: var(--space-4); }
.hf-stepper--rail li.is-current { border-left-color: var(--ink); }
.hf-stepper--rail li.is-done { border-left-color: var(--ink-muted); }
.hf-formnav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-top: var(--space-5); border-top: var(--border-hair) solid var(--line); }

/* success */
.hf-success { display: grid; gap: var(--space-6); align-content: start; }
.hf-success:focus { outline: none; }
.hf-success__mark { width: 96px; color: var(--ink); animation: hf-iris-open var(--dur-title) var(--ease-title) both; }
@keyframes hf-iris-open { from { transform: rotate(-60deg) scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.hf-summary { display: grid; grid-template-columns: 9em 1fr; border-top: var(--border-hair) solid var(--line); }
.hf-summary dt, .hf-summary dd { padding-block: var(--space-3); border-bottom: var(--border-hair) solid var(--line); }
.hf-summary dt { color: var(--ink-subtle); }
form.is-sent [data-step], form.is-sent .hf-formnav, form.is-sent .hf-stepper { display: none; }

/* ---------- loader and iris ---------- */
.hf-loader { display: grid; justify-items: center; gap: var(--space-4); color: var(--ink); }
.hf-loader .hf-aperture { width: 64px; animation: hf-shutter 3.6s var(--ease-title) infinite; }
.hf-loader__tc { font-family: var(--font-mono); font-size: 18px; line-height: 22px; font-variant-numeric: tabular-nums; }
.hf-loader__label { color: var(--ink-subtle); }
@keyframes hf-shutter { 0% { transform: rotate(0); } 16.66% { transform: rotate(60deg); } 33.33% { transform: rotate(120deg); } 50% { transform: rotate(180deg); } 66.66% { transform: rotate(240deg); } 83.33% { transform: rotate(300deg); } 100% { transform: rotate(360deg); } }
.hf-iris { position: fixed; inset: 0; z-index: var(--layer-iris); pointer-events: auto; }
.hf-iris--contained { position: absolute; }
.hf-iris svg { width: 100%; height: 100%; }
.hf-iris__shutter { fill: var(--frame); }
.hf-iris__blades { fill: none; stroke: var(--grey-800); stroke-width: 1; }
.hf-iris.is-fade { opacity: 0; transition: opacity var(--dur-reduced) linear; }
.hf-iris.is-fade.is-on { opacity: 1; }

/* ---------- reveal (title-sequence entrance) ---------- */
.hf-reveal { animation: hf-rise var(--dur-title) var(--ease-title) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes hf-rise { from { opacity: 0; transform: translateY(0.4em); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }

/* ---------- real work: mixed shapes in one grid ---------- */
.hf-mixed { display: flex; align-items: flex-start; gap: var(--grid-gutter); }
.hf-mixed__item { flex: var(--ar) 1 0%; min-width: 0; }
.hf-mixed + .hf-mixed { margin-top: var(--space-8); }
.hf-film--v .hf-film__meta { grid-template-columns: 1fr; }
.hf-film--v .hf-film__no { display: none; }
.hf-film--v .hf-film__title, .hf-film--v .hf-film__brand { grid-column: 1; }
.hf-film--v .hf-film__meta .hf-tags { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: var(--space-2); }
.hf-film--row .hf-film__meta { grid-template-columns: 2.4em 1fr; }
.hf-film--row .hf-film__meta .hf-tags { grid-column: 2; grid-row: auto; justify-content: flex-start; margin-top: var(--space-2); }
.hf-film--row.hf-film--v .hf-film__meta { grid-template-columns: 1fr; }
.hf-film--row.hf-film--v .hf-film__meta .hf-tags { grid-column: 1; }

/* ---------- character sheet: full figure + close-up ---------- */
.hf-charsheet__art { display: grid; grid-template-columns: 2fr 3fr; gap: 1px; aspect-ratio: 16 / 10; background: var(--line); border-right: var(--border-hair) solid var(--line); }
.hf-charsheet__cell { position: relative; overflow: hidden; background: var(--frame); }
.hf-charsheet__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-charsheet__art--combined { display: block; aspect-ratio: auto; background: var(--frame); }
.hf-charsheet__art--combined img { width: 100%; height: auto; }
.hf-key__hex { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--ink-subtle); }
.hf-sheet__side .hf-key__hex { margin-top: var(--space-2); }

/* ---------- location plate: stacked, fits any column span ---------- */
.hf-plate { grid-template-columns: 1fr; align-self: start; }
.hf-plate__art { position: relative; overflow: hidden; aspect-ratio: var(--ratio-wide); background: var(--frame); border-bottom: var(--border-hair) solid var(--line); }
.hf-plate--portrait .hf-plate__art { aspect-ratio: 4 / 5; }
.hf-plate__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-plate .hf-sheet__side { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.hf-plates { display: grid; grid-template-columns: 5fr 7fr; gap: var(--grid-gutter); align-items: start; }

/* ---------- style options A–F ---------- */
.hf-options { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--space-6) var(--space-5); padding: var(--space-5); }
.hf-option { display: grid; gap: var(--space-3); align-content: start; }
.hf-option__pic { position: relative; overflow: hidden; aspect-ratio: 15 / 8; background: var(--frame); outline: var(--border-hair) solid var(--line); }
.hf-option__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-option.is-chosen .hf-option__pic { outline: var(--border-bold) solid var(--ink); outline-offset: 4px; }
.hf-option__letter { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 44px; height: 44px; background: var(--frame); color: var(--on-frame); font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 1; }
.hf-option.is-chosen .hf-option__letter { background: var(--on-frame); color: var(--frame); }
.hf-option figcaption { display: grid; gap: var(--space-1); }
.hf-option__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }

/* ---------- keyframe strips ---------- */
.hf-keyframes__list { display: grid; gap: var(--space-5); padding: var(--space-5); }
.hf-keystrip { display: grid; gap: var(--space-2); }
.hf-keystrip__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hf-keystrip__pic { position: relative; overflow: hidden; background: var(--frame); }
.hf-keystrip__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-keystrip figcaption { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: baseline; }
.hf-keystrip figcaption .meta { color: var(--ink-subtle); }

/* ---------- concept gallery: every image at its own shape ---------- */
.hf-gallery { display: grid; gap: var(--space-6); }
.hf-gallery__grid { columns: 3; column-gap: var(--grid-gutter); }
.hf-gallery__item { break-inside: avoid; display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.hf-gallery__item--wide { column-span: all; }
.hf-gallery__pic { position: relative; overflow: hidden; background: var(--frame); }
.hf-gallery__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-gallery__item figcaption { display: grid; gap: 2px; }

/* ---------- the caption zone: burned-in captions live in the lower third ---------- */
.hf-capzone { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 33.333%; border-top: 1px dashed var(--record); background: repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--record) 22%, transparent) 10px 11px); pointer-events: none; }
.hf-capzone span { position: absolute; right: var(--space-3); top: var(--space-2); padding: 2px 6px; background: var(--record); color: var(--on-record); font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.hf-video-toggle { position: absolute; z-index: 4; }

@container page (max-width: 767px) {
  .hf-mixed { flex-direction: column; gap: var(--space-7); }
  .hf-mixed + .hf-mixed { margin-top: var(--space-7); }
  .hf-mixed__item { flex: none; width: 100%; }
  .hf-mixed__item:has(.hf-film--v) { width: 72%; }
  .hf-charsheet__art { border-right: 0; border-bottom: var(--border-hair) solid var(--line); aspect-ratio: 4 / 3; }
  .hf-plates { grid-template-columns: 1fr; }
  .hf-options { grid-template-columns: 1fr 1fr; padding: var(--space-4); gap: var(--space-5) var(--space-3); }
  .hf-option__letter { width: 32px; height: 32px; font-size: 20px; }
  .hf-option__head .hf-tag--quiet { display: none; }
  .hf-keyframes__list { padding: var(--space-4); }
  .hf-keystrip__pic { min-width: 680px; }
  .hf-gallery__grid { columns: 2; column-gap: var(--space-3); }
  .hf-gallery__item { margin-bottom: var(--space-5); }
  .hf-read { grid-template-columns: 1fr !important; }
  .hf-read > * { grid-column: auto !important; }
  .hf-beats__ticks span:nth-child(even) { display: none; }
  .hf-frame--letterbox > .hf-player__bigplay { min-height: 0; padding: 0 var(--space-3); }
  .hf-frame--letterbox > .hf-player__bigplay .hf-tri { width: 10px; height: 18px; }
}

/* ---------- reduced motion: calm crossfades, nothing travels ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: var(--dur-reduced) !important; animation-iteration-count: 1 !important; transition-duration: var(--dur-reduced) !important; scroll-behavior: auto !important; }
  .hf-loader .hf-aperture { animation: none; }
  .hf-film.is-previewing .hf-art, .hf-film.is-previewing .hf-pic { transform: none; }
  .hf-tag--rec::before { animation: none; }
  .hf-menu, .hf-menu.is-open { clip-path: none; transition: opacity var(--dur-reduced) linear, visibility 0s; }
  .hf-menu { opacity: 0; } .hf-menu.is-open { opacity: 1; }
  .hf-reveal { animation-name: hf-fade; }
  @keyframes hf-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- mobile (the page container below 768px) ---------- */
@container page (max-width: 767px) {
  .hf-grid, .hf-head, .hf-footer__cols, .hf-menu__body, .hf-cta__grid, .hf-quote, .hf-hero__body, .hf-step { grid-template-columns: repeat(var(--grid-columns-m), minmax(0, 1fr)); column-gap: var(--grid-gutter-m); }
  .hf-grid > *, .hf-head > *, .hf-footer__col, .hf-cta__title, .hf-cta__act, .hf-quote blockquote, .hf-quote figcaption, .hf-hero__title, .hf-hero__line, .hf-menu__links, .hf-menu__aside { grid-column: 1 / -1 !important; }
  .hf-section { padding-block: var(--space-8); }
  .hf-head { row-gap: var(--space-4); margin-bottom: var(--space-6); }
  .hf-head > .hf-head__aside { justify-self: start; }
  .hf-header { height: 64px; gap: var(--space-4); }
  .hf-header__logo { width: var(--logo-header-m); }
  .hf-nav, .hf-header__actions .hf-btn { display: none; }
  .hf-header__actions { margin-left: auto; }
  .hf-menu__top { height: 64px; }
  .hf-menu__links a { grid-template-columns: 2.6em auto 1fr; gap: var(--space-3); }
  .hf-menu__aside { margin-top: var(--space-7); }
  .hf-hero { min-height: 165cqi; }
  .hf-hero__body { row-gap: var(--space-6); padding-bottom: var(--space-6); }
  .hf-footer { padding-top: var(--space-8); }
  .hf-footer__mark { margin-top: var(--space-8); }
  .hf-film__meta { grid-template-columns: 2.4em 1fr; }
  .hf-film__meta .hf-tags { grid-column: 2; grid-row: auto; justify-content: flex-start; margin-top: var(--space-2); }
  .hf-step { padding-block: var(--space-7); row-gap: var(--space-4); }
  .hf-step__no, .hf-step__main, .hf-step__media, .hf-step--flip .hf-step__main, .hf-step--flip .hf-step__media { grid-column: 1 / -1; grid-row: auto; }
  .hf-step__io { grid-template-columns: 1fr; gap: var(--space-4); }
  .hf-step--stack .hf-step__main { grid-template-columns: 1fr; row-gap: var(--space-4); }
  .hf-step--stack .hf-step__main, .hf-step--stack .hf-step__media, .hf-step--flip .hf-step__main, .hf-step--flip .hf-step__media { grid-column: 1 / -1; }
  .hf-step--stack .hf-step__title, .hf-step--stack .hf-step__io { grid-column: 1 / -1; }
  .hf-brief { grid-template-columns: 1fr; }
  .hf-brief__logo { margin: var(--space-4) var(--space-4) 0; max-width: 160px; }
  .hf-brief__idea { padding: var(--space-4); }
  .hf-concepts, .hf-packs { grid-template-columns: 1fr; }
  .hf-beats__list { grid-template-columns: 1fr; gap: var(--space-4); }
  .hf-beats__act span { display: none; }
  .hf-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
  .hf-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-sheet { grid-template-columns: 1fr; }
  .hf-sheet__art { min-height: 260px; border-right: 0; border-bottom: var(--border-hair) solid var(--line); }
  .hf-sheet__titleblock { grid-template-columns: 1fr 1fr; }
  .hf-sheet__titleblock div:nth-child(3) { border-left: 0; }
  .hf-edit { --label: 40px; }
  .hf-edit__ruler span:nth-child(even) { display: none; }
  .hf-edit__clip { font-size: 0; padding: 0; }
  .hf-credits { grid-template-columns: 1fr; }
  .hf-cta { padding-block: var(--space-9); }
  .hf-zones { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--space-4); }
  .hf-strip--grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; }
  .hf-strip--grid > * { border-bottom: 0; border-left: var(--border-hair) solid var(--line); }
  .hf-strip--grid > *:first-child { border-left: 0; }
  .hf-crafts { grid-template-columns: 1fr; }
  .hf-choices--tiles { grid-template-columns: 1fr; }
  .hf-choices--tiles .hf-choice span { min-height: 0; gap: var(--space-3); }
  .hf-choices--tiles .hf-choice span b { font-size: 32px; }
  .hf-seg { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .hf-seg .hf-choice { margin-left: 0; }
  .hf-matrix { min-width: 520px; }
  .hf-cues .hf-table { min-width: 720px; }
  .hf-matrix th, .hf-matrix td { padding: var(--space-3) var(--space-1); }
  .hf-matrix thead th b { font-size: 18px; }
  .hf-matrix__fmt { grid-template-columns: 28px 1fr; gap: var(--space-2); }
  .hf-matrix__fmt b { font-size: 16px; }
  .hf-matrix__fmt small { display: none; }
  .hf-index .hide-m { display: none; }
  .hf-faq summary { font-size: 19px; line-height: 26px; }
}