/* scarab.city for 2.0 (Reed, 13 Nov 2026): loaded last, after style.css and v5.css.
   1. The fonts, served from the site itself: the app's own OFL faces (Barlow, IBM Plex Mono; licences in assets/fonts).
      The old Google families are named here too and drawn with Barlow, so every rule in style.css and v5.css keeps working
      and no visitor's browser calls Google (2.0's privacy policy names no website section). */
@font-face{font-family:"Barlow";src:url(fonts/Barlow-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/Barlow-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/Barlow-SemiBold.ttf) format("truetype");font-weight:600 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-Medium.ttf) format("truetype");font-weight:500 700;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/Barlow-Regular.ttf) format("truetype");font-weight:300 400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/Barlow-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/Barlow-SemiBold.ttf) format("truetype");font-weight:600 700;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/Barlow-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/Barlow-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/Barlow-SemiBold.ttf) format("truetype");font-weight:600 700;font-display:swap}
@font-face{font-family:"Marcellus";src:url(fonts/Barlow-Medium.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Pinyon Script";src:url(fonts/Barlow-Regular.ttf) format("truetype");font-weight:400;font-display:swap}

/* 2. The home page's hero: her photo first, bright, as the designer made it */
.h6{padding-top:clamp(14px,2.6vw,30px)}
.hero6{margin:0 auto clamp(30px,5vw,58px); max-width:1240px; padding:0 16px; box-sizing:border-box}
.hero6 img{display:block; width:100%; height:auto; border-radius:18px}
.h6 h1{max-width:17ch}
.h6 .tag{text-transform:none; letter-spacing:.04em; font-size:15px}

/* 3. The three facts */
.facts6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.facts6{grid-template-columns:1fr}}

/* 4. How Scarab works: the app's key */
.how6{padding:clamp(24px,4vw,56px) 0 clamp(56px,8vw,110px)}
.how6 .wrap{max-width:780px}
.key6{list-style:none; margin:14px 0 clamp(40px,6vw,64px); padding:0; border-top:1px solid var(--line5)}
.key6 li{display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px; padding:20px 0; border-bottom:1px solid var(--line5)}
.band6{display:flex; flex-direction:column; gap:7px; align-items:flex-start}
.chip6{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); padding:4px 8px; border-radius:6px; line-height:1.3}
.chip6.fill{background:var(--c); color:#0B0A08}
.chip6.outline{border:1.5px solid var(--ink)}
.span6{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--dim5)}
.what6 p{margin:0 0 6px; color:var(--ink); font-size:16.5px; line-height:1.55; text-wrap:pretty}
.what6 .ex6{color:var(--soft); font-size:15.5px}
.how6 .prose p{color:var(--soft); font-size:17px; line-height:1.7; margin:0 0 16px}
@media (max-width:560px){.key6 li{grid-template-columns:1fr; gap:10px}}