/* THE EVENT PAGES (2026-09-22): /offsite and its siblings, scripts/events.py.
   Loaded by those pages only, AFTER page.css, so nothing on /gallery, /space or
   /contact can move because of a rule in here. Every colour, face and size is
   page.css's own token; this file only arranges them.

   The first screen is a page like every other: the photograph, the name and
   its madder rule, a line, the glass buttons. What is new is that the page
   goes on: a section rises over the photograph on the page's own ground and
   carries the words a search needs -- plain paragraphs, the facts with their
   madder ticks, four photographs from the wall, the questions, the ways to get
   in touch. No boxes, no kicker, no coloured buttons. */

body.long main{display:block;flex:none;padding:0}

/* THE FIRST SCREEN. It stops 72px short of the fold on purpose: the top of the
   section below shows as the photograph darkening, which is the only hint the
   page gives that it scrolls. */
body.long .col{display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:calc(100vh - 48px - 72px);min-height:calc(100dvh - 48px - 72px);
  margin:0 auto;padding:calc(2.4 * var(--fit)) clamp(20px, 5vw, 40px) calc(3 * var(--fit))}

/* THE REST OF THE PAGE. It fades up from clear to the ground over 240px, so
   there is no edge -- the same reason the scrim never reaches zero. */
.more{position:relative;text-shadow:none;
  background:linear-gradient(to bottom, rgba(20,16,13,0) 0, rgba(20,16,13,.92) 110px, var(--ground) 240px);
  padding:120px clamp(20px, 5vw, 40px) 36px}
.more-col{max-width:680px;margin:0 auto}

.more h2{margin:56px 0 16px;color:var(--ink);font-family:var(--display);font-weight:400;
  font-size:calc(clamp(25px, 2.2vw, 34px) * var(--a11y-scale));line-height:1.15;text-wrap:balance}
.more h2:first-child{margin-top:0}
.more .para{margin:0 0 16px;color:var(--dim);
  font-size:calc(clamp(16px, 1.1vw, 18.5px) * var(--a11y-scale));line-height:1.8}
.more .facts{margin:4px 0 0}

/* four photographs from the wall, two by two; the alt is Roni's caption */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:30px 0 0}
.shots picture{display:block}
.shots img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:4px;background:#1d1a17}

/* the questions: the question in the ink, the answer dimmed, a hairline
   between each pair and nothing around them */
.faq{margin:0}
.faq dt{margin:0 0 6px;color:var(--ink);font-weight:700;
  font-size:calc(clamp(16px, 1.05vw, 18px) * var(--a11y-scale));line-height:1.5}
.faq dd{margin:0 0 20px;padding:0 0 20px;color:var(--dim);
  font-size:calc(clamp(15.5px, 1vw, 17.5px) * var(--a11y-scale));line-height:1.75;
  border-bottom:1px solid rgba(243,236,227,.12)}
.faq dd:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}

/* the closing buttons sit with the text they follow, not centred on the page */
.more .actions{justify-content:flex-start;margin:22px 0 0}

/* the ways on: page.css's sister links, the same bold words on the madder line */
.more .onward{list-style:none;padding:0;margin:48px 0 0;justify-content:flex-start}

/* the copyright ends the page instead of floating over it -- ON THE GROUND:
   the photograph is position:fixed behind everything, so a transparent line
   here showed a strip of it under the last words (Ilai, 2026-09-22).
   `inset:auto` is load-bearing: page.css parks the fixed line with bottom:12px
   (8px on a phone), and on a RELATIVE box that offset lifts it off the end of
   the page and the photograph shows through the gap (Ilai, 2026-09-22). */
body.long .copy{position:relative;inset:auto;z-index:1;text-align:center;margin:0;padding:22px 20px 26px;
  background:var(--ground)}

@media (max-width: 900px){
  body.long .col{min-height:0;padding:34px 26px 70px}
  .more{padding:84px 22px 28px}
  .more h2{margin-top:44px}
  .shots{gap:8px;margin-top:24px}
  .more .actions .btn{padding:0 16px}
}

html[data-a11y-contrast][data-a11y-contrast] .more{background:#000}
html[data-a11y-contrast][data-a11y-contrast] .faq dd{border-bottom-color:#fff}