/* the look: the whole of it, and the only place it is said. the site, the deck and every svg in the folder use
   this file — a new look is a change here, never a style on a page. bicycle.css is its old address. */

@font-face {
  font-family: 'under';
  src: url('type/under.woff2') format('woff2'), url('type/under.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'garamond';
  src: url('type/garamond.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: 'garamond';
  src: url('type/garamond-italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* ink on paper. the seven colours surface only when the context asks for them; blue is the one we own */
:root {
  --blue:   #0000CD;
  --purple: #800080;
  --violet: #EE82EE;
  --red:    #FF4500;
  --orange: #FFA500;
  --gold:   #FFD700;
  --green:  #006400;
  --select: #0D99FF;

  --ink:   #111111;
  --paper: #ffffff;
  --muted: #808080;
  --line:  #bbbbbb;

  --font:  "under", sans-serif;     /* informs */
  --title: "garamond", serif;       /* speaks */
  --weight:       250;
  --title-weight: 500;
}

html, [data-theme="light"] {
  --color-accent-primary:   var(--blue);
  --color-accent-secondary: var(--purple);
  --color-positive:         var(--green);
  --color-warning:          var(--orange);
  --color-negative:         var(--red);
}

/* the type scale. 1rem is 16px on a 1920 slide and the same 16px in an svg, so one class is one size everywhere */
.display, .h1, .h2, .h3, .h4, .body, .caption {
  font-family: var(--font);
  font-weight: var(--weight);
  fill: var(--ink);
}

.display, .h1, .h2, .h3, .h4 {
  font-family: var(--title);
  font-weight: var(--title-weight);
}

.display { font-size: 9rem;    line-height: 1.1; }
.h1      { font-size: 4rem;    line-height: 1.15; }
.h2      { font-size: 3rem;    line-height: 1.2; }
.h3      { font-size: 2rem;    line-height: 1.28; }
.h4      { font-size: 1.5rem;  line-height: 1.33; }
.body    { font-size: 1.25rem; line-height: 1.5; }
.caption { font-size: .875rem; line-height: 1.5; }

.fg      { fill: var(--ink); }
.muted   { fill: var(--muted); }
.accent  { fill: var(--blue); }
.bg-fill { fill: var(--paper); }

.border-stroke { stroke: var(--line); }
.stroke-fg     { stroke: var(--ink); }

.dim { opacity: 0.4; }

/* a word index.brand hasn't answered yet shows its question, quietly */
[data-brand].ask { opacity: .4; }
[data-brand].ask::first-letter { text-transform: uppercase; }


/* ---- the front page: brand.bicycle.computer ---- */

.reference { margin: 0; }
.reference main { max-width: 60rem; margin: 0 auto; padding: 4rem 2rem; }
.reference section { margin-bottom: 4rem; }
.reference h2 { font-family: var(--title); font-weight: var(--title-weight); margin-bottom: 1rem; }
:where(.reference) main :is(p, li) { font-family: var(--font); font-weight: var(--weight); color: var(--ink); }   /* above rene's p, below .h2 or .body */
.reference .muted { color: var(--muted); }
.reference pre { font-family: var(--font); background: #f4f4f4; padding: 1rem; overflow-x: auto; }
.reference .palette { display: flex; flex-wrap: wrap; gap: .5rem; }
.reference .swatch { box-sizing: border-box; width: 9rem; height: 9rem; display: flex; flex-direction: column; justify-content: flex-end; padding: .75rem; outline: 1px solid var(--line); outline-offset: -1px; }
.reference .swatch p { margin: 0; color: inherit; }
.reference table { border-collapse: collapse; width: 100%; }
.reference td { padding: .4rem 1rem .4rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.reference td:first-child { font-family: var(--font); color: var(--muted); white-space: nowrap; }


/* ---- the deck: deck/NN-word.html, a slide 120 by 67.5rem whatever the screen. said for a slide only ---- */

html:has(> body.slide) { font-size: min(calc(100vw / 120), calc(100vh / 67.5)); }

.slide {
  --tint: #eeeeee;    /* what a print stands on */
  --shade: #dadada;   /* the grey under it */
  margin: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font-family: var(--font); font-weight: var(--weight);
}
/* the ground turned over */
.slide.on-ink { background: var(--ink); color: var(--paper); }
.slide.on-shade { background: var(--shade); }

.slide :where(h1, h2, p, figure) { margin: 0; }
.slide .muted { color: var(--muted); }

/* the title block: the name, then what the slide is (design/brand.js fills an empty one) */
.slide > header { position: relative; padding: 2.5rem 2.5rem 0; }
.slide > header > :is(h1, h2, p) { font: var(--title-weight) 2rem/1.28 var(--title); }
.slide > header > h2 { color: var(--muted); }
.slide > header > .aside { position: absolute; top: 2.5rem; right: 2.5rem; font: var(--weight) .875rem/2.56 var(--font); color: var(--muted); }

.slide > main { flex: 1; min-height: 0; padding: 0 2.5rem; }

/* what the chapter decided and why, from its -why line */
.slide > footer {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.625rem 2.5rem;
  align-content: end; margin-top: auto; padding: 0 2.5rem 2.5rem;
  font-size: 1.25rem; line-height: 1.3; color: var(--muted);
}
.slide > footer > p:only-child { grid-column: span 2; }
.slide > footer > .full { grid-column: 1 / -1; }
.slide > footer.ask { opacity: 1; }
.slide > footer.paragraph { color: var(--ink); border-top: 1px solid rgba(0, 0, 0, .4); margin: 0 2.5rem; padding: 2.5rem 0; }

/* one thing said big */
.slide .statement { display: flex; flex-direction: column; justify-content: center; }
.slide .statement > * { font: var(--title-weight) 4rem/1.25 var(--title); }
.slide .statement.center { align-items: center; text-align: center; }

/* the story, a paragraph a line of index.brand */
.slide .story { display: grid; place-content: center; justify-items: center; gap: 3.5rem; }
.slide .story p { max-width: 68.75rem; font: var(--title-weight) 2.5rem/1.4 var(--title); text-align: center; }

/* the six answers */
.slide .answers { display: grid; align-content: center; }
.slide .answers section { display: grid; grid-template-columns: 30rem 1fr; border-top: 1px solid var(--line); padding: 1.75rem 0 1rem; }

/* the five dials, as what was decided: the pole it leans to in ink above the other, its number, and why */
.slide .personality { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2.5rem; align-content: center; padding: 2.5rem; }
.slide .personality .dial { display: grid; grid-template-rows: auto auto 8rem; gap: 1rem; align-content: start; }
.slide .personality .why { margin-top: 1rem; font-size: 1.25rem; line-height: 1.375; color: var(--muted); }
.slide .personality .why.ask { opacity: 1; }

/* the mark, alone, and every size it is shown at */
.slide .mark { display: flex; align-items: center; justify-content: center; }
.slide .mark img { width: 15rem; height: 15rem; }
.slide .sizes { display: flex; align-items: center; justify-content: space-evenly; }
.slide .sizes img { display: block; }
.slide .sizes > :nth-child(1) { width: 30rem; }
.slide .sizes > :nth-child(2) { width: 15rem; }
.slide .sizes > :nth-child(3) { width: 7.5rem; }
.slide .sizes > :nth-child(4) { width: 3.75rem; }
.slide .sizes > :nth-child(5) { width: 1.875rem; }

/* the palette as stripes: the seven, the paper, the greys, the ink */
.slide .stripes { display: flex; padding: 0; }
.slide .stripes i { flex: 0 0 calc(100% / 30); }
.slide .stripes .paper { flex: 1; }
.slide .stripes i:nth-last-child(-n+3) { flex-basis: 7.7%; }

/* the specimen: every size on it is read off this file */
.slide .specimen { display: grid; grid-template-columns: minmax(0, 1fr) 32.5rem; column-gap: 7.5rem; padding-top: 2.5rem; padding-right: 21.25rem; }
.slide .specimen section { display: flex; flex-direction: column; }
.slide .specimen .note { border-top: 1px solid var(--line); padding-top: .75rem; font: var(--weight) .875rem var(--font); opacity: .4; }
.slide .specimen > section:first-child .note { margin-top: 2.5rem; max-width: 46rem; }
.slide .specimen .glyphs { margin-top: auto; padding-bottom: 3.5rem; }
.slide .specimen .scale { gap: 2rem; }
.slide .specimen .scale p:first-child { line-height: 1.2; padding-bottom: .5rem; }

/* a kind of file, drawn */
.slide .kinds {
  display: grid; align-content: center; justify-items: center;
  grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3rem; padding: 2rem 5rem;
}
.slide .kinds figure { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1.4rem; }
.slide .kinds figcaption { font: var(--weight) 1.1rem var(--font); color: var(--muted); }
.slide .kinds object { border: 0; display: block; width: 100%; height: 22rem; }

/* a drawing, centred */
.slide .art { display: grid; place-items: center; padding: 0; }
.slide .art > img, .slide .art > object { display: block; max-width: 100%; max-height: 100%; }

/* printed things standing on the tint */
.slide .prints { display: flex; align-items: center; justify-content: center; gap: 2.5rem; background: var(--tint); padding: 0; }
.slide .prints img { display: block; height: var(--h); }

/* a photograph, a page or a drawing filling the slide */
.slide .bleed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }

/* a photograph with a flat printed into it: the plate is the photograph's frame, cropped to fill */
.slide .plate {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100vw, 177.78vh); height: max(56.25vw, 100vh);
}
.slide .plate > img, .slide .plate > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.slide .plate > img { object-fit: cover; }
.slide .multiply { mix-blend-mode: multiply; }