/* Alres Art — stylesheet
   Palette: canvas linen ground, graphite ink, oxide-red accent, aluminium grey secondary
   Type: Fraunces (display serif, craft/atelier feel) + Work Sans (body/UI) */

:root{
  --linen:      #F1ECE2;
  --linen-2:    #E8E1D2;
  --graphite:   #26241F;
  --graphite-70:#514E45;
  --oxide:      #A8452E;
  --oxide-dark: #833323;
  --aluminium:  #9CA3A0;
  --aluminium-l:#D8DCD9;
  --line:       #D7CFBE;
  --white:      #FBFAF6;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--linen);
  color: var(--graphite);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--oxide); text-decoration: none; }
a:hover{ color: var(--oxide-dark); }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--oxide);
  outline-offset: 3px;
}

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 600;
  color: var(--graphite);
  line-height: 1.12;
  margin: 0 0 .5em;
}
h1{ font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 500; letter-spacing: -0.01em; }
h2{ font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 1em; max-width: 66ch; color: var(--graphite-70); }
.lede{ font-size: 1.15rem; color: var(--graphite); }

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 40;
  background: var(--linen);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap: 20px; padding-top:14px; padding-bottom:14px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height: 40px; width:auto; }
.brand-name{
  font-family: var(--serif); font-size:1.35rem; font-weight:600;
  color: var(--graphite); letter-spacing: -0.01em;
}
.brand-name span{ color: var(--oxide); }

nav.primary{ display:flex; }
nav.primary ul{ list-style:none; display:flex; gap: 4px; margin:0; padding:0; }
nav.primary li{ position:relative; }
nav.primary > ul > li > a{
  display:block; padding: 10px 14px; color: var(--graphite);
  font-size: .96rem; border-radius: 3px;
}
nav.primary > ul > li > a:hover{ color: var(--oxide); background: var(--linen-2); }
nav.primary li.current > a{ color: var(--oxide); }

nav.primary .submenu{
  list-style:none; margin:0; padding:8px; position:absolute; left:0; top:100%;
  background: var(--white); border:1px solid var(--line); min-width: 230px;
  box-shadow: 0 12px 24px rgba(38,36,31,.10);
  display:none; border-radius: 3px;
}
nav.primary li:hover > .submenu,
nav.primary li:focus-within > .submenu{ display:block; }
nav.primary .submenu a{
  display:block; padding: 8px 10px; color: var(--graphite-70); font-size:.92rem; border-radius:2px;
}
nav.primary .submenu a:hover{ background: var(--linen-2); color: var(--oxide); }

.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:3px; padding: 8px 10px; font-family: var(--sans); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  color: var(--white);
  min-height: 62vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(38,36,31,.05) 0%, rgba(30,27,22,.78) 88%);
}
.hero .wrap{ position:relative; z-index:2; padding-top:70px; padding-bottom:56px; }
.hero .eyebrow{ font-size:.88rem; color: var(--aluminium-l); margin-bottom:10px; }
.hero h1{ color: var(--white); max-width: 16ch; }
.hero p{ color: var(--aluminium-l); font-size:1.1rem; max-width: 52ch; }

.page-head{
  padding: 64px 0 34px;
  border-bottom: 1px solid var(--line);
}
.page-head .eyebrow{ color: var(--oxide); font-size:.9rem; margin-bottom:10px; }
.breadcrumb{ font-size:.85rem; color: var(--graphite-70); margin-bottom: 18px; }
.breadcrumb a{ color: var(--graphite-70); }
.breadcrumb a:hover{ color: var(--oxide); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding: 12px 22px; background: var(--oxide); color: var(--white);
  border-radius: 2px; font-size:.95rem; border: 1px solid var(--oxide);
}
.btn:hover{ background: var(--oxide-dark); color: var(--white); border-color: var(--oxide-dark); }
.btn.ghost{ background:transparent; color: var(--graphite); border:1px solid var(--graphite); }
.btn.ghost:hover{ background: var(--graphite); color: var(--white); }

/* ---------- Sections ---------- */
section{ padding: 56px 0; }
section.tight{ padding: 34px 0; }
.section-head{ margin-bottom: 34px; max-width: 62ch; }
.two-col{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items:center;
}
.two-col.reverse{ grid-template-columns: 1fr 1.1fr; }
.two-col.reverse figure{ order:2; }

figure{ margin:0; }
figure img{ border-radius: 2px; }
figcaption{ font-size:.85rem; color: var(--graphite-70); margin-top:8px; }

/* category grid on homepage */
.cat-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.cat-card{
  position:relative; display:block; aspect-ratio: 4/5; overflow:hidden; border-radius: 2px;
  background: var(--graphite);
}
.cat-card img{ width:100%; height:100%; object-fit:cover; opacity:.82; transition: opacity .25s, transform .5s; }
.cat-card:hover img{ opacity:.62; transform: scale(1.035); }
.cat-card .label{
  position:absolute; left:0; right:0; bottom:0; padding: 18px 20px;
  background: linear-gradient(0deg, rgba(20,18,15,.86), transparent);
}
.cat-card .label h3{ color: var(--white); margin:0; font-size:1.2rem; }
.cat-card .label span{ color: var(--aluminium-l); font-size:.85rem; }

/* product / item grid */
.item-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px;
}
.item{ background: var(--white); border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.item .thumb{ aspect-ratio: 4/3; overflow:hidden; background: var(--linen-2); }
.item .thumb img{ width:100%; height:100%; object-fit:cover; }
.item .meta{ padding: 14px 16px 18px; }
.item .meta h3{ font-size:1.02rem; margin: 0 0 4px; }
.item .meta p{ font-size:.9rem; margin:0; }

/* sub-nav pills for category subsections */
.subnav{ display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 0; }
.subnav a{
  display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius: 999px;
  font-size:.86rem; color: var(--graphite-70); background: var(--white);
}
.subnav a:hover, .subnav a.current{ color: var(--white); background: var(--graphite); border-color: var(--graphite); }

/* facts / spec strip */
.facts{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 24px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding: 28px 0;
}
.facts dt{ font-family: var(--serif); font-size:1.7rem; color: var(--oxide); margin-bottom:2px;}
.facts dd{ margin:0; font-size:.86rem; color: var(--graphite-70); }

/* video block */
.video-block{ margin-bottom: 30px; }
.video-block video{ width:100%; border-radius:2px; background:#000; }
.video-block h3{ margin-top:12px; margin-bottom:2px; }

/* callout / cta band */
.cta-band{
  background: var(--graphite); color: var(--linen);
}
.cta-band h2{ color: var(--white); }
.cta-band p{ color: var(--aluminium-l); }
.cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap; padding-top:44px; padding-bottom:44px; }

/* placeholder note (visible only to the site owner while editing, kept subtle) */
.editnote{
  font-size:.78rem; color: var(--aluminium); border-left:2px solid var(--aluminium); padding-left:10px; margin: 6px 0 22px;
}

/* contact */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.info-list{ list-style:none; margin:0; padding:0; }
.info-list li{ padding: 14px 0; border-bottom:1px solid var(--line); }
.info-list .k{ display:block; font-size:.8rem; color: var(--graphite-70); margin-bottom:2px; }
.info-list .v{ font-size:1.05rem; }
form.contact-form{ display:grid; gap:14px; }
form.contact-form label{ display:block; font-size:.85rem; color: var(--graphite-70); margin-bottom:5px; }
form.contact-form input, form.contact-form textarea{
  width:100%; padding: 11px 12px; border:1px solid var(--line); border-radius:2px;
  font-family: var(--sans); font-size:.98rem; background: var(--white); color: var(--graphite);
}
form.contact-form textarea{ min-height: 130px; resize: vertical; }
.map-embed{ border:1px solid var(--line); border-radius:2px; overflow:hidden; margin-top:22px; }
.map-embed iframe{ width:100%; height:280px; border:0; display:block; }

/* footer */
footer.site-footer{
  border-top: 1px solid var(--line); background: var(--linen-2); margin-top: 60px;
}
footer .wrap{ padding: 44px 28px 30px; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
footer h4{ font-family: var(--sans); font-size:.85rem; text-transform:none; color: var(--graphite); margin-bottom:12px; font-weight:600; }
footer ul{ list-style:none; margin:0; padding:0; }
footer li{ margin-bottom:7px; }
footer a{ color: var(--graphite-70); font-size:.92rem; }
footer a:hover{ color: var(--oxide); }
.footer-base{
  border-top:1px solid var(--line); padding: 16px 28px; max-width: var(--maxw); margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:.8rem; color: var(--graphite-70);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .site-header .wrap{ flex-wrap: wrap; row-gap: 0; }
  nav.primary{
    order: 3; flex: 1 1 100%;
    background: var(--linen);
    display:none; overflow-y:auto;
    max-height: calc(100vh - 70px);
    padding: 6px 0 24px;
    border-top:1px solid var(--line);
    margin-top: 14px;
  }
  nav.primary.open{ display:block; }
  nav.primary ul{ flex-direction:column; }
  nav.primary > ul{ padding: 6px 0; }
  nav.primary > ul > li > a{ padding: 12px 4px; border-bottom:1px solid var(--line); }
  nav.primary .submenu{ display:block; position:static; box-shadow:none; border:none; border-bottom:1px solid var(--line); background:transparent; padding: 0 0 6px 14px; }
  .nav-toggle{ display:block; }
  .two-col, .two-col.reverse{ grid-template-columns: 1fr; }
  .two-col.reverse figure{ order:0; }
  .cat-grid{ grid-template-columns: 1fr 1fr; }
  .item-grid{ grid-template-columns: 1fr 1fr; }
  .facts{ grid-template-columns: 1fr 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  footer .wrap{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px){
  .cat-grid{ grid-template-columns: 1fr; }
  .item-grid{ grid-template-columns: 1fr; }
  .facts{ grid-template-columns: 1fr 1fr; }
  footer .wrap{ grid-template-columns: 1fr; }
  .hero{ min-height: 52vh; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .cat-card img{ transition:none; }
}