/* The holding page that stands on Pat's domains until the site opens on 1 January 2027. This folder is the whole
   deploy: nothing here may reach outside it (no ../, no network fonts), because it ships to Cloudflare Pages as is.
   The film hero is saved for launch; this page is the lockup, the place, the date and a way to write */
/* the faces are declared in lockup.css, which every page loads first */

:root {
  --ground: #fcfcfa; --navy: #14233c; --deep: #0b1626; --muted: #5b6577; --rule: #e4e2dc;
  /* from the PNG flag: ochre for the bird, red for the field; small doses only */
  --ochre: #d9a441; --red: #b83a2b;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --fg: var(--navy); --soft: var(--muted); --line: var(--rule);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr; background: var(--ground); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; }

main { display: grid; place-content: center; justify-items: center; gap: 44px; padding: 64px 24px 40px; }

/* the lockup itself is lockup.css and lockup.js; this page only sizes it. Stacked, because the ribbon is under it.
   The ribbon shares its size so the two keep one proportion: 4.3em is about 1.4 times the name's width */
.lockup, .ribbon { font-size: clamp(60px, 7.5vw, 104px); }

/* the date, as a site banner across the top: a pale strip, not a parchment ribbon */
.opening { margin: 0; padding: 9px 16px 9px calc(16px + .28em); background: #eceef2; color: var(--navy); text-align: center; font-size: 11.5px; font-weight: 450; letter-spacing: .28em; text-transform: uppercase; }

/* the place, on the ribbon from the deck's badge */
.ribbon { width: 4.3em; height: auto; overflow: visible; margin-top: -6px; }
.ribbon .band { font: 600 11.5px var(--sans); letter-spacing: .32em; fill: var(--navy); }

.write { margin: -14px 0 0; font-size: 15px; color: var(--soft); text-align: center; }
.write a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--ochre); padding-bottom: 2px; transition: border-color .2s; }
.write a:hover { border-bottom-color: var(--red); }

/* navy: the same page at night, over a still from the film, the hero's promise without spending it */
.navy { --fg: var(--ground); --soft: rgba(252, 252, 250, .66); --line: rgba(252, 252, 250, .2); background: var(--deep); }
.navy::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(11, 22, 38, .72), rgba(11, 22, 38, .5) 45%, rgba(11, 22, 38, .86)), url(img/barracuda-1920.webp) center 40% / cover; }

@media (max-width: 700px) {
  main { gap: 30px; }
  .lockup, .ribbon { font-size: 18.5vw; }
  .opening { font-size: 11px; letter-spacing: .22em; }
  .write { font-size: 14px; margin-top: -8px; }
  .write a { white-space: nowrap; }
}