/* Typography and small visual details shared by every page. Load this LAST in <head>.
   Fonts are self-hosted (fonts/ folder), so no request goes to Google. Both are open source (SIL OFL). */
@font-face{font-family:Fraunces;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-latin-opsz-normal.woff2) format("woff2-variations"),url(fonts/fraunces-latin-opsz-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/figtree-latin-wght-normal.woff2) format("woff2-variations"),url(fonts/figtree-latin-wght-normal.woff2) format("woff2")}

:root{
  --font:Figtree,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:Fraunces,"Iowan Old Style",Georgia,"Times New Roman",serif;
}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:#cfe0ff}

/* Headings carry the personality; UI text stays in the sans */
h1,h2{font-family:var(--display);font-weight:600;letter-spacing:-.015em;font-optical-sizing:auto}
h1{font-size:clamp(30px,4.6vw,42px);line-height:1.12;letter-spacing:-.02em}
h2{line-height:1.25}
h3{font-weight:700}
.lead{font-family:var(--display);font-weight:400;font-size:clamp(18px,2.2vw,20px);line-height:1.55;color:#3b4350}
main a:not(.cta):not(.thumb){text-decoration-thickness:1px;text-underline-offset:.18em}

/* Brand */
.brand{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.015em}
.brand small{font-family:var(--font);font-weight:600}

/* Studio panels */
.card h2{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.num,output,#zpct,td,th{font-variant-numeric:tabular-nums}
.btn,.tabs a{font-weight:600}

/* A thin strip of glass colors under the header */
header.top{position:relative;border-bottom:0}
header.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,#2563eb 0 16.66%,#1f8a8a 0 33.33%,#e0a030 0 50%,#d9702b 0 66.66%,#a3304a 0 83.33%,#2f7d5b 0)}

/* Tour and pattern cards */
#tourRoot h2{font-family:var(--display);font-weight:600}
.pcard h3{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em}

@media(max-width:700px){.brand{font-size:18px}}

/* Logo mark in header */
.brand img{height:38px;width:auto;display:block;flex:none}
@media(max-width:700px){.brand img{height:32px}}