/* The landing page: one wall, the renders' own grey, black type in one grotesk, the work as plates on an
   asymmetric twelve-column grid. No web font: the system's Helvetica, then Arial. */

:root {
  /* The renders' own ground, so a plate has no edge on the page. */
  --wall: #f2f2f2;
  --ink: #111;
  /* 6.3:1 on the wall. */
  --soft: #575757;
  --hair: rgba(0, 0, 0, .16);
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --gutter: clamp(20px, 3.2vw, 56px);
  --big: clamp(44px, 7.2vw, 124px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, figure, dl, dd { margin: 0; }

a { color: inherit; }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; }

img, video { display: block; width: 100%; height: auto; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The wordmark, the one way in at the top, and the twelve columns every section is set on. */
.mast, .title, .idea, .work, .door, .foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--gutter);
}

.mast { align-items: baseline; padding-block: 26px; }

.mark {
  grid-column: 1 / 7;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .24em;
  text-decoration: none;
}

.enter { grid-column: 7 / 13; justify-self: end; }

.way {
  font-size: 13px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.way:hover { text-decoration-color: transparent; }

/* The two halves of the one sentence, set at the size of a poster. */
.headline, .follows {
  font-size: var(--big);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.035em;
}

/* Labels, as a museum hangs them: what is shown, in plain words. */
figcaption {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--soft);
}

/* 1. The first screen: the line, and the object under it, pushed right. */
.title { padding-top: clamp(28px, 7vh, 96px); }
.headline { grid-column: 1 / 12; }
.hero { grid-column: 3 / 13; margin-top: clamp(8px, 2vw, 32px); }
/* The film's own paper is the wall; its edges fade, so a video's colour, a level or two off the page's, shows no box. */
.film {
  aspect-ratio: 1600 / 900;
  background: var(--wall);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}

/* 2. The idea: the rest of the sentence, one line under it, and the pieces of the plate above, flat. */
.idea { align-items: start; padding-top: clamp(96px, 20vh, 240px); }
.follows { grid-column: 1 / 7; grid-row: 1; }
.line { grid-column: 1 / 5; grid-row: 2; margin-top: 32px; max-width: 34ch; font-size: 17px; line-height: 1.45; }
.flat-plate { grid-column: 8 / 13; grid-row: 1 / 4; padding-top: clamp(12px, 3vw, 48px); }

.flat { display: block; width: 100%; height: auto; overflow: visible; }
.flat path {
  fill: none;
  stroke: var(--ink);
  /* In the drawing's millimetres: about a pixel wide at every width. A non-scaling stroke would break the dash. */
  stroke-width: .42;
  stroke-linejoin: round;
}

/* The cut line drawn once as it comes into view, with the scroll, where the browser can tie a line to it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The plate's box and not the path's: Chrome measures a path in its own untransformed units. */
    .flat-plate { view-timeline: --flat block; }
    .flat path {
      stroke-dasharray: 1;
      animation: cut linear both;
      animation-timeline: --flat;
      animation-range: entry 10% entry 90%;
    }
  }
}
@keyframes cut { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* 3. The work: three plates, off the centre and stepped down the wall. */
.work { row-gap: clamp(72px, 14vh, 180px); padding-top: clamp(120px, 24vh, 300px); }
.p-shoe { grid-column: 1 / 9; }
.p-last { grid-column: 9 / 13; align-self: end; }

/* 4. The door: the way in, then the plans as three plain lines. */
.door { row-gap: 56px; padding-top: clamp(120px, 24vh, 300px); padding-bottom: clamp(80px, 14vh, 160px); }
.door .ways { grid-column: 1 / 13; display: flex; align-items: center; gap: 36px; }

.ask {
  display: inline-block;
  padding: 16px 30px;
  border: 1px solid var(--ink);
  font-size: 13px;
  letter-spacing: .08em;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.ask:hover { background: var(--ink); color: var(--wall); }

.plans { grid-column: 1 / 13; display: grid; grid-template-columns: subgrid; }
/* A price list, as a gallery prints one: a line to each plan. */
.plan {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding-block: 14px;
  border-top: 1px solid var(--hair);
  font-size: 13px;
  line-height: 1.5;
  color: var(--soft);
}
.plan:last-child { border-bottom: 1px solid var(--hair); }
.plan dt { grid-column: 1 / 3; color: var(--ink); font-weight: 500; letter-spacing: .06em; }
.plan .cost { grid-column: 3 / 6; color: var(--ink); }
.plan dd:last-child { grid-column: 6 / 13; }

.foot {
  align-items: baseline;
  padding-block: 22px 28px;
  border-top: 1px solid var(--hair);
  font-size: 12px;
}
.what { grid-column: 1 / 9; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand { margin-right: 1.2em; color: var(--ink); font-weight: 500; letter-spacing: .24em; }
.foot .way { grid-column: 9 / 13; justify-self: end; font-size: 12px; }

/* A tablet: the idea stacks, the plates widen. */
@media (max-width: 1000px) {
  .hero { grid-column: 1 / 13; margin-top: 24px; }
  .follows { grid-column: 1 / 13; }
  .line { grid-column: 1 / 10; }
  .flat-plate { grid-column: 3 / 13; grid-row: 3; padding-top: 64px; }
  .p-shoe { grid-column: 1 / 12; }
  .p-last { grid-column: 6 / 13; }
}

/* A phone: one column, the plans one under another. */
@media (max-width: 600px) {
  :root { --big: clamp(40px, 13vw, 64px); }
  .hero { margin-inline: calc(-1 * var(--gutter)); }
  .hero figcaption { padding-inline: var(--gutter); }
  .line { grid-column: 1 / 13; font-size: 16px; }
  .flat-plate { grid-column: 1 / 13; }
  .p-shoe { grid-column: 1 / 13; }
  .p-last { grid-column: 3 / 13; }
  .door .ways { flex-wrap: wrap; gap: 24px 32px; }
  .plan dt { grid-column: 1 / 6; }
  .plan .cost { grid-column: 6 / 13; }
  .plan dd:last-child { grid-column: 1 / 13; margin-top: 4px; }
  /* The address under the line, where it has room. */
  .what { grid-column: 1 / 13; }
  .foot .way { grid-column: 1 / 13; justify-self: start; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ask { transition: none; }
}