/* =====================================================================
   FOLLOW YOUR ART — public site
   Palette and typography lifted from the original (cached) design.
   Dusty mauve canvas, deep aubergine text, vibrant red accent, with
   inverted dark blocks for Long Pose Day and Kinky Drawers.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Rubik:wght@300;400;500&family=Sacramento&display=swap');

:root {
  --bg:          #e5d9dd;        /* dusty mauve canvas */
  --bg-2:        #efe7ea;        /* a hair lighter, for alt strips */
  --ink:         #343048;        /* deep aubergine — body text & dark blocks */
  --ink-2:       #4f4a68;        /* muted purple — secondary text */
  --ink-soft:    #6f6a87;
  --red:         #fc1b08;        /* the brand accent */
  --red-d:       #cc1606;
  --darker:      #211e2e;        /* Kinky Drawers block */
  --white:       #ffffff;
  --rule:        rgba(52, 48, 72, 0.18);

  --display:     'Sacramento', 'Brush Script MT', cursive;
  --heading:     'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --body:        'Rubik', 'Helvetica Neue', Arial, sans-serif;

  --max:         1100px;
  --reader:      720px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
a:hover { color: var(--red-d); border-bottom-color: var(--red-d); }

::selection { background: var(--red); color: var(--white); }

img { max-width: 100%; height: auto; display: block; }

/* =====================================================================
   TOP STRIP — minimal nav
   ===================================================================== */
.strip {
  padding: 1rem clamp(1.2rem, 3vw, 2rem);
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  background: var(--bg);
}
.strip .wordmark {
  color: var(--ink);
  font-weight: 500;
  border: 0;
}
.strip .wordmark:hover { color: var(--red); }
.strip nav { display: flex; gap: clamp(0.8rem, 2vw, 1.8rem); flex-wrap: wrap; }
.strip nav a {
  color: var(--ink);
  border: 0;
  position: relative;
  padding-bottom: 2px;
}
.strip nav a:hover { color: var(--red); }
.strip nav a[aria-current="page"] { color: var(--red); }

/* =====================================================================
   HERO — cursive Follow Your Art over stacked red programme names
   ===================================================================== */
.hero {
  background: var(--bg);
  text-align: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.2rem, 3vw, 2rem) clamp(2.5rem, 6vw, 5rem);
  position: relative;
}
.hero .programme-stack {
  font-family: var(--heading);
  font-weight: 700;
  color: var(--red);
  font-size: clamp(1.6rem, 5.5vw, 4.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.hero .programme-stack span { display: block; }
.hero .hero-title {
  font-family: var(--display);
  color: var(--white);
  font-weight: 400;
  font-size: clamp(4rem, 13vw, 10rem);
  line-height: 0.85;
  text-shadow: 0 6px 18px rgba(107, 83, 106, 0.35);
}
.hero .hero-title .line { display: block; }
.hero .hero-title .line + .line { margin-top: -0.05em; }

/* =====================================================================
   PROGRAMME SECTIONS — alternating tones
   ===================================================================== */
.programme {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.2rem, 4vw, 2rem);
  text-align: center;
}
.programme .inner {
  max-width: var(--reader);
  margin: 0 auto;
}

.programme.tone-light  { background: var(--bg); color: var(--ink); }
.programme.tone-default{ background: var(--bg); color: var(--ink); }
.programme.tone-dark   { background: var(--ink); color: var(--white); }
.programme.tone-darker { background: var(--darker); color: var(--white); }

.programme h2 {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin-bottom: 0.6rem;
  color: var(--red);
}

.programme .kicker {
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 1.2rem;
}
.programme.tone-dark .kicker,
.programme.tone-darker .kicker { color: rgba(255,255,255,0.7); }

.programme .subhead {
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  margin: 0 auto 1.5rem;
  max-width: 50ch;
}

.programme .prose {
  font-family: var(--body);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 1.4rem auto 0;
  max-width: 56ch;
  text-align: center;
}
.programme .prose p { margin-bottom: 1.1rem; }
.programme .prose strong { font-weight: 500; color: inherit; }
.programme .prose em { font-style: italic; opacity: 0.85; }
.programme .prose ul,
.programme .prose ol {
  list-style: none;
  margin: 1rem auto;
  padding: 0;
  max-width: 40ch;
  text-align: center;
}
.programme .prose ul li { padding: 0.2rem 0; }
.programme .prose blockquote {
  font-style: italic;
  border-left: 2px solid var(--red);
  padding: 0.4rem 0 0.4rem 1rem;
  margin: 1.4rem auto;
  max-width: 44ch;
  text-align: left;
}

.programme .figure {
  margin: 2rem auto 0;
  max-width: 760px;
}
.programme .figure img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 18px 40px -20px rgba(33, 30, 46, 0.35);
}

/* =====================================================================
   PARTICULARS — opt-in mini data table
   ===================================================================== */
.particulars {
  margin: 1.8rem auto 0;
  max-width: 480px;
  text-align: left;
  font-family: var(--body);
}
.particulars h3 {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.8rem;
  text-align: center;
}
.particulars dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.2rem;
  row-gap: 0.55rem;
  font-size: 0.92rem;
}
.particulars dt {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  font-weight: 500;
}
.programme.tone-dark .particulars dt,
.programme.tone-darker .particulars dt { color: rgba(255,255,255,0.7); }
.particulars dd { color: inherit; }
.particulars dd em { font-style: italic; opacity: 0.85; }

/* =====================================================================
   ABOUT — centered editorial block on light bg
   ===================================================================== */
.about-block { padding-block: clamp(2.5rem, 5vw, 4rem); }
.about-block .prose { text-align: center; max-width: 60ch; }

/* =====================================================================
   CONTACT FORM — minimal, on light bg
   ===================================================================== */
.contact-block {
  background: var(--bg);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.2rem, 4vw, 2rem);
  text-align: center;
}
.contact-block .inner {
  max-width: 540px;
  margin: 0 auto;
}
.contact-block h2 {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--red);
  margin-bottom: 0.6rem;
}
.contact-block .kicker {
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.contact-block .subhead {
  font-family: var(--body);
  font-weight: 300;
  font-size: 1.05rem;
  margin-bottom: 2rem;
}

.contact-form { text-align: left; }
.contact-form label {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 1rem 0 0.35rem;
}
.contact-form .req { color: var(--red); margin-left: 0.2rem; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.8rem 0.9rem;
  font: inherit;
  font-family: var(--body);
  font-weight: 300;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(252, 27, 8, 0.12);
}

.contact-form .hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  margin-top: 1.6rem;
  transition: background .15s, transform .1s;
}
.btn:hover { background: var(--red-d); color: var(--white); }
.btn:active { transform: translateY(1px); }

.flash {
  font-family: var(--body);
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  border-radius: 2px;
  margin-bottom: 1.2rem;
  border: 1px solid currentColor;
}
.flash.ok    { color: #2e6f3a; background: rgba(46, 111, 58, 0.08); }
.flash.error { color: var(--red-d); background: rgba(252, 27, 8, 0.07); }

/* =====================================================================
   FOOTER — Connect with us · logo · nav · copyright
   ===================================================================== */
.foot {
  background: var(--bg);
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem 1.5rem;
  text-align: center;
}
.foot h3 {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--red);
  margin-bottom: 1.5rem;
}
.foot .logo {
  margin: 0 auto 1.8rem;
  max-width: 240px;
}
.foot nav {
  display: flex;
  gap: clamp(0.8rem, 2.5vw, 2rem);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.foot nav a {
  color: var(--ink-2);
  border: 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.foot nav a:hover { color: var(--red); }
.foot .copyright {
  font-family: var(--body);
  font-size: 0.75rem;
  color: rgba(52, 48, 72, 0.55);
  letter-spacing: 0.04em;
}

/* =====================================================================
   STAGGERED PAGE-LOAD ANIMATION
   ===================================================================== */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.rise { animation: rise 0.75s cubic-bezier(0.18, 0.7, 0.2, 1) both; }
.r-1  { animation-delay: 0.05s; }
.r-2  { animation-delay: 0.15s; }
.r-3  { animation-delay: 0.25s; }
.r-4  { animation-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   RESPONSIVE NUDGES
   ===================================================================== */
@media (max-width: 640px) {
  .hero .hero-title { font-size: clamp(3.5rem, 18vw, 7rem); }
  .strip { gap: 0.5rem 1rem; padding: 0.8rem 1rem; }
}