/* Shared styles for every page of the UIST 2027 site. Each page links this
   file and keeps only its own rules inline.

   Implements Figma frame "MacBook Pro 14' - 5" (node 148:5989), drawn at
   1512px wide. Measurements below are taken from that frame.

   Scaling: the whole page scales with the window width. Write every design
   measurement as calc(N * var(--px)), where N is the Figma value in px: --px
   is one Figma pixel at the current window width (set in :root below).
   Hairlines (1px rules) and focus outlines stay in real px. Below 900px the
   phone layout takes over, with its own gentler scale. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Variable-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --green: #466A3F;
  --ink: #2A2321;
  --rule: #9A8882;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --text: 'Inter', system-ui, sans-serif;
  --nav: 'Rethink Sans', 'Space Grotesk', system-ui, sans-serif;
  /* Phones and tablets: 0.95 on a 360px phone, growing slowly to 1.15 on a
     tablet, so text stays easy to read (body text 17-21px). */
  --px: clamp(0.9px, 0.8px + 100vw / 2400, 1.15px);
  /* Hero art scale: one Figma pixel, shrinking on narrow screens so the
     wordmark never runs off the edge. */
  --hpx: min(1px, 100vw / 880);
}
/* Desktop: a 1512px window matches the Figma frame. Narrower windows shrink
   in proportion, down to a floor of 0.8 that keeps body text at ~14px (below
   ~1210px the layout stops shrinking and the hero crops on the right). Wider
   windows grow at half the rate, up to 1.3 (reached at ~2420px). */
@media (min-width: 901px) {
  :root { --px: clamp(0.8px, min(100vw / 1512, 0.5px + 100vw / 3024), 1.3px); --hpx: var(--px); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: #fff; color: var(--ink); font-family: var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
img { display: block; }
ul { list-style: none; }

/* Header: 60px tall (2/3 of the frame's 90px). The nav shares the content
   rows' columns, so the first label starts at x484 like the hero wordmark and
   the body text, and the last one ends with the 930px text column. It stays
   pinned to the top of the window while the page scrolls under it. */
.site-head {
  position: sticky; top: 0; z-index: 10;
  display: grid; align-items: center;
  height: calc(60 * var(--px)); padding: 0 calc(24 * var(--px)) 0 calc(33 * var(--px));
  background: #fff; border-bottom: 1px solid var(--rule);
}
.site-head .logo img { width: calc(143 * var(--px)); height: calc(34 * var(--px)); }
/* Only Organizers is live for now, so the nav stretches to the page's right
   edge and the link sits there at any width. When the other pages return,
   switch back to minmax(0, calc(930 * var(--px))) and space-between. */
.site-head { grid-template-columns: calc(451 * var(--px)) minmax(0, 1fr); }
.site-head nav ul { display: flex; justify-content: flex-end; gap: calc(24 * var(--px)); }
.site-head nav a {
  font: 500 calc(20 * var(--px))/1.2 var(--nav); letter-spacing: calc(-0.2 * var(--px)); color: #000; white-space: nowrap;
}
/* The frame shows one label in Space Grotesk Bold: used here for hover and
   for the current page. */
.site-head nav a:hover, .site-head nav a[aria-current] { font-family: var(--display); font-weight: 700; }
.menu-toggle { display: none; }

/* Hero: green band, art from Figma (ferris wheel turning slowly). The band
   is 40px shorter than the 380px frame: the art is shifted up by that much,
   trimming the empty green above the wheel, and the wordmark moves with it
   (x484/y104). The SVG also runs 20px past the frame's bottom (y380-400,
   hidden here): the band's overflow does the crop. If the SVG's own
   mask/clip edge sat on the band's bottom line instead, Safari would flicker
   there while it redraws the turning wheel. */
.hero {
  position: relative; overflow: hidden;
  height: calc(340 * var(--hpx));
  background: var(--green);
  border-bottom: 1px solid var(--rule);
}
.hero .art { display: block; width: calc(1512 * var(--hpx)); height: calc(400 * var(--hpx)); max-width: none; margin-top: calc(-40 * var(--hpx)); }
.hero h1 { position: absolute; left: calc(484 * var(--hpx)); top: calc(104 * var(--hpx)); }
/* The wordmark is inlined rather than an <img> so it is drawn as vector
   shapes at the screen's resolution instead of from a cached bitmap. */
.hero h1 svg { display: block; width: calc(340 * var(--hpx)); height: calc(189 * var(--hpx)); shape-rendering: geometricPrecision; }
/* Dates above the wordmark at x481/y153 (Figma text node 148:6890, shifted
   up with the art) */
.hero .dates {
  position: absolute; left: calc(481 * var(--hpx)); top: calc(153 * var(--hpx));
  font: 300 max(12px, calc(16 * var(--hpx)))/1.2 var(--display); letter-spacing: -0.01em; color: #fff;
}

/* Content rows: title at x92 (389px wide), text at x484 (930px wide), the
   same 48px above and below in every row */
.row {
  display: grid;
  grid-template-columns: calc(392 * var(--px)) minmax(0, calc(930 * var(--px)));
  padding: calc(48 * var(--px)) calc(24 * var(--px)) calc(48 * var(--px)) calc(92 * var(--px));
  border-bottom: 1px solid var(--rule);
}
.row h2 {
  max-width: calc(389 * var(--px)); padding-right: calc(24 * var(--px));
  font: 500 calc(40 * var(--px))/1.1 var(--display); letter-spacing: calc(-0.4 * var(--px));
}
.row h2.narrow { max-width: calc(195 * var(--px)); }
.row .body { font-size: calc(18 * var(--px)); line-height: 1.2; letter-spacing: calc(-0.18 * var(--px)); padding-top: 1px; }
.row .body p + p { margin-top: calc(21.6 * var(--px)); }
.row .body a { text-decoration: underline; text-underline-offset: 2px; }

.site-foot {
  position: relative; overflow: hidden;
  min-height: calc(60 * var(--px)); padding: calc(22 * var(--px)) calc(16 * var(--px)); text-align: center;  /* same height as the header */
  background: var(--green); color: #fff;
  font: 300 calc(12 * var(--px))/normal var(--display);
}

@media (max-width: 900px) {
  .site-head { display: flex; justify-content: space-between; height: auto; flex-wrap: wrap; align-items: center; padding: calc(12 * var(--px)) calc(16 * var(--px)) calc(11 * var(--px)); }
  .menu-toggle { display: block; }
  .menu-toggle summary {
    list-style: none; cursor: pointer; padding: calc(10 * var(--px)) 0;
    font: 500 calc(18 * var(--px))/1.2 var(--nav); letter-spacing: calc(-0.36 * var(--px));
  }
  .menu-toggle summary::-webkit-details-marker { display: none; }
  .site-head nav { display: none; flex-basis: 100%; padding-top: calc(12 * var(--px)); }
  .menu-toggle[open] + nav { display: block; }
  .site-head nav ul { flex-direction: column; gap: calc(14 * var(--px)); }
  .row { grid-template-columns: 1fr; gap: calc(20 * var(--px)); padding: calc(40 * var(--px)) calc(16 * var(--px)) calc(56 * var(--px)); }
  .row h2 { font-size: calc(34 * var(--px)); }
}