/* ===== Brand palette (subtle H&H influence) ===== */
:root{
  --bg:#0b0b0b;           /* deep charcoal */
  --panel:#111214;        /* panel charcoal */
  --ink:#f5f3ee;          /* ivory text */
  --muted:#bdb7aa;        /* muted ivory/stone */
  --brass:#b3935a;        /* warm brass accent */
  --brass-ink:#221a0f;    /* legible text on brass */
  --link:#f5f3ee;
  --link-hover:#dcd6c7;
}

/* ===== Base / Typography ===== */
body{margin:0;color:var(--ink);background:var(--bg);font-family:Inter,system-ui,Arial,sans-serif;line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

.brand{display:flex;align-items:center;gap:10px}
.brandline{
  font-family:"Crimson Pro", serif;
  font-variant:small-caps;
  letter-spacing:.14em;
  font-weight:600;
  line-height:1;
  color:var(--ink);
  opacity:.95;
}
.crest{width:40px;height:40px;display:block;object-fit:contain;border-radius:50%}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(11,11,11,.82);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid #1f1f1f;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0}
.primary-nav{display:flex;gap:26px;align-items:center}
.primary-nav a{
  display:inline-block;
  padding:10px 14px;
  font-weight:600;
  color:var(--link);
  text-decoration:none;
  border-radius:999px;
  line-height:1;
  opacity:.95;
  transition:background-color .12s ease, transform .12s ease, opacity .12s ease;
}
.primary-nav a:hover{background:#171717;opacity:1;transform:translateY(-1px)}
.primary-nav a:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ===== HERO — slider + vignette + ken burns ===== */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(560px,76vh,900px);
  display:grid; place-items:center;
  overflow:hidden;
}

/* Vignette only (no photo here) */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(1100px 560px at 55% 38%,
    rgba(0,0,0,0), rgba(0,0,0,.26) 62%, rgba(0,0,0,.44) 100%);
}

/* Slides layer */
.hero-slides{position:absolute; inset:0; z-index:-2}
.slide{
  position:absolute; inset:0; opacity:0;
  background:linear-gradient(180deg, rgba(0,0,0,.42) 0%,
                                       rgba(0,0,0,.58) 55%,
                                       rgba(0,0,0,.68) 100%);
  animation:heroFade 24s infinite; /* 3 slides × ~8s each */
  will-change:opacity;
}
/* Photo goes on ::after so we can pan/zoom smoothly */
.slide::after{
  content:""; position:absolute; inset:0;
  background:var(--img) center 45% / cover no-repeat;
  animation:panZoom 24s infinite;
  will-change:transform;
}

/* 3-slide timing */
.slide:nth-child(1){animation-delay:0s}     .slide:nth-child(1)::after{animation-delay:0s}
.slide:nth-child(2){animation-delay:8s}     .slide:nth-child(2)::after{animation-delay:8s}
.slide:nth-child(3){animation-delay:16s}    .slide:nth-child(3)::after{animation-delay:16s}

@keyframes heroFade{
  0%{opacity:0}
  5%{opacity:1}
  30%{opacity:1}
  33%{opacity:0}
  100%{opacity:0}
}
@keyframes panZoom{
  0%  { transform: scale(1.03) translate3d(-1%,0,0) }
  30% { transform: scale(1.06) translate3d( 1%,0,0) }
  100%{ transform: scale(1.06) translate3d( 1%,0,0) }
}

/* Hero copy */
.hero-copy{max-width:980px;text-align:center;padding:88px 20px}
.overline{
  font-family:"Crimson Pro", serif;
  font-variant:small-caps;
  letter-spacing:.22em;
  color:var(--muted);
  margin:0 0 12px;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.hero h1{
  font-family:"Crimson Pro", serif;
  font-weight:600;
  font-size:clamp(36px,5vw,60px);
  letter-spacing:.01em;
  margin:0 0 12px;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.hero .sub{
  color:var(--muted);
  font-size:clamp(16px,1.7vw,18px);
  margin:0 auto 26px;
  max-width:820px;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .slide,.slide::after{animation:none}
  .slide:nth-child(1){opacity:1}
}

/* ===== Buttons ===== */
.btn{
  display:inline-block; border:1px solid transparent;
  border-radius:999px; padding:12px 18px;
  font-weight:700; text-decoration:none;
  transition:transform .12s, box-shadow .12s, background-color .12s, color .12s;
}
.btn-brass{background:var(--brass); color:var(--brass-ink)}
.btn-brass:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(179,147,90,.25)}
.btn-ghost{border-color:#2a2a2a; color:var(--ink); background:transparent}
.btn-ghost:hover{background:#191919}
.cta-row{display:flex;gap:12px;justify-content:center}

/* Anchor offset for sticky header */
section[id]{scroll-margin-top:96px}

/* ===== Gallery cards ===== */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{
  background:var(--panel);border:1px solid #1f1f1f;border-radius:16px;overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.25);border-color:#2a2a2a}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card figcaption{padding:10px 12px;color:#e4e4e4}

/* ===== Story / Heritage layout ===== */
.two-col{
  display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center;
  background:var(--panel);border:1px solid #1f1f1f;padding:20px;border-radius:16px
}
.quote{
  font-family:"Crimson Pro",serif;font-size:22px;line-height:1.4;color:#ddd;
  background:#0e0e0e;padding:16px;border-left:3px solid #fff;border-radius:8px
}

/* ===== Footer ===== */
.footer{background:#0e0e0e;padding:26px 0;border-top:1px solid #1f1f1f;margin-top:30px}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.legal{opacity:.7;text-align:center;margin-top:10px;color:#bbb}

/* ===== Meet Our Team ===== */
.section{padding:72px 0}
.section-head{text-align:center;margin-bottom:28px}
.section-head h2{
  font-family:"Crimson Pro", serif;
  font-weight:600;
  font-size:clamp(28px,4.2vw,40px);
  letter-spacing:.01em;
  margin:0 0 6px
}
.section-sub{color:var(--muted);max-width:760px;margin:0 auto}

.team-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:22px;
}
.member{
  grid-column:span 6;
  background:var(--panel);
  border:1px solid #1f1f1f;
  border-radius:16px;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.member:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.25);
  border-color:#262626;
}
.portrait{
  width:100%; display:block;
  aspect-ratio:4/5; object-fit:cover; object-position:center;
  filter:saturate(102%) contrast(1.03);
}
.member-body{padding:16px 16px 18px}
.name{
  font-family:"Crimson Pro", serif;
  font-weight:600;
  font-size:22px;
  margin:2px 0 2px;
}
.role{
  color:var(--brass);
  font-weight:700;
  letter-spacing:.02em;
  margin:0 0 8px;
}
.bio{color:var(--muted);margin:0}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .hero{min-height:64vh}
}
@media (max-width:820px){
  .primary-nav{gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .primary-nav a{padding:8px 10px}
}
/* Featured Cues — larger images, 3-up on desktop, no captions */
.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr)); /* wider cards */
  gap:22px;
}

.card{
  background:var(--panel);
  border:1px solid #1f1f1f;
  border-radius:18px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.25); border-color:#2a2a2a }

/* Tall, elegant crop for cue photos */
.card img{
  width:100%;
  aspect-ratio: 2 / 3;          /* taller than wide */
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:0;
}

/* Hide captions for now */
.card figcaption{ display:none }

/* Responsive */
@media (max-width:1100px){
  .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (max-width:640px){
  .grid{ grid-template-columns:1fr }
}
/* HERO — force the close-up image directly on the hero element */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(560px,76vh,900px);
  display:grid; place-items:center; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.58) 55%, rgba(0,0,0,.68) 100%),
    url("assets/img/hs_cue/hs_points_close.jpg") center 45% / cover no-repeat !important;
  filter:saturate(108%) contrast(1.05);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(1100px 560px at 55% 38%,
    rgba(0,0,0,0), rgba(0,0,0,.26) 62%, rgba(0,0,0,.44) 100%);
}
/* Kill any legacy layers that might sit above/below */
.hero-slides, .slide, .hero-media { display:none !important }

/* Featured Cues — larger images, 3-up on desktop, no captions */
.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}
.card{
  background:var(--panel);
  border:1px solid #1f1f1f;
  border-radius:18px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.25); border-color:#2a2a2a }
.card img{
  width:100%;
  aspect-ratio: 2 / 3;
  object-fit:cover;
  object-position:center;
  display:block;
}
.card figcaption{ display:none }

@media (max-width:1100px){
  .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (max-width:640px){
  .grid{ grid-template-columns:1fr }
}
/* === HERO: single close-up background === */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(560px,76vh,900px);
  display:grid; place-items:center; overflow:hidden;

  /* IMPORTANT: set your image here (adjust path if needed) */
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.58) 55%, rgba(0,0,0,.68) 100%),
    url("assets/img/mcdaniel_cues_all/hs_cue/hs_points_close.jpg") center 45% / cover no-repeat !important;
  filter:saturate(108%) contrast(1.05);
}

/* subtle vignette on top (no photo here) */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(1100px 560px at 55% 38%,
    rgba(0,0,0,0), rgba(0,0,0,.26) 62%, rgba(0,0,0,.44) 100%);
}

/* nuke any old slider/image layers if they exist */
.hero-slides, .slide, .hero-media { display:none !important }

/* === Featured Cues: bigger cards, no captions === */
.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}
.card{
  background:var(--panel); border:1px solid #1f1f1f;
  border-radius:18px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.25); border-color:#2a2a2a }
.card img{
  width:100%;
  aspect-ratio:2 / 3;     /* tall, elegant crop */
  object-fit:cover; object-position:center; display:block;
}
.card figcaption{ display:none }   /* hide for now */

@media (max-width:1100px){ .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width:640px){  .grid{ grid-template-columns:1fr } }

/* ===== Brand palette ===== */
:root{
  --bg:#0b0b0b;
  --panel:#111214;
  --ink:#f5f3ee;
  --muted:#bdb7aa;
  --brass:#b3935a;
  --brass-ink:#221a0f;
  --link:#f5f3ee;
  --link-hover:#dcd6c7;
}

/* ===== Base / Type ===== */
body{margin:0;color:var(--ink);background:var(--bg);font-family:Inter,system-ui,Arial,sans-serif;line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

.brand{display:flex;align-items:center;gap:10px}
.brandline{font-family:"Crimson Pro",serif;font-variant:small-caps;letter-spacing:.14em;font-weight:600;line-height:1;color:var(--ink);opacity:.95}
.crest{width:40px;height:40px;display:block;object-fit:contain;border-radius:50%}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(11,11,11,.82);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid #1f1f1f;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0}
.primary-nav{display:flex;gap:26px;align-items:center}
.primary-nav a{
  display:inline-block;padding:10px 14px;font-weight:600;color:var(--link);text-decoration:none;border-radius:999px;line-height:1;opacity:.95;
  transition:background-color .12s, transform .12s, opacity .12s;
}
.primary-nav a:hover{background:#171717;opacity:1;transform:translateY(-1px)}
.primary-nav a:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* Anchor offset for sticky header */
section[id]{scroll-margin-top:96px}

/* ===== HERO (static image) ===== */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(560px,76vh,900px);
  display:grid; place-items:center; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.58) 55%, rgba(0,0,0,.68) 100%),
    url("../img/mcdaniel_cues_all/hs_cue/hs_points_close.jpg") center 45% / cover no-repeat !important;
  filter:saturate(108%) contrast(1.05);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(1100px 560px at 55% 38%, rgba(0,0,0,0), rgba(0,0,0,.26) 62%, rgba(0,0,0,.44) 100%);
}


/* ===== Buttons ===== */
.btn{display:inline-block;border:1px solid transparent;border-radius:999px;padding:12px 18px;font-weight:700;text-decoration:none;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn-brass{background:var(--brass);color:var(--brass-ink)}
.btn-brass:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(179,147,90,.25)}
.btn-ghost{border-color:#2a2a2a;color:var(--ink);background:transparent}
.btn-ghost:hover{background:#191919}
.cta-row{display:flex;gap:12px;justify-content:center}

/* ===== Featured Cues (3-up, big, no captions) ===== */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card{
  background:var(--panel);border:1px solid #1f1f1f;border-radius:18px;overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.25);border-color:#2a2a2a}
.card img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:center;display:block}
.card figcaption{display:none}
@media (max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

/* ===== Story / Heritage ===== */
.two-col{
  display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center;
  background:var(--panel);border:1px solid #1f1f1f;padding:20px;border-radius:16px
}
.quote{font-family:"Crimson Pro",serif;font-size:22px;line-height:1.4;color:#ddd;background:#0e0e0e;padding:16px;border-left:3px solid #fff;border-radius:8px}

/* ===== Meet Our Team ===== */
.section{padding:72px 0}
.section-head{text-align:center;margin-bottom:28px}
.section-head h2{font-family:"Crimson Pro",serif;font-weight:600;font-size:clamp(28px,4.2vw,40px);letter-spacing:.01em;margin:0 0 6px}
.section-sub{color:var(--muted);max-width:760px;margin:0 auto}
.team-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}
.member{grid-column:span 6;background:var(--panel);border:1px solid #1f1f1f;border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;transition:transform .12s,box-shadow .12s,border-color .12s}
.member:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.25);border-color:#262626}
.portrait{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;object-position:center;filter:saturate(102%) contrast(1.03)}
.member-body{padding:16px 16px 18px}
.name{font-family:"Crimson Pro",serif;font-weight:600;font-size:22px;margin:2px 0 2px}
.role{color:var(--brass);font-weight:700;letter-spacing:.02em;margin:0 0 8px}
.bio{color:var(--muted);margin:0}
@media (max-width:960px){.member{grid-column:span 12}}

/* ===== Footer ===== */
.footer{background:#0e0e0e;padding:26px 0;border-top:1px solid #1f1f1f;margin-top:30px}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.legal{opacity:.7;text-align:center;margin-top:10px;color:#bbb}

/* ===== Responsive ===== */
@media (max-width:900px){
  .two-col{grid-template-columns:1fr}
  .hero{min-height:64vh}
}
@media (max-width:820px){
  .primary-nav{gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .primary-nav a{padding:8px 10px}
}
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(560px,76vh,900px);
  display:grid; place-items:center; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.58) 55%, rgba(0,0,0,.68) 100%),
    url("../img/mcdaniel_cues_all/hs_cue/hs_points_close.jpg") center 45% / cover no-repeat !important;
  filter:saturate(108%) contrast(1.05);
}
/* === Featured Cues: wider, shorter cards === */
.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px; /* a little more breathing room */
}

.card{
  background:var(--panel);
  border:1px solid #1f1f1f;
  border-radius:16px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(0,0,0,.25);
  border-color:#2a2a2a;
}

/* Wider + slightly shorter crop */
.card img{
  width:100%;
  aspect-ratio: 4 / 5;   /* was 2/3; wider, less tall */
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:0;
}

.card figcaption{ display:none }

/* Responsive */
@media (max-width:1100px){
  .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (max-width:640px){
  .grid{ grid-template-columns:1fr }
}
/* === Featured Cues: square crop === */
.card img{
  width:100%;
  aspect-ratio: 1 / 1;   /* perfect square */
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:0;
}
/* === FORCE Featured Cues to square tiles === */
#gallery .grid .card img,
.featured .grid .card img,
.container .grid .card img {
  aspect-ratio: 1 / 1 !important; /* override earlier 2/3 */
  width: 100% !important;
  height: auto !important;        /* neutralize any fixed height */
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}
/* === Featured Cues: collage cards === */
.cue-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr)); /* big cards */
  gap:26px;
}

.cue-card{
  background:var(--panel);
  border:1px solid #1f1f1f;
  border-radius:16px;
  padding:14px;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.cue-card:hover{ box-shadow:0 10px 30px rgba(0,0,0,.25); border-color:#2a2a2a }

.cue-title{
  font-family:"Crimson Pro",serif;
  font-size:20px; font-weight:600; margin:4px 4px 10px;
}

/* Reset buttons */
.cue-card button{ all:unset; display:block; cursor:pointer }
.cue-card button:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:12px }

/* Main image: wide & shallow to show the whole cue */
.cue-main img{
  width:100%;
  aspect-ratio: 5 / 2;         /* wide */
  object-fit:cover;
  object-position:center;
  border-radius:12px;
  display:block;
}

/* Thumbs row: small squares */
.cue-thumbs{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
}
.cue-thumbs img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center;
  border-radius:10px;
  display:block;
  border:1px solid #222;
  transition:transform .12s ease, border-color .12s ease;
}
.cue-thumbs button:hover img{ transform:translateY(-1px); border-color:#2f2f2f }

/* Responsive */
@media (max-width:1100px){
  .cue-grid{ grid-template-columns:1fr; }
}

/* === Lightbox === */
.lb[hidden]{ display:none !important; }
.lb{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.82);
  display:grid; place-items:center;
  padding:30px;
}
.lb-img{
  max-width:min(92vw, 1400px);
  max-height:82vh;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

/* Controls */
.lb-close,.lb-prev,.lb-next{
  position:fixed; top:50%; transform:translateY(-50%);
  background:rgba(20,20,20,.7); color:#fff;
  width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center; font-size:26px; font-weight:700;
  border:1px solid #2a2a2a; cursor:pointer;
  transition:background-color .12s ease, transform .12s ease;
}
.lb-close{ top:20px; right:20px; transform:none; font-size:28px }
.lb-prev{ left:20px }
.lb-next{ right:20px }
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ background:#111; transform:translateY(-50%) scale(1.05) }
.lb-close:hover{ transform:none }
/* Header brand: remove link underline + keep contrast */
.site-header .brand,
.site-header .brand:link,
.site-header .brand:visited,
.site-header .brand:hover,
.site-header .brand:active {
  text-decoration: none !important;
  color: var(--ink) !important;
}

/* Optional: keep an accessible focus ring on the brand link */
.site-header .brand:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 10px;
}

/* (If a theme is adding underlines globally) */
.site-header a { text-decoration: none; }
/* Hide the small H3 titles above the collage cards */
.featured .cue-title{ display:none !important; }

/* Make the Featured Cues area wider on desktop (bigger cards) */
.featured.container{ max-width: 1360px; }         /* was ~1100 */
@media (min-width: 1600px){
  .featured.container{ max-width: 1500px; }       /* ultra-wide screens */
}

/* Enlarge the main image area a bit (taller crop) */
.cue-grid{ gap: 28px; }
.cue-card{ padding: 16px; border-radius: 18px; }
.cue-main img{
  aspect-ratio: 2 / 1;                            /* was ~5/2; lower = taller */
}

/* Slightly bigger thumbs spacing */
.cue-thumbs{ gap: 12px; }
/* 1) Make later sections as wide as Featured so they don't look "smaller" */
.container{ max-width:1360px; }                 /* match Featured width */
@media (min-width:1600px){
  .container{ max-width:1500px; }               /* ultra-wide screens */
}

/* 2) Ensure sections stack cleanly with consistent spacing */
.featured{ margin-bottom:56px; }
#story{ padding-top:40px; }
#team{  padding-top:56px; }
#commission{ padding-top:56px; }

/* 3) Team grid: simpler, more robust two-column layout on desktop */
.team-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr)); /* 2-up */
  gap:28px;
}
.member{ grid-column:auto; }                      /* override older span:6 rule */

/* One column on small screens */
@media (max-width: 960px){
  .team-grid{ grid-template-columns:1fr; }
}
/* ------ Unify widths so sections don't look smaller ------ */
.container{
  width:100%;
  max-width:1360px;        /* match Featured width */
  margin:0 auto;
}
@media (min-width:1600px){
  .container{ max-width:1500px; }
}

/* ------ Make sections stack cleanly (no side-by-side creep) ------ */
.featured,
#story,
#team,
#commission{
  display:block;
  float:none;
  clear:both;              /* force the next section to start below */
}

/* Extra breathing room between sections */
.featured{ margin-bottom:56px; }
#story{ padding-top:40px; }
#team{  padding-top:56px; }
#commission{ margin-top:56px; }

/* ------ Team layout: stable two-column grid on desktop ------ */
#team .team-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:28px;
  align-items:start;
}
#team .member{ margin:0; }  /* cancel any stray margins */

/* One column on small screens */
@media (max-width:960px){
  #team .team-grid{ grid-template-columns:1fr; }
}
/* ====== LAYOUT GUARD: keep main sections stacked & centered ====== */
main, .page, 
.featured, 
#story, 
#team, 
#commission {
  display:block !important;
  width:100% !important;
  max-width:1360px !important;   /* matches your widened container */
  margin:0 auto !important;
  float:none !important;
  clear:both !important;
}

/* Ensure the general .container remains a simple block wrapper */
.container { display:block !important; width:100%; margin:0 auto; }

/* Only inner content should use grid (cards, two-col, team grid, etc.) */
.two-col { display:grid; grid-template-columns:1.3fr .7fr; gap:24px; align-items:center; }
.team-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; }
@media (max-width:960px){ .team-grid{ grid-template-columns:1fr; } }

/* Featured cards: keep the v2 layout stable */
.featured .grid, 
#gallery .grid, 
.container > .grid, 
.grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}
@media (max-width:1100px){
  .featured .grid, #gallery .grid, .container > .grid, .grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .featured .grid, #gallery .grid, .container > .grid, .grid { grid-template-columns:1fr; }
}

/* Card image crop back to tall (undo square/4:5 overrides elsewhere) */
.featured .card img, 
#gallery .card img, 
.container .card img, 
.grid .card img {
  width:100% !important;
  aspect-ratio: 2 / 3 !important;
  height:auto !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}

/* Kill any rogue nth-child spans that made Cue 1/2 bigger */
.grid .card{ grid-column:auto !important; grid-row:auto !important; }