/* -----------------------------------------------------------------------------
   Bleeding Skull — site.css
   Generated by tools/make_css.py (edit there, then run it). Brand tokens are in :root.
   ----------------------------------------------------------------------------- */
:root {
  --green: #affe52;          /* PMS 2283 C — header, footer, buttons, highlights only */
  --black: #000;
  --white: #fff;
  --paper: #f4f6f0;          /* gray sections */
  --dot: #c3c6bc;            /* halftone dots on paper */
  --sans: Barlow, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Courier Prime', 'Courier New', Courier, monospace;
  --rule: 3px solid var(--black);
  --dash: 3px dashed var(--black);
  --dots: 4px dotted var(--black);
  --gutter: 40px;
  --maxw: 1360px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
body { margin: 0; background: var(--white); color: var(--black); font-family: var(--sans); }
a { color: inherit; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--black); color: var(--green); padding: 8px 12px; font: 700 16px var(--mono); }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.halftone-paper { background-color: var(--paper); background-image: radial-gradient(var(--dot) .9px, transparent 1.1px), radial-gradient(var(--dot) .9px, transparent 1.1px); background-size: 5px 5px; background-position: 0 0, 2.5px 2.5px; }

/* ---- Type ------------------------------------------------------------------ */
.h-page { margin: 0; font: 900 96px/.86 var(--sans); text-transform: uppercase; letter-spacing: -.02em; }
.h-title { --fs: 92px; margin: 0; font: 900 var(--fs)/.86 var(--sans); text-transform: uppercase; letter-spacing: -.02em; overflow-wrap: normal; hyphens: manual; }
/* Titles shrink so their longest word always fits on one line (--w = letters in that word, set by fit_title()). */
.title-grid, .post-head { container-type: inline-size; }
.title-grid .h-title { font-size: min(var(--fs), calc((50cqi - 32px) / (var(--w, 8) * .74))); }
.post-head .h-title { font-size: min(var(--fs), calc(100cqi / (var(--w, 8) * .74))); }
.h-section { margin: 0; font: 900 52px/.9 var(--sans); text-transform: uppercase; }
.h-sub { margin: 0; font: 900 40px/.9 var(--sans); text-transform: uppercase; }
.body-text, .prose { font-family: var(--mono); font-size: 17px; letter-spacing: -.02em; line-height: 1.55; }
.body-text { margin: 0; max-width: 30em; }
.prose p { margin: 0 0 1.2em; }
.prose a, .body-text a, .details a, .spec a, .byline a, .faq a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose h2, .prose h3, .prose h4 { font-family: var(--sans); font-weight: 900; text-transform: uppercase; line-height: 1; margin: 1.6em 0 .6em; }
.prose blockquote { margin: 1.4em 0; padding-left: 20px; border-left: var(--rule); }
.prose img { display: block; height: auto; border: var(--rule); margin: 1.4em 0; }
.prose .img-pair, .prose .img-trio { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.4em 0; }
.prose .img-trio { grid-template-columns: repeat(3, 1fr); }
.prose .img-pair img, .prose .img-trio img { margin: 0; width: 100%; aspect-ratio: 1080 / 530; object-fit: cover; }
.prose .trailer { margin: 1.4em 0; }
.prose hr { border: 0; border-top: var(--dash); margin: 2em 0; }
/* Writing: headings inside a review or feature are typewriter bold, like the rest of the text. */
.post-col .prose h2, .post-col .prose h3, .post-col .prose h4 { font: 700 20px/1.35 var(--mono); letter-spacing: -.02em; text-transform: none; margin: 1.8em 0 .7em; }
.post-col .prose h2 em, .post-col .prose h3 em, .post-col .prose h4 em { font-style: italic; }
/* Capsules: one film per block (title, image, blurb), set apart by a dotted rule. */
.prose .capsule { padding: 40px 0; border-top: var(--dots); }
.prose .capsule:last-child { border-bottom: var(--dots); margin-bottom: 1.2em; }
.prose > p + .capsule { margin-top: 2.4em; }
.prose .capsule + :not(.capsule) { border-top: var(--dots); padding-top: 40px; }
.prose .capsule > :first-child { margin-top: 0; }
.prose .capsule > :last-child { margin-bottom: 0; }
.prose .capsule h2, .prose .capsule h3, .prose .capsule h4 { margin: 0 0 18px; }
.prose .capsule > p:first-child > strong:first-child { display: inline-block; font-size: 20px; line-height: 1.35; margin-bottom: 6px; }
.prose .capsule img { width: 100%; margin: 0 0 20px; }
.prose .capsule img + br { display: none; }
.prose .capsule .trailer { margin: 0 0 20px; }
.kicker, .label, .card-kind, .back-link, .all-link, .card-link { font-family: var(--mono); font-weight: 700; text-transform: uppercase; }
.kicker { display: block; font-size: 16px; margin-bottom: 10px; }
.back-link { font-size: 16px; }
.all-link { font-size: 17px; }
.sticker { display: inline-block; background: var(--black); color: var(--green); font: 700 15px/1.2 var(--mono); text-transform: uppercase; padding: 5px 10px; }
.sticker-white { background: var(--white); color: var(--black); }
.sticker-sm { font-size: 14px; padding: 4px 9px; }
.btn { display: inline-block; background: var(--green); color: var(--black); border: var(--rule); font: 900 24px/1.1 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 14px 40px; cursor: pointer; }
.btn:hover { background: var(--black); color: var(--green); }

/* ---- Header ------------------------------------------------------------------ */
.site-header { background: var(--green); border-bottom: var(--rule); }
.site-header .wrap { padding-top: 22px; }
.logo { display: block; line-height: 0; }
.logo img { width: 100%; height: auto; display: block; }
.header-bar { margin-top: 16px; border-top: var(--dash); padding: 12px 0 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 6px 44px; font: 800 22px/1.2 var(--sans); letter-spacing: .03em; text-transform: uppercase; }
.site-nav > a { text-decoration: none; }
.site-nav > a:hover { text-decoration: underline; text-decoration-style: dashed; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.site-nav > a[aria-current="page"] { background: var(--black); color: var(--green); padding: 2px 10px; margin: -2px -10px; }
.nav-social { display: none; }
.menu-toggle { display: none; align-items: center; gap: 10px; background: none; border: 0; padding: 0; font: 800 18px var(--sans); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; color: var(--black); }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 22px; height: 3px; background: var(--black); position: relative; }
.menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; }
.menu-icon::before { top: -7px; } .menu-icon::after { top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { top: 0; transform: rotate(-45deg); }
.search-link { line-height: 0; color: var(--black); }

/* ---- Footer ------------------------------------------------------------------ */
.site-footer { position: relative; margin-top: -10px; background: var(--green); clip-path: polygon(0% 6px, 0.70% 6px, 1.10% 5px, 1.81% 3px, 2.26% 5px, 3.06% 4px, 3.43% 6px, 3.73% 6px, 4.04% 7px, 4.43% 6px, 4.98% 7px, 5.38% 7px, 5.73% 9px, 6.42% 11px, 6.96% 10px, 7.35% 8px, 8.08% 10px, 8.83% 12px, 9.48% 10px, 9.83% 9px, 10.50% 7px, 10.85% 8px, 11.56% 10px, 12.35% 10px, 12.87% 12px, 13.66% 12px, 14.43% 10px, 15.14% 11px, 15.82% 12px, 16.38% 11px, 16.97% 12px, 17.64% 12px, 17.94% 10px, 18.27% 8px, 18.94% 9px, 19.30% 11px, 20.05% 12px, 20.38% 12px, 21.09% 10px, 21.47% 12px, 21.81% 12px, 22.57% 12px, 23.16% 10px, 23.86% 9px, 24.54% 7px, 25.19% 6px, 25.53% 7px, 25.89% 8px, 26.67% 6px, 27.42% 5px, 27.84% 4px, 28.52% 2px, 28.90% 2px, 29.22% 2px, 29.85% 3px, 30.63% 5px, 31.29% 7px, 31.80% 9px, 32.23% 7px, 32.77% 8px, 33.22% 8px, 33.66% 7px, 33.97% 8px, 34.30% 6px, 34.97% 4px, 35.32% 2px, 35.87% 2px, 36.56% 2px, 36.92% 3px, 37.36% 4px, 37.92% 5px, 38.32% 6px, 39.04% 6px, 39.78% 4px, 40.50% 4px, 40.96% 3px, 41.65% 3px, 42.33% 4px, 43.12% 6px, 43.62% 8px, 44.12% 8px, 44.61% 10px, 45.33% 10px, 46.09% 10px, 46.73% 9px, 47.10% 7px, 47.50% 9px, 48.11% 11px, 48.75% 9px, 49.32% 11px, 49.68% 10px, 50.11% 9px, 50.74% 9px, 51.07% 11px, 51.74% 12px, 52.51% 10px, 53.25% 10px, 53.59% 11px, 54.22% 9px, 54.54% 8px, 55.09% 10px, 55.81% 8px, 56.33% 6px, 56.64% 5px, 56.96% 5px, 57.67% 5px, 58.29% 4px, 58.86% 2px, 59.19% 4px, 59.99% 5px, 60.55% 3px, 60.94% 4px, 61.34% 6px, 62.02% 6px, 62.49% 5px, 62.88% 7px, 63.40% 9px, 63.89% 11px, 64.59% 12px, 65.23% 11px, 65.93% 11px, 66.55% 11px, 67.02% 12px, 67.41% 12px, 67.89% 11px, 68.32% 10px, 69.09% 10px, 69.72% 10px, 70.29% 11px, 70.73% 12px, 71.15% 10px, 71.69% 8px, 72.13% 7px, 72.91% 7px, 73.50% 8px, 74.06% 10px, 74.58% 11px, 75.31% 9px, 75.96% 11px, 76.44% 12px, 77.19% 11px, 77.69% 12px, 78.20% 12px, 78.51% 12px, 78.97% 12px, 79.49% 12px, 80.13% 10px, 80.71% 11px, 81.18% 11px, 81.81% 12px, 82.61% 10px, 83.08% 9px, 83.44% 8px, 83.83% 9px, 84.41% 9px, 84.89% 7px, 85.63% 7px, 86.32% 6px, 86.71% 7px, 87.36% 8px, 87.95% 10px, 88.57% 9px, 88.97% 11px, 89.28% 12px, 89.64% 12px, 90.39% 10px, 90.71% 10px, 91.25% 10px, 91.75% 8px, 92.49% 10px, 92.97% 9px, 93.56% 7px, 94.19% 9px, 94.97% 8px, 95.36% 10px, 96.06% 10px, 96.53% 10px, 96.86% 12px, 97.42% 12px, 97.82% 12px, 98.47% 12px, 99.24% 10px, 100% 6px, 100% 100%, 0% 100%); }
.site-footer .wrap { padding-top: 72px; padding-bottom: 36px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; padding-bottom: 40px; }
.signup { display: flex; flex-direction: column; gap: 14px; }
.signup h2 { margin: 0; font: 900 32px/.9 var(--sans); text-transform: uppercase; }
.signup p { margin: 0; font: 18px/1.5 var(--mono); letter-spacing: -.02em; }
.signup-row { display: flex; max-width: 560px; }
.signup input { font: 17px var(--mono); padding: 12px 14px; border: 2px solid var(--black); border-right: 0; background: var(--white); flex: 1; min-width: 0; border-radius: 0; }
.signup button { font: 900 17px var(--sans); text-transform: uppercase; background: var(--black); color: var(--green); border: 2px solid var(--black); padding: 12px 20px; cursor: pointer; }
.hp { position: absolute; left: -5000px; }
.footer-links { display: flex; gap: 72px; padding-left: 40px; border-left: var(--dash); }
.footer-links > * { display: flex; flex-direction: column; gap: 8px; font: 800 18px var(--sans); text-transform: uppercase; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-links .label { font-size: 14px; }
.footer-bio, .footer-copy { margin: 0; font: 16px/1.4 var(--mono); }
.footer-bio { border-top: var(--dash); padding: 20px 0 18px; }
.footer-copy { border-top: var(--dots); padding-top: 14px; }

/* ---- Torn gray sections --------------------------------------------------------- */
.torn { position: relative; margin-top: -10px; padding: 64px 0 88px; clip-path: polygon(0% 6px, 0.31% 4px, 0.99% 3px, 1.63% 2px, 2.41% 4px, 2.82% 3px, 3.19% 2px, 3.83% 2px, 4.24% 3px, 4.80% 2px, 5.60% 2px, 5.96% 3px, 6.43% 2px, 6.90% 2px, 7.50% 2px, 7.90% 2px, 8.41% 4px, 8.74% 2px, 9.46% 2px, 9.83% 2px, 10.54% 3px, 10.86% 5px, 11.59% 4px, 12.00% 5px, 12.66% 4px, 13.13% 3px, 13.67% 3px, 14.14% 3px, 14.72% 4px, 15.35% 4px, 16.13% 2px, 16.82% 2px, 17.57% 4px, 18.18% 6px, 18.90% 6px, 19.25% 5px, 19.56% 7px, 20.05% 5px, 20.68% 5px, 21.44% 4px, 21.80% 3px, 22.50% 4px, 23.00% 2px, 23.58% 2px, 24.01% 2px, 24.79% 2px, 25.26% 2px, 25.80% 3px, 26.40% 5px, 26.84% 5px, 27.63% 6px, 28.25% 4px, 28.98% 5px, 29.35% 7px, 30.00% 5px, 30.42% 6px, 30.90% 4px, 31.25% 6px, 31.69% 5px, 32.48% 4px, 32.85% 6px, 33.17% 8px, 33.91% 7px, 34.69% 7px, 35.33% 9px, 35.86% 11px, 36.42% 12px, 36.92% 12px, 37.32% 12px, 37.85% 12px, 38.31% 12px, 38.67% 12px, 39.35% 12px, 39.99% 12px, 40.68% 10px, 41.41% 8px, 42.07% 7px, 42.44% 8px, 43.18% 7px, 43.70% 7px, 44.27% 6px, 45.03% 6px, 45.69% 4px, 46.01% 6px, 46.72% 6px, 47.15% 5px, 47.67% 5px, 48.08% 3px, 48.79% 4px, 49.44% 3px, 49.85% 3px, 50.29% 3px, 50.65% 2px, 50.98% 2px, 51.73% 3px, 52.47% 4px, 53.24% 4px, 53.87% 5px, 54.18% 6px, 54.56% 7px, 55.28% 5px, 55.72% 5px, 56.39% 5px, 57.14% 4px, 57.73% 5px, 58.48% 4px, 58.90% 3px, 59.62% 5px, 60.30% 3px, 60.94% 2px, 61.25% 4px, 61.79% 4px, 62.43% 6px, 63.20% 6px, 63.66% 7px, 64.15% 6px, 64.73% 5px, 65.41% 3px, 66.13% 2px, 66.91% 2px, 67.23% 3px, 67.87% 3px, 68.31% 2px, 69.01% 2px, 69.47% 3px, 70.15% 4px, 70.52% 2px, 70.98% 2px, 71.74% 2px, 72.31% 3px, 72.89% 2px, 73.20% 3px, 73.72% 4px, 74.40% 2px, 75.15% 2px, 75.56% 2px, 76.10% 2px, 76.43% 4px, 76.92% 4px, 77.53% 3px, 78.04% 2px, 78.68% 3px, 79.00% 4px, 79.53% 5px, 79.89% 7px, 80.65% 8px, 81.07% 8px, 81.76% 9px, 82.09% 11px, 82.54% 10px, 82.91% 11px, 83.44% 11px, 83.91% 12px, 84.60% 12px, 85.20% 12px, 85.67% 11px, 86.29% 11px, 87.00% 10px, 87.36% 8px, 88.01% 8px, 88.45% 9px, 88.96% 7px, 89.52% 7px, 90.22% 9px, 90.95% 10px, 91.43% 11px, 91.97% 9px, 92.40% 9px, 92.85% 9px, 93.43% 9px, 93.79% 11px, 94.50% 10px, 95.07% 12px, 95.66% 11px, 96.10% 12px, 96.55% 12px, 97.15% 12px, 97.60% 12px, 98.39% 12px, 99.07% 12px, 99.45% 11px, 100% 6px, 100% 100%, 0% 100%); }
.torn { background-color: var(--paper); background-image: radial-gradient(var(--dot) .9px, transparent 1.1px), radial-gradient(var(--dot) .9px, transparent 1.1px); background-size: 5px 5px; background-position: 0 0, 2.5px 2.5px; }
.torn + .site-footer, .torn ~ .site-footer { margin-top: -10px; }

/* ---- Section heads, page heads, controls -------------------------------------------- */
.section { padding: 72px 0; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; padding-bottom: 14px; margin-bottom: 32px; border-bottom: var(--dots); }
.page-head { padding-top: 56px; }
.head-block { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 20px; border-bottom: var(--dots); }
.controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 32px; padding: 14px 0; border-bottom: var(--dots); font: 700 16px var(--mono); text-transform: uppercase; }
.controls-left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 48px; }
.control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.control a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; padding: 3px 9px; margin: 0 -9px; }
.control a[aria-current] { background: var(--black); color: var(--green); text-decoration: none; }
.listing { padding-top: 36px; padding-bottom: 96px; }
.spacer { height: 96px; }

/* ---- Cards ---------------------------------------------------------------------- */
.grid { display: grid; gap: 48px 32px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; }
.card { position: relative; display: flex; flex-direction: column; gap: 6px; }
.card-img { display: block; line-height: 0; margin-bottom: 8px; background: var(--paper); }
.card-img img, .card-img .img-missing { display: block; width: 100%; object-fit: cover; border: var(--rule); }
.cover img, .cover .img-missing { aspect-ratio: 1515 / 1744; }
.still img, .still .img-missing { aspect-ratio: 1080 / 600; }
.wide img, .wide .img-missing { aspect-ratio: 1080 / 530; }
.img-missing { display: block; width: 100%; }
.card-sticker { position: absolute; top: 14px; left: -8px; font-size: 16px; padding: 6px 12px; }
.card-title { margin: 0; font: 900 22px/1.05 var(--sans); text-transform: uppercase; }
.card-title a, .row-title a { text-decoration: none; }
.card-title a:hover, .row-title a:hover { text-decoration: underline; }
.card-meta { margin: 0; font: 15px/1.4 var(--mono); }
.card-kind { margin: 0; font-size: 14px; }
.card-link { align-self: flex-start; margin-top: auto; padding-top: 4px; font-size: 16px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.card-link.is-muted { text-decoration: none; font-weight: 400; }
.row-item { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 28px; align-items: start; padding: 18px 0; border-bottom: var(--dash); }
.post-row { grid-template-columns: 240px minmax(0, 1fr); }
.row-img { display: block; line-height: 0; }
.row-img img, .row-img .img-missing { width: 100%; aspect-ratio: 1080 / 530; object-fit: cover; border: var(--rule); }
.row-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.row-title { margin: 0; font: 900 26px/1.02 var(--sans); text-transform: uppercase; }
.row-item .card-link { margin-top: 0; white-space: nowrap; }
.list { margin-top: -18px; }

/* ---- Slider ------------------------------------------------------------------- */

/* ---- Home sections ----------------------------------------------------------- */
.home-hv { padding: 72px 0 72px; }
.home-hv .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 32px; }
.home-booking { padding: 8px 0 80px; }
.booking-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.booking-grid .title-card.is-big { grid-column: span 2; grid-row: span 1; }
.booking-grid .title-card .card-img img { aspect-ratio: auto; height: 230px; }
.booking-grid .title-card.is-big .card-img img, .booking-grid .title-card.is-tall .card-img img { height: 440px; }
.home-writing .wr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.wr-feature { display: flex; flex-direction: column; gap: 14px; padding-bottom: 16px; border-bottom: var(--dash); text-decoration: none; }
.wr-feature .card-title { font-size: 36px; line-height: 1; }
.wr-feature .card-kind { font-size: 15px; }
.wr-list { display: flex; flex-direction: column; margin-top: -16px; }
.wr-list .post-row { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 20px; padding: 16px 0; }
.wr-list .post-row:last-child { flex-grow: 1; }
.wr-list .row-title { font-size: 22px; line-height: 1.08; }

/* ---- Title / release pages ------------------------------------------------------ */
.title-page { padding-top: 48px; }
.title-page .lead-still, .post-page .lead-still { display: block; margin-top: 20px; width: 100%; aspect-ratio: 1080 / 480; object-fit: cover; border: var(--rule); }
.title-grid { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
.title-grid .h-title { margin-bottom: 22px; align-self: end; }
.title-grid .cta-cell { align-self: end; display: flex; }
.spec { font: 700 18px/1.4 var(--mono); text-transform: uppercase; padding: 12px 0; border-top: var(--dots); border-bottom: var(--dots); }
.title-main { display: flex; flex-direction: column; gap: 22px; padding: 22px 0 28px; border-bottom: var(--dots); }
.title-side { margin-top: -4px; padding-bottom: 28px; border-bottom: var(--dots); }
.title-side > .inner { padding-top: 22px; border-top: var(--dots); display: flex; flex-direction: column; gap: 22px; }
.title-side.is-details > .inner { padding-top: 10px; }
.cover-panel { padding: 48px; display: flex; justify-content: center; }
.cover-panel img { width: 100%; max-width: 440px; aspect-ratio: 1515 / 1744; object-fit: cover; border: var(--rule); transform: rotate(-1.5deg); display: block; }
.features h2 { margin: 0 0 10px; font: 700 16px var(--mono); text-transform: uppercase; }
.features ul { margin: 0; padding: 0 0 0 1.1em; font: 16px/1.55 var(--mono); letter-spacing: -.02em; display: flex; flex-direction: column; gap: 8px; }
.features li.sub { list-style: none; margin: 8px 0 0 -1.1em; font-weight: 700; text-transform: uppercase; }
.details-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
.details-row > div { padding: 18px 0; border-bottom: var(--dots); }
.details-row > div:last-child { padding: 22px 0; }
.details { margin: 0; font: 17px var(--mono); }
.details > div { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; }
.details dt { font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.details .leader { flex: 1; min-width: 16px; border-bottom: 3px dotted var(--black); transform: translateY(-4px); }
.details dd { margin: 0; text-align: right; }
.also-box { padding: 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.also-box.has-cover { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; }
.also-box.has-cover img { width: 100%; aspect-ratio: 1515 / 1744; object-fit: cover; border: var(--rule); display: block; }
.also-box .also-title { font: 900 28px/.95 var(--sans); text-transform: uppercase; text-decoration: none; }
.also-box.has-cover .also-title { font-size: 24px; }
.also-box > div { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.trailer-section { padding-top: 40px; padding-bottom: 104px; }
.trailer { position: relative; aspect-ratio: 16 / 9; background: var(--black); border: var(--rule); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.trailer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play { position: relative; width: 112px; height: 112px; border-radius: 50%; background: var(--green); border: var(--rule); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.play svg { width: 40px; height: 40px; fill: var(--black); }
.play:hover { background: var(--white); }

/* ---- Writing ------------------------------------------------------------------- */
.post-page { padding-top: 48px; padding-bottom: 104px; }
.post-col { max-width: 760px; margin: 48px auto 0; }
.post-col .h-title { margin: 0; }
.post-head { display: flex; flex-direction: column; gap: 16px; }
.post-head .spec { margin-top: 6px; }
.byline { font: 16px var(--mono); text-transform: uppercase; }
.byline a { font-weight: 700; }
.post-col .prose { margin-top: 36px; }
.post-nav { margin-top: 24px; padding-top: 16px; border-top: var(--dash); display: flex; justify-content: space-between; gap: 16px; font: 700 16px var(--mono); text-transform: uppercase; }
.post-nav a { text-decoration: none; }
.post-nav a:hover { text-decoration: underline; }

/* ---- About / Contact ---------------------------------------------------------- */
.two-col { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
.about-body { display: flex; flex-direction: column; gap: 18px; }
.about-body p { margin: 0; }
.about-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--rule); display: block; }
.faq { padding-top: 72px; padding-bottom: 104px; }
.faq-item { padding: 20px 0; border-bottom: var(--dash); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.faq-item h3 { margin: 0; font: 700 17px/1.55 var(--mono); letter-spacing: -.02em; }
.faq-item div p { margin: 0 0 .8em; }
.faq-item div p:last-child { margin: 0; }
.contact-form { display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font: 700 14px var(--mono); text-transform: uppercase; }
.field input, .field select, .field textarea { font: 17px var(--mono); padding: 12px 14px; border: 2px solid var(--black); background: var(--white); color: var(--black); width: 100%; border-radius: 0; }
.field textarea { resize: vertical; min-height: 180px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.contact-side { display: flex; flex-direction: column; gap: 32px; }
.email-box { padding: 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.email-box a { font: 900 32px/1 var(--sans); text-transform: uppercase; text-decoration: none; word-break: break-word; }
.side-block h2 { margin: 0 0 12px; font: 900 28px/.95 var(--sans); text-transform: uppercase; }
.side-block p { margin: 0 0 12px; }
.side-block.follow { padding-top: 22px; border-top: var(--dash); }
.inline-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.notice { font: 700 17px/1.5 var(--mono); padding: 16px 20px; border: var(--rule); background: var(--green); }
.notice.is-error { background: var(--white); }

/* ---- Search / pager / misc ----------------------------------------------------- */
.search-form { display: flex; max-width: 720px; margin: 28px 0; }
.search-form input { flex: 1; min-width: 0; font: 18px var(--mono); padding: 14px; border: 2px solid var(--black); border-right: 0; border-radius: 0; }
.search-form button { font: 900 18px var(--sans); text-transform: uppercase; background: var(--black); color: var(--green); border: 2px solid var(--black); padding: 14px 22px; cursor: pointer; }
.result-group { margin-top: 48px; }
.pager { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; margin-top: 56px; font: 700 17px var(--mono); text-transform: uppercase; }
.pager a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pager [aria-current] { background: var(--black); color: var(--green); padding: 0 8px; }
.director-section { padding-top: 56px; }

/* ---- Phones (≤ 760px) ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h-page { font-size: 80px; } .h-title { --fs: 72px; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .site-header .wrap { padding-top: 14px; }
  .header-bar { margin-top: 10px; padding: 10px 0 12px; position: relative; }
  .menu-toggle { display: flex; }
  .site-nav { display: none; }
  .site-nav.is-open { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: 100%; z-index: 20; background: var(--green); border-top: var(--rule); border-bottom: var(--rule); padding: 0 var(--gutter) 28px; }
  .site-nav.is-open > a { display: block; padding: 14px 0; border-bottom: var(--dash); font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: 0; }
  .site-nav.is-open > a[aria-current="page"] { background: none; color: inherit; margin: 0; padding: 14px 0; }
  .site-nav.is-open > a[aria-current="page"] span { background: var(--black); color: var(--green); padding: 0 8px; margin: 0 -8px; }
  .site-nav.is-open .nav-social { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font: 700 15px var(--mono); }
  .site-nav.is-open .nav-social a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

  .site-footer { clip-path: polygon(0% 6px, 1.65% 6px, 3.02% 5px, 5.24% 3px, 6.71% 4px, 8.97% 2px, 10.43% 4px, 12.41% 5px, 13.65% 6px, 15.98% 7px, 17.20% 6px, 18.28% 5px, 19.98% 7px, 21.07% 8px, 23.18% 6px, 25.46% 5px, 27.41% 6px, 29.65% 6px, 31.93% 7px, 33.32% 5px, 34.60% 3px, 36.83% 2px, 39.09% 3px, 40.28% 2px, 41.88% 2px, 44.23% 2px, 45.40% 4px, 46.67% 3px, 48.14% 2px, 49.32% 2px, 51.02% 4px, 52.72% 3px, 54.31% 4px, 55.58% 2px, 57.56% 2px, 58.80% 4px, 60.81% 2px, 61.88% 4px, 63.84% 3px, 65.88% 5px, 68.28% 3px, 70.50% 4px, 72.83% 3px, 74.05% 5px, 75.11% 5px, 77.30% 7px, 79.12% 5px, 81.34% 3px, 83.55% 5px, 85.06% 4px, 86.62% 6px, 88.67% 7px, 90.79% 7px, 91.79% 5px, 93.09% 6px, 94.46% 4px, 95.89% 4px, 97.04% 2px, 98.07% 4px, 100% 6px, 100% 100%, 0% 100%); }
  .site-footer .wrap { padding-top: 48px; padding-bottom: 28px; }
  .footer-top { grid-template-columns: 1fr; gap: 0; padding-bottom: 0; }
  .signup { padding-bottom: 28px; } .signup h2 { font-size: 26px; } .signup p { font-size: 16px; }
  .signup input, .signup button { font-size: 16px; }
  .footer-links { border-left: 0; padding: 22px 0; border-top: var(--dash); gap: 24px; display: grid; grid-template-columns: 1fr 1fr; }
  .footer-links > * { font-size: 17px; }
  .footer-bio { padding: 16px 0; font-size: 15px; } .footer-copy { font-size: 15px; padding-top: 12px; }
  .torn { clip-path: polygon(0% 6px, 1.02% 4px, 3.09% 3px, 5.04% 2px, 7.37% 4px, 8.70% 3px, 9.91% 2px, 11.83% 2px, 13.16% 3px, 14.89% 2px, 17.29% 2px, 18.45% 3px, 19.93% 2px, 21.39% 2px, 23.23% 2px, 24.52% 2px, 26.11% 4px, 27.19% 2px, 29.36% 2px, 30.55% 2px, 32.72% 3px, 33.77% 5px, 35.98% 4px, 37.27% 5px, 39.30% 4px, 40.76% 3px, 42.43% 3px, 43.90% 3px, 45.70% 4px, 47.61% 4px, 49.96% 2px, 52.06% 2px, 54.32% 4px, 56.19% 6px, 58.36% 6px, 59.49% 5px, 60.53% 7px, 62.06% 5px, 64.00% 5px, 66.27% 4px, 67.43% 3px, 69.55% 4px, 71.11% 2px, 72.90% 2px, 74.28% 2px, 76.62% 2px, 78.09% 2px, 79.76% 3px, 81.61% 5px, 83.00% 5px, 85.38% 6px, 87.27% 4px, 89.46% 5px, 90.66% 7px, 92.63% 5px, 93.98% 6px, 95.47% 4px, 96.61% 6px, 98.00% 5px, 100% 6px, 100% 100%, 0% 100%); padding: 48px 0 72px; }

  .h-page { font-size: 56px; line-height: .88; } .h-title { --fs: 48px; line-height: .88; }
  .h-section { font-size: 34px; line-height: .92; } .h-sub { font-size: 28px; }
  .body-text, .prose { font-size: 16px; }
  .kicker { font-size: 14px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 12px; margin-bottom: 22px; }
  .all-link { font-size: 15px; }
  .page-head { padding-top: 32px; }
  .head-block { gap: 14px; padding-bottom: 16px; }
  .controls { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 0; font-size: 15px; }
  .controls-left { flex-direction: column; align-items: flex-start; gap: 10px; }
  .control { gap: 6px 18px; }
  .control a { padding: 2px 7px; margin: 0 -7px; }
  .listing { padding-top: 24px; padding-bottom: 72px; }

  .grid, .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .grid-1-phone { grid-template-columns: 1fr; gap: 32px; }
  .card-title { font-size: 17px; } .card-meta { font-size: 13px; line-height: 1.35; } .card-link { font-size: 13px; }
  .card-kind { font-size: 12px; }
  .card-sticker { top: 10px; left: -6px; font-size: 13px; padding: 4px 9px; }
  .row-item, .post-row { grid-template-columns: 128px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
  .row-item > .card-link { grid-column: 2; margin-top: -8px; }
  .row-title { font-size: 17px; line-height: 1.05; }
  .list { margin-top: -14px; }

  .home-hv { padding: 40px 0 8px; }
  .home-hv .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .home-booking { padding: 40px 0 72px; }
  .booking-grid { grid-template-columns: 1fr; gap: 32px; }
  .booking-grid .title-card.is-big { grid-column: auto; }
  .booking-grid .title-card .card-img img, .booking-grid .title-card.is-big .card-img img { height: auto; aspect-ratio: 1080 / 640; }
  .booking-grid .card-title { font-size: 22px; }
  .home-writing .wr-grid { grid-template-columns: 1fr; gap: 0; }
  .wr-feature .card-title { font-size: 24px; }
  .wr-list { margin-top: 0; }
  .wr-list .post-row { grid-template-columns: 128px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
  .wr-list .row-title { font-size: 17px; }

  .title-page { padding-top: 24px; }
  .title-page .lead-still, .post-page .lead-still { margin-top: 18px; aspect-ratio: 1080 / 600; }
  .title-grid, .details-row, .two-col { grid-template-columns: 1fr; margin-top: 18px; }
  .title-grid .h-title { margin-bottom: 18px; order: 1; font-size: min(var(--fs), calc(100cqi / (var(--w, 8) * .74))); }
  .title-grid .spec { order: 2; }
  .title-grid .cta-cell { order: 3; margin-top: 18px; }
  .title-grid .cta-cell .btn { display: block; width: 100%; text-align: center; font-size: 20px; padding: 14px 20px; }
  .title-grid .spacer-cell { display: none; }
  .title-main { order: 4; padding: 18px 0 0; border-bottom: 0; gap: 18px; }
  .title-side { order: 5; margin-top: 18px; padding-bottom: 0; border-bottom: 0; }
  .title-side > .inner { padding-top: 0; border-top: 0; gap: 18px; }
  .spec { font-size: 15px; padding: 10px 0; }
  .cover-panel { padding: 28px; }
  .cover-panel img { max-width: 280px; }
  .details-row { margin-top: 18px; }
  .details-row > div { padding: 8px 0; border-top: var(--dots); }
  .details-row > div:last-child { border-top: 0; padding: 18px 0 0; border-bottom: 0; }
  .details { font-size: 15px; } .details > div { padding: 7px 0; gap: 6px; }
  .also-box { padding: 20px; } .also-box .also-title { font-size: 24px; }
  .also-box.has-cover { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 18px; }
  .also-box.has-cover .also-title { font-size: 20px; }
  .trailer-section { padding-top: 18px; padding-bottom: 48px; }
  .play { width: 64px; height: 64px; } .play svg { width: 24px; height: 24px; }

  .post-page { padding-top: 24px; padding-bottom: 48px; }
  .post-col { margin-top: 18px; }
  .post-head .spec { margin-top: 0; }
  .byline { font-size: 14px; }
  .post-col .prose { margin-top: 10px; }
  .prose .capsule { padding: 28px 0; }
  .post-col .prose h2, .post-col .prose h3, .post-col .prose h4, .prose .capsule > p:first-child > strong:first-child { font-size: 18px; }
  .post-nav { flex-direction: column; gap: 10px; font-size: 14px; }

  .about-body { margin-top: 0; } .two-col > * + * { margin-top: 24px; }
  .about-media { order: -1; margin-bottom: 0; }
  .faq { padding-top: 48px; padding-bottom: 72px; }
  .faq-item { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
  .faq-item h3 { font-size: 16px; }
  .field-pair { grid-template-columns: 1fr; gap: 18px; }
  .contact-form { gap: 18px; }
  .contact-form .btn { width: 100%; font-size: 20px; }
  .email-box { padding: 20px; } .email-box a { font-size: 24px; }
  .side-block h2 { font-size: 24px; }
  .search-form input, .search-form button { font-size: 16px; }
  .pager { font-size: 15px; }
}

/* ---- Homepage hero (four layouts; the admin chooses one, ?hero=a|b|c|d previews) ---- */
.hero { position: relative; }
.hero .slide-img { position: relative; background: var(--black); overflow: hidden; }
.hero .slide-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.hero .slide-img img.is-on { opacity: 1; }
.hero .slide-texts { container-type: inline-size; }
.hero .slide-caption .wrap { width: 100%; }
.hero .slide-text { display: none; flex-direction: column; align-items: flex-start; gap: 14px; }
.hero .slide-text.is-on { display: flex; }
.hero .slide-title { --sfs: 76px; margin: 0; max-width: 100%; font: 900 min(var(--sfs), calc(100cqi / (var(--w, 8) * .74)))/.88 var(--sans); text-transform: uppercase; letter-spacing: -.015em; }
.hero .slide-title a { text-decoration: none; }
.hero .slide-text p { margin: 0; max-width: 32em; font: 18px/1.5 var(--mono); letter-spacing: -.02em; }
.hero .slide-cta { margin-top: 8px; background: var(--green); color: var(--black); border: var(--rule); font: 900 20px var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 12px 28px; }
.hero .slide-cta:hover { background: var(--black); color: var(--green); }
.hero .slide-nav { display: flex; align-items: center; gap: 16px; }
.hero .slide-dots { display: flex; gap: 6px; }
.hero .slide-dots span { width: 10px; height: 10px; border: 2px solid currentColor; }
.hero .slide-dots span.is-on { background: currentColor; }
.hero .slide-arrows { display: flex; }
.hero .slide-arrows button { width: 48px; height: 48px; background: var(--black); border: 3px solid var(--white); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hero .slide-arrows button + button { border-left: 0; }
.hero .slide-arrows button:hover { background: var(--white); color: var(--black); }

/* A — AGFA variation: full-bleed still, text on a dark fade at left, torn bottom edge. */
.hero-a .slide-img { height: clamp(400px, 56vh, 540px); clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 7px), 99.36% calc(100% - 1px), 99.23% calc(100% - 1px), 98.89% calc(100% - 1px), 98.70% calc(100% - 3px), 98.39% calc(100% - 4px), 98.24% calc(100% - 2px), 98.08% calc(100% - 1px), 97.86% calc(100% - 1px), 97.73% calc(100% - 1px), 97.54% calc(100% - 1px), 97.36% calc(100% - 3px), 97.24% calc(100% - 2px), 96.97% calc(100% - 1px), 96.76% calc(100% - 2px), 96.43% calc(100% - 4px), 96.18% calc(100% - 5px), 95.99% calc(100% - 4px), 95.86% calc(100% - 5px), 95.51% calc(100% - 6px), 95.32% calc(100% - 6px), 95.04% calc(100% - 5px), 94.78% calc(100% - 6px), 94.46% calc(100% - 7px), 94.18% calc(100% - 9px), 93.86% calc(100% - 8px), 93.58% calc(100% - 7px), 93.36% calc(100% - 6px), 93.24% calc(100% - 7px), 93.09% calc(100% - 6px), 92.86% calc(100% - 8px), 92.56% calc(100% - 7px), 92.24% calc(100% - 7px), 92.07% calc(100% - 7px), 91.92% calc(100% - 7px), 91.59% calc(100% - 9px), 91.39% calc(100% - 9px), 91.08% calc(100% - 8px), 90.75% calc(100% - 7px), 90.45% calc(100% - 9px), 90.29% calc(100% - 7px), 90.14% calc(100% - 5px), 89.96% calc(100% - 5px), 89.84% calc(100% - 5px), 89.69% calc(100% - 7px), 89.37% calc(100% - 9px), 89.04% calc(100% - 11px), 88.91% calc(100% - 12px), 88.75% calc(100% - 12px), 88.44% calc(100% - 10px), 88.22% calc(100% - 8px), 87.97% calc(100% - 10px), 87.82% calc(100% - 10px), 87.69% calc(100% - 8px), 87.42% calc(100% - 10px), 87.26% calc(100% - 12px), 86.99% calc(100% - 10px), 86.84% calc(100% - 11px), 86.62% calc(100% - 9px), 86.40% calc(100% - 11px), 86.08% calc(100% - 13px), 85.75% calc(100% - 11px), 85.59% calc(100% - 11px), 85.41% calc(100% - 10px), 85.17% calc(100% - 10px), 84.93% calc(100% - 11px), 84.60% calc(100% - 9px), 84.30% calc(100% - 10px), 83.97% calc(100% - 9px), 83.72% calc(100% - 10px), 83.46% calc(100% - 8px), 83.14% calc(100% - 7px), 82.98% calc(100% - 9px), 82.69% calc(100% - 10px), 82.41% calc(100% - 9px), 82.28% calc(100% - 8px), 82.01% calc(100% - 9px), 81.73% calc(100% - 9px), 81.58% calc(100% - 7px), 81.31% calc(100% - 5px), 81.15% calc(100% - 3px), 80.88% calc(100% - 4px), 80.64% calc(100% - 3px), 80.41% calc(100% - 2px), 80.15% calc(100% - 2px), 79.98% calc(100% - 2px), 79.81% calc(100% - 1px), 79.47% calc(100% - 2px), 79.22% calc(100% - 1px), 78.97% calc(100% - 1px), 78.65% calc(100% - 2px), 78.37% calc(100% - 3px), 78.13% calc(100% - 2px), 77.89% calc(100% - 1px), 77.56% calc(100% - 2px), 77.29% calc(100% - 1px), 77.03% calc(100% - 1px), 76.70% calc(100% - 2px), 76.43% calc(100% - 1px), 76.16% calc(100% - 1px), 75.97% calc(100% - 1px), 75.75% calc(100% - 1px), 75.40% calc(100% - 2px), 75.05% calc(100% - 2px), 74.79% calc(100% - 1px), 74.45% calc(100% - 1px), 74.13% calc(100% - 3px), 73.79% calc(100% - 4px), 73.46% calc(100% - 5px), 73.27% calc(100% - 7px), 73.01% calc(100% - 5px), 72.68% calc(100% - 5px), 72.41% calc(100% - 3px), 72.17% calc(100% - 1px), 72.04% calc(100% - 1px), 71.83% calc(100% - 1px), 71.56% calc(100% - 1px), 71.36% calc(100% - 1px), 71.03% calc(100% - 1px), 70.86% calc(100% - 2px), 70.67% calc(100% - 1px), 70.37% calc(100% - 3px), 70.08% calc(100% - 4px), 69.86% calc(100% - 3px), 69.59% calc(100% - 3px), 69.28% calc(100% - 5px), 68.93% calc(100% - 6px), 68.68% calc(100% - 6px), 68.44% calc(100% - 7px), 68.29% calc(100% - 5px), 68.16% calc(100% - 6px), 67.81% calc(100% - 7px), 67.50% calc(100% - 9px), 67.36% calc(100% - 11px), 67.08% calc(100% - 11px), 66.76% calc(100% - 11px), 66.63% calc(100% - 13px), 66.33% calc(100% - 13px), 66.15% calc(100% - 11px), 65.98% calc(100% - 10px), 65.80% calc(100% - 10px), 65.55% calc(100% - 8px), 65.43% calc(100% - 10px), 65.21% calc(100% - 11px), 64.90% calc(100% - 11px), 64.69% calc(100% - 13px), 64.46% calc(100% - 13px), 64.13% calc(100% - 13px), 63.99% calc(100% - 11px), 63.79% calc(100% - 10px), 63.44% calc(100% - 9px), 63.22% calc(100% - 11px), 62.91% calc(100% - 13px), 62.67% calc(100% - 13px), 62.52% calc(100% - 13px), 62.28% calc(100% - 13px), 62.10% calc(100% - 12px), 61.95% calc(100% - 13px), 61.66% calc(100% - 11px), 61.51% calc(100% - 12px), 61.20% calc(100% - 13px), 60.86% calc(100% - 11px), 60.55% calc(100% - 11px), 60.23% calc(100% - 10px), 59.90% calc(100% - 11px), 59.71% calc(100% - 13px), 59.50% calc(100% - 13px), 59.35% calc(100% - 11px), 59.18% calc(100% - 12px), 59.03% calc(100% - 12px), 58.88% calc(100% - 11px), 58.66% calc(100% - 13px), 58.50% calc(100% - 12px), 58.28% calc(100% - 12px), 58.00% calc(100% - 10px), 57.68% calc(100% - 11px), 57.47% calc(100% - 11px), 57.14% calc(100% - 11px), 56.99% calc(100% - 13px), 56.79% calc(100% - 13px), 56.47% calc(100% - 13px), 56.24% calc(100% - 13px), 55.94% calc(100% - 13px), 55.76% calc(100% - 11px), 55.48% calc(100% - 12px), 55.27% calc(100% - 12px), 55.06% calc(100% - 11px), 54.83% calc(100% - 10px), 54.54% calc(100% - 10px), 54.29% calc(100% - 9px), 54.02% calc(100% - 10px), 53.86% calc(100% - 10px), 53.54% calc(100% - 11px), 53.37% calc(100% - 13px), 53.21% calc(100% - 13px), 52.86% calc(100% - 13px), 52.71% calc(100% - 13px), 52.56% calc(100% - 13px), 52.25% calc(100% - 11px), 51.98% calc(100% - 13px), 51.85% calc(100% - 13px), 51.50% calc(100% - 12px), 51.32% calc(100% - 12px), 51.00% calc(100% - 13px), 50.79% calc(100% - 13px), 50.46% calc(100% - 11px), 50.19% calc(100% - 12px), 49.97% calc(100% - 13px), 49.63% calc(100% - 12px), 49.30% calc(100% - 12px), 49.11% calc(100% - 12px), 48.93% calc(100% - 12px), 48.67% calc(100% - 10px), 48.47% calc(100% - 11px), 48.20% calc(100% - 12px), 48.05% calc(100% - 10px), 47.86% calc(100% - 12px), 47.56% calc(100% - 12px), 47.25% calc(100% - 11px), 46.99% calc(100% - 12px), 46.79% calc(100% - 12px), 46.59% calc(100% - 13px), 46.32% calc(100% - 13px), 46.12% calc(100% - 11px), 45.87% calc(100% - 10px), 45.57% calc(100% - 10px), 45.28% calc(100% - 9px), 45.14% calc(100% - 8px), 45.01% calc(100% - 9px), 44.86% calc(100% - 9px), 44.53% calc(100% - 7px), 44.38% calc(100% - 9px), 44.03% calc(100% - 9px), 43.83% calc(100% - 11px), 43.69% calc(100% - 9px), 43.39% calc(100% - 8px), 43.12% calc(100% - 8px), 42.82% calc(100% - 7px), 42.56% calc(100% - 6px), 42.23% calc(100% - 5px), 41.97% calc(100% - 3px), 41.71% calc(100% - 5px), 41.56% calc(100% - 3px), 41.23% calc(100% - 5px), 40.92% calc(100% - 7px), 40.78% calc(100% - 9px), 40.58% calc(100% - 10px), 40.26% calc(100% - 11px), 40.06% calc(100% - 13px), 39.81% calc(100% - 11px), 39.53% calc(100% - 10px), 39.30% calc(100% - 10px), 39.18% calc(100% - 11px), 39.05% calc(100% - 11px), 38.73% calc(100% - 9px), 38.51% calc(100% - 8px), 38.27% calc(100% - 8px), 37.97% calc(100% - 6px), 37.73% calc(100% - 7px), 37.56% calc(100% - 9px), 37.28% calc(100% - 7px), 36.96% calc(100% - 7px), 36.64% calc(100% - 5px), 36.34% calc(100% - 3px), 36.01% calc(100% - 4px), 35.72% calc(100% - 4px), 35.56% calc(100% - 5px), 35.43% calc(100% - 6px), 35.19% calc(100% - 8px), 34.89% calc(100% - 10px), 34.58% calc(100% - 11px), 34.28% calc(100% - 11px), 33.94% calc(100% - 11px), 33.61% calc(100% - 11px), 33.27% calc(100% - 9px), 32.96% calc(100% - 11px), 32.80% calc(100% - 12px), 32.49% calc(100% - 13px), 32.26% calc(100% - 13px), 32.05% calc(100% - 12px), 31.77% calc(100% - 12px), 31.56% calc(100% - 10px), 31.26% calc(100% - 9px), 30.94% calc(100% - 7px), 30.76% calc(100% - 9px), 30.57% calc(100% - 10px), 30.38% calc(100% - 8px), 30.20% calc(100% - 6px), 30.07% calc(100% - 6px), 29.92% calc(100% - 5px), 29.74% calc(100% - 3px), 29.59% calc(100% - 2px), 29.26% calc(100% - 2px), 29.07% calc(100% - 1px), 28.87% calc(100% - 2px), 28.62% calc(100% - 2px), 28.35% calc(100% - 4px), 28.11% calc(100% - 3px), 27.89% calc(100% - 2px), 27.58% calc(100% - 3px), 27.35% calc(100% - 5px), 27.04% calc(100% - 6px), 26.83% calc(100% - 4px), 26.67% calc(100% - 3px), 26.44% calc(100% - 3px), 26.27% calc(100% - 4px), 25.99% calc(100% - 4px), 25.81% calc(100% - 5px), 25.46% calc(100% - 5px), 25.13% calc(100% - 7px), 24.80% calc(100% - 9px), 24.60% calc(100% - 10px), 24.47% calc(100% - 8px), 24.25% calc(100% - 9px), 24.08% calc(100% - 7px), 23.88% calc(100% - 9px), 23.60% calc(100% - 8px), 23.31% calc(100% - 8px), 23.16% calc(100% - 10px), 23.02% calc(100% - 10px), 22.81% calc(100% - 10px), 22.55% calc(100% - 12px), 22.29% calc(100% - 11px), 22.15% calc(100% - 9px), 21.91% calc(100% - 7px), 21.58% calc(100% - 5px), 21.41% calc(100% - 5px), 21.11% calc(100% - 5px), 20.87% calc(100% - 4px), 20.54% calc(100% - 3px), 20.22% calc(100% - 5px), 19.94% calc(100% - 6px), 19.69% calc(100% - 8px), 19.34% calc(100% - 7px), 19.09% calc(100% - 7px), 18.76% calc(100% - 8px), 18.54% calc(100% - 10px), 18.25% calc(100% - 9px), 18.00% calc(100% - 9px), 17.65% calc(100% - 7px), 17.48% calc(100% - 6px), 17.27% calc(100% - 7px), 17.02% calc(100% - 7px), 16.74% calc(100% - 8px), 16.56% calc(100% - 10px), 16.27% calc(100% - 8px), 15.99% calc(100% - 9px), 15.72% calc(100% - 8px), 15.53% calc(100% - 6px), 15.21% calc(100% - 6px), 14.98% calc(100% - 4px), 14.66% calc(100% - 5px), 14.48% calc(100% - 4px), 14.25% calc(100% - 4px), 13.95% calc(100% - 2px), 13.68% calc(100% - 3px), 13.36% calc(100% - 3px), 13.20% calc(100% - 3px), 12.85% calc(100% - 1px), 12.59% calc(100% - 1px), 12.35% calc(100% - 1px), 12.19% calc(100% - 3px), 11.85% calc(100% - 3px), 11.53% calc(100% - 5px), 11.23% calc(100% - 6px), 11.02% calc(100% - 7px), 10.80% calc(100% - 5px), 10.62% calc(100% - 6px), 10.40% calc(100% - 5px), 10.23% calc(100% - 5px), 9.99% calc(100% - 5px), 9.73% calc(100% - 7px), 9.49% calc(100% - 5px), 9.36% calc(100% - 5px), 9.20% calc(100% - 5px), 8.91% calc(100% - 6px), 8.61% calc(100% - 8px), 8.48% calc(100% - 9px), 8.31% calc(100% - 8px), 8.18% calc(100% - 10px), 7.87% calc(100% - 9px), 7.71% calc(100% - 8px), 7.46% calc(100% - 6px), 7.26% calc(100% - 4px), 7.08% calc(100% - 4px), 6.80% calc(100% - 6px), 6.48% calc(100% - 5px), 6.28% calc(100% - 5px), 5.94% calc(100% - 5px), 5.67% calc(100% - 7px), 5.46% calc(100% - 9px), 5.24% calc(100% - 7px), 4.98% calc(100% - 5px), 4.67% calc(100% - 4px), 4.42% calc(100% - 2px), 4.17% calc(100% - 4px), 3.93% calc(100% - 2px), 3.66% calc(100% - 3px), 3.32% calc(100% - 5px), 3.15% calc(100% - 4px), 2.84% calc(100% - 2px), 2.71% calc(100% - 4px), 2.44% calc(100% - 6px), 2.30% calc(100% - 6px), 2.17% calc(100% - 7px), 2.01% calc(100% - 8px), 1.66% calc(100% - 8px), 1.39% calc(100% - 9px), 1.22% calc(100% - 11px), 0.94% calc(100% - 9px), 0.71% calc(100% - 8px), 0.50% calc(100% - 8px), 0.23% calc(100% - 9px), 0% calc(100% - 7px)); }
.hero-a .slide-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,0) 72%); }
.hero-a .slide-caption { position: absolute; inset: 0 0 14px; color: var(--white); }
.hero-a .slide-caption .wrap { height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; }
.hero-a .slide-texts { max-width: 640px; }
.hero-a .sticker { background: var(--white); color: var(--black); }
.hero-a .slide-nav { position: absolute; right: var(--gutter); bottom: 34px; }

/* B — Two columns, like About: text left, framed still right. */
.hero-b { border-bottom: var(--dots); }
.hero-b .hero-frame { max-width: var(--maxw); margin: 0 auto; padding: 44px var(--gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.hero-b .slide-img { order: 2; aspect-ratio: 16 / 9; border: var(--rule); }
.hero-b .slide-caption { order: 1; }
.hero-b .slide-caption .wrap { padding: 0; display: flex; flex-direction: column; gap: 28px; }
.hero-b .slide-title { --sfs: 72px; }
.hero-b .slide-arrows button { border-color: var(--black); }

/* C — Same frame as the big stills on title pages: inside the page margins, black caption panel. */
.hero-c .hero-frame { max-width: var(--maxw); margin: 0 auto; padding: 32px var(--gutter) 0; position: relative; }
.hero-c .slide-img { aspect-ratio: 2.6 / 1; border: var(--rule); }
.hero-c .slide-caption { position: absolute; left: calc(var(--gutter) + 3px); bottom: 3px; width: min(600px, 52%); color: var(--white); background: var(--black); }
.hero-c .slide-caption .wrap { padding: 26px 30px 28px; display: flex; flex-direction: column; gap: 22px; }
.hero-c .slide-title { --sfs: 60px; }
.hero-c .sticker { background: var(--white); color: var(--black); }

/* D — Split: black panel with a torn edge on the left, still bleeding off the right. */
.hero-d .hero-frame { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); height: 520px; overflow: hidden; border-bottom: var(--rule); }
.hero-d .slide-caption { overflow: hidden; }
.hero-d .slide-img { order: 2; height: 100%; }
.hero-d .slide-caption { order: 1; position: relative; z-index: 1; margin-right: -16px; clip-path: polygon(0% 0%, calc(100% - 8px) 0%, calc(100% - 9px) 0.32%, calc(100% - 10px) 0.86%, calc(100% - 11px) 1.49%, calc(100% - 13px) 2.10%, calc(100% - 14px) 2.44%, calc(100% - 12px) 2.79%, calc(100% - 14px) 3.05%, calc(100% - 13px) 3.49%, calc(100% - 12px) 4.10%, calc(100% - 10px) 4.76%, calc(100% - 11px) 5.21%, calc(100% - 9px) 5.74%, calc(100% - 11px) 6.42%, calc(100% - 9px) 6.89%, calc(100% - 9px) 7.43%, calc(100% - 7px) 7.69%, calc(100% - 5px) 8.00%, calc(100% - 7px) 8.45%, calc(100% - 8px) 9.03%, calc(100% - 7px) 9.50%, calc(100% - 8px) 10.05%, calc(100% - 7px) 10.69%, calc(100% - 6px) 10.97%, calc(100% - 8px) 11.32%, calc(100% - 6px) 12.01%, calc(100% - 7px) 12.32%, calc(100% - 8px) 12.82%, calc(100% - 7px) 13.16%, calc(100% - 8px) 13.81%, calc(100% - 9px) 14.19%, calc(100% - 9px) 14.66%, calc(100% - 10px) 15.36%, calc(100% - 8px) 15.73%, calc(100% - 9px) 16.05%, calc(100% - 7px) 16.30%, calc(100% - 9px) 16.80%, calc(100% - 11px) 17.15%, calc(100% - 13px) 17.55%, calc(100% - 12px) 17.85%, calc(100% - 12px) 18.38%, calc(100% - 14px) 18.78%, calc(100% - 13px) 19.45%, calc(100% - 11px) 19.75%, calc(100% - 10px) 20.41%, calc(100% - 10px) 21.01%, calc(100% - 8px) 21.34%, calc(100% - 7px) 21.89%, calc(100% - 6px) 22.32%, calc(100% - 8px) 23.01%, calc(100% - 8px) 23.26%, calc(100% - 9px) 23.73%, calc(100% - 8px) 24.28%, calc(100% - 6px) 24.61%, calc(100% - 7px) 25.05%, calc(100% - 8px) 25.65%, calc(100% - 8px) 25.93%, calc(100% - 8px) 26.20%, calc(100% - 6px) 26.75%, calc(100% - 5px) 27.19%, calc(100% - 5px) 27.61%, calc(100% - 4px) 28.15%, calc(100% - 5px) 28.85%, calc(100% - 4px) 29.12%, calc(100% - 6px) 29.80%, calc(100% - 7px) 30.46%, calc(100% - 6px) 30.72%, calc(100% - 6px) 31.38%, calc(100% - 6px) 31.99%, calc(100% - 7px) 32.51%, calc(100% - 8px) 32.97%, calc(100% - 10px) 33.36%, calc(100% - 9px) 33.88%, calc(100% - 7px) 34.47%, calc(100% - 6px) 34.90%, calc(100% - 4px) 35.58%, calc(100% - 4px) 35.94%, calc(100% - 6px) 36.48%, calc(100% - 7px) 36.92%, calc(100% - 6px) 37.51%, calc(100% - 4px) 37.82%, calc(100% - 3px) 38.25%, calc(100% - 4px) 38.51%, calc(100% - 2px) 39.12%, calc(100% - 2px) 39.76%, calc(100% - 4px) 40.06%, calc(100% - 5px) 40.74%, calc(100% - 4px) 41.21%, calc(100% - 3px) 41.74%, calc(100% - 4px) 42.07%, calc(100% - 6px) 42.41%, calc(100% - 8px) 43.00%, calc(100% - 6px) 43.57%, calc(100% - 4px) 44.18%, calc(100% - 2px) 44.60%, calc(100% - 4px) 45.03%, calc(100% - 3px) 45.36%, calc(100% - 5px) 45.72%, calc(100% - 3px) 46.12%, calc(100% - 2px) 46.48%, calc(100% - 2px) 46.87%, calc(100% - 4px) 47.48%, calc(100% - 6px) 47.95%, calc(100% - 8px) 48.25%, calc(100% - 10px) 48.53%, calc(100% - 12px) 49.11%, calc(100% - 14px) 49.50%, calc(100% - 14px) 49.98%, calc(100% - 14px) 50.32%, calc(100% - 13px) 50.93%, calc(100% - 13px) 51.34%, calc(100% - 14px) 51.89%, calc(100% - 12px) 52.19%, calc(100% - 13px) 52.73%, calc(100% - 11px) 53.21%, calc(100% - 12px) 53.76%, calc(100% - 14px) 54.23%, calc(100% - 14px) 54.65%, calc(100% - 12px) 54.93%, calc(100% - 13px) 55.21%, calc(100% - 13px) 55.47%, calc(100% - 14px) 56.04%, calc(100% - 14px) 56.62%, calc(100% - 14px) 57.23%, calc(100% - 14px) 57.65%, calc(100% - 12px) 58.00%, calc(100% - 11px) 58.27%, calc(100% - 13px) 58.74%, calc(100% - 14px) 59.39%, calc(100% - 14px) 59.92%, calc(100% - 14px) 60.47%, calc(100% - 14px) 61.04%, calc(100% - 14px) 61.40%, calc(100% - 14px) 61.82%, calc(100% - 14px) 62.24%, calc(100% - 12px) 62.93%, calc(100% - 11px) 63.25%, calc(100% - 12px) 63.64%, calc(100% - 10px) 64.21%, calc(100% - 8px) 64.71%, calc(100% - 10px) 65.20%, calc(100% - 11px) 65.87%, calc(100% - 10px) 66.56%, calc(100% - 9px) 67.13%, calc(100% - 9px) 67.69%, calc(100% - 8px) 68.22%, calc(100% - 6px) 68.59%, calc(100% - 6px) 68.99%, calc(100% - 5px) 69.66%, calc(100% - 7px) 70.32%, calc(100% - 9px) 70.66%, calc(100% - 10px) 71.22%, calc(100% - 11px) 71.54%, calc(100% - 12px) 72.00%, calc(100% - 12px) 72.45%, calc(100% - 13px) 73.01%, calc(100% - 11px) 73.54%, calc(100% - 10px) 73.87%, calc(100% - 10px) 74.14%, calc(100% - 12px) 74.39%, calc(100% - 13px) 74.91%, calc(100% - 14px) 75.43%, calc(100% - 12px) 75.79%, calc(100% - 11px) 76.46%, calc(100% - 11px) 76.75%, calc(100% - 11px) 77.09%, calc(100% - 11px) 77.74%, calc(100% - 13px) 78.07%, calc(100% - 14px) 78.67%, calc(100% - 12px) 79.16%, calc(100% - 13px) 79.55%, calc(100% - 14px) 79.98%, calc(100% - 14px) 80.34%, calc(100% - 14px) 80.95%, calc(100% - 12px) 81.62%, calc(100% - 10px) 82.17%, calc(100% - 9px) 82.45%, calc(100% - 10px) 82.77%, calc(100% - 12px) 83.39%, calc(100% - 13px) 83.88%, calc(100% - 13px) 84.34%, calc(100% - 12px) 84.66%, calc(100% - 12px) 85.07%, calc(100% - 10px) 85.61%, calc(100% - 8px) 86.26%, calc(100% - 7px) 86.81%, calc(100% - 6px) 87.29%, calc(100% - 6px) 87.70%, calc(100% - 4px) 87.98%, calc(100% - 4px) 88.49%, calc(100% - 5px) 89.05%, calc(100% - 3px) 89.37%, calc(100% - 3px) 89.72%, calc(100% - 4px) 90.21%, calc(100% - 3px) 90.55%, calc(100% - 5px) 91.13%, calc(100% - 5px) 91.57%, calc(100% - 4px) 92.19%, calc(100% - 4px) 92.67%, calc(100% - 3px) 93.19%, calc(100% - 3px) 93.45%, calc(100% - 2px) 93.92%, calc(100% - 3px) 94.56%, calc(100% - 3px) 95.18%, calc(100% - 2px) 95.73%, calc(100% - 4px) 96.29%, calc(100% - 2px) 96.78%, calc(100% - 3px) 97.46%, calc(100% - 4px) 97.81%, calc(100% - 4px) 98.48%, calc(100% - 4px) 98.74%, calc(100% - 4px) 99.06%, calc(100% - 5px) 99.59%, calc(100% - 8px) 100%, 0% 100%); color: var(--white);
  background-color: var(--black); background-image: radial-gradient(rgba(255,255,255,.13) .9px, transparent 1.1px), radial-gradient(rgba(255,255,255,.13) .9px, transparent 1.1px); background-size: 5px 5px; background-position: 0 0, 2.5px 2.5px; }
.hero-d .slide-caption .wrap { height: 100%; max-width: none; margin: 0; padding: 40px 56px 40px max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.hero-d .slide-title.t-l  { --sfs: 68px; }
.hero-d .slide-title.t-m  { --sfs: 56px; }
.hero-d .slide-title.t-s  { --sfs: 44px; }
.hero-d .slide-title.t-xs { --sfs: 36px; }
.hero-d .slide-text p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* arrows sit at the bottom right, over the still (as in layout A) */
.hero-d .hero-frame > .slide-nav { position: absolute; z-index: 2; right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); bottom: 32px; color: var(--white); }
.hero-d .hero-frame > .slide-nav .slide-dots { background: var(--black); padding: 8px 10px; }
.hero-d .sticker { background: var(--white); color: var(--black); }

@media (max-width: 1100px) {
  .hero .slide-title { --sfs: 60px; }
  .hero-d .slide-title.t-l { --sfs: 58px; } .hero-d .slide-title.t-m { --sfs: 48px; } .hero-d .slide-title.t-s { --sfs: 38px; } .hero-d .slide-title.t-xs { --sfs: 32px; }
  .hero-d .hero-frame { height: 480px; }
  .hero-b .hero-frame { gap: 36px; }
  .hero-c .slide-caption { width: 62%; }
}
@media (max-width: 760px) {
  .hero .slide-title { --sfs: 44px; line-height: .9; }
  .hero .slide-text p { font-size: 16px; }
  .hero .slide-cta { font-size: 17px; padding: 11px 22px; }
  .hero .slide-arrows button { width: 44px; height: 44px; }
  .hero .slide-nav { justify-content: space-between; }
  /* every layout stacks: still on top, words underneath */
  .hero-a .slide-img, .hero-d .slide-img, .hero-c .slide-img, .hero-b .slide-img { height: auto; aspect-ratio: 16 / 10; clip-path: none; }
  .hero-a .slide-img::after { display: none; }
  .hero-a .slide-caption, .hero-d .slide-caption { position: relative; inset: auto; margin: -14px 0 0; padding-top: 14px; clip-path: polygon(0% 6px, 1.33% 8px, 2.52% 10px, 4.18% 12px, 5.27% 10px, 7.54% 11px, 8.91% 10px, 10.18% 11px, 11.93% 12px, 13.60% 11px, 14.92% 10px, 17.14% 12px, 18.69% 10px, 20.63% 8px, 21.85% 10px, 22.91% 8px, 25.06% 8px, 26.72% 9px, 28.72% 10px, 30.28% 12px, 31.90% 11px, 34.13% 9px, 35.18% 10px, 36.48% 11px, 38.57% 11px, 40.16% 12px, 41.97% 12px, 43.79% 12px, 45.11% 12px, 47.07% 10px, 49.26% 12px, 51.20% 11px, 53.18% 11px, 55.53% 12px, 57.33% 11px, 59.22% 12px, 60.59% 10px, 61.68% 11px, 62.80% 9px, 64.38% 8px, 65.41% 9px, 67.48% 7px, 68.54% 9px, 70.61% 10px, 72.62% 10px, 74.39% 10px, 76.09% 8px, 77.53% 6px, 78.68% 8px, 79.72% 7px, 82.08% 7px, 83.94% 6px, 85.90% 6px, 87.34% 5px, 89.60% 6px, 91.13% 8px, 92.67% 10px, 94.62% 8px, 96.49% 10px, 97.87% 9px, 100% 6px, 100% 100%, 0% 100%);
    background-color: var(--black); background-image: radial-gradient(rgba(255,255,255,.13) .9px, transparent 1.1px), radial-gradient(rgba(255,255,255,.13) .9px, transparent 1.1px); background-size: 5px 5px; background-position: 0 0, 2.5px 2.5px; }
  .hero-a .slide-caption .wrap, .hero-d .slide-caption .wrap { height: auto; padding: 16px var(--gutter) 22px; gap: 18px; }
  .hero-a .slide-nav { position: static; }
  .hero-a { border-bottom: var(--rule); }
  .hero-d .hero-frame { display: flex; flex-direction: column; height: auto; overflow: visible; border-bottom: var(--rule); }
  .hero-d .slide-img { order: 1; }
  .hero-d .slide-caption { order: 2; margin-right: 0; height: 324px; }
  .hero-d .slide-title.t-l { --sfs: 44px; } .hero-d .slide-title.t-m { --sfs: 36px; } .hero-d .slide-title.t-s { --sfs: 30px; } .hero-d .slide-title.t-xs { --sfs: 26px; }
  .hero-d .slide-text p { -webkit-line-clamp: 3; }
  .hero-d .hero-frame > .slide-nav { order: 3; position: static; display: flex; justify-content: space-between; padding: 0 var(--gutter) 22px; margin-top: -1px;
    background-color: var(--black); background-image: radial-gradient(rgba(255,255,255,.13) .9px, transparent 1.1px), radial-gradient(rgba(255,255,255,.13) .9px, transparent 1.1px); background-size: 5px 5px; background-position: 0 0, 2.5px 2.5px; }
  .hero-d .hero-frame > .slide-nav .slide-dots { padding: 0; background: none; }
  .hero-b .hero-frame { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 18px var(--gutter) 28px; }
  .hero-b .slide-img { order: 1; width: 100%; }
  .hero-b .slide-caption { order: 2; }
  .hero-b .slide-caption .wrap { gap: 18px; }
  .hero-c .hero-frame { padding-top: 18px; }
  .hero-c .slide-caption { position: static; width: auto; }
  .hero-c .slide-caption .wrap { padding: 18px 18px 20px; gap: 18px; }
}