:root{
  /* colors sampled directly from the PDF's fill values */
  --bg: #c0ac8b;
  --coral: #ea4e4b;
  --ink: #704138;
  --card-bg: #c7b8b9;
  --card-border: #987665;
  --line: rgba(112,65,56,.4);

  /* Big Caslon for headings — the real typeface ships with macOS/iOS, so we
     call it by name first; Libre Caslon Display is the closest open webfont
     for everyone else until licensed Big Caslon webfont files are supplied. */
  --font-display: 'Big Caslon', 'Big Caslon FB', 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Tenor Sans', Helvetica, Arial, sans-serif;
}

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

html{ scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  line-height: 1.15;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

img{ display:block; max-width:100%; height:auto; }

.wrap{
  max-width: 940px;
  margin: 0 auto;
  position: relative;
  overflow-x: clip;
}

/* NAV — uppercase, centered */
nav.site-nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
nav.site-nav ul{
  list-style:none;
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
  gap: 2.2rem;
  padding: 1.1rem 6vw;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .15em;
}
nav.site-nav a{ transition: color .2s ease; }
nav.site-nav a:hover{ color: var(--coral); }

/* SECTION LABEL DIVIDER — hairline below only */
.section-label{
  text-align:center;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
  margin: 0 0 4rem;
}

/* shared "split hero" pattern: heading+tags upper-left, photo upper-right (overlapping bleed) */
.split-hero{
  position: relative;
  display:flex;
  flex-wrap: wrap;
  gap: 4%;
  align-items:flex-start;
  padding: 3.5rem 0 4rem;
}
.split-hero .split-text{ flex: 1 1 260px; min-width: 0; padding-left: 1rem; }
.split-hero .split-media{ flex: 0 1 47%; }
.split-hero .split-media img{ border-radius: 1px; }

.display-h{
  font-family: var(--font-display);
  color: var(--coral);
  font-weight: 400;
  line-height: .88;
  text-transform: uppercase;
}

.tag-list{
  list-style:none;
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.3;
  margin-top: 1.3rem;
}
.align-right .tag-list{ text-align:right; }
.tag-list a:hover{ color: var(--coral); }

/* HERO */
.hero .split-text h1{
  /* font-size: clamp(2.8rem, 9vw, 5rem); */
  font-size: 100px;
}
.hero .split-media{
  flex-basis: 58%;
  margin-top: 7.5rem;
}
.hero-tags{
  list-style:none;
  margin-top: 2rem;
  color: var(--coral);
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 400;
}

/* SIGNATURE — full-width squiggle overlaid on the lower third of the photo above it.
   Positioned with top:0 + a width-relative margin-top (percentages on margin always
   resolve against the containing block's WIDTH) so it lands on the photo consistently
   no matter how tall the text column next to it is. */
.signature{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}
.signature img{ width:100%; display:block; }
.hero .signature{ margin-top: 40%; }
.about .signature{ margin-top: 40%; }

/* INTRO */
.intro{
  text-align:center;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 6% 5rem;
}
.intro h2{
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: .02em;
  margin-bottom: 2rem;
}
.intro h2 .titles{
  font-family: var(--font-body);
  font-size: 1.125rem;
  white-space: nowrap;
}
.intro p{
  font-size: 1.125rem;
  line-height: 1.5;
  margin-bottom: 1.4rem;
}
blockquote{
  font-family: var(--font-display);
  color: var(--coral);
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 7rem auto 2rem;
}
blockquote .attribution{
  display:block;
  font-family: var(--font-body);
  font-size: 1rem;
  margin-top: .8rem;
  color: rgba(234,78,75,.6);
}

.portfolio-quote{
  text-align:center;
  padding: 0 6% 5rem;
}

/* PORTFOLIO — two independent staggered columns (masonry zigzag) */
.portfolio-columns{
  display:flex;
  gap: 4%;
  padding: 0 0 4.5rem;
}
.portfolio-col{
  flex: 1 1 46%;
  display:flex;
  flex-direction:column;
  gap: 5rem;
}
.portfolio-col.col-right{ margin-top: 48%; }

.portfolio-block.align-right{ text-align:right; }

.portfolio-block h3{
  /* font-size: clamp(1.8rem, 4.2vw, 3.75rem); */
  font-size: 70px;
  margin-bottom: 0;
}

.portfolio-block .portfolio-media{ margin-top: 1.6rem; }
.portfolio-block .portfolio-media img{ border-radius: 1px; width:100%; }

a.portfolio-block{ 
  display:block; 
  margin-top: 60px;
}
a.portfolio-block .portfolio-media img{ transition: opacity .2s ease; }
a.portfolio-block:hover .portfolio-media img{ opacity: .85; }
a.portfolio-block:hover h3{ color: var(--ink); }

/* WORKSHOPS */
.workshops{ padding-bottom: 5rem; }
.workshops .section-label{ margin-bottom: 0; }
.workshops-hero {
  position: relative;
  display:flex;
  flex-wrap: wrap;
  gap: 4%;
  align-items:flex-start;
  padding: 3.5rem 0 4rem;
}
.workshops-hero .split-text h2{
  /* font-size: clamp(2.4rem, 7vw, 4rem); */
  font-size: 70px;
  padding: 2rem 0;
}
.workshops-hero .split-media img{
  float: right;
  width: 70%;
} 
.workshops blockquote{ text-align:center; max-width: 640px; padding: 0 6%; }

/* each .workshop-item is flattened via display:contents so its card,
   datetime and cta become direct grid items — card lands in row 1,
   datetime in row 2, cta in row 3. Grid's own row-stretch (not flex-grow
   inside a stretched item, which Safari sizes inconsistently) is what
   keeps the 3 cards equal height, and putting the cta in its own row
   keeps "hier Anmelden/Anfragen" aligned across cards regardless of how
   many lines the datetime text takes. */
.workshop-grid{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 6px;
  row-gap: 1.6rem;
  padding: 0 4%;
  margin-top: 1rem;
}
.workshop-item{ display:contents; text-align:center; }
.workshop-card{
  border: 4px solid var(--card-border);
  background: var(--card-bg);
  color: var(--ink);
  padding: 4.6rem 1.4rem;
  text-align:center;
}
.workshop-card h4{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: .95;
  font-weight: 400;
  margin-bottom: .7rem;
  text-transform: uppercase;
}
.workshop-card .sub{
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 4%;
}
.workshop-grid .datetime{
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
  align-self:start;
}
.workshop-grid .cta{
  display:inline-block;
  align-self:start;
  color: var(--coral);
  font-size: 1rem;
  border-bottom: 1px solid transparent;
}
.workshop-grid .cta:hover{ border-bottom-color: var(--coral); }

a.workshop-card{ display:block; transition: border-color .2s ease; }
a.workshop-card:hover{ border-color: var(--coral); }

/* ABOUT — same split-hero pattern, full-width copy below */
.about{ padding-bottom: 5rem; }
.about .split-text h2{
  /* font-size: clamp(2rem, 6vw, 3.75rem); */
  font-size: 70px;
}
.about .split-media{ flex-basis: 58%; margin-top: 5.5rem; }
.about-copy{
  max-width: 660px;
  margin: 3.5rem auto 0;
  padding: 0 6%;
  text-align:center;
}
.about-copy p{
  font-size: 1.125rem;
  line-height: 1.5;
  margin-bottom: 1.3rem;
}
.about-copy blockquote{ text-align:center; }

/* SERVICE SUBPAGES — Interior Design / Fine Art Painting / Marketing */
.service .split-media{
  flex-basis: 50%;
  margin-top: 5.5rem;
}
.service .split-text h1{
  /* font-size: clamp(2.6rem, 8vw, 4.5rem); */
  font-size: 70px;
}

.lead-quote{
  text-align:center;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 6% 4rem;
  font-size: 1.375rem;
  line-height: 1.5;
}

.service-copy{
  max-width: 620px;
  margin: 0 auto;
  padding: 0 6% 5rem;
  text-align: center;
}
.service-copy p{
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 1.4rem;
}
.service-copy blockquote{ text-align:center; }

.gallery-banner{ padding: 1rem 0 0; }
.gallery-banner img{ width:100%; border-radius: 1px; }

.gallery-columns{
  display:flex;
  gap: 4%;
  padding: 3rem 0 4.5rem;
}
.gallery-col{
  flex: 1 1 46%;
  display:flex;
  flex-direction:column;
  gap: 1.6rem;
}
.gallery-col.col-right{ margin-top: 14%; }
.gallery-col img{ border-radius: 1px; width:100%; }

/* small uppercase kicker line above a lead statement (workshop detail pages) */
.eyebrow{
  text-align:center;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 1rem;
  margin: 0 auto;
  padding: 0 6%;
}

.service-copy h2{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  margin: 2rem 0 .8rem;
}
.service-copy ul{
  margin: 0 0 1.4rem;
  text-align: left;
}
.service-copy ul li{
  font-size: 1.0625rem;
  line-height: 1.6;
  padding-left: 1.2em;
  position: relative;
}
.service-copy .text-emphasis{
  text-align:center;
  font-size: 1.1875rem;
  line-height: 1.5;
  margin: 2.5rem 0;
}
.service-copy.home-styling {
  padding: 0 6% 2rem;
}

.dates{
  text-align:center;
  padding: 0rem 6% 2em;
}
.dates h2{
  font-family: var(--font-display);
  color: var(--coral);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}
.dates p{
  font-family: var(--font-display);
  color: var(--coral);
  font-size: 1.75rem;
  line-height: 1.7;
}

/* KONTAKT */
footer.kontakt{
  text-align:center;
  padding: 0 6% 4rem;
}
footer.kontakt .section-label{ margin-bottom: 2rem; }
footer.kontakt p{ font-size: 1.125rem; margin-bottom: .3rem; }

@media (max-width: 760px){
  .split-hero{ flex-direction:column; padding: 1.5rem 0; gap: 1.5rem; }
  .split-hero .split-text{ flex-basis:auto; padding-left:0; }
  .split-hero .split-media{ flex-basis:auto; width:80%; max-width:320px; margin:0 auto; order:-1; }
  .about .split-media{ flex-basis:auto; }
  .service .split-media{ flex-basis:auto; }

  .hero .signature{ margin-top: 60%; }
  .about .signature{ margin-top: 40%; }

  .hero-tags{ margin-top: 1.2rem; }

  .section-label{ margin-bottom: 2rem; padding: 1.1rem 0; }

  .intro{ padding: 0 6% 2rem; }
  .intro h2{ margin-bottom: 1.2rem; }
  blockquote{ font-size: 1.5rem; margin: 1.5rem 0; }

  .portfolio-quote{ padding: 0 6% 2.5rem; }
  .portfolio-columns{ flex-direction:column; gap: 2.5rem; padding-bottom: 2.5rem; }
  .portfolio-col{ gap: 2.5rem; }
  .portfolio-col.col-right{ margin-top:0; }
  .portfolio-block,
  .portfolio-block.align-right{ text-align:left; }
  .align-right .tag-list{ text-align:left; }
  .portfolio-block .portfolio-media{ margin-top: 1rem; }

  .workshops{ padding-bottom: 2.5rem; }
  .workshops blockquote{ margin-top: 2rem; }
  .workshop-grid{ display:block; }
  .workshop-item{ display:block; margin-bottom: 2rem; }
  .workshop-item:last-child{ margin-bottom: 0; }
  .workshop-card{ margin-bottom: 1rem; max-width: 250px; margin-left: auto; margin-right: auto; }
  .workshop-grid .datetime{ margin-bottom: .8rem; }

  .about{ padding-bottom: 2.5rem; }
  .about-copy{ margin-top: 1.5rem; }

  .lead-quote{ font-size: 1.2rem; padding: 0 6% 2rem; }
  .service-copy{ padding: 0 6% 1rem; }
  .gallery-columns{ flex-direction:column; gap: 1.5rem; padding: 1.5rem 0 2.5rem; }
  .gallery-col{ gap: 1.5rem; }
  .gallery-col.col-right{ margin-top:0; }

  .service-copy .text-emphasis{ margin: 1.8rem 0; }
  .dates{ padding-top: .5rem; }

  footer.kontakt{ padding: 0 6% 2.5rem; }

  nav.site-nav ul{ gap: 1.2rem 1.8rem; font-size: .72rem; }
}