/* Krštenja i porodica: the family album, warm and slow. */

/* ============ hero: the title and his words hang between two photos ============ */
.ch{background:var(--band);align-items:start;padding:112px 0 clamp(90px,9vw,150px)}
.ch-a{grid-column:full-start/m 5;grid-row:1;aspect-ratio:3/4;overflow:hidden;background:var(--band2)}
.ch-t{grid-column:m 5/m 10;grid-row:1;align-self:center;padding:0 clamp(0px,1vw,16px)}
.ch-h{--span:5;--fmax:130px;line-height:.98}
/* its column carries side padding, so the five columns minus that padding (the full five cut the stop of „und Familie.") */
@media (min-width:900px){.ch-h{--w:calc((var(--main) - 11 * var(--gut)) * 5 / 12 + 4 * var(--gut) - 2 * clamp(0px, 1vw, 16px))}}
.ch-q{margin-top:clamp(28px,3vw,48px)}
.ch-q p{font-weight:600;font-size:clamp(20px,1.75vw,28px);letter-spacing:-.004em;line-height:1.22;text-wrap:pretty}
.ch-q figcaption{margin-top:16px;font-size:16px;font-weight:600;color:var(--ink2)}
.qm{color:#B5AFA5}
.ch-b{grid-column:m 10/m-end;grid-row:1;align-self:end;aspect-ratio:3/4;overflow:hidden;background:var(--band2)}
@media (max-width:899px){
  .ch{padding-top:96px}
  .ch-t{grid-column:m 1/m-end;grid-row:1;padding:0}
  .ch-h{--span:12;--fmaxm:100px}
  .ch-q p{font-size:clamp(20px,5.6vw,24px)}
  .ch-a{grid-column:full-start/m 8;grid-row:2;margin-top:34px}
  .ch-b{grid-column:m 8/m-end;grid-row:2;margin-top:120px}
}

/* ============ the album: pick a photo, it opens in the big frame ============ */
.ca{padding:clamp(110px,11vw,180px) 0;align-items:end}
.ca-h{grid-column:m 1/m 8;grid-row:1;--span:7;--fmax:150px;line-height:.98}
.ca-hint{grid-column:m 8/m-end;grid-row:1;font-size:var(--body);font-weight:500;padding-bottom:.4em;max-width:20em}
.ca-big{grid-column:m 1/m 8;grid-row:2;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--band);margin-top:clamp(36px,4vw,64px)}
.ca-f{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.ca-f.is-on{opacity:1;z-index:2}
.ca-f.is-in{animation:caIn 1.1s var(--e1) both}
@keyframes caIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.ca-ts{grid-column:m 8/m-end;grid-row:2;align-self:end;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut)}
.ca-t{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--band);opacity:.55;transition:opacity .4s}
.ca-t:hover{opacity:.85}
.ca-t.is-on{opacity:1}
.ca-t::after{content:"";position:absolute;left:10px;bottom:10px;width:12px;height:12px;background:var(--red);transform:scale(0);transition:transform .45s var(--e2)}
.ca-t.is-on::after{transform:scale(1)}
.ca-t:focus-visible{outline-offset:-4px}
@media (max-width:899px){
  .ca{align-items:start}
  .ca-h{grid-column:m 1/m-end;--span:12;--fmaxm:96px}
  .ca-hint{grid-column:m 1/m-end;grid-row:2;margin-top:16px;padding:0}
  .ca-big{grid-column:full-start/full-end;grid-row:3;margin-top:26px}
  .ca-ts{grid-column:m 1/m-end;grid-row:4;margin-top:var(--gut);grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}

/* ============ what is certain, as one ledger row ============ */
.cf{padding:clamp(60px,6vw,110px) 0 clamp(110px,11vw,180px)}
.cf-g{align-items:center;row-gap:0}
.cf-n{grid-column:1/6;font-weight:800;font-size:clamp(34px,3.6vw,62px);letter-spacing:-.01em;line-height:1}
.cf-c{grid-column:6/10;font-size:clamp(20px,1.9vw,30px)}
.cf-c .chip-xl{font-size:1em;padding:.36em .9em .42em .74em;white-space:normal}
.cf-b{grid-column:10/13;justify-self:end}
.cf-x{grid-column:1/7;margin-top:clamp(34px,3.6vw,60px);font-weight:600;font-size:clamp(22px,2vw,32px);letter-spacing:-.005em;line-height:1.16;text-wrap:balance}
.cf-l{grid-column:7/12;margin-top:clamp(34px,3.6vw,60px);font-size:var(--body);font-weight:500;line-height:1.5;align-self:end}
@media (max-width:899px){
  .cf-n,.cf-c,.cf-b,.cf-x,.cf-l{grid-column:1/-1;justify-self:start}
  .cf-c{margin-top:18px;font-size:19px}
  .cf-x{margin-top:28px}
  .cf-l{margin-top:16px}
  .cf-b{grid-row:6;margin-top:28px}
}