/* ==========================================================================
   SHEET PAGES — the shared vocabulary behind the storyboarded layouts
   ==========================================================================

   The storyboards are one design repeated: a framed drawing sheet, a masthead
   of drafting tags, a left column carrying an eyebrow / white headline / italic
   blue subtitle / body, and a page-specific right side. Rather than each page
   redefining that, the common parts live here and every page adds only what is
   genuinely its own.

   brand-process.css came first and still carries its own .pp-* copies of some
   of this. It should be migrated onto these classes the next time it is opened
   for another reason — not now, because that page is live and working, and
   rewriting it to save a few declarations is churn dressed up as tidying.

   SIZING follows the same rule set everywhere: the things that carry the
   composition are clamp() on viewport width so proportions hold as the window
   changes, with floors so nothing shrinks past readable. Below 900px the
   compositions become a single readable column — a holding pattern until mobile
   is storyboarded, not a design.
   --------------------------------------------------------------------------- */

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

.sp-body {
  position: relative; z-index: 2;
  flex: 1;
  display: grid;
  align-items: center;
  gap: clamp(28px, 4.5vw, 76px);
  padding: clamp(14px, 2.6vh, 40px) clamp(10px, 2vw, 40px) clamp(10px, 2vh, 30px);
}
/* Two columns, text left. The ratio is the storyboard's, near enough that the
   headline breaks in the same places. */
.sp-body.split { grid-template-columns: minmax(300px, 0.82fr) 1.18fr; }

.sp-left { max-width: 580px; }

/* ---- the headline stack -------------------------------------------------- */

.sp-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.2vw, 4.9rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: clamp(8px, 1.4vh, 20px) 0 0;
  /* Three shadows doing three jobs, matching the home headline: a tight one for
     contact against the grid lines behind it, a mid one for the drop, and a
     wide faint one for the ambient darkening a raised object casts. Navy, never
     black — black greys the blue and reads as a bevel. */
  text-shadow:
    0 1px 0 rgba(1,15,40,.55),
    0 3px 10px rgba(1,15,40,.45),
    0 12px 38px rgba(1,15,40,.35);
}

/* The second line of the headline, in italic blue. On the boards this is part
   of the same sentence rather than a subtitle under it, so it sits at the same
   size and simply changes voice. */
.sp-title em {
  display: block;
  font-style: italic;
  color: #8fb6e8;
}

/* A genuine subtitle, smaller, where a page has one instead of a second
   headline line. */
.sp-sub {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.95rem);
  line-height: 1.24;
  color: #a8c4ea;
  margin: clamp(6px, 1.1vh, 14px) 0 0;
  text-shadow: 0 2px 8px rgba(1,15,40,.4);
}

.sp-copy {
  margin: clamp(14px, 2.4vh, 30px) 0 0;
  max-width: 52ch;
}
.sp-copy p {
  font-size: clamp(.88rem, 1.05vw, 1.02rem);
  line-height: 1.72;
  color: var(--white-70);
  margin: 0 0 clamp(10px, 1.6vh, 18px);
}
.sp-copy p:last-child { margin-bottom: 0; }

/* ---- the baseline strip -------------------------------------------------- */

.sp-base {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 54px);
  font-family: var(--mono);
  font-size: clamp(.56rem, .74vw, .7rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--white-55);
  padding: clamp(6px, 1.2vh, 16px) clamp(10px, 2vw, 40px) 0;
}
.sp-base a { color: inherit; }
.sp-base a:hover { color: var(--white); }

/* ---- the bordered feature strip ------------------------------------------ */

/* The four-across band at the foot of the About board: bracketed top and
   bottom, columns divided by hairlines rather than boxed in cards. Cards would
   make four objects; rules make one table, which is what it is. */
.sp-strip {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin: 0 clamp(10px, 2vw, 40px);
}
.sp-strip > * {
  padding: clamp(16px, 2.6vh, 30px) clamp(12px, 1.6vw, 26px);
  text-align: center;
  border-left: 1px solid var(--line-soft);
}
.sp-strip > *:first-child { border-left: 0; }

.sp-strip svg {
  width: clamp(30px, 3.4vw, 50px);
  height: clamp(30px, 3.4vw, 50px);
  stroke: #fff; fill: none;
  stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
  margin: 0 auto clamp(10px, 1.6vh, 18px);
  display: block;
  opacity: .9;
}
.sp-strip h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(.74rem, 1.02vw, .96rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 clamp(6px, .9vh, 10px);
}
.sp-strip p {
  font-size: clamp(.72rem, .92vw, .9rem);
  line-height: 1.55;
  color: var(--white-70);
  margin: 0 auto;
  max-width: 26ch;
}

/* ---- the bleeding hero image --------------------------------------------- */

/* The photograph dissolving into blueprint linework.

   The dissolve is a CSS mask rather than a faded edge baked into the file, and
   that is the important part: an image with its own fade only sits flush on the
   exact background colour it was faded to, so it seams the moment the page
   behind it is a gradient — which ours is. Masking to transparent lets whatever
   is behind show through, so there is nothing to match.

   Two directions at once: out to the left, where the drawing gives way to the
   page, and slightly at top and bottom so the photograph doesn't end on a hard
   horizontal edge that the frame would then have to explain. */
/* Deliberately a background rather than an <img>, and that is the whole point.

   The photograph is desktop-only art direction: on a phone this page falls back
   to the ordinary stacked layout with no picture at all. A hidden <img> would
   still be downloaded by most browsers before the CSS hid it, so a phone would
   pay for an image it never sees. A background declared inside a min-width
   query is simply never fetched below that width.

   The cost is that a background carries no alt text. Correct here: the photo
   says nothing the headline and copy do not, so it is decoration, and marking
   decoration up as content is its own kind of wrong.

   image-set() does what srcset does for backgrounds — the browser takes the 2x
   file on a dense screen and the smaller one otherwise, so nobody downloads
   more than their display can resolve. */
.sp-figure { display: none; }

@media (min-width: 901px) {
  .sp-figure {
    display: block;
    position: relative;
    align-self: stretch;
    min-height: clamp(280px, 56vh, 620px);
    background-image: image-set(
      url("/assets/about-hero-800.webp") 1x,
      url("/assets/about-hero-1133.webp") 2x);
    background-image: -webkit-image-set(
      url("/assets/about-hero-800.webp") 1x,
      url("/assets/about-hero-1133.webp") 2x);
    background-size: cover;
    background-position: 72% center;
    background-repeat: no-repeat;
    /* Dissolves left into the page and softly top and bottom, so the photograph
       never ends on a hard edge the frame would then have to explain. Masking to
       transparent rather than fading to a colour in the file: a baked fade only
       sits flush on the exact colour it was faded to, and this page's
       background is a gradient. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 12%, #000 34%),
      linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 12%, #000 34%),
      linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  /* Sprint 2: the dusk render must never read as a photograph of built work
     (Ben's locked call), so it carries a visible caption rather than staying
     unlabelled. Small and in the corner, per the brief, not enlarged and not
     moved into the new founder section below it. Opaque enough at 0.78 that
     whatever the mask is dissolving into behind it cannot threaten the
     caption's own contrast against its chip regardless of what part of the
     render sits under it. */
  .sp-figure-caption {
    position: absolute;
    z-index: 1;
    right: 14px;
    bottom: 14px;
    padding: 5px 10px;
    background: rgba(1,15,40,0.78);
    color: var(--paper);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
}

/* Placeholder for a page whose artwork hasn't been supplied. Deliberately
   visible: a silently missing image reads as a bug, this reads as outstanding
   work and says which asset is missing. */
.sp-figure.is-empty {
  min-height: clamp(180px, 30vh, 340px);
  border: 1px dashed var(--line-soft);
  align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--mono);
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--white-55);
  padding: 20px;
}

/* ---- below the composition ----------------------------------------------- */

/* Below the composition the page becomes the site it already was: no
   photograph, no framed sheet, just the ordinary stacked hero. The storyboard
   is a desktop design and pretending otherwise on a 390px screen produces
   something that is neither the design nor a good phone page. */
@media (max-width: 900px) {
  .sp-body, .sp-body.split {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vh, 40px);
    align-items: start;
    padding-top: clamp(18px, 3.5vh, 36px);
  }
  .sp-left { max-width: none; }

  /* Back to heading scale rather than display scale. The board's type is sized
     against a photograph beside it; with the photograph gone it is simply
     oversized. */
  .sp-title { font-size: clamp(1.9rem, 7vw, 2.6rem); text-shadow: 0 2px 8px rgba(1,15,40,.45); }
  .sp-title em { font-size: .82em; margin-top: .25em; }

  .sp-strip { grid-template-columns: repeat(2, 1fr); margin: 0; }
  .sp-strip > *:nth-child(3) { border-left: 0; }
  .sp-strip > *:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .sp-base { flex-direction: column; gap: 8px; text-align: center; padding-top: 20px; }
}

/* ---------------------------------------------------------------------------
   About founder section (Sprint 2)

   New paper section immediately after the hero storyboard, replacing the
   four abstract value tiles (.sp-strip) that used to close it — four
   abstractions with icons were the weakest thing on the page and the
   opposite of proof. .sp-strip's own rules above are left in place rather
   than deleted: nothing else in the file references them once the about.html
   markup is gone, and pruning now-dead CSS is a separate, lower-risk pass
   from the one this sprint is scoped to.

   Portrait left, prose right: the storyboard above already reads
   copy-then-drawing left to right, and repeating that order here would just
   continue the same pattern rather than change register into "here is a
   person," which is the point of the section. --------------------------------------------------------------------------- */
.about-founder-grid {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.about-founder-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(4,38,92,0.35);
}
/* Sits a little tight under the h2 by default (the eyebrow/h2 spacing was
   tuned without a role line between them); the negative top margin pulls it
   back into that rhythm rather than leaving a visibly larger gap here than
   every other eyebrow/h2 pair on the page. */
.about-founder-role {
  margin: -6px 0 22px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26,36,51,0.68);
}
.about-founder-copy p:not(.about-founder-role) { max-width: 58ch; }

@media (max-width: 860px) {
  .about-founder-grid { grid-template-columns: 1fr; }
  .about-founder-portrait { max-width: 260px; }
}

@media (max-width: 560px) {
  .sp-strip { grid-template-columns: 1fr; }
  .sp-strip > * { border-left: 0; border-bottom: 1px solid var(--line-soft); }
  .sp-strip > *:last-child { border-bottom: 0; }
}