/* Refined Performing Arts — contact page (contact.html) only.
   Loads after brand.css + site.css and adds only what this page needs.
   Colours come from brand tokens; gold is structure and emphasis, never status.

   Page anatomy: dark hero → enquiry form beside a details column → footer. */

/* ---------- header over the dark hero — ivory links instead of ink ---------- */

.page-contact .site-nav a{ color:var(--ivory); }
.page-contact .head-side a{ color:var(--ivory); }
.page-contact .head-side a:hover{ color:var(--gold-light); }

/* ---------- hero ---------- */

/* same box as .about-hero, .svc-hero and .art-hero so every interior page opens at one height */
.ct-hero{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--ivory);
  min-height:clamp(13rem, 36svh, 22rem);
  display:grid; place-items:center; text-align:center;
  padding:6.5rem var(--gutter) 2.8rem;
}
.ct-hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* the hero band is wider than the photo, so only a slice shows — centred keeps her
     face and the full span of the balance inside it */
  object-position:50% 50%; opacity:.5;
}
/* a bright photo — white wall, white line work — so ivory type needs the scrim to sit
   on. If the photo is ever swapped, re-check the type against it. */
.ct-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:rgba(46,42,37,.52);
}
/* a second, darker band under the header only — the flat scrim above is tuned for the
   headline in the middle of the hero, and the menu sits higher where this photo is
   at its brightest */
.ct-hero::before{
  content:""; position:absolute; left:0; right:0; top:0; height:9rem; z-index:1;
  background:linear-gradient(to bottom, rgba(46,42,37,.62) 0%, rgba(46,42,37,0) 100%);
}
.ct-hero-inner{ position:relative; z-index:2; max-width:56rem; }
.ct-hero .eyebrow{ color:rgba(250,248,244,.8); }
.ct-hero .eyebrow::before{ background:var(--gold-light); }
.ct-hero h1{ font-size:var(--step-3); margin-bottom:1.1rem; }
.ct-hero-sub{
  color:rgba(250,248,244,.88); font-size:calc(var(--step-0) * 1.08);
  max-width:44rem; margin:0 auto;
}

/* ---------- form beside details ---------- */

.ct-grid{
  display:grid; grid-template-columns:1.35fr .75fr;
  gap:clamp(2.5rem, 6vw, 5rem); align-items:start;
  max-width:var(--max); margin:0 auto;
}
.ct-form-col h2{ font-size:var(--step-2); line-height:1.22; margin-bottom:.9rem; }
.ct-lead{
  color:var(--ink-soft); font-size:calc(var(--step-0) * 1.06);
  margin-bottom:2.2rem;
}

/* FIELD STYLES ARE THE SAME SET artists.css CARRIES for its sign-up form. The two pages
   load different stylesheets, so the rules exist in both files — change one, change the
   other. (The proper fix is lifting them into site.css, which every page already loads.) */
.ct-field{ margin-bottom:1.15rem; }
.ct-field label{
  display:block; font-family:var(--sans); font-weight:300; font-size:.68rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:.5rem;
}
.ct-optional{ letter-spacing:.16em; opacity:.7; }
.ct-form input,
.ct-form select,
.ct-form textarea{
  width:100%; display:block;
  font-family:var(--serif); font-size:var(--step-0); line-height:1.5;
  color:var(--ink); background:var(--ivory-deep);
  border:1px solid var(--gold-pale); border-radius:10px;
  padding:.8rem 1rem;
}
.ct-form textarea{ min-height:6.5rem; resize:vertical; }
.ct-form input::placeholder{ color:var(--ink-soft); opacity:.55; }
.ct-form input:focus,
.ct-form select:focus,
.ct-form textarea:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,151,90,.16);
}
/* native select chrome is the one thing here that would look like a template */
.ct-form select{
  appearance:none; -webkit-appearance:none; padding-right:2.8rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6257' stroke-width='1.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:18px 18px;
}
.ct-form select:invalid{ color:var(--ink-soft); }
/* .btn is written for links; a submit button needs the browser's own styling removed */
.ct-form button.btn{
  appearance:none; -webkit-appearance:none; cursor:pointer; margin-top:.6rem;
}
.ct-form button.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
/* honeypot: a field a person never sees and a bot fills in */
.ct-hp{ position:absolute; left:-9999px; }

/* the route that still works if the form ever does not — same treatment as artists.css */
.ct-form-aside{
  margin-top:1.6rem; font-style:italic;
  color:var(--ink-soft); font-size:var(--step--1);
}
.ct-form-aside a{
  color:inherit; text-decoration-line:underline;
  text-decoration-color:var(--gold); text-decoration-thickness:1px;
  text-underline-offset:4px;
}
.ct-form-aside a:hover{ color:var(--ink); }

/* ---------- details column ---------- */

.ct-aside{
  background:var(--ivory-deep); border-radius:18px;
  padding:clamp(1.6rem, 3vw, 2.2rem);
}
.ct-block + .ct-block{
  margin-top:1.8rem; padding-top:1.8rem;
  border-top:1px solid var(--gold-pale);
}
.ct-block h3{
  font-family:var(--sans); font-weight:300; font-size:.68rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:1rem;
}
.ct-block p{ color:var(--ink); margin-bottom:.4rem; }
.ct-block p:last-child{ margin-bottom:0; }
.ct-muted{ color:var(--ink-soft); font-size:var(--step--1); }
.ct-links{ list-style:none; margin:0; padding:0; }
.ct-links li + li{ margin-top:.6rem; }
.ct-links a,
.ct-block p a{
  color:var(--ink); text-decoration-line:underline;
  text-decoration-color:var(--gold); text-decoration-thickness:1px;
  text-underline-offset:4px;
}
.ct-links a:hover,
.ct-block p a:hover{ text-decoration-color:var(--ink); }

/* ---------- mobile ---------- */

@media (max-width:840px){
  /* the burger is fixed and floats over the dark hero and the pale sections below,
     so it carries a soft ink disc that reads on both grounds */
  .page-contact .nav-burger{
    background:rgba(46,42,37,.32); border-radius:50%;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  }
  .page-contact .nav-burger span,
  .page-contact .nav-burger span::before,
  .page-contact .nav-burger span::after{ background:var(--ivory); }
  .page-contact .nav-toggle:checked ~ .nav-burger{
    background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .page-contact .nav-toggle:checked ~ .nav-burger span,
  .page-contact .nav-toggle:checked ~ .nav-burger span::before,
  .page-contact .nav-toggle:checked ~ .nav-burger span::after{ background:var(--ink); }

  .ct-hero{ min-height:clamp(12rem, 30svh, 17rem); padding-top:7rem; }

  /* details move under the form — the form is what the page is for */
  .ct-grid{ grid-template-columns:1fr; }
}

/* the dropdown panel is an ivory card, so its links stay ink here too */
.page-contact .site-nav .sub-nav a{ color:var(--ink); }