/* CSS BY KYLE KOSTNER*/

/* IMPORTED FONTS */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* CSS REST */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block;height:auto}
ul,ol{margin:0;padding:0}
a{text-decoration:none;color:inherit}
:focus-visible{outline:3px solid #E5C185;outline-offset:2px}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap;border:0;padding:0;margin:-1px}

/* ROOT VARIABLES */
:root{
  /* Colors */
  --midnight-blue:#1F2A44;
  --olive-green:#76885B;
  --champagne-gold:#E5C185;
  --linen:#F8F4EC;
  --dark-charcoal:#2B2B2B;
  --soft-white:#FAF9F6;

  /* Type & spacing */
  --font-serif:"Playfair Display", serif;
  --fs-body:clamp(1rem, .95rem + .2vw, 1.0625rem);
  --fs-h2:clamp(1.6rem, 1.25rem + 1.6vw, 2.125rem);
  --fs-card:clamp(1.15rem, 1rem + .6vw, 1.35rem);
  --fs-hero:clamp(2.4rem, 1.8rem + 3.6vw, 4.25rem);

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;

  --shadow-sm:0 2px 10px rgba(0,0,0,.08);
  --shadow-md:0 12px 26px rgba(0,0,0,.12);

  --content-max:68rem; /* ~1088px */
  --gutter:1rem;
}

/* GLOBAL STYLES (mobile first/small) */
html,body{
  background:var(--soft-white);
  color:var(--dark-charcoal);
  font-family:var(--font-serif);
  line-height:1.6;
  font-size:var(--fs-body);
}

/* Header / Hero */
header{
  background:var(--midnight-blue);
  color:var(--soft-white);
  text-align:center;
  padding:2.25rem 1rem .25rem;
}
header figure{width:120px;margin:0 auto .75rem}
header h1{
  margin:.25rem 0 .25rem;
  font-size:var(--fs-hero);
  font-weight:800;
  letter-spacing:.3px; /* polish */
}
header .tagline{
  margin:0 0 1.25rem;
  font-style:italic;
  opacity:.95; /* polish */
}

/* Primary nav band */
nav[aria-label="Primary"]{
  background:var(--champagne-gold);
  color:var(--midnight-blue);
  padding:.7rem 1rem; /* polish */
}
nav[aria-label="Primary"] ul{
  list-style:none;
  display:flex;
  gap:2.5rem;
  justify-content:center;
}
nav[aria-label="Primary"] a{font-weight:800}
nav[aria-label="Primary"] a:hover{text-decoration:underline}

/* Main wrapper */
main{
  max-width:var(--content-max);
  margin:0 auto;
  padding:2rem var(--gutter) 3rem;
}
section + section{margin-top:2.25rem}

/* Section headings */
h2{
  font-size:var(--fs-h2);
  color:var(--midnight-blue);
  margin:0 0 .75rem;
}

/* Intro text width + gold rule */
#about p{max-width:75ch;margin:0;opacity:.95} /* polish */
.section-rule{
  border:0;height:3px;width:90px; /* polish */
  background:var(--champagne-gold);
  margin:1.1rem 0 0; /* polish (left-aligned like mockup) */
}

/* Offerings (cards) */
#offerings{display:grid;gap:1rem}
#offerings article{
  background:var(--olive-green);
  color:var(--soft-white);
  padding:1rem 1rem 1.1rem;
  border-radius:18px;            /* polish */
  box-shadow:var(--shadow-md);   /* polish */
}
#offerings h3{
  margin:0 0 .5rem;
  font-size:var(--fs-card);
  font-weight:800;
  line-height:1.15; /* polish */
}
#offerings p{margin:0 0 .5rem}
#offerings ul{margin:.25rem 0 .25rem 1.25rem}
#offerings li{margin:.2rem 0}

/* Gallery */
#gallery p{max-width:75ch;margin:0 0 .75rem}
.gallery-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.9rem;
  row-gap:1rem; /* polish */
  margin-top:.5rem;
}
.gallery-grid figure{
  background:white;
  border-radius:var(--radius-sm);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  margin:0;
}
.gallery-grid img{
  width:100%;
  height:220px;
  object-fit:cover;
}
.gallery-grid figcaption{
  padding:.65rem .75rem;
  font-style:italic;
  font-size:.95rem;
  color:#3e3e3e;
  text-align:center;
  line-height:1.4; /* polish */
}

/* Button */
.button{
  display:inline-block;
  background:var(--olive-green);
  color:#fff;
  padding:.8rem 1.1rem;
  border-radius:8px;
  font-weight:800;
  box-shadow:var(--shadow-sm);
  margin-top:.5rem;
}
.button:hover{filter:brightness(1.06)}

/* Footer */
footer{
  background:var(--midnight-blue);
  color:var(--soft-white);
  text-align:center;
  padding:2rem 1rem 3rem;
}
footer address{font-style:normal}
footer a{color:var(--champagne-gold);font-weight:700}
footer nav ul{
  list-style:none;
  display:flex;
  gap:1.5rem; /* polish */
  justify-content:center;
  margin-top:.75rem;
}

/* MEDIA QUERY (medium) */
@media (min-width:600px){
  header{padding:2.75rem 1rem .75rem}
  header figure{width:132px}
  main{padding:2.5rem var(--gutter) 3.5rem}

  #offerings{grid-template-columns:1fr 1fr}
  #offerings article:last-of-type{grid-column:1/-1;padding:1.1rem 1.25rem}

  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}

/* MEDIA QUERY (large) */
@media (min-width:900px){
  header figure{width:150px}
  h2{margin-bottom:.85rem}

  #offerings{gap:1.1rem}
  /* cards already use shadow-md via polish */

  .gallery-grid{grid-template-columns:repeat(3,1fr);gap:1rem}
  .gallery-grid img{height:230px}
}

/* MEDIA QUERY (xl) */
@media (min-width:1200px){
  main{padding-top:3rem}

  /* Gallery becomes 5 across on XL like the desktop mockup */
  .gallery-grid{grid-template-columns:repeat(5,1fr);gap:1rem}
  .gallery-grid img{height:175px} /* polish */

  #gallery .button{min-width:16rem}
}