/* ============================================================
   Phantomexposure — home display type
   Sets the hero headline and the tagline beneath it in Anybody
   (Tyler Finck / Etcetera Type Co). A superellipse display sans —
   industrial faceplate geometry, drawn with enough restraint to
   sit under the wordmark without shouting.

   Loaded after site.css and pe-type.css, so it wins on both.
   Colour is handled by the retoned site.css, not here.
   ============================================================ */

.home-seo-title,
.home-tagline{
  font-family:"Anybody","Syne","Avenir Next","Trebuchet MS",ui-sans-serif,system-ui,sans-serif;
  font-feature-settings:"ss01" 1;
  /* Anybody's width axis, if the wdth request in index.html is enabled.
     Ignored harmlessly when the weight-only file is served. */
  font-stretch:106%;
}

.home-seo-title{
  font-weight:500;
  font-size:clamp(27px,3.9vw,50px);
  letter-spacing:-.021em;
  line-height:1.04;
}

/* One step down from the headline: lighter, smaller, a shade quieter,
   so the two read as a pair rather than competing. */
.home-tagline{
  font-weight:450;
  font-size:clamp(14px,1.85vw,19px);
  letter-spacing:-.008em;
  line-height:1.42;
}

@media (max-width:680px){
  .home-seo-title{
    letter-spacing:-.014em;
    font-size:clamp(25px,8vw,37px);
  }
  .home-tagline{
    font-size:clamp(13.5px,4.1vw,17px);
  }
}

/* ------------------------------------------------------------
   Optional swaps — change the family above and the matching
   <link> in index.html:

   Cooler / colder      "Darker Grotesque"  wght 500, ls -.01em
   Quieter / editorial  "Familjen Grotesk"  wght 500, ls -.03em
   ------------------------------------------------------------ */