/* Len & Caren brand kit 2.21: "the Postcard way". Cream and sand cover the page;
   blue, pink and yellow stay small (tape). The logo is one colour only. */
@font-face { font-family: "Figtree"; src: url("/brand/Figtree-Variable.ttf") format("truetype"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/brand/Newsreader-Variable.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/brand/Caveat-Variable.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }

:root {
  --surface: #FAF9F5; --raised: #FFFFFF; --sand: #E8E1CE; --border: #E5E3DD;
  --text: #111111; --text-2: #4B483C; --muted: #6F6A5B; --link: #006FDC;
  --blue: #1486FF; --pink: #FF2E93; --yellow: #FFCD00;
  --shadow: 0 1px 2px rgba(17,17,17,.06), 0 8px 24px rgba(17,17,17,.06);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --surface: #111111; --raised: #2C2A24; --sand: #2C2A24; --border: #4B483C;
          --text: #FAF9F5; --text-2: #CFCCC2; --muted: #ADA99B; --link: #1486FF;
          --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--surface); color: var(--text-2);
       font: 400 16px/1.6 "Figtree", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
       display: flex; flex-direction: column; }
a { color: var(--link); }

.wrap { width: 100%; max-width: 1040px; margin-left: auto; margin-right: auto;
        padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); }
header { padding-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logo { display: block; height: 60px; width: auto; }
.logo.dark { display: none; }
@media (prefers-color-scheme: dark) { .logo.light { display: none; } .logo.dark { display: block; } }
.who { font-size: 13px; color: var(--muted); text-align: right; }
.who a { color: var(--muted); }

main { flex: 1; padding-top: 72px; padding-bottom: 64px; }
.label { font: 500 13px/1.4 "Figtree", sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
h1 { font: 600 clamp(31px, 4.2vw, 44px)/1.12 "Newsreader", Georgia, serif; letter-spacing: -.012em; color: var(--text); margin: 0; }
.note { font: 500 24px/1.2 "Caveat", "Bradley Hand", cursive; color: var(--text-2); margin: 10px 0 0; transform: rotate(-1.5deg); transform-origin: left; display: inline-block; }

.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; margin-top: 48px; }
.tool { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 168px; padding: 30px 26px 24px;
        background: var(--raised); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
        color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
a.tool:hover, a.tool:focus-visible { transform: translateY(-2px) rotate(-.4deg); box-shadow: 0 2px 4px rgba(17,17,17,.08), 0 14px 32px rgba(17,17,17,.10); outline: none; }
a.tool:focus-visible { border-color: var(--blue); }
.tool::before { /* a strip of washi tape holding the card down */
  content: ""; position: absolute; top: -11px; left: 26px; width: 84px; height: 22px; border-radius: 2px;
  background: var(--tape, var(--blue)); opacity: .75; transform: rotate(-4deg); }
.tool.pink { --tape: var(--pink); }
.tool.yellow { --tape: var(--yellow); }
.tool .kicker { font: 600 12px/1.4 "Figtree", sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.tool h2 { font: 600 25px/1.22 "Newsreader", Georgia, serif; color: var(--text); margin: 0; }
.tool p { margin: 0; color: var(--text-2); }
.tool .go { margin-top: auto; padding-top: 12px; font-weight: 700; color: var(--link); font-size: 15px; }
.tool.soon { background: transparent; box-shadow: none; border-style: dashed; }
.tool.soon h2, .tool.soon p { color: var(--muted); }
a.tool.soon:hover, a.tool.soon:focus-visible { box-shadow: none; background: var(--raised); }
/* The placeholder page for a tool that is not built yet. */
.placeholder { max-width: 640px; }
.placeholder p { margin: 16px 0 0; }
.placeholder .back { display: inline-block; margin-top: 32px; font-weight: 700; text-decoration: none; }
.tool.soon .go { color: var(--muted); font-weight: 500; }

footer { padding-bottom: max(28px, env(safe-area-inset-bottom)); font-size: 13px; color: var(--muted); }
footer .wrap { border-top: 1px solid var(--border); padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

@media (max-width: 640px) { .wrap { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  header { padding-top: 28px; } .logo { height: 44px; } main { padding-top: 40px; } .who { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .tool { transition: none; } a.tool:hover { transform: none; } }

/* "Help someone sign in" under the menu. */
.helpin { margin-top: 48px; max-width: 560px; color: var(--text-2); font-size: 15px; }
.helpin summary { cursor: pointer; color: var(--muted); font-size: 14px; font-weight: 600; }
.helpin p { margin: 10px 0; }
.helprow { display: flex; gap: 10px; flex-wrap: wrap; }
.helprow select, .helprow button { font: 500 15px/1.2 "Figtree", -apple-system, sans-serif; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--raised); color: var(--text); }
.helprow button { background: var(--text); color: var(--surface); border-color: var(--text); cursor: pointer; }
.helprow button:disabled { opacity: .55; }
.helpout { background: var(--raised); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.helpout.err { color: #B0105F; }
.helpcode { display: inline-block; font: 700 30px/1.1 "Figtree", sans-serif; letter-spacing: .3em; color: var(--text); margin-bottom: 4px; user-select: all; }