/* =========================================================================
   ZWARTBAERD — § 1 · DE FRONTISPIES
   Vol. IV §5 · Vol. V §8.1 · Vol. VI Part One

   The page does not load. It is simply there.
   NO load animation. No fade, no stagger, no reveal. Vol. XI §13.2 —
   someone will want to fade it in. Hold.
   ========================================================================= */

.frontispiece {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 88vh;              /* the Voorrede's rule must peek at the fold */
  min-height: 88svh;
  padding-block-start: var(--nav-height-sm);
  overflow: hidden;
}

@media (min-width: 64rem) {
  .frontispiece { padding-block-start: var(--nav-height); }
}


/* -------------------------------------------------------------------------
   1 · THE TYPE BLOCK
   Centred within its own zone — one of only two centred blocks on the
   site. Optical centre at 46% of section height, not 50%: a title page's
   block always sits above centre.
   ------------------------------------------------------------------------- */

/* The sheet. --col is defined HERE, not on the section: the section is
   viewport-wide and the columns are sheet-relative. */
.frontispiece__inner {
  --col: calc((100% - 11 * var(--gutter)) / 12);
  --span-6: calc(6 * var(--col) + 5 * var(--gutter));
  position: relative;
  z-index: 2;
}

.frontispiece__type {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block-start: var(--sp-7);
}

@media (min-width: 64rem) {
  .frontispiece__inner {
    flex: 1;
    display: flex;
    align-items: center;
  }
  /* Centred within columns 1–6 — which sit at the sheet's left edge.
     The block is centred in its own zone, not in the viewport. */
  .frontispiece__type {
    width: var(--span-6);
    padding-block: 0;
    transform: translateY(-4%);   /* optical centre at 46%, not 50% */
  }
}


/* Monogram — 48px here, 32px in the nav, 64px in the colophon.
   Three optical cuts, not one scaled. Vol. VII Brief 1. */
.frontispiece__mark {
  width: 3rem;
  height: 3rem;
  color: var(--text);
}

/* Wordmark — 76px at +0.22em. The identity-carrying setting of the whole
   project, and the widest letterspacing anywhere on the site. */
.frontispiece__lockup {
  margin-block-start: 1.75rem;   /* 28 mobile */
}

@media (min-width: 64rem) {
  .frontispiece__lockup { margin-block-start: 2.5rem; }  /* 40 */
}

.frontispiece__wordmark {
  font-family: var(--face-display);
  font-size: var(--t-wordmark);
  line-height: var(--lh-wordmark);
  letter-spacing: var(--tr-wordmark);
  /* letter-spacing adds a trailing space after the final letter; removing
     it is what makes an optically centred wordmark actually centre. */
  margin-inline-end: calc(var(--tr-wordmark) * -1);
  color: var(--text);
  white-space: nowrap;
}

/* Double rule — thick then thin, at 60% of the wordmark's rendered width. */
.frontispiece__rule {
  display: block;
  width: 60%;
  margin: 1.25rem auto 0;        /* 20 */
  height: var(--rule-gap);
  border-block-start: var(--rule-heavy) solid var(--rule);
  border-block-end: 1px solid var(--rule);
}

.frontispiece__eyebrow {
  margin-block-start: 1.25rem;   /* 20 mobile */
  color: var(--accent);
}

@media (min-width: 64rem) {
  .frontispiece__eyebrow { margin-block-start: 1.5rem; }  /* 24 */
}

/* Thesis — the twelve words that carry everything. Garamond italic. */
.frontispiece__thesis {
  margin-block-start: 2.5rem;    /* 40 mobile */
  font-family: var(--face-display);
  font-style: italic;
  font-size: var(--t-subhead);
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
  max-width: 24ch;
}

@media (min-width: 64rem) {
  .frontispiece__thesis { margin-block-start: 3.5rem; }   /* 56 */
}

.frontispiece__fleuron {
  width: 1.5rem;
  height: 1.5rem;
  margin-block-start: 2rem;      /* 32 mobile */
  color: var(--text-quiet);
}

@media (min-width: 64rem) {
  .frontispiece__fleuron { margin-block-start: 3rem; }    /* 48 */
}


/* -------------------------------------------------------------------------
   2 · THE LINK
   One ink link. No button. A shop with a brass bell does not have a
   billboard.                                              Vol. IV §5.1
   ------------------------------------------------------------------------- */

.frontispiece__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  margin-block-start: 1.75rem;   /* 28 mobile */
  padding-block: var(--sp-3);
  font-family: var(--face-display);
  font-variant-caps: small-caps;
  font-feature-settings: var(--smallcaps);
  font-size: var(--t-label);
  letter-spacing: var(--tr-smallcap);
  color: var(--link-color);
  text-decoration: none;
  position: relative;
}

@media (min-width: 64rem) {
  .frontispiece__cta { margin-block-start: 2.5rem; }      /* 40 */
}

.frontispiece__cta::after {
  content: "";
  position: absolute;
  inset-block-end: calc(var(--sp-3) - var(--link-offset));
  inset-inline: 0 1.25rem;
  height: var(--link-underline);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-ink);
}

.frontispiece__cta:hover { color: var(--brass-lit); }
.frontispiece__cta:hover::after { transform: scaleX(1); }

.frontispiece__cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--motion-ink);
}
.frontispiece__cta:hover svg { transform: translateX(3px); }


/* -------------------------------------------------------------------------
   3 · THE PHOTOGRAPH
   It has no edge. The dark of the picture becomes the dark of the page,
   and the falloff is the transition. If anything at all sits in the right
   of the frame, the opening is lost.                       Vol. VIII §4.1
   ------------------------------------------------------------------------- */

/* Mobile: 355 wide in a 375 viewport — wider than the 335 text column,
   10px inset each side. Not full bleed.                     Vol. IV §5.2 */
.frontispiece__img {
  width: calc(100% - var(--page-margin));
  margin-inline: auto;
  margin-block-start: 2.5rem;    /* 40 */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 35% 50%;
}

@media (min-width: 64rem) {
  /* Desktop: the right 56.25% of the VIEWPORT (810px at 1440), bleeding
     to the right edge. See build note — Vol. IV §5.1 gives both 810px and
     "col 7 start (803px)", which cannot both be true; the 45/55 zone
     proportion in Vol. V §8.1 is the governing figure. */
  .frontispiece__img {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 0;
    width: 56.25%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 30% 50%;
  }
}


/* -------------------------------------------------------------------------
   4 · LANDSCAPE PHONE
   The likeliest break on the page. Below 620px viewport height the
   section drops to auto height and the image goes 16:9.    Vol. IV §5.2
   ------------------------------------------------------------------------- */

@media (max-height: 38.75rem) and (max-width: 63.9375rem) {
  .frontispiece {
    min-height: auto;
    padding-block: calc(var(--nav-height-sm) + 4rem) 4rem;
  }
  .frontispiece__img { aspect-ratio: 16 / 9; }
  .frontispiece__thesis { margin-block-start: 2rem; }
  .frontispiece__fleuron { margin-block-start: 1.5rem; }
}


/* -------------------------------------------------------------------------
   5 · THE FOLD
   The Voorrede's double rule peeks below 88vh. That is the scroll cue on
   tall screens; on short phones the photograph's lower edge is the cue.
   No chevron, no bounce, no "scroll" label.               Approved build 001
   ------------------------------------------------------------------------- */