/* /build: how the spaceport was built. Loads after site.css and only adds
   the layout the long story needs; every colour, face and size is site.css's. */

/* opening */
.bhero { padding: 0 0 8px; }
.bhero .wrap { display: grid; gap: 28px; }
.bhero h1 { font-size: clamp(34px, 10.2vw, 88px); line-height: .98; margin: 0 0 20px; }
.bhero .lead { order: -1; margin: 0 calc(-1 * var(--gut)); }
.bhero .lead img { width: 100%; height: auto; }

/* the film */
.film { padding: 44px 0 52px; border-top: 1px solid rgba(243,233,210,.14); }
.film .frame { width: min(100%, 420px); margin: 0 auto; border: 1.5px solid var(--paper); background: var(--night); }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: var(--night); }
.film .fine { text-align: center; margin: 14px 0 0; }

/* the build log */
.log { padding: 64px 0 40px; }
.stp { padding: 30px 0 38px; border-top: 1.5px solid var(--ink); }
.stp .when { font: 700 10.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--rust); margin: 0; }
.stp h3 { font-size: clamp(20px, 5.4vw, 34px); line-height: 1.1; text-transform: uppercase; margin: 8px 0 16px; }
.stp .txt { max-width: 62ch; }
.stp .txt p { color: var(--ink2); }

/* photos: edge to edge on a phone, no frame */
.ph { margin: 22px calc(-1 * var(--gut)) 0; }
.ph img { width: 100%; height: auto; }
.ph figcaption { padding: 8px var(--gut) 0; font-size: 11px; letter-spacing: .06em; color: var(--faint); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 22px calc(-1 * var(--gut)) 0; }
.pair .ph { margin: 0; }

/* drawings sit in the site's figure frame */
.stp .figs { margin-top: 22px; }

/* the passport office */
.office .cols3 { display: grid; gap: 26px; margin-top: 8px; }
.office .txt p { color: var(--ink2); max-width: 60ch; }
.office .txt .fine { color: var(--faint); }
.office .ph.shot { margin: 0 auto; width: min(100%, 360px); }
.office .ph.shot img { border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--paper3); }
.office .pass { margin: 34px auto 0; width: min(100%, 520px); }
.office .pass img { width: 100%; height: auto; transform: rotate(-2deg); box-shadow: 8px 10px 0 rgba(20,36,58,.18); }

/* parts and code */
.faq .grid { display: grid; gap: 10px; }
.parts { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.parts th, .parts td { text-align: left; vertical-align: top; padding: 9px 8px 9px 0; border-bottom: 1px dashed var(--paper3); }
.parts th { font-weight: 700; width: 38%; color: var(--ink); }
.qa pre { margin: 0 0 14px; padding: 14px; overflow-x: auto; background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); font: 400 12px/1.6 var(--mono); }

/* send them into the site */
.board-out { padding: 60px 0 68px; }
.gates { list-style: none; padding: 0; margin: 28px 0 0; border: 1.5px solid var(--paper); }
.gates li + li { border-top: 1px dashed rgba(243,233,210,.28); }
.gates a { display: grid; gap: 4px; padding: 18px 16px 17px; text-decoration: none; color: var(--paper); }
.gates .g { font: 700 11px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mustard); }
.gates b { font: 400 clamp(20px, 5.6vw, 30px)/1.15 var(--display); text-transform: uppercase; font-weight: 400; }
.gates b::after { content: " →"; color: var(--orange); }
.gates .x { font-size: 12.5px; color: var(--mute); line-height: 1.55; }
.gates a:hover b, .gates a:focus-visible b { color: var(--orange); }

@media (min-width: 600px) {
  .gates { display: grid; grid-template-columns: repeat(3, 1fr); }
  .gates li + li { border-top: 0; border-left: 1px dashed rgba(243,233,210,.28); }
}

@media (min-width: 980px) {
  .bhero { padding: 0; }
  .bhero .wrap { grid-template-columns: minmax(0, 1fr) 520px; align-items: center; gap: 56px; }
  .bhero .copy { padding: 60px 0; }
  .bhero h1 { font-size: clamp(44px, 4.4vw, 64px); }
  .bhero .lead { order: 0; margin: 0 calc(-1 * var(--gut)) 0 0; }
  .stp { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 40px; }
  .stp > * { grid-column: 2; }
  .stp > .when { grid-column: 1; grid-row: 1 / span 2; padding-top: 10px; }
  .stp.split { grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); }
  .stp.split > .txt { grid-column: 2; }
  .stp.split > .figs { grid-column: 3; grid-row: 1 / span 3; margin-top: 0; display: grid; gap: 22px; align-content: start; }
  .stp.split > h3 { grid-column: 2; }
  .stp.split > .ph.wide { grid-column: 2 / span 2; }
  .ph, .pair { margin-left: 0; margin-right: 0; }
  .ph figcaption { padding-left: 0; }
  .ph.narrow { max-width: 480px; }
  .ph.tall { max-width: 640px; }
  .pair { gap: 12px; }
  .office .cols3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; gap: 48px; }
  .faq .grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
}

/* drawings open full size on tap; matched crops in a pair */
.hullfig .zoom { display: block; }
.pair.crop img { aspect-ratio: 4 / 5; object-fit: cover; }

/* the two editions: Passenger (/build) and Engineer's (/build/engineer) */
.edswitch { margin: 0 0 22px; font: 700 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.edswitch a { color: var(--mustard); text-decoration: none; border-bottom: 1px solid currentColor; }
.edswitch a:hover, .edswitch a:focus-visible { color: var(--orange); }
.stp > .edswitch { margin-top: 26px; color: var(--faint); }
.stp > .edswitch a { color: var(--rust); }
.bigline { font: 400 clamp(26px, 7vw, 44px)/1.1 var(--display); text-transform: uppercase; color: var(--ink); margin: 18px 0; }
.edband { padding: 60px 0 64px; border-top: 1px solid rgba(243,233,210,.14); }
.edband .lede { max-width: 60ch; margin-bottom: 22px; }
.refit .lede + .lede { margin-top: 10px; }
.refit .ph { margin-bottom: 26px; }
.refit .ph a { display: block; }
.office .holdpass { margin-top: 44px; max-width: 60ch; }
.ph.pcb { margin-left: auto; margin-right: auto; width: min(100%, 760px); }
.ph.pcb figcaption { padding-left: 0; }

/* engineer's tables and code */
.tbl { overflow-x: auto; margin: 22px 0 6px; }
.spec { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 480px; }
.spec caption { text-align: left; font: 700 10.5px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--rust); padding-bottom: 10px; }
.spec th { text-align: left; font: 700 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 8px 10px; }
.spec td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px dashed var(--paper3); color: var(--ink2); }
.stp pre { margin: 6px 0 18px; padding: 14px; overflow-x: auto; background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); font: 400 12px/1.6 var(--mono); }
@media (min-width: 980px) {
  .stp.split > .tbl { grid-column: 2 / span 2; }
}