/* Fonts live on this server — no Google, no third parties. */
@font-face{font-family:"Host Grotesk";font-weight:400;font-display:swap;src:url(fonts/host-grotesk-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Host Grotesk";font-weight:400;font-display:swap;src:url(fonts/host-grotesk-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Host Grotesk";font-weight:600;font-display:swap;src:url(fonts/host-grotesk-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Host Grotesk";font-weight:600;font-display:swap;src:url(fonts/host-grotesk-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Host Grotesk";font-weight:700;font-display:swap;src:url(fonts/host-grotesk-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Host Grotesk";font-weight:700;font-display:swap;src:url(fonts/host-grotesk-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-weight:300;font-display:swap;src:url(fonts/newsreader-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-weight:300;font-display:swap;src:url(fonts/newsreader-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300;font-display:swap;src:url(fonts/newsreader-latin-300-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300;font-display:swap;src:url(fonts/newsreader-latin-ext-300-italic.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}

:root{
  --faint:#ebe5d9;
  --paper:#f7f3ea; --tile:#ede7da; --ink:#2e3634; --soft:#5d6662; --line:#d8d1c3; --khaki:#9a9171;
  --sans:"Host Grotesk","Helvetica Neue",Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --pad:clamp(18px,3vw,44px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.caps{text-transform:uppercase;letter-spacing:.01em}

/* Header */
.site-header{position:sticky;top:0;z-index:5;background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:12px 32px;padding:22px var(--pad);flex-wrap:wrap}
.brand{display:block}
.brand img{height:clamp(30px,3.6vw,52px);width:auto}
.nav{display:flex;gap:clamp(18px,3.6vw,64px);flex-wrap:wrap;font-weight:600;font-size:clamp(13px,1.1vw,16px);text-transform:uppercase}
.nav a{padding:8px 0;border-bottom:1.5px solid transparent}
.nav a:hover{color:var(--khaki)}
.nav a[aria-current="page"]{color:var(--khaki);border-color:var(--khaki)}

main{padding:0 var(--pad) 96px}

/* Home */
.reel{position:relative;aspect-ratio:21/8;max-height:56vh;width:100%;background:var(--tile);overflow:hidden}
.reel img,.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel img{visibility:hidden}.reel img.on{visibility:visible}
.hero-bar{display:flex;justify-content:space-between;gap:16px;padding:12px 0 0;font-size:12px;text-transform:uppercase}
.hero-bar a:hover{color:var(--khaki)}
.hero-bar button{display:none}.hero-bar button.on{display:inline}
.hello{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;padding:36px 0 44px;align-items:end}
.hello h1{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(46px,6.4vw,104px);line-height:.95;letter-spacing:-.02em}
.hello p{margin:6px 0 0;font-size:clamp(22px,2.4vw,38px);line-height:1.06;text-transform:uppercase;letter-spacing:-.01em;max-width:18em}
@media (max-width:760px){.hello{grid-template-columns:1fr}}

.section{padding-top:96px;scroll-margin-top:80px}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:28px}
.section-head h2{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(34px,4vw,60px);line-height:1;letter-spacing:-.015em}
.section-head span{font-size:12px;text-transform:uppercase;color:var(--soft)}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 22px}
.grid.films{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.grid.films{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.grid,.grid.films{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid{grid-template-columns:1fr}.grid.films{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}}
.card{display:flex;flex-direction:column;gap:9px}
.frame{position:relative;overflow:hidden;background:var(--tile);aspect-ratio:16/9}
.frame img,.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame video{opacity:0;transition:opacity .25s}
.frame video.on{opacity:1}
.films .frame{aspect-ratio:400/555}
.cap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 14px;font-size:13px;line-height:1.3;text-transform:uppercase}
.cap b{font-weight:700}
.cap .dir{font-weight:700;text-align:right}
.cap .sub{grid-column:1/-1}
.cap.film{display:flex;flex-direction:column;gap:1px}
.cap.film i{font-family:var(--serif);font-weight:300;font-style:italic;font-size:16px;text-transform:none;letter-spacing:0}
.cap.film .sub{color:var(--soft);font-size:12px}

/* Project */
.proj-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;text-transform:uppercase;padding:6px 0 18px}
.proj-top nav{display:flex;gap:28px}
.player{position:relative;aspect-ratio:16/9;background:#11100e;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#f7f3ea}
.player .bg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(40px) brightness(.55) saturate(1.1)}
.player .pos{position:relative;height:86%;width:auto;box-shadow:0 30px 60px -25px rgba(0,0,0,.7)}
.player .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.player .ctl{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:18px 22px;font-size:12px;text-transform:uppercase;background:linear-gradient(transparent,rgba(0,0,0,.35))}
.player .ctl button{display:none}.player .ctl button.on{display:inline}
.player .ttl{position:absolute;left:22px;top:18px;right:22px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.player .ttl span{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.6vw,40px);line-height:1}
.player .ttl small{font-size:12px;text-transform:uppercase}
.intro-proj{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px 64px;padding:56px 0 8px;border-bottom:1px solid var(--line)}
@media (max-width:860px){.intro-proj{grid-template-columns:1fr}}
.intro-proj h1{margin:0 0 14px;font-family:var(--serif);font-weight:300;font-size:clamp(40px,5vw,78px);line-height:1;letter-spacing:-.02em}
.intro-proj .fmt{font-size:14px;text-transform:uppercase;color:var(--soft)}
.intro-proj .note{font-family:var(--serif);font-style:italic;font-weight:300;font-size:22px;margin:16px 0 0}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;align-content:start;padding-bottom:40px}
.facts div{font-size:13px;text-transform:uppercase;line-height:1.35}
.facts dt{font-weight:700}.facts dd{margin:0}
.more{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px 64px;padding-top:48px}
@media (max-width:860px){.more{grid-template-columns:1fr}}
.more h2,.next h2{margin:0 0 22px;font-family:var(--serif);font-weight:300;font-size:clamp(30px,3vw,46px);line-height:1}
.credits{columns:2;column-gap:40px;font-size:13px;text-transform:uppercase;line-height:1.35}
@media (max-width:560px){.credits{columns:1}}
.credits div{break-inside:avoid;margin:0 0 16px}
.credits dt{font-weight:700}.credits dd{margin:0}
.awards{list-style:none;margin:0;padding:0;font-size:13px;text-transform:uppercase;line-height:1.35}
.awards li{margin:0 0 14px}.awards b{font-weight:700;display:block}
.next{margin-top:88px;border-top:1px solid var(--ink);padding-top:14px}
.next a{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--line)}
.next a span{font-family:var(--serif);font-weight:300;font-size:clamp(30px,4vw,62px);line-height:1;letter-spacing:-.015em}
.next a small{font-size:12px;text-transform:uppercase}
.next a:hover span{font-style:italic}

/* Text pages */
.page .lead{margin:24px 0 48px;font-family:var(--serif);font-weight:300;font-size:clamp(42px,5.4vw,88px);line-height:.98;letter-spacing:-.02em;max-width:14em}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:40px 64px;align-items:start}
@media (max-width:860px){.cols{grid-template-columns:1fr}}
.prose p{margin:0 0 18px;max-width:60ch;font-family:var(--serif);font-weight:300;font-size:21px;line-height:1.5}
.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.page h2{margin:80px 0 18px;font-family:var(--serif);font-weight:300;font-size:clamp(30px,3vw,46px);line-height:1;border-top:1px solid var(--ink);padding-top:14px}
.dirs{font-size:13px;text-transform:uppercase;line-height:1.6;max-width:120ch}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px}
.contact-grid h3{margin:0 0 10px;font-size:13px;font-weight:700;text-transform:uppercase}
.contact-grid p{margin:0;font-size:17px;line-height:1.55}
.contact-grid a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal p{max-width:70ch;font-size:16px}
.legal h3{font-size:13px;text-transform:uppercase;margin:28px 0 6px}
.legal a{text-decoration:underline}

.site-footer{display:flex;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;padding:22px var(--pad) 34px;border-top:1px solid var(--line);font-size:12px;text-transform:uppercase}
.site-footer nav{display:flex;gap:22px;flex-wrap:wrap}
.site-footer a:hover,.proj-top a:hover{color:var(--khaki)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.frame video,.films .frame .pos{transition:none}}

/* captions for commercials and music videos: EDEKA  Super Marc */
.cap.spot .ttl{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .45em}
.cap.spot .ttl i{font-family:var(--serif);font-weight:300;font-style:italic;font-size:17px;text-transform:none;letter-spacing:0}
.cap.spot .dir{font-weight:400}
.cap.spot .sub{color:var(--soft);font-size:12px}

.reel-btn{display:none;margin-top:14px;font-size:12px;text-transform:uppercase;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.reel-btn.on{display:inline-block}
.reel{position:relative;aspect-ratio:16/9;background:#000;margin-bottom:8px}
.reel video{position:absolute;inset:0;width:100%;height:100%}
.card:hover .frame img{filter:brightness(1.06)}
#films{padding-top:24px}
.stage + .section{padding-top:56px}

/* Stage: the selected work, big, at the top of the overview */
.stage{padding:0 0 8px}
.stage-media{--ar:1.7778;position:relative;width:min(100%,max(calc((100vh - var(--hh,100px) - 118px) * var(--ar)),74vw));aspect-ratio:var(--ar);transition:aspect-ratio .4s ease,width .4s ease;margin:0 auto;background:#11100e;overflow:hidden;display:flex;align-items:center;justify-content:center}
.stage-media .bg{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(40px) brightness(.55)}
.stage-media .pos{position:relative;height:88%;width:auto;box-shadow:0 30px 60px -25px rgba(0,0,0,.7)}
.stage-media .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage-media video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.stage-media .sound{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);font-size:12px;text-transform:uppercase;padding:9px 14px}
.stage-info{position:relative;text-align:center;padding:14px 0 0}
.stage-nav{display:flex;justify-content:space-between;font-size:12px;text-transform:uppercase;width:min(100%,calc((100vh - var(--hh,100px) - 118px) * 16 / 9));margin:0 auto 6px}
.stage-nav a:hover,.stage-more:hover{color:var(--khaki)}
.stage-title{margin:0;font-weight:400;font-size:clamp(22px,2.2vw,32px);line-height:1.15;display:flex;justify-content:center;flex-wrap:wrap;gap:0 .4em;align-items:baseline}
.stage-title span,.stage-title i{font-family:var(--serif);font-weight:300}
.stage-title b{font-weight:700;text-transform:uppercase;font-size:.8em}
.stage-credits{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 22px;margin:12px auto 0;max-width:900px;font-size:13px}
.stage-credits b{font-weight:700}
.stage-more{display:inline-block;margin-top:14px;font-size:12px;text-transform:uppercase;border-bottom:1.5px solid currentColor}

.stage-details{margin:14px auto 0;text-align:left}
.stage-details summary{list-style:none;cursor:pointer;display:block;width:max-content;margin:0 auto;font-size:12px;text-transform:uppercase;border-bottom:1.5px solid currentColor}
.stage-details summary::-webkit-details-marker{display:none}
.stage-details summary:hover{color:var(--khaki)}
.stage-details[open] summary{margin-bottom:8px}
.stage-details .more{padding-top:32px;border-top:1px solid var(--line);margin-top:22px}

.studio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.studio img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:700px){.studio{grid-template-columns:1fr}}

/* ---------- motion ---------- */
/* smooth colour changes everywhere a colour can change */
body,.site-header,.nav a,.brand img,.section-head,.cap,.cap *,.stage-info,.stage-info a,.stage-details summary,
.site-footer,.site-footer a,.proj-top a,.contact-grid a,.prose a,.reel-btn,.stage-media .sound{
  transition:color .4s ease,background-color .4s ease,border-color .4s ease,filter .4s ease,transform .35s ease}
/* menu items grow a little under the pointer */
.nav a{display:inline-block;transform-origin:center bottom}
.nav a:hover{transform:scale(1.08)}
.stage-nav a,.site-footer nav a{display:inline-block}
.stage-nav a:hover,.site-footer nav a:hover{transform:scale(1.08)}
/* works: glow and grow */
.card{position:relative}
.card .frame{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
.card .frame img{transition:filter .5s ease}
.card:hover{z-index:2}
.card:hover .frame{transform:scale(1.035);box-shadow:0 24px 50px -28px rgba(20,24,23,.55)}
.card:hover .frame img{filter:brightness(1.08)}
@media (prefers-reduced-motion:reduce){
  .nav a:hover,.stage-nav a:hover,.site-footer nav a:hover,.card:hover .frame{transform:none}
  body,.site-header,.card .frame{transition:none}
}

/* pages fade in, and fade out when you leave for another page; the header stays put */
main,.site-footer{animation:pageIn .6s ease both}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body.leaving main,body.leaving .site-footer{animation:pageOut .38s ease both}
@keyframes pageOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){main,.site-footer{animation:none}}

.poke{cursor:pointer;transform-origin:center;-webkit-tap-highlight-color:transparent}
.portrait-wrap{display:flex;flex-direction:column}
.score{min-height:1.4em;margin-top:10px;text-align:center;font-size:13px;letter-spacing:.08em;color:var(--faint);user-select:none;font-variant-numeric:tabular-nums}

/* header fades to half strength while scrolling down — still clickable */
/* scrolling down slides the bar away completely, scrolling up brings it straight back (everywhere) */
.site-header{transition:transform .55s cubic-bezier(.45,0,.2,1),color .4s ease,background-color .4s ease,border-color .4s ease}
.site-header.faded{transform:translateY(-105%)}
@media (prefers-reduced-motion:reduce){.site-header{transition:none}}
.pong{display:block;width:100%;background:var(--paper);touch-action:none;cursor:none;outline:1px solid var(--line)}

/* ---------- dark mode: light becomes dark, dark becomes light (pictures stay as they are) ---------- */
html.dark{--paper:#171a19;--tile:#232726;--ink:#ece7dc;--soft:#aaa59b;--line:#343836;--khaki:#00c5c8;--faint:#252928}
html.dark .brand img{filter:brightness(0) invert(93%) sepia(8%)}
html.dark body{background:var(--paper)}
/* only the body (and the few things with their own tint) fade their text colour;
   everything else inherits it, so all text changes together instead of in waves */
html.theme-fade *{transition-property:background-color,border-color,outline-color,box-shadow,transform,filter,opacity !important;
  transition-duration:var(--fade,3s),var(--fade,3s),var(--fade,3s),.5s,.45s,.5s,.4s !important;
  transition-timing-function:ease,ease,ease,ease,cubic-bezier(.2,.7,.2,1),ease,ease !important;transition-delay:0s !important}
/* the logo's colour belongs to the slow fade; hover effects keep their own quick timing above */
html.theme-fade .brand img{transition:filter var(--fade,3s) ease !important}
html.theme-fade body,html.theme-fade .section-head span,html.theme-fade .cap .sub,html.theme-fade .fmt,html.theme-fade .score,html.theme-fade .nav a[aria-current]{transition-property:color,background-color,border-color,filter !important}
html.theme-fade .card .frame img,html.theme-fade .poster,html.theme-fade .still,html.theme-fade .stage-media img{filter:none}
.modes{display:flex;gap:14px;font-size:12px;text-transform:uppercase}
.modes button{border-bottom:1.5px solid transparent;padding-bottom:1px;opacity:.6;transition:opacity .3s ease,color .3s ease,border-color .3s ease}
.modes button:hover{opacity:1;color:var(--khaki)}
.modes button[aria-pressed="true"]{opacity:1;border-color:currentColor}
.site-footer{align-items:center}

/* ---------- Rainy mode ---------- */
html.rainy{--paper:#2b2d2e;--tile:#363839;--ink:#ffffff;--soft:#d9d9d9;--line:#47494a;--khaki:#cfcfcf;--faint:#343637}
html.rainy .brand img{filter:brightness(0) invert(1)}
/* lightning: for an instant the whole room is light again */
html.rainy.lightning{--paper:#f7f3ea;--tile:#ede7da;--ink:#2e3634;--soft:#5d6662;--line:#d8d1c3;--khaki:#9a9171;--faint:#ebe5d9}
html.rainy.lightning .brand img{filter:none}
/* a faint glimmer: only a little brighter */
html.rainy.glimmer{--paper:#3c3f40;--tile:#46494a;--line:#57595a}
html.snap,html.snap *{transition:none !important}
.fx-lamp,.fx-rain{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;display:none}
.fx-lamp{z-index:-1}
.fx-rain{z-index:4}
html.rainy .fx-lamp,html.rainy .fx-rain{display:block}

/* ---------- smooth scrolling (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- the crow (Rainy mode only) ---------- */
.site-footer{position:relative}
.crow{--cw:clamp(110px,10vw,150px);position:absolute;left:0;top:0;z-index:6;width:var(--cw);padding:0;display:none;cursor:pointer;
  background:none;border:0;opacity:0;visibility:hidden}
.crow img{position:relative;display:block;width:100%;height:auto;transform-origin:50% 100%;animation:breathe 1.6s ease-in-out infinite alternate;
  transition:filter .6s ease;will-change:transform}
.crow::after{content:"";position:absolute;left:12%;right:4%;bottom:2px;height:12px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);z-index:-1}
@keyframes breathe{from{transform:scale(1,1)}to{transform:scale(1.035,1.075)}}
html.rainy .crow{display:block}
.crow.here{opacity:1;visibility:visible}
.crow:hover img,.crow:focus-visible img{filter:brightness(2.6) saturate(.55)}
.crow-tip{position:fixed;left:0;top:0;z-index:20;pointer-events:none;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .35s ease}
.crow-tip.on{opacity:1}
@media (prefers-reduced-motion:reduce){.crow img{animation:none}}

/* the lightning flash: a sheet of light over everything, crow included */
.fx-flash{position:fixed;inset:0;z-index:30;pointer-events:none;background:#f7f3ea;opacity:0}
/* the menu bar's own light layer sits under its text */
.fx-hlamp{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:none}
html.rainy .fx-hlamp{display:block}
.site-header > .brand,.site-header > .nav{position:relative;z-index:1}

/* the crow's words: golden, above its head, letter by letter */
.crow-talk{position:absolute;top:0;transform:translateY(-100%);width:min(340px,80vw);text-align:right;
  pointer-events:none;opacity:0;transition:opacity .5s ease;z-index:6;color:#d9b45f}
.crow-talk.on{opacity:1;pointer-events:auto}
.crow-line{margin:0;text-wrap:pretty;font-family:var(--serif);font-weight:300;font-style:italic;font-size:19px;line-height:1.35;text-transform:none;letter-spacing:0;
  text-shadow:0 0 14px rgba(217,180,95,.35)}
.crow-line .word{display:inline-block;white-space:nowrap}
.crow-line .ltr{display:inline-block;opacity:0;animation:ltr .2s ease-out forwards}
@keyframes ltr{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.crow-choices{display:flex;justify-content:flex-end;gap:18px;margin-top:12px;animation:ltr .45s ease-out both}
.crow-choices button{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#d9b45f;border-bottom:1.5px solid currentColor;padding-bottom:2px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),color .3s ease;transform-origin:center bottom}
.crow-choices button:hover,.crow-choices button:focus-visible{transform:scale(1.15);color:#f0d38a}

/* Rainy mode: golden type, glossy pictures with a short reflection */
html.rainy{--ink:#d9b45f;--soft:#bfa36a}
html.rainy .brand img{filter:brightness(0) saturate(100%) invert(76%) sepia(46%) saturate(520%) hue-rotate(2deg) brightness(95%)}
html.rainy .section-head h2,html.rainy .stage-title{text-shadow:0 0 18px rgba(217,180,95,.28)}
html.rainy .frame,html.rainy .stage-media,html.rainy .studio img,html.rainy #portrait{-webkit-box-reflect:below 3px linear-gradient(transparent 90%,rgba(0,0,0,.24))}
/* leave room for the reflection so it never runs into the captions or the next row */
html.rainy .films .frame{margin-bottom:14.5%}
html.rainy .grid:not(.films) .frame{margin-bottom:6%}
/* the gloss: a highlight that sweeps across a picture when you point at it.
   It only exists while hovering — 46 always-on overlays were the main cause of the lag */
/* the gloss: a soft highlight that sweeps across a picture only while you point at it.
   It's a small pre-made image scaled up smoothly — looks the same as a live gradient, costs far less */
html.rainy .card:hover .frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:url(sheen.png) no-repeat;background-size:260% 100%;
  animation:sheen 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes sheen{from{background-position:-20% 0}to{background-position:59% 0}}
html.rainy .frame{box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
html.rainy.lightning{--ink:#2e3634;--soft:#5d6662}

/* the passing flock */
.fx-flock{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;z-index:3;pointer-events:none}
/* the far flock flies behind the pictures (and behind the text), over the page background */
.fx-flock.back{z-index:-1}
.fx-bird{position:absolute;left:0;top:0;will-change:transform}
.fx-bird svg{display:block;stroke:#0d0f10}
html.dark .fx-flock{display:none}
.fx-flock:not(.back) .fx-bird{pointer-events:auto;cursor:grab;touch-action:none}
.fx-bird.held{cursor:grabbing}
.fx-bird.poof{opacity:0;transition:opacity .6s ease}
html,body{overflow-x:clip}

/* Crowbert: its name above its head, facing into the page, a reflection on the bar */
.crow-name{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#d9b45f;white-space:nowrap;pointer-events:none;text-shadow:0 0 10px rgba(217,180,95,.35)}
.crow-body{display:block}
.crow.faces-right .crow-body{transform:scaleX(-1)}
/* his reflection: a still, faint mirror image below his feet (no glitching with the breathing) */
.crow .crow-refl{position:absolute;left:0;top:100%;width:100%;height:60%;overflow:hidden;pointer-events:none;opacity:.22;
  transform:scaleY(-1);transform-origin:50% 50%;-webkit-mask-image:linear-gradient(to top,#000,transparent 70%);mask-image:linear-gradient(to top,#000,transparent 70%)}
.crow .crow-refl img{display:block;width:100%;height:auto;position:absolute;bottom:0;left:0;animation:none}
.crow.faces-right .crow-refl{transform:scale(-1,-1)}
.crow-talk.from-left{text-align:left}
.crow-talk.from-left .crow-choices{justify-content:flex-start}
/* knocked over: a loose object on the page */
.crow.ragdoll{position:absolute;bottom:auto;z-index:8;cursor:grab;touch-action:none;transform-origin:50% 50%;display:block;opacity:1;visibility:visible}
.crow.ragdoll:active{cursor:grabbing}
.crow.ragdoll img{animation:none;-webkit-box-reflect:none}
.crow.ragdoll .crow-name{display:none}
.crow.poof{opacity:0 !important;transition:opacity .6s ease}

/* advancement toasts (right side, sliding in) */
.toasts{position:fixed;right:18px;top:96px;z-index:45;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{display:flex;gap:12px;align-items:center;width:320px;padding:12px 14px;background:#212121;color:#fff;
  border:2px solid #5a5a5a;box-shadow:inset 0 0 0 2px #0e0e0e,0 10px 28px -14px rgba(0,0,0,.7);border-radius:4px;
  transform:translateX(120%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.toast.in{transform:none}
.toast.still{transition:none}
.toast.out{transform:translateX(120%);transition:transform .6s cubic-bezier(.6,0,.8,.3)}
.toast.collapse{height:0 !important;padding-top:0;padding-bottom:0;border-width:0;margin-top:-10px;overflow:hidden;transition:height .4s cubic-bezier(.4,0,.2,1),padding .4s ease,margin .4s ease}
.toast-icon{flex:0 0 34px;height:34px;border-radius:3px;background:
  radial-gradient(circle at 50% 42%,#f5d77a 0 6px,transparent 7px),linear-gradient(#3b3b3b,#2a2a2a);border:2px solid #0e0e0e}
.toast-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.toast-text b{color:#f5e35a;font-size:13px;font-weight:600}
.toast-name{font-size:14px}
.toast-text small{font-size:11px;color:#b9b9b9}
/* the hidden list (L): black first, then the list fades in */
.adv-menu{position:fixed;inset:0;z-index:60;background:#000;transform:translateX(100%);transition:transform .55s cubic-bezier(.7,0,.25,1);display:flex;align-items:center;justify-content:center;color:#f2eee6}
.adv-menu[hidden]{display:none}
.adv-menu.black{transform:none}
.adv-menu.black.leaving{transform:translateX(-100%)}
.adv-inner{width:min(1040px,92vw);max-height:84vh;overflow:auto;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.adv-menu.show .adv-inner{opacity:1;transform:none}
.adv-inner h2{margin:0;font-family:var(--serif);font-weight:300;font-size:44px}
.adv-count{margin:4px 0 22px;font-size:12px;text-transform:uppercase;color:#9d9a93}
.adv-inner ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.adv-inner li{display:flex;gap:14px;align-items:center;padding:12px 14px;border:1px solid #2c2c2c;border-radius:4px;background:#0f0f0f;opacity:.55}
.adv-inner li.done{opacity:1;border-color:#4b4636}
.adv-check{flex:0 0 26px;height:26px;border:2px solid #444;border-radius:3px;display:flex;align-items:center;justify-content:center;color:#f5e35a;font-weight:700}
.adv-inner li.done .adv-check{border-color:#f5e35a}
.adv-inner b{display:block;font-weight:600;font-size:15px}
.adv-inner small{display:block;font-size:12px;color:#a7a39b;margin-top:2px}
.adv-close{margin-top:22px;font-size:12px;text-transform:uppercase;color:#f2eee6;border-bottom:1.5px solid currentColor}

/* the advancement tree */

.adv-tree{position:relative}
.adv-lines{position:absolute;left:0;top:0;overflow:visible}
.adv-lines path{fill:none;stroke:#3a3a3a;stroke-width:2}
.adv-lines path.on{stroke:#8a7a3e}
.adv-node{position:absolute;width:196px;height:74px;box-sizing:border-box;display:flex;gap:10px;align-items:center;padding:8px 10px;
  background:#0f0f0f;border:1px solid #2c2c2c;border-radius:4px;animation:nodeIn .5s ease both}
.adv-node.done{border-color:#4b4636;background:#141310}
.adv-node.upcoming{opacity:.55;border-style:dashed}
.adv-node b{display:block;font-weight:600;font-size:13px;line-height:1.2}
.adv-node small{display:block;font-size:11px;color:#a7a39b;margin-top:2px;line-height:1.25}
@keyframes nodeIn{from{opacity:0;transform:translateY(6px)}}
.adv-node.upcoming{animation-name:nodeInDim}
@keyframes nodeInDim{from{opacity:0;transform:translateY(6px)}to{opacity:.55;transform:none}}

/* sparrows on the category lines */
.fx-sparrows{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;z-index:4;pointer-events:none}
.sparrow{position:absolute;left:0;top:0;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;will-change:transform}
.sparrow .sp-flip{display:block}
.sparrow.right .sp-flip{transform:scaleX(-1)}
.sparrow img{display:block;width:100%;height:auto;transform-origin:50% 100%;transition:filter .5s ease}
.sparrow.sitting img{animation:breathe 1.5s ease-in-out infinite alternate}
.sparrow:hover img{filter:brightness(1.45)}
.feather{position:absolute;left:0;top:0;height:auto;pointer-events:none;will-change:transform}
@media (prefers-reduced-motion:reduce){.sparrow.sitting img{animation:none}}

/* Real Time */
html.rt-lightink .brand img{filter:brightness(0) invert(95%)}
.fx-clouds{position:absolute;top:0;left:0;width:0;height:0;overflow:visible;pointer-events:none;display:none}
.fx-clouds .cloud{position:absolute;left:0;top:0;will-change:transform,opacity}
.fx-clouds.back{z-index:-1}
.fx-clouds.front{z-index:3}
html.realtime .fx-clouds{display:block}
.modes{flex-wrap:wrap}

/* advancement categories */
.adv-menu{transition:transform .55s cubic-bezier(.7,0,.25,1),background-color .7s ease}
.adv-menu[data-cat="pong"]{background:#07090b}
.adv-menu[data-cat="rainy"]{background:#1a2226}

.adv-inner{position:relative}
.adv-tabs{display:flex;gap:10px;margin:0 0 22px;flex-wrap:wrap}
.adv-tab{display:flex;align-items:center;gap:9px;padding:9px 14px 9px 11px;border:1px solid #333;border-radius:4px;color:#d8d4cc;font-size:13px;
  background:#111;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease,background-color .3s ease,opacity .3s ease}
.adv-tab:hover:not(.locked){transform:scale(1.05);border-color:#6a6250}
.adv-tab.on{border-color:#f5e35a;background:#17160f;color:#fff}
.adv-tab.locked{opacity:.35;cursor:not-allowed}
.adv-tab svg{width:22px;height:22px;color:#e8e4dc}
.ico-ma{display:block;width:18.4px;height:22px;background:url(logo.svg) no-repeat 0 50%/auto 22px;filter:brightness(0) invert(92%)}
.adv-scroll{transition:opacity .28s ease}
.adv-scroll.swap{opacity:0}

/* feathers from hit birds */
.fx-feathers{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;z-index:7;pointer-events:none}
.feather.dark{filter:brightness(.35) saturate(.4)}
/* toasts can be clicked */
.toasts{pointer-events:none}
.toast{pointer-events:auto;cursor:pointer;text-align:left;font:inherit}
/* the reset button */
.adv-foot{display:flex;gap:26px;align-items:center;margin-top:22px}
.adv-foot .adv-close{margin-top:0}
.adv-reset{font-size:12px;text-transform:uppercase;color:#9d9a93;border-bottom:1.5px solid transparent;transition:color .3s ease,border-color .3s ease}
.adv-reset:hover{color:#f2eee6;border-color:currentColor}
.adv-reset.sure{color:#ff8a7a;border-color:currentColor}
.adv-menu[data-cat="realtime"] .adv-inner h2,.adv-menu[data-cat="realtime"] .adv-count{text-shadow:0 1px 8px rgba(0,0,0,.35)}
.adv-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fx-clouds.front{z-index:3}
.adv-menu[data-cat="realtime"] .adv-inner{background:rgba(12,14,20,.62);padding:26px 30px;border-radius:8px;backdrop-filter:blur(2px)}

/* Real Time: the cloud bank under the top bar, the sun or moon, and the clouds' shadows */
/* Real Time: the sun or moon, on the page itself (it scrolls with everything else) */
.fx-orb{position:absolute;left:0;top:0;z-index:6;pointer-events:none;display:none;filter:drop-shadow(0 0 10px rgba(255,255,255,.55))}
.fx-orb svg{display:block;width:100%;height:100%}
.fx-orb .spots{display:none}
.fx-orb.moon .spots{display:inline}
html.realtime .fx-orb{display:block}
/* stars: small white and blue dots, twinkling, gone after ten seconds */
.fx-stars{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;z-index:-1;pointer-events:none;display:none}
html.realtime .fx-stars{display:block}
.star{position:absolute;left:0;top:0;border-radius:50%;background:#fff;opacity:0;animation:twinkle 10s ease-in-out forwards}
.star.blue{background:#bcd3ff}
@keyframes twinkle{0%{opacity:0}12%{opacity:.85}30%{opacity:.35}48%{opacity:.95}66%{opacity:.3}84%{opacity:.8}100%{opacity:0}}

/* a sparrow's "ouch": in the theme's own font and colour */
.ouch{position:absolute;transform:translate(-50%,-100%);font-family:var(--serif);font-style:italic;font-weight:300;font-size:17px;color:var(--ink);
  pointer-events:none;white-space:nowrap;animation:ouch 1.4s ease-out forwards}
@keyframes ouch{0%{opacity:0;transform:translate(-50%,-80%)}15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-190%)}}

/* collecting birds */
.fx-bird.glow svg{filter:drop-shadow(0 0 6px rgba(255,236,170,.95)) brightness(1.8)}
.bag-lines{width:100%;order:9;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.bag-line{margin:6px 0 0}
.bag-line[hidden]{display:none}
.bag-hud{position:fixed;left:18px;bottom:18px;z-index:45;padding:10px 14px;border-radius:4px;background:#212121;color:#fff;border:2px solid #5a5a5a;
  font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.bag-hud.on{opacity:1;transform:none}
.bag-hud p{margin:2px 0}
.bag-hud p[hidden]{display:none}
.bag-fly{position:fixed;left:0;top:0;z-index:46;color:var(--ink);pointer-events:none}
.pop{animation:pop .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{40%{transform:scale(1.18)}}
.site-footer{flex-wrap:wrap}

/* the General tab of the advancements: the light theme — white paper, black type */
.adv-menu[data-cat="general"]{background:#f7f3ea;color:#2e3634}
.adv-menu[data-cat="general"] .adv-count,.adv-menu[data-cat="general"] .adv-reset{color:#6b716e}
.adv-menu[data-cat="general"] .adv-close,.adv-menu[data-cat="general"] .adv-reset:hover{color:#2e3634}
.adv-menu[data-cat="general"] .adv-tab{background:#fff;border-color:#d8d1c3;color:#2e3634}
.adv-menu[data-cat="general"] .adv-tab.on{border-color:#9a8a4a;background:#fbf7ec;color:#1e2322}
.adv-menu[data-cat="general"] .adv-tab svg{color:#2e3634}
.adv-menu[data-cat="general"] .ico-ma{filter:none}
.adv-menu[data-cat="general"] .adv-node{background:#fff;border-color:#d8d1c3;color:#2e3634}
.adv-menu[data-cat="general"] .adv-node.done{background:#fbf7ec;border-color:#b9a870}
.adv-menu[data-cat="general"] .adv-node small{color:#6b716e}
.adv-menu[data-cat="general"] .adv-check{border-color:#c9c1b1;color:#8a6d2f}
.adv-menu[data-cat="general"] .adv-node.done .adv-check{border-color:#8a6d2f}
.adv-menu[data-cat="general"] .adv-lines path{stroke:#d3cbbb}
.adv-menu[data-cat="general"] .adv-lines path.on{stroke:#9a8a4a}
.adv-menu .adv-inner,.adv-menu .adv-tab,.adv-menu .adv-node{transition:background-color .6s ease,color .6s ease,border-color .6s ease}

/* fun mode */
html:not(.fun) .poke{cursor:default}
.modes[hidden]{display:none}
.fun-open{font-size:12px;text-transform:uppercase;letter-spacing:.03em;opacity:.6;border-bottom:1.5px solid transparent;transition:opacity .3s ease,border-color .3s ease,color .3s ease}
.fun-open:hover{opacity:1;border-color:currentColor;color:var(--khaki)}
.adv-fun-wrap{padding:60px 0 20px 10px}
.adv-fun{font-size:15px;font-weight:600;padding:18px 26px;border-radius:6px;background:#2e3634;color:#f7f3ea;border:0;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .3s ease;box-shadow:0 10px 28px -14px rgba(0,0,0,.5)}
.adv-fun:hover{transform:scale(1.06);background:#1f2524}
.adv-node.switch{border-style:solid}

/* TESTING: the pretend-clock panel (key 0) */
.clock-panel{position:fixed;left:18px;top:110px;z-index:50;display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:#212121;color:#fff;border:2px solid #5a5a5a;border-radius:4px;font-size:13px;min-width:220px}
.clock-panel[hidden]{display:none}
.clock-panel input{font:inherit;padding:7px 9px;border-radius:3px;border:1px solid #555;background:#111;color:#fff}
.clock-panel div{display:flex;gap:10px}
.clock-panel button{font-size:12px;text-transform:uppercase;border-bottom:1.5px solid currentColor;color:#fff}
.clock-panel small{color:#aaa}

/* the advancement map fills the whole screen: drag it, scroll it, pinch or Ctrl + scroll to zoom */
.adv-scroll{position:absolute;inset:0;overflow:hidden !important;cursor:grab;touch-action:none;z-index:1;
  -webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--top,250px) - 70px),#000 var(--top,250px));mask-image:linear-gradient(to bottom,transparent calc(var(--top,250px) - 70px),#000 var(--top,250px))}
.adv-scroll.away{opacity:0;pointer-events:none;transition:opacity .4s ease}
.adv-scroll.dragging{cursor:grabbing}
.adv-scroll.dragging .adv-node,.adv-scroll.dragging .adv-gate{pointer-events:none}
.adv-inner.over{position:absolute;left:max(28px,calc((100vw - 1040px) / 2));top:40px;width:auto;max-height:none;overflow:visible;z-index:2;pointer-events:none}
.adv-inner.over > *{pointer-events:auto}
.adv-inner.over h2,.adv-inner.over .adv-count{pointer-events:none}
.adv-foot.adv-corner{position:fixed;left:max(28px,calc((100vw - 1040px) / 2));bottom:26px;margin:0;z-index:3}
.adv-zoom{position:fixed;right:28px;bottom:22px;display:flex;gap:8px;z-index:3}
.adv-zoom button{width:34px;height:34px;border-radius:50%;font-size:18px;line-height:1;background:rgba(255,255,255,.12);color:inherit;border:1px solid rgba(128,128,128,.4);transition:transform .25s ease}
.adv-zoom button:hover{transform:scale(1.1)}
.adv-menu[data-cat="general"] .adv-zoom button{background:#fff;border-color:#d8d1c3;color:#2e3634}
.adv-menu[data-cat="realtime"] .adv-inner.over{padding:18px 22px;left:max(10px,calc((100vw - 1040px) / 2 - 18px))}
.adv-tree{will-change:transform;user-select:none}
/* far down in General: the way to the Tree, and the green that appears once it's open */
.adv-green{position:absolute;left:-30000px;right:-30000px;background:linear-gradient(to bottom,rgba(130,168,132,0),rgb(130,168,132) 700px);pointer-events:none;z-index:0}
.adv-gate{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 22px;border-radius:6px;z-index:1;
  background:rgba(255,255,255,.5);border:1px dashed #c9c1b1;color:#6b716e;cursor:not-allowed;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.adv-gate svg{width:84px;height:84px;color:#b9b3a6}
.adv-gate b{font-size:16px}
.adv-gate small{font-size:12px}
.adv-gate.open{background:rgba(255,255,255,.35);border:1px solid rgba(46,54,52,.25);color:#1f2523;cursor:pointer}
.adv-gate.open svg{color:#5f6b61}
.adv-gate.open:hover{transform:scale(1.05)}
.adv-tab[data-cat="tree"] svg{color:#8fb293}
.adv-menu[data-cat="general"] .adv-tab[data-cat="tree"] svg{color:#5f8a63}
/* "New tab unlocked": a bigger toast with the tab's icon */
.toast.tabtoast{width:360px;padding:16px 18px;border-color:#8a7a3e}
.toast.tabtoast .toast-icon{flex:0 0 46px;height:46px;display:flex;align-items:center;justify-content:center;background:#2a2a2a}
.toast.tabtoast .toast-icon svg,.toast.tabtoast .toast-icon span{width:30px;height:30px;color:#e8e4dc}
.toast.tabtoast .toast-icon .ico-ma{width:24px;height:30px;background-size:auto 29px;filter:brightness(0) invert(92%)}
.toast.tabtoast b{font-size:15px}
.toast.tabtoast .toast-name{font-size:17px}
/* the Tree page */
.adv-menu[data-cat="treepage"]{background:rgb(130,168,132)}
.adv-inner.away{opacity:0 !important;pointer-events:none;transition:opacity .4s ease}
.tree-view{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.tree-view.on{opacity:1}
.tree-cv{position:absolute;inset:0;width:100%;height:100%}
.tree-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden}

.tree-back{position:absolute;left:24px;top:22px;z-index:2;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#1f2a20;
  padding:10px 14px;border-radius:4px;background:rgba(255,255,255,.35);transition:background-color .3s ease,transform .3s ease}
.tree-back:hover{background:rgba(255,255,255,.6);transform:scale(1.04)}

.tree-view{background:rgb(130,168,132)}
.tb-layer{position:absolute;left:0;top:0;width:100%;height:0;overflow:visible;pointer-events:none}
.tree-view{overflow:hidden}
.tree-space{position:relative;width:100%}
.tb-layer.front{z-index:1}
.tb-bird{position:absolute;left:0;top:0;will-change:transform}
.tb-bird svg{display:block}
.tree-back.dark{color:#e8e6df;background:rgba(255,255,255,.12)}

/* leaves drifting down past the Tree */
.tl-layer{position:absolute;left:0;top:0;width:100%;height:0;overflow:visible;pointer-events:none;z-index:1}
.tl-leaf{position:absolute;left:0;top:0;will-change:transform}
.tl-leaf svg{display:block;width:100%;height:100%}

/* the Tree's words, in the heart of the crown */
.tree-words{position:absolute;transform:translateY(-50%);z-index:2;pointer-events:none;text-align:center;opacity:0;transition:opacity .9s ease}
.tree-words.on{opacity:1}
.tree-words .crow-line{color:#fff;font-size:clamp(15px,1.25vw,20px);line-height:1.5;text-shadow:none}
.tree-words .crow-line .ltr{animation-duration:.9s}                 /* each letter fades in slowly */

/* the sun / moon switch in the menu */
.sun-toggle{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;margin-left:4px;align-self:center;position:relative;top:0;color:inherit;opacity:.75;
  transition:opacity .3s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.sun-toggle svg{width:17px;height:17px}
.sun-toggle:hover{opacity:1;transform:rotate(20deg) scale(1.12)}

/* phones: the menu stays on one line (swipe sideways if it doesn't fit), a slimmer header */
@media (max-width:600px){
  .site-header{padding:14px var(--pad) 8px;gap:6px 20px}
  .nav{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;width:100%;gap:10px;font-size:11px;letter-spacing:0;justify-content:space-between;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    }
  .nav::-webkit-scrollbar{display:none}
  .nav a,.sun-toggle{flex:0 0 auto;white-space:nowrap}
  .stage-media{width:100%}
}

/* stills instead of a trailer: a quiet crossfading slideshow */
.stage-media.slides{--ar:2.0435;background:#000;cursor:pointer;overflow:hidden}
.stage-media .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);
  transition:opacity 1.2s ease,transform 6.5s linear}
.stage-media .slide.on{opacity:1;transform:scale(1)}
.slide-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:9px;z-index:2}
.slide-dot{width:7px;height:7px;padding:0;border-radius:50%;background:rgba(255,255,255,.45);transition:background-color .3s ease,transform .3s ease}
.slide-dot.on{background:#fff;transform:scale(1.25)}
.slide-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;font-size:28px;line-height:40px;
  color:#fff;background:rgba(0,0,0,.25);opacity:0;transition:opacity .3s ease,background-color .3s ease}
.slide-arrow.s-prev{left:14px}.slide-arrow.s-next{right:14px}
.stage-media.slides:hover .slide-arrow{opacity:1}
.slide-arrow:hover{background:rgba(0,0,0,.5)}
@media (hover:none){.slide-arrow{opacity:.8}}
@media (prefers-reduced-motion:reduce){.stage-media .slide{transition:opacity .6s ease;transform:none}}

/* while a trailer loads: the picture stays, a small calm "Loading" sits in the middle */
.stage-media video{transition:opacity .5s ease}
.stage-media video.loading{opacity:0}
.stage-wait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:#fff;pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.stage-wait span{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin 1s linear infinite}
.stage-wait small{font-size:11px;text-transform:uppercase;letter-spacing:.1em}
@keyframes spin{to{transform:rotate(360deg)}}

/* BERG72 studio gallery (berg72.html — not linked from the site) */
.studio-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;border-top:1px solid var(--ink);padding-top:18px;margin-bottom:34px}
.studio-head h1{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(54px,8vw,120px);line-height:.9;letter-spacing:-.02em}
.studio-sub{margin:0;text-align:right;font-size:13px;text-transform:uppercase;letter-spacing:.04em;line-height:1.7}
.studio-sub span{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:clamp(17px,1.5vw,22px);color:var(--soft)}
.sg{margin:0 0 clamp(14px,1.6vw,24px);overflow:hidden;background:var(--tile)}
.sg img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.sg:hover img{transform:scale(1.025)}
.sg-hero{aspect-ratio:16/9}
.sg-full{aspect-ratio:16/8}
.sg-quiet{aspect-ratio:16/8}
.sg-quiet img{object-position:50% 92%}
.sg-row{display:grid;grid-template-columns:7fr 5fr;gap:clamp(14px,1.6vw,24px);margin-bottom:clamp(14px,1.6vw,24px)}
.sg-row .sg{margin:0;aspect-ratio:auto;height:clamp(300px,42vw,720px)}
.sg-row--even{grid-template-columns:1fr 1fr}
.sg-row--even .sg{height:clamp(240px,34vw,560px)}
.studio-contact{border-top:1px solid var(--ink);margin-top:clamp(40px,6vw,90px);padding-top:16px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.studio-contact h2{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(30px,3vw,46px);line-height:1}
.studio-contact p{margin:0;text-align:right;line-height:1.7}
@media (max-width:700px){
  .sg-row,.sg-row--even{grid-template-columns:1fr}
  .sg-row .sg,.sg-row--even .sg{height:auto;aspect-ratio:4/3}
  .sg-row .sg-tall{aspect-ratio:3/4}
  .studio-sub,.studio-contact p{text-align:left}
}
.sg-viewer{position:fixed;inset:0;z-index:60;background:rgba(10,10,10,.94);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;cursor:zoom-out}
.sg-viewer[hidden]{display:none}
.sg-viewer.on{opacity:1}
.sg-viewer img{max-width:92vw;max-height:88vh;object-fit:contain;cursor:pointer;box-shadow:0 20px 60px -20px rgba(0,0,0,.6)}
.sg-viewer button{position:absolute;color:#fff;font-size:34px;line-height:1;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.06);transition:background-color .3s ease}
.sg-viewer button:hover{background:rgba(255,255,255,.16)}
.sgv-prev{left:18px;top:50%;transform:translateY(-50%)}.sgv-next{right:18px;top:50%;transform:translateY(-50%)}.sgv-close{right:18px;top:18px;font-size:30px}

/* the two-line menu button (only shown on a phone held sideways) */
.burger{display:none;position:relative;z-index:7;width:34px;height:26px;padding:0;flex-direction:column;justify-content:center;gap:7px;align-items:flex-end}
.burger span{display:block;height:1.5px;background:currentColor;transition:transform .4s cubic-bezier(.2,.7,.2,1),width .4s ease,opacity .3s ease}
.burger span:first-child{width:34px}.burger span:last-child{width:24px}
html.menu-open .burger span:first-child{transform:translateY(4.25px) rotate(45deg);width:30px}
html.menu-open .burger span:last-child{transform:translateY(-4.25px) rotate(-45deg);width:30px}

/* phone held sideways: a slim bar with the logo and the button; the menu opens over the whole screen;
   scrolling down slides the bar away completely, scrolling up brings it back */
@media (max-width:600px),(max-height:520px) and (orientation:landscape){
  .site-header{padding:12px var(--pad);flex-wrap:nowrap;transition:transform .5s cubic-bezier(.45,0,.2,1),opacity .4s ease,background-color .4s ease}
  .site-header.faded{opacity:1;transform:translateY(-105%)}
  .brand img{height:22px}
  .burger{display:flex}
  .site-header > .nav{position:fixed;inset:0;z-index:6;background:var(--paper);flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:flex-start;
    gap:4px;padding:0 calc(var(--pad) * 2);font-size:clamp(22px,6.5vh,34px);font-weight:500;letter-spacing:.08em;
    opacity:0;pointer-events:none;transform:translateY(-12px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
  html.menu-open .site-header > .nav{opacity:1;pointer-events:auto;transform:none}
  html.menu-open{overflow:hidden}
  .nav a{padding:4px 0}
  .nav .sun-toggle{margin:10px 0 0;width:30px;height:30px;align-self:flex-start;top:0}
  .nav .sun-toggle svg{width:24px;height:24px}
  .stage-media{width:min(100%,calc((100vh - 70px) * var(--ar)))}
  .stage-nav{width:min(100%,calc((100vh - 70px) * var(--ar)))}
}
@media (max-width:600px){.brand img{height:26px}.site-header > .nav{font-size:clamp(24px,7.5vw,32px);gap:8px}}

/* contact page: the studio, small and discreet — round glimpses like on the old site */
.studio-mini{display:flex;justify-content:space-between;align-items:center;gap:clamp(24px,4vw,60px);flex-wrap:wrap;
  margin-top:clamp(50px,7vw,100px);border-top:1px solid var(--line);padding-top:clamp(24px,3vw,36px)}
.studio-mini h2{border:0;padding:0;width:auto;margin:0 0 10px;font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.2vw,32px);line-height:1.1}
.studio-mini p{margin:0;font-size:15px;line-height:1.6}
.studio-mini em{font-family:var(--serif);font-size:17px;color:var(--soft)}
.studio-mini .studio-mini-title{font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.studio-mini .studio-mini-note{margin-top:10px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--soft)}
.studio-dots{display:flex;gap:clamp(10px,1.2vw,16px)}
.studio-dots img{width:clamp(110px,13vw,190px);aspect-ratio:1;border-radius:50%;object-fit:cover;filter:saturate(.85)}
@media (max-width:600px){.studio-dots{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:14px}.studio-dots img{width:100%}}

/* the "Fun mode" card works as the off switch */
.adv-node.switch{cursor:pointer;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease,background-color .3s ease}
.adv-node.switch:hover{transform:scale(1.03)}
.adv-node.switch.sure{border-color:#c0614f}
.adv-node.switch.sure small{color:#c0614f}

/* the 404 page */
.notfound{min-height:62vh;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--ink);padding-top:18px}
.nf-code{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--soft)}
.notfound h1{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(40px,6.5vw,96px);line-height:1;letter-spacing:-.015em;max-width:14ch}
.nf-text{margin:28px 0 14px;font-size:16px}
.nf-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.03em}
.nf-links a{border-bottom:1.5px solid currentColor;padding-bottom:2px}

/* phones: comfortable tap targets (about 44 px) without changing the look, and slightly larger caption text */
@media (pointer:coarse),(max-width:600px){
  .stage-nav a{display:inline-block;padding:14px 12px;margin:-14px -12px}
  .site-footer a{display:inline-block;padding:12px 0}
  .burger{box-sizing:content-box;padding:9px;margin:-9px}
  .slide-arrow{width:48px;height:48px}
}
@media (max-width:600px){
  .cap b,.cap.spot .ttl b{font-size:14px}
  .cap.spot,.cap.spot span{font-size:14px}
  .stage-credits{font-size:14px}
}

/* a work is open: every effect steps aside — no rain, lightning, clouds, sun, stars, birds or Crowbert */
html.film-on .fx-rain,html.film-on .fx-lamp,html.film-on .fx-hlamp,html.film-on .fx-flash,html.film-on .fx-clouds,html.film-on .fx-orb,
html.film-on .fx-stars,html.film-on .fx-flock,html.film-on .fx-sparrows,html.film-on .fx-feathers,html.film-on .crow,html.film-on .crow-talk{display:none !important}
html.film-on .stage-media{-webkit-box-reflect:none !important}

/* the hint at the secret reward */
.adv-secret{display:flex;align-items:baseline;gap:10px;margin:2px 0 18px;font-family:var(--serif);font-style:italic;font-size:16px;opacity:.85}
.adv-secret b{font-family:var(--sans);font-style:normal;font-weight:600;font-size:12px;letter-spacing:.04em}
.adv-secret-lock{font-style:normal;animation:twinkleHint 3.2s ease-in-out infinite}
@keyframes twinkleHint{0%,100%{opacity:.35}50%{opacity:1}}

/* Crowbert's words sit on a soft dark backing, so they stay readable over photos and posters */
.crow-talk{padding:14px 18px;border-radius:8px;background:rgba(22,24,25,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 12px 32px -14px rgba(0,0,0,.7)}
.crow-talk .crow-line{text-shadow:0 1px 2px rgba(0,0,0,.6)}
.adv-menu.in-tree .adv-corner,.adv-menu.in-tree .adv-zoom{opacity:0;pointer-events:none;transition:opacity .4s ease}