/* The site's skin: the background, the type, the corner header and its pills.

   One sheet, because Facundo opened the sign-in from the new front page and it
   had another background, another logo and no Get one. Read by the front page,
   /get-one, the replies to that form (src/routes/enquiry.ts) and the sign-in
   pages (authPage in src/routes/owner-auth.ts).

   The sign-in pages also load the owner skin (src/lib/skin.ts) AFTER this, and
   the two share some names: --ink, --muted, --line, --sans. There the skin wins,
   so nothing in the header below uses those four. It uses --solid for its ink,
   --rule for its borders and --font for its type, which nobody else defines.
   The sign-in's switch, field and button are drawn in this sheet's tokens too,
   as the corner's pill, /get-one's field and the .cta (.authshell in
   src/routes/owner-dashboard.ts), so a change here changes them.
   The page behind everything is one colour in both: --bg here, --ground there,
   held equal by test/one-site-from-the-front-page-to-the-sign-in.test.ts.

   The type is Google's, loaded by each page's head (SITE_HEAD in
   src/lib/skin.ts) without holding up the first paint. It was an @import
   here, so the page waited on this sheet, then on Google's, before it could
   draw a word: 750 ms of PageSpeed's 1.5 s of render-blocking on a phone. */

/* What the words are set in until Hanken Grotesk arrives: Arial, reshaped to
   its width (99.5%) and its line (ascent 1.00 em, descent 0.30 em, measured in
   Chrome), so nothing moves when the real face takes over. */
@font-face{font-family:"Hanken Grotesk Fallback";
  src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");
  size-adjust:99.5%;ascent-override:100.5%;descent-override:30.2%;line-gap-override:0%}

:root{
  --bg:#F4F4F2; --alt:#E9E9E6; --paper:#FFFFFF; --ink:#111111; --text:#2B2B2A; --muted:#6E6E6C; --faint:#A6A6A4;
  --line:#8F8F8D; --rule:#8F8F8D; --hair:#D6D6D3; --tint:#DCDCD8; --solid:#111111; --on-solid:#F4F4F2;
  --font:"Hanken Grotesk","Hanken Grotesk Fallback","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:var(--font);
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --pad:max(24px,6vw);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0D0D0D; --alt:#161616; --paper:#1A1A1A; --ink:#F2F2F0; --text:#D2D2CF; --muted:#8F8F8C; --faint:#5E5E5C;
    --line:#6B6B69; --rule:#6B6B69; --hair:#2A2A29; --tint:#262625; --solid:#F2F2F0; --on-solid:#0D0D0D;}
}

/* A page in two languages shows one half of each pair (src/routes/home.ts). */
html[lang=en] [lang=es],html[lang=es] [lang=en]{display:none!important}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.1rem/1.45 var(--font);-webkit-font-smoothing:antialiased}

/* the corner: who we are, the language, the way in */
.top{position:fixed;inset:0 0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) var(--pad) 14px;pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:inline-flex;align-items:center;gap:10px;font:600 1rem/1 var(--font);letter-spacing:-.01em;color:var(--solid);text-decoration:none}
.brand img{width:28px;height:28px;border-radius:7px;display:block}
.acts{display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 15px;border:1px solid var(--rule);border-radius:999px;background:var(--bg);color:var(--solid);font:600 .85rem/1 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap}
.pill.solid{background:var(--solid);color:var(--on-solid);border-color:var(--solid)}
.pill.lang{gap:7px;padding:0 12px 0 10px;letter-spacing:.06em}
.flag{width:20px;height:14px;border-radius:3px;display:block;flex:none;overflow:hidden;box-shadow:0 0 0 1px var(--hair)}
@media (max-width:560px){.brand span{display:none}.pill{padding:0 12px}.acts{gap:6px}}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;border:0;border-radius:999px;background:var(--solid);color:var(--on-solid);font:600 1.05rem/1 var(--font);text-decoration:none;cursor:pointer}
.pill:focus-visible,.cta:focus-visible,.brand:focus-visible{outline:2px solid var(--solid);outline-offset:3px}

/* A plain page under the corner: /get-one and the replies to it. */
.page{width:min(560px,100% - 32px);margin-inline:auto;padding:calc(104px + env(safe-area-inset-top,0px)) 0 64px}
.page h1{font:500 clamp(2.2rem,6vw,3.4rem)/1 var(--font);letter-spacing:-.04em;color:var(--solid);margin:0 0 16px;text-wrap:balance}
.page .lede{font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.4;color:var(--muted);margin:0 0 32px;max-width:32em;text-wrap:balance}
.page p{margin:0 0 14px;max-width:34em}
.page .note{margin-top:24px;font-size:.88rem;line-height:1.55;color:var(--muted)}