/* ==========================================================================
   bydrsam.com — nameplate
   Ink on paper. The seal is the whole page: no nav, no copy, no contact.
   Tokens lifted from wzrmd.com's pen.css so the two properties read as
   one hand, even though the marks are different.
   ========================================================================== */

:root {
  --ink:      #0A0A0A;
  --paper:    #FAFAF7;
  --page-pad: 22px;
}

@media (min-width: 720px) {
  :root { --page-pad: 48px; }
}

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

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

::selection { background: var(--ink); color: var(--paper); }

.holding {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-pad);
  padding-top: calc(var(--page-pad) + env(safe-area-inset-top));
  padding-bottom: calc(var(--page-pad) + env(safe-area-inset-bottom));
}

/* A circle, not a wordmark — so it's sized against whichever side of the
   viewport is SHORTER. Sizing on vw alone runs the seal off the bottom of a
   landscape phone. The ring text is the smallest thing on the page, so the
   seal takes 72% of the short side rather than the 52% the wzrmd wordmark
   gets: on a phone it should fill the screen, not sit in it. */
.holding svg {
  display: block;
  width: min(72vw, 72svh, 460px);
  height: auto;
  color: var(--ink);
}