/* The boot's page (spec.html): its specification and its story, on an 8 px grid like the homepage.
   On a wide window (1024 px and up) the page keeps the 1536 px mockup's composition at any width: --grid is
   one step of its grid, 1/192 of the page's width (8 px at the mockup's width), and every position, size and
   gap is a whole number of steps. Its columns, in steps from the page's left edge: the margin to 9, the boot
   from 9 to 60, the model's name from 84, and the text column from 126 to 183, as far from the page's right
   edge as the margin is from its left. On a phone or tablet the grid is a fixed 8 px and the page is one
   column. The black, the lime, the typeface and the type's size and line are base.css's. */

:root {
  --grey: #8f8f8f; /* the long text's colour: a step back from the lime, the mockup's grey (6.6 to 1 on the black) */
  --grid: 8px; /* one step of the grid: fixed on a phone or tablet, a share of the page's width on a wide window */
  --margin: calc(var(--grid) * 3); /* the page's side margins */
  --gap: calc(var(--grid) * 8); /* between the page's parts */
  --measure: 36em; /* the longest a line of text grows on a tablet: about 70 characters */
  --view-grey: #e9e9e9; /* behind a view of the boot: the mockup's studio grey */
  --boot-share: 0.88; /* on a phone or tablet, the boot's share of the column, which leaves room for Back past its heel */
}

/* A tablet: wider margins and gaps */
@media (min-width: 600px) {
  :root {
    --margin: calc(var(--grid) * 6);
    --gap: calc(var(--grid) * 10);
  }
}

/* A wide window: the mockup's grid, 192 steps across the page */
@media (min-width: 1024px) {
  :root {
    --grid: calc(100cqi / 192);
    --margin: calc(var(--grid) * 9);
    --gap: calc(var(--grid) * 16);
  }
}

/* ---------------------------------------------------------------------------
   The boot and its specification. On a phone or tablet: the boot, the model's name, then the list. On a wide
   window they stand in one row centred on one line, the row's middle, as the mockup has them: the boot from
   the margin, the model's name at step 84 and the list in the text column. The list is the tallest of the
   three, so it sets the row's height.
   --------------------------------------------------------------------------- */
/* The page starts below the header (base.css), which stands over its top */
.spec {
  padding: calc(var(--header-height) + var(--grid) * 6) var(--margin) 0;
}

/* The boot, in a box of its own that its view words stand around (see "The boot's views" below). On a phone or
   tablet it takes --boot-share of the column, at most 64 steps as the homepage's boot on a tablet, with room
   above it for Top, two steps clear of its middle, and below it for Left and Right: the model's name starts
   six steps under their middles, so the boot stands further from the text than the list's items do from
   each other. */
.spec-views {
  --above: 0.14; /* how far Top stands above the boot's box, as a share of its height */
  --below: 0.03; /* how far Left and Right stand below it */
  --boot-width: min((100cqi - 2 * var(--margin)) * var(--boot-share), var(--grid) * 64);
  --boot-height: calc(var(--boot-width) * 521 / 975); /* the picture's own proportions */

  position: relative;
  width: var(--boot-width);
  margin: calc(var(--boot-height) * var(--above) + var(--grid) * 2) 0 calc(var(--boot-height) * var(--below) + var(--grid) * 6);
}

.spec-boot {
  width: 100%;
  height: auto;
}

/* The model's name, on one line; a wide window breaks it after "Mercurial", as the mockup does */
.spec-model {
  margin: 0;
  font: inherit;
}

.spec-model br {
  display: none;
}

.spec-list {
  max-width: var(--measure);
  margin: calc(var(--grid) * 3) 0 0;
}

/* Each item is a paragraph of its own, its term running into its words, with a blank line between items */
.spec-item + .spec-item {
  margin-top: var(--line);
}

.spec-item dt,
.spec-item dd {
  display: inline;
  margin: 0;
}

/* A tablet and a wide window: the page starts lower, as the homepage does */
@media (min-width: 600px) {
  .spec {
    padding-top: calc(var(--header-height) + var(--grid) * 8);
  }
}

@media (min-width: 1024px) {
  .spec {
    display: grid;
    grid-template-columns:
      [boot-start] calc(var(--grid) * 51) [boot-end] calc(var(--grid) * 24)
      [model-start] calc(var(--grid) * 42) [model-end text-start] calc(var(--grid) * 57) [text-end];
    align-items: center;
    padding-right: 0;
  }

  /* The boot fills its column; the words around it stand in the room the row leaves */
  .spec-views {
    grid-column: boot;
    width: auto;
    margin: 0;
  }

  .spec-model {
    grid-column: model;
  }

  .spec-model br {
    display: inline;
  }

  .spec-list {
    grid-column: text;
    max-width: none;
    margin: 0;
  }
}

/* ---------------------------------------------------------------------------
   The boot's views (scripts/views.js): a word at each side of the boot, placed around it as the mockup has
   them, in shares of the boot's box, so they keep their places at every size. Hovering a word, or reaching
   it from the keyboard, shows that side's photo in the middle of the window at once; on a touch screen a tap
   does, and a tap again, or anywhere else, puts it away.
   --------------------------------------------------------------------------- */
.view-link {
  position: absolute;
  padding: var(--grid);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--label-size);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  translate: -50% -50%; /* each stands centred on its place */
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Underlined while its view shows, or while it is hovered or reached from the keyboard, as the header's
   Specs is */
.view-link:hover,
.view-link:focus-visible,
.view-link[aria-expanded="true"] {
  text-decoration-color: currentColor;
}

.view-link:focus-visible {
  outline: none;
}

/* Room for a finger: a target 44 px tall */
@media (pointer: coarse) {
  .view-link {
    padding: calc(var(--grid) * 2);
  }
}

/* Where each word stands: its middle, in shares of the boot's box, from the mockup */
.view-link[data-view="top"] {
  top: calc(var(--above) * -100%);
  left: 59%;
}

.view-link[data-view="front"] {
  top: 31%;
  left: 15%;
}

.view-link[data-view="back"] {
  top: 52%;
  left: 107%;
}

.view-link[data-view="sole"] {
  top: 81%;
  left: 61%;
}

.view-link[data-view="left"],
.view-link[data-view="right"] {
  top: calc(100% + var(--below) * 100%);
}

.view-link[data-view="left"] {
  left: 25%;
}

.view-link[data-view="right"] {
  left: 80%;
}

/* The views: all in the window from the start, one over another in its middle, and only the one asked for
   showing, so it shows at once. They take no pointer, so a word under one keeps its hover; one a finger
   opened takes it, so a tap on it puts it away rather than reaching the page beneath. The layer is a
   container, so a view measures the page's width without the scrollbar, as the page does. */
.views {
  position: fixed;
  inset: 0;
  z-index: 6; /* over everything, the header too */
  display: grid;
  place-items: center;
  container-type: inline-size;
  pointer-events: none;
}

/* A view: square, as the mockup's, as wide as the column on a phone (at most 64 steps on a tablet), and
   never taller than most of the window */
.view {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: min(calc(100cqi - 2 * var(--margin)), calc(var(--grid) * 64), 88svh);
  aspect-ratio: 1;
  margin: 0;
  background: var(--view-grey);
  color: #000;
  visibility: hidden;
}

.view.is-shown {
  visibility: visible;
}

.views.is-tapped .view.is-shown {
  pointer-events: auto;
}

/* Its photo lies over its name, which shows only until the photo is in */
.view > * {
  grid-area: 1 / 1;
}

.view img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A wide window: 80 steps square, as the mockup's */
@media (min-width: 1024px) {
  .view {
    width: min(calc(var(--grid) * 80), 88svh);
  }
}

/* ---------------------------------------------------------------------------
   The page's parts, Story and Under 200g: the heading, then the text in grey, with a blank line between
   paragraphs. On a wide window the heading stands at the margin and the text in the text column, their first
   lines level.
   --------------------------------------------------------------------------- */
.part {
  margin-top: var(--gap);
  padding: 0 var(--margin);
}

.part-title {
  margin: 0;
  font: inherit;
}

.part-text {
  max-width: var(--measure);
  margin-top: var(--line);
  color: var(--grey);
}

.part-text p {
  margin: 0;
}

.part-text p + p {
  margin-top: var(--line);
}

/* A wide window: the heading in the space from the margin to the text column (117 steps), the text in the
   column */
@media (min-width: 1024px) {
  .part {
    display: grid;
    grid-template-columns: [title-start] calc(var(--grid) * 117) [title-end text-start] calc(var(--grid) * 57) [text-end];
    align-items: start;
    padding-right: 0;
  }

  .part-title {
    grid-column: title;
  }

  .part-text {
    grid-column: text;
    max-width: none;
    margin: 0;
  }
}

/* ---------------------------------------------------------------------------
   The Speed Lab (lab/lab.css styles it): the page's last part, after Under 200g and as far below it as the parts
   are apart, before the disclaimer. Its stage spans the page from margin to margin, as the header does, and its
   bar, throttle, readout and stats stand on the stage's sides (--side), so they line up with the header's swoosh
   and Specs. The header stands over the top of the stage, so the lab keeps its own bar below the header.
   --------------------------------------------------------------------------- */
.speed-lab {
  --clear-top: var(--header-height);
  --side: 0px;
  margin: var(--gap) var(--margin) 0;
}

/* A score, a style code or a measure never splits across lines: not at its hyphen, nor between a number and its unit */
.nobreak {
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   The footer (base.css), closing the page, as on the homepage
   --------------------------------------------------------------------------- */
.disclaimer-bar {
  margin-top: var(--gap);
  padding-bottom: calc(var(--grid) * 5); /* to the page's end */
}