/* Layout: the deck's grid. 9 columns (margin 70 / gutter 20 at 1600px), images top-aligned,
   text in vertical chunks, section labels bottom-left, visuals top-right. Each band is one paper/ink pair. */
@font-face {
  font-family: "Schoolbook Mono";
  src: url("fonts/schoolbook-mono.otf") format("opentype");
  font-display: swap;
}
:root {
  color-scheme: dark;
  /* paper + ink pairs, sampled from the Brand ID deck */
  --black: #000000;
  --graphite: #444444;
  --silver: #c8c8c8;
  --mud: #5c4e31;
  --mud-hi: #8a7650;
  --olive: #655a43;
  --oxblood: #570f09;
  --oxblood-hi: #6e150c;
  --navy: #171868;
  --plum: #522e58;
  --blush: #d8b9be;
  --vermilion: #c44620;
  --lilac: #b08fe0;
  --clay: #846464;
  --rust: #9c5038;
  --rust-deep: #2e0e06;
  --rust-mid: #4a1a0c;
  --swatch-silver: #a2a2a2;
  --pink: #e07090;
  --pink-deep: #7a1d3c;
  --chalk: #e9e6e1;

  --mono: "Schoolbook Mono", "Courier Prime", "Courier New", monospace;

  --margin: clamp(16px, 4.375vw, 70px);
  --gutter: clamp(10px, 1.25vw, 20px);
  --band: clamp(56px, 7vw, 112px);

  --t-cap: 12px;
  --t-body: clamp(14px, 1.05vw, 17px);
  --t-lead: clamp(17px, 1.6vw, 24px);
  --t-title: clamp(26px, 2.6vw, 40px);
  --t-huge: clamp(64px, 11vw, 190px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--black);
  color: var(--silver);
  font-family: var(--mono);
  font-size: var(--t-body);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--black);
}
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible, canvas:focus-visible {
  outline: 1px dashed currentColor; outline-offset: 4px;
}
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: normal; text-wrap: balance; }
img { display: block; max-width: 100%; height: auto; }

/* ---------- grid ---------- */
.band { padding-block: var(--band); }
.grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: calc(var(--gutter) * 2);
  padding-left: max(var(--margin), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margin), env(safe-area-inset-right, 0px));
  align-items: start;
}
.grid > * { min-width: 0; }

.cap { font-size: var(--t-cap); letter-spacing: 0.04em; line-height: 1.35; }
.label { font-size: var(--t-body); letter-spacing: 0.03em; }
.lead { font-size: var(--t-lead); line-height: 1.2; }
.title { font-size: var(--t-title); line-height: 1.05; letter-spacing: 0.02em; }

/* brand marks as recolorable masks */
.mark {
  display: block; background: currentColor;
  -webkit-mask: var(--src) center / contain no-repeat;
          mask: var(--src) center / contain no-repeat;
}
.m-wordmark { --src: url("brand/wordmark.png"); aspect-ratio: 3000 / 383; }
.m-stacked { --src: url("brand/wordmark-stacked.png"); aspect-ratio: 3000 / 1575; }
.m-initials { --src: url("brand/initials.png"); aspect-ratio: 2000 / 1158; }
.m-logotype { --src: url("brand/logotype.png"); aspect-ratio: 1548 / 3000; }
.m-logo-simple { --src: url("brand/logotype-simple.png"); aspect-ratio: 1692 / 3000; }
.m-micro-horn { --src: url("brand/micro-square.png"); aspect-ratio: 1; }
.m-micro-round { --src: url("brand/micro-round.png"); aspect-ratio: 1; }
.m-micro-ts { --src: url("brand/micro-ts.png"); aspect-ratio: 3000 / 1199; }
.m-micro-letters { --src: url("brand/micro-letters.png"); aspect-ratio: 3000 / 1418; }

/* ---------- header ---------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--black); color: var(--graphite);
  padding-block: 14px;
  border-bottom: 1px solid #151515;
}
.top .grid { align-items: center; row-gap: 0; }
.top .home { grid-column: 1 / 2; color: var(--oxblood-hi); display: inline-flex; width: clamp(96px, 10vw, 156px); }
.top .home .mark { width: 100%; }
.top .grid { position: relative; }
.top nav { grid-column: 2 / 8; display: flex; justify-content: center; gap: clamp(12px, 1.6vw, 28px); flex-wrap: wrap; }
@media (min-width: 1240px) { .top nav { grid-column: 1 / -1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex-wrap: nowrap; white-space: nowrap; } }
@media (min-width: 861px) and (max-width: 1239px) { .top .mail { display: none; } }
.top .end { grid-column: 8 / 10; justify-self: end; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
.top .end a { text-decoration: none; color: #7a7a7a; font-size: var(--t-cap); letter-spacing: 0.06em; }
.top .end a:hover, .top .end a[aria-current="page"] { color: #c8c8c8; }
.top nav a { text-decoration: none; color: #7a7a7a; font-size: var(--t-cap); letter-spacing: 0.06em; }
.top nav a:hover { color: var(--silver); }
.top .mail { font-size: var(--t-cap); color: #7a7a7a; letter-spacing: 0.04em; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(24px, 3vw, 48px) 0; color: var(--graphite); }
/* Oda-style stage: one object in the middle, the marks small at its edges */
.hero .grid { row-gap: 0; }
.hero .word { grid-column: 1 / 4; grid-row: 1; color: var(--graphite); align-self: start; }
.hero .figure { grid-column: 9 / 10; grid-row: 1; color: var(--oxblood); justify-self: end; width: clamp(28px, 2.6vw, 44px); }
.hero .year { grid-column: 9 / 10; grid-row: 3; justify-self: end; color: #6c6c6c; }
.sky {
  position: relative;
  grid-column: 1 / -1; grid-row: 2;
  height: clamp(440px, calc(100vh - 190px), 940px);
  width: 100%;
  cursor: grab; touch-action: pan-y;
}
.sky.dragging { cursor: grabbing; }
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sky .tip {
  position: absolute; pointer-events: none; font-size: var(--t-cap); color: var(--silver);
  letter-spacing: 0.05em; white-space: nowrap; opacity: 0; transition: opacity .15s;
}
.sky .hint { position: absolute; left: 0; bottom: 12px; color: #4a4a4a; }
.sky .read { position: absolute; right: 0; bottom: 12px; color: #4a4a4a; font-variant-numeric: tabular-nums; }

/* ---------- about (navy / mud) ---------- */
.about { background: var(--vermilion); color: var(--lilac); }
.about .ts { grid-column: 4 / 6; color: var(--lilac); width: 70%; justify-self: end; margin-top: 0.2em; }
.about .copy { grid-column: 6 / 10; display: grid; gap: 1.1em; }
.about .copy p:not(.lead) { max-width: 60ch; line-height: 1.45; }
.about .copy .names { white-space: nowrap; }
@media (max-width: 520px) { .about .copy .names { white-space: normal; } }
.about .label { grid-column: 1 / 4; grid-row: 1; align-self: end; color: var(--lilac); }

/* ---------- manifesto (blush / plum) ---------- */
.manifesto { background: var(--blush); color: var(--plum); }
.manifesto .head { grid-column: 1 / 4; display: grid; gap: 18px; }
.manifesto .head .mark { width: min(160px, 60%); color: #b896a6; }
.manifesto .quote { grid-column: 1 / -1; text-align: center; font-size: clamp(40px, 6.4vw, 108px); line-height: .95; letter-spacing: .01em; padding-block: calc(var(--band) * .4) calc(var(--band) * .9); }
.manifesto .head .who { color: #8d6f8c; }
/* the manifesto as a document: one page at a time, like a PDF viewer */
.reader { grid-column: 4 / 8; display: grid; gap: 14px; outline: none; }
.reader:focus-visible .paper { outline: 1px dashed var(--plum); outline-offset: 6px; }
.reader .bar, .reader .ctrl { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #8d6f8c; font-variant-numeric: tabular-nums; }
.paper {
  position: relative; aspect-ratio: 8.5 / 11; width: 100%; max-width: 100%;
  background: #ead6d9; color: var(--plum);
  box-shadow: 7px 7px 0 #c9a9b1, 14px 14px 0 #bf9ea8;
}
.pg { position: absolute; inset: 0; padding: 9% 9% 7%; display: flex; flex-direction: column; gap: 1.1em; font-size: clamp(12px, 1.2vw, 19px); line-height: 1.5; }
.pg p { max-width: 62ch; }
.pg .run { margin-top: auto; display: flex; justify-content: space-between; color: #a98aa0; font-size: 10px; letter-spacing: .05em; }
.pg.cover { justify-content: space-between; }
.pg.cover .mark { width: 46%; color: #b896a6; }
.pg.cover h3 { font-size: clamp(26px, 2.6vw, 42px); line-height: 1.02; font-weight: normal; }
.pg.cover .meta { color: #8d6f8c; }
.hit { position: absolute; top: 0; bottom: 0; width: 50%; background: none; border: 0; padding: 0; z-index: 2; }
.hit.prev { left: 0; cursor: w-resize; }
.hit.next { right: 0; cursor: e-resize; }
.hit:disabled { cursor: default; }
.ctrl button {
  appearance: none; font: inherit; font-size: var(--t-cap); letter-spacing: .06em; cursor: pointer;
  background: none; color: var(--plum); border: 1px solid #b896a6; padding: 6px 12px;
}
.ctrl button:hover:not(:disabled) { background: #e2c9cd; }
.ctrl button:disabled { opacity: .35; cursor: default; }
.ctrl .hintline { text-align: center; }
.reader .dots { display: flex; gap: 6px; justify-content: center; }
.reader .dots span { width: 18px; height: 2px; background: #c4a3ad; }
.reader .dots span.on { background: var(--plum); }

/* ---------- prima stack (olive / oxblood) ---------- */
.prima { background: var(--swatch-silver); color: var(--black); }
.prima .num { font-size: clamp(54px, 6.2vw, 100px); line-height: .8; color: var(--black); }
.prima figure { margin: 0; display: grid; gap: 12px; align-content: start; }
.prima figure img { width: 100%; }
.prima figcaption { color: var(--black); }
.prima .f1 { grid-column: 1 / 4; }
.prima .f2 { grid-column: 5 / 8; }
.prima .f3 { grid-column: 8 / 10; }
.prima .f1, .prima .f2, .prima .f3 { margin-top: calc(var(--band) * .6); }
.prima .name { grid-column: 1 / 6; }
.prima .name .title { color: var(--black); }
.prima .name .mark { color: var(--oxblood); width: min(100%, 520px); }
.prima .name h2 { margin-top: 18px; }
.prima .name p { margin-top: 18px; max-width: 46ch; color: var(--black); }
.prima .sheet { grid-column: 6 / 10; }
.sheet dl { margin: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); border-top: 1px solid var(--black); }
.sheet dt, .sheet dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--black); }
.sheet dt { color: var(--black); opacity: .62; padding-right: var(--gutter); }
.sheet dd { color: var(--black); }
.prima .label { grid-column: 1 / 4; color: #3f1a0f; margin-top: calc(var(--band) * .6); }

/* ---------- print (black) ---------- */
.print { color: var(--silver); }
.print .posters { grid-column: 5 / 10; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.print figure { margin: 0; display: grid; gap: 10px; align-content: start; }
.print figcaption { color: #6c6c6c; }
.print .tickets { grid-column: 5 / 7; }
.print .ticket1 { grid-column: 7 / 8; }
.print .stickers { grid-column: 5 / 9; }
.print .bursts { grid-column: 5 / 10; }
.print .side { grid-column: 1 / 4; grid-row: 1 / span 3; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.print .side .broadside { color: #8a8a8a; max-width: 38ch; }
.print .side .broadside em { font-style: normal; color: var(--oxblood-hi); }

/* color logic */
.logic .grid { row-gap: 14px; }
.logic .copy { grid-column: 5 / 10; color: var(--silver); display: grid; gap: 1em; }
.logic .tiles { grid-column: 5 / 10; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.tile {
  appearance: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left;
  background: var(--paper); color: var(--ink);
  aspect-ratio: 1.14; position: relative; display: grid; place-items: center;
  transition: background-color .35s, color .35s;
}
.tile .mark { height: 58%; aspect-ratio: 1692 / 3000; }
.tile .cap { position: absolute; left: 8px; bottom: 6px; color: var(--ink); font-size: 10px; opacity: .9; }
.tile[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tile[aria-pressed="true"] .cap { color: var(--paper); }

/* ---------- constellation views (silver / black) ---------- */
.views { background: var(--silver); color: var(--black); }
.views .copy { grid-column: 1 / 4; align-self: end; display: grid; gap: 1em; max-width: 44ch; }
.views .copy .micro { width: min(220px, 80%); color: var(--black); }
.views .wall { grid-column: 5 / 10; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.views .wall canvas { width: 100%; aspect-ratio: 1.14; background: var(--black); display: block; }

/* ---------- questions (black / silver) ---------- */
.faq .head { grid-column: 1 / 4; color: var(--silver); display: grid; gap: 12px; align-content: start; }
.faq .head .q { font-size: clamp(80px, 10vw, 160px); line-height: .8; color: var(--graphite); }
.faq .list { grid-column: 4 / 10; border-top: 1px solid #2a2a2a; }
.faq details { border-bottom: 1px solid #2a2a2a; }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 0; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: var(--gutter); font-size: var(--t-lead); color: var(--silver);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: #6c6c6c; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 22px; color: #8f8f8f; max-width: 60ch; }

/* ---------- footer (oxblood) ---------- */
.foot { background: var(--oxblood); color: #2a0603; }
.foot .word { grid-column: 1 / 10; color: #3a0904; }
.foot .contact { grid-column: 1 / 4; color: #c99a8f; display: grid; gap: 10px; align-content: start; }
.foot .contact .addr { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.foot .contact .addr span { user-select: all; font-size: var(--t-lead); }
.copybtn {
  appearance: none; background: none; border: 1px solid #8a3c30; color: #c99a8f;
  font: inherit; font-size: var(--t-cap); padding: 3px 9px; cursor: pointer; letter-spacing: .05em;
}
.copybtn:hover { border-color: #c99a8f; }
.foot .fig { grid-column: 9 / 10; color: #2a0603; width: 60%; justify-self: end; }
.foot .legal { grid-column: 6 / 9; color: #a4675b; font-size: 10px; max-width: 48ch; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero .word, .hero .figure { animation: rise 1.1s cubic-bezier(.2,.7,.1,1) both; }
  .hero .figure { animation-delay: .25s; }
  @keyframes rise { from { transform: translateY(14px); opacity: .25; } to { transform: none; opacity: 1; } }
}

/* ---------- narrow ---------- */
@media (max-width: 860px) {
  .grid > * { grid-column: 1 / -1 !important; }
  .top nav { display: none; }
  .top .home { grid-column: 1 / 2 !important; width: 118px; }
  .top .end { grid-column: 2 / -1 !important; }
  .top .end a { display: none; }
  .hero .word { grid-column: 1 / 7 !important; }
  .hero .figure { grid-column: 9 / 10 !important; width: 26px; }
  .hero .year { grid-column: 1 / -1 !important; justify-self: end; }
  .sky { height: clamp(380px, calc(100vh - 170px), 640px); }
  .sky .read { display: none; }
  .about .ts { width: 90px; justify-self: start; }
  .about .label { grid-row: auto; }
  .manifesto .quote { white-space: nowrap; font-size: min(40px, calc((100vw - 2 * max(16px, env(safe-area-inset-left, 0px))) / 11.4)); }
  .paper { aspect-ratio: auto; min-height: 600px; display: grid; }
  .pg { position: relative; inset: auto; grid-area: 1 / 1; font-size: 13px; padding: 28px 24px 22px; }
  .ctrl .hintline { display: none; }
  .prima .f1, .prima .f2, .prima .f3 { grid-row: auto; }
  .prima .f2, .prima .f3 { grid-column: span 4 !important; }
  .prima .f3 { grid-column: 5 / 10 !important; }
  .prima .f2 { grid-column: 1 / 5 !important; }
  .print .side { grid-row: auto; }
  .print .posters { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .print .tickets { grid-column: 1 / 7 !important; }
  .print .ticket1 { grid-column: 7 / 10 !important; }
  .logic .tiles, .views .wall { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .foot .fig { grid-column: 1 / 3 !important; justify-self: start; width: 64px; }
}
/* phone menu: replaces the email in the header under 860px */
.mnav { display: none; }
.mnav summary { list-style: none; cursor: pointer; color: #c8c8c8; font-size: var(--t-cap); letter-spacing: 0.08em; padding: 8px 0 8px 16px; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary .c, .mnav[open] summary .o { display: none; }
.mnav[open] summary .c { display: inline; }
.mnav-panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 25;
  display: grid; background: #000; border-bottom: 1px solid #222;
  padding-block: 6px 22px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.mnav-panel a { color: #c8c8c8; text-decoration: none; font-size: var(--t-lead); letter-spacing: 0.03em; padding: 13px 0; border-bottom: 1px solid #1c1c1c; }
.mnav-panel a[aria-current="page"] { color: #fff; }
.mnav-panel .mail { color: #7a7a7a; font-size: var(--t-cap); letter-spacing: 0.04em; padding-top: 16px; user-select: all; }
@media (max-width: 860px) {
  .top .grid { position: static; }
  .top .end { display: none !important; }
  .mnav { display: block; grid-column: 2 / -1 !important; justify-self: end; }
}

/* ---------- pages ---------- */
/* each page fills the screen; the footer sits at the bottom */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; display: flex; flex-direction: column; }
main > .band:only-child, main > .fill { flex: 1 0 auto; }
.top nav a[aria-current="page"] { color: var(--silver); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.foot.slim { padding-block: calc(var(--band) * .55); }
.sky .tip { line-height: 1.25; }
.sky .tip .sub { display: block; margin-top: 2px; font-size: 10px; letter-spacing: 0.07em; color: #8a8a8a; }
/* About fills the whole screen under the header; the footer sits below the fold */
.about.fill {
  min-height: calc(100vh - var(--header-h, 56px));
  min-height: calc(100svh - var(--header-h, 56px));
  display: flex; flex-direction: column; justify-content: center;
}
.about.fill > .grid { width: 100%; }

/* the Questions label matches the question mark above it */
.faq .head .label { color: var(--graphite); }
/* the menu bar slides away while scrolling down and comes back on any scroll up */
.top { transition: transform .28s ease; will-change: transform; }
.top.tucked { transform: translateY(calc(-100% - 2px)); }
@media (prefers-reduced-motion: reduce) { .top { transition: none; } }