/* Soundscapes — the reading pages: about, line-up, get involved, faq.
   Needs site.css, which carries the fonts, the tokens, the grain, the shell
   and the footer. Everything here is the column and what lives inside it.

   © 2026 Oliver Freiländer · https://www.oliver-freilaender.com
   Concept, design and code, with the playground team.
   Licensed to Soundscapes FZC for this festival — see /LICENSE.txt. */

/* One column, centred, never the full width of the screen — and always a
   margin to the edge, phone included. The side padding belongs to the article
   itself, so no child can push past it. */
article{
  max-width:680px;
  margin-inline:auto;
  padding-block:clamp(84px,11vh,118px) clamp(56px,8vh,88px);
  padding-inline:clamp(24px,4vw,44px);
}
article > *{max-width:100%}
/* the pictures are the one thing allowed out of the measure */
article > figure{max-width:none}
/* the line-up carries a name list and two pictures and needs the room */
article.wide{max-width:960px}

h1{
  font-family:var(--hand);font-weight:700;color:var(--ink);
  font-size:clamp(36px,6.6vw,68px);line-height:.94;transform:rotate(-1.2deg);
  margin-bottom:clamp(22px,3.6vh,34px);
}
h1 i{font-style:normal;color:var(--orange)}
h1~h1{margin-top:clamp(70px,12vh,140px)}

p{
  font-family:var(--serif);font-size:clamp(16.5px,1.75vw,19px);line-height:1.72;
  margin-bottom:1.05em;
}
.big{
  font-size:clamp(19px,2.1vw,24px);line-height:1.55;color:var(--ink);
  margin-block:1.1em;
}
.sw{color:var(--lilac);font-style:italic}

/* the four small rituals, set as one line on a wide screen and as a stack on
   a phone, where holding them on one line simply ran them off the edge */
.rituals{
  font-family:var(--serif);font-style:italic;color:var(--ink);
  font-size:clamp(17px,1.9vw,20px);line-height:1.75;
  margin-block:1em 1.15em;
}
.rituals span{white-space:nowrap}
.rituals .sep{color:var(--orange);font-style:normal;padding-inline:.4em}

/* site.css already sets the face; here it becomes a line of its own */
.hand{
  display:block;color:var(--orange);
  font-size:clamp(21px,2.7vw,31px);line-height:1.15;transform:rotate(-1deg);
  margin-block:.9em;
}
.aside{
  display:block;
  font-family:var(--hand);font-weight:600;color:var(--ink);
  font-size:clamp(18px,2vw,23px);transform:rotate(-1deg);
  margin-block:1em;
}
.aside b{color:var(--orange)}
.karibuni{
  display:block;
  font-family:var(--hand);font-weight:700;color:var(--ink);
  font-size:clamp(38px,6.8vw,68px);line-height:1;transform:rotate(-1.6deg);
  margin-top:clamp(28px,4.6vh,44px);
}
.karibuni i{font-style:normal;color:var(--orange)}

/* the photographs are pulled back the same way the film on the front page is,
   so they sit in the paper rather than on top of it */
/* the pictures break the measure: they run wider than the column, because a
   drawing that ends where the text ends reads as an illustration in a report */
figure{
  margin-block:clamp(34px,5.5vh,64px);
  width:min(126%,96vw);
  margin-inline:calc((100% - min(126%,96vw)) / 2);
}
figure img{
  width:100%;height:auto;
  /* --zoom is written onto the figure by site.js as the drawing comes up
     the window, so it opens on the way down and closes on the way back */
  transform:scale(var(--zoom,1));
  transition:transform .5s linear;
  /* the drawings are ink on paper. Without multiply the paper comes with them
     and sits on the page as a pale box. */
  mix-blend-mode:multiply;
  filter:blur(.25px);
  /* wide on the sides, so the picture leaves the column without an edge; the
     top and bottom hold more, or the drawing loses its head and its feet */
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,rgba(0,0,0,.14) 7%,rgba(0,0,0,.55) 18%,rgba(0,0,0,.9) 30%,#000 40%,#000 60%,rgba(0,0,0,.9) 70%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.14) 93%,transparent 100%),
    linear-gradient(to bottom,transparent 0,rgba(0,0,0,.4) 5%,rgba(0,0,0,.85) 12%,#000 22%,#000 78%,rgba(0,0,0,.85) 88%,rgba(0,0,0,.4) 95%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,rgba(0,0,0,.14) 7%,rgba(0,0,0,.55) 18%,rgba(0,0,0,.9) 30%,#000 40%,#000 60%,rgba(0,0,0,.9) 70%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.14) 93%,transparent 100%),
    linear-gradient(to bottom,transparent 0,rgba(0,0,0,.4) 5%,rgba(0,0,0,.85) 12%,#000 22%,#000 78%,rgba(0,0,0,.85) 88%,rgba(0,0,0,.4) 95%,transparent 100%);
  mask-composite:intersect;
}
figcaption{
  margin-top:10px;text-align:center;
  font-weight:600;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--tx);opacity:.6;
}

.page-foot{margin-top:clamp(50px,9vh,90px)}
.page-foot a{
  font-family:var(--hand);font-weight:700;font-size:clamp(22px,2.4vw,28px);
  color:var(--orange);text-decoration:none;border-bottom:2px solid #E63B0D66;
}
.page-foot a:hover{border-color:var(--orange)}

/* ---------- line-up ---------- */
.lineup-names{
  display:block;
  font-family:var(--serif);font-size:clamp(19px,2.1vw,25px);line-height:1.85;
  margin-top:clamp(20px,3.4vh,34px);
}
.lineup-names .ln{white-space:nowrap}
.lineup-names .dot{color:var(--orange);margin:0 .5em;opacity:.7}
.more-tba{
  display:block;margin-top:.8em;
  font-family:var(--hand);font-weight:700;
  font-size:clamp(30px,4vw,54px);line-height:1;color:var(--orange);
  transform:rotate(-1.2deg);white-space:nowrap;
}

/* ---------- the two rigs ----------
   Two cards on a twelve-column grid, the second dropped and narrowed, so the
   pair reads as a spread rather than as a row of equal tiles. */
.rig-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(26px,4vw,54px);
  margin-top:clamp(26px,4.4vh,46px);
}
.rig-a{grid-column:1 / span 7}
.rig-b{grid-column:8 / span 5;margin-top:clamp(50px,10vh,120px)}
.rig-img{display:block;overflow:hidden;aspect-ratio:4/3}
.rig-b .rig-img{aspect-ratio:5/6}
.rig-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.rig-card:hover .rig-img img{transform:scale(1.05)}
.rig-meta{display:block;margin-top:clamp(14px,2vh,22px)}
.rig-name{
  display:block;font-family:var(--hand);font-weight:700;
  font-size:clamp(26px,3vw,40px);line-height:1;color:var(--ink);transition:color .3s;
}
.rig-card:hover .rig-name{color:var(--orange)}
.rig-sub{
  display:block;margin-top:6px;
  font-family:var(--sans);font-weight:600;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;opacity:.7;
}
.rig-body{margin-top:14px}
.rig-body p{font-size:16px;line-height:1.7;margin-bottom:.8em}
.rig-body a{color:var(--lilac);text-decoration:none;border-bottom:1.5px solid #7B5EA755}
.rig-body a:hover{color:var(--orange);border-color:var(--orange)}

/* ---------- faq ---------- */
.faq-intro{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(17px,1.8vw,19.5px);line-height:1.65;opacity:.8;
  margin-bottom:clamp(30px,5vh,52px);
}
/* the groups are signposts, not headlines: small, set in the hand, and given
   room above so the list reads as sections rather than one long ladder */
.faq-group{
  font-family:var(--hand);font-weight:700;color:var(--orange);
  font-size:clamp(21px,2.3vw,27px);line-height:1.1;
  transform:rotate(-.8deg);
  margin:clamp(38px,6vh,64px) 0 2px;
}
.faq-group:first-of-type{margin-top:0}
.faq-list{margin-top:clamp(20px,3.4vh,34px)}
.faq-list ul{margin:10px 0 4px 1.1em}
.faq-list li{font-family:var(--serif);font-size:16.5px;line-height:1.7;margin-bottom:5px}
.faq-list p+p{margin-top:10px}
.faq-list a{color:var(--lilac);text-decoration:none;border-bottom:1.5px solid #7B5EA755;transition:color .25s,border-color .25s}
.faq-list a:hover{color:var(--orange);border-color:var(--orange)}
.faq-list b{font-weight:700}
.faq-list details{border-top:1px solid #1C355026;padding:18px 0}
.faq-list details:last-child{border-bottom:1px solid #1C355026}
.faq-list summary{
  cursor:pointer;list-style:none;
  font-family:var(--hand);font-weight:700;font-size:clamp(20px,2.1vw,25px);line-height:1.25;
  color:var(--ink);transition:color .25s;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover,
.faq-list details[open] summary{color:var(--orange)}
.faq-list p{margin-top:10px;max-width:62ch}

/* ---------- get involved ---------- */
.gi-lead{font-size:clamp(19px,2.1vw,24px);line-height:1.7}
.gi-cta{margin-top:clamp(30px,5vh,48px)}
.gi-cta a{
  display:inline-flex;align-items:center;
  background:var(--orange);color:var(--paper);text-decoration:none;
  font-family:var(--hand);font-weight:700;font-size:clamp(21px,2.4vw,28px);line-height:1;
  padding:14px 30px;border-radius:999px;
  box-shadow:0 14px 34px -14px #E63B0Dab;
  transition:transform .3s var(--ease),background .25s;
}
.gi-cta a:hover{transform:scale(1.04);background:#C8300A}
.gi-cta a:active{transform:translateY(4px) scale(.98);transition:transform .09s ease-out}

/* ---------- nothing runs off the page ----------
   The guard is for the children only. It used to list `article` too — same
   specificity, further down the sheet, so it beat the column's own max-width
   and let the text run the full width of the screen. */
p,h1,.big,.rituals,.hand,.aside,.karibuni{max-width:100%}
p,.big,.rituals,.hand,.aside{overflow-wrap:break-word;hyphens:auto}
h1,.karibuni{overflow-wrap:break-word;hyphens:none}

@media (max-width:900px){
  .rig-a,.rig-b{grid-column:1 / -1}
  .rig-b{margin-top:clamp(40px,7vh,70px)}
  .rig-b .rig-img{aspect-ratio:4/3}
  .lineup-names{font-size:clamp(18px,5vw,22px);line-height:1.9}
  .lineup-names .ln{white-space:normal}
}
@media (max-width:820px){
  article{padding-inline:22px;padding-top:clamp(96px,14vh,140px)}
  /* on a phone the column is nearly the screen, so the picture takes the rest */
  figure{width:100vw;margin-inline:calc((100% - 100vw) / 2)}
  h1{font-size:clamp(42px,12.4vw,70px);line-height:.96;transform:rotate(-1deg)}
  /* on a phone these two lines are set, not left to the measure: the headline
     wants an even break, and the second half of the party line is the half
     that carries the thought */
  h1 > span,.hand > span{display:block}
  p{font-size:clamp(16.5px,4.4vw,19px)}
  .big{font-size:clamp(19px,5.2vw,24px)}
  .hand{font-size:clamp(22px,6.2vw,30px)}
  .aside{font-size:clamp(19px,5.2vw,25px)}
  .karibuni{font-size:clamp(40px,13vw,72px)}
  .rituals{font-size:clamp(17px,4.6vw,21px);line-height:1.6}
  .rituals span{white-space:normal;display:block}
  .rituals span+span{margin-top:.35em}
  .rituals .sep{display:none}
  .more-tba{white-space:normal}
}