/* Dave Kennedy — editorial salon, not a restaurant template. */
:root{
  --bg:#070707;
  --ink:#EDE6D9;
  --mute:#8A8176;
  --gold:#D3B075;
  --line:rgba(211,176,117,.22);
  --g:clamp(1rem,3.6vw,2.4rem);
  --nav:4.2rem;
  font-size:16px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:#070707}
html{background:#070707}
body{
  background:#070707;color:var(--ink);
  font-family:var(--ff-sans);font-weight:400;line-height:1.55;
}
a,button{cursor:pointer}
@media (hover:hover) and (pointer:fine){
  body{cursor:url("../img/brand/scissors.svg") 16 8, auto}
  a,button{cursor:url("../img/brand/scissors.svg") 16 8, pointer}
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;appearance:none;-webkit-appearance:none}
.wrap{width:min(92rem,100% - var(--g)*2);margin-inline:auto}

.k{font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);font-weight:700}
.num{font-family:var(--ff-serif);font-style:italic;font-size:.9rem;color:var(--gold)}

/* NAV — mark left, links center, book right. No pills, no round social. */
.nav{position:fixed;inset:0 0 auto;z-index:80;height:var(--nav);
  display:flex;align-items:center;color:#fff;overflow:visible;
  background:#070707}
.nav.is-stuck,.nav.is-open{background:#070707;box-shadow:0 1px 0 var(--line)}
.nav-in{width:min(92rem,100% - var(--g)*2);margin-inline:auto;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo img{height:2.05rem;width:auto}
.nav-links{display:flex;justify-content:center;gap:1.8rem}
.nav-links a{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;opacity:.78}
.nav-links a:hover,.nav-links a.is-on{opacity:1;color:var(--gold)}
.nav-end{display:flex;align-items:center;gap:.9rem}
.lang button{padding:.35rem .08rem;font-size:.62rem;letter-spacing:.12em;font-weight:700;color:rgba(255,255,255,.35)}
.lang button[aria-pressed="true"]{color:#fff}
.lang span{opacity:.25;font-size:.65rem}
.book{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--gold);
  border-bottom:1px solid var(--gold);padding-bottom:.12rem}
.book:hover{color:#fff;border-color:#fff}
.theme{width:2.15rem;height:2.15rem;border:1px solid var(--line);color:inherit;flex:none;position:relative}
.theme svg{position:absolute;left:50%;top:50%;width:.95rem;height:.95rem;display:block;overflow:visible;
  transform:translate(-50%,-50%)}
.theme .moon{transform:translate(-48%,-62%)}
.theme .sun{visibility:hidden}
html[data-theme="day"] .theme .moon{visibility:hidden}
html[data-theme="day"] .theme .sun{visibility:visible}
.nav-tgl{display:none;width:2.8rem;height:2.8rem;position:relative}
.nav-tgl span{position:absolute;left:.65rem;right:.65rem;height:1px;background:#fff}
.nav-tgl span:nth-child(1){top:1.05rem}
.nav-tgl span:nth-child(2){top:1.38rem}
.nav-tgl span:nth-child(3){top:1.71rem}
.nav-tgl[aria-expanded="true"] span:nth-child(1){transform:translateY(.33rem) rotate(45deg)}
.nav-tgl[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-tgl[aria-expanded="true"] span:nth-child(3){transform:translateY(-.33rem) rotate(-45deg)}

/* HERO — bottom locked type, overflowing name, video uncropped mood. */
.hero{position:relative;min-height:100svh;color:#fff;overflow:hidden;display:flex;align-items:flex-end}
.hero-foto{position:absolute;inset:0}
.hero-still{display:none}
.hero-foto video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;pointer-events:none}
.hero-foto video::-webkit-media-controls,
.hero-foto video::-webkit-media-controls-start-playback-button,
.hero-foto video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none;opacity:0;pointer-events:none}
.hero-foto::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 38%,rgba(0,0,0,.78) 100%)}
.hero-frame{position:absolute;inset:calc(var(--nav) + .7rem) var(--g) .7rem;border:1px solid rgba(211,176,117,.28);pointer-events:none;z-index:1}
.hero-in{position:relative;z-index:2;width:min(92rem,100% - var(--g)*2);margin:0 auto;
  padding:0 0 clamp(2.2rem,5vw,3.4rem);display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:end;
  pointer-events:none}
.hero-in a{pointer-events:auto}
.hero h1{margin:0;font-family:var(--ff-serif);font-weight:500;font-size:clamp(4.2rem,16vw,13.5rem);
  line-height:.78;letter-spacing:-.04em;text-transform:uppercase}
.hero h1 em{display:block;font-style:italic;font-weight:400;text-transform:none;
  font-size:.22em;letter-spacing:.02em;color:var(--gold);margin-top:.15em;max-width:18em}
.hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:1.4rem;padding-bottom:.4rem}
.hero-side .k{writing-mode:vertical-rl;transform:rotate(180deg);opacity:.8}
.hero-act{display:flex;gap:1.2rem;flex-wrap:wrap}
.hero-act a{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700}
.hero-act a.book{padding-bottom:.2rem}
.hero-act a.ghost{color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:.2rem}
.hero-act a.ghost:hover{color:#fff;border-color:#fff}
.hero-sound{position:absolute;z-index:4;left:calc(var(--g) + .4rem);bottom:1.1rem;
  width:2.4rem;height:2.4rem;border:1px solid rgba(255,255,255,.3);color:#fff}
.hero-sound svg{position:absolute;left:50%;top:50%;width:1.05rem;height:1.05rem;display:block;overflow:visible;
  transform:translate(-42%,-50%)}
.hero-sound .on{visibility:hidden}
.hero-sound.is-on .off{visibility:hidden}
.hero-sound.is-on .on{visibility:visible}

.ticker{overflow:hidden;border-block:1px solid var(--line);padding:.7rem 0}
.ticker-in{display:flex;width:max-content;animation:ticker-ltr 36s linear infinite;
  font-family:var(--ff-serif);font-style:italic;font-size:1.15rem;color:var(--gold);white-space:nowrap}
.ticker-in span{padding-right:2.6rem}
@keyframes ticker-ltr{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ABOUT — text, his portrait on the right */
.about{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,3.2rem);
  padding:clamp(3.2rem,8vw,6rem) 0;align-items:start}
.about-pic{margin:0}
.about-pic img{width:100%;height:auto;display:block}
.about-copy .k{margin:0 0 1.2rem}
.about h2{margin:0 0 1.4rem;font-family:var(--ff-serif);font-weight:500;font-size:clamp(2.6rem,6vw,5.2rem);
  line-height:.92;letter-spacing:-.03em}
.about h2 em{font-style:italic;color:var(--gold)}
.about p{margin:0 0 1rem;color:var(--mute);max-width:34rem}
/* WORK — two masonry columns like davekennedy.sk, no crop */
.film-head{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:1rem;
  padding:0 var(--g) 1.2rem;width:min(92rem,100%);margin-inline:auto}
.film-head h2{margin:0 0 .7rem;font-family:var(--ff-serif);font-size:clamp(2.4rem,5vw,4.2rem);font-weight:500;line-height:.95}
.film-head h2 em{font-style:italic;color:var(--gold)}
.film-head .lede{margin:0;color:var(--mute);max-width:34rem}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;width:min(72rem,100% - var(--g)*2);margin-inline:auto;padding:0 0 2.4rem}
.shots a{display:block;overflow:hidden;margin:0}
.shots img{width:100%;height:auto;display:block}

/* AIR — text block, not over photos */
.air{border-block:1px solid var(--line);padding:clamp(3rem,8vw,5.5rem) 0}
.air h2{margin:.5rem 0 1rem;font-family:var(--ff-serif);font-size:clamp(2.6rem,6vw,5.2rem);font-weight:500;line-height:.9}
.air h2 em{font-style:italic;color:var(--gold)}
.air p{max-width:36rem;color:var(--mute);margin:0 0 1.4rem}

/* TEAM — flush columns, indexed */
.crew{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bg);margin:clamp(3rem,8vw,6rem) 0 0;align-items:stretch}
.card{position:relative;display:block;overflow:hidden;background:var(--bg);color:#fff;aspect-ratio:578/652}
.card img{width:100%;height:100%;object-fit:cover;object-position:center top}
.card--crop img{object-position:center 12%}
.card-in{position:absolute;inset:auto 0 0;padding:1.3rem 1.1rem;background:linear-gradient(transparent,rgba(0,0,0,.88))}
.card-in b{display:block;font-family:var(--ff-serif);font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:500}
.card-in span{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.card-in .num{position:absolute;top:-2.2rem;left:1.1rem}

/* REVIEWS — one quote */
.quotes{padding:clamp(3.2rem,8vw,6rem) var(--g) clamp(2.2rem,5vw,3.4rem);text-align:center;max-width:52rem;margin:0 auto}
.quotes figure{margin:0;display:none}
.quotes figure.is-on{display:block}
.quotes q{font-family:var(--ff-serif);font-style:italic;font-size:clamp(1.5rem,3.4vw,2.45rem);
  line-height:1.35;quotes:none}
.quotes figcaption{margin-top:1.3rem;font-size:.65rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.quotes figcaption small{display:block;margin-top:.35rem;color:var(--mute);letter-spacing:.12em}

/* CONTACT — compact, no giant Booking word inflating the footer */
.bookend{padding:clamp(2.6rem,6vw,4.2rem) 0 0;border-top:1px solid var(--line)}
.bookend h2{margin:.4rem 0 1.1rem;font-family:var(--ff-serif);font-weight:500;font-size:clamp(2.4rem,5vw,4.2rem);
  line-height:.92}
.bookend .book{display:inline-block;margin-bottom:.4rem}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;padding:1.4rem 0 0;border-top:1px solid var(--line);margin-top:1.4rem}
.meta dt{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 .4rem}
.meta dd{margin:0;font-size:.95rem}
.meta a:hover{color:var(--gold)}
.map-wrap{height:10rem;overflow:hidden}
.map{width:100%;height:calc(10rem + 44px);border:0;display:block}

.page{padding:calc(var(--nav) + 2.4rem) 0 2.2rem;background:#070707}
.page-intro{padding-bottom:clamp(2rem,5vw,3.4rem)}
.page-intro .k{margin:0 0 .85rem}
.page h1{margin:0 0 1.2rem;font-family:var(--ff-serif);font-size:clamp(3rem,8vw,6.5rem);font-weight:500;line-height:.88}
.page h1 em{display:block;font-style:italic;color:var(--gold);font-size:.42em;letter-spacing:0;margin-top:.2em;text-transform:none;font-weight:400}
.page .lede{color:var(--mute);max-width:36rem;margin:0}
h2 em,.script{font-style:italic;color:var(--gold);font-weight:400}

.member{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1fr);gap:clamp(1.4rem,4.5vw,3.8rem);align-items:center;padding:clamp(2.2rem,6vw,4.8rem) 0;border-top:1px solid var(--line)}
.member:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,.88fr)}
.member:nth-child(even) figure{order:2}
.member figure{margin:0;overflow:hidden}
.member img{width:100%;height:auto;object-fit:contain}
.member h2{margin:.35rem 0 .55rem;font-family:var(--ff-serif);font-size:clamp(2.4rem,5vw,4.4rem);font-weight:500;line-height:.9}
.member .k{margin:0 0 1rem;color:var(--gold)}
.member p:not(.k){margin:0 0 1.2rem;color:var(--mute);max-width:32rem}

.gal-board{width:min(72rem,100% - var(--g)*2);margin-inline:auto}
.gal-block{margin:1.4rem 0 2.4rem}
.gal-label{margin:0 0 .75rem;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .9rem}
.filters button{border:1px solid var(--line);background:transparent;color:var(--mute);padding:.5rem .85rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.filters button.is-on{color:var(--gold);border-color:var(--gold)}
.filters-empty{margin:0 0 1rem;color:var(--mute)}
.reels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;width:min(72rem,100% - var(--g)*2);margin:0 auto 2.4rem}
.gal-board .reels{width:auto;margin:0}
.reel{position:relative;aspect-ratio:9/16;overflow:hidden;background:#1a1a1a center/cover no-repeat;cursor:pointer}
.reel[hidden]{display:none}
.reel img,.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel img{z-index:3}
.reel video{z-index:1;opacity:1;background:transparent;pointer-events:none}
.reel.is-play img{opacity:0}
.reel video::-webkit-media-controls,
.reel video::-webkit-media-controls-start-playback-button,
.reel video::-webkit-media-controls-overlay-play-button,
.hero-foto video::-webkit-media-controls,
.hero-foto video::-webkit-media-controls-start-playback-button,
.hero-foto video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none;opacity:0;pointer-events:none}
.rlb{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center}
.rlb.is-on{display:flex}
.rlb video{max-height:92vh;max-width:min(440px,92vw);background:#000}
.rlb-x{position:absolute;top:1rem;right:1rem;width:2.6rem;height:2.6rem;border:1px solid rgba(255,255,255,.25);color:#fff;background:transparent}
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;width:auto;margin:0;padding:0}
.gal[hidden]{display:none}
.gal a{display:block;margin:0}
.gal a[hidden]{display:none}
.gal img{width:100%;height:auto;display:block}

.nextgen{position:relative;overflow:hidden;min-height:clamp(13rem,34vw,22rem);margin:0 0 .4rem;
  display:grid;place-items:center;color:#fff;background:var(--bg)}
.nextgen::before,.nextgen::after{content:'';position:absolute;top:0;bottom:0;width:1px;background:rgba(211,176,117,.22);z-index:1}
.nextgen::before{left:33.333%}
.nextgen::after{left:66.666%}
.nextgen-ghost{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ff-sans);font-weight:800;
  font-size:clamp(4rem,18vw,12rem);letter-spacing:-.06em;opacity:.07;pointer-events:none;white-space:nowrap}
.nextgen-word{position:relative;z-index:2;margin:0;font-family:var(--ff-sans);font-weight:800;
  font-size:clamp(2.8rem,11vw,8.2rem);letter-spacing:-.05em;line-height:.85;text-align:center}
.nextgen-by{position:absolute;z-index:2;left:50%;bottom:clamp(.8rem,2.4vw,1.4rem);transform:translateX(-12%);
  display:flex;align-items:center;gap:.55rem;font-size:.62rem;letter-spacing:.18em}
.nextgen-by b{font-weight:800;letter-spacing:.12em}
.nextgen-by span{opacity:.7}
.nextgen-by img{height:1.55rem;width:auto}
.nextgen-by em{font-family:var(--ff-serif);font-style:italic;letter-spacing:.04em;font-size:1.05rem}

.lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:2rem 4rem}
.lb.is-on{display:flex}
.lb img{max-width:min(1100px,calc(100vw - 8rem));max-height:82vh;object-fit:contain}
.lb button{position:absolute;width:2.6rem;height:2.6rem;border:1px solid rgba(255,255,255,.2);color:#fff}
.lb-close{top:1rem;right:1rem}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:1.8rem}
.lb-prev{left:var(--g)}
.lb-next{right:var(--g)}
.lb-count{position:absolute;bottom:1rem;left:0;right:0;text-align:center;font-size:.65rem;letter-spacing:.2em;color:rgba(255,255,255,.5)}
body.is-lb{overflow:hidden}

.foot{padding:.85rem var(--g) 1rem;display:flex;flex-wrap:nowrap;align-items:center;gap:.7rem 1rem;justify-content:space-between;
  font-size:.72rem;letter-spacing:.08em;color:var(--mute);border-top:1px solid var(--line);background:#070707}
.foot-social{display:flex;align-items:center;gap:.85rem;margin-left:auto;flex:none}
.foot-social a{display:flex;color:inherit}
.foot-social a:hover{color:var(--gold)}
.foot-social svg{width:1.05rem;height:1.05rem;display:block}

@media (max-width:980px){
  .nav-in{grid-template-columns:auto 1fr auto}
  .nav-tgl{display:block}
  .nav-links{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;
    gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:.4rem var(--g) 1.1rem;
    transform:translateY(-6px);opacity:0;visibility:hidden;pointer-events:none;z-index:5;
    box-shadow:0 22px 40px rgba(0,0,0,.55);
    transition:opacity .28s,transform .32s,visibility 0s linear .3s}
  .nav.is-open .nav-links{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .28s,transform .32s}
  .nav-links a{padding:.95rem 0;border-bottom:1px solid var(--line);font-size:.8rem}
  body{display:flex;flex-direction:column}
  .hero{order:1}
  .ticker{order:2}
  .about{order:3}
  .work{order:4}
  .air{order:5}
  .studio{order:6}
  .quotes{order:7}
  .bookend{order:8}
  .map-wrap{order:9}
  .foot{order:10;letter-spacing:.04em;gap:.55rem}
  .foot > span:first-child{min-width:0}
  .about,.meta,.crew,.member,.member:nth-child(even){grid-template-columns:1fr}
  .member:nth-child(even) figure{order:0}
  .film-head{padding-top:.4rem}
  .hero-still{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;z-index:1}
  .hero-foto video{opacity:0;z-index:0}
  .hero-foto video.is-in{opacity:1;z-index:2;transition:opacity .7s ease}
  .gal,.shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-in{grid-template-columns:1fr}
  .hero-side{align-items:flex-start;flex-direction:row;justify-content:space-between}
  .hero-side .k{writing-mode:horizontal-tb;transform:none}
  .hero-frame{display:none}
}
@media (prefers-reduced-motion: reduce){
  .hero-foto video{opacity:1;z-index:2;transition:none}
  .ticker-in{animation:none}
}
@media (max-width:560px){
  .gal,.shots{grid-template-columns:1fr}
  .hero h1{font-size:clamp(3.4rem,22vw,5.5rem)}
  .lb{padding:4rem .4rem 3rem}
  .lb img{max-width:100%}
  .nextgen-by{transform:none;left:var(--g);right:var(--g);justify-content:center}
}

/* Day mode */
html[data-theme="day"]{
  --bg:#F3EDE3;
  --ink:#171410;
  --mute:#6A6158;
  --gold:#9B7438;
  --line:rgba(23,20,16,.14);
}
html[data-theme="day"] .nav{
  color:var(--ink);background:var(--bg);
  box-shadow:0 1px 0 var(--line)
}
html[data-theme="day"] .nav.is-stuck,html[data-theme="day"] .nav.is-open,
html[data-theme="day"] .page,html[data-theme="day"] .foot,html[data-theme="day"] body,html[data-theme="day"]{
  background:var(--bg)
}
html[data-theme="day"] .nav-logo img{mix-blend-mode:multiply}
html[data-theme="day"] .lang button{color:rgba(23,20,16,.38)}
html[data-theme="day"] .lang button[aria-pressed="true"]{color:var(--ink)}
html[data-theme="day"] .book:hover{color:var(--ink);border-color:var(--ink)}
html[data-theme="day"] .nav-tgl span{background:var(--ink)}
html[data-theme="day"] .hero{color:#fff}
html[data-theme="day"] .nextgen{color:#171410;background:#E7DFD2}
html[data-theme="day"] .nextgen-ghost{opacity:.09}
@media (hover:hover) and (pointer:fine){
  html[data-theme="day"] body{cursor:url("../img/brand/scissors-black.svg") 16 8, auto}
  html[data-theme="day"] a,html[data-theme="day"] button{cursor:url("../img/brand/scissors-black.svg") 16 8, pointer}
  html[data-theme="day"] .hero,html[data-theme="day"] .hero a,html[data-theme="day"] .hero button{
    cursor:url("../img/brand/scissors.svg") 16 8, pointer
  }
}
