/* Refined Performing Arts — "For Artists" page (artists.html) only.
   Loads after brand.css + site.css and adds only what this page needs.
   Shared furniture (header, footer, buttons, .eyebrow, .section-head, .clients
   marquee) comes from site.css. Colours come from brand tokens; gold is structure
   and emphasis, never status.

   Page anatomy: dark photo hero → client logo slider → sign-up form beside two
   photographs → what it is like to be a Refined artist. */

/* ---------- header over the dark hero ---------- */

/* Plain white rather than the ivory token: this type sits on a photograph, not on a
   brand ground, and it needs every bit of contrast it can get. The scrim under the
   header (see .art-hero::before) is the other half of making it legible. */
.page-artists .site-nav a{ color:#fff; }
.page-artists .site-nav a[aria-current],
.page-artists .site-nav a:hover{ border-bottom-color:var(--gold-light); }
.page-artists .head-side a{ color:#fff; }
.page-artists .head-side a:hover{ color:var(--gold-light); }

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

/* same box as .about-hero and .svc-hero so all three interior pages open at one height */
.art-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;
}
.art-hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* the hero is far wider than the photo, so only a band of it shows —
     this keeps the band on the performer's face rather than the ceiling above her */
  object-position:50% 22%; opacity:.58;
}
/* the about hero buys its contrast the same way. This photo is a dark stage rather
   than a bright studio, so it keeps more of the image and less of the veil — if the
   photo is ever swapped, re-check the type against it. */
.art-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:rgba(46,42,37,.44);
}
/* a second, darker band under the header only. The flat scrim above is tuned for the
   headline in the middle of the hero; the menu sits higher, where this photograph is
   at its brightest, and without this the white links wash out against it. */
.art-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%);
}
.art-hero-inner{ position:relative; z-index:2; max-width:56rem; }
.art-hero .eyebrow{ color:rgba(250,248,244,.8); }
.art-hero .eyebrow::before{ background:var(--gold-light); }
.art-hero h1{ font-size:var(--step-3); margin-bottom:1.1rem; }
.art-hero-sub{
  color:rgba(250,248,244,.88); font-size:calc(var(--step-0) * 1.08);
  max-width:44rem; margin:0 auto;
}

/* ---------- section rhythm ---------- */

/* Everything below the hero is one continuous ivory field — no banded backgrounds —
   so the sections do not each need a full section gap to separate them. Two stacked
   var(--section) paddings put nearly 290px of nothing between the reel and the form;
   these bring that down to about 110px and the page reads as one run instead of
   three boxes. The photographs do the separating. */
.page-artists .art-life{
  padding-top:clamp(2.75rem, 6vw, 4.5rem);
  padding-bottom:clamp(2.5rem, 5vw, 3.5rem);
}
.page-artists .art-signup{
  padding-top:clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom:clamp(3rem, 6vw, 4.5rem);
}
/* the logo slider closes the page above the footer */
.page-artists .clients{ padding-top:calc(var(--section) * .45); }

/* ---------- sign-up ---------- */

.art-signup-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4.5rem); align-items:start;
  max-width:var(--max); margin:0 auto;
}
.art-signup-copy h2{ font-size:var(--step-2); line-height:1.22; margin-bottom:.9rem; }
.art-signup-sub{
  color:var(--ink-soft); font-size:calc(var(--step-0) * 1.06);
  margin-bottom:2.2rem;
}

.art-field{ margin-bottom:1.15rem; }
.art-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;
}
.art-optional{ letter-spacing:.16em; opacity:.7; }
.art-form input,
.art-form select,
.art-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;
}
.art-form textarea{ min-height:5.5rem; resize:vertical; }
.art-form input::placeholder{ color:var(--ink-soft); opacity:.55; }
.art-form input:focus,
.art-form select:focus,
.art-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 on this page that would look like a template */
.art-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;
}
.art-form select:invalid{ color:var(--ink-soft); }
/* .btn is written for links; a submit button needs the browser's own styling removed */
.art-form button.btn{
  appearance:none; -webkit-appearance:none; cursor:pointer; margin-top:.6rem;
}
.art-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 */
.art-hp{ position:absolute; left:-9999px; }

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

/* a square over a portrait. The pair runs taller than the form, but both columns hang
   from the top: centring them pushed the form heading a couple of hundred pixels below
   the first photograph, which read as a hole between this block and the reel above it. */
.art-signup-media{
  display:grid; gap:clamp(.7rem, 1.4vw, 1.1rem); align-content:start;
}
.art-signup-media figure{ margin:0; }
.art-signup-media img{
  width:100%; object-fit:cover;
  border-radius:14px; background:var(--ivory);
}
.art-signup-media .sm-a img{ aspect-ratio:1/1; }
.art-signup-media .sm-b img{ aspect-ratio:4/5; }

/* ---------- what it is like — the show reel ---------- */

/* runs edge to edge: the section's gutter is cancelled so the pictures reach both
   sides of the screen, and the mask fades them out rather than cutting them off */
.art-reel{
  max-width:none;
  margin-inline:calc(var(--gutter) * -1);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.art-reel-track{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; width:max-content;
  animation:art-reel 60s linear infinite;
}
/* deliberately no hover pause: the reel keeps running whatever the pointer does */
/* the margin sits on every item, including the last — with a gap instead, half the
   track would be half a gap short and the loop would visibly jump */
.art-reel-track li{ margin-right:clamp(.7rem, 1.5vw, 1.1rem); }
.art-reel-track img{
  display:block; height:clamp(230px, 32vw, 400px); width:auto;
  border-radius:14px; background:var(--ivory-deep);
}
@keyframes art-reel{ to{ transform:translateX(-50%); } }

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

@media (max-width:840px){
  /* burger over the dark hero is ivory; back to ink once the ivory overlay opens.
     The burger is fixed and floats over ivory sections too, so it carries a soft
     ink disc that reads on both grounds — same treatment as the services page. */
  .page-artists .nav-burger{
    background:rgba(46,42,37,.32); border-radius:50%;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  }
  .page-artists .nav-burger span,
  .page-artists .nav-burger span::before,
  .page-artists .nav-burger span::after{ background:#fff; }
  .page-artists .nav-toggle:checked ~ .nav-burger{
    background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .page-artists .nav-toggle:checked ~ .nav-burger span,
  .page-artists .nav-toggle:checked ~ .nav-burger span::before,
  .page-artists .nav-toggle:checked ~ .nav-burger span::after{ background:var(--ink); }

  /* 8.5rem, not the 7rem the sibling heroes use: the logo is ~117px tall from the top
     edge on a phone, and at 7rem the centred eyebrow runs straight into its strapline.
     The box below it is unchanged, so the hero still opens at the same height. */
  .art-hero{ min-height:clamp(12rem, 30svh, 17rem); padding-top:8.5rem; }

  .art-signup-grid{ grid-template-columns:1fr; }
  /* full width now, so the first photograph goes back to a portrait shape —
     a square that wide would eat the screen before the form is even reached */
  .art-signup-media{ max-width:34rem; }
  .art-signup-media .sm-a img{ aspect-ratio:4/5; }

}

/* ---------- reduced motion ---------- */

/* the logo marquee's fallback lives in site.css; the show reel needs its own.
   With the animation off it becomes a plain centred grid of the eleven pictures,
   and the repeated half is dropped so nothing shows twice. */
@media (prefers-reduced-motion: reduce){
  .art-reel{
    margin-inline:0;
    -webkit-mask-image:none; mask-image:none;
  }
  .art-reel-track{
    animation:none; width:auto;
    flex-wrap:wrap; justify-content:center;
  }
  .art-reel-track li{ margin:0 .5rem .8rem 0; }
  .art-reel-track li[aria-hidden]{ display:none; }
  .art-reel-track img{ height:clamp(180px, 26vw, 260px); }
}

/* file input: the browser's default control ignores the form's type styling,
   so it gets the same ivory-deep field with a gold-pale "choose" button */
.art-form input[type="file"]{
  padding:.7rem .9rem; cursor:pointer;
  font-family:var(--sans); font-size:.78rem; color:var(--ink-soft);
}
.art-form input[type="file"]::file-selector-button{
  font-family:var(--sans); font-weight:400; font-size:.66rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); background:var(--gold-pale);
  border:0; border-radius:999px; padding:.6em 1.2em; margin-right:.9rem;
  cursor:pointer;
}
.art-form input[type="file"]::file-selector-button:hover{ background:var(--gold-light); }
.art-hint{
  font-family:var(--sans); font-weight:300; font-size:.68rem;
  color:var(--ink-soft); margin-top:.4rem;
}

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