/* ============================================================
   INNER PAGE TYPE - work-table.html, faq.html, contact.html, 404.html
   ------------------------------------------------------------
   One type system for the three inner pages, taken from home.html
   value for value, and loaded last so it wins:

   - Titles: the hero's "MAKING BRANDS" words (.ap-w) - Söhne
     Extrabold, caps, -0.045em, 0.8 leading, min(9.4vw, 15.5vh);
     below 1000px, home's phone section-title size.
   - Lead paragraphs: home's "Silica Works is an independent..."
     paragraph - the case chapters included.
   - The first sheet opens at the FAQ's height (.tm in
     css/team.css): no dead band over the first title.
   ============================================================ */

:root {
  --pt-title: min(9.4vw, 15.5vh);
  --pt-title-lh: 0.8;
  --pt-top: clamp(1rem, 3.2vh, 2.25rem);
}

/* Titles ---------------------------------------------------- */
.wt-table .sw-featured-title,
.tm .sw-featured-title,
.th .sw-featured-title,
.ct-sheet .sw-featured-title,
.nf-sheet .sw-featured-title,
.wt-case-title {
  font-family: "sohne-bold", "Inter Tight", sans-serif;
  font-weight: 800;
  font-size: var(--pt-title);
  line-height: var(--pt-title-lh);
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

/* The row names keep their card size - at the hero's size they
   would not fit the narrow columns - but share its cut. */
.wt-title {
  line-height: var(--pt-title-lh);
  letter-spacing: -0.045em;
}

/* Paragraphs ------------------------------------------------ */
/* Lead paragraphs: home's "Silica Works is an independent creative
   studio..." (.ap-who .sw-section-body). */
.wt-statement,
.wt-para,
.wt-case-lede,
.wt-case-block p,
.tm-statement,
.ct-blurb,
.nf-blurb {
  font-family: "Inter Tight", sans-serif;
  font-size: 1.25rem;
  line-height: 1.55;
  letter-spacing: normal;
  color: #000;
  text-wrap: pretty;
}

.wt-statement b,
.wt-para b,
.wt-case-lede b,
.wt-case-block p b,
.tm-statement b,
.ct-blurb b,
.nf-blurb b {
  font-family: "Inter Tight", sans-serif;
  font-weight: 600;
  color: #000;
}

/* The first title sits at the top, as on the FAQ ------------- */
.wt-table,
.ct-sheet,
.nf-sheet {
  padding-top: var(--pt-top);
}

@media (max-width: 1000px) {
  /* Home's phone section titles (css/home-mobile.css): one row at
     the size solved for the widest title. The three-word heads
     already get it from css/pages.css and css/work-table.css. */
  :root {
    --pt-title: min(calc((100vw - 3rem) / 11.3), 4.25rem);
  }

  .wt-table,
  .ct-sheet,
  .nf-sheet,
  .tm {
    padding-top: 1.75rem;
  }

  /* css/home-mobile.css steps the lead paragraph down on a phone. */
  .wt-statement,
  .wt-para,
  .wt-case-lede,
  .wt-case-block p,
  .tm-statement,
  .ct-blurb,
  .nf-blurb {
    font-size: 1.0625rem;
  }
}

/* Contact: the "Or write to" line under the blurb, at the blurb's
   size and face, so the two read as one paragraph. */
.ct-alt .ct-k,
.ct-alt .ct-copy {
  font-family: "Inter Tight", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  color: #000;
}

.ct-alt .ct-copy {
  font-weight: 600;
}

@media (max-width: 1000px) {
  .ct-alt .ct-k,
  .ct-alt .ct-copy {
    font-size: 1.0625rem;
  }
}

/* ------------------------------------------------------------
   Titles on an upright phone or tablet - set like the index hero
   ------------------------------------------------------------
   The one-row title above (css/pages.css, css/work-table.css)
   spreads three words edge to edge, and with a long word in the
   middle - PROJECT, YOU'LL - they ran into each other. So on an
   upright screen every inner-page title is set the way the index
   hero sets its last line: the first two words together on the
   left, the third stepped down onto its own line hard right, as
   IMPACT / BY DESIGN.

     THE PROJECT     WHO YOU'LL     ASK US       ONE BY
           BRIEF        TALK TO    ANYTHING        ONE

   AND AT THE HERO'S NUMBERS, not near them. The size is the hero's
   own phone formula (css/home-mobile.css, the .ap --f), the leading
   is its 0.8, and the step between the lines is its row pitch: the
   1.25rem grid gap plus the 0.12em the hero's words carry as top
   padding - 56px at 390px wide, the same as IMPACT to BY DESIGN.
   Landscape keeps the single row. */
@media (max-width: 1000px) and (orientation: portrait) {
  :is(.wt-head, .tm-head, .th-head, .ct-sheet-head) .sw-section-title.sw-featured-title {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: 0.25em;
    row-gap: calc(1.25rem + 0.12em);
    font-size: min(calc((100vw - 2.5rem) / 8.95), 12svh);
    line-height: 0.8;
  }

  :is(.wt-head, .tm-head, .th-head, .ct-sheet-head) .sw-ft-word--c {
    flex-basis: 100%;
    text-align: right;
  }
}

/* The 404 groups its words differently from the other titles:
   "Page" on its own, then "not found" kept together as one phrase.
   On a wide screen that is PAGE hard left and NOT FOUND hard right
   on the one row - the push comes from an auto margin on "not"
   rather than space-between, which would put "not" in the middle.

     PAGE                                    NOT FOUND

   The "Error 404" tag hangs off PAGE, so that word is its
   positioning context. */
.nf-sheet .sw-ft-word--a {
  position: relative;
}

.nf-sheet .sw-section-title.sw-featured-title {
  justify-content: flex-start;
  column-gap: 0.25em;
}

.nf-sheet .sw-ft-word--b {
  margin-left: auto;
}

/* Hung off the foot of the E, the way the index's "What clients
   say?" pill hangs off its final "s" (css/tags.css,
   .sw-testimonials .sw-tag--title) - tied on through its eyelet,
   which is the pivot the tilt swings about. Same figures as that
   rule, so the two tags are one gesture. */
.nf-sheet .sw-ft-word--a > .sw-tag--title {
  --sw-tag-eye: 1.27rem;
  left: calc(100% - var(--sw-tag-eye) + 0.35rem);
  top: 86%;
  margin-top: -1.15rem;
  transform-origin: var(--sw-tag-eye) 50%;
}

/* At the phone size, the testimonials pill's phone figures
   (css/home-mobile.css): a smaller eyelet offset for the smaller
   pill, dropped to the word's foot. */
@media (max-width: 1000px) {
  .nf-sheet .sw-ft-word--a > .sw-tag--title {
    --sw-tag-eye: 0.95rem;
    top: 92%;
    margin-top: 0;
  }
}

/* Upright, it breaks after "Page" - PAGE alone, then NOT FOUND
   stepped down hard right - at the same size, leading and step as
   the titles above.

   A GRID, NOT A WRAPPING ROW, because of the tag. Breaking a flex
   row after PAGE means stretching PAGE to the full width, and the
   pill hangs off the right edge of PAGE's box - so it landed at the
   screen edge, squeezed, instead of on the E. Here PAGE spans the
   first row but is justified to the start, so its box is the word
   and nothing more, and NOT FOUND takes the two auto columns at the
   right of the second row. */
@media (max-width: 1000px) and (orientation: portrait) {
  .nf-sheet .sw-section-title.sw-featured-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 0.25em;
    row-gap: calc(1.25rem + 0.12em);
    font-size: min(calc((100vw - 2.5rem) / 8.95), 12svh);
    line-height: 0.8;
  }

  .nf-sheet .sw-ft-word--a {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
  }

  .nf-sheet .sw-ft-word--b {
    grid-column: 2;
    grid-row: 2;
    margin-left: 0;
  }

  .nf-sheet .sw-ft-word--c {
    grid-column: 3;
    grid-row: 2;
  }
}