/* macros.lethio.com
 *
 * The lethio.com ink.css system, applied to a product page. Same tokens, same
 * two families, same hairline-and-measure discipline. Deliberately light only:
 * ink.css carries no prefers-color-scheme block and this should not either, or
 * the two sites stop looking like one house.
 *
 * Every rule here is in this file. The CSP is style-src 'self' with no
 * unsafe-inline, so a single style="..." attribute anywhere in index.html is a
 * console error, not a nuisance.
 */

:root{
  --paper:#FCFCFB;
  --ink:#1C1C1A;
  --dim:#5C5C57;
  --rule:#E3E3DE;
  --red:#9E2B25;
  /* Link underlines only, as on lethio.com: --rule at 1.25:1 on paper is
     invisible as an underline, so links in body text would be marked by
     nothing at all. 4.45:1 here. */
  --underline:#767670;
  --serif:"Source Serif 4",Georgia,serif;
  --mono:"JetBrains Mono",monospace;
}

*{margin:0;padding:0;box-sizing:border-box}

body{background:var(--paper);color:var(--ink);font:400 1.08rem/1.75 var(--serif)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:8px 14px}
.skip:focus{left:12px;top:12px;z-index:10}

a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--underline);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red);text-decoration-color:var(--red)}
a:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* padding-inline, not the `padding: 0 24px` shorthand ink.css uses. Sections
   carry BOTH `section` and `.wrap`, and a class selector beats a type
   selector, so the shorthand silently zeroed `section`'s 50px of vertical
   padding and every eyebrow sat directly on its own hairline. Logical
   longhands on both sides is what keeps the two rules from cancelling. */
.wrap{max-width:680px;margin:0 auto;padding-inline:24px}
/* The hero and the country list are the only things allowed past the 680px
   measure, because both are two columns rather than running text. */
.wide{max-width:900px}

header{padding-block:30px;border-bottom:1px solid var(--rule)}
header .wrap{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.brand{font:700 1.15rem var(--serif);text-decoration:none}
.brand b{font-weight:400;color:var(--dim)}
header nav a{font:400 .76rem var(--mono);color:var(--dim);text-decoration:none;margin-left:20px}
header nav a:hover{color:var(--red)}
@media (max-width:560px){
  header .wrap{flex-direction:column;align-items:flex-start;gap:10px}
  header nav a{margin-left:0;margin-right:18px}
}

/* ---- hero ---- */
.hero{padding-top:66px;padding-bottom:58px;display:grid;grid-template-columns:1fr 250px;gap:56px;align-items:start}
.hero h1{font:700 clamp(1.7rem,4vw,2.4rem)/1.25 var(--serif);letter-spacing:-.015em;max-width:20ch}
.hero p{margin-top:22px;max-width:38rem;color:var(--dim)}
.hero .meta{margin-top:24px;font:400 .76rem var(--mono);color:var(--dim)}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;gap:40px}
  .shot{max-width:250px}
}

/* Screenshots are real captures, so they get a hairline rather than a device
   frame. A drawn phone bezel would be the one invented pixel on the page.

   max-width is load-bearing, not tidiness. The captures are 1080x2400, and
   .shot img is width:100%, so a figure placed outside a fixed grid column
   fills its container and renders about 1900px tall. That is what it did on
   the first draft: the page came out 7201px and the middle of it was a single
   screenshot with nothing beside it. */
.shot{border:1px solid var(--rule);max-width:250px}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font:400 .7rem/1.5 var(--mono);color:var(--dim);padding:8px 10px;border-top:1px solid var(--rule)}

section{padding-block:50px;border-top:1px solid var(--rule)}
h2{font:500 .72rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:26px}
p + p{margin-top:16px}
section p{max-width:40rem;color:var(--ink)}
section p.dim{color:var(--dim)}

/* ---- the three figures ---- */
.figures{list-style:none;display:flex;flex-wrap:wrap;gap:36px 54px;margin-bottom:26px}
.figures .n{display:block;font:400 2.1rem/1.1 var(--mono);color:var(--red);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.figures .l{display:block;margin-top:6px;font-size:1rem;color:var(--dim);max-width:14ch}

/* ---- country list ---- */
/* Two columns of country + table. Not a data table with counts and licences;
   that belongs in the technical write-up. This one exists so a reader can find
   their own country in it. */
.tables{list-style:none;columns:2;column-gap:44px;margin-bottom:26px}
.tables li{break-inside:avoid;display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--rule)}
.tables .c{font:600 1rem var(--serif)}
.tables .t{font:400 .72rem var(--mono);color:var(--dim);text-align:right}
@media (max-width:620px){.tables{columns:1}}

/* Text on the left, one screenshot on the right, same proportions as the hero
   so the two read as one grid down the page. */
.split{display:grid;grid-template-columns:1fr 250px;gap:56px;align-items:start}
@media (max-width:760px){.split{grid-template-columns:1fr;gap:40px}}

/* ---- feature list ---- */
.does{list-style:none;margin-top:22px}
.does li{padding:11px 0;border-bottom:1px solid var(--rule);color:var(--dim)}
.does li:last-child{border-bottom:none}
.does b{font-weight:600;color:var(--ink)}

/* ---- privacy ---- */
.policy h3{font:600 1.05rem var(--serif);margin:28px 0 8px}
.policy h3:first-of-type{margin-top:0}
.policy p{color:var(--dim)}
.policy .updated{font:400 .76rem var(--mono);color:var(--dim);margin-bottom:26px}
/* The short version carries the whole policy for anyone who reads one
   paragraph, so it is marked as the thing to read rather than a preamble. */
.summary{border-left:2px solid var(--red);padding:2px 0 2px 20px;margin-bottom:30px}
.summary p{color:var(--ink)}

footer{border-top:1px solid var(--rule);padding-block:34px 60px}
footer p{font:400 .76rem/1.9 var(--mono);color:var(--dim)}
footer a{text-decoration-color:var(--underline)}