/* ============================================================
   lauragao.com component system

   One stylesheet every page loads. It holds the design tokens and
   the shared components (button, card, badge, field, callout,
   tabs, table, divider). Page stylesheets use these tokens and
   classes instead of setting their own colours, shadows or type.

   The look follows Tremor (tremor.so): white surfaces, gray
   borders, small radii, a solid dark primary button, no texture.
   Tremor ships as React and Tailwind; this file is a plain CSS
   port of its tokens so the static site needs no build step.

   Type: Acier BAT Solid for headings, IBM Plex Sans for everything
   else. Both are self-hosted.
   ============================================================ */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/plex/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/plex/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/plex/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/plex/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/plex/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "acier-bat-solid";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/acier-bat-solid.woff2") format("woff2"),
       url("/assets/fonts/acier-bat-solid.woff") format("woff");
}
/* The display face is Acier BAT Solid everywhere. The Squarespace theme and
   some older page styles name "din-condensed-web" directly, so that family
   name is pointed at the Acier files too. This file loads after
   typekit-fonts.css, so this definition is the one the browser uses. */
@font-face {
  font-family: "din-condensed-web";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/acier-bat-solid.woff2") format("woff2"),
       url("/assets/fonts/acier-bat-solid.woff") format("woff");
}

/* ---------- tokens ---------- */
:root {
  /* surfaces. The page is a light neutral gray so white cards, tiles and
     panels read as surfaces instead of white on white. */
  --ui-bg-page: #f3f4f6;          /* gray-100 */
  --ui-bg: #ffffff;
  --ui-bg-subtle: #f9fafb;        /* gray-50: page bands, table heads */
  --ui-bg-muted: #f3f4f6;         /* gray-100: image placeholders, hover rows */
  --ui-bg-inverted: #111827;      /* gray-900 */

  /* lines */
  --ui-border: #e5e7eb;           /* gray-200 */
  --ui-border-strong: #d1d5db;    /* gray-300: inputs */

  /* text, all at 4.5:1 or better on white */
  --ui-text: #111827;             /* gray-900: headings, strong */
  --ui-text-body: #374151;        /* gray-700: running text */
  --ui-text-muted: #4b5563;       /* gray-600: captions, meta (7.6:1) */
  --ui-text-inverted: #ffffff;

  /* No colour accent. Links, focus rings and the current nav item use
     the ink colour and an underline. Blue and violet accents read as
     generated, and the artwork on each page supplies the colour. */
  --ui-brand: #111827;            /* gray-900 */
  --ui-brand-hover: #000000;
  --ui-brand-subtle: #f3f4f6;     /* gray-100 */

  /* status */
  --ui-success: #047857;          /* emerald-700 */
  --ui-success-subtle: #ecfdf5;
  --ui-danger: #b91c1c;           /* red-700 */
  --ui-danger-subtle: #fef2f2;
  --ui-warning: #b45309;          /* amber-700 */
  --ui-warning-subtle: #fffbeb;

  /* shape */
  --ui-radius-sm: 4px;
  --ui-radius: 6px;
  --ui-radius-lg: 8px;
  --ui-radius-full: 9999px;

  /* one elevation, for things that float over the page (menus, dialogs) */
  --ui-shadow-pop: 0 4px 12px rgba(17, 24, 39, 0.12);
  /* the hairline Tremor puts under inputs and buttons */
  --ui-shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);

  /* type */
  --ui-font-display: "acier-bat-solid", "Arial Black", sans-serif;
  --ui-font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --ui-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --ui-text-xs: 14px;     /* the smallest size anywhere: badges, fine print */
  --ui-text-sm: 15px;     /* UI controls, captions */
  --ui-text-base: 17px;   /* running text */
  --ui-text-lg: 19px;     /* lead paragraphs */
  --ui-h4: 22px;
  --ui-h3: 28px;
  --ui-h2: 36px;
  --ui-h1: clamp(40px, 5vw, 56px);

  /* spacing scale */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-space-6: 32px;
  --ui-space-7: 48px;
  --ui-space-8: 72px;
  --ui-space-9: 112px;

  --ui-measure: 720px;     /* reading column */
  --ui-wide: 1120px;       /* page container */

  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
  --ui-focus: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-brand);
}

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ui-bg-page);
  color: var(--ui-text-body);
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-base);
  line-height: 1.6;
}

.ui-prose h1, .ui-prose h2, .ui-prose h3, .ui-prose h4,
.ui-h1, .ui-h2, .ui-h3, .ui-h4 {
  font-family: var(--ui-font-display);
  font-weight: 400;
  color: var(--ui-text);
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
  margin: 0;
}
.ui-h1 { font-size: var(--ui-h1); }
.ui-h2 { font-size: var(--ui-h2); }
.ui-h3 { font-size: var(--ui-h3); }
.ui-h4 { font-size: var(--ui-h4); }

/* Site-wide: headings balance their lines so none ends on a stub, and
   paragraphs avoid leaving one word alone on the last line. */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li, blockquote, figcaption { text-wrap: pretty; }

.ui-lead { font-size: var(--ui-text-lg); color: var(--ui-text-body); line-height: 1.55; }
.ui-meta { font-size: var(--ui-text-sm); color: var(--ui-text-muted); }
.ui-prose p, .ui-prose li { text-wrap: pretty; }

a.ui-link, .ui-prose a {
  color: var(--ui-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a.ui-link:hover, .ui-prose a:hover {
  color: var(--ui-brand-hover);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
a.ui-link:active, .ui-prose a:active {
  background: var(--ui-bg-muted);
  color: var(--ui-text);
  text-decoration-thickness: 2px;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ui-focus);
  border-radius: var(--ui-radius-sm);
}

/* ---------- layout ---------- */
.ui-container { width: min(var(--ui-wide), 100% - 32px); margin-inline: auto; }
.ui-column { width: min(var(--ui-measure), 100% - 32px); margin-inline: auto; }
.ui-stack > * + * { margin-top: var(--ui-space-4); }
.ui-section { padding-block: var(--ui-space-8); }
.ui-section + .ui-section { border-top: 1px solid var(--ui-border); }
.ui-divider { border: 0; border-top: 1px solid var(--ui-border); margin: var(--ui-space-7) 0; }

/* ---------- button ----------
   Variants: primary (solid dark), secondary (white with a border),
   light (gray fill), ghost (text only). Sizes: default and .ui-btn-lg.
   a.cta, .lg-btn and .btn are the older names used in page markup;
   they get the same component so every button on the site matches. */
.ui-btn, a.cta, .lg-btn, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 18px;
  margin: 0;
  border: 1px solid var(--ui-bg-inverted);
  border-radius: var(--ui-radius);
  background: var(--ui-bg-inverted);
  color: var(--ui-text-inverted);
  box-shadow: var(--ui-shadow-xs);
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-sm);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  rotate: none;
  translate: none;
  transition: background-color 0.15s var(--ui-ease), border-color 0.15s var(--ui-ease), color 0.15s var(--ui-ease);
}
.ui-btn:hover, a.cta:hover, .lg-btn:hover, .btn:hover {
  background: #1f2937;   /* gray-800 */
  border-color: #1f2937;
  color: var(--ui-text-inverted);
  rotate: none;
  translate: none;
}
.ui-btn:active, a.cta:active, .lg-btn:active, .btn:active { background: #374151; rotate: none; translate: none; box-shadow: none; }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.ui-btn-secondary, a.cta.cta-alt, .lg-btn.lg-btn-alt, .btn.lg-btn-alt {
  background: var(--ui-bg);
  color: var(--ui-text);
  border-color: var(--ui-border-strong);
}
.ui-btn-secondary:hover, a.cta.cta-alt:hover, .lg-btn.lg-btn-alt:hover, .btn.lg-btn-alt:hover {
  background: var(--ui-bg-subtle);
  border-color: var(--ui-border-strong);
  color: var(--ui-text);
}
.ui-btn-secondary:active, a.cta.cta-alt:active, .lg-btn.lg-btn-alt:active, .btn.lg-btn-alt:active { background: var(--ui-bg-muted); }

.ui-btn-light { background: var(--ui-bg-muted); color: var(--ui-text); border-color: transparent; box-shadow: none; }
.ui-btn-light:hover { background: #e5e7eb; border-color: transparent; color: var(--ui-text); }
.ui-btn-light:active { background: var(--ui-border-strong); }

.ui-btn-ghost { background: transparent; color: var(--ui-text); border-color: transparent; box-shadow: none; }
.ui-btn-ghost:hover { background: var(--ui-bg-muted); border-color: transparent; color: var(--ui-text); }
.ui-btn-ghost:active { background: var(--ui-border); }

.ui-btn.ui-btn-lg,
a.cta.ui-btn-lg,
.lg-btn.ui-btn-lg,
.btn.ui-btn-lg { min-height: 48px; padding: 0 22px; font-size: var(--ui-text-base); }
.ui-btn.ui-btn-sm,
a.cta.ui-btn-sm,
.lg-btn.ui-btn-sm,
.btn.ui-btn-sm { min-height: 36px; padding: 0 12px; font-size: var(--ui-text-xs); }

.ui-btn-row, .cta-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: var(--ui-space-6) auto var(--ui-space-2);
  padding: 0 16px;
}
.cta-sub {
  flex: 1 1 100%;
  font-size: var(--ui-text-sm);
  color: var(--ui-text-muted);
  margin-top: var(--ui-space-2);
  text-align: center;
}
@media (max-width: 520px) {
  .ui-btn-row > .ui-btn, .cta-wrap > a.cta, .cta-wrap > .lg-btn, .cta-wrap > .btn { flex: 1 1 100%; }
}

/* ---------- card ----------
   A white surface with a gray edge and no shadow. Cards never sit
   inside other cards; group inside a card with dividers instead. */
.ui-card {
  display: block;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  padding: var(--ui-space-5);
  color: var(--ui-text-body);
}
a.ui-card { text-decoration: none; transition: border-color 0.15s var(--ui-ease), background-color 0.15s var(--ui-ease); }
a.ui-card:hover { border-color: var(--ui-border-strong); background: var(--ui-bg-subtle); }
a.ui-card:active { border-color: var(--ui-border-strong); background: var(--ui-bg-muted); }
.ui-card-title { font-family: var(--ui-font-display); font-size: var(--ui-h4); color: var(--ui-text); line-height: 1.15; margin: 0; }
.ui-card-text { font-size: var(--ui-text-sm); color: var(--ui-text-muted); margin: var(--ui-space-1) 0 0; }
.ui-card-media {
  display: block;
  margin: calc(var(--ui-space-5) * -1) calc(var(--ui-space-5) * -1) var(--ui-space-4);
  border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
  overflow: hidden;
  background: var(--ui-bg-muted);
}
.ui-card-media img { display: block; width: 100%; height: auto; }

/* ---------- badge ---------- */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-bg-muted);
  color: var(--ui-text-body);
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-xs);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}
.ui-badge-brand { background: var(--ui-brand-subtle); color: var(--ui-brand); }
.ui-badge-success { background: var(--ui-success-subtle); color: var(--ui-success); }
.ui-badge-danger { background: var(--ui-danger-subtle); color: var(--ui-danger); }

/* ---------- form fields ---------- */
.ui-label {
  display: block;
  font-size: var(--ui-text-sm);
  font-weight: 500;
  color: var(--ui-text);
  margin-bottom: 6px;
}
.ui-hint { font-size: var(--ui-text-xs); color: var(--ui-text-muted); margin-top: 6px; }
.ui-error { font-size: var(--ui-text-xs); color: var(--ui-danger); margin-top: 6px; }
.ui-input, .ui-textarea, .ui-select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--ui-bg);
  color: var(--ui-text);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-xs);
  font-family: var(--ui-font-body);
  font-size: 16px;   /* 16 or larger, or iOS zooms the page on focus */
  line-height: 1.4;
  transition: border-color 0.15s var(--ui-ease), box-shadow 0.15s var(--ui-ease);
}
.ui-textarea { min-height: 120px; resize: vertical; }
.ui-input::placeholder, .ui-textarea::placeholder { color: #6b7280; }
.ui-input:focus, .ui-textarea:focus, .ui-select:focus {
  outline: none;
  border-color: var(--ui-brand);
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
}
.ui-input[aria-invalid="true"], .ui-textarea[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-field + .ui-field { margin-top: var(--ui-space-4); }

/* ---------- callout ---------- */
.ui-callout {
  padding: var(--ui-space-4);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-bg-subtle);
  color: var(--ui-text-body);
  font-size: var(--ui-text-sm);
}
.ui-callout-title { font-weight: 600; color: var(--ui-text); margin: 0 0 4px; }
.ui-callout-success { background: var(--ui-success-subtle); border-color: #a7f3d0; color: #065f46; }
.ui-callout-danger { background: var(--ui-danger-subtle); border-color: #fecaca; color: #991b1b; }

/* ---------- tabs ---------- */
.ui-tabs {
  display: flex;
  gap: var(--ui-space-5);
  border-bottom: 1px solid var(--ui-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.ui-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px 0;
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-sm);
  font-weight: 500;
  color: var(--ui-text-muted);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.ui-tab:hover { color: var(--ui-text); border-bottom-color: var(--ui-border-strong); }
.ui-tab[aria-selected="true"], .ui-tab.is-active { color: var(--ui-brand); border-bottom-color: var(--ui-brand); }

/* ---------- table ---------- */
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--ui-text-sm); }
.ui-table th {
  text-align: left;
  font-weight: 600;
  color: var(--ui-text);
  padding: 10px 12px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-bg-subtle);
}
.ui-table td { padding: 10px 12px; border-bottom: 1px solid var(--ui-border); color: var(--ui-text-body); vertical-align: top; }

/* ---------- list (link list with dividers) ---------- */
.ui-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ui-border); }
.ui-list > li { padding: var(--ui-space-3) 0; border-bottom: 1px solid var(--ui-border); }

/* ---------- figure ---------- */
.ui-figure { margin: var(--ui-space-7) auto; }
.ui-figure img, .ui-figure video { display: block; width: 100%; height: auto; border-radius: var(--ui-radius); }
.ui-figure figcaption { font-size: var(--ui-text-sm); color: var(--ui-text-muted); margin-top: var(--ui-space-2); text-align: center; }

/* ---------- dialog ---------- */
.ui-dialog {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-bg);
  box-shadow: var(--ui-shadow-pop);
  padding: var(--ui-space-5);
  color: var(--ui-text-body);
}

/* ---------- utilities ---------- */
.ui-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}