/* ============================================================
   LOTUS ENERGY — Association Loi 1901
   Design system: "atelier" — laser-engraved plaques, wood grain,
   craft-market warmth. See notes at bottom of file.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bark:       #2B241C;
  --bark-soft:  #4A4030;
  --linen:      #EFE4CB;
  --linen-2:    #E5D8B8;
  --paper-dark: #1D1811;
  --walnut:     #6B4426;
  --walnut-dk:  #4A2E19;
  --sage:       #707C58;
  --sage-dk:    #545E42;
  --ochre:      #B5762D;
  --line:       #CDBB8E;
  --line-dark:  #3A3021;
  --cream:      #FAF6EA;
  --white:      #FFFFFF;

  --serif: 'Bitter', Georgia, serif;
  --sans: 'Work Sans', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --radius: 3px;
  --shadow-plaque: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -2px 3px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.15);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--cream);
  color:var(--bark);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 5vw;
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ochre);
  display:inline-block;
  margin-bottom:0.9rem;
}

/* ---------- engraved plaque (signature element) ---------- */
/* Used for headings & nameplates: raised wood plaque with an
   engraved (inset) letter treatment, referencing the
   association's laser-engraving craft activity. */
.plaque{
  display:inline-block;
  background:linear-gradient(180deg, #8A5A34, var(--walnut) 55%, var(--walnut-dk));
  color:var(--linen);
  padding:0.55em 1em;
  border-radius:var(--radius);
  box-shadow:var(--shadow-plaque);
  font-family:var(--serif);
  font-weight:600;
}

h1, h2, h3{
  font-family:var(--serif);
  font-weight:600;
  color:var(--bark);
  line-height:1.15;
}
h1{ font-size:clamp(2.2rem, 5vw, 3.6rem); }
h2{ font-size:clamp(1.6rem, 3.4vw, 2.3rem); }
h3{ font-size:1.15rem; }

p{ color:var(--bark-soft); max-width:60ch; }

.lede{
  font-size:1.1rem;
  color:var(--bark-soft);
}

/* ---------- header / nav ---------- */
header.site{
  position:sticky;
  top:0;
  z-index:500;
  background:var(--cream);
  border-bottom:2px solid var(--bark);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 5vw;
  gap:1.5rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:0.7rem;
  font-family:var(--serif);
  font-weight:700;
  font-size:1.25rem;
  color:var(--bark);
  white-space:nowrap;
}
.brand .mark{
  width:34px; height:34px;
  flex:none;
}
nav.primary{ display:flex; }
nav.primary ul{
  list-style:none;
  display:flex;
  gap:0.4rem;
}
nav.primary > ul > li{ position:relative; }
nav.primary a{
  display:block;
  text-decoration:none;
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--bark);
  padding:0.6rem 0.85rem;
  border-radius:var(--radius);
  transition:background .2s ease, color .2s ease;
}
nav.primary > ul > li > a::after{ content:""; }
nav.primary a:hover, nav.primary a:focus-visible{
  background:var(--walnut);
  color:var(--linen);
}
nav.primary .submenu{
  list-style:none;
  position:absolute;
  top:100%; left:0;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  min-width:220px;
  box-shadow:0 10px 24px rgba(43,36,28,0.14);
  padding:0.4rem;
  display:none;
  z-index:50;
}
nav.primary li:hover > .submenu,
nav.primary li:focus-within > .submenu{ display:block; }
nav.primary .submenu a{
  color:var(--bark-soft);
  text-transform:none;
  font-weight:500;
  font-size:0.88rem;
  letter-spacing:0;
  padding:0.55rem 0.7rem;
}
nav.primary .submenu a:hover{ background:var(--linen); color:var(--bark); }

.cta-btn{
  font-family:var(--mono);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  background:var(--sage);
  color:var(--cream);
  padding:0.65rem 1.1rem;
  border-radius:var(--radius);
  text-decoration:none;
  white-space:nowrap;
  transition:background .2s ease;
  border:none;
  cursor:pointer;
}
.cta-btn:hover{ background:var(--sage-dk); }
.cta-btn.walnut{ background:var(--walnut); }
.cta-btn.walnut:hover{ background:var(--walnut-dk); }

.menu-toggle{
  display:none;
  background:none;
  border:2px solid var(--bark);
  border-radius:var(--radius);
  width:42px; height:38px;
  cursor:pointer;
  flex:none;
  position:relative;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:"";
  position:absolute;
  left:9px; right:9px;
  height:2px;
  background:var(--bark);
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle span{ top:18px; }
.menu-toggle span::before{ top:-7px; }
.menu-toggle span::after{ top:7px; }
.menu-toggle[aria-expanded="true"] span{ background:transparent; }
.menu-toggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

/* ---------- kerf divider (laser-cut edge, signature motif) ---------- */
.kerf{
  height:14px;
  width:100%;
  background:
    linear-gradient(135deg, var(--cream) 50%, transparent 50%) 0 0/14px 14px repeat-x,
    linear-gradient(-135deg, var(--cream) 50%, transparent 50%) 0 0/14px 14px repeat-x;
  background-color:var(--bark);
}
.kerf.flip{ transform:scaleY(-1); }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:flex-end;
  background:var(--paper-dark);
  overflow:hidden;
}
.hero-img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center 25%;
}
.hero-img::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(29,24,17,0.35) 0%, rgba(29,24,17,0.55) 60%, rgba(29,24,17,0.95) 100%);
}
.hero-body{
  position:relative;
  z-index:2;
  padding:3rem 5vw 4rem;
  max-width:840px;
}
.hero .plaque{ font-size:clamp(1.9rem, 5vw, 3.2rem); margin-bottom:1.1rem; }
.hero p{ color:var(--linen); font-size:1.15rem; max-width:520px; }
.hero-actions{
  margin-top:1.8rem;
  display:flex;
  gap:0.9rem;
  flex-wrap:wrap;
}

/* page header (non-home hero, smaller) */
.page-head{
  position:relative;
  padding:4.5rem 5vw 3.5rem;
  background:var(--paper-dark);
  color:var(--linen);
  overflow:hidden;
}
.page-head-img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:0.32;
}
.page-head-content{ position:relative; z-index:2; max-width:760px; }
.page-head .eyebrow{ color:var(--ochre); }
.page-head h1{ color:var(--cream); }
.page-head p{ color:var(--linen-2); }
.breadcrumb{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--linen-2);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:1rem;
  display:block;
}
.breadcrumb a{ text-decoration:none; color:var(--ochre); }

/* ---------- sections ---------- */
section{ padding:5.5rem 0; }
section.tight{ padding:3.5rem 0; }
.section-head{ max-width:680px; margin-bottom:3rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.bg-alt{ background:var(--linen); }
.bg-dark{ background:var(--paper-dark); color:var(--linen); }
.bg-dark h2, .bg-dark h3{ color:var(--cream); }
.bg-dark p{ color:var(--linen-2); }
.bg-dark .eyebrow{ color:var(--ochre); }

/* ---------- pillar cards (home) ---------- */
.pillars{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
}
.pillar-card{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2.2rem 1.7rem;
  text-decoration:none;
  transition:transform .22s ease, box-shadow .22s ease;
  overflow:hidden;
}
.pillar-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:6px;
  background:var(--walnut);
}
.pillar-card.sage::before{ background:var(--sage); }
.pillar-card.ochre::before{ background:var(--ochre); }
.pillar-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(43,36,28,0.12);
}
.pillar-card .num{
  font-family:var(--mono);
  font-size:0.75rem;
  color:var(--ochre);
  letter-spacing:0.1em;
}
.pillar-card h3{ margin:0.6rem 0 0.7rem; font-size:1.4rem; }
.pillar-card p{ font-size:0.95rem; margin-bottom:0; }
.pillar-card .goto{
  display:inline-block;
  margin-top:1.1rem;
  font-family:var(--mono);
  font-size:0.76rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--bark);
}

/* ---------- notice board (upcoming events) ---------- */
.board{
  background:var(--bark);
  border-radius:var(--radius);
  padding:2.2rem;
  color:var(--linen);
}
.board h3{ color:var(--cream); font-family:var(--mono); text-transform:uppercase; font-size:0.95rem; letter-spacing:0.1em; margin-bottom:1.1rem; }
.board-list{ list-style:none; display:flex; flex-direction:column; gap:0.9rem; }
.board-list li{
  display:flex;
  gap:1rem;
  padding-bottom:0.9rem;
  border-bottom:1px dashed rgba(239,228,203,0.25);
  font-size:0.93rem;
}
.board-list li:last-child{ border-bottom:none; padding-bottom:0; }
.board-list .when{
  font-family:var(--mono);
  color:var(--ochre);
  flex:none;
  min-width:150px;
  font-size:0.82rem;
}
.board-list .what{ color:var(--linen-2); }
.board-list .what b{ color:var(--cream); font-weight:600; }

/* ---------- schedule table ---------- */
.schedule{
  width:100%;
  border-collapse:collapse;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.schedule th, .schedule td{
  text-align:left;
  padding:0.85rem 1.1rem;
  border-bottom:1px solid var(--line);
  font-size:0.92rem;
}
.schedule th{
  background:var(--walnut);
  color:var(--linen);
  font-family:var(--mono);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:500;
}
.schedule tr:last-child td{ border-bottom:none; }
.schedule .loc{ font-weight:600; font-family:var(--serif); }
.schedule .time{ font-family:var(--mono); color:var(--walnut-dk); font-size:0.85rem; }

/* ---------- info panel / pull quote ---------- */
.panel{
  background:var(--white);
  border:1px solid var(--line);
  border-left:5px solid var(--sage);
  border-radius:var(--radius);
  padding:1.8rem 2rem;
}
.panel p{ max-width:none; }

/* ---------- two column ---------- */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}
.two-col.reverse .col-img{ order:2; }
.col-img img{
  border-radius:var(--radius);
  border:1px solid var(--line);
}
.col-img.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.7rem;
}
.col-img.grid-2 img:first-child{ grid-row:span 2; height:100%; object-fit:cover; }

/* ---------- feature list (equipment/weapons style content) ---------- */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.6rem;
}
.feature{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.feature img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.feature-body{ padding:1.4rem 1.5rem 1.6rem; }
.feature-body h3{
  font-size:1.15rem;
  margin-bottom:0.7rem;
  padding-bottom:0.6rem;
  border-bottom:2px solid var(--ochre);
  display:inline-block;
}
.feature-body ul{ list-style:none; }
.feature-body ul li{
  position:relative;
  padding-left:1.1rem;
  margin-bottom:0.45rem;
  font-size:0.92rem;
  color:var(--bark-soft);
}
.feature-body ul li::before{
  content:"";
  position:absolute; left:0; top:0.55em;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--sage);
}

/* ---------- craft tag categories ---------- */
.tag-groups{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1.4rem;
}
.tag-group{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.3rem 1.4rem;
}
.tag-group h4{
  font-family:var(--mono);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ochre);
  margin-bottom:0.8rem;
}
.tag-group ul{ list-style:none; display:flex; flex-wrap:wrap; gap:0.4rem; }
.tag-group li{
  font-size:0.82rem;
  background:var(--linen);
  padding:0.3rem 0.65rem;
  border-radius:20px;
  color:var(--bark-soft);
}

/* ---------- photo gallery (static grid, used sparingly) ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0.8rem;
}
.gallery img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius);
  transition:transform .35s ease;
}
.gallery a{ overflow:hidden; border-radius:var(--radius); display:block; }
.gallery a:hover img{ transform:scale(1.06); }

/* ---------- slideshow ---------- */
.slideshow{
  position:relative;
  background:var(--paper-dark);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line-dark);
}
.slideshow-viewport{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
}
.slideshow-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .5s ease;
}
.slideshow-slide.is-active{
  opacity:1;
  visibility:visible;
}
.slideshow-slide img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:var(--paper-dark);
}
.slideshow-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:2.2rem 1.4rem 1rem;
  background:linear-gradient(0deg, rgba(29,24,17,0.88) 0%, rgba(29,24,17,0) 100%);
  color:var(--cream);
  font-size:0.92rem;
  font-family:var(--serif);
  font-style:italic;
}
.slideshow-filename{
  display:block;
  margin-top:0.3rem;
  color:var(--linen-2);
  font-family:var(--mono);
  font-size:0.68rem;
  font-style:normal;
  letter-spacing:0.01em;
  overflow-wrap:anywhere;
}
.partner-banner{
  border-top:2px solid var(--bark);
  background:var(--linen);
  padding:2.5rem 0;
}
.partner-logos{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.65rem;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding:0.2rem;
}
.partner-logos img{
  width:92px;
  height:48px;
  padding:0.25rem;
  flex:none;
  object-fit:contain;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.field input.error,.field textarea.error{ border-color:#b54532; box-shadow:0 0 0 2px rgba(181,69,50,.16); }
@media (max-width:560px){ .partner-logos{ justify-content:flex-start; }.partner-logos img{ width:76px; height:42px; } }
.slide-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px; height:42px;
  border-radius:50%;
  border:none;
  background:rgba(29,24,17,0.55);
  color:var(--cream);
  font-size:1.1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease;
  z-index:3;
}
.slide-arrow:hover{ background:var(--walnut); }
.slide-prev{ left:14px; }
.slide-next{ right:14px; }
.slideshow-dots{
  position:absolute;
  bottom:0.9rem;
  left:0; right:0;
  z-index:3;
  display:flex;
  justify-content:center;
  gap:0.5rem;
}
.slideshow-dots .dot{
  width:9px; height:9px;
  border-radius:50%;
  border:1.5px solid var(--cream);
  background:transparent;
  padding:0;
  cursor:pointer;
  opacity:0.7;
  transition:background .2s ease, opacity .2s ease;
}
.slideshow-dots .dot.is-active{
  background:var(--ochre);
  border-color:var(--ochre);
  opacity:1;
}
.slideshow-thumbs{
  display:flex;
  gap:0.5rem;
  padding:0.6rem;
  background:var(--bark);
  overflow-x:auto;
}
.slideshow-thumbs button{
  flex:none;
  width:64px; height:48px;
  padding:0;
  border:2px solid transparent;
  border-radius:2px;
  overflow:hidden;
  cursor:pointer;
  opacity:0.6;
  transition:opacity .2s ease, border-color .2s ease;
}
.slideshow-thumbs button.is-active{ opacity:1; border-color:var(--ochre); }
.slideshow-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:560px){
  .slideshow-viewport{ aspect-ratio:4/3; }
  .slideshow-thumbs button{ width:48px; height:36px; }
}

/* ---------- under construction ---------- */
.construction{
  text-align:center;
  padding:4rem 2rem;
  background:var(--linen);
  border:2px dashed var(--line);
  border-radius:var(--radius);
}
.construction .icon{ font-size:2.4rem; margin-bottom:1rem; }
.construction h2{ margin-bottom:0.7rem; }
.construction p{ margin:0 auto; }

/* ---------- contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
}
.field{ margin-bottom:1.2rem; }
.field label{
  display:block;
  font-family:var(--mono);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.07em;
  margin-bottom:0.4rem;
  color:var(--bark-soft);
}
.field input, .field textarea{
  width:100%;
  padding:0.75rem 0.9rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:var(--sans);
  font-size:0.95rem;
  background:var(--white);
  color:var(--bark);
}
.field input:focus, .field textarea:focus{
  outline:2px solid var(--sage);
  outline-offset:1px;
}
.field textarea{ min-height:140px; resize:vertical; }

.contact-info{ display:flex; flex-direction:column; gap:1.4rem; }
.contact-info .item{ display:flex; gap:0.9rem; align-items:flex-start; }
.contact-info .item .k{
  font-family:var(--mono);
  font-size:0.7rem;
  text-transform:uppercase;
  color:var(--ochre);
  letter-spacing:0.08em;
  display:block;
  margin-bottom:0.2rem;
}
.contact-info a{ text-decoration:none; color:var(--walnut); font-weight:600; }
.contact-info a:hover{ text-decoration:underline; }

/* ---------- footer ---------- */
footer.site{
  background:var(--bark);
  color:var(--linen-2);
  padding:3rem 0 1.6rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:2.5rem;
  margin-bottom:2.5rem;
}
.footer-grid h4{
  font-family:var(--mono);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ochre);
  margin-bottom:1rem;
}
.footer-grid ul{ list-style:none; display:flex; flex-direction:column; gap:0.55rem; }
.footer-grid a{ text-decoration:none; color:var(--linen-2); font-size:0.9rem; }
.footer-grid a:hover{ color:var(--cream); }
.footer-brand .plaque{ margin-bottom:1rem; }
.footer-brand p{ color:var(--linen-2); font-size:0.88rem; }
.footer-bottom{
  border-top:1px solid rgba(239,228,203,0.15);
  padding-top:1.4rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.6rem;
  font-size:0.78rem;
  font-family:var(--mono);
  color:var(--line);
}

/* ---------- utility ---------- */
.center-btn{ text-align:center; margin-top:2.5rem; }
.mt{ margin-top:2.5rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .pillars{ grid-template-columns:1fr; }
  .two-col{ grid-template-columns:1fr; gap:2rem; }
  .two-col .col-img{ order:-1 !important; }
  .feature-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:2rem; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:span 2; }
  .gallery{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:760px){
  nav.primary{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--cream);
    border-bottom:2px solid var(--bark);
    box-shadow:0 12px 20px rgba(0,0,0,0.12);
  }
  nav.primary.open{ display:block; }
  nav.primary ul{ flex-direction:column; padding:0.6rem; gap:0; }
  nav.primary > ul > li{ width:100%; }
  nav.primary a{ padding:0.85rem 0.9rem; }
  nav.primary .submenu{
    position:static;
    box-shadow:none;
    border:none;
    background:var(--linen);
    margin:0.2rem 0 0.3rem;
    display:none;
  }
  nav.primary li.expanded > .submenu{ display:block; }
  .menu-toggle{ display:block; }
  .cta-btn.header-cta{ display:none; }

  .hero{ min-height:80vh; }
  .schedule{ font-size:0.85rem; }
  .schedule th, .schedule td{ padding:0.6rem 0.7rem; }
  .board-list li{ flex-direction:column; gap:0.2rem; }
  .board-list .when{ min-width:0; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-brand{ grid-column:span 1; }
}

@media (max-width:560px){
  .gallery{ grid-template-columns:repeat(2, 1fr); }
  section{ padding:3.6rem 0; }
}

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

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}