/* ainslie.dev — an engineering title block. The name carries the page; the
   fields run across the foot of the sheet and do the talking. Corner
   registration marks and selection marks are the only ornament. */

:root {
  --ink:      #0b0c0e;   /* ground */
  --paper:    #e9e4d8;   /* the type color, not a background */
  --rule:     #23262c;   /* hairlines */
  --dim:      #8a919d;   /* field labels; kept above 4.5:1 on --ink at 10px */
  --dropout:  #c8503c;   /* a printed red, not a neon one; the only accent */

  --pad: clamp(1.125rem, 3.2vw, 2.75rem);
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: var(--pad);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- the sheet ------------------------------------------------------- */

.sheet {
  position: relative;
  flex: 1;
  /* Flex items floor at min-content unless told otherwise; without this the
     sheet is pushed wider than the viewport by its own text. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  border: 1px solid var(--rule);
}

/* Registration marks: the corners a sheet is squared against. */
.mark {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--dropout);
}
.mark-tl { top: -5px; left: -5px; }
.mark-tr { top: -5px; right: -5px; }
.mark-bl { bottom: -5px; left: -5px; }
.mark-br { bottom: -5px; right: -5px; }

/* ---- masthead -------------------------------------------------------- */

.serial {
  margin: 0 0 clamp(1.75rem, 5vh, 3rem);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  /* Too long for one line at phone widths; balance keeps it from orphaning
     the last two words. Ignored by browsers that don't support it. */
  text-wrap: balance;
}

.name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(3.25rem, 12.5vw, 9.5rem);
  line-height: 0.88;
  letter-spacing: -0.028em;
}

.name span { display: block; }

/* ---- lower band ------------------------------------------------------ */

/* Pinned to the foot of the sheet at every size, the way a title block sits at
   the bottom of a drawing. */
.block { margin-top: auto; padding-top: clamp(1.75rem, 6vh, 5rem); }

.rule {
  height: 1px;
  margin: 0 0 clamp(0.875rem, 2vh, 1.25rem);
  border: 0;
  background: var(--rule);
  transform-origin: left center;
}

/* ---- field grid ------------------------------------------------------ */

/* Stacked on a phone; strung across the foot of the sheet on desktop, where
   the fields' shared top borders read as one continuous rule. */
.fields {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 56rem) {
  .fields {
    /* Each column takes exactly the width its content wants and the leftover
       goes into the gaps, so the long lists stay on one line instead of being
       forced to wrap by an equal-quarters split. minmax(0, ...) still lets them
       shrink and wrap on a narrow window rather than overflowing the sheet. */
    grid-template-columns: repeat(4, minmax(0, max-content));
    justify-content: space-between;
    column-gap: clamp(1rem, 2.4vw, 2.25rem);
  }
}

.field {
  display: grid;
  gap: 0.3rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
}

.field dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

.field dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.field-links dd {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin-top: 0.15rem;
}

/* Selection marks: the square fills when you choose one. */
.opt {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.2rem 0;
  color: var(--paper);
  text-decoration: none;
}

.opt-mark {
  flex: none;
  width: 9px;
  height: 9px;
  border: 1px solid var(--dim);
  transition: background-color 140ms ease, border-color 140ms ease;
}

.opt-label {
  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease;
}

.opt:hover .opt-mark,
.opt:focus-visible .opt-mark {
  background: var(--dropout);
  border-color: var(--dropout);
}

.opt:hover .opt-label,
.opt:focus-visible .opt-label { border-bottom-color: var(--paper); }

.opt:focus-visible {
  outline: 2px solid var(--dropout);
  outline-offset: 5px;
}

/* ---- load sequence: rules draw, then the sheet settles --------------- */

@media (prefers-reduced-motion: no-preference) {
  .rule { animation: draw 700ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both; }
  .serial { animation: rise 600ms ease-out both; }
  .name { animation: rise 800ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both; }
  .field { animation: rise 600ms ease-out both; }
  .field:nth-child(1) { animation-delay: 300ms; }
  .field:nth-child(2) { animation-delay: 370ms; }
  .field:nth-child(3) { animation-delay: 440ms; }
  .field:nth-child(4) { animation-delay: 510ms; }
  .mark { animation: appear 400ms ease-out 900ms both; }
}

@keyframes draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}