@layer page {
  /* Trilby ASCII trial cuts used by the specimen sections (the -X family names
   * the old page styled figures with). woff2 only; resolved by bare filename. */
  @font-face { font-family: "Trilby-RegularX"; src: url("TrilbyVariable[wght].woff2") format("woff2"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "Trilby-IX";       src: url("TrilbyVariable-Italic[wght].woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
  @font-face { font-family: "Trilby-MediumX";  src: url("TrilbyVariable[wght].woff2") format("woff2"); font-weight: 500; font-display: swap; }
  @font-face { font-family: "Trilby-MediumIX"; src: url("TrilbyVariable-Italic[wght].woff2") format("woff2"); font-style: italic; font-weight: 500; font-display: swap; }
  @font-face { font-family: "Trilby-BoldX";    src: url("TrilbyVariable[wght].woff2") format("woff2"); font-weight: 700; font-display: swap; }
  @font-face { font-family: "Trilby-BoldIX";   src: url("TrilbyVariable-Italic[wght].woff2") format("woff2"); font-style: italic; font-weight: 700; font-display: swap; }
  @font-face { font-family: "Trilby-BlackX";   src: url("TrilbyVariable[wght].woff2") format("woff2"); font-weight: 900; font-display: swap; }
  @font-face { font-family: "Trilby-BlackIX";  src: url("TrilbyVariable-Italic[wght].woff2") format("woff2"); font-style: italic; font-weight: 900; font-display: swap; }

  /* The page paints itself blue (white text in Trilby); reverse sections flip. */
  #content {
    background-color: #3280a7;
    color: #fff;
    font: 400 15px/1.5 Trilby-RegularX, Georgia, serif;
  }

  .wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 61rem;
    padding-left: 2rem;
    padding-right: 2rem;
    position: relative;
  }

  section {
    border-top: .5px solid rgba(255, 255, 255, .25);
    border-bottom: .5px solid rgba(255, 255, 255, .25);
    clear: both;
    overflow: hidden;
    padding-top: 2.5em;
    padding-bottom: 2.5em;
  }
  section:first-child { border-top: none; }
  section:last-child { border-bottom: none; }

  .fill { margin-left: -7.25%; max-width: 114.5%; width: 114.5%; }
  figure { margin: 0; }

  /* Hero */
  .infobar {
    background: #fff;
    color: #222;
    border: 0;
    padding-top: 2em;
    padding-bottom: 1.5em;
  }
  .infobar h1 {
    font-size: 6em;
    font-weight: 400;
    line-height: 1em;
    margin: .05em 0 0;
    overflow: visible;
    padding: 0 0 .03em;
    text-align: left;
    color: #222;
  }
  .infobar h1 a { color: #3280a7; }
  .try-buy-pdf a.button {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    border: 1px solid #f09904;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-family: Trilby-RegularX, Georgia, serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.2;
    margin: 0 .25em;
    opacity: .8;
    outline: 0;
    padding: .6em 1.25em .4em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .try-buy-pdf a.button:hover,
  .try-buy-pdf a.button:focus {
    background-color: #f09904;
    color: #000;
    opacity: 1;
  }

  /* Story */
  #story {
    background-color: #fff;
    color: #222;
  }
  #story a { color: #3280a7; }
  #story a:hover { color: #266280; }
  #story p { margin-bottom: 1rem; }
  #story p:last-child { margin-bottom: 0; }

  /* Reverse specimen sections */
  .reverse {
    background: #fff;
    color: #3280a7;
  }
  .reverse a { color: #3280a7; }

  /* Fit-to-width specimen lines */
  .fit-specimen {
    letter-spacing: -.025em;
    line-height: 1em;
    margin-bottom: .1em;
    white-space: nowrap;
  }
  .fit-specimen:first-child { margin-top: .2em; }

  /* In Use grid */
  #in-use h2 {
    margin-bottom: .25rem;
    font-size: 2.5em;
  }
  #in-use h2 + h4 {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    word-spacing: -.1em;
    margin-bottom: 1rem;
  }
  #in-use h4 a { color: #fff; }
  .use-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    margin-top: 2em;
    position: relative;
    text-align: left;
    width: 100%;
  }
  .use-case { position: relative; display: block; }
  .use-case img { display: block; }
  .use-name {
    background: #fff;
    bottom: 0;
    left: 0;
    color: #3280a7;
    display: none;
    font-size: .65rem;
    font-weight: 400;
    letter-spacing: 0;
    padding: .5em 1em;
    position: absolute;
    text-align: left;
  }
  .use-case a:hover .use-name { display: block; }
  .use-case a:hover img { opacity: .8; }

  @media screen and (max-width: 40rem) {
    .infobar h1 { font-size: 3.5em; }
    .use-grid { grid-template-columns: 1fr 1fr; }
  }
}