/*
 * AFTERHOURS LONDON — external stylesheet
 * Keep the order of these rules: later rules intentionally refine earlier ones.
 * Values and selectors match the hosted website. Only formatting/comments changed.
 * Google Fonts is retained exactly as on the hosted site; system fallbacks apply offline.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600&family=Italiana&display=swap');
/* 01. THEME — colour variables shared by every section. */
:root {
  --ink:#160b0e;
  --dark:#100b0b;
  --wine:#321319;
  --cream:#f6eadb;
  --muted:#c5b5ab;
  --gold:#c9a679;
  --line:#ffffff26
}

/* 02. BASE — sizing, fonts, links and keyboard focus. */
* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:'DM Sans',Arial,sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

button,input,textarea,select {
  font:inherit
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer;
  color:inherit
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:7px
}

/* 03. HEADER — club wordmark, navigation and sound control. */
header {
  position:absolute;
  z-index:10;
  inset:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:32px 4.5%;
  gap:35px
}

header:before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(#0009,transparent);
  z-index:-1;
  pointer-events:none
}

.wordmark {
  font-family:'Italiana',Georgia,serif;
  font-size:37px;
  letter-spacing:-1.8px;
  line-height:1
}

.wordmark span {
  display:block;
  font:10px 'DM Sans',Arial,sans-serif;
  letter-spacing:5px;
  text-align:center;
  margin-top:12px;
  margin-left:5px
}

nav {
  display:flex;
  align-items:center;
  gap:34px;
  margin-left:auto
}

nav a {
  font-size:14px
}

.nav-cta {
  border-bottom:1px solid #ffffff78;
  padding:10px 0
}

.nav-cta span {
  margin-left:24px
}

#sound {
  border:1px solid #ffffff50;
  border-radius:30px;
  background:#100b0b40;
  padding:11px 16px;
  font-size:13px;
  white-space:nowrap
}

.sound-bars {
  display:inline-block;
  color:var(--gold);
  margin-left:10px;
  letter-spacing:2px
}

#sound[aria-pressed=true] .sound-bars {
  animation:pulse .6s infinite alternate
}

@keyframes pulse {
  to {
    transform:scaleY(.5)
  }

}

.skip {
  position:absolute;
  top:-100px;
  left:16px;
  z-index:30;
  background:var(--ink);
  padding:15px
}

.skip:focus {
  top:10px
}

/* 04. PINNED FILM — journey height determines the amount of scrolling. */
.journey {
  height:570svh;
  position:relative;
  background:#0b0908
}

.stage {
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  isolation:isolate
}

.scene,#film,.shade {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.scene {
  background-size:cover;
  background-position:center;
  will-change:transform,opacity
}

.scene-door {
  background-image:url('media/club-poster.webp')
}

.scene-bar {
  background-image:url('media/bar.webp');
  opacity:0
}

.scene-drink {
  background-image:url('media/drink.webp');
  opacity:0
}

.shade {
  background:linear-gradient(90deg,#05020385,transparent 70%),linear-gradient(0deg,#100809ba,transparent 50%,#0003);
  pointer-events:none
}

/* 05. OPENING — hero title placed above the first film frame. */
.opening {
  position:absolute;
  left:8%;
  top:34%;
  will-change:opacity,transform
}

.eyebrow,.section-kicker,.image-label {
  font-size:12px;
  font-weight:500;
  letter-spacing:2.3px;
  line-height:1.7
}

.eyebrow {
  color:var(--gold)
}

h1,h2,p {
  margin:0
}

h1,h2 {
  font-family:'Italiana',Georgia,serif;
  font-weight:400;
  letter-spacing:-.05em
}

h1 {
  font-size:clamp(70px,8.9vw,146px);
  line-height:.96;
  margin-top:20px
}

em {
  font-family:Georgia,serif;
  font-weight:400;
  font-size:.88em;
  letter-spacing:-.06em
}

h1 em {
  color:#e1bd90
}

.opening p {
  margin-top:25px;
  font-size:15px;
  letter-spacing:.3px
}

.scroll-cue {
  position:absolute;
  bottom:42px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  font-size:10px;
  letter-spacing:2.6px;
  white-space:nowrap
}

.scroll-line {
  height:45px;
  width:1px;
  background:linear-gradient(var(--cream),#fff1)
}

.scene-caption {
  position:absolute;
  bottom:55px;
  left:4.5%;
  display:flex;
  gap:24px;
  font-size:13px
}

#chapterNumber {
  color:var(--gold)
}

.skip-film {
  position:absolute;
  bottom:55px;
  right:4.5%;
  font-size:13px;
  border-bottom:1px solid #fff5;
  padding-bottom:6px
}

.end-reveal {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--wine);
  opacity:0;
  pointer-events:none;
  padding:25px;
  will-change:opacity
}

.end-reveal h2 {
  font-size:clamp(65px,8.8vw,136px);
  line-height:1.03;
  margin-top:25px
}

.end-reveal .eyebrow {
  font-size:11px
}

/* 06. CONTENT — shared spacing and editorial section layouts. */
.section {
  padding:90px 7.5%
}

.section-kicker {
  display:flex;
  justify-content:space-between;
  color:var(--gold);
  border-top:1px solid var(--line);
  padding-top:22px;
  font-size:11px
}

.studio {
  background:var(--wine);
  padding-bottom:0
}

.studio-layout {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:10%;
  padding:80px 0 100px
}

.studio h2,.craft h2 {
  font-size:clamp(46px,5.7vw,88px);
  line-height:1.06
}

.studio-copy {
  padding-top:8px;
  max-width:415px
}

.studio-copy .lead {
  font-size:25px;
  line-height:1.5;
  color:var(--cream);
  margin-bottom:28px
}

.studio-copy p,.craft-copy p {
  color:var(--muted);
  line-height:1.85;
  font-size:16px
}

.text-link {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--gold);
  padding:16px 0;
  margin-top:30px;
  font-size:14px
}

.text-link span {
  color:var(--gold)
}

.editorial-strip {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  padding:38px 0;
  font-family:'Italiana',Georgia,serif;
  font-size:clamp(19px,3.3vw,52px);
  letter-spacing:-1px
}

.editorial-strip i {
  font-size:24px;
  font-family:Georgia;
  color:var(--gold);
  font-style:normal
}

/* 07. PRIVATE EVENINGS — image/copy arrangement. */
.craft {
  background:var(--dark);
  padding-top:75px;
  padding-bottom:120px
}

.craft-row {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:10%;
  align-items:center;
  margin-top:80px
}

.craft-image {
  height:610px;
  max-height:65vw;
  position:relative;
  overflow:hidden
}

.craft-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.5s
}

.craft-image:hover img {
  transform:scale(1.04)
}

.image-label {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(transparent,#0009);
  padding:65px 25px 25px;
  font-size:10px
}

.craft-copy h2 {
  font-size:clamp(40px,4.2vw,66px);
  margin:25px 0 30px
}

.tags {
  margin-top:35px;
  display:flex;
  flex-wrap:wrap;
  gap:10px
}

.tags span {
  font-size:12px;
  border:1px solid var(--line);
  padding:9px 13px;
  border-radius:20px;
  color:var(--muted)
}

.reverse {
  direction:rtl;
  margin-top:130px
}

.reverse>* {
  direction:ltr
}

/* 08. INVITATION — call to action and bottom links. */
.contact {
  background:var(--wine);
  text-align:center;
  padding-top:110px;
  padding-bottom:35px
}

.contact h2 {
  font-size:clamp(80px,10.5vw,160px);
  line-height:.98;
  margin:32px 0
}

.contact>p {
  color:var(--muted);
  font-size:17px
}

.brief-button {
  border:1px solid var(--gold);
  background:var(--gold);
  color:var(--ink);
  padding:19px 26px;
  margin-top:32px;
  min-height:54px;
  font-size:14px;
  transition:background .2s
}

.brief-button:hover {
  background:#e3c8a4
}

.brief-button span {
  margin-left:50px
}

.contact-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:30px;
  margin-top:100px;
  font-size:11px;
  letter-spacing:1.5px
}

.contact-bottom a {
  font-size:13px;
  letter-spacing:0
}

footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:55px 7.5%;
  gap:35px;
  background:var(--dark)
}

footer .wordmark {
  font-size:29px
}

footer p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted)
}

footer>span:last-child {
  font-size:10px;
  letter-spacing:1.5px
}

/* 09. EVENING PLANNER — native dialog, inputs and buttons. */
dialog {
  background:var(--ink);
  color:var(--cream);
  border:1px solid #c9a67980;
  padding:45px;
  width:min(570px,92vw);
  max-height:90svh
}

dialog::backdrop {
  background:#000b;
  backdrop-filter:blur(8px)
}

.dialog-close {
  position:absolute;
  right:15px;
  top:10px;
  border:0;
  background:none;
  font-size:30px;
  width:44px;
  height:44px
}

dialog h2 {
  font-size:54px;
  margin:16px 0
}

dialog p {
  font-size:14px;
  line-height:1.7;
  color:var(--muted)
}

label {
  display:block;
  font-size:14px;
  margin-top:20px
}

input,select,textarea {
  display:block;
  width:100%;
  background:#24181b;
  color:var(--cream);
  border:1px solid #ffffff40;
  margin-top:9px;
  padding:13px;
  border-radius:0
}

textarea {
  min-height:110px;
  resize:vertical
}

#briefText {
  min-height:230px
}

#copyStatus {
  margin-top:15px
}

/* 10. REDUCED MOTION — readable static layout, with explicit film opt-in. */
.reduced .journey {
  height:100svh
}

.reduced .scene-bar,.reduced .scene-drink {
  display:none
}

.reduced .scroll-cue {
  display:none
}

@media(min-width:1600px) {
  .section {
    padding-left:max(7.5%,calc((100vw - 1450px)/2));
    padding-right:max(7.5%,calc((100vw - 1450px)/2))
  }

}

/* 11. MOBILE/TABLET — existing responsive breakpoints retained. */
@media(max-width:800px) {
  header {
    padding:25px 6%;
    gap:16px
  }

  .wordmark {
    font-size:32px
  }

  nav {
    display:none
  }

  #sound {
    margin-left:auto;
    font-size:12px;
    padding:10px 13px
  }

  .opening {
    left:7%;
    right:7%;
    top:36%
  }

  h1 {
    font-size:clamp(65px,12.5vw,100px)
  }

  .opening p {
    font-size:14px;
    max-width:270px;
    line-height:1.6
  }

  .eyebrow {
    font-size:10px
  }

  .scene-caption {
    left:7%;
    bottom:95px;
    font-size:12px;
    gap:15px
  }

  .scroll-cue {
    bottom:27px
  }

  .scroll-line {
    height:25px
  }

  .skip-film {
    right:7%;
    bottom:95px;
    font-size:11px
  }

  .journey {
    height:480svh
  }

  .section {
    padding:60px 7%
  }

  .section-kicker {
    font-size:9px;
    letter-spacing:1.3px;
    gap:20px
  }

  .studio {
    padding-bottom:0
  }

  .studio-layout {
    grid-template-columns:1fr;
    gap:35px;
    padding:50px 0 60px
  }

  .studio h2 {
    font-size:58px
  }

  .studio-copy .lead {
    font-size:22px;
    margin-bottom:20px
  }

  .studio-copy {
    max-width:100%
  }

  .editorial-strip {
    padding:27px 0;
    gap:10px;
    font-size:20px;
    letter-spacing:-.5px
  }

  .editorial-strip i {
    font-size:17px
  }

  .craft-row,.reverse {
    grid-template-columns:1fr;
    gap:35px;
    margin-top:50px;
    direction:ltr
  }

  .craft-image {
    height:430px;
    max-height:110vw
  }

  .craft-copy h2 {
    font-size:48px;
    margin:18px 0 23px
  }

  .tags {
    margin-top:24px;
    gap:7px
  }

  .tags span {
    font-size:11px;
    padding:8px 11px
  }

  .reverse {
    margin-top:75px
  }

  .contact {
    padding-top:70px;
    padding-bottom:28px
  }

  .contact h2 {
    font-size:80px
  }

  .contact>.eyebrow {
    font-size:9px;
    letter-spacing:1.5px
  }

  .contact-bottom {
    margin-top:70px;
    font-size:9px;
    letter-spacing:.6px
  }

  .contact-bottom a {
    font-size:12px
  }

  footer {
    flex-wrap:wrap;
    padding:35px 7%;
    gap:25px
  }

  footer p {
    font-size:11px
  }

  footer>span:last-child {
    width:100%
  }

  dialog {
    padding:36px 25px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }

}

/* Each club chapter passes over the same pinned cinematic background. */
.journey  {
  height: 740svh;
}

.story-panel  {
  position: absolute;
  left: 7.5%;
  bottom: 22%;
  max-width: 540px;
  width: 42%;
  padding: 30px 34px;
  background: linear-gradient(120deg, #10090bdd, #10090b99);
  border-left: 1px solid #c9a67988;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
}

.story-panel.story-right  {
  left: auto;
  right: 7.5%;
}

.story-panel h2  {
  font-size: clamp(42px, 4.4vw, 68px);
  line-height: 1.02;
  margin: 20px 0;
}

.story-panel p  {
  font-size: 16px;
  line-height: 1.8;
  max-width: 390px;
  color: #e0d2c6;
}

.reduced .journey  {
  height: auto;
}

.reduced .stage  {
  position: relative;
  height: auto;
  overflow: visible;
  background: #160b0e;
}

.reduced .scene-door  {
  height: 100svh;
}

.reduced .opening  {
  position: relative;
  top: auto;
  left: auto;
  padding: 35svh 7.5% 15svh;
  min-height: 100svh;
}

.reduced .story-panel, .reduced .story-panel.story-right  {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  max-width: none;
  margin: 30px 7.5%;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.reduced .scene-caption, .reduced .skip-film  {
  display: none;
}

.reduced .end-reveal  {
  position: relative;
  opacity: 1;
  padding: 90px 7.5%;
}

@media (max-width: 800px)  {
  .journey  {
    height: 650svh;
  }

  .story-panel, .story-panel.story-right  {
    left: 7%;
    right: 7%;
    bottom: 21%;
    width: auto;
    max-width: none;
    padding: 24px;
  }

  .story-panel h2  {
    font-size: clamp(34px, 8vw, 48px);
    margin: 17px 0;
  }

  .story-panel p  {
    font-size: 15px;
    line-height: 1.7;
  }

  .opening  {
    top: 33%;
  }

  .opening h1  {
    font-size: clamp(58px, 11vw, 88px);
  }

  .contact h2  {
    font-size: clamp(54px, 10vw, 80px);
  }

}

@media (max-height: 550px) and (min-width: 600px)  {
  .story-panel, .story-panel.story-right  {
    bottom: 16%;
    padding: 18px 24px;
    max-width: 530px;
    width: 60%;
  }

  .story-panel h2  {
    font-size: 36px;
    margin: 10px 0;
  }

  .story-panel p  {
    font-size: 14px;
    line-height: 1.5;
  }

  .opening  {
    top: 27%;
  }

  .opening h1  {
    font-size: 65px;
  }

}

/* A reduced-motion visit keeps a still first frame and readable chapters. */
.reduced #film  {
  display: none;
}

#film  {
  background: #0b0908;
}

.film-entry  {
  position: absolute;
  top: 75svh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  text-align: center;
  width: min(320px, 86vw);
}

#filmStart  {
  background: #c9a679;
  border: 1px solid #c9a679;
  color: #160b0e;
  min-height: 48px;
  padding: 13px 26px;
  font-size: 15px;
}

#filmHint  {
  margin-top: 10px;
  font-size: 13px;
  color: #f6eadb;
  text-shadow: 0 1px 5px #000;
}

#filmStart[hidden], #filmHint[hidden]  {
  display: none;
}

@media (max-height: 550px)  {
  .film-entry  {
    top: 72svh;
  }

  #filmHint  {
    margin-top: 4px;
  }

}