/* ---------------------------------------------------------------
   Michael „Enzo“ Jantschnig — in ewiger Erinnerung
   Colours, ornaments and script headings are lifted from the
   original "Papa Erinnerung - V2.pdf" so the page matches the print.
   --------------------------------------------------------------- */

@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/poppins-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/poppins-300-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/poppins-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/poppins-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#fbfaf7;
  --paper-warm:#f3f2ec;
  --ink:#2b392c;
  --ink-script:#424c35;
  --ink-soft:#5c6a55;
  --accent:#9b7e65;
  --radius:18px;
  --shadow:0 10px 28px rgba(52,60,42,.13);
  --measure:min(1120px, 92vw);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Poppins,"Segoe UI",system-ui,sans-serif;
  font-weight:300;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}

/* ---------------- page shells ---------------- */

.page{position:relative;overflow:hidden}

.page--hero{
  background:
    radial-gradient(120% 70% at 50% 0%, #ffffff 0%, var(--paper) 45%, var(--paper-warm) 100%),
    var(--paper);
  padding:clamp(2.5rem,7vw,5.5rem) 0 0;
}
.page--hero::after{ /* paper texture from the original layout */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url(deco/paper.webp) center/cover no-repeat;
  mix-blend-mode:multiply;opacity:.5;
}
.page--hero > *{position:relative;z-index:2}

.page--memories{
  padding:clamp(3rem,8vw,6rem) 0 0;
  background:var(--paper);
}
.page--memories::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:min(1500px,100%);pointer-events:none;
  background:url(deco/bg-blaetter.webp) center top/cover no-repeat;
  opacity:.34;
  -webkit-mask-image:linear-gradient(transparent 0,#000 10%,#000 50%,transparent 100%);
  mask-image:linear-gradient(transparent 0,#000 10%,#000 50%,transparent 100%);
}
.page--memories > *{position:relative;z-index:2}

/* ---------------- watercolour leaves ---------------- */

.leaves{position:absolute;inset:0;z-index:1;pointer-events:none}
.leaf{position:absolute;opacity:.95}
.leaf--tl-a{top:-1.5%;left:-1%;width:clamp(80px,10vw,150px)}
.leaf--tl-b{top:2%;left:6%;width:clamp(90px,12vw,180px);transform:rotate(-8deg)}
.leaf--tl-c{top:9%;left:1%;width:clamp(50px,6vw,95px)}
.leaf--tr-a{top:-1%;right:0%;width:clamp(80px,10vw,150px);transform:scaleX(-1)}
.leaf--tr-b{top:6%;right:5%;width:clamp(45px,5.5vw,90px)}
.leaf--tr-c{top:1%;right:9%;width:clamp(70px,8vw,125px);transform:rotate(12deg)}
.leaf--r{top:38%;right:-2%;width:clamp(80px,10vw,160px);transform:rotate(-15deg)}

.wave{
  display:block;width:100%;margin-top:clamp(1.5rem,4vw,3rem);
  opacity:.9;
}

/* ---------------- hero ---------------- */

.hero{width:var(--measure);margin-inline:auto;text-align:center}

.hero__kicker{
  margin:0;
  font-size:clamp(1.05rem,2.6vw,1.65rem);
  font-weight:300;
  letter-spacing:.02em;
  color:var(--ink-soft);
}
.hero__name{margin:.1em auto 0;max-width:min(760px,90vw)}
.hero__nick{margin:.2rem auto 0;max-width:min(165px,26vw)}

.hero__dates{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(.7rem,2.5vw,1.6rem);
  margin:clamp(1rem,2.5vw,1.6rem) auto 0;
  color:var(--accent);
  font-size:clamp(.85rem,1.9vw,1.05rem);
  letter-spacing:.01em;
}
.hero__dates span{text-wrap:balance}
.acorn{width:clamp(20px,2.6vw,30px);flex:none}

/* ---------------- tribute block ---------------- */

.tribute{
  width:var(--measure);margin:clamp(2rem,5vw,3.5rem) auto 0;
  display:grid;gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:stretch;
}
.tribute__text{display:flex;flex-direction:column;justify-content:space-between}
.lines{list-style:none;margin:0;padding:0}
.lines li{
  font-size:clamp(.98rem,2.1vw,1.18rem);
  line-height:2;
  color:var(--ink);
}
.farewell{margin:clamp(1.6rem,4vw,2.6rem) 0 0;max-width:min(380px,80%)}
.farewell__sprig{width:78%;margin:.35rem 0 0;opacity:.85}

.tribute__photo{margin:0}
.tribute__photo .shot{width:100%}
.tribute__photo img{width:100%}

/* ---------------- photos ---------------- */

.shot{
  display:block;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .35s ease, box-shadow .35s ease;
  -webkit-tap-highlight-color:transparent;
}
.shot img{width:100%;border-radius:inherit}
.shot:hover,.shot:focus-visible{transform:translateY(-4px) scale(1.012);box-shadow:0 16px 36px rgba(52,60,42,.2)}
.shot:focus-visible{outline:2px solid var(--ink-script);outline-offset:4px}

/* page-1 collage — mirrors the two photo rows of the print layout */
.collage{
  position:relative;
  width:var(--measure);margin:clamp(2.5rem,6vw,4rem) auto 0;
  display:grid;gap:clamp(.7rem,1.8vw,1.2rem);
  grid-template-columns:repeat(6,1fr);
  align-items:center;
}
.shot--a{grid-column:span 2;transform:rotate(-1.2deg)}
.shot--b{grid-column:span 2;transform:rotate(1.5deg)}
.shot--c{grid-column:span 2}
.shot--d{grid-column:span 3}
.shot--e{grid-column:span 3}
.shot--f{grid-column:span 3;transform:rotate(-.8deg)}
.shot--g{grid-column:span 3}
.shot--a:hover,.shot--a:focus-visible{transform:rotate(-1.2deg) translateY(-4px)}
.shot--b:hover,.shot--b:focus-visible{transform:rotate(1.5deg) translateY(-4px)}
.shot--f:hover,.shot--f:focus-visible{transform:rotate(-.8deg) translateY(-4px)}

/* floating icon badges, exactly the ones used in the print */
.badge{
  position:absolute;z-index:5;pointer-events:none;
  width:clamp(44px,5vw,68px);
  filter:drop-shadow(0 4px 10px rgba(52,60,42,.22));
}
.badge--heart{left:-1.5%;top:52%}
.badge--verein{left:46%;bottom:-6%}
.badge--globe{left:26%;top:24%}
.badge--shirt{left:62%;top:47%}
.badge--paw{left:44%;bottom:14%}

/* ---------------- memories ---------------- */

.memories__title{margin:0 auto;width:min(720px,88vw)}

.gallery-wrap{position:relative;width:var(--measure);margin:clamp(2rem,5vw,3.5rem) auto 0}

.gallery{
  columns:3;
  column-gap:clamp(.7rem,1.8vw,1.2rem);
}
.gallery .shot{
  width:100%;
  margin-bottom:clamp(.7rem,1.8vw,1.2rem);
  break-inside:avoid;
}

/* ---------------- closing ---------------- */

.closing{
  width:var(--measure);margin-inline:auto;
  padding:clamp(3rem,7vw,5rem) 0 clamp(2.5rem,6vw,4rem);
  text-align:center;
}
.closing__divider{width:min(280px,60vw);margin:0 auto 1.2rem;opacity:.9}
.closing p{margin:0;color:var(--ink-soft);font-size:clamp(.9rem,1.9vw,1.05rem);letter-spacing:.02em}

/* ---------------- lightbox ---------------- */

.lightbox{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(28,33,25,.94);
  animation:fade .2s ease;
}
.lightbox[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lightbox__img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.lightbox__close,.lightbox__nav{
  position:absolute;z-index:2;
  border:0;background:rgba(255,255,255,.1);color:#f4f3ee;
  cursor:pointer;line-height:1;
  border-radius:999px;
  transition:background .2s ease;
}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.22)}
.lightbox__close{top:1rem;right:1rem;width:44px;height:44px;font-size:1.9rem}
.lightbox__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2.4rem}
.lightbox__nav--prev{left:clamp(.4rem,2vw,1.5rem)}
.lightbox__nav--next{right:clamp(.4rem,2vw,1.5rem)}

/* ---------------- reveal on scroll ---------------- */

/* opacity-only on .shot so the collage keeps its tilt */
.reveal{opacity:0}
.reveal:not(.shot){transform:translateY(18px)}
.reveal.is-in{opacity:1;transition:opacity .7s ease, transform .7s ease}
.reveal.is-in:not(.shot){transform:none}

/* ---------------- responsive ---------------- */

@media (max-width:900px){
  .tribute{grid-template-columns:1fr}
  .tribute__photo{max-width:min(360px,70vw);margin-inline:auto}
  .farewell{margin-inline:auto;max-width:min(340px,75%)}
  .lines{text-align:center}
  .gallery{columns:2}
  .badge{display:none}
  .leaf--r{display:none}
}

@media (max-width:600px){
  :root{--measure:min(1120px,86vw)}
  .collage{grid-template-columns:repeat(2,1fr)}
  .shot--a,.shot--b,.shot--c,.shot--d,.shot--e,.shot--f,.shot--g{grid-column:span 1;transform:none}
  .shot--d,.shot--e{grid-column:span 2}
  .hero__dates{flex-direction:column;gap:.5rem}
  .acorn{display:none}
}

@media (prefers-reduced-motion:reduce){
  .shot,.reveal,.reveal.is-in,.lightbox{transition:none;animation:none}
  .reveal{opacity:1;transform:none}
  .shot:hover{transform:none}
}

/* ---------------- print ---------------- */

@media print{
  body{background:#fff}
  .lightbox,.badge{display:none !important}
  .page{page-break-after:always}
  .shot{box-shadow:none;break-inside:avoid}
  .reveal{opacity:1;transform:none}
}