/* ============================================================
   KADUL with Ryka Ali — troubie.com.au
   Palette sampled from the photographs, not from a template:
   red from the lap-lap, teal + cream from the WYKIM banner.
   ============================================================ */

:root{
  --ink:      #14100D;   /* warm near-black ground              */
  --ink-2:    #1E1813;   /* raised panels                       */
  --ink-3:    #2A231C;   /* hairlines on dark                   */
  --paper:    #F0DDC5;   /* WYKIM cream — text blocks only      */
  --teal:     #0A3C41;   /* WYKIM structural                    */
  --red:      #B4141F;   /* accent. Links + buttons ONLY.       */
  --red-lift: #D6323C;
  --bone:     #EDE7DD;   /* body text on dark                   */
  --sand:     #B69C79;   /* secondary text on dark              */

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body:    "Public Sans", system-ui, -apple-system, sans-serif;

  --gut: clamp(1.25rem, 4vw, 4rem);
  --max: 74rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none!important; transition:none!important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font:400 clamp(1rem,.96rem + .2vw,1.0625rem)/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:var(--red-lift); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--red-lift); outline-offset:3px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--red); color:#fff; padding:.6rem 1rem;
}
.skip:focus{ left:0; }

/* ---------- type ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:800; line-height:1.02; margin:0; }

.eyebrow{
  font:600 .7rem/1 var(--body);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--sand); margin:0 0 1rem;
}
.eyebrow::before{
  content:""; display:inline-block;
  width:1.6rem; height:2px; background:var(--red);
  vertical-align:.28em; margin-right:.7rem;
}
.h-lead{ font-size:clamp(2.1rem,5.5vw,3.6rem); letter-spacing:-.02em; margin-bottom:1.5rem; }
.intro{ max-width:52ch; color:var(--sand); font-size:1.08rem; }

/* ---------- top bar ---------- */
.bar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem var(--gut);
  background:rgba(20,16,13,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-3);
}
.bar__brand{
  display:flex; align-items:center; gap:.6rem;
  color:var(--bone); text-decoration:none;
  font:800 .95rem/1 var(--display); letter-spacing:.03em; text-transform:uppercase;
}
.bar__brand em{ font-style:normal; font-weight:400; color:var(--sand); }
.bar__nav{ display:flex; align-items:center; gap:clamp(.8rem,2vw,1.7rem); }
.bar__nav a{
  color:var(--bone); text-decoration:none;
  font-size:.9rem; padding-bottom:2px; border-bottom:1px solid transparent;
}
.bar__nav a:hover{ border-bottom-color:var(--red); }
@media (max-width:600px){
  .bar__nav a:not(.btn){ display:none; }
  .bar__brand{ font-size:.82rem; }
  .bar__brand em{ display:none; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--red); color:#fff;
  padding:.85rem 1.5rem; border:1px solid var(--red); border-radius:2px;
  font:600 .92rem/1 var(--body); letter-spacing:.02em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .15s ease;
}
.btn:hover{ background:var(--red-lift); border-color:var(--red-lift); }
.btn--ghost{ background:transparent; color:var(--bone); border-color:var(--ink-3); }
.btn--ghost:hover{ background:transparent; border-color:var(--sand); }
.btn--sm{ padding:.5rem .95rem; font-size:.82rem; }

/* ---------- hero (the signature: full-height portrait + dark type column) ---------- */
.hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  min-height:calc(100svh - 56px);
}
.hero__pic{ position:relative; overflow:hidden; background:var(--ink-2); }
.hero__pic img{
  width:100%; height:100%; object-fit:cover; object-position:50% 40%;
}
.hero__say{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.5rem,6vw,5rem) var(--gut);
  border-left:1px solid var(--ink-3);
}
.hero h1{
  font-size:clamp(3.4rem,10vw,7rem);
  letter-spacing:-.045em; margin:0 0 1.4rem;
}
.hero h1 span{
  display:block; margin-top:.5rem;
  font-size:clamp(1rem,2.2vw,1.5rem); font-weight:400;
  letter-spacing:.02em; color:var(--sand);
}
.lede{ max-width:44ch; font-size:clamp(1.05rem,1.6vw,1.22rem); margin:0 0 2.2rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin:0; }

@media (max-width:820px){
  .hero{ grid-template-columns:1fr; min-height:0; }
  .hero__pic{ aspect-ratio:3/4; max-height:70svh; }
  .hero__say{ border-left:0; border-top:1px solid var(--ink-3); }
}

/* ---------- acknowledgement ---------- */
.ack{ background:var(--teal); padding:1.8rem var(--gut); }
.ack p{
  max-width:var(--max); margin:0 auto;
  font-size:.97rem; line-height:1.6; color:#DCE9E6;
}
.ack strong{ color:#fff; }

/* ---------- split section ---------- */
.split{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:stretch; }
.split__pic{ overflow:hidden; background:var(--ink-2); }
.split__pic img{ width:100%; height:100%; object-fit:cover; min-height:24rem; }
.split__say{ padding:clamp(2.5rem,6vw,5rem) var(--gut); align-self:center; max-width:60ch; }
.split__say h2{ font-size:clamp(2rem,4.5vw,3rem); letter-spacing:-.02em; margin-bottom:1.3rem; }
.split__say p + p{ margin-top:1.1rem; }
@media (max-width:820px){
  .split{ grid-template-columns:1fr; }
  .split__pic img{ aspect-ratio:4/3; min-height:0; }
}

/* ---------- full-bleed bands ---------- */
.band{ margin:0; }
.band img{ width:100%; aspect-ratio:2/1; object-fit:cover; }
@media (max-width:640px){ .band img{ aspect-ratio:16/10; } }

/* ---------- generic wrap ---------- */
.wrap{ max-width:var(--max); margin:0 auto; padding:clamp(3.5rem,9vw,6.5rem) var(--gut); }
.wrap.narrow{ max-width:56rem; }
.wrap.narrow p{ max-width:64ch; }
.wrap.narrow p + p{ margin-top:1.1rem; }

/* ---------- program cards ---------- */
.cards{
  display:grid; gap:1px; margin-top:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(26rem,100%),1fr));
  background:var(--ink-3); border:1px solid var(--ink-3);
}
.card{ background:var(--ink); padding:clamp(1.6rem,3vw,2.2rem);
       display:flex; flex-direction:column; }
.card h3{
  font-size:1.4rem; letter-spacing:-.01em; margin-bottom:.9rem;
  padding-bottom:.9rem; border-bottom:2px solid var(--red);
  display:inline-block;
}
.card > p{ margin:0; color:var(--bone); }
.card dl{ margin:1.5rem 0 0; /* bottom-align across the row */
         margin-top:auto; padding-top:1rem; border-top:1px solid var(--ink-3); }
.card dl div{ display:flex; gap:1rem; padding:.35rem 0; font-size:.9rem; }
.card dt{ flex:0 0 7.5rem; color:var(--sand); }
.card dd{ margin:0; }
.card__dl{ margin:1.4rem 0 0; font-size:.9rem; }

/* ---------- safety alert ---------- */
.alert{
  margin-top:2.5rem; padding:1.6rem 1.8rem;
  background:var(--ink-2); border-left:4px solid var(--red);
}
.alert h3{ font-size:1.05rem; margin-bottom:.6rem; }
.alert p{ margin:0; font-size:.96rem; color:var(--bone); }

/* ---------- quotes ---------- */
.quotes{
  display:grid; gap:2rem 3rem; margin-top:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(24rem,100%),1fr));
}
blockquote{ margin:0; padding-left:1.4rem; border-left:1px solid var(--ink-3); }
blockquote p{ margin:0 0 .8rem; font-size:1.05rem; font-style:italic; color:var(--paper); }
blockquote p::before{ content:"\201C"; }
blockquote p::after{ content:"\201D"; }
cite{
  font-style:normal; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sand);
}

/* ---------- gallery ---------- */
.grid{
  display:grid; gap:.6rem; margin-top:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));
}
.grid img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  filter:saturate(.94); transition:filter .2s ease, transform .2s ease;
}
.grid img:hover{ filter:saturate(1.06); transform:scale(1.014); }
.credit{ margin-top:1.5rem; font-size:.82rem; color:var(--sand); }

/* ---------- booking ---------- */
.book{ background:var(--teal); }
.book__inner{
  max-width:var(--max); margin:0 auto;
  padding:clamp(3.5rem,8vw,6rem) var(--gut);
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));
}
.book h2{ font-size:clamp(1.9rem,4vw,2.7rem); letter-spacing:-.02em; margin-bottom:1.1rem; color:#fff; }
.book__say p{ color:#CFE1DE; max-width:42ch; }
.book__say .eyebrow{ color:#8FB3AE; }
.book__direct{ list-style:none; margin:1.8rem 0 0; padding:0; }
.book__direct li{ padding:.45rem 0; font-size:1.08rem; }
.book__direct a{ color:#fff; text-decoration:underline; text-underline-offset:4px; }
.book__direct span{ color:#8FB3AE; font-size:.9rem; }

.book__form{ display:flex; flex-direction:column; gap:.35rem; }
.book__form label{
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  color:#8FB3AE; margin-top:.9rem;
}
.book__form input, .book__form textarea{
  font:400 1rem/1.5 var(--body);
  padding:.7rem .8rem; border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.18); color:#fff; border-radius:2px;
}
.book__form input:focus, .book__form textarea:focus{ border-color:#fff; }
.book__form .btn{ margin-top:1.6rem; align-self:flex-start; }

.book__how{ align-self:center; }
.book__how h3{ font-size:1.15rem; color:#fff; margin-bottom:1rem; }
.book__how ul{ margin:0 0 2rem; padding:0; list-style:none; }
.book__how li{
  padding:.55rem 0 .55rem 1.5rem; position:relative;
  color:#CFE1DE; border-bottom:1px solid rgba(255,255,255,.12);
}
.book__how li::before{
  content:""; position:absolute; left:0; top:1.05rem;
  width:.6rem; height:2px; background:var(--red-lift);
}
.book__note{ margin:1.2rem 0 0; font-size:.86rem; color:#8FB3AE; max-width:36ch; }
.book__note a{ color:#CFE1DE; }

/* ---------- footer ---------- */
.foot{ background:var(--ink-2); padding:clamp(3rem,6vw,4.5rem) var(--gut) 2rem; }
.foot__inner{
  max-width:var(--max); margin:0 auto;
  display:grid; gap:2.5rem; align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));
}
.foot__banner{ width:100%; max-width:26rem; border-radius:2px; }
.foot__meta p{ margin:0 0 .4rem; font-size:.94rem; color:var(--sand); }
.foot__meta a{ color:var(--bone); }
.foot__troubie{ width:9rem; margin-top:1.4rem; }
.foot__legal{
  max-width:var(--max); margin:3rem auto 0; padding-top:1.5rem;
  border-top:1px solid var(--ink-3);
  font-size:.8rem; color:var(--sand);
}

/* ---------- association lockup ---------- */
.assoc{
  margin:-.6rem 0 2rem; font-size:.9rem; color:var(--sand);
  letter-spacing:.04em;
}
.assoc span{
  font-style:italic; color:#7A6A55; padding:0 .3rem;
}
.foot__assoc{
  font-size:.72rem!important; letter-spacing:.16em; text-transform:uppercase;
  color:#7A6A55!important; margin-bottom:.7rem!important;
}
.foot__troubie{ margin:0 0 1.3rem; }

/* anchor targets clear the sticky header even if its height changes */
section[id]{ scroll-margin-top:5rem; }