/* gertrud — one grid, everything sits on it */

:root{
  --cream:#FEF8EE;
  --ink:#2A2825;
  --line:rgba(42,40,37,.16);
  --col:minmax(0,1fr);
  --gap:24px;
  --pad:clamp(20px,5vw,80px);
  --max:1520px;
}

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

html{scroll-behavior:smooth}

body{
  font-family:"David Libre",Georgia,serif;
  background:var(--cream);
  color:var(--ink);
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{opacity:.6}

/* the grid — 12 columns, one container, every section aligns to it */
.grid{
  display:grid;
  grid-template-columns:repeat(12,var(--col));
  gap:var(--gap);
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{padding-block:clamp(56px,9vw,140px)}

/* section heading sits in the grid, right-aligned */
.eyebrow{
  grid-column:1/-1;
  font-size:clamp(40px,5vw,64px);
  font-weight:500;
  line-height:1.05;
  margin-bottom:clamp(28px,4vw,56px);
}
.head-row{
  grid-column:1/-1;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  margin-bottom:clamp(28px,4vw,56px);
}
.head-row .eyebrow{margin:0}
.more{font-size:22px;border-bottom:1px solid var(--ink);padding-bottom:2px}

/* ---------- header ---------- */
site-header,site-footer{display:block}
.site-head{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--cream) 88%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head .grid{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:18px;
}
.brand svg{height:44px;width:auto;fill:var(--ink)}
.nav{
  display:flex;gap:clamp(20px,3vw,48px);
  align-items:center;
  font-size:22px;
}

/* ---------- hero / upcoming event ---------- */
.hero-media{
  grid-column:1/10;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#111;
}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02)}
.hero-card{
  grid-column:1/10;
  margin-top:clamp(24px,3vw,40px);
  display:flex;flex-direction:column;gap:18px;
}
.hero-card .date{font-size:clamp(40px,4.5vw,60px);font-weight:500;line-height:1}
.hero-card .kind{font-size:26px;font-weight:500}
.hero-card .film{font-size:30px;font-weight:700;margin-top:8px}
.hero-card .meta{font-size:19px;line-height:1.7;opacity:.85}
.times{display:flex;gap:40px;margin-top:8px;font-size:20px}
.times b{font-weight:700}
.pill{
  align-self:flex-start;margin-top:10px;
  border:1px solid var(--ink);border-radius:999px;
  padding:8px 22px;font-size:19px;
}

/* ---------- events slider ---------- */
.slider{grid-column:1/-1}
.track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3*var(--gap))/4);
  gap:var(--gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding-bottom:4px;
}
.track::-webkit-scrollbar{display:none}
.track .card{scroll-snap-align:start}
.slider-nav{display:flex;gap:12px;margin-top:clamp(20px,2.5vw,32px)}
.snav{
  width:54px;height:54px;border-radius:999px;
  border:1px solid var(--ink);background:none;color:inherit;
  font-size:26px;line-height:1;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.snav:hover{background:var(--ink);color:var(--cream);opacity:1}
.card{display:flex;flex-direction:column;gap:16px}
.card .ph{aspect-ratio:3/4;overflow:hidden;background:#111}
.card .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .6s ease}
.card:hover .ph img{transform:scale(1.04)}
.card .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card .name{font-size:clamp(24px,2.2vw,32px);font-weight:500}
.card .when{font-size:24px;opacity:.7;white-space:nowrap}

/* ---------- shop ---------- */
.shop-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,var(--col));gap:clamp(28px,3vw,56px)}
.product{display:flex;flex-direction:column;gap:14px}
.product .ph{aspect-ratio:1/1;overflow:hidden;background:#111}
.product .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.product:hover .ph img{transform:scale(1.04)}
.product .name{font-size:clamp(22px,2vw,28px);font-weight:500}
.product .price{font-size:22px;opacity:.7}
.product .buy{
  align-self:flex-start;margin-top:4px;
  border:1px solid var(--ink);border-radius:999px;
  padding:8px 26px;font-size:19px;cursor:pointer;
  background:none;color:inherit;font-family:inherit;
  transition:background .2s,color .2s;
}
.product .buy:hover{background:var(--ink);color:var(--cream);opacity:1}

/* ---------- events list ---------- */
.event-list{grid-column:1/-1;display:flex;flex-direction:column}
.event{
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:clamp(20px,3vw,48px);
  align-items:center;
  padding-block:clamp(22px,3vw,36px);
  border-top:1px solid var(--line);
}
.event:last-child{border-bottom:1px solid var(--line)}
.event .ev-date{font-size:clamp(30px,3vw,44px);font-weight:500;line-height:1}
.event .ev-body{display:flex;flex-direction:column;gap:6px}
.event .ev-title{font-size:clamp(24px,2.2vw,32px);font-weight:500}
.event .ev-meta{font-size:19px;opacity:.75}
.event .ev-go{font-size:20px;border-bottom:1px solid var(--ink);padding-bottom:2px;white-space:nowrap}

/* ---------- our place ---------- */
.place-lead{grid-column:1/8;align-self:center;display:flex;flex-direction:column;gap:24px}
.place-lead p{font-size:22px;line-height:1.75;max-width:46ch}
.place-a{grid-column:8/13;aspect-ratio:3/4;overflow:hidden}
.place-b{grid-column:1/-1;margin-top:var(--gap);aspect-ratio:21/9;overflow:hidden}
.place-a img,.place-b img{width:100%;height:100%;object-fit:cover}

/* ---------- place page ---------- */
.ph-lead{grid-column:1/7;align-self:end;order:2}
.ph-lead p{font-size:clamp(22px,2.2vw,28px);line-height:1.7;max-width:42ch}
.ph-hero{grid-column:7/13;order:1;aspect-ratio:4/5;overflow:hidden;background:#111}
.ph-hero img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02)}

.sub{font-size:clamp(26px,2.6vw,34px);font-weight:700;margin-bottom:18px}
.story-text{grid-column:1/7;align-self:center;display:flex;flex-direction:column;gap:20px}
.story-text p{font-size:20px;line-height:1.75;opacity:.9}
.story-img{grid-column:7/13;aspect-ratio:3/4;overflow:hidden;background:#111}
.story-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}

.acts{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,var(--col));gap:clamp(24px,3vw,48px)}
.act{display:flex;flex-direction:column;gap:14px}
.act .ph{aspect-ratio:3/4;overflow:hidden;background:#111}
.act .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .6s ease}
.act:hover .ph img{transform:scale(1.04)}
.act .name{font-size:clamp(24px,2.2vw,30px);font-weight:500}
.act .note{font-size:18px;line-height:1.6;opacity:.75}

.gal-a{grid-column:1/8;aspect-ratio:16/10;overflow:hidden;background:#111}
.gal-b{grid-column:8/13;aspect-ratio:16/10;overflow:hidden;background:#111}
.gal-c{grid-column:1/-1;margin-top:var(--gap);aspect-ratio:21/9;overflow:hidden;background:#111}
.gal-a img,.gal-b img,.gal-c img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}

.visit-a{grid-column:1/5}
.visit-b{grid-column:5/9}
.visit-c{grid-column:9/13;align-self:end}
.visit-a p,.visit-b p{font-size:20px;line-height:1.7}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding-block:clamp(48px,7vw,90px)}
.foot-vector{grid-column:2/12;justify-self:center;margin-bottom:clamp(48px,7vw,96px)}
.foot-vector svg{width:100%;height:auto}
.foot-nav{grid-column:1/8;display:flex;gap:clamp(28px,5vw,72px);flex-wrap:wrap}
.foot-nav ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:20px}
.foot-mark{grid-column:11/13;justify-self:start}
.foot-mark svg{height:80px;width:auto;fill:var(--ink)}
.foot-bottom{grid-column:1/-1;margin-top:clamp(40px,6vw,80px);display:flex;justify-content:space-between;font-size:17px;opacity:.7;flex-wrap:wrap;gap:12px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  body{font-size:16px}
  .hero-media{grid-column:1/-1;aspect-ratio:16/9}
  .hero-card{grid-column:1/-1}
  .track{grid-auto-columns:calc((100% - var(--gap))/2)}
  .place-lead,.place-a{grid-column:1/-1}
  .place-a{aspect-ratio:4/3}
  .foot-vector{grid-column:1/-1}
  .foot-nav{grid-column:1/-1}
  .foot-mark{grid-column:1/-1;margin-top:32px}
  .nav{font-size:18px;gap:18px}
  .shop-grid{grid-template-columns:repeat(2,var(--col))}
  .event{grid-template-columns:90px 1fr;gap:20px}
  .event .ev-go{grid-column:2;justify-self:start}
  .ph-lead,.ph-hero,.story-text,.story-img{grid-column:1/-1}
  .ph-hero{aspect-ratio:4/3}
  .story-img{aspect-ratio:4/3;margin-top:var(--gap)}
  .acts{grid-template-columns:repeat(2,var(--col))}
  .gal-a,.gal-b{grid-column:1/-1}
  .gal-b{margin-top:var(--gap)}
  .visit-a,.visit-b,.visit-c{grid-column:1/-1}
  .visit-b,.visit-c{margin-top:28px}
}
@media(max-width:560px){
  .track{grid-auto-columns:calc(100% - 48px)}
  .shop-grid{grid-template-columns:var(--col)}
  .acts{grid-template-columns:var(--col)}
  .nav{display:none}
}