/* sempova.ai site stylesheet.
   Written for this site from the Oregon Futures design spec (Billie-Oregon-Futures.DESIGN.md v1.1.0),
   moods canopy (light) and moonwater (dark) only. No kit CSS is pasted here; values are the spec's tokens.
   Rules: tokens only for color; no inline styles in our markup; reduced motion respected. */

@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  /* optional: use Outfit only if it arrives in the first moments, so the page never shifts. */
  font-display: optional;
}

/* ---------- Tokens: canopy (light, the default) ---------- */
:root {
  color-scheme: light;
  --page: #F1F7F0;
  --surface: #FFFFFF;
  --raised: #F8FCF7;
  --sunken: #E4EEE5;
  --text: #153E37;
  --muted: #48665D;
  --action: #175B4D;
  --action-hover: #124A3E;
  --action-pressed: #0D3B31;
  --on-action: #F1F7F0;
  --link: #175B4D;
  --focus: #175B4D;
  --control-border: #48665D;
  --decorative-border: #CDDDD1;
  --info-bg: #EFF6FF;
  --info-fg: #1E40AF;
  --info-border: #2563EB;
  --g1: #BDEB64;
  --g2: #3DC898;
  --g3: #288BCB;
  --shadow-rest: 0 4px 16px rgba(21, 62, 55, 0.08);
  --shadow-lift: 0 12px 32px rgba(21, 62, 55, 0.12);

  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-control: 12px;
  --radius-card: 20px;
  --radius-feature: 28px;
  --pad: 1rem;
  --content: 72rem;
  --measure: 40rem;
}

/* ---------- Tokens: moonwater (dark) ---------- */
:root[data-mood="moonwater"] {
  color-scheme: dark;
  --page: #081C2E;
  --surface: #102C40;
  --raised: #173D59;
  --sunken: #061522;
  --text: #EEF5FA;
  --muted: #BDD1DC;
  --action: #A4E0D0;
  --action-hover: #B6E8DB;
  --action-pressed: #C7F0E4;
  --on-action: #081C2E;
  --link: #A4E0D0;
  --focus: #A4E0D0;
  --control-border: #BDD1DC;
  --decorative-border: #294C60;
  --info-bg: #142F4D;
  --info-fg: #B8D6FF;
  --info-border: #79AEE8;
  --g1: #174B78;
  --g2: #46B8C7;
  --g3: #E4EAC4;
  --shadow-rest: 0 4px 16px rgba(2, 12, 22, 0.28);
  --shadow-lift: 0 12px 32px rgba(2, 12, 22, 0.38);
}

/* No saved choice: follow the device setting. Same values as the moonwater block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-mood="canopy"]) {
    color-scheme: dark;
    --page: #081C2E;
    --surface: #102C40;
    --raised: #173D59;
    --sunken: #061522;
    --text: #EEF5FA;
    --muted: #BDD1DC;
    --action: #A4E0D0;
    --action-hover: #B6E8DB;
    --action-pressed: #C7F0E4;
    --on-action: #081C2E;
    --link: #A4E0D0;
    --focus: #A4E0D0;
    --control-border: #BDD1DC;
    --decorative-border: #294C60;
    --info-bg: #142F4D;
    --info-fg: #B8D6FF;
    --info-border: #79AEE8;
    --g1: #174B78;
    --g2: #46B8C7;
    --g3: #E4EAC4;
    --shadow-rest: 0 4px 16px rgba(2, 12, 22, 0.28);
    --shadow-lift: 0 12px 32px rgba(2, 12, 22, 0.38);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  /* keep the footer at the bottom on short pages */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

h1, h2, h3, p, ul, ol, figure { margin: 0 0 1rem; }
h1, h2, h3 { color: var(--text); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.9rem + 3vw, 4.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; }
h2 { font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
p, li { max-width: var(--measure); }
strong { font-weight: 700; }

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }

img { display: block; max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--action); color: var(--on-action); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: 0.5rem; z-index: 50;
  padding: 0.75rem 1.25rem; min-height: 48px;
  background: var(--action); color: var(--on-action);
  border-radius: var(--radius-control); font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; max-width: 100%;
  padding: 0.6875rem 1.25rem;
  border: 1px solid transparent; border-radius: var(--radius-control);
  background: var(--action); color: var(--on-action);
  font-family: inherit; font-size: 1.125rem; font-weight: 600; line-height: 1.35;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 120ms var(--ease);
}
.button:hover { background: var(--action-hover); box-shadow: var(--shadow-rest); }
.button:active { background: var(--action-pressed); transform: translateY(1px); }
.button-large { min-height: 56px; padding: 1rem 1.75rem; }
.button-compact { min-height: 44px; padding: 0.5rem 1rem; font-size: 1rem; }

/* ---------- Header ---------- */
.site-header { background: var(--surface); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  min-height: 72px; padding-block: 0.75rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.625rem;
  min-height: 44px;
  color: var(--text); text-decoration: none;
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em;
}
.brand img { width: 32px; height: 32px; border-radius: 7px; }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.header-actions > * { flex: none; }
.gradient-rule { height: 5px; background: linear-gradient(125deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%); }

/* Mood toggle: shown only when site.js has run (it adds the "js" class before the body is drawn). */
.mood-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--control-border); border-radius: var(--radius-control);
  background: var(--surface); color: var(--text);
  cursor: pointer;
  transition: background-color 180ms var(--ease);
}
.js .mood-toggle { display: inline-flex; }
.mood-toggle:hover { background: var(--sunken); }
.mood-toggle .icon { width: 22px; height: 22px; }
.mood-toggle .icon-sun { display: none; }
.mood-toggle[aria-pressed="true"] .icon-sun { display: block; }
.mood-toggle[aria-pressed="true"] .icon-moon { display: none; }

.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Sections ---------- */
.section { padding-block: 3rem; }
.section-alt { background: var(--surface); }
.section > .container > h2 { margin-bottom: 1.5rem; }
.lead { font-size: 1.25rem; line-height: 1.55; }

/* Hero. Text only (the picture beside it was removed 2026-11-13), so it spans the full content width
   (Billie's full-width rule): no headline or paragraph cap. */
.hero { padding-block: 2.5rem 3rem; }
.hero p { max-width: none; }
/* Each sentence of the headline stays together, so a line break falls between them, not after "We". */
.hero h1 .phrase { display: inline-block; }
.hero .lead { margin-bottom: 1.25rem; }
.hero-actions { margin-top: 1.5rem; }
.ai-note {
  display: flex; align-items: flex-start; gap: 0.625rem;
  margin: 1.25rem 0 0; padding: 0.75rem 1rem;
  background: var(--info-bg); color: var(--info-fg);
  border: 1px solid var(--info-border); border-radius: var(--radius-control);
  font-weight: 600;
}
.ai-note .icon { width: 24px; height: 24px; margin-top: 0.125rem; }

/* Text alone in a home section spans the full content width, like the hero (Billie's full-width rule).
   Cards, steps, questions and "Who I am" (text beside the photo) are columns and keep their layout. */
.section > .container > p { max-width: none; }

/* Pain list */
.pain-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.75rem; }
.pain-list li {
  max-width: none;
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 1rem 1.25rem;
  background: var(--surface); border: 1px solid var(--decorative-border); border-radius: var(--radius-card);
}
.pain-list li::before {
  content: ""; flex: none;
  width: 12px; height: 12px; margin-top: 0.5rem; border-radius: 50%;
  background: linear-gradient(125deg, var(--g1), var(--g2), var(--g3));
}
.punch { font-size: 1.25rem; font-weight: 600; }

/* Cards */
.card-grid { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0; }
.card {
  background: var(--surface);
  border: 1px solid var(--decorative-border); border-radius: var(--radius-card);
  padding: 1.25rem;
  box-shadow: var(--shadow-rest);
}
.section-alt .card { background: var(--raised); }
.card h3 { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.5rem; }
.card h3 .icon { width: 28px; height: 28px; color: var(--action); }
.card p:last-child { margin-bottom: 0; }
.after-cards { margin-top: 1.5rem; }

/* Notice: what it does not do */
.notice {
  display: flex; gap: 0.875rem; align-items: flex-start;
  padding: 1.25rem;
  background: var(--info-bg); color: var(--info-fg);
  border: 1px solid var(--info-border); border-left-width: 6px; border-radius: var(--radius-card);
}
.notice .icon { width: 28px; height: 28px; margin-top: 0.125rem; }
.notice p { margin: 0; max-width: none; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; counter-reset: step; }
.steps li {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 4.75rem;
  background: var(--surface); border: 1px solid var(--decorative-border); border-radius: var(--radius-card);
  max-width: none;
}
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 1.25rem; top: 1.25rem;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--action); color: var(--on-action);
  font-weight: 700; font-size: 1.25rem;
}
.steps h3 { margin-bottom: 0.375rem; }
.steps p { margin: 0; }

/* Who I am */
.about-grid { display: grid; gap: 1.5rem; align-items: start; }
.headshot {
  width: 160px; height: 160px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--surface), 0 0 0 9px var(--g2);
}

/* Questions */
.faq { display: grid; gap: 1.5rem; }
.faq h3 { margin-bottom: 0.375rem; }
.faq p { margin: 0; }

/* Last call to action */
.cta-panel {
  position: relative; overflow: hidden;
  background: var(--raised);
  border: 1px solid var(--decorative-border); border-radius: var(--radius-feature);
  padding: 2rem 1.25rem;
  box-shadow: var(--shadow-lift);
}
.cta-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 8px;
  background: linear-gradient(125deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);
}
.cta-panel h2 { max-width: 22ch; }
.cta-panel .email-line { margin: 1.25rem 0 0; }

/* Footer. Extra bottom space keeps the last links clear of the chat bubble (bottom right). */
.site-footer { background: var(--surface); border-top: 1px solid var(--decorative-border); padding: 2rem 0 7rem; }
.footer-links { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-legal { color: var(--muted); font-size: 1rem; margin: 0; }

/* Plain pages: privacy, terms, not found */
.prose { padding-block: 2.5rem 3.5rem; }
.prose h1 { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); margin-bottom: 0.75rem; }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); margin-top: 2.25rem; margin-bottom: 0.75rem; }
.prose ul { padding-left: 1.5rem; }
.prose li + li { margin-top: 0.375rem; }
.updated { color: var(--muted); }
.legal-text p { max-width: 48rem; }
.back-home { margin-top: 2rem; }

/* Marker for wording that still needs a decision (shows in preview builds; release refuses it). */
.confirm-marker { background: var(--info-bg); color: var(--info-fg); border: 1px dashed var(--info-border); border-radius: 6px; padding: 0 0.25rem; font-weight: 600; }

/* ---------- Very narrow phones (320 to 359 px): keep every header control at 44 px or more ---------- */
@media (max-width: 359px) {
  .header-inner { gap: 0.5rem; }
  .brand { font-size: 1.125rem; gap: 0.5rem; }
  .brand img { width: 28px; height: 28px; }
  .header-actions { gap: 0.375rem; }
  .button-compact { padding-inline: 0.75rem; }
}

/* ---------- Wider screens ---------- */
@media (min-width: 600px) {
  :root { --pad: 1.5rem; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .card { padding: 1.75rem; }
  .about-grid { grid-template-columns: 160px minmax(0, 1fr); gap: 2rem; }
  .cta-panel { padding: 2.75rem 2.5rem; }
}

@media (min-width: 960px) {
  :root { --pad: 2rem; }
  .section { padding-block: 5rem; }
  .hero { padding-block: 4.5rem 5rem; }
  /* Long full-width lines read better with more space between paragraphs (the full-width rule's mitigation). */
  .hero .lead { margin-bottom: 1.5rem; }
  .ai-note { margin-top: 1.5rem; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps li { padding: 4.75rem 1.5rem 1.5rem; }
  .steps li::before { left: 1.5rem; top: 1.5rem; }
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; row-gap: 2rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .button:active { transform: none; }
}

/* ---------- Blog (2026-11-13). Values from blog-ui-design-spec-v1.md, colors from the tokens above.
   Phone sizes are the base; 600 px and 960 px add the wider sizes, like the rest of this file. ---------- */

/* Header Blog link and footer Blog link */
.nav-main { display: flex; }
.nav-main a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 10px;
  color: var(--text); font-size: 1rem; font-weight: 600; text-decoration: none;
}
.nav-main a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nav-main a[aria-current="page"] {
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px;
  text-decoration-color: var(--action);
}
@media (max-width: 359px) {
  .header-inner { flex-wrap: wrap; }
  .header-actions { margin-left: auto; }
}

/* Blog index */
.blog-main { padding-block: 2.5rem 3.5rem; }
.blog-main h1 { margin-bottom: 1rem; }
.blog-intro { max-width: 40rem; }
.post-list { list-style: none; padding: 0; margin: 2rem 0 0; max-width: 48rem; display: grid; gap: 1rem; }
.post-card {
  max-width: none;
  background: var(--surface);
  border: 1px solid var(--decorative-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-rest);
  padding: 1.25rem;
}
.post-date { color: var(--muted); font-size: 1rem; margin: 0 0 0.5rem; }
.post-card h2 { font-size: 1.5rem; line-height: 1.18; margin: 0 0 0.75rem; }
.post-summary { margin: 0 0 0.75rem; }
.read-more { margin: 0; }
.read-more a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; font-weight: 600; }
.read-more .icon { width: 20px; height: 20px; }
.draft-tag, .draft-note {
  background: var(--info-bg); color: var(--info-fg);
  border: 1px dashed var(--info-border); border-radius: 6px;
  font-weight: 600;
}
.draft-tag { margin-left: 0.5rem; padding: 0 0.375rem; }
.draft-note { padding: 0.5rem 0.75rem; margin: 0 0 1.5rem; }

.empty-state {
  position: relative; overflow: hidden;
  max-width: 48rem; margin-top: 2rem;
  background: var(--raised);
  border: 1px solid var(--decorative-border); border-radius: var(--radius-feature);
  box-shadow: var(--shadow-lift);
  padding: 1.75rem 1.25rem;
}
.empty-state::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 8px;
  background: linear-gradient(125deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);
}
.empty-state .icon { width: 36px; height: 36px; color: var(--action); margin: 0.5rem 0 0.75rem; }
.empty-state h2 { font-size: 1.625rem; margin-bottom: 0.75rem; }
.empty-state p { max-width: 35rem; }

/* Post page: one left-aligned column */
.post-main { padding-block: 1rem 3.5rem; }
.post-column { max-width: 42rem; }
.back-top, .back-bottom { margin: 0; }
.back-bottom { margin-top: 2rem; }
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-weight: 600; }
.back-link .icon { width: 22px; height: 22px; }
.post-header h1 {
  font-size: 2.0625rem; line-height: 1.12; letter-spacing: -0.025em;
  margin: 1rem 0;
}
.post-meta {
  display: flex; flex-wrap: wrap; gap: 0 1rem;
  max-width: none; margin: 0 0 2rem;
  color: var(--muted); font-size: 1rem;
}
.post-body { font-size: 1.125rem; line-height: 1.7; }
.post-body p, .post-body li { max-width: none; }
.post-body p { margin: 0 0 1.5rem; }
.post-body h2 { font-size: 1.5rem; line-height: 1.2; margin: 2.5rem 0 0.75rem; }
.post-body h3 { font-size: 1.375rem; line-height: 1.25; margin: 2rem 0 0.5rem; }
.post-body ul, .post-body ol { padding-left: 1.5rem; margin: 0 0 1.5rem; }
.post-body li + li { margin-top: 0.5rem; }
.post-body li::marker { color: var(--action); font-weight: 700; }
.post-body blockquote {
  margin: 2rem 0; padding-left: 1rem;
  border-left: 6px solid var(--action);
  font-size: 1.375rem; font-weight: 600; line-height: 1.3; color: var(--text);
}
.post-body blockquote p { margin: 0; }

.post-cta {
  position: relative; overflow: hidden;
  margin-top: 2.5rem;
  background: var(--raised);
  border: 1px solid var(--decorative-border); border-radius: var(--radius-feature);
  box-shadow: var(--shadow-lift);
  padding: 2.25rem 1.25rem 1.75rem;
}
.post-cta::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 8px;
  background: linear-gradient(125deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);
}
.post-cta h2 { font-size: 1.75rem; max-width: 22ch; }
.post-cta .email-line { margin: 1.25rem 0 0; }

.post-nav { display: grid; gap: 1rem; margin-top: 2.5rem; }
.post-nav-item {
  background: var(--surface);
  border: 1px solid var(--decorative-border); border-radius: var(--radius-card);
  padding: 1.25rem;
}
.post-nav-label { color: var(--muted); font-size: 1rem; margin: 0 0 0.25rem; }
.post-nav-item a { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }

@media (min-width: 600px) {
  .nav-main a { font-size: 1.125rem; padding: 0 12px; }
  .post-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .empty-state { padding: 2rem; }
}

@media (min-width: 960px) {
  .blog-main { padding-block: 4rem 5rem; }
  .post-list { margin-top: 2.5rem; gap: 1.5rem; }
  .post-card { padding: 1.75rem; }
  .post-card h2 { font-size: 1.875rem; }
  .empty-state { margin-top: 2.5rem; }
  .empty-state h2 { font-size: 1.875rem; }
  .post-main { padding-block: 2rem 5rem; }
  .post-header h1 { font-size: 3rem; }
  .post-meta { margin-bottom: 2.5rem; }
  .post-body { font-size: 1.25rem; }
  .post-body h2 { font-size: 1.875rem; margin-top: 3rem; }
  .post-body h3 { font-size: 1.5rem; }
  .post-body blockquote { font-size: 1.75rem; padding-left: 1.5rem; margin: 2.5rem 0; }
  .post-cta { margin-top: 3.5rem; padding: 2.75rem 2.5rem 2.5rem; }
  .post-cta h2 { font-size: 2rem; }
}

/* Blog, measured fixes (tools/measure_blog.py, 2026-11-13):
   the header row wraps instead of scrolling sideways whenever it cannot fit (text spacing, zoom, 360 px);
   under 600 px the brand drops to its small size when the Blog link is there (the spec's fallback);
   the short footer "Blog" link keeps a 44 px target; post text is 20 px from 600 px, so tablet lines
   stay near the spec's 45 to 75 characters. */
.header-inner { flex-wrap: wrap; }
.header-actions { flex-shrink: 0; margin-left: auto; }
@media (max-width: 599px) {
  .header-inner:has(.nav-main) .brand { font-size: 1.125rem; gap: 0.5rem; }
  .header-inner:has(.nav-main) .brand img { width: 28px; height: 28px; }
}
.footer-links a { min-width: 44px; }
@media (min-width: 600px) {
  .post-body { font-size: 1.25rem; }
}
/* 360 and 375 px phones: one header row with the Blog link, using the spacing the site already uses
   under 360 px. Every control keeps a 44 px target. Wrapping above stays the fallback. */
@media (max-width: 389px) {
  .header-inner:has(.nav-main) { gap: 0.5rem; }
  .header-inner:has(.nav-main) .header-actions { gap: 0.375rem; }
  .header-inner:has(.nav-main) .button-compact { padding-inline: 0.75rem; }
  .nav-main a { padding: 0 6px; }
}