/* Site-wide styles for every museum page. Design system: see brand/README.md.
   Page-specific rules stay in each page's own <style>. */

:root{
  /* colour system: two inks, and riso brown where they meet */
  --paper:#fafaf7;   /* grounds */
  --paper-2:#f1f0ea; /* a second ground for panels */
  --ink:#141414;     /* text, lines, the one-ink logo */
  --aqua:#2cb2e6;    /* large shapes only, never text */
  --red:#ee3521;     /* large shapes, large text and the '&' */
  --indigo:#3a3896;  /* grounds, and where the visitor acts: buttons and links */
  --brown:#74393c;   /* where aqua and red overlap */
  --muted:#575753;   /* secondary text, 7:1 on paper */
  --line:#d8d7d0;    /* hairlines */
  --sans:'Barlow',Arial,sans-serif;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --gut:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
[id]{scroll-margin-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-color:var(--indigo);text-decoration-thickness:2px;text-underline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-family:var(--sans)}
h2{font-weight:700;font-size:clamp(34px,5vw,60px);line-height:1.02;letter-spacing:-.02em}
h3{font-weight:600;font-size:clamp(20px,2.1vw,24px);line-height:1.2;letter-spacing:-.005em}
p{margin:0 0 1rem}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* labels: Barlow Condensed capitals, spaced out */
.lbl{font-family:var(--cond);font-weight:600;font-size:13px;line-height:1.3;letter-spacing:.16em;
     text-transform:uppercase;color:var(--muted);margin:0}

/* buttons: indigo marks where the visitor acts, always with a word */
.btn{display:inline-block;font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.2;white-space:nowrap;
     text-decoration:none;padding:12px 20px;border:2px solid var(--ink);background:transparent;color:var(--ink);
     border-radius:999px;transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-act{background:var(--indigo);border-color:var(--indigo);color:var(--paper)}
.btn-act:hover{background:var(--ink);border-color:var(--ink)}
.btn-lg{font-size:17px;padding:15px 26px}
.btn-light{border-color:var(--paper);color:var(--paper)}
.btn-light:hover{background:var(--paper);color:var(--indigo)}
.ulink{display:inline-block;font-weight:600;font-size:16px;text-decoration:none;border-bottom:2px solid var(--indigo);padding-bottom:3px}
.ulink:hover{color:var(--indigo)}

/* the museum's lockup: always the logo kit's files (brand/logo), never retyped */
.brand{display:block;text-decoration:none;flex:none}
.brand .logo{display:block;height:40px;width:auto}  /* one line: 245px wide, the kit's minimum is 240px */
/* On hover the red disc beats. Every lockup draws the mark at its left edge, full height, so
   /assets/mark-heartbeat.svg (the kit's mark with 30 units of padding for the red to grow into)
   sits exactly over it: 288.681/228.681 of the logo's height, shifted up-left by the padding. */
.brand{position:relative}
.brand::after{content:"";position:absolute;left:0;top:0;height:126.237%;aspect-ratio:288.386/288.681;
  transform:translate(-10.403%,-10.392%);background:url(/assets/mark-heartbeat.svg) center/contain no-repeat;
  opacity:0;pointer-events:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .brand:hover::after,.brand:focus-visible::after{opacity:1}
}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
header .bar{display:flex;align-items:center;gap:clamp(14px,2.6vw,34px);padding-block:12px}
header nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2.6vw,34px)}
header nav a{font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap}
header nav a:hover,header nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--indigo);
  text-decoration-thickness:2px;text-underline-offset:5px}

/* sections: a label in a narrow left column, content on the right */
section{border-bottom:1px solid var(--line)}
.sec{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(18px,4vw,64px);
     padding-block:clamp(52px,8vw,104px)}
.sec-body{max-width:900px;min-width:0}
.intro{margin:24px 0 0;color:var(--muted);font-size:17px;max-width:64ch}
.intro strong{color:var(--ink);font-weight:600}

/* ink and indigo grounds */
.dark{background:var(--ink);color:var(--paper);border:0}
.indigo{background:var(--indigo);color:var(--paper);border:0}
.dark .lbl,.indigo .lbl{color:var(--paper);opacity:.72}
.dark .intro,.indigo .intro{color:var(--paper);opacity:.85}
.dark a,.indigo a{text-decoration-color:currentColor}
.dark .btns,.indigo .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* inner-page head: the two discs at full size, cut by the edge */
.page-head{position:relative;overflow:hidden}
.page-head .sec{position:relative;padding-block:clamp(44px,6vw,88px)}
.page-head h1{font-weight:700;font-size:clamp(42px,6.2vw,80px);line-height:1;letter-spacing:-.025em;max-width:15ch}
.page-head .lede{font-size:clamp(18px,1.6vw,21px);line-height:1.45;margin:24px 0 0;max-width:46ch}
.page-head .btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.page-head .note{font-size:15px;color:var(--muted);margin:14px 0 0;max-width:46ch}
.page-head .discs{position:absolute;right:calc(-1 * clamp(80px,9vw,150px));top:clamp(24px,4vw,56px);
                  width:clamp(240px,30vw,420px);pointer-events:none}
.page-head .sec-body{position:relative;z-index:1}
.page-head.has-discs .sec-body{max-width:min(900px,calc(100% - clamp(140px,15vw,260px)))}
.meta-row{display:flex;flex-wrap:wrap;gap:6px 36px;margin-top:36px;padding-top:16px;
          border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.meta-row b{font-weight:600;color:var(--ink)}

/* footer */
footer{background:var(--ink);color:var(--paper);padding-block:56px 30px}
footer .fgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:30px 40px;align-items:start}
footer .logo{display:block;height:64px;width:auto}
/* Hover the footer lockup and a disco ball covers its mark. /assets/disco-ball.svg uses the mark's
   coordinates plus 70 units of padding: 368.681/228.681 of the logo's height, shifted by 70/368.681. */
footer .disco{position:relative;display:inline-block;vertical-align:top}
footer .disco::after{content:"";position:absolute;left:0;top:0;height:161.221%;aspect-ratio:368.386/368.681;
  transform:translate(-19.002%,-18.987%) scale(.6);background:url(/assets/disco-ball.svg) center/contain no-repeat;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
@media (hover:hover){footer .disco:hover::after{opacity:1;transform:translate(-19.002%,-18.987%)}}
/* ...and the room goes dark. footer::before is a fixed layer over the whole viewport: dim, with
   mirror-ball spots drifting sideways (/assets/disco-spots.svg at two scales, each moved by one tile
   per loop, so the nearer, larger layer drifts faster). .disco::before throws beams up from the ball: a half-disc centred on the mark (32px, half
   the 64px logo) whose conic rays turn. footer clips sideways so the beams never add a scrollbar. */
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
footer{position:relative;overflow-x:clip}
footer::before{content:"";position:fixed;inset:0;z-index:45;pointer-events:none;opacity:0;transition:opacity .4s;
  background:url(/assets/disco-spots.svg) 0 0/720px 480px,url(/assets/disco-spots.svg) 310px 170px/1080px 720px,
    rgba(8,8,12,.8)}
footer .disco::before{content:"";position:absolute;z-index:46;left:calc(32px - 150vmax);top:calc(32px - 150vmax);
  width:300vmax;height:150vmax;pointer-events:none;opacity:0;transition:opacity .4s;
  background:
    repeating-conic-gradient(from var(--spin) at 50% 100%,transparent 0 8deg,rgba(250,250,247,.2) 9deg 10.5deg,transparent 11.5deg 20deg),
    repeating-conic-gradient(from calc(var(--spin) * -1.4) at 50% 100%,transparent 0 22deg,rgba(44,178,230,.18) 23deg 24.5deg,transparent 25.5deg 31deg),
    repeating-conic-gradient(from calc(var(--spin) * .7 + 9deg) at 50% 100%,transparent 0 30deg,rgba(238,53,33,.16) 31deg 32.5deg,transparent 33.5deg 43deg);
  -webkit-mask:radial-gradient(circle 150vmax at 50% 100%,transparent 0 34px,#000 70px,rgba(0,0,0,.45) 35%,transparent 75%);
          mask:radial-gradient(circle 150vmax at 50% 100%,transparent 0 34px,#000 70px,rgba(0,0,0,.45) 35%,transparent 75%)}
footer .disco::after{z-index:47}
@keyframes disco-beams{to{--spin:360deg}}
@keyframes disco-spots{to{background-position:720px 0,1390px 170px,0 0}}
@media (hover:hover){
  footer:has(.disco:hover)::before,footer .disco:hover::before{opacity:1}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  footer:has(.disco:hover)::before{animation:disco-spots 20s linear infinite}
  footer .disco:hover::before{animation:disco-beams 120s linear infinite}
}
footer p{opacity:.78;font-size:15.5px;margin:0}
footer p + p{margin-top:10px}
footer a{color:var(--paper);text-decoration-color:currentColor}
footer .partners{margin-top:44px;padding-top:22px;border-top:1px solid rgba(250,250,247,.2);font-size:15px;opacity:.82}
footer .fbot{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;padding-top:18px;
      border-top:1px solid rgba(250,250,247,.2);font-family:var(--cond);font-weight:500;font-size:13px;letter-spacing:.14em;
      text-transform:uppercase;opacity:.65}
footer .fbot span:last-child{margin-left:auto}

@media (max-width:960px){
  footer .fgrid{grid-template-columns:1fr 1fr}
  footer .fgrid > :first-child{grid-column:1 / -1}
}
@media (max-width:860px){
  .sec{grid-template-columns:1fr;gap:14px}
  .page-head .discs{width:170px;right:-60px;top:-60px}
  .page-head.has-discs .sec-body{max-width:none}
  .page-head.has-discs .sec{padding-top:120px}
  footer .fbot span:last-child{margin-left:0}
}
/* narrow screens: brand and Get involved on the first row, the other links on a second row */
@media (max-width:760px){
  header .bar{flex-wrap:wrap;row-gap:0;padding-block:10px 0}
  header .bar > .btn{margin-left:auto;padding:8px 14px;font-size:14px}
  header nav{order:3;flex-basis:100%;margin:10px 0 0;flex-wrap:wrap;column-gap:22px;border-top:1px solid var(--line)}
  header nav a{padding-block:9px;font-size:15px}
  [id]{scroll-margin-top:118px}
}
@media (max-width:560px){
  footer .fgrid{grid-template-columns:1fr}
}
@media (max-width:380px){
  header .bar{column-gap:10px}
  .brand .logo{height:36px}
  header .bar > .btn{padding:7px 11px;font-size:13px}
}