/* Shared by the landing page and the blog: palette, base, the nav pill, buttons,
   keycaps, the closing band and the footer. Cut verbatim from index.html's inline
   style, which loads after this and still holds everything only the landing page uses.
   Change a rule here and both change; check both. */
:root {
  --paper: #fcfcf8;
  --paper-2: #f3f2ec;
  --ink: #0e0f0c;
  --ink-2: #454745;
  --ink-3: #6a6c6a;
  --hair: #47432a26;
  /* Two jobs, two colours. Graphite is the icon's light-mode ground (make-icon.py
     GRAPHITE) and does the chrome: buttons, the closing band. Chocolate is the one
     colour text is allowed, for the italic headline words and marks that point at
     something. The violet they replace sat ΔE 6 from Tailwind indigo — the colour of
     a site an AI built. Neither may drift toward green, amber or grey: those are the
     panel's coverage marks. */
  --graphite: #34362f;
  --graphite-deep: #1c1d19;   /* hover only — darkens, never lightens */
  --accent: #4a2c20;          /* chocolate */
  --accent-wash: #4a2c2012;
  /* Panel coverage colours. Green, amber and grey mean something in the app,
     so they appear only inside panel mocks, never as page decoration. */
  --whole: #6fd08c;
  --partial: #f0a54a;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-padding-top: 76px; }

body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--sans); }
a { color: inherit; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* nav */
/* Sticky, and a floating pill only once the page moves — measured off granola.ai: 8px
   from the top, 56px tall, 9999px radius, a hairline and a two-layer shadow. Flat at the
   top of the page, where a card around the logo would be chrome with nothing to float
   over. The negative margin lets the pill overhang while the logo stays on the column. */
nav { position: sticky; top: 8px; z-index: 50; display: flex; align-items: center;
      justify-content: space-between; height: 56px; margin: 12px -16px 0; padding: 0 8px 0 16px;
      border-radius: 9999px; border: 1px solid transparent;
      transition: background-color .3s cubic-bezier(.16,1,.3,1), border-color .3s cubic-bezier(.16,1,.3,1),
                  box-shadow .3s cubic-bezier(.16,1,.3,1); }
nav.stuck { background: #fffffff0; border-color: #d5d5d2;
            box-shadow: 0 1px 2px #0000000a, 0 6px 20px #0000000f;
            -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.mark { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; text-decoration: none; }
.mark img { width: 28px; height: 28px; border-radius: 7px; }
/* The one text link in the nav; auto margin puts it beside the button, not mid-bar. */
.nav-link { margin: 0 20px 0 auto; color: var(--ink-3); font-size: 15px; text-decoration: none; }
.nav-link:hover { color: var(--ink); }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--graphite); color: #fff;
       padding: 11px 20px; border-radius: 999px; text-decoration: none; font-weight: 550; font-size: 15px;
       transition: background .15s cubic-bezier(.16,1,.3,1); }
.btn[href]:hover { background: var(--graphite-deep); }   /* darker on hover, never lighter */
.btn:not([href]) { opacity: .55; cursor: default; }
/* Keyboard users got the UA ring on a black pill on warm paper. */
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
.close a:focus-visible { outline-color: #fff; }
.btn.small { padding: 8px 16px; font-size: 14px; }

h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.025em; margin: 0; }

h1 em, h2 em { font-style: italic; color: var(--accent); }

kbd { font: 600 0.92em var(--mono); background: #fffefb; border: 1px solid var(--hair); border-bottom-width: 2px;
      border-radius: 6px; padding: 1px 6px; }
/* The same optical fix at inline size. `line-height: 0` on the *wrapper* keeps the
   1.45em glyph from growing the line box; `nowrap` on the chip is belt and braces.
   The split that defeated two earlier attempts was neither of these — it was
   `.sub span { display: block }` matching the wrapper. Verified: one client rect. */
kbd { white-space: nowrap; }
.ctl { font-size: 1.3em; line-height: 0; vertical-align: -0.13em; }
/* Read aloud, ⌃ is "up arrowhead". Each keycap hides the glyph and says "Control-" here. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

h2 { font-size: clamp(34px, 5vw, 58px); line-height: 1.06; max-width: 15em; }

.close { margin-top: 130px; padding: 90px 24px; text-align: center; border-radius: 16px; color: #fff;
         background: var(--graphite); }
.close h2 { margin: 0 auto; max-width: 13em; }
.close p { color: #ffffffd9; margin: 18px 0 32px; font-size: 19px; }
.close .btn { background: #fff; color: var(--ink); }
.close .btn[href]:hover { background: #e8e6dc; }   /* darker on hover, never lighter */
.close kbd { background: #ffffff22; border-color: #ffffff44; color: #fff; }

footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 36px 0 48px; color: var(--ink-3); font-size: 14px; }

/* The app's brief panel, drawn in HTML: the landing page's pictures and the blog's
   brief of each post. .f-pan is the finished panel, with its rule and status band. */
.pan { background: #1f1f21f2; color: #fff; border-radius: 15px; padding: 16px 19px 13px;
       font-size: 14px; line-height: 1.46; -webkit-backdrop-filter: blur(22px);
       backdrop-filter: blur(22px); box-shadow: 0 34px 70px -20px #1c1d1973; }
.pan .bar { display: flex; align-items: center; gap: 9px; color: #a8a8a8; font-weight: 600;
            font-size: 13.5px; margin-bottom: 10px; }
.pan .tl { font-size: 17px; font-weight: 700; line-height: 1; color: var(--whole); }
.pan .tools { margin-left: auto; color: #6f6f6f; font-weight: 400; letter-spacing: 5px; }
.pan .cl { margin: 14px 0 3px; font-size: 14px; font-weight: 650; }
.pan .bar + .cl { margin-top: 0; }
.pan ul { margin: 0; padding: 0; list-style: none; }
.pan li { color: #ffffff85; padding-left: 15px; position: relative; margin: 2px 0; }
.pan li::before { content: "•"; position: absolute; left: 2px; color: #ffffff40; }
.pan .st { margin-top: 13px; color: #a8a8a8; font-size: 12px; }
.pan.f-pan { position: relative; padding: 14px 19px 0; overflow: hidden; background: #1f1f21f5; }
.f-pan .bar { color: #c8c8c8; margin: 0 -19px 13px; padding: 0 19px 11px; border-bottom: 1px solid #ffffff14; }
.f-pan .tools { white-space: nowrap; }
.f-pan li b { color: #fff; font-weight: 650; }
.f-pan .st { margin: 14px -19px 0; padding: 9px 19px 10px; background: #ffffff0a; border-top: 1px solid #ffffff12; }