/* Ahlchemy Snap — the public site.
   © Ahlchemy Author Company. All rights reserved. */

/* The public site reads in daylight; the booth does not.

   The wordmark is near-black navy, which on the old dark background was very
   nearly invisible — that is what lightened this. Text is dark on light here,
   and the app keeps its own dark palette, because a booth is used in a dim room
   and a bright screen behind somebody's face is no help to anybody. */
:root{
  --ink:#F5F4FA; --ink2:#FFFFFF; --ink3:#ECEAF5; --line:#D6D2E6;
  --navy:#12225E; --violet:#5B4090; --violet-dim:#6F6690;
  --sky:#22608F; --copper:#9A4F32;
  --paper:#141A3C; --mist:#4B506F;
  --disp:"Poppins",system-ui,sans-serif; --ui:"Archivo",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:clamp(16px,4vw,28px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--ui);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.12}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--pad)}

.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:1 1 auto}
.brand img{height:34px;width:auto}
.brand b{font-family:var(--disp);font-size:17px;font-weight:600}
.brand b span{color:var(--violet)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:11px;font-weight:700;font-size:15px;
  text-decoration:none;border:1px solid var(--line);color:var(--paper);
  background:var(--ink2);white-space:nowrap}
.btn:hover{border-color:var(--violet-dim)}
.btn-key{background:var(--violet);color:var(--ink);border-color:var(--violet)}
.btn-lg{padding:16px 30px;font-size:17px;border-radius:13px}

/* The mark sits where somebody actually looks, rather than in the corner of a
   bar they scroll past. Sized against the viewport height as well as its width,
   so it cannot push the first sentence off a short screen. */
/* A wide lockup, so it is sized across rather than down. Forty per cent off
   what it was, and still capped against the height of the screen so it cannot
   push the first sentence below the fold on a short laptop. */
.hero-logo{width:clamp(200px,29vw,380px);height:auto;max-height:20vh;
  object-fit:contain;object-position:left center;margin:0 0 22px;display:block}
.brand-quiet b{font-size:16px}
.hero{padding:clamp(40px,8vw,88px) 0 clamp(40px,7vw,80px);
  background:radial-gradient(1100px 520px at 50% -14%,rgba(91,64,144,.13),transparent 72%)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--violet-dim);margin:0 0 14px}
.hero h1{font-size:clamp(34px,6.4vw,64px);max-width:min(21ch,100%)}
/* No cap of its own. At this size the 1080px column already holds about
   eighty-four characters, which is a measure — capping it again only broke
   sentences with the width still to spare. */
.hero p.lead{font-size:clamp(17px,2.2vw,22px);color:var(--mist);margin:20px 0 32px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .note{margin-top:18px;font-size:14px;color:var(--violet-dim)}

.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--ink2);padding:22px 0}
.strip .wrap{display:flex;gap:clamp(18px,4vw,48px);flex-wrap:wrap;justify-content:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}

section{padding:clamp(48px,8vw,96px) 0}
section h2{font-size:clamp(26px,4vw,40px);max-width:min(28ch,100%)}
/* Ninety is the top of what is comfortable to read and, more to the point, it
   is enough for a two-clause sentence to stay on one line on a laptop. Below
   that the text was breaking with the width to spare, which reads as the page
   not fitting rather than as a measure. */
section p.sub{color:var(--mist);max-width:min(92ch,100%);margin:16px 0 0;font-size:17px}
.grid{display:grid;gap:20px;margin-top:44px;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.card{background:var(--ink2);border:1px solid var(--line);border-radius:16px;padding:26px;
  box-shadow:0 2px 10px rgba(20,26,60,.05)}
a.card:hover{border-color:var(--violet);box-shadow:0 8px 26px rgba(91,64,144,.13)}
.card h3{font-size:19px;margin-bottom:10px}
.card p{color:var(--mist);font-size:15.5px;margin:0}
.card .tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--violet-dim);display:block;margin-bottom:12px}

.steps{counter-reset:s;display:grid;gap:18px;margin-top:44px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{counter-increment:s;padding-top:18px;border-top:2px solid var(--violet-dim)}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);
  font-size:12px;color:var(--violet);display:block;margin-bottom:10px}
.step h3{font-size:17px;margin-bottom:8px}
.step p{color:var(--mist);font-size:15px;margin:0}

.honest{background:var(--ink2);border:1px solid var(--line);border-radius:16px;
  padding:clamp(22px,4vw,36px);margin-top:44px}
.honest h3{font-size:19px;margin-bottom:14px}
.honest ul{margin:0;padding-left:20px;color:var(--mist);font-size:15.5px}
.honest li{margin-bottom:9px}

.end{text-align:center;padding:clamp(56px,9vw,110px) 0;
  background:radial-gradient(900px 420px at 50% 120%,rgba(91,64,144,.14),transparent 72%)}
.end h2{margin:0 auto;max-width:min(24ch,100%)}
.end .cta{justify-content:center;display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

footer{border-top:1px solid var(--line);padding:36px 0 46px;color:var(--violet-dim);font-size:13.5px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer a{color:var(--mist);text-decoration:none}
footer a:hover{color:var(--paper)}
footer .sp{flex:1 1 auto}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- written pages ---------- */
.doc{max-width:760px;margin:0 auto;padding:clamp(36px,7vw,72px) var(--pad) 80px}
.doc h1{font-size:clamp(30px,5vw,46px);margin-bottom:10px}
.doc .when{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet-dim);margin:0 0 34px}
.doc h2{font-size:clamp(21px,3vw,27px);margin:44px 0 12px}
.doc h3{font-size:18px;margin:28px 0 8px}
.doc p,.doc li{color:var(--mist);font-size:16.5px}
.doc li{margin-bottom:8px}
.doc strong{color:var(--paper);font-weight:600}
.doc a{color:var(--sky)}
.doc table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
.doc th,.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--mist)}
.doc th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--violet-dim);font-weight:600}
.doc .box{background:var(--ink2);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;margin:26px 0}
.doc .box p:last-child{margin-bottom:0}
.doc .box.warn{border-color:var(--copper)}
.doc .box h3{margin-top:0}

/* ---------- the sign-off, and the mark ---------- */
.snap{font-family:var(--disp);font-weight:600;font-style:italic;
  font-size:clamp(20px,3.2vw,30px);color:var(--violet);margin:14px 0 0;letter-spacing:-.01em}
.mark{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.mark img{border-radius:50%;flex:0 0 auto;opacity:.85;transition:opacity .18s ease}
.mark:hover img{opacity:1}
.mark:hover span{color:var(--paper)}

/* ---------- shop: filters and the facts on a card ---------- */
.filters{display:grid;gap:10px;background:var(--ink2);border:1px solid var(--line);
  border-radius:14px;padding:18px 20px}
.filt-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filt-l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet-dim);flex:0 0 66px}
.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;
  font-size:13px;font-weight:600;color:var(--mist);cursor:pointer;font-family:inherit}
.chip:hover{border-color:var(--violet-dim);color:var(--paper)}
.chip[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fff}
.filt-n{margin:2px 0 0;font-size:13px;color:var(--mist)}
.facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.facts i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--violet-dim);border:1px solid var(--line);
  border-radius:5px;padding:3px 7px}

/* ---------- how lines break ----------

   A measure is worth keeping — a sentence running the full width of a wide
   screen is hard to read back to the start of. But a cap set in characters and
   left alone breaks a sentence long before the space runs out, which reads as
   the page not fitting rather than as typography.

   So: wider measures, and the browser asked to break them well. Headings are
   balanced, so a heading never leaves one word alone on the last line, and
   paragraphs avoid a single word on a line of their own. Both degrade to
   ordinary wrapping where they are not supported, which costs nothing. */
h1, h2, h3, .lead, .snap{text-wrap:balance}
p, li, dd, figcaption, .sub, .facts, .note{text-wrap:pretty}
/* never narrower than what holds it */
.doc p, .doc li, .card p{max-width:100%}