/* kit.css — the shared kit for the layout drafts.
 * One type family, one palette, one set of components. The drafts differ only
 * in how sections and pictures are arranged, so a comparison is a comparison
 * of layout and not of six competing fonts.
 */

:root{
  /* the poster's three colours, and nothing else */
  --ink:#e9f0e1;
  --dim:#93a08c;
  --green:#1b8e1b;
  --green-lo:#0f4f0f;
  --ground:#040900;          /* the photograph's ground, carried down the page */
  --panel:#0b1207;
  --line:#1e2a19;
  --line-hi:#33452b;
  --markWhite:1;
  --markGreen:.72;
  --canvas:var(--ground);
  --surface:transparent;
  --surface-hi:#0d1409;

  /* one family, three jobs: heading 600, body 400, label 600 */
  --font:"Quicksand",ui-rounded,"Trebuchet MS",ui-sans-serif,system-ui,sans-serif;
  /* the lockup keeps the poster's face — it is a piece of artwork, not type */
  --mark:"Archivo",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --measure:38ch;
}

html,body{background:var(--ground);color:var(--ink)}
body{font-family:var(--font);font-size:18px;line-height:1.62;font-weight:400}

/* ── type scale ─────────────────────────────────────────── */
.h2{
  font:600 clamp(1.71rem,3.64vw,2.78rem)/1.12 var(--font);
  letter-spacing:-.025em;text-wrap:balance;
}
.h3{font:600 clamp(1.18rem,1.82vw,1.44rem)/1.25 var(--font);letter-spacing:-.015em}
.lede{
  font:400 clamp(1.18rem,1.82vw,1.39rem)/1.5 var(--font);
  color:var(--ink);max-width:var(--measure);letter-spacing:-.01em;text-wrap:balance;
}
.body{color:var(--dim);max-width:var(--measure)}
.body p + p{margin-top:1em}
/* labels are the same family at 600 — no second monospace voice */
.label{
  font:600 12px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);
}
.label.dim{color:var(--dim);opacity:.8}

/* ── pictures ───────────────────────────────────────────── */
.shot{position:relative;overflow:hidden;background:#0a0f07}
.shot img{width:100%;height:100%;display:block;object-fit:cover}
.shot figcaption{
  margin-top:.7rem;font:400 13px/1.5 var(--font);letter-spacing:.02em;color:var(--dim);
}
/* a frame that says out loud that a real photograph goes here */
.ph{
  position:relative;aspect-ratio:var(--ar,4/3);background:
    repeating-linear-gradient(135deg,#080e05 0 12px,#0b1207 12px 24px);
  border:1px solid var(--line);display:grid;place-items:center;text-align:center;
}
.ph span{
  font:600 10.5px/1.7 var(--font);letter-spacing:.2em;text-transform:uppercase;
  color:var(--line-hi);padding:0 1.5rem;max-width:26ch;
}
.ph.tall{--ar:3/4}
.ph.wide{--ar:16/9}
.ph.square{--ar:1/1}

/* ── the picture header, shared by every draft ──────────── */
.hero .cutout{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 43%;z-index:3;pointer-events:none;
}
/* the night behind the lockup — two fields so the bright one can breathe
   without the whole sky pulsing in unison */
.hero .stars{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url(img/stars.svg) 50% 50%/cover no-repeat;
  /* the field dies away with the photograph, and thins around the flower's own
     light so the stars never crowd the subject or the lockup */
  -webkit-mask-image:
    linear-gradient(to bottom,#000 var(--feather,60%),transparent 100%),
    radial-gradient(40% 46% at 50% 40%,transparent 0,rgba(0,0,0,.5) 56%,#000 96%);
          mask-image:
    linear-gradient(to bottom,#000 var(--feather,60%),transparent 100%),
    radial-gradient(40% 46% at 50% 40%,transparent 0,rgba(0,0,0,.5) 56%,#000 96%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
/* the bright field is inline rather than a background image, so each star can
   be given its own period and its own head start */
.hero .stars.bright{background:none}
.hero .stars.bright svg{position:absolute;inset:0;width:100%;height:100%}
.hero .stars.bright .tw{
  animation:twinkle var(--d,6s) ease-in-out var(--t,0s) infinite alternate;
  will-change:opacity;
}
@keyframes twinkle{from{opacity:.42}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .hero .stars.bright .tw{animation:none;opacity:.82}
}

.wordmark{
  position:absolute;z-index:2;left:var(--wx);top:var(--wy);
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;
  font-family:var(--mark);font-weight:900;text-transform:uppercase;
  line-height:.84;letter-spacing:-.035em;white-space:nowrap;pointer-events:none;
}
.wordmark .w1{font-size:calc(var(--ws) * .40);color:#fff;opacity:var(--markWhite);letter-spacing:-.01em}
/* lit by the same source as the photograph: the poster green through most of
   the word, lifting where the flower stands and deepening at the outer letters */
.wordmark .w2{
  font-size:var(--ws);opacity:var(--markGreen);
  background:radial-gradient(115% 165% at 50% 4%,
    #27a627 0%, #1b8e1b 42%, #167516 74%, #115e11 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* the names ride under the lockup, out of flow (see index.html) and scaled by
   the same --ws, so the pair stays in proportion however the picture crops.
   width:max-content lets the line run past the width of WORLD rather than
   folding in half inside it */
.wordmark .ticket{
  position:absolute;top:calc(100% + var(--ws) * .20);left:50%;
  transform:translateX(-50%);margin:0;
  width:max-content;max-width:94vw;
  display:flex;flex-wrap:wrap;justify-content:center;
  /* the gap is held wider than the stem so the pair sits either side of it:
     the flower divides the two names, and nothing has to cross it */
  gap:.5em clamp(1.6rem, calc(var(--ws) * .82), 13rem);
  white-space:nowrap;
  font:700 clamp(11px, calc(var(--ws) * .155), 21px)/1.5 var(--font);
  letter-spacing:.16em;text-transform:uppercase;color:#eef4e8;
  text-shadow:0 0 40px rgba(0,0,0,.65), 0 0 14px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.55);
}
/* a phone has no room for the pair at that size: hold them on one line either
   side of the stem rather than let them stack onto it */
@media (max-width:430px){
  .wordmark .ticket{
    font-size:clamp(10px, calc(var(--ws) * .13), 14px);
    column-gap:clamp(1.2rem, calc(var(--ws) * .55), 3rem);
    letter-spacing:.12em;
  }
}

/* ── the closing line ───────────────────────────────────── */
/* The lyric the campaign is named after, set as the page's sign-off. It used to
   ride in the corner of the photograph, where it collided with the names and
   had to be hidden below 760px and again on short windows — two mechanisms
   deciding whether it existed at all. In flow at the foot of the page it simply
   reads, at every width. Its own rule above and the footer's below make the band. */
.closer{
  position:relative;
  margin-top:clamp(3.5rem,9vh,6.5rem);
  padding:clamp(3rem,7vh,5rem) clamp(1.25rem,5vw,3rem);
  border-top:1px solid var(--line);
  text-align:center;
}
/* the measure is set on the blockquote, not the figure: ch resolves against the
   element's own font-size, and on the figure that is the 18px body size — which
   is how a 24ch measure came out as a 240px column of six short lines. Held
   here, the line keeps the shape of a lyric at every width. */
.closer figure{margin:0 auto clamp(2.5rem,6vh,3.75rem)}
.closer blockquote{
  font:300 clamp(1.3rem,3.2vw,2.4rem)/1.34 var(--font);
  letter-spacing:-.018em;text-wrap:balance;
  max-width:28ch;margin:0 auto;
}
/* larger than the label type used elsewhere on the page: this one is a credit
   under a lyric, not a caption on a component, and it reads as an attribution
   rather than as furniture. The tracking eases off as the size goes up. */
.closer figcaption{
  margin-top:clamp(1.1rem,2.5vh,1.6rem);
  font:600 clamp(13px,1.15vw,15px)/1.5 var(--font);
  letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb, var(--green) 40%, #cfd8c8);opacity:.9;
}
.closer cite{font-style:normal}
/* the footer carries its own rule, so the band closes on that rather than
   opening a second gap under the quote */
.closer + .foot{margin-top:0}

/* ── infrequently asked questions ───────────────────────── */
/* A disclosure, not a menu: one button opens the whole list. The band is
   centred, so the list resets to the left — six answers ragged around a centre
   line would be unreadable. */
/* last in the band now that the quote sits above it, so the section's own
   bottom padding is the only space it needs */
.faq{margin:0}
.faqBtn{
  display:inline-flex;align-items:center;gap:.7rem;
  margin:0;padding:.8rem 1.2rem;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:2px;
  font:600 11px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);
  transition:color .22s ease, border-color .22s ease;
}
.faqBtn:hover{color:var(--ink);border-color:var(--line-hi)}
.faqBtn:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.faq.open .faqBtn{color:var(--ink);border-color:var(--line-hi)}
.faqBtn .chev{
  width:11px;height:auto;flex:none;opacity:.75;
  transition:transform .34s cubic-bezier(.2,0,.2,1);
}
.faq.open .faqBtn .chev{transform:rotate(180deg)}

/* 0fr → 1fr is animatable where height:auto is not, so the panel opens to
   whatever the list actually needs at this width */
.faqWrap{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.2,0,.2,1);
}
.faq.open .faqWrap{grid-template-rows:1fr}
.faqInner{
  overflow:hidden;min-height:0;
  /* keeps the closed list out of the tab order and off the screen reader,
     which grid-template-rows:0fr alone does not do */
  visibility:hidden;transition:visibility 0s linear .42s;
}
.faq.open .faqInner{visibility:visible;transition-delay:0s}

.faqList{
  margin:0;padding:clamp(1.75rem,4vh,2.5rem) 0 0;text-align:left;
  max-width:52rem;margin-inline:auto;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,3.5vh,2.1rem) clamp(2rem,4vw,3.5rem);
}
.faqList dt{
  font:500 15px/1.5 var(--font);color:var(--dim);letter-spacing:-.005em;
  text-wrap:pretty;
}
/* the answer is the joke, so the answer is the one that is lit */
.faqList dd{
  margin:.3rem 0 0;font:600 clamp(1.02rem,1.5vw,1.16rem)/1.45 var(--font);
  color:var(--ink);letter-spacing:-.012em;
}
@media (max-width:640px){
  .faqList{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .faqWrap,.faqBtn .chev{transition:none}
  .faqInner{transition-delay:0s}
}

/* ── page furniture ─────────────────────────────────────── */
.wrap{max-width:76rem;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}
.foot{
  border-top:1px solid var(--line);margin-top:clamp(4rem,10vh,7rem);
  padding:clamp(2rem,5vh,3.5rem) 0 clamp(3rem,7vh,5rem);
}
/* The three dates are small print, not a diagram: one line you read across,
   with only the date that is a thing to do picked out in green. The rail and
   its dots were drawing more attention than three dates need. */
.foot .track{
  list-style:none;margin:1.5rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem 2.4rem;
}
.foot .track li{display:flex;align-items:baseline;gap:.6rem}
.foot .track .k{
  font:600 11px/1.6 var(--font);letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);
}
.foot .track .v{
  font:600 clamp(1.05rem,1.4vw,1.2rem)/1.5 var(--font);
  color:var(--ink);letter-spacing:-.01em;
}
.foot .track .now .v{color:var(--green)}
.foot .ticket{
  margin-top:1.6rem;font:400 15px/1.6 var(--font);color:var(--dim);
}
.foot .ticket b{color:var(--ink);font-weight:600}
/* a phone reads them down rather than across */
@media (max-width:640px){
  .foot .track{flex-direction:column;gap:.7rem}
}

.backLink{
  position:fixed;right:12px;bottom:10px;z-index:9;
  font:600 10.5px/1.5 var(--font);letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;opacity:.7;
}
.backLink:hover{opacity:1;color:var(--green)}