/* Dame Digital, Film: the site's pages beyond the concept's home (About, the project pages, Privacy),
   the shared footer, the reels' second link and the enquiry form's states. Built on film.css's house
   (tokens, header, reels), dark, the site's one theme (PRD A-04). Motion is the home's
   system: the conductor writes --p on each [data-reads] element of a scene, and every moving rule here
   is scoped to html.js and switched off under reduced motion, so without script or with reduced motion
   each page is a plain, whole document. One move per section, never the same twice on a page. */

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.top nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- Reels: the logo as a title, and the second link ---------- */
.r-logo { line-height: 0; }
.r-logo img { display: block; height: auto; }
.reel-dame .r-logo img { width: clamp(16rem, min(46vw, 70vh), 40rem); }
@media (max-width: 760px) { .reel-dame .r-logo img { width: min(82vw, 26rem); } }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.reel-dame .acts, .reel-wrr .act .acts { justify-content: flex-end; }
.reel-kylo .acts { justify-content: center; }
.more { display: inline-flex; align-items: center; min-height: 48px; margin-top: 0.4rem; color: var(--ink-on); font-weight: 600; font-size: 1.0625rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
@media (hover: hover) { .more:hover { text-decoration-thickness: 2px; } }
@media (max-width: 760px) { .reel-dame .acts, .reel-wrr .act .acts { justify-content: flex-start; } }

/* A featured project with no reel style of its own wears the house's colours (as Kylo does). */
.reel-house { --r-display: var(--display); --r-text: var(--text); --go-bg: #F4F6F8; --go-ink: #0E1116; --r-ground: #0E1116; }
.reel-house .shade { background: linear-gradient(20deg, rgb(10 14 22 / 0.86) 0%, rgb(10 14 22 / 0.5) 36%, rgb(10 14 22 / 0) 62%), linear-gradient(180deg, rgb(10 14 22 / 0.7) 0%, rgb(10 14 22 / 0) 22%); }
.reel-house .card { left: var(--pad); bottom: clamp(1.5rem, 5vh, 3.5rem); max-width: 50rem; }
.reel-house .r-name { font-weight: 600; font-size: clamp(4rem, min(11vw, 22vh), 11rem); letter-spacing: -0.01em; }

/* ---------- The founder (home): one more title card ---------- */
/* Set as the reels are (Vince, feedback 3: "the same amount of love and care as the project
   sections"): on the film's own black, the slate small in its corner; his portrait tall on the left,
   opening out of a slit of light as a reel does; the line set large in front of the portrait's edge,
   who he is under it; and a credits strip of three facts, each under its own slit, drawn as it comes
   up. On a phone the portrait leads and the line rides up over its foot. */
.founder { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: clamp(2.5rem, 6vh, 4.5rem); align-items: end; padding: clamp(5.5rem, 13vh, 9rem) var(--pad) clamp(4.5rem, 11vh, 7.5rem); background: #05070A; color: var(--film-ink); overflow: clip; }
.founder .slate { position: static; grid-column: 1 / -1; color: #B9C1CC; }
.founder .slate span:first-child { color: #F4F6F8; }
.founder-portrait { position: relative; grid-column: 1 / span 5; grid-row: 2 / span 2; align-self: end; margin: 0; overflow: clip; background: #0A0D12; aspect-ratio: 3 / 4; max-height: 86svh; }
/* The crop holds the top of the photo, the band above his hair included, at every size; a short frame
   gives up the bottom of the photo (his hands), never the top (round 4, D-33). */
.founder-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* The portrait's right edge darkens toward the line laid over it, so the line keeps its contrast. */
.founder-portrait::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(270deg, rgb(5 7 10 / 0.9) 0%, rgb(5 7 10 / 0.55) 16%, rgb(5 7 10 / 0) 34%); }
.founder-copy { position: relative; z-index: 2; grid-column: 6 / -1; grid-row: 2; display: grid; gap: 1.25rem; justify-items: start; }
.founder .founder-h { margin: 0 0 0.75rem clamp(-11rem, -9vw, -3rem); font-family: var(--display); font-weight: 600; font-size: clamp(3.5rem, min(8.4vw, 17vh), 9.5rem); line-height: 0.88; letter-spacing: -0.012em; color: #F4F6F8; }
.founder .founder-h .line { display: block; }
.founder .founder-h .line + .line { color: #B9C1CC; }
.founder .founder-sub { max-width: 30ch; font-family: var(--display); font-weight: 520; font-size: clamp(1.6rem, 2.4vw, 2.25rem); line-height: 1.3; letter-spacing: -0.005em; color: #F4F6F8; }
.founder .founder-body { max-width: 40rem; font-size: 1.1875rem; line-height: 1.55; color: #DCE1E8; }
.founder-more { display: inline-flex; align-items: center; min-height: 48px; color: #F4F6F8; font-size: 1.0625rem; font-weight: 600; text-underline-offset: 0.25em; }
@media (hover: hover) { .founder-more:hover { text-decoration-thickness: 2px; } }
.founder-facts { grid-column: 6 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.6vw, 2.5rem); margin: 0; --f: 1; }
.founder-facts > div { position: relative; padding-top: 1rem; }
.founder-facts > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, rgb(74 143 224 / 0), #8FC0FF 22%, #FFFFFF 50%, #8FC0FF 78%, rgb(74 143 224 / 0)); }
.founder-facts dt { font-size: 1rem; letter-spacing: 0.02em; color: #A3ACB8; }
.founder-facts dd { margin: 0.35rem 0 0; font-family: var(--display); font-weight: 540; font-size: clamp(1.3125rem, 1.7vw, 1.625rem); line-height: 1.3; color: #F4F6F8; text-wrap: balance; }
/* Narrower: one column, the line first as a title card's would be, then his portrait whole (its hands
   included, never under the type), then who he is and the credits. */
@media (max-width: 860px) {
  .founder { grid-template-columns: minmax(0, 1fr); row-gap: 0; align-items: start; }
  .founder .slate { order: 1; margin-bottom: 1.25rem; }
  .founder-copy { display: contents; }
  .founder .founder-h { order: 2; margin: 0 0 1.75rem; font-size: clamp(3rem, 15vw, 5.5rem); }
  .founder-portrait { order: 3; grid-column: 1; grid-row: auto; aspect-ratio: 2 / 3; max-height: none; margin-bottom: 1.75rem; }
  .founder-portrait::before { display: none; }
  .founder .founder-sub { order: 4; margin-bottom: 1.1rem; }
  .founder .founder-body { order: 5; margin-bottom: 0.6rem; }
  .founder-more { order: 6; justify-self: start; }
  .founder-facts { order: 7; grid-column: 1; grid-row: auto; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 2.75rem; }
}
/* His story, in the section itself: read here without script (and where a browser has no dialog);
   with script it is the source of the story layer and stays out of the page. Its phone placement comes
   after this rule, so the desktop columns never reach a phone (end review F1). */
.founder-story { grid-column: 6 / -1; grid-row: 4; display: grid; gap: 1.1rem; justify-items: start; max-width: 40rem; padding-top: clamp(1rem, 3vh, 2rem); }
@media (max-width: 860px) {
  .founder-story { order: 8; grid-column: 1; grid-row: auto; margin-top: 3.5rem; }
}
.fs-name { font-family: var(--display); font-weight: 600; font-size: clamp(2.5rem, 4.6vw, 4.5rem); line-height: 0.92; letter-spacing: -0.01em; color: #F4F6F8; }
.fs-lead { margin-bottom: 0.4rem; max-width: 26ch; font-family: var(--display); font-weight: 520; font-size: clamp(1.5rem, 2.2vw, 2.125rem); line-height: 1.3; color: #F4F6F8; text-wrap: balance; }
.fs-p { max-width: 38rem; font-size: 1.1875rem; line-height: 1.55; color: #DCE1E8; }
.fs-invite { display: grid; justify-items: start; gap: 0.9rem; margin-top: 1.1rem; font-family: var(--display); font-weight: 520; font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.3; color: #F4F6F8; }
.fs-go { display: inline-flex; align-items: center; min-height: 52px; padding: 0 1.6rem; border-radius: 4px; background: #F4F6F8; color: #0E1116; font-family: var(--text); font-weight: 600; font-size: 1.0625rem; text-decoration: none; }
@media (hover: hover) { .fs-go:hover { background: #FFFFFF; text-decoration: underline; text-underline-offset: 0.25em; } }
html.js:not(.al-none) .founder .founder-story { display: none; }

/* ---------- The story layer (about.js): "More about Vince" ---------- */
/* One dialog over the whole window. His portrait lifts out of the founder section and grows into the
   layer's portrait (moved by about.js as a transform on .al-portrait, laid out once at its rest size),
   the home falls back and darkens under the scrim, and the story's lines rise in beside it. Nothing
   enters from an edge. On a phone the layer is a full screen of its own that scrolls, the portrait at
   its head and Close at its foot, where the project view puts it. */
html.al-open { overflow: hidden; scrollbar-gutter: stable; }
.about-layer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden; overflow: clip; }
.about-layer::backdrop { background: transparent; }
.al-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(5 7 10 / 0.7) 0%, rgb(5 7 10 / 0.78) 34%, rgb(5 7 10 / 0.94) 56%, rgb(5 7 10 / 0.96) 100%); }
.al-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--line) transparent; }
.al-inner { --m: clamp(1rem, 3.4vh, 2.25rem); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 7.5rem); align-items: center; min-height: 100%; padding: 0 var(--pad); box-sizing: border-box; }
.al-figure { position: sticky; top: 0; align-self: start; margin: 0; padding: var(--m) 0; }
/* The rest place: the founder slot's own shape (about.js sets --al-ar from it, so the move is one even
   scale), as tall as the window allows, never wider than 46% of it. */
.al-portrait { position: relative; width: min(46vw, calc((100vh - 2 * var(--m)) * var(--al-ar, 0.75))); width: min(46vw, calc((100svh - 2 * var(--m)) * var(--al-ar, 0.75))); aspect-ratio: var(--al-ar, 0.75); transform-origin: 0 0; }
.al-lift { position: absolute; inset: 0; border-radius: 2px; box-shadow: 0 48px 96px -24px rgb(0 0 0 / 0.85), 0 22px 44px -18px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(244 246 248 / 0.07); opacity: 0; }
.al-frame { position: absolute; inset: 0; overflow: hidden; overflow: clip; border-radius: 2px; background: #0A0D12; }
.al-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* The founder slot's own edge shade, carried for the first frames of the lift so nothing changes as it
   leaves, then let go. */
.al-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, rgb(5 7 10 / 0.9) 0%, rgb(5 7 10 / 0.55) 16%, rgb(5 7 10 / 0) 34%); opacity: 0; }
.al-story { display: grid; gap: 1.15rem; justify-items: start; max-width: 40rem; padding: clamp(5.5rem, 14vh, 8rem) 0 clamp(3rem, 9vh, 5.5rem); }
.al-story .fs-name { font-size: clamp(3rem, min(6.2vw, 12vh), 6.5rem); line-height: 0.9; margin-bottom: 0.35rem; }
.al-story .fs-lead { margin-bottom: 0.75rem; }
.about-layer [tabindex="-1"]:focus { outline: none; }
.al-close { position: absolute; z-index: 3; top: clamp(1rem, 2.4vw, 2rem); right: var(--pad); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 44px; min-height: 48px; padding: 0 1.15rem 0 0.95rem; font: inherit; font-family: var(--text); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.01em; color: #F4F6F8; background: #0E1116; border: 1px solid rgb(244 246 248 / 0.55); border-radius: 999px; cursor: pointer; }
.al-close svg { flex: none; display: block; }
@media (hover: hover) { .al-close:hover { background: #1A1F27; text-decoration: underline; } }
.al-close:focus-visible { outline: 2px solid #F4F6F8; outline-offset: 3px; }
@media (max-width: 860px) {
  /* A full screen of its own: solid, so nothing of the home reads through the story (2026-11-02). */
  .al-scrim { background: rgb(5 7 10); }
  /* The story scrolls in the space above Close's own band, so no line ever passes under the button. */
  .al-scroll { bottom: calc(52px + 2rem); }
  .al-inner { grid-template-columns: minmax(0, 1fr); align-items: start; padding-bottom: 1.5rem; }
  .al-figure { position: relative; padding: clamp(1rem, 4vw, 1.75rem) 0 0; }
  .al-portrait { width: min(100%, calc(46vh * var(--al-ar, 0.6667))); width: min(100%, calc(46svh * var(--al-ar, 0.6667))); }
  .al-veil { display: none; }
  .al-story { padding: 1.75rem 0 0; gap: 1rem; }
  .al-story .fs-name { font-size: clamp(2.75rem, 13vw, 4.5rem); }
  .al-close { top: auto; bottom: 1rem; min-height: 52px; }
}
/* /about/ opened directly: the page is held dark until the layer has the founder section in place. If
   the script never runs the veil lifts by itself. */
html.js.al-boot body::after { content: ""; position: fixed; inset: 0; z-index: 60; background: #05070A; pointer-events: none; animation: al-boot-off 0.4s ease-out 4s forwards; }
html.js.al-boot.al-boot-go body::after { opacity: 0; transition: opacity 0.45s ease-out; animation: none; }
@keyframes al-boot-off { to { opacity: 0; visibility: hidden; } }
/* With motion: the portrait opens out of a lit slit as it comes up, as a reel does (the clip stops one
   line short of shut, and that line is light until the frame opens), settling from a slight push; each
   fact's slit draws left to right after it, one after another. (--open and --f are unregistered, so the
   children inherit them with the reader's own --p already in them.) */
html.js .founder-portrait[data-reads] { --open: clamp(0, (var(--p) - 0.06) * 4.2, 1); clip-path: inset(calc((1 - var(--open)) * (50% - 1px)) 0); }
/* No push on the picture itself: scroll never scales it, so its crop is the top of the photo (D-33). */
html.js .founder-portrait[data-reads]::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; pointer-events: none; background: linear-gradient(90deg, rgb(74 143 224 / 0), #8FC0FF 22%, #FFFFFF 50%, #8FC0FF 78%, rgb(74 143 224 / 0)); opacity: clamp(0, 1 - var(--open, 1) * 1.8, 1); }
html.js .founder-facts[data-reads] { --f: var(--p); }
html.js .founder-facts > div::before { transform: scaleX(clamp(0, (var(--f) - 0.16 - var(--i, 0) * 0.04) * 7, 1)); }

/* ---------- The enquiry form's states ---------- */
.enquiry-wrap { display: grid; gap: 1.25rem; align-content: start; }
.err { margin: 0; color: var(--ink); font-size: 1rem; }
.err::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.5em; border: 2px solid currentColor; transform: rotate(45deg); vertical-align: 0.05em; }
.field:has(.err:not([hidden])) input, .field:has(.err:not([hidden])) textarea { border-color: var(--ink); border-width: 2px; }
/* The spam trap: in the form for a bot to fill, never shown, focused or announced to a person. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; visibility: hidden; }
.enquiry button[aria-busy="true"] { opacity: 0.75; cursor: progress; }
.enquiry button[aria-busy="true"]::after { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-left: 0.6em; vertical-align: -0.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dd-turn 0.9s linear infinite; }
@keyframes dd-turn { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .enquiry button[aria-busy="true"]::after { animation: none; } }
.form-status { margin: 0; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); font-size: 1.125rem; line-height: 1.45; }
.form-status.is-sent { font-family: var(--display); font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.32; font-weight: 520; border-color: var(--line); }
.form-status a { color: var(--ink); }
/* The thank-you names the reply address (round 4 D-47); a long one wraps rather than overflowing. */
.form-status .addr { overflow-wrap: anywhere; }
.form-fix { display: block; min-height: 44px; margin-top: 0.5rem; padding: 0; border: 0; background: none; color: var(--ink); font-family: var(--text); font-size: 1.0625rem; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) { .form-fix:hover { text-decoration-thickness: 2px; } }
.enquiry[hidden] { display: none !important; }

/* ---------- The footer ---------- */
.site-foot { gap: clamp(1.75rem, 3vw, 2.5rem); }
.foot-top { display: grid; gap: 1.25rem; }
.foot .foot-line { max-width: 44rem; }
/* The links and the copyright share the footer's last row (A-14, Vince 2026-11-04: "condensed and consolidated"). */
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 2rem; }
.foot-row .foot-copy { color: var(--muted); font-size: 1rem; }
.foot-mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 1.0625rem; text-decoration-thickness: 1px; }
@media (hover: hover) { .foot-mail:hover, .foot nav a:hover { text-decoration-thickness: 2px; } }

/* ---------- Inner pages: the title card ---------- */
/* A project page opens on its own reel, held over the whole first screen. With motion, its scene is
   pinned for one viewport and the frame letterboxes to scope as it is scrolled (--p, 0 to 1): the bars
   close in and the card rides up with the lower one. */
.tc.reel { display: block; background: #05070A; }
.tc .pin { position: relative; height: 100vh; height: 100svh; min-height: 560px; padding: 0; display: block; overflow: clip; }
.tc .frame { position: absolute; inset: 0; height: auto; grid-row: auto; }
.tc .tc-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(8 10 14 / 0.84) 0%, rgb(8 10 14 / 0.7) 20%, rgb(8 10 14 / 0) 34%),linear-gradient(0deg, rgb(8 10 14 / 0.82) 0%, rgb(8 10 14 / 0.45) 30%, rgb(8 10 14 / 0) 56%); }
/* Wild Rose Rates' still is lit paper under its title: a shade from the left holds the title and line. */
.tc.reel-wrr .tc-scrim { background: linear-gradient(90deg, rgb(8 10 14 / 0.62) 0%, rgb(8 10 14 / 0.5) 42%, rgb(8 10 14 / 0) 66%), linear-gradient(180deg, rgb(8 10 14 / 0.84) 0%, rgb(8 10 14 / 0.7) 20%, rgb(8 10 14 / 0) 34%), linear-gradient(0deg, rgb(8 10 14 / 0.82) 0%, rgb(8 10 14 / 0.45) 30%, rgb(8 10 14 / 0) 56%); }
.tc .slate { top: clamp(5.5rem, 13vh, 8rem); }
.tc .card { left: var(--pad); right: var(--pad); top: auto; bottom: clamp(2rem, 8vh, 5rem); max-width: 62rem; justify-items: start; text-align: left; }
.tc.reel-dame .card { left: auto; justify-items: end; text-align: right; }
.tc.reel-dame .acts { justify-content: flex-end; }
.tc.reel-kylo .card { inset: auto var(--pad) clamp(2rem, 8vh, 5rem) var(--pad); place-content: initial; justify-items: start; text-align: left; padding: 0; }
.tc.reel-kylo .slate { position: absolute; justify-content: flex-start; }
.tc.reel-kylo .acts { justify-content: flex-start; }
.tc .r-name { font-size: clamp(3.5rem, min(10vw, 20vh), 10rem); }
.tc.reel-tdp .r-name { font-size: clamp(3.25rem, min(9vw, 18vh), 9rem); }
.tc .r-tag { max-width: 34ch; }
.tc.reel-kylo .r-name { font-size: clamp(5rem, min(14vw, 24vh), 14rem); }
.tc.reel-kylo .go { box-shadow: inset 0 0 0 1px rgb(244 246 248 / 0.7); }
.tc .still { transform-origin: 60% 50%; }
.tc-bar { display: none; }
@media (max-width: 760px) {
  .tc .card, .tc.reel-dame .card { left: var(--pad); right: var(--pad); justify-items: start; text-align: left; }
  .tc.reel-dame .acts { justify-content: flex-start; }
  .tc .r-name { font-size: 16vw; }
  .tc .slate { top: 5rem; }
  .tc.reel-dame .r-logo img { width: min(78vw, 24rem); }
}

/* As every reel on the home does, the title card ends its hold by closing back into the slit of light:
   the bars letterbox to scope over the hold, then over its last third close to a line, which lights as
   they meet. Keyboard focus inside the card holds it open at scope. */
html.js .tc-bar { display: block; position: absolute; left: 0; right: 0; height: 50.5%; z-index: 3; background: #05070A; transform: scaleY(0); pointer-events: none; }
html.js .tc-bar-t { top: 0; transform-origin: 50% 0; transform: scaleY(calc(var(--p) * 0.26 + clamp(0, (var(--p) - 0.7) / 0.28, 1) * 0.74)); }
html.js .tc-bar-b { bottom: 0; transform-origin: 50% 100%; transform: scaleY(calc(var(--p) * 0.26 + clamp(0, (var(--p) - 0.7) / 0.28, 1) * 0.74)); }
html.js .tc:focus-within .tc-bar { transform: scaleY(calc(var(--p) * 0.26)); }
.tc-slit { display: none; }
html.js .tc-slit { display: block; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; z-index: 4; pointer-events: none; background: linear-gradient(90deg, rgb(74 143 224 / 0), #8FC0FF 22%, #FFFFFF 50%, #8FC0FF 78%, rgb(74 143 224 / 0)); opacity: clamp(0, (var(--p) - 0.86) / 0.1, 1); transform: scaleX(calc(0.4 + clamp(0, (var(--p) - 0.8) / 0.18, 1) * 0.6)); }
html.js .tc:focus-within .tc-slit { opacity: 0; }
html.js .tc .still[data-reads] { transform: scale(calc(1.07 - var(--p) * 0.07)); }
html.js .tc .card, html.js .tc .slate { transition: none; }
html.js .tc .card[data-reads] { translate: 0 calc(var(--p) * -13svh); }
html.js .tc .slate[data-reads] { translate: 0 calc(var(--p) * 13svh); }

/* ---------- Inner pages: programme notes ---------- */
.notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; max-width: 100rem; margin: 0 auto; padding: clamp(5rem, 12vh, 9rem) var(--pad); }
.notes-copy { display: grid; gap: 1.4rem; max-width: 40rem; }
.notes-h { font-family: var(--text); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.notes p { color: var(--soft); font-size: 1.1875rem; line-height: 1.55; }
.notes .notes-lead { font-family: var(--display); font-weight: 520; font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 1.32; letter-spacing: -0.005em; color: var(--ink); }
.detail { margin: 0; overflow: clip; border-radius: 2px; }
.detail img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.story { grid-template-columns: minmax(0, 1fr); max-width: 64rem; }
.story .notes-copy { max-width: 46rem; }
@media (max-width: 860px) { .notes { grid-template-columns: 1fr; } }

/* ---------- Inner pages: the facts, rolling up as credits ---------- */
.facts { padding-top: clamp(4rem, 10vh, 7rem); }
.facts .roll dd { display: block; font-size: 1.125rem; line-height: 1.5; color: var(--ink); max-width: 34ch; }
.facts .roll dt { font-size: 1.0625rem; }
.facts .aside { max-width: 30ch; margin: clamp(3.5rem, 9vh, 5.5rem) auto 0; font-family: var(--display); font-weight: 520; font-size: clamp(1.75rem, 3.2vw, 3rem); line-height: 1.32; color: var(--ink); text-wrap: balance; }
.who .roll { list-style: none; padding: 0; text-align: center; max-width: 46rem; }
.who .roll li { font-family: var(--display); font-weight: 520; font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1.32; color: var(--ink); }
.who .roll li + li { color: var(--soft); }
@media (max-width: 760px) { .facts .aside { margin-left: 0; } .who .roll { text-align: left; } }
html.js .page-inner .roll { transform: translateY(calc((0.5 - var(--p, 0.5)) * 12vh)); }

/* ---------- Inner pages: the next reel ---------- */
/* A letterboxed band of the next project's still, its name in its own face; it opens out of a slit of
   light as it comes up the screen. */
.next-reel { display: grid; gap: 1rem; padding: clamp(3rem, 8vh, 6rem) 0 clamp(4rem, 9vh, 6rem); background: var(--ground); }
.next-frame { position: relative; display: block; height: clamp(18rem, 52vh, 34rem); height: clamp(18rem, 52svh, 34rem); overflow: clip; background: #000; color: #F4F6F8; text-decoration: none; }
.next-frame .still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.next-frame .shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(8 10 14 / 0.78) 0%, rgb(8 10 14 / 0.5) 34%, rgb(8 10 14 / 0) 60%), linear-gradient(90deg, rgb(8 10 14 / 0.82) 0%, rgb(8 10 14 / 0.4) 50%, rgb(8 10 14 / 0.2) 100%); }
.next-label { position: absolute; z-index: 1; left: var(--pad); top: clamp(1.25rem, 4vh, 2rem); font-family: var(--text); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.02em; color: #DCE1E8; }
.next-name { position: absolute; z-index: 1; left: var(--pad); right: var(--pad); bottom: clamp(1.25rem, 5vh, 2.75rem); font-family: var(--r-display); font-size: clamp(3rem, min(9vw, 16vh), 8.5rem); line-height: 0.9; color: #F4F6F8; text-decoration: underline; text-decoration-color: rgb(244 246 248 / 0); text-decoration-thickness: 3px; text-underline-offset: 0.12em; transition: text-decoration-color 0.25s ease-out; }
.next-reel.reel-dame .next-name { font-weight: 800; letter-spacing: -0.045em; }
.next-reel.reel-wrr .next-name { font-weight: 650; letter-spacing: -0.035em; }
.next-reel.reel-tdp .next-name { font-weight: 700; letter-spacing: 0.1em; }
.next-reel.reel-ds .next-name { font-weight: 700; }
.next-reel.reel-kylo .next-name, .next-reel.reel-house .next-name { font-weight: 600; }
@media (hover: hover) { .next-frame:hover .next-name { text-decoration-color: rgb(244 246 248 / 0.9); } }
.next-frame:focus-visible { outline-offset: -4px; outline-color: #F4F6F8; }
.next-all { justify-self: start; display: inline-flex; align-items: center; min-height: 48px; margin-left: var(--pad); color: var(--ink); font-size: 1.0625rem; font-weight: 600; }
/* It opens out of a lit slit, as the home's reels do: the clip stops one line short of shut, and that
   line is light until the band opens. (--open is unregistered, so the ::before inherits it with the
   frame's own --p already in it.) */
html.js .next-frame[data-reads] { --open: clamp(0, var(--p) * 2.6 - 0.25, 1); clip-path: inset(calc((1 - var(--open)) * (50% - 1px)) 0); }
html.js .next-frame::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; pointer-events: none; background: linear-gradient(90deg, rgb(74 143 224 / 0), #8FC0FF 22%, #FFFFFF 50%, #8FC0FF 78%, rgb(74 143 224 / 0)); opacity: clamp(0, 1 - var(--open, 1) * 1.8, 1); }

/* The separate About page's own rules went with it (round 4, D-45): /about/ is the home's story layer. */

/* ---------- Privacy ---------- */
.tc-plain { position: relative; display: grid; align-content: end; min-height: 58vh; min-height: 58svh; padding: clamp(7rem, 16vh, 10rem) var(--pad) clamp(3rem, 8vh, 5rem); background: #05070A; color: #F4F6F8; overflow: clip; }
.tc-plain .r-name { font-family: var(--display); font-weight: 600; font-size: clamp(3.5rem, min(10vw, 20vh), 10rem); line-height: 0.88; letter-spacing: -0.012em; color: #F4F6F8; }
.tc-plain .r-tag { margin-top: 1.25rem; max-width: 36ch; font-size: clamp(1.25rem, 1.7vw, 1.625rem); line-height: 1.35; color: #DCE1E8; }
.plain-slit { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgb(74 143 224 / 0), #8FC0FF 22%, #FFFFFF 50%, #8FC0FF 78%, rgb(74 143 224 / 0)); }
html.js .plain-slit[data-reads] { transform: scaleX(clamp(0.3, var(--p) * 1.5, 1)); }
.doc { max-width: 46rem; margin: 0 auto; padding: clamp(4rem, 10vh, 7rem) var(--pad) clamp(5rem, 12vh, 8rem); box-sizing: content-box; }
.doc section + section { margin-top: clamp(3rem, 7vh, 4.5rem); }
.doc h2 { font-family: var(--display); font-weight: 560; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.02; margin-bottom: 1.25rem; }
.doc p { color: var(--soft); font-size: 1.125rem; line-height: 1.6; }
.doc p + p { margin-top: 1rem; }
.doc a { color: var(--ink); }
.legal { margin: 1.5rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.legal > div { display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.legal dt { color: var(--muted); font-size: 1.0625rem; }
.legal dd { margin: 0; color: var(--ink); font-size: 1.0625rem; }
/* A link alone in its row is a control: 44 px to tap, the row's height unchanged. */
.legal dd a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.updated { margin-top: clamp(3rem, 7vh, 4.5rem); color: var(--muted) !important; font-size: 1rem !important; }
@media (max-width: 640px) { .legal > div { grid-template-columns: 1fr; gap: 0.15rem; } }

/* ---------- Reduced motion: nothing travels on --p ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .tc-bar, html.js .tc-slit, html.js .next-frame::before { display: none; }
  html.js .tc .still[data-reads], html.js .page-inner .roll { transform: none; }
  html.js .tc .card[data-reads], html.js .tc .slate[data-reads] { translate: none; }
  html.js .next-frame[data-reads] { clip-path: none; }
  html.js .plain-slit[data-reads] { transform: none; }
  html.js .founder-portrait[data-reads] { clip-path: none; }
  html.js .founder-portrait[data-reads]::after { display: none; }
  html.js .founder-facts > div::before { transform: none; }
}

/* ---------- The revamp (contract 2026-11-03): the products menu, the lineup, fact rows, the enquiry choice,
   the footer's products, and paper (R-08, Vince's pick "A, reel frames"). ---------- */
.nav-pm { position: relative; display: inline-flex; align-items: center; }
.pmenu { position: relative; }
.pmenu summary { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; list-style: none; cursor: pointer; color: var(--film-ink); }
.pmenu summary::-webkit-details-marker { display: none; }
.pmenu[open] summary svg { transform: rotate(180deg); }
.pmenu-list { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 12; display: grid; min-width: 20rem; margin: 0; padding: 0.5rem; list-style: none; background: var(--ground); border: 1px solid var(--line); border-radius: 12px; }
.pmenu-list a, .menu-products a { display: grid; gap: 0.1rem; min-height: 48px; padding: 0.55rem 1rem; text-decoration: none; color: var(--film-ink); }
.top nav .pmenu-list a, .top nav .menu-products a { display: grid; align-content: center; padding: 0.55rem 1rem; text-decoration: none; }
.pm-name { font-weight: 600; font-size: 1.0625rem; }
.pm-line { font-size: 0.9375rem; color: var(--muted); }
/* The phone menu names the products only, so About and Contact stay on the screen when it opens (ADAPT-02). */
.menu-products .pm-line { display: none; }
.top nav .menu-products a { min-height: 48px; padding-block: 0; gap: 0; }
.menu-products { margin: 0 0 0.25rem 0.75rem; padding: 0 0 0 0.25rem; list-style: none; border-left: 1px solid var(--line); }
@media (hover: hover) { .pmenu-list a:hover, .menu-products a:hover { background: var(--panel); border-radius: 8px; } }

.everything { padding: clamp(5rem, 11vh, 8rem) var(--pad); scroll-margin-top: 0; }
.everything h2 { font-family: var(--display); font-weight: 520; font-size: clamp(2.5rem, 5vw, 4.75rem); letter-spacing: -0.01em; line-height: 1; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.statement { padding: clamp(5rem, 11vh, 8rem) var(--pad) 0; max-width: 60rem; }
.statement h2 { font-family: var(--display); font-weight: 520; font-size: clamp(2.25rem, 4.4vw, 4rem); letter-spacing: -0.01em; line-height: 1.02; margin-bottom: 1.5rem; }
.statement p { max-width: 42rem; font-size: 1.1875rem; line-height: 1.55; color: var(--soft); }
.statement p + p { margin-top: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.chip { min-height: 44px; padding: 0 1.15rem; font: inherit; font-size: 1rem; font-weight: 600; color: var(--film-ink); background: transparent; border: 1px solid rgb(244 246 248 / 0.45); border-radius: 999px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--film-ink); color: var(--ground); border-color: var(--film-ink); }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 2.6vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.pcards > li[hidden] { display: none; }
@media (max-width: 1100px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pcards { grid-template-columns: minmax(0, 1fr); } }
.pcard { position: relative; display: grid; align-content: start; gap: 0.6rem; }
.pcard-pic { margin: 0 0 0.4rem; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel); }
.pcard-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcard-name { font-family: var(--display); font-weight: 560; font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1.1; }
.pcard-go { color: inherit; text-decoration: none; }
.pcard-go::after { content: ""; position: absolute; inset: 0; }
.pcard-go:focus-visible { outline: none; }
.pcard:has(.pcard-go:focus-visible) { outline: 2px solid var(--film-ink); outline-offset: 6px; }
.pcard-line { color: var(--soft); line-height: 1.45; }
.factrow { display: grid; gap: 0.3rem; margin: 0.25rem 0 0; font-size: 0.9375rem; }
/* The row's two lines: label and value side by side while both fit; the value drops whole under its label where
   they do not, so a web address never breaks mid-word (contract A-06). */
.factrow > div { display: flex; flex-wrap: wrap; column-gap: 0.75rem; }
.factrow > div[hidden] { display: none; }
.factrow dt { flex: 0 0 6.5rem; color: var(--muted); }
.factrow dd { margin: 0; color: var(--film-ink); white-space: nowrap; }
/* A product page's Address and Last updated: a second group under the facts, behind a fine rule, on the facts'
   own two columns, moving with them (harness:LAY-05). */
.page-facts { display: grid; gap: clamp(1.4rem, 3vh, 2.1rem); max-width: 58rem; margin: clamp(2.8rem, 6vh, 4.2rem) auto 0; padding-top: clamp(2.8rem, 6vh, 4.2rem); border-top: 1px solid var(--line); font-size: 1.125rem; }
.factrow.page-facts > div { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: baseline; }
.factrow.page-facts > div[hidden] { display: none; }
.factrow.page-facts dt { flex: none; text-align: right; color: var(--muted); letter-spacing: 0.02em; }
.factrow.page-facts dd { text-align: left; }
html.js[data-film="on"] .page-facts { transform: translateY(calc((0.5 - var(--p, 0.5)) * 14vh)); }
@media (max-width: 760px) { .factrow.page-facts > div { grid-template-columns: 1fr; gap: 0.2rem; } .factrow.page-facts dt { text-align: left; } }

:root { --paper: #F7F8FA; --pencil: #4E5661; --rule: #C3CAD3; --daylight: #E7EBF0; }

/* Paper: pale under the dark band, each run opening on the slit of light carried onto it, drawn the same each
   time (Vince, 2026-11-03: "Yes, the slit carried onto paper, drawn the same each time"). The house's colour names
   are set again inside it, so everything that reads them is drawn for light. */
.paper {
  --ink: var(--ground); --soft: var(--pencil); --muted: var(--pencil); --line: var(--rule); --link: var(--ground); --field: var(--pencil); --film-ink: var(--ground);
  color-scheme: light; background: var(--paper); color: var(--ground); border-top: 2px solid var(--blue);
}
.paper ::selection { background: var(--blue); color: var(--ground); }
html.on-paper { scrollbar-color: var(--pencil) var(--paper); }

/* The lineup, reel frames: a picture between two dark bars, the name, the one line, a fine rule, the facts. */
.everything.paper { padding: clamp(4.5rem, 8vw, 7.5rem) max(var(--pad), calc((100% - 82rem) / 2)); }
.everything.paper h2 { font-weight: 650; font-size: clamp(2.75rem, 5.4vw, 5rem); line-height: 0.95; letter-spacing: -0.012em; margin-bottom: 1.25rem; text-wrap: balance; }
.paper .chips { gap: 0.625rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.paper .chip { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 1.0625rem; background: transparent; border-color: var(--pencil); }
.paper .chip .n { font-size: 0.875rem; color: var(--pencil); font-variant-numeric: tabular-nums; }
.paper .chip[aria-pressed="true"] { background: var(--ground); border-color: var(--ground); color: var(--daylight); }
.paper .chip[aria-pressed="true"] .n { color: var(--daylight); }
/* The picked preview's phone rule: the four chips on one row, at the same height. */
@media (max-width: 700px) { .paper .chips { gap: 0.5rem; } .paper .chip { padding: 0 0.75rem; gap: 0.375rem; } }
.paper .pcards { gap: clamp(3rem, 5vw, 4.5rem) clamp(1.5rem, 2.8vw, 2.5rem); }
.paper .pcard { display: flex; flex-direction: column; min-width: 0; gap: 0; }
.paper .pcard-pic { margin: 0; aspect-ratio: 16 / 9; border-block: 10px solid var(--ground); background: var(--ground); }
.paper .pcard-name { margin: 1.375rem 0 0; font-weight: 650; font-size: 1.875rem; line-height: 1; letter-spacing: -0.005em; text-wrap: balance; }
.paper .pcard-line { margin: 0.5rem 0 0; min-height: 2.9em; color: var(--panel); font-size: 1.0625rem; line-height: 1.45; text-wrap: pretty; }
.paper .pcard-facts { display: flex; flex-wrap: wrap; gap: 0.875rem 1.5rem; margin: 1.375rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 1rem; }
.paper .pcard-facts > div { display: block; }
.paper .pcard-facts > div[hidden] { display: none; }
.paper .pcard-facts dt { margin-bottom: 0.125rem; color: var(--pencil); font-size: 0.875rem; }
.paper .pcard-facts dd { color: var(--ground); font-weight: 500; }
/* Status (A-16) has the row's first line to itself, so the address and date keep their line on every card. */
.paper .pcard-facts > [data-fact="status"] { flex: 0 0 100%; }
/* A lineup-only entry (A-16). inline.js gives its name a link only where the panel can open. Until it has, or with no
   script, or if that script fails, the card says nothing can be opened: no cue, overlay or hover, keyed on the missing
   link. Without script its words stand in the card. In its panel, with no roll above, the status row needs no second rule. */
.pcard:has(.pcard-go:not([href])) .pcard-cue, .pcard:has(.pcard-go:not([href])) .pcard-go::after { display: none; }
.paper .pcard:has(.pcard-go:not([href])):hover .pcard-pic img { transform: none; filter: none; }
.paper .pcard-words { margin: 1.375rem 0 0; color: var(--panel); font-size: 1.0625rem; line-height: 1.45; }
/* A title card's picture where its middle would crop to nothing on a tall screen names where to look (Milo's dark screen). */
@media (max-aspect-ratio: 1/1) { .tc .still[style*="--phone-pos"] { object-position: var(--phone-pos); } }
.paper .pcard-words p + p { margin-top: 0.75rem; }
.factrow.page-facts-only { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 760px) { .paper .pcard-line { min-height: 0; } }

/* Contact on paper: the paper runs edge to edge, the form keeps its width. */
.contact.paper { max-width: none; margin: 0; padding-inline: max(var(--pad), calc((100% - 100rem) / 2 + var(--pad))); }
.paper .enquiry button { justify-self: end; background: var(--ground); color: var(--daylight); }
.paper .field input, .paper .field textarea { background: var(--paper); caret-color: var(--ground); }
.paper .form-status { background: var(--paper); }
.paper .field input:-webkit-autofill, .paper .field textarea:-webkit-autofill { -webkit-text-fill-color: var(--ground); box-shadow: 0 0 0 100px var(--paper) inset; }
.paper .choice { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.paper .choice legend { padding: 0; }
.paper .choice-opt { position: relative; margin: 0; }
.paper .choice-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.paper .choice-opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--pencil); border-radius: 999px; font-size: 1rem; }
.paper .choice-opt input:checked + span { background: var(--ground); border-color: var(--ground); color: var(--daylight); }
.paper .choice-opt input:focus-visible + span { outline: 2px solid var(--ground); outline-offset: 2px; }

/* The footer's products: one row, as the family footer sets them; two across on a phone. */
.foot-products { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem 1rem; margin: 0; padding: 0; list-style: none; }
.foot-products li { border-top: 1px solid var(--line); }
.foot-products a { display: grid; align-content: start; gap: 0.35rem; min-height: 44px; padding-top: 0.9rem; color: var(--ink); text-decoration: none; }
.fp-name { font-family: var(--display); font-weight: 560; font-size: 1.375rem; line-height: 1.1; }
.fp-line { color: var(--muted); font-size: 0.9375rem; line-height: 1.35; }
@media (hover: hover) { .foot-products a:hover .fp-name { text-decoration: underline; text-underline-offset: 0.2em; } }
@media (max-width: 1000px) { .foot-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .foot-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.choice { border: 0; margin: 0; padding: 0; }
.choice legend { margin-bottom: 0.45rem; font-size: 1.0625rem; color: var(--ink); }
.choice-opt { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; margin-right: 1.25rem; font-size: 1.0625rem; cursor: pointer; }
.choice-opt input { width: 1.15rem; height: 1.15rem; accent-color: var(--link); }

/* The scroll hint (A-14, Vince 2026-11-04: "a very brief but brand-appropriate hint ... to advise the viewer to
   scroll"; and again: "the scroll hint is too abstract. maybe needs an actual word ... instead of a straight line,
   maybe make it a down arrow, but in the same style and animation style"): the word Scroll beside a down arrow drawn
   as the house's line of light, a light running down its shaft into the head. On the hero while the page has not
   moved (with script; the film running or not), and in the product layer while more of it sits below. Under reduced
   motion the light stands still in the shaft and the head stays lit. Decorative: hidden from screen readers. */
.scroll-hint { position: absolute; z-index: 3; left: 50%; display: flex; align-items: center; gap: 0.625rem; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity 0.6s ease-out; }
.scroll-hint .sh-word { font-family: var(--text); font-size: 0.9375rem; font-weight: 500; line-height: 1; letter-spacing: 0.02em; color: var(--soft); }
.scroll-hint .sh-arrow { position: relative; display: block; width: 14px; height: 34px; }
.scroll-hint .sh-shaft { position: absolute; left: 6px; top: 0; width: 2px; height: 30px; overflow: hidden; border-radius: 1px; background: var(--field); }
.scroll-hint .sh-line { position: absolute; left: 0; top: 0; width: 100%; height: 40%; border-radius: 1px; background: var(--film-ink); animation: sh-run 2.2s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
.scroll-hint .sh-head { position: absolute; left: 0; bottom: 0; width: 14px; height: 9px; color: var(--film-ink); opacity: 0.7; animation: sh-head 2.2s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
@keyframes sh-run { 0% { transform: translateY(-110%); } 70%, 100% { transform: translateY(260%); } }
@keyframes sh-head { 0%, 45% { opacity: 0.7; } 62% { opacity: 1; } 85%, 100% { opacity: 0.7; } }
.hero-hint { display: none; position: fixed; z-index: 6; bottom: max(0.75rem, calc(clamp(2rem, 7svh, 5rem) - 46px)); }
.js .hero-hint { display: flex; opacity: 1; transition-delay: 0.8s; }
@media (max-width: 760px) { .hero-hint { bottom: 0.375rem; } } /* clear of the hero's last line on a phone */
.js.scrolled .hero-hint { opacity: 0; transition-delay: 0s; transition-duration: 0.2s; } /* gone before a jump lands it over paper */
.ix-hint { bottom: 1.25rem; }
.ix-hint.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .scroll-hint .sh-line { animation: none; transform: translateY(75%); } .scroll-hint .sh-head { animation: none; opacity: 1; } }

/* The lineup's way to learn more (A-14, Vince 2026-11-04: "it just isn't very obvious that clicking the photo, the
   Dame, or the about copy ... is going to launch something that is going to give more information"): the whole
   card opens the product's layer; its picture carries a Learn more cue, shown on hover and focus where there is a
   pointer, and always where there is none. The address is its own link, to the live site in a new tab. */
.paper .pcard-pic { position: relative; overflow: hidden; }
.paper .pcard-pic img { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease-out; }
.pcard-cue { position: absolute; left: 0.75rem; bottom: 0.75rem; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem 0.375rem 0.75rem; border-radius: 2px; background: var(--ground); color: var(--daylight); font-size: 0.9375rem; font-weight: 500; line-height: 1.2; pointer-events: none; }
.pcard-cue svg { display: block; width: 0.875rem; height: 0.875rem; }
@media (hover: hover) {
  .pcard-cue { opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease-out, transform 0.25s ease-out; }
  .pcard:hover .pcard-cue, .pcard:has(.pcard-go:focus-visible) .pcard-cue { opacity: 1; transform: none; }
  .paper .pcard:hover .pcard-pic img { transform: scale(1.03); filter: brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) { .pcard-cue, .paper .pcard-pic img { transition: none; } .paper .pcard:hover .pcard-pic img { transform: none; } }
.pcard-facts a::before, .page-facts a::before { content: ""; position: absolute; inset: -0.75rem -0.25rem; } /* its touch area: 44 and more */
.page-facts a { position: relative; }
.pcard-facts a { position: relative; z-index: 1; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pcard-facts a:focus-visible { outline: 2px solid var(--ground); outline-offset: 3px; }
@media (hover: hover) { .pcard-facts a:hover { text-decoration-thickness: 2px; } }