/* www.dancomley.com, holding page.
   One family (Schibsted Grotesk, self-hosted), the brand's two inks reversed
   for night (mist type on the navy of the favicon), and one bold move: the
   name, set as large as the window allows. No JavaScript. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #141b2f;
  --ink: #eef1f5;
  --ink-soft: #969fb3;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selected text swaps the two inks. */
::selection {
  background: var(--ink);
  color: var(--paper);
}

/* The page is a poster: a quiet line at the top, the name at the foot. It is
   also a size container, so the name can be sized to its real content width
   (container units ignore a scrollbar, which 100vw does not). */
.poster {
  container-type: inline-size;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  padding: var(--gutter);
  /* The font's descent metric reaches further down than any letter's ink;
     without this it adds a few pixels of pointless vertical scroll. */
  overflow: clip;
}

.poster__note {
  margin: 0;
  max-width: 36ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}

.poster__note p {
  margin: 0.35em 0 0;
}

.poster__heading {
  margin: 0;
  font: inherit;
  color: var(--ink);
}

/* "Dan Comley" is 5.44em wide at this weight and tracking, so dividing the
   content width by that sets it edge to edge on one line. Below 40rem the
   two words stack and "Comley" (3.45em) sets the size instead. The negative
   left margin is optical: it cancels the D's side bearing so the name lines
   up with the line above it. */
.poster__name {
  --fit: 5.44;
  margin: 0 0 0 -0.055em;
  font-size: clamp(3rem, calc((100vw - 2 * var(--gutter)) / var(--fit)), 26rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.055em;
  white-space: nowrap;
}

@supports (width: 1cqi) {
  .poster__name {
    font-size: clamp(3rem, calc(100cqi / var(--fit)), 26rem);
  }
}

.poster__name span {
  display: inline-block;
}

.poster__name a {
  color: inherit;
  text-decoration: none;
}

.poster__name a:focus-visible {
  outline: 0.04em solid currentColor;
  outline-offset: 0.06em;
}

@media (max-width: 40rem) {
  /* Room for the descender of the y on a narrow gutter. */
  .poster {
    padding-bottom: calc(var(--gutter) + 0.75rem);
  }

  .poster__name {
    --fit: 3.45;
    line-height: 0.84;
    white-space: normal;
  }

  .poster__name span {
    display: block;
  }
}

/* On very wide screens the name reaches its size cap while the gutter stays
   put, so the y needs extra room at the foot. */
@media (min-width: 120rem) {
  .poster {
    padding-bottom: calc(var(--gutter) + 2rem);
  }
}

/* The one moment on the page: the name settles in as it loads. */
@media (prefers-reduced-motion: no-preference) {
  .poster__name span {
    animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) both;
  }

  .poster__name span + span {
    animation-delay: 0.09s;
  }

  .poster__note {
    animation: fade 0.6s ease-out 0.45s both;
  }
}

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

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