/* Wildpress site. Herbarium paper, iron-gall ink, one madder red. Same tokens as app/Wildpress/Theme/Theme.swift.
   Fonts: the app's own EB Garamond and Courier Prime (OFL, licence in fonts/OFL.txt), cut to Latin as WOFF with
   pyftsubset, served from this folder so the page makes no request to another host. EB Garamond Medium stands in
   for 500 to 700, so a 600 never gets a synthesized bold. */
@font-face{font-family:"EB Garamond";src:url(fonts/EBGaramond-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/EBGaramond-Italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/EBGaramond-Medium.woff) format("woff");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/EBGaramond-MediumItalic.woff) format("woff");font-weight:500 700;font-style:italic;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(fonts/CourierPrime-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(fonts/CourierPrime-Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
:root{
  --paper:#F3EEE3;--card:#FBF8F1;--blotter:#E9E0D0;--ink:#24201A;--ink2:#6E665A;--line:rgba(36,32,26,.14);--acc:#A63A2B;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;--mono:"Courier Prime",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#191714;--card:#221F1B;--blotter:#2A2620;--ink:#EAE3D5;--ink2:#A39A8B;--line:rgba(234,227,213,.14);--acc:#D8705C;color-scheme:dark}
  .sheet.real{filter:brightness(.86)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:19px/1.55 var(--serif);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-color:var(--acc);text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px;border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:22px}
.mark img{display:block;width:30px;height:auto}
nav.links{display:flex;gap:20px;font:14px/1 var(--mono);letter-spacing:.04em}
nav.links a{text-decoration:none;color:var(--ink2)}
nav.links a:hover{color:var(--ink)}
.label{font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
h1{margin:14px 0 0;font-weight:400;font-size:clamp(40px,7vw,68px);line-height:1.02;letter-spacing:-.01em}
h1 i{color:var(--acc)}
h2{margin:0 0 10px;font-weight:400;font-size:clamp(28px,4vw,36px);line-height:1.1}
h3{margin:0 0 6px;font-weight:600;font-size:20px}
p{margin:0 0 14px}
.lede{max-width:34ch;color:var(--ink2);font-size:22px;margin-top:16px}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:56px 48px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.store{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:600;font-size:18px}
.store:hover{background:var(--acc)}
/* The label and the terms beside it centre on their capitals, not on EB Garamond's tall line box. */
.store span,.cta .meta{text-box:trim-both cap alphabetic}
/* Before Apple shows the app the launch kit turns the store link into a plain "Coming 1 December" label. */
.store.soon,.store.soon:hover{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);cursor:default}
.meta{font:13px/1.4 var(--mono);color:var(--ink2)}
.sheet{position:relative;aspect-ratio:.7;width:min(100%,380px);margin-left:auto;background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:0 1px 0 var(--line),0 18px 40px -24px rgba(36,32,26,.45)}
/* The real sheet: a photographed paper, and specimens from real photographs (credits.html), pressed in CSS: flattened
   into the paper with multiply, faded and warmed. Real paper keeps its own light colours in dark mode, a little dimmer. */
.sheet.real{background:#F8F2E6 url(media/paper-sheet.jpg) center/cover;background-blend-mode:multiply;overflow:hidden;isolation:isolate;
  --paper:#F3EEE3;--ink:#24201A;--ink2:#6E665A;--line:rgba(36,32,26,.14)}
.sheet .sp{position:absolute;display:block;height:auto;transform-origin:50% 50%;mix-blend-mode:multiply;opacity:.92;filter:saturate(.62) sepia(.22) contrast(.95) brightness(1.04);pointer-events:none;user-select:none;-webkit-user-drag:none}
.sheet .tape{position:absolute;display:block;height:.65%;min-height:3px;background:url(media/tape.jpg) center/100% 100%;box-shadow:0 .5px 1px rgba(60,45,25,.3)}
.sheet .tag{position:absolute;right:18px;bottom:16px;max-width:calc(100% - 36px);padding:10px 12px;border:1px solid var(--line);background:var(--paper);font:12px/1.45 var(--mono);color:var(--ink2)}
.sheet .tag span{display:block;white-space:nowrap}
.sheet .tag b{display:block;color:var(--ink);font:italic 600 16px/1.2 var(--serif);margin-bottom:2px}
section.band{padding-block:44px;border-top:1px solid var(--line)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.cols p{color:var(--ink2);font-size:18px}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none}
.steps li{counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;margin-bottom:10px;font:700 13px/1 var(--mono);color:var(--acc);letter-spacing:.08em}
.steps p{color:var(--ink2);font-size:18px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.prose{max-width:680px}
.prose p,.prose li{color:var(--ink2)}
.prose h2{margin-top:36px}
.prose ul{padding-left:20px}
.faq dt{font-weight:600;margin-top:18px}
.faq dd{margin:4px 0 0;color:var(--ink2)}
.credits{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.prose .credits{padding-left:0}
.credits li{padding-top:16px;border-top:1px solid var(--line)}
.credits h3{margin:0 0 4px;color:var(--ink)}
.credits p{margin:0;font-size:17px}
.credits .meta{display:inline-block;margin-top:6px;overflow-wrap:anywhere}
.token{padding:1px 6px;border:1px dashed var(--acc);border-radius:4px;font:14px/1.4 var(--mono);color:var(--acc)}
footer{padding-block:28px 40px;border-top:1px solid var(--line);font:13px/1.6 var(--mono);color:var(--ink2)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer a{color:var(--ink2)}
@media (max-width:760px){
  body{font-size:18px}
  .hero,.two{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:36px}
  .sheet{margin:0 auto;width:min(100%,320px)}
  .cols,.steps{grid-template-columns:minmax(0,1fr);gap:22px}
  nav.links{gap:14px}
}