/* persuasion.studio v2 — dark grey landing and index, white project pages. */
:root { --bg: #1c1c1c; --ink: #fff; --muted: #8d8d8d; --hpad: 7vw; --indent: 10vw; --row: 44px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif; font-size: 15px; line-height: 1.6; }
body.project, body.work, body.contact { background: #fff; color: #111; }
html:not(.ss-editing) body.work, html:not(.ss-editing) body.contact { overflow: hidden; height: 100vh; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
main { display: block; }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: baseline; gap: 56px; padding: 40px var(--hpad); pointer-events: none; }   /* logo and menu share one baseline */
.site-header a { pointer-events: auto; }
.logo img { height: 20px; width: auto; }
.logo { display: block; }
.site-header nav { display: flex; flex-direction: row; gap: 30px; }
.site-header nav a { font-size: 12px; font-weight: 500; letter-spacing: .06em; color: #8d8d8d; transition: color .2s; }
.site-header nav a:hover { color: #111; }
/* landing: only the centred logo and the click to enter, so the top-corner header is hidden here */
body.home .site-header { display: none; }
/* project pages: a clean solid white bar that slides away on the way down and back in on the way up */
body.project .logo img, body.work .logo img, body.contact .logo img { filter: invert(1); }
body.project .site-header { background: #fff; padding-bottom: 30px; pointer-events: auto; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.site-header.is-hidden { transform: translateY(-100%); }

/* landing: reel, centred logo, click to enter */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.hero-video { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100vh; min-height: 100svh; min-width: 177.78vh;
  transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.hero-center { position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hero-logo { display: block; width: min(22vw, 320px); height: auto; filter: drop-shadow(0 2px 24px rgba(0,0,0,.25)); }
.hero-link { position: absolute; inset: 0; z-index: 4; cursor: pointer; }

/* work: index right-justified to the centre line, the preview just right of it */
.work-index { display: flex; align-items: center; justify-content: center; gap: 6vw; height: 100vh; height: 100svh; padding: 0 var(--hpad); }
.work-window { flex: none; height: calc(var(--row) * 7); overflow-y: auto; scrollbar-width: none; text-align: right;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 74%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 74%, transparent 100%); }
.work-window::-webkit-scrollbar { display: none; }
.work-list { list-style: none; margin: 0; padding: 0; }
.work-list li { height: var(--row); }
.work-list a { display: inline-block; line-height: var(--row); font-size: 22px; font-weight: 500; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap;
  color: rgba(17,17,17,.9); transition: color .25s; }
.work-list:has(a:hover) a:not(:hover) { color: rgba(17,17,17,.28); }
.work-list a:hover, .work-list a:focus-visible { color: #000; }
.peek { flex: none; width: min(38vw, 640px); display: flex; align-items: center; justify-content: center; height: min(62vh, 600px); pointer-events: none; }
.peek img { display: block; width: auto; height: auto; max-width: min(38vw, 640px); max-height: min(62vh, 600px); opacity: 0; transition: opacity .3s; }
.peek img.is-on { opacity: 1; }
.peek img[data-shape=tall] { max-height: 66vh; }
.ss-editing .contact-window { width: auto; max-width: 520px; margin-bottom: 24px; }
.ss-editing .work-index { display: block; height: auto; min-height: 100vh; padding: 120px var(--indent) 80px; }
.ss-editing .work-window { height: auto; overflow: visible; margin: 0; text-align: left; -webkit-mask-image: none; mask-image: none; }

/* project (white): the film leads, the title is a quiet caption beneath it */
.project-hero { padding: clamp(150px, 22vh, 220px) var(--indent) clamp(96px, 14vh, 160px); }
.project-hero.no-film { padding-bottom: clamp(48px, 8vh, 90px); }
.film { --ratio: 1.7778; --w: 60vw; margin: 0; width: min(100%, var(--w), calc((100vh - 200px) * var(--ratio))); }
.video { position: relative; width: 100%; height: 0; padding-top: calc(100% / var(--ratio)); background: #f3f3f3; }
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; }
.project-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-top: 14px;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; animation: capIn .6s ease .15s both; }
.project-cap a { color: #8a8a8a; transition: color .2s; }
.project-cap a:hover { color: #111; }
.project-title { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
@keyframes capIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .project-cap { animation: none; } }
.stills { padding: 0 var(--indent) 64px; }
.still-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 14px; }
.still-grid img, .still-grid video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #eee; }
.still-masonry { columns: var(--cols, 3); column-gap: 14px; }
.still-masonry img, .still-masonry video { width: 100%; height: auto; margin: 0 0 14px; break-inside: avoid; background: #eee; display: block; }
.group-label { margin: 0 0 16px; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: #8a8a8a; }

/* BTS reel: runs to the window edge so the next picture is always cut off, loops endlessly */
.reel { position: relative; display: flex; gap: 14px; overflow-x: auto; margin-right: calc(-1 * var(--indent)); scrollbar-width: none; cursor: grab; outline-offset: 6px; }
.reel::-webkit-scrollbar { display: none; }
.reel.is-dragging { cursor: grabbing; user-select: none; }
.reel img, .reel video { flex: none; height: 52vh; width: auto; max-width: none; background: #eee; -webkit-user-drag: none; user-select: none; }
.reel-controls { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 14px; font-size: 11px; font-weight: 500; letter-spacing: .22em; color: #8a8a8a; font-variant-numeric: tabular-nums; }
.reel-controls button { width: 32px; height: 32px; border: 0; background: none; color: #111; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; transition: opacity .2s; }
.reel-controls button:hover { opacity: 1; }
.project-foot { padding: 0 var(--indent) 90px; color: #8a8a8a; font-size: 13px; }
.project-foot a:hover { color: #111; }

/* contact: the same stage as the work index. The words replace the index; one photograph replaces the hover previews */
.contact-window { flex: none; width: min(26vw, 400px); font-size: 14px; line-height: 1.65; }
.contact-copy { margin: 0 0 22px; text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; }
.contact-links { margin: 0; display: flex; align-items: center; gap: 16px; }
.contact-links a { transition: opacity .2s; }
.contact-links a:hover { opacity: .55; }
.peek-static img { opacity: 1; }

/* page changes ease instead of cutting: the stage (or page) fades and drifts away, the next one drifts in */
.work-index > * { transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
body:not(.is-leaving) .work-index > :nth-child(3) { transition-delay: .12s; }
body.is-leaving .work-index > * { opacity: 0; transform: translateY(10px); }
@keyframes stageIn { from { opacity: 0; transform: translateY(14px); } }
body.work .work-index > *, body.contact .work-index > * { animation: stageIn .6s cubic-bezier(.2,.7,.2,1) backwards; }
body.work .work-index > :nth-child(3), body.contact .work-index > :nth-child(3) { animation-delay: .12s; }
body.project main { animation: stageIn .5s ease backwards; transition: opacity .35s ease, transform .45s ease; }
body.project.is-leaving main { opacity: 0; transform: translateY(8px); }
.hero { transition: opacity .4s ease; }
body.is-leaving .hero { opacity: 0; }
@media (prefers-reduced-motion: reduce) { body.work .work-index > *, body.contact .work-index > *, body.project main { animation: none; } }

@media (max-width: 900px) {
  :root { --hpad: 24px; --indent: 24px; --row: 36px; }
  .site-header { padding: 24px var(--hpad); }
  body.project .site-header { padding-bottom: 18px; }
  .site-header { gap: 32px; }
  .site-header nav { gap: 22px; }
  .project-head { padding-top: 150px; }
  .work-list a { font-size: 17px; }
  .peek img { max-width: 40vw; max-height: 40vh; }
  .still-grid { grid-template-columns: repeat(2, 1fr); }
  .still-masonry { columns: 2; }
  .reel img, .reel video { height: 38vh; }
  .film { width: min(100%, calc(70vh * var(--ratio))); }
  .project-hero { padding-top: 130px; }
}
@media (max-width: 600px) {
  .work-index:not(.contact-stage) { justify-content: flex-start; padding: 0 var(--hpad); }
  .work-index:not(.contact-stage) .work-window { flex: 1; width: 100%; margin: 0; text-align: left; }
  .contact-stage { display: grid; gap: 0; grid-template-columns: 1fr; grid-template-rows: 34svh auto; align-content: center; padding: 0 var(--hpad); }
  .hero-logo { width: min(56vw, 240px); }
  .peek { grid-row: 1; grid-column: 1; justify-self: center; width: auto; margin: 0; height: 34svh; }
  .peek img { max-width: 100%; max-height: 34svh; }
  .contact-window { width: 100%; margin-top: 18px; }
}
@media (max-width: 520px) { .still-grid { grid-template-columns: 1fr; } .still-masonry { columns: 1; } }
/* touch screens have no hover: no preview, and rows big enough to tap */
@media (hover: none) { :root { --row: 44px; } .peek:not(.peek-static) { display: none; } .site-header nav a { padding: 12px 2px; margin: -12px 0; } }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }