/* The landing page, set as a gallery catalogue: paper, a display serif, the app's mono for captions, and the
   designs as plates on an open, off-centre grid. Tokens are forme.css's. */

:root {
  /* The renders' own ground, so a plate has no edge on the page. */
  --paper: #f2f2f2;
  --ink: #111;
  --ink-soft: #6b6b6b;
  --hair: rgba(0, 0, 0, .18);
  /* Didot where it is installed (every Mac and iPhone), then the Bodonis, then a plain serif. */
  --display: 'Didot', 'Didot LT STD', 'Bodoni 72', 'Bodoni MT', 'Bodoni 72 Oldstyle', 'Libre Bodoni', 'Times New Roman', serif;
  --gutter: clamp(20px, 3.4vw, 56px);
}

/* The page scrolls; forme.css locks the body because the app never does. */
html, body { height: auto; min-height: 100%; overflow: auto; }

body {
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Captions, keys and the masthead: the app's mono, small and spaced. */
.mast, .kicker, figcaption, .label, .aside, .foot, .step {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .14em;
  text-transform: uppercase;
}

a { color: inherit; }

/* The masthead: the house on the left, the city in the middle, the ways in on the right. */
.mast {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  padding: 18px var(--gutter);
  background: var(--paper);
}

.house { text-decoration: none; }
.place { color: var(--ink-soft); }
.enter { display: flex; justify-content: flex-end; gap: 28px; }

.way { text-decoration: none; white-space: nowrap; }
.way:hover, .house:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.way:focus-visible, .house:focus-visible, .step:focus-visible { outline: 1px dotted var(--ink); outline-offset: 3px; }

/* I. The first screen: one object, large and off-centre, and the name set under it at the scale of a poster. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  column-gap: var(--gutter);
  height: calc(100svh - 54px);
  min-height: 560px;
  padding: 0 var(--gutter) 4vh;
}

.kicker {
  grid-column: 1 / 5;
  grid-row: 1;
  margin: 8vh 0 0;
  color: var(--ink-soft);
}

.hero-plate {
  position: relative;
  z-index: 1;
  grid-column: 5 / 13;
  grid-row: 1 / 4;
  align-self: start;
  margin: 4vh 0 0;
}

.hero-plate img { display: block; width: 100%; height: auto; max-height: 66svh; object-fit: contain; object-position: right top; }

.hero-plate figcaption { margin-top: -1vw; text-align: right; }

.no {
  display: inline-block;
  margin-right: 1.4em;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: none;
}

.name {
  position: relative;
  z-index: 0;
  grid-column: 1 / 13;
  grid-row: 3;
  margin: 0 0 0 -.05em;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(96px, 21vw, 400px);
  line-height: .9;
  letter-spacing: -.035em;
}

/* The mark, as the favicon draws it, set as the full stop the name never has. */
.name .dot {
  display: inline-block;
  width: .1em;
  height: .1em;
  margin-left: .04em;
  border-radius: 50%;
  background: var(--mark);
  vertical-align: baseline;
}

/* II. One line, set large, out of the middle of the page. */
.statement {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: 22vh var(--gutter) 18vh;
}

.line {
  grid-column: 5 / 12;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(38px, 5.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -.01em;
}

.line em { font-style: italic; }

.aside {
  grid-column: 5 / 9;
  margin: 4.5vh 0 0;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: .04em;
  font-size: 13px;
}

/* III. The plates: each its own width and height on the grid, as a hang is, never two side by side alike. */
.plates {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 14vh;
  padding: 0 var(--gutter) 20vh;
}

.plate { margin: 0; }
.plate img { display: block; width: 100%; height: auto; }
/* A render's ground darkens under the shoe; its edge is faded into the paper so a plate has no frame. */
.hero-plate img, .plate img {
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
}
.plate figcaption { margin-top: 14px; }

.p-lasts { grid-column: 1 / 13; }
/* Four lasts in one strip, edge to edge, each a print on its own studio paper. */
.p-lasts .shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.p-lasts .shelf img { -webkit-mask-image: none; mask-image: none; }
.p-grade { grid-column: 7 / 13; }
.p-draw { grid-column: 1 / 8; margin-top: -6vh; }
.p-flat { grid-column: 1 / 13; }
.p-flat .pair { display: grid; grid-template-columns: 5fr 6fr; align-items: center; gap: var(--gutter); }
.p-flat .pair img:last-child { box-shadow: 0 0 0 1px var(--hair); -webkit-mask-image: none; mask-image: none; }
.p-foot { grid-column: 2 / 7; }
.p-sole { grid-column: 7 / 13; align-self: end; }
.p-almond { grid-column: 3 / 11; }

/* IV. The software page: a title, then each step as a plate, its number in the serif beside the app's still. */
.intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: 16vh var(--gutter) 14vh;
}

.title {
  grid-column: 1 / 13;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 200px);
  line-height: .92;
  letter-spacing: -.03em;
}

.intro .aside { grid-column: 1 / 6; }

.steps-list { padding: 0 var(--gutter) 16vh; }

.step-plate {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin: 0 0 16vh;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}

.step-plate figcaption { grid-column: 1 / 4; display: flex; flex-direction: column; gap: 14px; }
.step-plate .nr { font-family: var(--display); font-size: clamp(48px, 6vw, 96px); line-height: .9; letter-spacing: -.02em; text-transform: none; }
.step-plate picture { grid-column: 4 / 13; }
/* Every other plate set one column in, so the stills do not stack as a column of screens. */
.step-plate:nth-child(even) picture { grid-column: 3 / 12; }
.step-plate img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px var(--hair); }

.enter [aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* V. The colophon. */
.foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 18px;
  margin: 0 var(--gutter);
  padding: 18px 0 calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ink);
}

.what { grid-column: 1 / 7; align-self: start; margin: 0; color: var(--ink-soft); text-transform: none; letter-spacing: .02em; white-space: nowrap; }
.what .brand { margin-right: 12px; color: var(--ink); letter-spacing: .14em; }
.ways { grid-column: 7 / 11; display: flex; flex-wrap: wrap; gap: 6px 28px; }
.colophon { grid-column: 11 / 13; margin: 0; text-align: right; color: var(--ink-soft); }

/* An address is read and copied, not pressed; it keeps its own case. */
#contact { text-transform: none; letter-spacing: .04em; color: var(--ink-soft); }

/* A tablet or a narrow window: the plates in two lanes, the index over the still. */
@media (max-width: 900px) {
  .place { display: none; }
  .mast { grid-template-columns: 1fr auto; }
  .kicker { grid-column: 1 / 13; margin-top: 5vh; }
  .hero-plate { grid-column: 1 / 13; grid-row: 2; }
  .hero-plate figcaption { margin-top: 6px; }
  .line { grid-column: 1 / 13; }
  .aside { grid-column: 1 / 11; }
  .p-lasts .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-grade { grid-column: 3 / 13; }
  .p-draw { grid-column: 1 / 11; margin-top: 0; }
  .p-flat .pair { grid-template-columns: 1fr; }
  .p-foot { grid-column: 1 / 10; }
  .p-sole { grid-column: 3 / 13; }
  .p-almond { grid-column: 1 / 13; }
  .step-plate figcaption { grid-column: 1 / 13; flex-direction: row; align-items: baseline; gap: 18px; margin-bottom: 18px; }
  .step-plate picture, .step-plate:nth-child(even) picture { grid-column: 1 / 13; }
  .intro .aside { grid-column: 1 / 13; }
  .what, .ways, .colophon { grid-column: 1 / 13; text-align: left; }
}

/* A phone held upright: the app's own phone stills, as the page's <source> for them says. */
@media (max-width: 600px) and (orientation: portrait) {
  .enter { gap: 18px; }
  .way { display: inline-flex; align-items: center; min-height: 44px; }
  .mast { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 6px; }
  .hero { min-height: auto; padding-bottom: 6vh; }
  .name { font-size: 30vw; }
  .statement { padding: 14vh var(--gutter) 12vh; }
  .plates { row-gap: 9vh; }
  .line { text-wrap: balance; }
}