/* Jetstruct. The usual landing layout (top bar, centred hero, blocks, closing
   call to action) in the visual language of alexmesch.com: white page, #020202
   text, #9a9a9a secondary type, heavy headings over light body copy,
   square corners, no shadows, and #30f as the only accent. The face is Figtree
   (Google Fonts, SIL OFL 1.1), saved in fonts/ and served from the site itself:
   nothing loads from outside. alexmesch.com uses Gira Sans from Typekit. */
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("/fonts/figtree-latin.woff2") format("woff2");
}
:root { --ink: #020202; --mute: #9a9a9a; --text: #555; --line: rgba(0,0,0,.12); --accent: #30f; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font: 400 15px/1.8 "Figtree", "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
}
a { color: inherit; }
.wrap { max-width: 940px; margin: 0 auto; padding: 0 30px; }

.bar { border-bottom: 1px solid var(--line); }
.bar-in { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { font-size: 20px; font-weight: 900; color: #000; text-decoration: none; transition: color .2s; }
.logo:hover { color: var(--accent); }
.bar nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.bar nav a { color: #000; text-decoration: none; padding: 6px 0; border-bottom: 2px solid rgba(0,0,0,0); transition: all .2s; }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

.btn { display: inline-block; padding: 12px 24px; border: 2px solid #000; background: #000; color: #fff; font-size: 14px; font-weight: 400; text-decoration: none; transition: all .2s; }
.btn:hover { background: #fff; color: var(--accent); border-color: var(--accent); }
.btn-ghost { background: #fff; color: #000; }
.btn-ghost:hover { color: var(--accent); }
.bar nav a.btn { color: #fff; padding: 7px 16px; border: 2px solid #000; }
.bar nav a.btn:hover { color: var(--accent); border-color: var(--accent); }

.hero { text-align: center; padding: 88px 30px 40px; }
.pill { margin: 0 0 20px; font-size: 14px; color: var(--mute); }
.hero h1 { margin: 0 auto; max-width: 17em; font-size: clamp(32px, 5.6vw, 56px); font-weight: 900; line-height: 1.2; color: #000; }
.lede { margin: 24px auto 0; max-width: 32em; font-size: 19px; line-height: 1.6; color: var(--text); }
.cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 32px 0 0; }
.shot { margin: 64px auto 0; max-width: 880px; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.shot figcaption { margin-top: 12px; font-size: 13px; color: var(--mute); line-height: 1.6; }

.block { padding: 88px 30px 0; }
.block h2 { margin: 0 0 28px; font-size: clamp(24px, 3.4vw, 32px); font-weight: 900; line-height: 1.3; color: #000; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 36px; }
.grid article { border-top: 2px solid #000; padding-top: 14px; }
.grid h3 { margin: 0 0 6px; font-size: 19px; font-weight: 400; line-height: 1.4; color: #000; }
.grid p { margin: 0; font-size: 15px; color: var(--text); }
.closing { text-align: center; padding-bottom: 88px; }
.closing p { max-width: 34em; margin: 0 auto; color: var(--text); }
.closing .cta { margin-top: 28px; }

.sub { padding: 64px 30px 88px; }
.sub h1 { margin: 0 0 24px; font-size: 32px; font-weight: 900; line-height: 1.5; color: #000; }
.prose { max-width: 40em; }
.prose h2 { margin: 1.6em 0 .55em; font-size: 19px; font-weight: 400; line-height: 1.4; color: #000; }
.prose p, .prose ul { margin: 0 0 1em; }
.prose li { margin: 0 0 .4em; }
.prose a { color: #000; border-bottom: 1px solid rgba(0,0,0,.5); text-decoration: none; transition: all .2s; }
.prose a:hover { color: var(--accent); border-bottom-color: var(--accent); }
code { font-size: .92em; }

footer { border-top: 1px solid var(--line); font-size: 13px; color: #555; }
.foot-in { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 40px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--accent); }

@media (max-width: 800px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .wrap, .hero, .block, .sub { padding-left: 20px; padding-right: 20px; }
  .hero { padding-top: 56px; }
  .lede { font-size: 17px; }
  .grid { grid-template-columns: 1fr; }
  .bar nav { gap: 14px; }
  .bar nav a:not(.btn) { display: none; }
  .block { padding-top: 60px; }
}

.shot video { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #fff; }
.prose figure { margin: 1.4em 0 2em; }
.prose figure.wide { max-width: 40em; }
.prose video, .prose img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.prose figcaption { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--mute); }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; width: min(880px, calc(100vw - 60px)); margin: 2em 0; }
.gallery figure { margin: 0; }
@media (max-width: 720px) { .gallery { grid-template-columns: 1fr; width: auto; } }
.prose .note { font-size: 13px; line-height: 1.6; color: var(--mute); }