/* Shared styles for the project pages (Talisker, OPTUS, MiSight, More work).
   Same tokens as the home page: a translucent ivory "tracing paper" sheet over a
   soft colour field, then the blue/violet nebula contact section. */
:root {
  --paper: #F1EEE7;
  --paper-veil: rgba(241,238,231,.74);
  --ink: #2B2A2F;
  --muted: #7A766F;
  --line: rgba(43,42,47,.14);
  --light: #ECEBF1;
  --light-dim: rgba(236,235,241,.7);
  --night: #0A0E1C;
  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --gutter: max(24px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: #E9C9BC; }
body { margin: 0; font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; background: transparent; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }

#soft { position: fixed; inset: 0; width: 100%; height: 100%; height: 100lvh; display: block; z-index: 0; pointer-events: none; }
.page { position: relative; z-index: 1; }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: var(--gutter); padding-right: max(24px, env(safe-area-inset-right, 0px)); }

/* ---------- the paper sheet ---------- */
.paper { background: var(--paper-veil); }
/* top bar: a thin strip of the contact nebula holding Home and Contact */
.bar {
  position: relative; overflow: hidden; color: var(--light);
  background:
    radial-gradient(60% 240% at 12% 0%, rgba(123,98,214,.9), rgba(123,98,214,0) 70%),
    radial-gradient(50% 260% at 58% 100%, rgba(84,46,150,.95), rgba(84,46,150,0) 70%),
    radial-gradient(45% 240% at 96% 10%, rgba(40,58,150,.95), rgba(40,58,150,0) 70%),
    #171C48;
}
.bar .stars { position: absolute; inset: 0; pointer-events: none; background-size: 240px 240px; opacity: .8; }
.top { position: relative; display: flex; justify-content: space-between; align-items: center; padding-top: max(12px, env(safe-area-inset-top, 0px)); padding-bottom: 12px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.top a { text-decoration: none; color: var(--light); padding: 6px 0; }
.top a:hover { color: #fff; }

.intro { padding-top: 56px; padding-bottom: 40px; }
.eyebrow { margin: 0 0 18px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.intro h1 { margin: 0; font-size: clamp(56px, 9.2vw, 132px); line-height: .94; letter-spacing: -.035em; font-weight: 800; }
.kicker { margin: 14px 0 0; font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.015em; }
.lede { margin: 28px 0 0; max-width: 60ch; font-size: 17px; line-height: 1.55; color: #4A4850; }

.credits { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px 24px; max-width: 900px; font-size: 15px; line-height: 1.5; }
.credits dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--muted); padding-top: 3px; }
.credits dd { margin: 0; color: var(--ink); }

/* ---------- project images: one size, stacked, big ---------- */
.shots { display: grid; gap: 22px; padding-bottom: 24px; }
.shot { margin: 0; }
.shot .frame { border-radius: 18px; overflow: hidden; }
.shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.shot figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* ---------- film (MiSight) ---------- */
.film { padding-top: 40px; padding-bottom: 24px; }
.film h2 { margin: 0; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; }
.film p { margin: 14px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.55; color: #4A4850; }
.film-row { margin-top: 28px; display: flex; gap: 16px; align-items: flex-start; }
.clip { margin: 0; }
.clip .frame { border-radius: 18px; overflow: hidden; background: #1a1a1f; }
.clip video { width: 100%; height: auto; }
.clip.tall { flex: .5625 1 0; }
.clip.tall video { aspect-ratio: 9 / 16; object-fit: cover; }
.clip.wide { flex: 1.7778 1 0; }
.clip.wide video { aspect-ratio: 16 / 9; object-fit: cover; }
.clip figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* ---------- more work: one straight column ---------- */
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; padding-bottom: 40px; }   /* one image, its info, then the next: one straight column */
.g { margin: 0; }
.g .frame { border-radius: 16px; overflow: hidden; }
.g img { width: 100%; height: auto; aspect-ratio: 1920 / 872; object-fit: cover; }   /* one size for every card */
.g.fit img { object-fit: contain; background: #fff; }
.g figcaption { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.g figcaption b { display: block; color: var(--ink); font-weight: 600; }
.note { margin: 22px 0 0; max-width: 60ch; font-size: 15px; line-height: 1.55; color: #4A4850; }

/* ---------- next ---------- */
.next { padding-top: 56px; padding-bottom: 72px; }
.next a { display: inline-grid; gap: 10px; text-decoration: none; color: var(--ink); }
.next .eyebrow { margin: 0; }
.next .nx { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; display: inline-flex; align-items: center; gap: .3em; }
.next .nx .ico { width: .7em; height: .7em; stroke-width: 2.2; transition: transform .2s; }
@media (hover: hover) { .next a:hover .ico { transform: translateX(4px); } }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- contact (same as home) ---------- */
.contact { position: relative; color: var(--light); }
.contact .stars { position: absolute; inset: 0; pointer-events: none; background-size: 240px 240px; opacity: .85; }
.cwrap { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: 72px max(24px, env(safe-area-inset-right, 0px)) max(26px, env(safe-area-inset-bottom, 0px)) var(--gutter); }
.cmain { align-self: center; display: grid; gap: 34px; }
.contact h2 { margin: 0; font-size: clamp(42px, 7.4vw, 112px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; text-shadow: 0 1px 14px rgba(0,0,0,.3); }
.channels { display: grid; gap: 20px; justify-items: start; }
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.mail { display: inline-flex; align-items: center; gap: .4em; font-size: clamp(24px, 3.2vw, 38px); font-weight: 600; letter-spacing: -.01em; color: var(--light); text-decoration: none; }
.mail .ico { width: .74em; height: .74em; }
.resume { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--light); text-decoration: none; }
.resume .ico { width: 19px; height: 19px; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin-top: 4px; }
.socials a { color: var(--light); text-decoration: none; border: 1px solid rgba(236,235,241,.45); border-radius: 999px; padding: 10px 18px; transition: background .2s, border-color .2s; }
.socials a:hover { border-color: var(--light); background: rgba(236,235,241,.1); }
.foot-note { margin: 48px 0 0; font-size: 12px; color: rgba(236,235,241,.5); letter-spacing: .04em; line-height: 1.6; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
br.m { display: none; }

@media (max-width: 720px) {
  br.m { display: inline; }
  .intro { padding-top: 28px; padding-bottom: 28px; }
  .intro h1 { font-size: min(calc((100vw - 48px) / 4.6), 88px); }
  .lede { font-size: 16px; margin-top: 20px; }
  .credits { grid-template-columns: 1fr; gap: 4px; margin-top: 28px; }
  .credits dd { margin-bottom: 12px; }
  .shots { gap: 18px; }
  .shot .frame, .clip .frame { border-radius: 14px; }
  .film-row { flex-direction: column; gap: 18px; }
  .clip.tall { flex: none; width: 72%; align-self: center; }
  .clip.wide { flex: none; width: 100%; }
  .gallery { grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; }
  .intro h1.one { font-size: min(calc((100vw - 48px) / 5.3), 88px); white-space: nowrap; }
  .g .frame { border-radius: 12px; }
  .next { padding-top: 40px; padding-bottom: 48px; }
  .next .nx { font-size: min(calc((100vw - 48px) / 9), 36px); }
  .contact h2 { font-size: min(calc((100vw - 48px) / 6.7), 80px); line-height: 1.04; }
  .socials { gap: 8px; font-size: 12px; letter-spacing: .08em; }
  .socials a { padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .next .nx .ico { transition: none; }
}

/* ---------- lightbox ---------- */
.shots .shot img, .gallery .g img { cursor: zoom-in; }
.shots .shot img:focus-visible, .gallery .g img:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
html.lb-open, html.lb-open body { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(12,12,16,.94); color: var(--light); display: grid; place-items: center; opacity: 0; transition: opacity .2s ease; }
.lb.on { opacity: 1; }
.lb[hidden] { display: none; }
.lb-stage { margin: 0; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: max(64px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none; }
.lb-stage figcaption { margin-top: 14px; font-size: 13px; color: rgba(236,235,241,.7); text-align: center; }
.lb-count { position: absolute; top: max(22px, env(safe-area-inset-top, 0px)); left: max(20px, env(safe-area-inset-left, 0px)); margin: 0; font-size: 12px; letter-spacing: .14em; color: rgba(236,235,241,.7); }
.lb button { appearance: none; border: 0; background: rgba(236,235,241,.12); color: var(--light); border-radius: 999px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.lb button:hover { background: rgba(236,235,241,.22); }
.lb button:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; }
.lb button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); z-index: 2; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.lb-prev { left: max(12px, env(safe-area-inset-left, 0px)); }
.lb-next { right: max(12px, env(safe-area-inset-right, 0px)); }
.lb-nav[hidden] { display: none; }
@media (max-width: 720px), (pointer: coarse) { .lb-nav { display: none; } }   /* swipe on touch screens */
@media (prefers-reduced-motion: reduce) { .lb { transition: none; } }

/* ---------- blurred preview while an image loads ---------- */
.frame.lq { position: relative; isolation: isolate; }
.frame.lq::before { content: ""; position: absolute; inset: -8%; z-index: -1; background: var(--lq) center / cover no-repeat; filter: blur(18px); }
.frame.lq.done::before { content: none; }
.js .frame.lq img { opacity: 0; transition: opacity .5s ease; }
.js .frame.lq img.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .frame.lq img { transition: none; } }