/* Mathey Orbit. One motif: the ring, from her own M-in-a-ring logo and the aerial hoop.
   Colours and fonts come from tokens.json (dark) and tokens.light.json (light). */
@font-face { font-family: 'Bodoni Moda'; src: url('../assets/fonts/bodoni-moda.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('../assets/fonts/bodoni-moda-italic.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../assets/fonts/jost.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../assets/fonts/jost-italic.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; }

:root {
  --bar: var(--tovu-theme-preview-height, 0px);
  --header: 105px;
  --gutter: clamp(18px, 4vw, 56px);
  --on-image: #fff;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}
:root[data-theme='light'] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 18px; line-height: 1.6; font-weight: 400; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.04; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.3; }

.kicker { display: flex; align-items: center; gap: .7em; margin: 0 0 1rem; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.kicker::before { content: ''; width: .95em; height: .95em; border: 1px solid var(--accent-text); border-radius: 50%; flex: none; }
.t-italic { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 2.2rem); line-height: 1.25; }

/* ---------- header. Pinned under the host's preview bar, never above it. ---------- */
.site-header { position: fixed; top: var(--bar); left: 0; right: 0; z-index: 40; transition: background-color .3s, border-color .3s; border-bottom: 1px solid transparent; }
.site-header.scrolled { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--border); }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header); padding: 0 var(--gutter); }
.brand { flex: none; display: block; }
.brand-logo, .brand-logo figure { display: block; }
.brand-logo img { width: auto; height: 85px; filter: var(--logo-filter); }
.main-nav { margin-left: auto; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > ul, .main-nav > .menu-list { display: flex; gap: clamp(14px, 2vw, 30px); }
.main-nav > a { margin-left: 24px; text-decoration: none; }
.main-nav a, .main-nav .menu-item-label { text-decoration: none; display: block; padding: 8px 0; white-space: nowrap; cursor: pointer; }
.main-nav li { position: relative; }
.main-nav li > ul { position: absolute; top: 100%; left: -18px; min-width: 210px; padding: 12px 18px; background: var(--surface); border: 1px solid var(--border); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s var(--ease), visibility .2s; }
.main-nav li:hover > ul, .main-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.nav-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.theme-toggle, .nav-toggle, .mnav-close { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 0; }
.theme-toggle { width: 44px; height: 44px; display: grid; place-items: center; }
.theme-toggle svg { width: 24px; height: 24px; transition: transform .6s var(--ease); }
:root[data-theme='light'] .theme-toggle svg { transform: rotate(180deg); }
.nav-toggle, .mnav-close { min-height: 44px; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
.nav-toggle { display: none; }
.site-header.nav-compact .main-nav { display: none; }
.site-header.nav-compact .nav-toggle { display: block; }
@media (max-width: 900px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  :root { --header: 85px; }
  .brand-logo img { height: 65px; }
}
@media (max-width: 480px) {
  :root { --header: 125px; }
  .nav-row { flex-wrap: wrap; gap: 0 24px; padding-block: 8px; }
  .site-header .brand { width: 100%; }
  .nav-actions { margin-left: auto; }
}
.mnav { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--fg); }
.mnav::backdrop { background: var(--bg); }
.mnav-panel { display: flex; flex-direction: column; min-height: 100%; padding: 0 var(--gutter) 24px; }
.mnav-head { display: flex; justify-content: space-between; align-items: center; min-height: var(--header); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
.mnav-body { flex: 1; }
.mnav-list { list-style: none; margin: 0; padding: 0; }
.mnav-list .mnav-list { padding: 0 0 12px 18px; }
.mnav-row { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); }
.mnav-link, .mnav-row > button { display: flex; flex: 1; align-items: center; justify-content: space-between; min-height: 52px; font-family: var(--font-display); font-size: 1.5rem; text-decoration: none; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; padding: 0; }
.mnav-list .mnav-list .mnav-link { font-size: 1.15rem; min-height: 44px; }
.mnav-row svg { width: 18px; height: 18px; flex: none; }
.mnav { overflow: auto; }
.mnav-foot { padding: 16px 0 40px; }

@media (max-width: 700px) { .orbit-progress { display: none; } .m .orbit-ring { bottom: 34%; } }
.plate:not(.plate-logo) img, .ring-mask img { cursor: zoom-in; }
/* ---------- progress ring ---------- */
.orbit-progress { position: fixed; right: 10px; bottom: 10px; width: 28px; height: 28px; z-index: 30; transform: rotate(-90deg); pointer-events: none; fill: none; }
.orbit-progress-track { stroke: var(--border-strong); stroke-width: 1; }
.orbit-progress-bar { stroke: var(--accent-text); stroke-width: 1.6; }

/* ---------- hero: the hoop ---------- */
.orbit-hero { position: relative; }
.m .orbit-hero { height: 240vh; }
.orbit-pin { position: relative; padding: calc(var(--header) + 16px) 0 0; }
.m .orbit-pin { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); overflow: clip; padding: 0; }
.orbit-copy { position: relative; z-index: 2; padding: 0 var(--gutter) 28px; }
.m .orbit-copy { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 90px; background: linear-gradient(to bottom, transparent, var(--bg) 62%); }
.wordmark { font-size: clamp(2.5rem, 9vw, 11rem); font-weight: 500; line-height: .95; letter-spacing: -.02em; }
.orbit-copy .lede { max-width: 62ch; margin: 14px 0 0; color: var(--muted); font-size: clamp(.95rem, 1.3vw, 1.1rem); line-height: 1.5; }
.orbit-ring { --card: clamp(150px, 19vw, 270px); position: relative; }
.m .orbit-ring { position: absolute; left: 0; right: 0; top: calc(var(--header) + 4px); bottom: 21%; }
.orbit-rig { display: flex; gap: 12px; overflow-x: auto; padding: 16px var(--gutter); }
.orbit-card { flex: none; width: var(--card); aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-2); }
.orbit-card img { width: 100%; height: 100%; object-fit: cover; }
.orbit-ring[data-kui-fx] { display: grid; place-items: center; touch-action: pan-y; cursor: grab; }
.orbit-ring[data-kui-fx] .orbit-rig { display: grid; place-items: center; overflow: visible; padding: 0; width: var(--card); transform-style: preserve-3d; transform: rotateY(var(--orbit-scroll, 0deg)); }
.orbit-ring[data-kui-fx] .orbit-card[data-kui-step-offset] { backface-visibility: visible; pointer-events: none; }
@media (pointer: coarse) { .orbit-ring[data-kui-fx] { pointer-events: none; } }

/* ---------- teasers ---------- */
.teaser { position: relative; }
.teaser h2 { font-size: clamp(2.6rem, 8vw, 8rem); line-height: .98; }
.teaser h2 a { text-decoration: none; }
.teaser h2 a:hover { font-style: italic; color: var(--accent-text); }
/* arc divider: a shallow slice of the ring */
.t-columns::before, .t-stack::before, .t-pair::before, .t-cirque::before, .t-about::before { content: ''; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 46px; border-top: 1px solid var(--border-strong); border-radius: 50% / 100% 100% 0 0; pointer-events: none; }

/* mask: 03 Concept */
.t-mask .t-pin { position: relative; min-height: 80vh; overflow: clip; color: var(--on-image); background: #000; }
.m .t-mask { height: 220vh; }
.m .t-mask .t-pin { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); }
.t-mask-img, .t-mask-img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-mask-img img { object-fit: cover; }
.m .t-mask-img img { clip-path: circle(calc(17% + var(--p, 1) * 95%) at 50% 42%); }
.t-mask-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px var(--gutter) 40px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.72) 58%); }
.t-mask-copy p { max-width: 54ch; margin: 12px 0 0; }
.t-mask-copy .kicker { color: #fff; margin: 0 0 1rem; }
.t-mask-copy .kicker::before { border-color: #fff; }
.t-mask-copy a:hover { color: #fff; }

/* strip: Bergdorfs */
.t-strip .t-pin { padding: clamp(60px, 9vh, 110px) 0; overflow: clip; }
.t-strip-head { padding: 0 var(--gutter) 28px; }
.t-strip-head p:last-child { margin: 10px 0 0; font-size: .78rem; letter-spacing: .18em; color: var(--muted); }
.t-track { display: flex; gap: clamp(10px, 1.4vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter); -webkit-overflow-scrolling: touch; }
.t-track > a { flex: none; scroll-snap-align: center; width: 76vw; }
.t-track img { width: 100%; height: 56vh; object-fit: cover; box-shadow: var(--plate-shadow); }
@media (min-width: 901px) {
  .t-track > a { width: auto; }
  .t-track img { width: auto; height: 46vh; min-width: 16vw; max-width: none; object-fit: contain; }
  .m .t-strip { height: 320vh; }
  .m .t-strip .t-pin { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); display: flex; flex-direction: column; justify-content: center; padding: var(--header) 0 0; }
  .m .t-track { overflow: visible; width: max-content; scroll-snap-type: none; will-change: transform; }
}

/* columns: MATHEY CREATIVE */
.t-columns { padding: clamp(80px, 12vh, 150px) var(--gutter); overflow: clip; }
.t-columns-copy { margin-bottom: clamp(40px, 8vh, 90px); }
.t-columns-copy .t-italic { margin: 14px 0 0; }
.t-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2vw, 28px); }
.t-col { display: grid; gap: clamp(10px, 2vw, 28px); align-content: start; will-change: transform; }
.t-col img { width: 100%; box-shadow: var(--plate-shadow); }
@media (max-width: 700px) { .t-cols { grid-template-columns: repeat(2, 1fr); } .t-col:nth-child(3) { display: none; } }

/* stack: UCLA */
.t-stack { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 60px); padding: clamp(80px, 12vh, 150px) var(--gutter); }
.t-stack-copy p:last-child { margin-top: 14px; max-width: 34ch; }
.m .t-stack-copy { position: sticky; top: calc(var(--bar) + var(--header) + 24px); align-self: start; }
.t-stack-cards { display: grid; gap: clamp(16px, 4vh, 40px); }
.t-stack-cards figure { box-shadow: 0 -14px 40px -24px rgba(0,0,0,.6); }
.t-stack-cards img { width: 100%; height: 64vh; object-fit: cover; }
.m .t-stack-cards figure { position: sticky; top: calc(var(--bar) + var(--header) + 24px); }
.m .t-stack-cards figure:nth-child(2) { top: calc(var(--bar) + var(--header) + 40px); transform: rotate(-.8deg); }
.m .t-stack-cards figure:nth-child(3) { top: calc(var(--bar) + var(--header) + 56px); transform: rotate(.7deg); }
.m .t-stack-cards figure:nth-child(4) { top: calc(var(--bar) + var(--header) + 72px); }
@media (max-width: 900px) { .t-stack { grid-template-columns: 1fr; } .m .t-stack-copy { position: static; } .t-stack-cards img { height: 52vh; } }

/* pair: CCAC and SDCF */
.t-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); padding: clamp(80px, 12vh, 150px) var(--gutter); overflow: clip; }
.t-pair h2 { font-size: clamp(2.4rem, 5.6vw, 5.6rem); }
.t-pair-item p:last-child { margin: 10px 0 0; max-width: 38ch; }
.t-pair-img { margin-bottom: 26px; will-change: transform; }
.t-pair-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--plate-shadow); }
.t-pair-ring { border: 1px solid var(--accent-text); border-radius: 50%; padding: 12px; aspect-ratio: 1; }
.t-pair-ring figure, .t-pair-ring img { width: 100%; height: 100%; aspect-ratio: 1; border-radius: 50%; }
.t-pair-ring img { object-position: 40% 50%; }
@media (max-width: 700px) { .t-pair { grid-template-columns: 1fr; } }

/* rows: Cirque + Dance */
.t-cirque { padding: clamp(80px, 12vh, 150px) 0; overflow: clip; }
.t-cirque-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 clamp(20px, 5vw, 70px); padding: 0 var(--gutter) clamp(28px, 6vh, 60px); }
.t-cirque-copy .kicker { width: 100%; }
.t-row { display: flex; gap: clamp(8px, 1.2vw, 16px); width: max-content; margin-bottom: clamp(8px, 1.2vw, 16px); will-change: transform; }
.m .t-row { margin-left: -17vw; }
.t-row figure { flex: none; min-width: 20vw; }
.t-row img { width: auto; max-width: none; height: clamp(160px, 30vh, 340px); }
html:not(.m) .t-cirque, html:not(.m) .t-film { overflow-x: auto; }
.t-film { padding: 0 0 clamp(60px, 10vh, 110px); overflow: clip; }
.t-film .t-row img { height: clamp(110px, 18vh, 190px); }

/* about */
.t-about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 90px); align-items: center; padding: clamp(80px, 12vh, 150px) var(--gutter); }
.t-about h2 { display: inline-block; margin: 26px 34px 0 0; font-size: clamp(2.2rem, 5.4vw, 5.2rem); }
.t-services { list-style: none; margin: 26px 0 0; padding: 0; font-size: .78rem; letter-spacing: .18em; color: var(--muted); }
.t-services li { padding: 8px 0; border-top: 1px solid var(--border); }
.ring-mask { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; border: 1px solid var(--accent-text); border-radius: 50%; padding: 14px; }
.ring-mask img, .ring-mask > div, .ring-mask figure { width: 100%; height: 100%; }
.ring-mask img { border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
@media (max-width: 800px) { .t-about { grid-template-columns: 1fr; } }

/* contact */
.t-contact { position: relative; min-height: 86vh; display: grid; place-items: center; overflow: clip; color: var(--on-image); background: #000; }
.t-contact-img, .t-contact-img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-contact-img img { object-fit: cover; }
.t-contact-copy { position: relative; display: grid; justify-items: center; gap: 28px; text-align: center; max-width: 34em; padding: 48px var(--gutter); }
.t-contact-copy::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(closest-side, rgba(0,0,0,.72), rgba(0,0,0,.5) 70%, transparent); }
.ring-link { display: grid; place-items: center; width: 168px; height: 168px; border: 1px solid #fff; border-radius: 50%; color: #fff; text-decoration: none; font-size: .8rem; letter-spacing: .24em; transition: background-color .3s, color .3s; }
.ring-link:hover { background: #fff; color: #000; }

/* ---------- inner pages ---------- */
.inner { padding: calc(var(--header) + clamp(30px, 8vh, 80px)) var(--gutter) 0; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; }
.page-title { font-size: clamp(3rem, 12vw, 12rem); line-height: .95; letter-spacing: -.02em; overflow-wrap: anywhere; }
.project-head { padding-bottom: clamp(30px, 6vh, 70px); }
.lede, .story { max-width: 62ch; }
.project-head .lede { margin-top: 22px; font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.45; }
.credits { color: var(--muted); font-size: .92rem; max-width: 62ch; }
.plates-head { font-family: var(--font-body); font-size: .85rem; font-weight: 500; letter-spacing: .2em; line-height: 1.4; margin: 0 0 12px; }
.project-head .plates-head { margin-top: 24px; }
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2.2vw, 32px); padding-bottom: clamp(30px, 6vh, 70px); align-items: start; }
.plates > .plates-head, .plates > .story, .plate-wide, .plates > .link-row { grid-column: 1 / -1; }
.plates-head { padding-top: 22px; border-top: 1px solid var(--border-strong); }
.plate img { width: 100%; box-shadow: var(--plate-shadow); }
.plate figcaption, .gallery-wall figcaption { margin-top: 10px; font-size: .84rem; line-height: 1.4; color: var(--muted); }
.plate-logo { grid-column: 1 / -1; max-width: 420px; }
.project-head .plate-logo { margin-top: 26px; }
.video iframe { display: block; width: 100%; max-width: 124svh; margin-inline: auto; aspect-ratio: 16 / 9; height: auto; border: 0; background: #000; }
/* Videos open through the ring as they scroll in. Browsers without scroll timelines just show them. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .m .video iframe { animation: video-ring 1ms linear both; animation-timeline: view(); animation-range: entry 5% cover 42%; }
  }
}
@keyframes video-ring { from { clip-path: circle(20% at 50% 50%); scale: .86; } to { clip-path: circle(75% at 50% 50%); scale: 1; } }
@media (max-width: 620px) { .plates { grid-template-columns: 1fr; } }
.project-nav { display: flex; justify-content: space-between; gap: 24px; padding: clamp(40px, 8vh, 90px) 0; border-top: 1px solid var(--border-strong); }
.project-nav a { font-family: var(--font-display); font-size: clamp(1.5rem, 4.6vw, 4.2rem); line-height: 1.05; text-decoration: none; }
.project-nav a:hover { font-style: italic; }
.project-nav a[rel='next'] { margin-left: auto; text-align: right; }
.project-nav span { display: block; margin-bottom: 8px; font-family: var(--font-body); font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }

.service { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 4vw, 60px); padding: clamp(32px, 6vh, 64px) 0; border-top: 1px solid var(--border-strong); }
.service h2 { font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1.12; }
@media (max-width: 760px) { .service { grid-template-columns: 1fr; } }

.bio-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 5vw, 70px); padding-bottom: clamp(30px, 6vh, 70px); align-items: start; }
.bio-head .page-title { grid-column: 1 / -1; }
.bio-head .ring-mask { grid-row: span 2; }
.bio-head blockquote { margin-bottom: 24px; }
.bio-head .story { grid-column: 2; }
@media (max-width: 760px) { .bio-head { grid-template-columns: 1fr; } .bio-head .story { grid-column: 1; } }
.highlights { padding: 0 0 clamp(30px, 6vh, 70px); }
.highlights ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(20px, 4vw, 60px); }
.highlights li { break-inside: avoid; padding: 10px 0 10px 1.5em; position: relative; }
.highlights li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: .7em; height: .7em; border: 1px solid var(--accent-text); border-radius: 50%; }
@media (max-width: 760px) { .highlights ul { columns: 1; } }
.logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: clamp(30px, 6vh, 70px); }
.logo-wall figure { background: #fff; display: grid; place-items: center; height: 110px; padding: 14px; }
.logo-wall img { max-height: 76px; width: auto; object-fit: contain; }

.gallery-wall { columns: 3 280px; column-gap: clamp(10px, 1.6vw, 22px); padding-bottom: clamp(30px, 6vh, 70px); }
.gallery-wall figure { break-inside: avoid; margin-bottom: clamp(16px, 2.2vw, 30px); }
.gallery-wall img { width: 100%; cursor: zoom-in; box-shadow: var(--plate-shadow); transition: opacity .25s; }
.gallery-wall img:hover { opacity: .86; }

.contact-page { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 80px); padding-bottom: clamp(60px, 10vh, 120px); }
.contact-page .page-title { grid-column: 1 / -1; }
.contact-page .lede { grid-column: 1; margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.contact-page .link-row { grid-column: 1; }
.contact-form { grid-column: 2; grid-row: 2 / span 3; }
@media (max-width: 800px) { .contact-page { grid-template-columns: 1fr; } .contact-form, .contact-page .lede, .contact-page .link-row { grid-column: 1; grid-row: auto; } }
.link-row a { margin-right: 22px; font-size: .84rem; letter-spacing: .18em; text-transform: uppercase; }
.canvas form, .post-detail form { display: grid; gap: 22px; }
.canvas form label { display: block; margin-bottom: 6px; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.canvas input, .canvas textarea { width: 100%; padding: 10px 2px; font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0; }
.canvas textarea { min-height: 150px; resize: vertical; }
.canvas input:focus, .canvas textarea:focus { outline: none; border-bottom-color: var(--accent-text); box-shadow: 0 1px 0 var(--accent-text); }
.canvas form button, .btn { display: inline-block; justify-self: start; min-height: 48px; padding: 12px 34px; font: inherit; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--accent-fg); background: var(--accent); border: 1px solid var(--accent); border-radius: 999px; cursor: pointer; }
.canvas form button:hover, .btn:hover { background: transparent; color: var(--accent-text); }

/* ---------- pages on the default templates: Privacy, Blog, posts, 404 ---------- */
.wrap { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; }
.post-detail { padding-top: calc(var(--header) + 40px); padding-bottom: 80px; }
.post-detail h1 { font-size: clamp(2.4rem, 7vw, 5rem); margin-bottom: 24px; }
.post-detail h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 1.4em 0 .5em; }
main > .wrap:first-child:not(.post-detail), .hero.wrap { padding-top: calc(var(--header) + 40px); padding-bottom: 60px; }
.jini-pagination { display: flex; justify-content: space-between; padding: 30px 0; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--border-strong); padding: 34px var(--gutter) 34px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; padding-right: 58px; }
.footer-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
.footer-links a { text-decoration: none; }
.footer-links ul { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; }
.footer-note { margin: 0; font-size: .78rem; letter-spacing: .1em; color: var(--muted); }

/* ---------- display type: sturdier hairlines than Bodoni's largest optical size ---------- */
h1, h2 { font-optical-sizing: none; font-variation-settings: 'opsz' 28; }
.wordmark { font-weight: 600; font-variation-settings: 'opsz' 14; }

/* ---------- hero: the wordmark sits on solid page colour, the ring stays above it ---------- */
.m .orbit-copy { padding-top: 56px; background: linear-gradient(to bottom, transparent, var(--bg) 54px); }
.m .orbit-ring { bottom: 34%; }
@media (max-width: 700px) { .m .orbit-ring { bottom: 40%; } }

/* ---------- project head: title and one of her photographs share the first screen ---------- */
.inner { padding-top: calc(var(--header) + clamp(14px, 3vh, 34px)); }
.page-title { font-size: clamp(2.4rem, 6.2vw, 6.6rem); }
.project-head:has(.plate-hero) { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(20px, 4vw, 64px); align-content: start; }
.project-head:has(.plate-hero) > * { grid-column: 1; }
.project-head > .plate-hero { grid-column: 2; grid-row: 1 / span 6; }
.plate-hero img { width: 100%; height: calc(100svh - var(--bar) - var(--header) - clamp(36px, 7vh, 70px)); min-height: 280px; object-fit: cover; }
.project-head .plates-head { padding-top: 0; border-top: 0; }
@media (max-width: 760px) {
  .project-head:has(.plate-hero) { display: block; }
  .plate-hero { margin: 14px 0 20px; }
  .plate-hero img { height: min(62svh, 118vw); min-height: 0; }
}

/* ---------- ring sharpness: Chrome rasterises perspective layers at their layout size, so a
   card magnified by perspective goes soft. Lay cards out at twice the size and scale them back. ---------- */
.orbit-ring[data-kui-fx] .orbit-card[data-kui-step-offset] { width: calc(var(--card) * 2); max-width: none; scale: .5 .5 .5; }
.orbit-ring[data-kui-fx] .orbit-rig { width: calc(var(--card) * 2); translate: 0 -7%; }

/* ---------- mobile hero: ring and wordmark read as one block ---------- */
@media (max-width: 700px) {
  .orbit-ring { --card: min(62vw, 28svh); }
  .m .orbit-pin { display: flex; flex-direction: column; padding-top: var(--header); }
  .m .orbit-ring { position: relative; top: auto; bottom: auto; left: auto; right: auto; flex: 1 1 auto; min-height: 0; order: -1; }
  .m .orbit-copy { position: relative; flex: none; padding-top: 10px; background: linear-gradient(to bottom, transparent, var(--bg) 8px); }
}

/* ---------- hero: the ring has its own space, the copy has its own. scripts/orbit.js solves
   --card and --orbit-r so the whole ring fits inside .orbit-ring at every point of its turn. ---------- */
.wordmark { font-size: clamp(2.5rem, min(9vw, 15svh), 11rem); }
.orbit-copy .lede { max-width: 86ch; }
.m .orbit-pin { display: flex; flex-direction: column; padding: var(--header) 0 0; }
.m .orbit-ring { position: relative; top: auto; bottom: auto; left: auto; right: auto; flex: 1 1 0; min-height: 0; order: -1; }
.m .orbit-copy { position: relative; left: auto; right: auto; bottom: auto; flex: none; padding-top: 0; padding-bottom: clamp(14px, 3svh, 28px); background: none; }
.orbit-ring[data-kui-fx] .orbit-rig { translate: 0 var(--orbit-shift, 0px); transform: rotateX(var(--kui-ring-tilt, -10deg)) rotateY(var(--orbit-scroll, 0deg)) rotateX(calc(-1 * var(--kui-ring-tilt, -10deg))); }
.orbit-ring[data-kui-fx] .orbit-card[data-kui-step-offset] { --kui-ring-radius: var(--orbit-r); }

/* ---------- home spacing fixes ---------- */
.orbit-ring { --card: clamp(150px, min(30vw, 30svh), 300px); }
@media (max-width: 700px) { .orbit-ring { --card: min(62vw, 28svh); } }
.t-columns, .t-stack, .t-pair, .t-cirque, .t-about { padding-top: clamp(44px, 6vh, 72px); padding-bottom: clamp(32px, 5vh, 60px); }
.t-film { padding-bottom: clamp(40px, 7vh, 70px); }

/* ---------- inner page motion. Everything here is gated on .m, so no JS or reduced motion stays still ---------- */
.m .plate-hero { position: relative; overflow: hidden; }
.m .plate-hero img { animation: ring-open 1.25s var(--ease) both; }
@keyframes ring-open { from { clip-path: circle(11% at 50% 46%); } to { clip-path: circle(90% at 50% 46%); } }
.m .plate-hero::after { content: ''; position: absolute; left: 50%; top: 46%; width: 44%; aspect-ratio: 1; margin: -22% 0 0 -22%; border: 1px solid #fff; border-radius: 50%; pointer-events: none; animation: ring-flare 1.25s var(--ease) both; }
@keyframes ring-flare { from { transform: scale(.5); opacity: 1; } to { transform: scale(4); opacity: 0; } }

.m .scene-frame .plate:not(.plate-logo) { overflow: hidden; }
.m .scene-parallax .plate { will-change: transform; }
@media (max-width: 620px) { .m .scene-parallax .plate { overflow: hidden; } }

.m .inner .t-strip { display: block; width: 100vw; margin-left: calc(50% - 50vw); padding-bottom: 0; }
.inner .t-strip .t-pin { padding-top: clamp(30px, 6vh, 60px); padding-bottom: clamp(30px, 6vh, 60px); }
.inner .t-strip .plates-head { border: 0; padding: 0; }
.inner .t-track > figure { flex: none; scroll-snap-align: center; }
.inner .t-track figcaption { max-width: 60ch; }
.inner .t-track.auto { overflow: visible; width: max-content; scroll-snap-type: none; will-change: transform; }
.inner .t-track.auto img { width: auto; max-width: 84vw; height: auto; max-height: 56vh; object-fit: contain; }
@media (min-width: 901px) { .inner .t-track.auto img { height: 58vh; max-height: none; max-width: none; min-width: 0; } }

.m .scene-stack { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 8vh; }
.m .scene-stack .plate, .m .scene-stack .plate-wide { grid-column: 1; position: sticky; top: calc(var(--bar) + var(--header) + 10px); background: var(--bg); }
.m .scene-stack .plate:nth-child(2) { top: calc(var(--bar) + var(--header) + 26px); transform: rotate(-.7deg); }
.m .scene-stack .plate:nth-child(3) { top: calc(var(--bar) + var(--header) + 42px); transform: rotate(.6deg); }
.m .scene-stack .plate img { height: min(70svh, 60vw); min-height: 300px; object-fit: contain; background: var(--surface); }

.m .scene-zoom .plate, .m .scene-drift .plate { will-change: transform, opacity; transform-origin: 50% 80%; }
.m .scene-drift { overflow-x: clip; }

.ring-band { width: 100vw; margin: 20px 0 0 calc(50% - 50vw); overflow: clip; padding: 10px 0; }
.ring-row { align-items: center; gap: clamp(12px, 2vw, 26px); margin: 0; }
.ring-row figure { flex: none; width: clamp(120px, 15vw, 210px); min-width: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--accent-text); padding: 6px; }
.ring-row figure:nth-child(even) { width: clamp(96px, 11vw, 160px); }
.ring-row img { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 50%; transform: rotate(var(--turn, 0deg)); }
.m .ring-row { margin-left: -20vw; }
html:not(.m) .ring-band { overflow-x: auto; }
.contact-page .ring-band, .project-head .ring-band, .service .ring-band { grid-column: 1 / -1; }
.contact-page .contact-form { grid-row: 3 / span 2; }
@media (max-width: 800px) { .contact-page .contact-form { grid-row: auto; } }

.scene-ring .ring-mask { --turn: 0deg; }
.m .scene-ring .ring-mask { border-style: dashed; rotate: var(--turn); }
.m .scene-ring .ring-mask img { rotate: calc(var(--turn) * -1); scale: var(--open, 1); }
.m .scene-ring .ring-mask img { animation: ring-open 1.25s var(--ease) both; }

.m .scene-marquee { display: block; background: none; border: 0; overflow: clip; width: 100vw; margin-left: calc(50% - 50vw); }
.m .logo-track { display: flex; gap: 1px; width: max-content; will-change: transform; }
.m .logo-track figure { flex: none; width: clamp(150px, 16vw, 210px); }

.m img.rw { clip-path: circle(0% at 50% 50%); }
.m img.rw.in { clip-path: none; animation: ring-open 950ms var(--ease) both; }

/* next-project photo in a ring */
.nav-ring { display: block; width: clamp(92px, 16vw, 220px); aspect-ratio: 1; margin-bottom: 14px; border: 1px solid var(--accent-text); border-radius: 50%; padding: 7px; }
.project-nav a[rel='next'] .nav-ring { margin-left: auto; }
.nav-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: scale .5s var(--ease); }
.project-nav a:hover .nav-ring img { scale: 1.05; }
.project-nav { align-items: flex-end; }

/* ---------- cloak: kUInetic's own cloak CSS only arrives with its script at the end of body, so
   the entrance targets are hidden here, in <head>. Never with JS off or reduced motion; if the
   script dies the animation releases them after 2s. .page-title gets its data-kui from orbit.js. ---------- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html[data-kui-cloak] :is([data-kui~=fade-up], [data-kui~="fade-up,"], [data-kui~=fade-blur-in], [data-kui~="fade-blur-in,"], [data-kui~=carousel-3d], [data-kui~="carousel-3d,"], [data-kui~=carousel-stack], .inner .page-title):not([data-kui-state]) { opacity: 0; animation: kui-cloak-release 1ms linear 2s forwards; }
}
@keyframes kui-cloak-release { to { opacity: 1; } }

/* ---------- image caps: nothing dominates the page, nothing is cropped ---------- */
main img[role='button'] { cursor: zoom-in; }
.plate img { display: block; width: auto; max-width: 100%; max-height: 72svh; margin-inline: auto; object-fit: contain; }
.plate-hero img { width: 100%; max-height: none; object-fit: cover; }
.plate-wide { justify-self: center; width: min(100%, 1040px); }
.plate-logo img { margin-inline: 0; }
.plate figcaption { text-align: left; }
.gallery-wall img { display: block; width: auto; max-width: 100%; max-height: 72svh; margin-inline: auto; }
.m .scene-frame .plate:not(.plate-logo) { width: fit-content; max-width: 100%; justify-self: center; }
.bio-head .ring-mask { max-width: 340px; }
[data-agent-element='bio-media'] { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; }
[data-agent-element='bio-media'] .plate-wide { width: min(100%, 720px); }
[data-agent-element='bio-media'] .plate img { max-height: 54svh; }
@media (max-width: 620px) { [data-agent-element='bio-media'] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.m .scene-stack .plate img { width: 100%; height: min(64svh, 56vw); min-height: 240px; max-height: none; }

.t-pair-ring { max-width: min(100%, 64svh); margin-inline: auto; }
.t-pair-img img { max-height: 64svh; }

/* ---------- regular carousels: kUInetic carousel-slide. Arrows bottom right, 44px. Move only on request ---------- */
.m .t-strip { height: auto; }
.m .t-strip .t-pin { position: static; height: auto; display: block; padding: clamp(40px, 7vh, 80px) 0; }
.orbit-carousel { position: relative; padding: 0 var(--gutter) 60px; }
.inner .orbit-carousel { padding-inline: 0; }
.oc-slide { display: grid; grid-template-columns: repeat(var(--oc-n, 3), minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); align-items: center; }
.oc-slide figure, .oc-slide > a { min-width: 0; margin: 0; width: auto; display: block; }
.oc-photos .oc-slide img { display: block; width: 100%; height: clamp(220px, 50svh, 460px); max-height: none; max-width: 100%; object-fit: contain; }
.oc-small .oc-slide img { height: clamp(140px, 26svh, 240px); }
.oc-span { grid-column: 1 / -1; }
.oc-rings .oc-slide { justify-items: center; }
.oc-rings figure { width: clamp(110px, 14vw, 190px); aspect-ratio: 1; padding: 6px; border: 1px solid var(--accent-text); border-radius: 50%; overflow: hidden; }
.oc-rings img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ring-band { width: auto; margin: 20px 0 0; overflow: visible; padding: 0; }
.kui-slideshow-controls { position: absolute; right: 0; bottom: 0; padding: 0; gap: 8px; justify-content: flex-end; }
.orbit-carousel:not(.inner *) > .kui-slideshow-controls { right: var(--gutter); }
.orbit-carousel .kui-slideshow-controls button { width: 44px; height: 44px; min-inline-size: 44px; min-block-size: 44px; background: var(--bg) !important; color: var(--fg) !important; border: 1px solid var(--border-strong) !important; }
.orbit-carousel .kui-slideshow-controls button:hover { color: var(--accent-text) !important; border-color: var(--accent-text) !important; }
/* Things arrive with a stagger when the carousel enters */
.m .orbit-carousel:not(.in) .oc-slide > * { opacity: 0; }
.orbit-carousel[data-kui-fx] { overflow: clip; }
.orbit-carousel, .inner .orbit-carousel { padding: 0 0 60px; margin-inline: var(--gutter); }
.inner .orbit-carousel { margin-inline: 0; }
.orbit-carousel > .kui-slideshow-controls, .orbit-carousel:not(.inner *) > .kui-slideshow-controls { right: 0; }
[data-agent-element='project-story'] .plate img { max-height: 58svh; }
.m .orbit-carousel.in .oc-slide:not([inert]) > * { animation: tile-in 620ms var(--ease) both; }
.m .orbit-carousel.in .oc-slide > *:nth-child(2) { animation-delay: 70ms; }
.m .orbit-carousel.in .oc-slide > *:nth-child(3) { animation-delay: 140ms; }
.m .orbit-carousel.in .oc-slide > *:nth-child(4) { animation-delay: 210ms; }
.m .orbit-carousel.in .oc-slide > *:nth-child(5) { animation-delay: 280ms; }
.m .orbit-carousel.in .oc-slide > *:nth-child(6) { animation-delay: 350ms; }
@keyframes tile-in { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
/* Logos: white tiles that read in both modes, and no leftover grey cell */
.logo-wall, .logo-wall.is-carousel { display: block; background: none; border: 0; }
html:not(.m) .logo-wall { display: grid; }
.logo-wall figure { border: 1px solid var(--border); border-radius: 4px; }
.oc-logos .oc-slide { align-items: stretch; }

/* ---------- lightbox: every photo shape fits the visible window ---------- */
dialog.kui-lightbox .kui-lightbox-gallery img,
dialog.kui-lightbox .kui-lightbox-gallery img.is-tall,
dialog.kui-lightbox .kui-lightbox-gallery img.is-fit { inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: calc(100svh - 2 * var(--kui-lightbox-pad, 48px) - 92px); object-fit: contain; }
dialog.kui-lightbox { overflow: hidden; }
dialog.kui-lightbox:focus, dialog.kui-lightbox :not(button):focus { outline: none !important; }
dialog.kui-lightbox button:focus { outline: none; }
dialog.kui-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- lightbox: kUInetic's own, only the backdrop is deepened ---------- */
.kui-lightbox { background: rgba(8, 9, 10, .66); --kui-lightbox-arrow-fg: #fff; --kui-lightbox-arrow-bg: rgba(0, 0, 0, .62); }
.kui-lightbox:focus-visible, .kui-lightbox-slot:focus-visible, .kui-lightbox-gallery:focus-visible { outline: none; }
.kui-lightbox::backdrop { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* ---------- phone hero: kUInetic carousel-stack, set by scripts/orbit.js at 700px and under. It
   undoes the ring's 3D rig and doubled cards, and takes touch back so the stack can be swiped. No
   scroll rotation here, so the hero is one screen tall instead of a 240vh pin. ---------- */
@media (max-width: 700px) { .m .orbit-hero { height: auto; } }
.orbit-ring[data-kui-fx~=carousel-stack] { pointer-events: auto; }
.orbit-ring[data-kui-fx~=carousel-stack] .orbit-rig { width: var(--card); translate: none; transform: none; transform-style: flat; }
.orbit-ring[data-kui-fx~=carousel-stack] .orbit-card[data-kui-step-offset] { width: var(--card); scale: none; }