/* The painted holding page (painted.html): the white page's type, laid out by CSS alone, with the place painted
   round it on a canvas behind. The grid decides where everything goes; paint/scene.js reads the boxes (the
   lockup's ink, the banner, .view, the caption) and paints the sea into .view and the jungle round the rest.
   The faces are declared in lockup.css, which loads first. Nothing here reaches outside holding/. */

:root {
  --ground: #fcfcfa; --navy: #14233c; --muted: #5b6577; --brass: #a8823a; --ochre: #d9a441; --red: #b83a2b;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  /* the lockup's size; the banner is sized from it. From the width, but never so big that the page outgrows the
     screen: the date and address must show without scrolling (Lewis, 2026-11-06). The height term is the room left
     once the sky and view rows have their minimums and the caption its lines, over the lockup and banner's height
     in ems (2.82 side by side). svh, not vh: a phone's toolbar takes from the screen and vh doesn't know it */
  --lk: clamp(40px, min(5.6vw, calc(18svh - 34px)), 94px);
  /* a phone's status bar and home indicator (viewport-fit=cover); variables so a render can stand in for them */
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { position: relative; min-height: 100vh; min-height: 100svh; background: var(--ground); color: var(--navy); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* the painting covers the page exactly, behind everything; without WebGPU it is a still (paint/scene.js), faded in */
.paint { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.paint.still { object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.paint.still.in { opacity: 1; }

/* sky (room for what hangs from the top), lockup, banner, the view out to sea, the caption. A flex column, not a
   grid: in a grid with only a min-height, flexible rows keep their ratio even when that pushes the page past the
   screen (the sea's minimum dragged the sky row to double its own, and the caption fell below the fold on a short
   phone); flex hands out only the space that is left, each minimum kept */
main { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
main::before { content: ""; flex: 1 0 0; min-height: 9svh; }
.view { flex: 2.1 0 0; min-height: 40svh; align-self: stretch; }

.lockup { font-size: var(--lk); }

/* the banner, sized from the lockup so the two scale as one */
.banner { margin: calc(var(--lk) * .3) 0 0; line-height: 0; }
.banner svg { display: block; width: calc(var(--lk) * 6.3); max-width: 94vw; height: auto; }
.banner .tails polygon, .banner .band { fill: var(--ground); stroke: var(--navy); stroke-width: 1.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.banner .folds polygon { fill: var(--navy); stroke: var(--navy); stroke-width: 1.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.banner .rule { fill: none; stroke: var(--brass); stroke-width: .9; vector-effect: non-scaling-stroke; }
.banner text { font-family: var(--sans); font-size: 15.5px; font-weight: 500; letter-spacing: 5px; fill: var(--navy); }

/* under the plate: when, and where to write, on the centre line like everything above them. The date in tracked
   capitals answers the lockup's line; the address sits under it. No blurb, no label, no bullet (Lewis, 2026-11-06):
   the head carries the description for search */
/* viewport-fit=cover (painted.html) lets the page run under an iPhone's status bar and home indicator, as Safari
   draws it anyway; the insets say how far, so the caption keeps clear of the home indicator and the floating toolbar
   over it (paint/scene.js keeps the painting out from under the status bar the same way) */
footer { display: grid; justify-items: center; gap: 10px; padding: 18px 0 calc(32px + var(--sab)); text-align: center; }
footer p { margin: 0; }
.open { font-size: 12px; font-weight: 500; letter-spacing: .28em; padding-left: .28em; text-transform: uppercase; }   /* tracking trails the last letter: pad the first so it centres */
.write { font-size: 15px; }
.write a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--ochre); padding-bottom: 2px; transition: border-color .2s; }
.write a:hover { border-bottom-color: var(--red); }

/* the entrance, quick: the lockup fades in (lockup.css), the banner unrolls from its middle, the caption follows.
   Everything waits for .ready, when the faces are in and the lockup measured, which is also when painting starts */
.js .banner svg { clip-path: inset(0 50%); }
.js .ready .banner svg { animation: unroll .6s cubic-bezier(.2, .75, .25, 1) .15s both; }
@keyframes unroll { from { clip-path: inset(0 50%); } to { clip-path: inset(0 0); } }
.js footer { opacity: 0; transition: opacity .6s ease .6s; }
.js .ready footer { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .ready .banner svg { animation: none; clip-path: none; } .js footer { transition: none; } }

/* an upright tablet has the sky of a phone and the width of a laptop: size the lockup from the width */
@media (orientation: portrait) and (min-width: 701px) { :root { --lk: min(8.6vw, calc(18svh - 34px)); } }

/* a short window (a phone on its side, a small laptop): less sky and view, so the caption still shows */
@media (max-height: 560px) and (min-width: 701px) {
  main::before { min-height: 5svh; }
  .view { flex-grow: 1.4; min-height: 30svh; }
  footer { padding: 10px 0 calc(16px + var(--sab)); gap: 6px; }
}

/* a phone: the lockup stacks (.stack-narrow, lockup.css), and as a column it can be larger; mark, name and banner
   then read as one badge, the banner a little wider than the name, its capitals set up to stay legible */
@media (max-width: 700px) {
  :root { --lk: min(14vw, calc(12svh - 28px)); }   /* stacked, mark to banner is about 4.6em */
  main { padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  main::before { min-height: 10svh; }
  .view { flex-grow: 1.7; min-height: 34svh; }
  .banner { margin-top: calc(var(--lk) * .36); }
  .banner svg { width: min(calc(var(--lk) * 5.6), 88vw); }
  .banner text { font-size: 18px; letter-spacing: 5.5px; }
  .open { font-size: 11.5px; letter-spacing: .24em; padding-left: .24em; }
  .write { font-size: 14px; }
}