/* Friends page — v4 blocks: photo-booth strip ("In their words") + FAQ heading. Prefix: fr- */
@font-face{font-family:"Space Mono";src:url(/assets/fonts/SpaceMono-Regular.woff2) format("woff2");font-display:swap}

/* ---------- 2. In their words → photo-booth strip ---------- */
.fr-booth{
  --fr-frame:236px;   /* square frame side */
  --fr-gut:8px;       /* white gutter between frames */
  --fr-pad:12px;      /* white margin around the frames */
  --fr-foot:48px;     /* bottom white margin with the date stamp */
  --fr-ink:#1d1d1b;
  display:grid;
  grid-template-columns:calc(var(--fr-frame) + var(--fr-pad)*2) minmax(0,1fr);
  gap:72px;
  align-items:start;
  margin-top:8px;
}

/* the strip itself */
.fr-strip{
  position:relative;
  margin:0;
  width:calc(var(--fr-frame) + var(--fr-pad)*2);
  padding:var(--fr-pad) var(--fr-pad) 0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 18%),
    repeating-linear-gradient(0deg,rgba(29,29,27,.016) 0 1px,transparent 1px 3px),
    #F7F3E8;
  box-shadow:0 20px 50px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.35);
  border-radius:2px;
  display:flex;
  flex-direction:column;
  gap:var(--fr-gut);
}
/* a glossy sheen running down the strip */
.fr-strip::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:2px;
  background:linear-gradient(108deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.16) 47%,rgba(255,255,255,.04) 52%,rgba(255,255,255,0) 60%);
}
/* a strip of masking tape holding it up */
.fr-strip::before{
  content:"";position:absolute;z-index:4;
  top:-11px;left:50%;width:104px;height:30px;
  transform:translateX(-50%) rotate(-2.5deg);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 5px),
    linear-gradient(180deg,rgba(221,207,170,.78),rgba(206,190,150,.72));
  box-shadow:0 1px 3px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.12);
  clip-path:polygon(0 8%,3% 0,6% 10%,9% 2%,12% 12%,15% 3%,100% 0,100% 100%,97% 92%,94% 100%,91% 90%,88% 100%,85% 92%,0 100%);
  pointer-events:none;
}
.fr-strip-frame{
  position:relative;
  width:var(--fr-frame);height:var(--fr-frame);
  overflow:hidden;
  background:#2a2f2a;
  box-shadow:inset 0 0 0 1px rgba(29,29,27,.08);
}
.fr-strip-frame img{
  display:block;width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.9) contrast(1.05);
}
.fr-strip-frame.fr-f1 img{object-position:50% 36%}
.fr-strip-frame.fr-f2 img{object-position:50% 38%}
.fr-strip-frame.fr-f3 img{object-position:50% 40%}
.fr-strip-frame.fr-f4 img{object-position:50% 48%}
/* the date stamp in the bottom white margin */
.fr-strip-stamp{
  height:var(--fr-foot);
  margin:0 calc(var(--fr-pad)*-1);
  display:flex;align-items:center;justify-content:center;
  font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;
  color:rgba(29,29,27,.62);
  white-space:nowrap;
}

/* captions, one per frame, aligned to the strip rows */
.fr-captions{
  padding-top:var(--fr-pad);
  display:grid;
  grid-template-rows:repeat(4,var(--fr-frame));
  row-gap:var(--fr-gut);
  max-width:500px;
}
.fr-cap{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:8px 0 0 56px;
  min-width:0;
}
/* leader line from the frame's top edge to the caption's index */
.fr-cap::before{
  content:"";position:absolute;left:0;top:15px;width:32px;height:1px;
  background:rgba(244,241,234,.22);
}
.fr-cap-n{
  display:block;
  font-family:"Space Mono",monospace;font-size:11px;line-height:14px;letter-spacing:.2em;
  color:var(--torch,#E8742E);
  margin-bottom:10px;
}
.fr-cap-q{
  margin:0;
  font-family:"Courier Prime",monospace;
  font-size:15.5px;line-height:1.6;
  color:#F4F1EA;
  max-width:600px;
  text-wrap:pretty;
}
.fr-cap-sig{margin-top:12px;display:flex;flex-direction:column;gap:2px}
.fr-cap-name{
  font-family:Instrument,"Instrument Serif",serif;font-weight:400;
  font-size:22px;line-height:1.1;color:#F4F1EA;letter-spacing:0;
}
.fr-cap-sig small{
  font-family:Inter,system-ui,sans-serif;font-size:13px;line-height:1.4;
  color:rgba(244,241,234,.6);
}
.fr-cap-date{
  font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.2em;
  color:rgba(244,241,234,.55);
  white-space:nowrap;
}

@media(min-width:701px) and (max-width:1100px){
  .fr-booth{gap:48px}
  .fr-cap{padding-left:44px}
  .fr-cap::before{width:24px}
}

@media(max-width:700px){
  .fr-booth{
    --fr-frame:220px;
    grid-template-columns:1fr;
    gap:40px;
    justify-items:center;
  }
  .fr-strip{position:relative;inset:auto!important;transform:none!important;max-width:260px;margin:14px auto 0}
  .fr-captions{
    grid-template-rows:none;
    row-gap:28px;
    max-width:none;width:100%;
    padding-top:0;
    justify-items:start;
  }
  .fr-cap{padding:0;justify-content:flex-start}
  .fr-cap::before{display:none}
  .fr-cap-q{font-size:14px}
  .fr-cap-name{font-size:21px}
  .fr-cap-date{white-space:normal}
}

/* ---------- 4. FAQ heading: "Notes for the one who organises" ---------- */
.friends-page .pv-faq h2{text-wrap:balance}

/* ---------- 2b. In their words → booth prints scattered on the table (replaces the strip) ---------- */
.fr-table{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.fr-table.fr-t4{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 30px;padding:24px 16px 40px}
.fr-table.fr-t3{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 40px;padding:28px 40px 44px}
.fr-table{gap:36px 28px;align-items:start;padding:24px 12px 40px;margin-top:8px}
.fr-print{position:relative;background:#F7F3E8;padding:10px 10px 30px;box-shadow:0 18px 40px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.3);transform:rotate(var(--r,0deg)) translate(var(--dx,0),var(--dy,0));transform-origin:center;margin:0}
.fr-print::before{content:"";position:absolute;inset:0;background:linear-gradient(165deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%);pointer-events:none}
.fr-print img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;filter:contrast(1.04) saturate(.96)}
.fr-print figcaption{position:absolute;left:12px;right:12px;bottom:8px;font:400 10px/1.4 "Space Mono",monospace;letter-spacing:.16em;color:#6b6353;text-transform:uppercase}
.fr-print.fr-tape::after{content:"";position:absolute;left:50%;top:-12px;width:84px;height:24px;transform:translateX(-50%) rotate(-3deg);background:rgba(232,220,180,.75);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.fr-slip{position:relative;background:#EDE7DA;color:#1d1d1b;padding:22px 22px 18px;box-shadow:0 14px 34px rgba(0,0,0,.4);transform:rotate(var(--r,0deg)) translate(var(--dx,0),var(--dy,0));margin:0;align-self:center}
.fr-slip p{margin:0;font:400 14.5px/1.55 "Courier Prime",monospace;color:#1d1d1b}
.fr-slip .fr-cap-sig{margin-top:12px}
.fr-slip .fr-cap-name{color:#1d1d1b;font-size:20px}
.fr-slip .fr-cap-sig small{color:#6b6353}
.fr-slip::before{content:"";position:absolute;left:14px;top:10px;width:46px;height:3px;background:#C8102E;opacity:.7}
.fr-table .fr-date{grid-column:1/-1;font:400 11px/1.5 "Space Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.55);margin-top:6px}
@media(max-width:1100px){.fr-table,.fr-table.fr-t3,.fr-table.fr-t4{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px;padding:16px 8px 30px}}

@media(max-width:700px){.fr-table,.fr-table.fr-t3,.fr-table.fr-t4{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px;padding:12px 4px 24px}.fr-print,.fr-slip{transform:rotate(var(--r,0deg))}.fr-slip{grid-column:1/-1;transform:none}.fr-slip p{font-size:14px}.fr-print{padding:8px 8px 30px}.fr-print figcaption{font-size:8px;letter-spacing:.1em;white-space:nowrap;left:9px;right:9px}}