:root{
    --cream:#FFF8F0;
    --cream-deep:#FBEDD9;
    --ink:#3A2E26;
    --glow:#E8A85C;
    --terracotta:#C75D3F;
    --mocha:#8A6F5E;
    --glow-light:#F4D9A8;
    --max-w:480px;
  }

  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
  body{
    font-family:'Karla',sans-serif;
    background:var(--cream);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    width:100%;
  }
  img{max-width:100%;display:block;}

  @media (prefers-reduced-motion:reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- TYPOGRAPHY ---------- */
  h1,h2,h3{
    font-family:'Fraunces',serif;
    font-weight:600;
    line-height:1.1;
    letter-spacing:-0.01em;
  }
  .eyebrow{
    font-family:'Karla',sans-serif;
    font-size:0.78rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--terracotta);
    font-weight:700;
  }

  /* ---------- LAYOUT WRAPPER ---------- */
  .wrap{
    max-width:var(--max-w);
    margin:0 auto;
    padding:0 22px;
  }

  /* ---------- TOP NAV ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    background:transparent;
    backdrop-filter:blur(0px);
    padding:42px 0;
    transition:background 0.45s ease, padding 0.45s ease, backdrop-filter 0.45s ease;
  }
  header.scrolled{
    background:linear-gradient(to bottom, rgba(255,248,240,0.92), rgba(255,248,240,0));
    backdrop-filter:blur(6px);
    padding:16px 0;
  }
  header .wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    min-height:40px;
  }
  header.scrolled .wrap{
    justify-content:space-between;
  }
  .logo{
    max-width:260px;
    transition:max-width 0.45s cubic-bezier(.4,0,.2,1);
  }
  header.scrolled .logo{
    max-width:200px;
  }
  .logo span{color:var(--glow);}
  .nav-cta{
    position:absolute;
    right:22px;
    top:50%;
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--cream);
    background:var(--terracotta);
    padding:9px 16px;
    border-radius:100px;
    text-decoration:none;
    box-shadow:0 0 16px rgba(199,93,63,0.3);
    opacity:0;
    transform:translateY(calc(-50% - 6px));
    pointer-events:none;
    transition:opacity 0.35s ease, transform 0.35s ease;
  }
  header.scrolled .nav-cta{
    position:static;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    width:100%;
    max-width:100vw;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-bottom:0;
    overflow:hidden;
    isolation:isolate;
  }
  .hero-glow{
    position:absolute;
    inset:0;
    z-index:-2;
    background:
      radial-gradient(85% 70% at 50% 42%, rgba(232,168,92,0.75) 0%, rgba(199,93,63,0.32) 42%, rgba(255,248,240,0) 78%),
      radial-gradient(140% 100% at 50% 100%, var(--cream-deep) 0%, var(--cream) 60%);
    animation:breathe 7s ease-in-out infinite;
  }
  @keyframes breathe{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:0.85; transform:scale(1.04); }
  }
  .hero-noise{
    position:absolute;
    inset:0;
    z-index:-1;
    background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.05"/%3E%3C/svg%3E');
    mix-blend-mode:multiply;
    opacity:0.3;
    pointer-events:none;
  }
  .hero-content{
    position:relative;
    z-index:1;
    padding-top:120px;
  }
  .hero h1{
    font-size:clamp(2.6rem, 11vw, 3.4rem);
    color:var(--ink);
    margin:14px 0 18px;
  }
  .hero h1 em{
    font-style:italic;
    color:var(--terracotta);
    font-weight:500;
  }
  .hero p{
    font-size:1.05rem;
    line-height:1.6;
    color:rgba(58,46,38,0.78);
    max-width:34ch;
    margin-bottom:30px;
  }
  .hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }
  .btn{
    font-family:'Karla',sans-serif;
    font-size:0.92rem;
    font-weight:700;
    letter-spacing:0.03em;
    padding:15px 26px;
    border-radius:100px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .btn:active{ transform:scale(0.97); }
  .btn-primary{
    background:var(--terracotta);
    color:var(--cream);
    box-shadow:0 0 24px rgba(199,93,63,0.35);
  }
  .btn-ghost{
    background:transparent;
    border:1px solid rgba(58,46,38,0.2);
    color:var(--ink);
  }

  .scroll-hint{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    width:1px;
    height:38px;
    background:linear-gradient(to bottom, transparent, rgba(199,93,63,0.6));
    animation:scrolldown 2s ease-in-out infinite;
  }
  @keyframes scrolldown{
    0%{ opacity:0; transform:translate(-50%,-10px); }
    50%{ opacity:1; }
    100%{ opacity:0; transform:translate(-50%,10px); }
  }

  /* ---------- SECTION GENERIC ---------- */
  section{
    padding:64px 0;
    position:relative;
  }
  .section-head{
    margin-bottom:28px;
  }
  .section-head h2{
    font-size:clamp(1.8rem, 8vw, 2.3rem);
    margin-top:8px;
    color:var(--ink);
  }
  .section-head p{
    color:rgba(58,46,38,0.65);
    margin-top:10px;
    line-height:1.6;
    max-width:34ch;
  }

  /* ---------- ABOUT / QUOTE ---------- */
  .about{
    background:var(--cream-deep);
  }
  .about p.lead{
    font-size:1.1rem;
    line-height:1.7;
    color:var(--ink);
    margin-bottom:24px;
  }
  .quote{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:1.2rem;
    line-height:1.6;
    color:var(--terracotta);
    border-left:2px solid var(--glow);
    padding-left:18px;
  }
  .quote cite{
    display:block;
    margin-top:10px;
    font-family:'Karla',sans-serif;
    font-style:normal;
    font-size:0.78rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(58,46,38,0.5);
  }

  /* ---------- INFO CARDS (hours / location) ---------- */
  .info{
    background:var(--cream);
  }
  .info-grid{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .info-card{
    background:var(--cream-deep);
    border:1px solid rgba(58,46,38,0.06);
    border-radius:16px;
    padding:20px;
    display:flex;
    gap:16px;
    align-items:flex-start;
    transition:border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .info-card:active{
    border-color:rgba(199,93,63,0.4);
    box-shadow:0 0 24px rgba(232,168,92,0.15);
  }
  .info-icon{
    flex:0 0 auto;
    width:42px; height:42px;
    border-radius:12px;
    background:rgba(232,168,92,0.2);
    display:flex; align-items:center; justify-content:center;
    color:var(--terracotta);
  }
  .info-card h3{
    font-size:1.05rem;
    font-family:'Karla',sans-serif;
    font-weight:700;
    color:var(--ink);
    margin-bottom:4px;
  }
  .info-card p, .info-card a{
    font-size:0.92rem;
    line-height:1.6;
    color:rgba(58,46,38,0.7);
    text-decoration:none;
  }
  .info-card a{ color:var(--terracotta); }

  /* ---------- GALLERY ---------- */
  .gallery{
    background:var(--cream-deep);
  }
  .gallery-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    grid-template-rows:140px 140px;
    gap:8px;
  }
  .gallery-grid div{
    border-radius:14px;
    overflow:hidden;
    position:relative;
  }
  .gallery-grid div:first-child{
    grid-row:span 2;
  }
  .gallery-grid img{
    width:100%; height:100%;
    object-fit:cover;
  }
  .gallery-grid div::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(58,46,38,0.18), transparent 50%);
  }

  /* ---------- JOBS ---------- */
  .jobs{
    background:var(--cream);
  }
  .jobs-card{
    background:linear-gradient(135deg, var(--glow-light), var(--cream-deep));
    border-radius:20px;
    padding:28px 24px;
    border:1px solid rgba(232,168,92,0.3);
  }
  .jobs-card h2{
    font-size:clamp(1.7rem,7vw,2.1rem);
    color:var(--ink);
    margin-top:8px;
    margin-bottom:14px;
  }
  .jobs-card p{
    color:rgba(58,46,38,0.75);
    line-height:1.65;
    margin-bottom:16px;
  }
  .jobs-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:18px 0 22px;
  }
  .jobs-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:0.95rem;
    color:var(--ink);
    line-height:1.5;
  }
  .jobs-list svg{
    flex:0 0 auto;
    margin-top:3px;
    color:var(--terracotta);
  }
  .jobs-card .btn-primary{
    width:100%;
    justify-content:center;
  }

  /* ---------- CLUB CALLOUT ---------- */
  .club{
    background:linear-gradient(135deg, var(--cream-deep), var(--cream));
    border-top:1px solid rgba(58,46,38,0.06);
    border-bottom:1px solid rgba(58,46,38,0.06);
  }
  .club-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .club-card .eyebrow{ margin-bottom:6px; }
  .club-card h2{
    font-size:1.5rem;
    color:var(--ink);
  }
  .club-card p{
    color:rgba(58,46,38,0.6);
    font-size:0.9rem;
    margin-top:6px;
  }
  .club-arrow{
    flex:0 0 auto;
    width:46px; height:46px;
    border-radius:50%;
    border:1px solid rgba(199,93,63,0.35);
    display:flex; align-items:center; justify-content:center;
    color:var(--terracotta);
  }

  /* ---------- FOOTER / CTA ---------- */
  footer{
    padding:60px 0 40px;
    text-align:center;
    background:var(--cream);
    position:relative;
    overflow:hidden;
  }
  .footer-glow{
    position:absolute;
    inset:0;
    background:radial-gradient(60% 60% at 50% 100%, rgba(232,168,92,0.35), transparent 70%);
    pointer-events:none;
  }
  footer h2{
    font-size:clamp(1.9rem,9vw,2.4rem);
    color:var(--ink);
    margin-bottom:14px;
    position:relative;
    z-index:1;
  }
  footer p{
    color:rgba(58,46,38,0.6);
    margin-bottom:26px;
    position:relative;
    z-index:1;
  }
  .footer-socials{
    display:flex;
    justify-content:center;
    gap:18px;
    margin:32px 0 18px;
    position:relative;
    z-index:1;
  }
  .footer-socials a{
    color:var(--ink);
    opacity:0.6;
    transition:opacity 0.2s, color 0.2s;
  }
  .footer-socials a:active{ opacity:1; color:var(--terracotta); }
  .footer-meta{
    font-size:0.78rem;
    color:rgba(58,46,38,0.4);
    position:relative;
    z-index:1;
  }
  .footer-meta a{ color:rgba(58,46,38,0.5); text-decoration:underline; }

  /* ---------- REVEAL ANIMATION ---------- */
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.visible{
    opacity:1;
    transform:translateY(0);
  }

  /* ---------- Larger screens ---------- */
  @media (min-width:600px){
    :root{ --max-w:680px; }
    .gallery-grid{ grid-template-rows:180px 180px; }
    
  }
  @media (max-width:600px){
    .logo{ max-width:46vw; }
    header.scrolled .logo{ max-width:30vw; }
  }
  @media (min-width:900px){
    :root{ --max-w:900px; }
    .hero p{ max-width:46ch; }
    .info-grid{ flex-direction:row; }
    .info-card{ flex:1; }
    .gallery-grid{ grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:200px 200px; }
  }

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--terracotta);
    outline-offset:3px;
  }