/*
  thedropcut.com. Built to the brand guide: black, white, #888888, hairlines at
  #333333, and one red that is spent on the "//" and on the tick where a drop
  lands — never on a link, a hover or a button.

  The only thing that moves on these pages is the footage. There is no reveal on
  scroll and no transition longer than a blink: a page that waits for an
  animation before it shows its content is a blank page to anybody on a phone
  outside a venue.

  One file, because the policy in _headers allows no inline style at all.
*/

:root {
  --black:    #000000;
  --white:    #ffffff;
  --grey:     #888888;
  --hairline: #333333;
  --red:      #ff1e1e;

  /* The guide's faces come first, so an Apple device shows what it always did
     and never downloads a font. Everything else gets the two faces below
     instead of whatever its system has: on Android the stack used to land on
     Roboto and a default mono, which is nobody's brand. */
  --sans: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, "Roboto Mono", monospace;

  --gutter: 32px;
  --gap: 24px;
  --max: 72rem;
}

/*
  Inter and Roboto Mono, served from this site, both under the SIL Open Font
  License (the texts are beside the files). Two subsets each: Latin, and the
  extension that holds ș and ț — fetched only by a page that prints them, which
  with "Iași" in the footer is every page.

  `optional`: the page is drawn at once in the system's face and takes these
  when they arrive within the first moment, or on the next page if they do not.
  Text never waits and never jumps.
*/
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: optional;
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: optional;
  src: url("/fonts/inter-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: optional;
  src: url("/fonts/inter-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: optional;
  src: url("/fonts/inter-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700; font-display: optional;
  src: url("/fonts/inter-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700; font-display: optional;
  src: url("/fonts/inter-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Mono"; font-style: normal; font-weight: 500; font-display: optional;
  src: url("/fonts/roboto-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Mono"; font-style: normal; font-weight: 500; font-display: optional;
  src: url("/fonts/roboto-mono-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font: 400 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  /* A short page — the 404, Contact on a tall screen — otherwise ends its
     footer mid-screen with black under it. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

img, video, svg { display: block; max-width: 100%; }

/* The underline is the only thing that says "link" in a sentence, so it gets the
   grey that can be seen: #333 on black is 1.66:1 and two links on Services could
   not be told from the words around them. #333 stays for lines that divide. */
a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--grey); transition: border-color 120ms; }
a:hover { border-bottom-color: var(--white); }
/* Two pixels: at one, a focused quiet button was an unfocused primary one. */
:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: var(--gutter); top: -60px; padding: 10px 14px; background: var(--white); color: var(--black); border: 0; }
.skip:focus { top: 12px; }

/* The mono label: "// Concept." with its full stop, the red on the slashes only. */
.tag {
  margin: 0 0 24px;
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.18em;
  color: var(--grey);
  text-transform: uppercase;
}
.tag i { color: var(--red); font-style: normal; }

h1 { margin: 0 0 24px; font: 700 clamp(36px, 5vw, 64px)/1.03 var(--sans); letter-spacing: -0.03em; }
h3 { margin: 0; font: 700 clamp(22px, 2.4vw, 28px)/1.15 var(--sans); letter-spacing: -0.015em; }
p { margin: 0 0 14px; }

.lede { max-width: 34rem; font-size: 17px; line-height: 1.55; }
.text { max-width: 36rem; }
.note { max-width: 36rem; font-size: 13px; color: var(--grey); }
.meta { font: 500 11px/1.5 var(--mono); letter-spacing: 0.12em; color: var(--grey); text-transform: uppercase; }

/* ---------------------------------------------------------------- header */

.top { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; }
.brand { border: 0; margin-left: -6px; }
.brand img { width: 52px; height: 52px; }
.top nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 28px; }
.top nav a {
  border: 0;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.18em;
  color: var(--grey);
  text-transform: uppercase;
  padding: 6px 0;
  transition: color 120ms;
}
.top nav a:hover, .top nav a[aria-current] { color: var(--white); }

/* --------------------------------------------------------------- actions */

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
.cta {
  display: inline-block;
  padding: 15px 20px;
  border: 1px solid var(--white);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.cta:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.cta.quiet { border-color: var(--hairline); }

.motion {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--grey);
  padding: 0 0 2px;
  color: var(--grey);
  font: 500 11px/1.5 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.motion:hover { color: var(--white); border-bottom-color: var(--white); }

/* Small text links keep their size and gain a finger's worth of room: on a
   phone they measured 19 to 25 px tall. The underline does not move. */
.more a, .motion, .foot-links a { position: relative; }
.more a::after, .motion::after, .foot-links a::after { content: ""; position: absolute; inset: -12px -8px; }

/* ------------------------------------------------------------------ hero */

.hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  align-items: end;
  padding: 16px 0 140px;
}
/* The buttons and the reel end on one line. The caption hangs below that line
   instead of being part of it — as part of it, the two missed by 11.5 px. */
.hero-text { grid-column: 1 / 9; }
.hero-reel { grid-column: 9 / 13; margin: 0; width: 100%; max-width: calc(76vh * 9 / 16); justify-self: end; position: relative; container-type: inline-size; }
.reel { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--black); border: 1px solid var(--hairline); }
.hero-reel figcaption, .side-reel figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-top: 12px; font-size: 13px; }
.hero-reel figcaption { position: absolute; left: 0; right: 0; top: 100%; }
.hero-reel .motion, .side-reel .motion { margin-left: auto; }
/* On a short laptop the reel is narrow and the city pushed the pause control to
   a second line. The city is on the reel's own page. */
@container (max-width: 330px) { .hero-reel .meta { display: none; } }

/* ------------------------------------------------------ sections and grid */

.head { padding: 56px 0 88px; }
.head.split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: center; }
.head.split > div { grid-column: 1 / 8; }
.plate { grid-column: 9 / 13; margin: 0; border: 2px solid var(--hairline); }
.side-reel { grid-column: 9 / 13; margin: 0; width: 100%; max-width: calc(58vh * 9 / 16); justify-self: end; }
.plate img { width: 100%; height: auto; }

.band { border-top: 1px solid var(--hairline); padding: 28px 0 104px; }
.band .tag { margin-bottom: 40px; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px var(--gap); align-items: start; }
.tile { display: block; border: 0; }
.tile .reel { transition: border-color 120ms; }
.tile:hover .reel { border-color: var(--grey); }
.tile-title { display: block; margin-top: 12px; font-weight: 500; line-height: 1.35; }
.tile-meta { display: block; margin-top: 3px; font: 500 11px/1.5 var(--mono); letter-spacing: 0.12em; color: var(--grey); text-transform: uppercase; }
/* Six pieces of work sit three across, so the last row is full. */
.grid.three { grid-template-columns: repeat(3, 1fr); }
/* One reel large beside four small: five pieces of work fill the grid exactly. */
.grid.lead .tile:first-child { grid-column: span 2; grid-row: span 2; }

.more { margin: 44px 0 0; }

/* ----------------------------------------------- rows between hairlines */

/* The section that follows draws the closing line; a second one here boxed in
   an empty strip between them. */
.doors, .list { padding-bottom: 68px; }
.door, .item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  align-items: baseline;
  padding: 36px 0;
  border-top: 1px solid var(--hairline);
}
.door h3, .item h3 { grid-column: 1 / 5; }
.door p { grid-column: 5 / 10; margin: 0; color: var(--grey); }
/* The whole row is the link: its one target was a 25 px word at the far right.
   That word says where the row goes rather than repeating its heading. */
.door { position: relative; }
.door .go { grid-column: 10 / 13; justify-self: end; white-space: nowrap; font: 500 12px/1.5 var(--mono); letter-spacing: 0.04em; color: var(--grey); transition: color 120ms, border-color 120ms; }
.door .go::after { content: ""; position: absolute; inset: 0; }
.door:hover .go { color: var(--white); border-bottom-color: var(--white); }
.item p { grid-column: 5 / 11; margin: 0; color: var(--grey); }
.item .given { grid-column: 5 / 11; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; margin: 10px 0 0; color: var(--white); }
.item .given dt { font: 500 11px/1.5 var(--mono); letter-spacing: 0.12em; color: var(--grey); text-transform: uppercase; }
.item .given dd { margin: 0; }

.rows { display: grid; grid-template-columns: 9rem 1fr; gap: 10px var(--gap); margin: 0; max-width: 40rem; }
.rows dt { font: 500 11px/1.9 var(--mono); letter-spacing: 0.12em; color: var(--grey); text-transform: uppercase; }
.rows dd { margin: 0; }

/* 6.4vw: at a 24 px floor the address was wider than a 320 px phone and broke
   as "…thedropcut.co / m". */
.reach .big { margin: 0 0 18px; font: 700 clamp(21px, 6.4vw, 52px)/1.1 var(--sans); letter-spacing: -0.025em; overflow-wrap: anywhere; }
/* Under a page's own heading the address is the second line, not a second
   heading: at 52 px beside a 64 px h1 the two competed. */
.head .big { margin: 32px 0 0; font: 700 clamp(21px, 2.4vw, 28px)/1.2 var(--sans); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.big a { border-bottom-width: 2px; }

/* ----------------------------------------------------------------- watch */

.watch { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; padding: 16px 0 96px; }
.watch-reel { grid-column: 1 / 6; width: 100%; max-width: calc(84vh * 9 / 16); }
.watch-info { grid-column: 7 / 13; padding-top: 40px; }
.watch h1 { font-size: clamp(30px, 3.8vw, 48px); }
.watch .rows { padding: 28px 0 0; margin-bottom: 28px; }
.watch .rows + .tag { margin: 12px 0 18px; }

.timeline { width: 100%; height: 36px; margin: 36px 0 30px; overflow: visible; }
.timeline line { stroke: var(--hairline); stroke-width: 1; }
.timeline .drop { stroke: var(--red); stroke-width: 2; }
.timeline text { fill: var(--grey); font: 500 10px var(--mono); letter-spacing: 0.12em; }

.pager { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--hairline); padding: 28px 0 104px; }
.pager a { border: 0; }
.pager span { display: block; font: 500 11px/1.5 var(--mono); letter-spacing: 0.12em; color: var(--grey); text-transform: uppercase; }
.pager a:hover b { border-bottom-color: var(--white); }
.pager b { font-weight: 500; border-bottom: 1px solid var(--grey); }
.pager .next { text-align: right; margin-left: auto; }

/* ---------------------------------------------------------------- footer */

footer { padding-bottom: 36px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; border-top: 1px solid var(--hairline); padding: 22px 0; font-size: 13px; color: var(--grey); }
.foot p { margin: 0; }
.foot-links { display: flex; gap: 22px; }
.foot + .foot { border-top: 0; padding-top: 6px; }
.watermark { font: 500 10px/1.5 var(--mono); letter-spacing: 0.24em; color: var(--hairline); text-transform: uppercase; }
/* A sentence to be read: the readable grey, and sentence case — the guide keeps
   capitals for codes of a word or two. Only the watermark sits at #333. */
.foot-note { font: 500 11px/1.5 var(--mono); letter-spacing: 0.04em; }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 900px) {
  /* Still side by side: stacked at this width the reel sat against the right
     edge with an empty column beside it. */
  .hero-text { grid-column: 1 / 8; }
  .hero-reel { grid-column: 8 / 13; max-width: none; }
  .head.split { display: block; }
  .plate { margin-top: 44px; max-width: 26rem; }
  .side-reel { margin-top: 44px; max-width: 20rem; }
  .watch { display: block; }
  .watch-reel { max-width: 26rem; }
  .door h3, .item h3 { grid-column: 1 / 13; margin-bottom: 10px; }
  .door p, .item p, .item .given { grid-column: 1 / 13; }
  .door .go { grid-column: 1 / 13; justify-self: start; margin-top: 16px; }
}

@media (max-width: 700px) {
  :root { --gutter: 24px; --gap: 16px; }
  /* Five labels on one line down to a 360 px phone, at a size that can be read
     and a height that can be pressed: 11 px, and 43 px tall with the padding. */
  .top { flex-direction: column; align-items: flex-start; gap: 0; padding-top: 18px; padding-bottom: 0; }
  .top nav { width: 100%; justify-content: space-between; gap: 0 10px; }
  .top nav a { letter-spacing: 0.04em; padding: 16px 0; }
  .hero { display: block; padding-bottom: 116px; }
  .hero-text { padding-bottom: 44px; }
  .hero-reel { max-width: 26rem; }
  .head { padding: 36px 0 64px; }
  .band { padding-bottom: 76px; }
  .doors, .list { padding-bottom: 44px; }
  .grid, .grid.three { grid-template-columns: repeat(2, 1fr); gap: 32px var(--gap); }
  .rows, .item .given { grid-template-columns: 1fr; gap: 0; }
  .rows dd { margin-bottom: 14px; }
  .lede { font-size: 16px; }
}