/* Typefaces shown on the Type pages besides Almost Swiss (which styles.css loads for the whole site) */
@font-face{
  font-family: "Spacjinx";
  src: url("fonts/spacjinx-light.woff2?v=82835416") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Spacjinx";
  src: url("fonts/spacjinx-regular.woff2?v=33247a2b") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Spacjinx";
  src: url("fonts/spacjinx-medium.woff2?v=4c568759") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Spacjinx";
  src: url("fonts/spacjinx-semibold.woff2?v=b275793b") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Spacjinx";
  src: url("fonts/spacjinx-bold.woff2?v=d9fe9acf") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Spacjinx";
  src: url("fonts/spacjinx-extrabold.woff2?v=c5e92f4c") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Spacjinx";
  src: url("fonts/spacjinx-black.woff2?v=9a98385e") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Askew";
  src: url("fonts/askew-extralight.woff2?v=1c388ef2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Askew";
  src: url("fonts/askew-light.woff2?v=c6b68732") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Askew";
  src: url("fonts/askew-regular.woff2?v=f9179609") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Askew";
  src: url("fonts/askew-medium.woff2?v=d993451b") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Askew";
  src: url("fonts/askew-semibold.woff2?v=8d850944") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Plainspoken";
  src: url("fonts/plainspoken-extralight.woff2?v=a073a921") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Plainspoken";
  src: url("fonts/plainspoken-light.woff2?v=68dae59a") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Plainspoken";
  src: url("fonts/plainspoken-regular.woff2?v=96c44d02") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Plainspoken";
  src: url("fonts/plainspoken-medium.woff2?v=ade101b5") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Plainspoken";
  src: url("fonts/plainspoken-semibold.woff2?v=43c4e080") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Plainspoken";
  src: url("fonts/plainspoken-bold.woff2?v=a5a7be3f") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Seamless";
  src: url("fonts/seamless-light.woff2?v=1b0b3ac6") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Seamless";
  src: url("fonts/seamless-regular.woff2?v=a8dcf58a") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Seamless";
  src: url("fonts/seamless-medium.woff2?v=3cf02633") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Seamless";
  src: url("fonts/seamless-semibold.woff2?v=683b0428") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Seamless";
  src: url("fonts/seamless-bold.woff2?v=2990fc55") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Type page: a type foundry inside the studio site. Dark, so it reads as its own place. */
body.type-page{
  --bg: #121211;
  --text: rgba(242, 241, 236, .92);
  --muted: rgba(242, 241, 236, .55);
  --line: rgba(242, 241, 236, .16);
  --card: rgba(242, 241, 236, .05);
  background: var(--bg);
  color: var(--text);
  letter-spacing: 0;
}

.type-page *{
  letter-spacing: 0;
}

.type-page ::selection{
  background: var(--link-color);
  color: #fff;
}

.type-label{
  margin: 0 0 24px;
  padding-top: 12px;
  border-top: 1px solid var(--text);
  font-size: 13px;
  font-weight: 400;
}

.type section{
  margin-bottom: 140px;
}

/* Hero: the name, cycling through the weights */
.type-hero{
  padding-top: clamp(16px, 4vw, 64px);
  overflow: hidden;
}

.type-kicker{
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}

.type-name{
  margin: 0 0 48px;
  font-size: clamp(48px, 13.6vw, 250px);  /* wide enough for Black to still fit the screen */
  line-height: .9;
  font-weight: 900;
  white-space: nowrap;
}

.type-facts{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 48px;
  margin: 0;
  font-size: 13px;
}

.type-facts dt{
  color: var(--muted);
}

.type-facts dd{
  margin: 0;
}

.type-about p{
  max-width: 34ch;
  margin: 0;
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 300;
  line-height: 1.15;
}

/* Tester */
.tester-controls{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  padding: 12px 0;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.tester-weights{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tester-weights button{
  padding: 4px 8px;
  border: 1px solid var(--line);
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.tester-weights button:hover{
  border-color: var(--text);
}

.tester-weights button[aria-pressed="true"]{
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.tester-size{
  display: flex;
  align-items: center;
  gap: 12px;
}

.tester-size input{
  width: 180px;
  accent-color: var(--text);
}

.tester-size output{
  min-width: 52px;
  font-variant-numeric: tabular-nums;
}

.tester-text{
  margin: 32px 0 12px;
  font-size: 120px;
  line-height: 1;
  font-weight: 400;
  outline: none;
  overflow-wrap: anywhere;
  caret-color: var(--link-color);
}

.tester-hint{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Styles: one row per weight */
.styles-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.styles-list li{
  display: grid;
  grid-template-columns: 160px 1fr 48px;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.styles-list li:hover{
  background: var(--text);
  color: var(--bg);
  box-shadow: -8px 0 0 var(--text), 8px 0 0 var(--text);
}

.styles-list .style-name,
.styles-list .style-num{
  font-size: 13px;
}

.styles-list .style-num{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.styles-list .style-sample{
  font-size: clamp(36px, 6vw, 88px);
  line-height: 1.05;
  padding-bottom: .18em;  /* room for descenders (the j in Spacjinx), which overflow: hidden would cut */
  margin-bottom: -.18em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* Glyphs: big preview on the left, every character on the right */
.glyphs-layout{
  display: grid;
  grid-template-columns: minmax(260px, 4fr) 8fr;
  gap: 12px;
  align-items: start;
}

.glyph-preview{
  position: sticky;
  top: 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1;
  padding: 12px;
  border: 1px solid var(--line);
}

.glyph-big{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(120px, 20vw, 320px);
  line-height: 1;
}

.glyph-code{
  font-size: 13px;
  color: var(--muted);
}

.glyph-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.glyph-grid button{
  aspect-ratio: 1;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 24px;
  cursor: pointer;
}

.glyph-grid button:hover,
.glyph-grid button[aria-pressed="true"]{
  background: var(--text);
  color: var(--bg);
}

/* Sizes and text */
.type-sizes p{
  margin: 0 0 32px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.type-sizes p[style*="13px"],
.type-sizes p[style*="18px"]{
  max-width: 70ch;
  line-height: 1.5;
}

.text-columns{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  max-width: 1100px;
}

.text-columns h3{
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.1;
}

.text-columns p{
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.55;
}

.type-license p{
  max-width: 40ch;
  margin: 0 0 24px;
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 300;
  line-height: 1.15;
}

.license-mail{
  font-size: clamp(24px, 3.2vw, 44px);
  color: var(--link-color);
}

.license-mail:hover{
  color: var(--link-color);
  text-decoration: underline;
}

@media (max-width: 800px){
  .glyphs-layout{
    grid-template-columns: 1fr;
  }

  .glyph-preview{
    position: static;
    aspect-ratio: auto;
    min-height: 260px;
  }

  .styles-list li{
    grid-template-columns: 1fr 40px;
  }

  .styles-list .style-name{
    display: none;
  }

  .text-columns{
    grid-template-columns: 1fr;
  }

  .tester-text{
    font-size: 64px;
  }
}

.download-meta{
  margin-top: 16px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--muted);
}

.download-meta a{
  color: inherit;
}

/* Specimens are set in the typeface on show (--face on <main>); controls and labels stay in Almost Swiss */
.type-statement,
.type-about p,
.tester-text,
.style-sample,
.glyph-big,
.glyph-grid button,
.type-sizes p,
.text-columns,
.type-license p:not(.download-meta){
  font-family: var(--face, "Almost Swiss"), "Almost Swiss", system-ui, sans-serif;
}

.type-statement{
  max-width: 20ch;
  margin: 0 0 24px !important;
  font-size: clamp(32px, 5vw, 72px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* Typeface navigation: every name edge to edge in its own font */
.face-nav{
  display: block;
  margin: 0 0 48px;
  padding-top: clamp(16px, 4vw, 64px);
}

.face-link{
  display: block;
  position: relative;
  padding: 12px 0 16px;
  border-top: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  font-family: var(--face);
}

.face-link:last-child{
  border-bottom: 1px solid var(--line);
}

.face-name{
  display: block;
  width: max-content;
  line-height: .95;
  white-space: nowrap;
}

.face-num,
.face-meta{
  font-family: "Almost Swiss", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
}

.face-num{
  position: absolute;
  top: 12px;
  left: 0;
}

.face-meta{
  display: block;
  margin-top: clamp(24px, 3vw, 48px);  /* clear of the descenders */
  color: var(--muted);
}

/* On a typeface page the others step back */
.type:not(.type-index) .face-link:not(.is-current){
  opacity: .28;
  transition: opacity .2s ease;
}

.type .face-link:not(.is-current):hover{
  opacity: 1;
}

.face-num + .face-name{
  padding-top: 22px;
}

.type-index .face-nav{
  margin-bottom: 96px;
}

.face-pager{
  margin: 0 0 96px;
  gap: 24px;
  font-size: clamp(20px, 2.4vw, 36px);
  line-height: 1.1;
}

.type-page .face-pager a:hover{
  color: var(--muted);
}

/* Typeface page: every typeface on one row at the top, small and in its own font, white like the
   menu; the others dimmed, the current one underlined. Below it the current one, big. */
.face-tabs{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 32px;
  row-gap: 8px;
  padding-top: clamp(16px, 4vw, 64px);
  margin-bottom: 24px;
}

.face-tab{
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  color: var(--text);
  font-family: var(--face);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.1;
  text-decoration: none;
  opacity: .4;
  transition: opacity .2s ease;
}

.face-tab:hover{
  opacity: 1;
  text-decoration: none;
}

.face-tab.is-current{
  opacity: 1;
  border-bottom-color: var(--text);
}

.face-tab .face-num{
  position: static;
}

.face-tabs + .face-link{
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

/* "Coming soon": the link colour, but not a link */
.soon{
  color: var(--link-color);
}

/* The current typeface's name is the page's H1: no heading margins of its own */
h1.face-name{
  margin: 0;
  grid-column: auto;
}

/* Overview rows: a pointer to the specimen page */
.face-cta{
  margin-left: 12px;
  color: var(--text);
  white-space: nowrap;  /* the arrow stays with its words */
}

.face-link:hover .face-cta{
  color: var(--link-color);
}

/* /download/<slug>: a short stop that is counted, then the zip starts */
.download-start{
  padding-top: clamp(16px, 4vw, 64px);
  min-height: 50vh;
}

.download-start .download-meta{
  max-width: none;
}

@media (max-width: 800px){
  .face-tabs{
    column-gap: 16px;
  }

  .face-tab{
    font-size: 18px;
  }
}

/* Sticky download button: solid, in the typeface on show, in view until the download section */
.sticky-download{
  position: fixed;
  right: 12px;
  /* Placed from the top of the smallest visible viewport (svh), not from the bottom edge, so it
     stays in view when Safari's toolbar folds away and the footer slides down */
  top: calc(100svh - 52px);
  transform: translateY(-100%);
  z-index: 11;
  padding: 14px 18px 15px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--link-color);  /* the same colour as the links in the ticker, new on every visit */
  color: #fff;
  font-family: var(--face);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease, opacity .25s ease;
}

.sticky-download:hover{
  color: #fff;
  text-decoration: none;
  transform: translateY(-100%) scale(1.04);
}



.sticky-download .floppy{
  width: 1em;
  height: 1em;
  flex: none;
}


/* Phones: a little smaller, sitting right on top of the footer ticker */
@media (max-width: 800px){
  .sticky-download{
    top: calc(100svh - 44px);
    padding: 12px 14px 13px;
    font-size: 14px;
    gap: 8px;
  }
}

/* The button steps aside once the download section, with its own link, is reached */
.sticky-download.is-hidden{
  opacity: 0;
  pointer-events: none;
}