/* Orâ — orahertz.com
   Layout: one long night. A full-bleed opening photo, then sections that rise like a set,
   each anchored by a set timecode. Dark-first by design: the site lives in the light of the decks. */
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Karla";src:url("../fonts/karla.woff2") format("woff2");font-weight:200 800;font-display:swap}

:root{
  --night:#120c17;        /* room after dark */
  --night-2:#1b1222;      /* raised surface */
  --line:#3a2a40;         /* hairlines */
  --text:#f6eef2;         /* warm white skin-light */
  --muted:#b9a7b6;        /* secondary text */
  --stage:#ff5aa8;        /* stage magenta */
  --halo:#f3c98b;         /* ring-light gold */
  --display:"Cormorant","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Karla","Helvetica Neue",Arial,sans-serif;
  --step--1:clamp(.8rem,.78rem + .1vw,.86rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.1rem);
  --step-1:clamp(1.25rem,1.1rem + .6vw,1.6rem);
  --step-2:clamp(1.8rem,1.4rem + 1.6vw,2.8rem);
  --step-3:clamp(2.6rem,1.8rem + 3.6vw,5.2rem);
  --step-4:clamp(4.2rem,2.4rem + 9vw,10.5rem);
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --wrap:72rem;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--night);color:var(--text);font-family:var(--body);font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--halo)}
:focus-visible{outline:2px solid var(--halo);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:var(--gutter);top:calc(env(safe-area-inset-top,0px) + 8px);background:var(--halo);color:var(--night);padding:.5em 1em;z-index:50}

/* language switch */
html[lang="en"] [data-l="fr"],html[lang="fr"] [data-l="en"]{display:none!important}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.label{font-family:var(--body);font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
.tc{font-variant-numeric:tabular-nums;color:var(--halo);letter-spacing:.08em}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:20;padding-top:env(safe-area-inset-top,0px);transition:background .3s}
.top.solid{background:color-mix(in srgb,var(--night) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.6rem}
.brand{font-family:var(--display);font-size:1.7rem;font-weight:600;text-decoration:none;line-height:1}
.nav{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav a{text-decoration:none;font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase}
.nav .hide-s{display:none}
@media (min-width:52rem){.nav .hide-s{display:inline}}
.lang{background:none;border:1px solid var(--line);color:var(--text);font:inherit;font-size:var(--step--1);letter-spacing:.12em;padding:.3em .7em;border-radius:99px;cursor:pointer}
.lang:hover{border-color:var(--halo)}

/* opening */
.opening{position:relative;min-height:min(92svh,58rem);display:grid;align-items:end;overflow:hidden;isolation:isolate}
.opening picture,.opening img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%;z-index:-2}
.opening::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,12,23,.15) 0%,rgba(18,12,23,.1) 40%,rgba(18,12,23,.92) 88%,var(--night) 100%),linear-gradient(90deg,rgba(18,12,23,.75) 0%,rgba(18,12,23,0) 60%)}
.opening .wrap{width:100%;padding-block:7rem 3.5rem;display:grid;gap:1.1rem}
.name{font-family:var(--display);font-weight:500;font-size:var(--step-4);line-height:.82;margin:0;letter-spacing:-.01em}
.name .hz{font-size:.32em;letter-spacing:.06em;font-weight:400;color:var(--halo);vertical-align:super;margin-left:.1em}
.thesis{font-family:var(--display);font-size:var(--step-2);line-height:1.1;margin:0;max-width:22ch;text-wrap:balance;font-weight:400}
.thesis em{font-style:normal;color:var(--stage)}
.sig{font-family:var(--display);font-size:var(--step-1);font-style:normal;color:var(--halo);margin:0}
.ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.6rem}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.4em;border-radius:99px;text-decoration:none;font-weight:600;letter-spacing:.06em;font-size:var(--step--1);text-transform:uppercase;border:1px solid var(--text);cursor:pointer;background:none;color:var(--text);font-family:var(--body)}
.btn.solid{background:var(--text);color:var(--night)}
.btn:hover{border-color:var(--halo);color:var(--halo)}
.btn.solid:hover{background:var(--halo);color:var(--night)}
.stamp{position:absolute;right:var(--gutter-r);bottom:1.2rem;font-size:var(--step--1)}

/* sections */
section{padding-block:clamp(4rem,9vw,8rem)}
.head{display:grid;gap:.5rem;margin-bottom:2.2rem}
h2{font-family:var(--display);font-weight:500;font-size:var(--step-3);line-height:.95;margin:0;text-wrap:balance}
h3{font-family:var(--display);font-weight:600;font-size:var(--step-1);margin:0;line-height:1.2}
p{margin:0}
.prose{display:grid;gap:1em;max-width:65ch}
.prose p{color:var(--text)}
.muted{color:var(--muted)}

/* listen */
.listen-grid{display:grid;gap:2rem}
@media (min-width:56rem){.listen-grid{grid-template-columns:1.35fr 1fr;align-items:start}}
.screen{position:relative;border-radius:6px;overflow:hidden;background:var(--night-2);aspect-ratio:16/9;max-width:100%}
.screen video{width:100%;height:100%;object-fit:cover}
.screen figcaption{position:absolute;left:.8rem;bottom:.7rem;font-size:var(--step--1);background:rgba(18,12,23,.7);padding:.25em .6em;border-radius:4px}
.setcard{display:grid;gap:1.1rem;padding-block:.2rem}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.facts div{background:var(--night);padding:.9rem .8rem;display:grid;gap:.15rem}
.facts b{font-family:var(--display);font-size:var(--step-2);font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.facts span{font-size:var(--step--1);color:var(--muted)}
.arc{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;border-left:1px solid var(--line);padding-left:1rem}
.arc li{display:grid;grid-template-columns:4.6rem 1fr;gap:.6rem;font-size:var(--step--1)}

/* about */
.about-grid{display:grid;gap:2.5rem}
@media (min-width:56rem){.about-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center}}
.portrait{border-radius:6px;overflow:hidden;aspect-ratio:4/5;max-width:100%}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:58% 35%}
.path{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.4rem;font-size:var(--step--1)}
.path li{display:grid;grid-template-columns:5.2rem 1fr;gap:.8rem;border-top:1px solid var(--line);padding-top:.45rem}

/* dates */
.dates{display:grid;gap:0;border-top:1px solid var(--line)}
.date{display:grid;grid-template-columns:minmax(5.5rem,8rem) minmax(0,1fr);gap:1rem;padding-block:1.3rem;border-bottom:1px solid var(--line);align-items:baseline}
.date time{font-family:var(--display);font-size:var(--step-2);line-height:1;font-variant-numeric:tabular-nums}
.date time small{display:block;font-family:var(--body);font-size:var(--step--1);color:var(--muted);letter-spacing:.12em;margin-top:.35rem}
.date .what{display:grid;gap:.25rem;min-width:0}
.date.next time{color:var(--stage)}
.pill{justify-self:start;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--stage);color:var(--stage);border-radius:99px;padding:.1em .7em}
.pill.past{border-color:var(--line);color:var(--muted)}

/* news */
.news{display:grid;gap:1.2rem}
@media (min-width:48rem){.news{grid-template-columns:repeat(2,minmax(0,1fr))}}
.post{display:grid;gap:.5rem;padding:1.3rem;border:1px solid var(--line);border-radius:6px;background:var(--night-2)}

/* gallery */
.gallery{display:grid;gap:.6rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:48rem){.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gallery button{all:unset;cursor:zoom-in;position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/5;display:block}
.gallery button:focus-visible{outline:2px solid var(--halo);outline-offset:2px}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gallery button:hover img{transform:scale(1.04)}
.gallery .tc{position:absolute;left:.5rem;bottom:.4rem;font-size:.72rem;background:rgba(18,12,23,.7);padding:.1em .45em;border-radius:3px}
.gallery .wide{grid-column:span 2;aspect-ratio:auto}
.lightbox{position:fixed;inset:0;z-index:40;background:rgba(10,6,12,.94);display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 3rem) var(--gutter-r) calc(env(safe-area-inset-bottom,0px) + 3rem) var(--gutter)}
.lightbox img{max-height:82svh;width:auto;border-radius:4px}
.lightbox p{margin-top:.8rem;text-align:center;font-size:var(--step--1)}
.lightbox .close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 1rem);right:var(--gutter-r)}

/* press */
.press{display:grid;gap:1.2rem}
@media (min-width:56rem){.press{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kit{display:grid;gap:.7rem;align-content:start;border-top:1px solid var(--text);padding-top:1rem}
.kit ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:var(--step--1)}
.copy{font-size:var(--step--1);background:none;border:1px solid var(--line);color:var(--text);padding:.35em .8em;border-radius:99px;cursor:pointer;justify-self:start;font-family:var(--body)}
.copy:hover{border-color:var(--halo)}

/* booking */
.booking{background:linear-gradient(180deg,var(--night) 0%,#1d0f20 100%)}
.book-grid{display:grid;gap:2.5rem}
@media (min-width:56rem){.book-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}}
.mail{font-family:var(--display);font-size:var(--step-2);word-break:break-word;text-decoration:none;line-height:1.1}
form{display:grid;gap:1rem}
.row{display:grid;gap:1rem}
@media (min-width:40rem){.row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.35rem;min-width:0}
.field label{font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--text);background:var(--night);border:1px solid var(--line);border-radius:4px;padding:.75em .85em;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--halo)}
textarea{min-height:8rem;resize:vertical}
.status{font-size:var(--step--1);min-height:1.4em}
.status.ok{color:var(--halo)}
.hp{position:absolute;left:-5000px}

/* footer */
footer{border-top:1px solid var(--line);padding-block:2.5rem calc(2.5rem + env(safe-area-inset-bottom,0px));font-size:var(--step--1)}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:1.2rem}

/* clip with sound (Instagram embed, loaded on click) */
.clipbox{display:grid;gap:.7rem;min-width:0}
.screen .sound{position:absolute;right:.8rem;bottom:.6rem}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--night)}
.screen.vertical{aspect-ratio:9/16;max-height:80svh;margin-inline:auto}
.credits{font-size:var(--step--1)}
.credits .label{margin-right:.5em}
.fine{font-size:.8rem}

/* Mixcloud player, loaded on click */
.mixbox{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.mixbox iframe{width:100%;height:120px;border:0;border-radius:6px;background:var(--night-2)}