/* The free template pages (/templates): the landing's look on a reading page. RM Forma for the words, Cormorant
   Garamond for the big headlines, the landing's dark tokens (ui/prototype.css), the UFO mark. Built by
   tools/seo_templates.py; every URL here is absolute, since /templates/x answers without a trailing slash. */
@font-face{font-family:"RM Forma";src:url("/fonts/RMForma-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"RM Forma";src:url("/fonts/RMForma-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"RM Forma";src:url("/fonts/RMForma-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("/fonts/CormorantGaramond-latin.woff2") format("woff2");font-weight:500 600;font-style:normal;font-display:swap}

:root{color-scheme:dark;--bg:#0a0a0b;--ink:#ededef;--ink-soft:#b4b4ba;--muted:#9a9aa2;--blue:#7d9fe8;
  --card:color-mix(in srgb,#ededef 4.5%,#0a0a0b);--line:color-mix(in srgb,#ededef 11%,transparent);
  --sans:"RM Forma",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--serif:"Cormorant Garamond",Georgia,serif;
  --gut:clamp(18px,4vw,64px);--wide:1180px;--read:720px}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--sans);overflow-wrap:break-word}
a{color:var(--ink)}
/* a link inside a sentence is underlined, so it never relies on colour alone (WCAG 1.4.1) */
p a:not(.btn),footer span a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:99px;z-index:9}
.skip:focus{left:12px}

/* header: mark and name, the sections, the one button (as on the landing) */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--gut);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 -1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:40px;height:30px;object-fit:contain}
.brand b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.brand small{display:block;font-size:11px;color:var(--muted);letter-spacing:.04em}
.top nav{display:flex;align-items:center;gap:4px;font-size:14.5px}
.top nav a{padding:8px 13px;border-radius:99px;color:var(--ink-soft);text-decoration:none;white-space:nowrap}
.top nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.top nav a.pill{background:var(--ink);color:var(--bg);font-weight:600}
@media (max-width:640px){.top nav a.hide-s{display:none}.brand small{display:none}.top nav a{padding:7px 10px}}

/* page */
main{padding:0 var(--gut)}
.wrap{max-width:var(--wide);margin:0 auto}
.read{max-width:var(--read)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:28px 0 0;padding:0;font-size:13.5px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--muted)}
.crumbs a{color:var(--ink-soft);text-decoration:none}.crumbs a:hover{color:var(--ink);text-decoration:underline}
.kicker{margin:0 0 10px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:600}
h1{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(38px,5.4vw,66px);line-height:1.04;letter-spacing:-.01em}
h2{margin:56px 0 14px;font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.4vw,38px);line-height:1.12}
h3{margin:28px 0 6px;font-size:18px;font-weight:600;line-height:1.35}
p,li,dd{color:var(--ink-soft)}
p{margin:0 0 14px}
strong,b{color:var(--ink);font-weight:600}
.lede{margin:20px 0 0;font-size:19px;line-height:1.6;color:var(--ink-soft);max-width:38em}

.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding:36px 0 24px}
.hero.solo{grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr);gap:32px}}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:600;transition:transform .2s,background .2s}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn.solid:hover{transform:translateY(-1px)}
.btn.ghost{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink)}
.btn.ghost:hover{background:color-mix(in srgb,var(--ink) 14%,transparent)}
.fine{margin:14px 0 0;font-size:14px;color:var(--muted)}

/* a document page, as paper */
.sheet{margin:0;justify-self:center;width:100%;max-width:470px}
.sheet img{width:100%;border-radius:6px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px var(--line)}
.sheet figcaption,.slide figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);text-align:center}
/* a slide */
.slide{margin:0}
.slide img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;box-shadow:0 0 0 1px var(--line)}
.hero .slide img{box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 0 1px var(--line)}

/* the body copy */
.body{padding:8px 0 40px}
.body ul,.body ol{padding-left:22px;margin:0 0 14px}
.body li{margin:6px 0}
.parts{list-style:none;padding:0!important;margin:0;border-top:1px solid var(--line)}
.parts li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:18px;padding:14px 0;margin:0!important;border-bottom:1px solid var(--line)}
.parts li b{font-weight:600}
@media (max-width:600px){.parts li{grid-template-columns:minmax(0,1fr);gap:4px}}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin:8px 0 0;padding:0;background:var(--line);border-radius:14px;overflow:hidden}
.facts div{background:var(--card);padding:14px 16px}
.facts dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.facts dd{margin:0;color:var(--ink);font-size:15px}
.faq h3{margin-top:24px}
.use{margin:56px 0 0;padding:30px 32px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.use h2{margin-top:0}
.use .ctas{margin-top:18px}

/* the deck outline: one row a slide */
.outline{list-style:none;padding:0!important;margin:0;counter-reset:s}
.outline>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:center;padding:22px 0;margin:0!important;border-top:1px solid var(--line)}
.outline h3{margin:0 0 6px}
.outline h3 span{color:var(--muted);font-weight:400;margin-right:8px}
@media (max-width:760px){.outline>li{grid-template-columns:minmax(0,1fr);gap:14px}}
.looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;margin:8px 0 0}
.look h3{margin:12px 0 2px;font-size:16px}
.look p{font-size:14.5px;margin:0}
.look .pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.look .pair img{border-radius:6px;aspect-ratio:16/9;object-fit:cover;box-shadow:0 0 0 1px var(--line)}

/* the hub's cards */
.kind{margin:8px 0 0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;list-style:none;padding:0!important;margin:18px 0 0}
.cards li{margin:0!important}
.cards a{display:block;height:100%;text-decoration:none;padding:14px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,transform .2s}
.cards a:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent);transform:translateY(-2px)}
.cards img{width:100%;border-radius:8px;background:#fff}
.cards .doc img{aspect-ratio:1/1.1;object-fit:cover;object-position:top}
.cards .deck img{aspect-ratio:16/9;object-fit:cover}
.cards b{display:block;margin:12px 0 2px;font-size:16.5px;color:var(--ink)}
.cards span{display:block;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.more{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0!important}
.more li{margin:0!important}
.more a{display:inline-block;padding:8px 14px;border-radius:99px;font-size:14.5px;text-decoration:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.more a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.updated{font-size:13.5px;color:var(--muted);margin-top:36px}

footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:64px;padding:26px var(--gut);font-size:13px;color:var(--muted);
  background:color-mix(in srgb,var(--ink) 3%,var(--bg));box-shadow:inset 0 1px 0 var(--line)}
footer a{color:var(--ink-soft);text-decoration:none}footer a:hover{color:var(--ink)}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}