/* Shared case-study system for Alex Binyon's project pages */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#121411; --paper:#f2f0e9; --acid:#d7ff3f; --warm:#e55c36; --line:rgba(18,20,17,.18); --font-1:"Space Grotesk",sans-serif; --font-2:"Space Grotesk",sans-serif; }
body { background:var(--paper); color:var(--ink); }

/* Identity and navigation */
.s-header { height:9.2rem; background:transparent; border-bottom:1px solid rgba(255,255,255,.22); }
.s-header .row { max-width:none; padding:0 5vw; position:relative; }
.s-header__logo { position:absolute!important; left:50%!important; top:0!important; transform:translateX(-50%)!important; width:14rem!important; margin:0!important; z-index:3; }
.s-header__logo a { width:max-content!important; height:auto; color:#fff!important; font:600 2rem/1 "Space Grotesk",sans-serif; letter-spacing:-.04em; white-space:nowrap!important; }
.s-header__logo a:hover { color:#fff!important; }
.logo-mark { color:var(--acid); }
.s-header__nav { position:absolute!important; right:5vw!important; top:0!important; }
.s-header__nav a { font:500 1.2rem/1 "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.s-header__nav li.current a,.s-header__nav .current a { background:transparent!important; background-color:transparent!important; color:var(--acid)!important; box-shadow:inset 0 -2px 0 var(--acid); }
.s-header__nav li a:hover { color:var(--acid); }
.s-header.sticky { background:rgba(18,20,17,.95); backdrop-filter:blur(12px); }

/* Project hero */
.s-home { min-height:74vh; isolation:isolate; position:relative; background-color:var(--ink); }
.s-home::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(8,10,7,.82),rgba(8,10,7,.3) 68%,rgba(8,10,7,.48)); pointer-events:none; }
.s-home::after { content:""; position:absolute; inset:0; z-index:1; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:10vw 10vw; pointer-events:none; }
.s-home__content { z-index:2; padding-top:8rem; }
.s-home__slide-text { max-width:110rem; }
.s-home__slide-text::before { content:"Case study / Alex Binyon"; display:block; margin-bottom:2.4rem; color:var(--acid); font:500 1.15rem/1.4 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.14em; }
.s-home__slide-text h1 { color:#fff; font:600 clamp(5.2rem,8vw,11rem)/.9 "Space Grotesk",sans-serif; letter-spacing:-.065em; margin:0 0 2.5rem; max-width:105rem; }
.s-home__slide-text h1 span { color:var(--acid); }
.s-home__slide-text>p { max-width:65rem; color:rgba(255,255,255,.82); font-size:clamp(1.8rem,2vw,2.3rem); line-height:1.45; }

/* Reading flow */
.s-styles { background:var(--paper)!important; padding:12rem 0!important; overflow:hidden; }
.s-styles>.row { max-width:118rem; }
.s-styles .intro { max-width:92rem; }
.s-styles .intro>h1 { font:600 clamp(4.4rem,6vw,8rem)/.95 "Space Grotesk",sans-serif; letter-spacing:-.055em; color:var(--ink); margin-bottom:3.5rem; }
.s-styles h2 { font:600 clamp(3rem,4vw,5rem)/1.05 "Space Grotesk",sans-serif!important; letter-spacing:-.04em; color:var(--ink); border-bottom:1px solid var(--line)!important; padding-bottom:1.5rem!important; margin-top:7rem!important; }
.s-styles h3 { font:600 clamp(2.2rem,2.6vw,3.2rem)/1.15 "Space Grotesk",sans-serif; color:var(--ink); }
.s-styles p,.exhibit-section p { color:#454941!important; font-size:clamp(1.7rem,1.6vw,2rem)!important; line-height:1.7!important; max-width:80rem; }
.s-styles .intro>p:first-of-type { font-size:clamp(2rem,2.2vw,2.7rem)!important; line-height:1.5!important; color:var(--ink)!important; }
.s-styles hr.fancy { border-color:var(--ink); margin:6rem 0; }
.s-styles img { display:block; border-radius:0!important; }
.s-styles a:has(>img) { display:block; overflow:hidden; background:var(--ink); margin:2rem 0; }
.s-styles a>img { transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .35s; }
.s-styles a:hover>img { transform:scale(1.025); opacity:.88; }
/* Partner marks are supporting credits, not gallery images. */
.s-styles a:has(>img[src$="FIFEX_logo.jpg"]) { display:inline-block; width:min(28rem,100%); margin:2rem 0; padding:0; overflow:hidden; background:transparent; border-radius:12%; line-height:0; }
.s-styles img[src$="FIFEX_logo.jpg"] { width:100%!important; height:auto!important; margin:0!important; object-fit:contain; filter:none; border-radius:12%!important; }
.s-styles a:hover>img[src$="FIFEX_logo.jpg"] { transform:none; opacity:1; }
.image-pair { gap:1.8rem!important; margin-top:2.5rem!important; }
.image-pair img,.image-single img { border:0!important; }
video,.youtube-wrap { width:min(118rem,90vw)!important; height:auto!important; border-radius:0!important; border:0!important; background:var(--ink); }
center { margin:5rem 0; }
/* Pitlochry build diary: pair each prototype with its working test. */
.media-block { display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"still motion" "caption motion"; align-items:start; gap:0 2.4rem; margin:0 0 7rem!important; }
.media-block img { grid-area:still; width:100%!important; aspect-ratio:4/3!important; object-fit:cover; margin:0!important; border:0!important; }
.media-block video { grid-area:motion; width:100%!important; max-width:none!important; aspect-ratio:4/3; object-fit:cover; margin:0!important; }
.media-block .media-caption { grid-area:caption; margin:1.2rem 0 0!important; color:#686c64!important; font:500 1.1rem/1.5 "DM Mono",monospace!important; text-transform:uppercase; letter-spacing:.05em; }
/* Brewhouse Yard: installation pair and portrait demonstration. */
.project-media-pair { display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; margin:5rem 0 2rem; }
.project-media-pair figure { margin:0; }
.project-media-pair img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.project-media-pair figcaption,.portrait-demo__label { margin-top:1.2rem; color:#686c64; font:500 1.1rem/1.5 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.05em; }
.portrait-demo { display:grid; grid-template-columns:minmax(16rem,1fr) minmax(28rem,56rem) minmax(16rem,1fr); align-items:start; width:min(118rem,90vw); margin:6rem auto 9rem; padding:3rem; background:#deddd4; }
.portrait-demo__label { margin:0!important; padding-right:2rem; color:var(--ink)!important; }
.portrait-demo video { grid-column:2; width:100%!important; max-width:56rem!important; max-height:78vh; object-fit:contain; margin:0 auto; background:var(--ink); }
/* Product studies: one process image supported by two outcome views. */
.product-gallery { display:grid; grid-template-columns:1.15fr 1fr; grid-template-rows:1fr 1fr; gap:2rem; margin:5rem 0 7rem; }
.product-gallery figure { display:flex; flex-direction:column; margin:0; min-width:0; }
.product-gallery__lead { grid-row:1 / 3; }
.product-gallery img { flex:1; min-height:0; width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; background:#ddd; }
.product-gallery__lead img { aspect-ratio:auto; }
.product-gallery figcaption { margin-top:1rem; color:#686c64; font:500 1.05rem/1.5 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.05em; }
/* Compass Companion: field use, prototype detail and film. */
.compass-gallery { display:grid; grid-template-columns:1.45fr .8fr; align-items:end; gap:2.4rem; margin:5rem 0 7rem; }
.compass-gallery figure { margin:0; }
.compass-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.compass-gallery figure:not(.compass-gallery__hero) img { aspect-ratio:1/1; }
.compass-gallery figcaption,.case-study-video>p { margin-top:1rem; color:#686c64!important; font:500 1.05rem/1.5 "DM Mono",monospace!important; text-transform:uppercase; letter-spacing:.05em; }
.case-study-video { display:block; margin:0 0 9rem; padding-top:3rem; border-top:1px solid var(--line); }
.case-study-video>p { width:min(82rem,100%); margin:0 auto 1.8rem!important; color:var(--ink)!important; }
.case-study-video .video-container { position:relative!important; margin:0 auto!important; padding:0!important; width:min(82rem,100%)!important; height:auto!important; aspect-ratio:16/9; overflow:hidden; }
.case-study-video iframe { position:absolute!important; inset:0; width:100%!important; height:100%!important; border:0; }
.video-poster { position:relative; display:block; width:100%; height:auto; aspect-ratio:16/9; padding:0; overflow:hidden; border:0; background:var(--ink); text-align:left; cursor:pointer; }
.video-poster>img { width:100%; height:100%; object-fit:cover; opacity:.72; transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .3s; }
.video-poster::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,12,9,.58),rgba(10,12,9,.04) 65%); }
.video-poster:hover>img { transform:scale(1.025); opacity:.88; }
.video-poster__play { position:absolute; left:50%; top:50%; z-index:2; width:7rem; height:7rem; border-radius:50%; background:var(--acid); transform:translate(-50%,-50%); transition:transform .22s ease; }
.video-poster__play::after { content:""; position:absolute; left:2.9rem; top:2.3rem; border-left:1.8rem solid var(--ink); border-top:1.2rem solid transparent; border-bottom:1.2rem solid transparent; }
.video-poster:hover .video-poster__play { transform:translate(-50%,-50%) scale(1.1); }
.video-poster__text { position:absolute; left:2rem; bottom:1.7rem; z-index:2; color:#fff; font:500 1.1rem/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.07em; }
.video-fallback { display:block; width:min(82rem,100%); margin:1.4rem auto 0; color:var(--ink); font:500 1.1rem/1.6 "DM Mono",monospace; text-decoration:underline; text-underline-offset:.5rem; text-transform:uppercase; letter-spacing:.05em; }
.video-fallback:hover { color:var(--warm); }
.project-afterword { border-top:1px solid var(--line); padding-top:5rem; }
/* National Mining Museum: align installed outcome with development film. */
.exhibit-media-pair { display:grid; grid-template-columns:1fr 1fr; gap:2.4rem; align-items:start; margin:4rem 0 6rem; }
.exhibit-media-pair .image-single,.exhibit-media-pair .video-embed { margin:0!important; }
.exhibit-media-pair .image-single img,.exhibit-media-pair .youtube-wrap { width:100%!important; aspect-ratio:4/3!important; height:auto!important; object-fit:cover; }
.exhibit-media-pair .youtube-wrap { position:relative; padding:0!important; overflow:hidden; background:var(--ink); }
.exhibit-media-pair .youtube-wrap iframe { position:absolute; inset:0; width:100%!important; height:100%!important; }
.exhibit-media-pair figcaption,.exhibit-media-pair .video-embed>p { margin:1rem 0 0!important; color:#686c64!important; font:500 1.05rem/1.5 "DM Mono",monospace!important; text-transform:uppercase; letter-spacing:.05em; }
.exhibit-media-pair .video-embed { display:flex; flex-direction:column-reverse; }
.project-credit { display:flex; align-items:flex-start; padding-top:2rem; }
.project-credit .column:last-child { display:flex; justify-content:flex-end; padding-top:5rem; }
/* Reaction Timer: keep installation stills and portrait demo in one composition. */
.reaction-media { display:grid; grid-template-columns:1fr 1.15fr; gap:2.4rem; align-items:stretch; margin:4rem 0 7rem; }
.reaction-media .image-pair { display:grid; grid-template-columns:1fr!important; grid-template-rows:1fr 1fr; gap:2.4rem!important; margin:0!important; }
.reaction-media figure { display:flex; flex-direction:column; margin:0; min-height:0; }
.reaction-media .image-pair img { flex:1; min-height:0; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; }
.reaction-media figcaption,.reaction-media .video-block>p { margin:1rem 0 0!important; color:#686c64!important; font:500 1.05rem/1.5 "DM Mono",monospace!important; text-transform:uppercase; letter-spacing:.05em; }
.reaction-media .video-block { display:flex; flex-direction:column-reverse; margin:0!important; min-width:0; }
.reaction-media .video-block video { flex:1; width:100%!important; max-width:none!important; max-height:92rem; object-fit:cover; margin:0!important; background:var(--ink); }
.tags { gap:.8rem!important; margin:3rem 0 5rem!important; }
.tag,.meta-chip { color:var(--ink)!important; background:transparent!important; border:1px solid var(--ink)!important; border-radius:99px!important; padding:.7rem 1.2rem!important; font:500 1.05rem/1 "DM Mono",monospace!important; text-transform:uppercase; letter-spacing:.05em; }
.step { background:#e7e5dc!important; border:0!important; border-radius:0!important; padding:2rem!important; }
.step-number { color:var(--warm)!important; font:500 1.05rem "DM Mono",monospace!important; }
.project-links a { border:1px solid var(--ink)!important; border-radius:0!important; color:var(--ink)!important; font-family:"DM Mono",monospace; }
.project-links a:hover { background:var(--acid)!important; }

/* Footer */
.s-footer { background:#3d413c!important; background-color:#3d413c!important; border-top:1px solid rgba(255,255,255,.22); }
.s-footer,.s-footer a { color:rgba(255,255,255,.9)!important; }
.s-footer .ss-copyright,.s-footer .ss-copyright span { color:rgba(255,255,255,.88)!important; opacity:1!important; }
.s-footer .ss-copyright span::after { color:rgba(255,255,255,.45)!important; }
.s-footer a:hover { color:var(--acid)!important; }

@media (pointer:fine) {
  .cursor-ready,.cursor-ready a,.cursor-ready button { cursor:none; }
  .play-cursor { position:fixed; left:0; top:0; z-index:99999; width:1.8rem; height:1.8rem; margin:-.9rem 0 0 -.9rem; border-radius:50%; background:var(--acid); pointer-events:none; transition:width .2s,height .2s,margin .2s; mix-blend-mode:difference; }
  .play-cursor img { display:none; width:100%; height:100%; object-fit:contain; transform:rotate(var(--cursor-angle, 0deg)); transition:transform .12s ease-out,filter .2s; }
  .play-cursor span { display:none; }
  .play-cursor.is-link { width:4rem; height:4rem; margin:-2rem 0 0 -2rem; }
  [data-cursor-mode="spacecraft"] .play-cursor { width:3.6rem; height:3.6rem; margin:-1.8rem 0 0 -1.8rem; border-radius:0; background:transparent; mix-blend-mode:normal; }
  [data-cursor-mode="spacecraft"] .play-cursor img { display:block; }
  [data-cursor-mode="spacecraft"] .play-cursor.is-link { width:4.5rem; height:4.5rem; margin:-2.25rem 0 0 -2.25rem; }
  .cursor-toggle { position:fixed; left:1.5rem; bottom:1.5rem; z-index:9998; display:grid; place-items:center; width:3.25rem; height:3.25rem; padding:0; border:1px solid rgba(255,255,255,.22); border-radius:50%; color:#fff; background:rgba(18,20,18,.78); box-shadow:0 .35rem 1.25rem rgba(0,0,0,.18); backdrop-filter:blur(10px); transition:border-color .2s,background .2s,transform .2s; }
  .cursor-toggle:hover,.cursor-toggle:focus-visible { border-color:var(--acid); transform:translateY(-2px); outline:none; }
  .cursor-toggle__dot { width:.8rem; height:.8rem; border-radius:50%; background:var(--acid); }
  .cursor-toggle img { display:none; width:1.85rem; height:1.85rem; object-fit:contain; }
  [data-cursor-mode="spacecraft"] .cursor-toggle__dot { display:none; }
  [data-cursor-mode="spacecraft"] .cursor-toggle img { display:block; }
  .cursor-toggle-hint { position:fixed; left:5.65rem; bottom:1.18rem; z-index:9997; max-width:calc(100vw - 7.25rem); padding:1.1rem 1.45rem; border:2px solid var(--ink); border-radius:.68rem; color:var(--ink); background:var(--acid); box-shadow:.45rem .45rem 0 rgba(18,20,18,.22); pointer-events:none; font:650 1.25rem "DM Mono",monospace; line-height:1.25; letter-spacing:0; white-space:nowrap; animation:cursor-hint-in .45s ease both; }
  .cursor-toggle-hint::before { content:""; position:absolute; right:100%; top:50%; width:.8rem; height:.8rem; border-left:2px solid var(--ink); border-bottom:2px solid var(--ink); background:var(--acid); transform:translate(50%,-50%) rotate(45deg); }
  @keyframes cursor-hint-in { from { opacity:0; transform:translateX(-.5rem); } to { opacity:1; transform:none; } }
}

@media screen and (min-width:901px) and (max-width:1100px) { .s-header__nav{right:1.5vw!important}.s-header__nav a{padding-left:1rem;padding-right:1rem} }
@media screen and (max-width:900px) { html,body{max-width:100%;overflow-x:hidden}.row{width:88%;padding-left:0;padding-right:0}.s-header{height:8rem}.s-header .row{width:100%}.s-header__logo{left:5vw!important;transform:none!important;width:14rem!important}.s-header__logo a{font-size:1.8rem}.s-header__menu-toggle{right:0!important;width:8rem;background:var(--ink)!important}.s-header__menu-toggle .s-header__menu-icon{background-color:var(--acid)}.s-header__nav{top:8rem!important;right:0!important;max-height:calc(100vh - 8rem);overflow-y:auto}.s-header__nav li.current a{box-shadow:none}.s-home{min-height:68rem}.s-home__content{padding-top:12rem}.s-home__slide-text{padding-left:0;padding-right:0}.s-home__slide-text h1{font-size:clamp(4.2rem,12vw,6.4rem);line-height:.98;overflow-wrap:anywhere}.s-styles{padding:8rem 0!important}.s-styles img,.s-styles video,.s-styles iframe{max-width:100%}.media-block{grid-template-columns:1fr;grid-template-areas:"still" "caption" "motion";gap:0}.media-block video{margin-top:2rem!important}.portrait-demo{grid-template-columns:1fr;padding:2rem}.portrait-demo__label,.portrait-demo video{grid-column:1}.portrait-demo__label{margin-bottom:1.5rem!important} }
@media screen and (max-width:600px) { .project-media-pair{grid-template-columns:1fr;gap:3rem}.product-gallery{grid-template-columns:1fr;grid-template-rows:auto}.product-gallery__lead{grid-row:auto}.product-gallery__lead img{aspect-ratio:4/3}.compass-gallery{grid-template-columns:1fr}.compass-gallery figure:not(.compass-gallery__hero) img{aspect-ratio:4/3}.exhibit-media-pair{grid-template-columns:1fr}.project-credit{display:block}.project-credit .column:last-child{justify-content:flex-start;padding-top:1rem}.reaction-media{grid-template-columns:1fr}.reaction-media .image-pair{grid-template-rows:auto}.reaction-media .image-pair img{aspect-ratio:4/3}.reaction-media .video-block video{max-height:75vh;object-fit:contain} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }