/* ============================================================ */
/* MAISON FORGE SITE SYSTEM — type scale + button system         */
/* TASK-MF-735. Loaded LAST on every page: after mobile.css and  */
/* after each page's own <style> blocks. The cascade on this     */
/* site is decided by SOURCE ORDER (CLAUDE.md, trap 2), so this  */
/* sheet is the authority for type sizes and buttons, and its    */
/* rules are !important like mobile.css's. To change a size or   */
/* a button, change it HERE — never in a page.                   */
/* ============================================================ */

/* ── TYPE SCALE ─────────────────────────────────────────────── */
/* Measured before this sheet: page titles 105/39 on 11 pages    */
/* (the Board 76, 404 72); section headings 105 / 58 / 50 / 43 / */
/* 40 by page; eyebrows 11 or 14. One scale, four steps.         */

/* display */
/* (#board-hero h1.headline-style and .meet-lums .headline are named so this
   rule outweighs the page rules that used to size them on their own.) */
h1.display-xl, h1.page-headline, h1.headline-style, #board-hero h1.headline-style, h1.headline, .display-xl, h2.headline, #luminaries h2.headline, #luminaries-cont h2.headline, .meet-lums .headline, .team-title, .diff-title, .wrap h1, h2.lum-card-name, .lum-card-name {
  /* Owner (2026-09-17): "bring it down about 20%" — was clamp(39px, 7.3vw, 105px). */
  font-size: clamp(31px, 5.8vw, 84px) !important;
  line-height: 1.05 !important;
}
/* section */
/* (.section-headline marks a .headline that is a SECTION title, not a page
   title — sustainability's two h2s.) */
h2.subheading, .subheading, .close-headline, .qa-question, .cat-headline, .part-headline, .metrics-part-headline, h2.section-headline, .section-headline {
  font-size: clamp(28px, 3.5vw, 50px) !important;
  line-height: 1.12 !important;
}
/* sub */
h3.tp-name, .tp-name {
  font-size: clamp(24px, 2.8vw, 40px) !important;
  line-height: 1.15 !important;
}
/* eyebrow */
.eyebrow-label, .page-eyebrow {
  font-size: 12px !important;
}

/* ── BUTTON SYSTEM ──────────────────────────────────────────── */
/* Two variants, both the pricing page's button (.tier-col-cta): */
/* the gold gradient with navy lettering, or the same box        */
/* outlined in gold. Every button on the site is one of the two; */
/* the top bar (menu-styles.css) shares the metrics.             */

/* shared box */
.cta-button, .tier-col-cta, .login-btn, .sus-cta-btn, .gs-cta-btn, .board-cta-btn, .cat-cta-primary, .menu-commission-btn, .lum-toggle, a.home {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  padding: 12px 20px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  animation: none !important;
  transition: filter 0.3s, background 0.3s, color 0.3s, box-shadow 0.3s, border-color 0.3s !important;
}
/* primary */
.cta-button, .tier-col-cta, .login-btn, .sus-cta-btn, .gs-cta-btn.primary, .board-cta-btn, .cat-cta-primary, .menu-commission-btn {
  background: linear-gradient(135deg, #C9A84C, #C9A84C 30%, #E2C68D 70%, #f0d78c) !important;
  color: #1C1C3A !important;
  border: none !important;
}
.cta-button:hover, .tier-col-cta:hover, .login-btn:hover, .sus-cta-btn:hover, .gs-cta-btn.primary:hover, .board-cta-btn:hover, .cat-cta-primary:hover, .menu-commission-btn:hover {
  /* TASK-MF-735 (owner): "a little more glass-like" — the gradient stays, lit
     from inside: a bright hairline along the top edge, a top-lit white sheen,
     and a soft gold halo. */
  background: linear-gradient(135deg, #C9A84C, #C9A84C 30%, #E2C68D 70%, #f0d78c) !important;
  color: #1C1C3A !important;
  filter: brightness(1.05) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 10px 16px rgba(255,255,255,0.22), 0 0 16px 3px rgba(226,198,141,0.35) !important;
}
/* secondary */
.tier-col-cta-outline, .gs-cta-btn:not(.primary), .lum-toggle, a.home {
  background: transparent !important;
  color: #E2C68D !important;
  border: 1px solid #E2C68D !important;
}
.tier-col-cta-outline:hover, .gs-cta-btn:not(.primary):hover, .lum-toggle:hover, a.home:hover, .lum-item.open .lum-toggle {
  /* TASK-MF-735 (owner): GLASS on hover, not a flat fill — a top-lit gold
     wash over a blur of whatever is behind, warm-white letters, a brightened
     edge and a soft halo. The top bar (menu-styles.css) mirrors these values. */
  background: linear-gradient(to top, rgba(226,198,141,0.30), rgba(226,198,141,0.14) 50%, rgba(226,198,141,0.06)) !important;
  backdrop-filter: blur(10px) saturate(1.2) !important; -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  color: #FFF8E7 !important;
  border-color: #f0d78c !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 14px 2px rgba(226,198,141,0.22) !important;
  filter: none !important;
}


/* ── CURSOR ─────────────────────────────────────────────────── */
/* TASK-MF-735 (owner): the custom cursor is a golden, glowing OUTLINE ARROW on
   every page that carries one (.cursor; desktop only — the pages hide it
   under 1024px). The pricing page has no custom cursor by the owner's ask. */
/* cursor */
/* The element itself draws nothing; the arrow is ::after with its TIP at the
   pointer (the pages centre the element on the pointer with translate -50%). */
.cursor {
  width: 2px !important;
  height: 2px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  overflow: visible !important;
}
.cursor::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important; top: 50% !important;
  width: 22px !important; height: 30px !important;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2222%22%20height=%2230%22%20viewBox=%220%200%2022%2030%22%3E%3Cpath%20d=%22M2%202%20L2%2023%20L7.6%2018.2%20L11.2%2027%20L14.6%2025.5%20L11%2016.8%20L18.5%2016.8%20Z%22%20fill=%22none%22%20stroke=%22%23E2C68D%22%20stroke-width=%221.6%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E") no-repeat 0 0 / 22px 30px !important;
  filter: drop-shadow(0 0 5px rgba(226,198,141,0.9)) drop-shadow(0 0 14px rgba(226,198,141,0.55)) !important;
  transform-origin: 2px 2px !important;
  transition: transform 0.25s !important;
}
.cursor.expanded::after {
  transform: scale(1.25) !important;
  filter: drop-shadow(0 0 8px rgba(226,198,141,1)) drop-shadow(0 0 22px rgba(226,198,141,0.6)) !important;
}


/* ── FOOTER ───────────────────────────────────────────────────── */
/* TASK-MF-735 (owner): one simple footer on every page — the email and the
   copyright (the FAQ link was added and then cut, owner). index.html keeps its own fuller footer, which
   carries the same three things. The !important on padding is for mobile.css,
   whose `footer { padding … !important }` would otherwise restyle this one. */
.mf-footer {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px 32px;
  padding: 28px 56px 32px !important;
  /* owner: NO background — four pages (about-us, get-started, sustainability,
     the-board) still carry index's old footer rule — a navy gradient
     background by TAG — which this element would otherwise inherit. */
  background: transparent !important; text-align: left; overflow: visible;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px; letter-spacing: 0.08em; line-height: 1.4;
  color: rgba(255,255,255,0.6);
}
.mf-footer a { color: #E2C68D; text-decoration: none; transition: color 0.3s; }
.mf-footer a:hover { color: #f0d78c; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .mf-footer { flex-direction: column; justify-content: center; text-align: center; gap: 10px; padding: 24px 20px 28px !important; }
}

/* ── MARGINS ─────────────────────────────────────────────────── */
/* TASK-MF-735 (owner): "I like the left-hand margin on the sustainability
   page — use that same margin on all the other pages." Sustainability is a
   56px gutter with the content capped at 1320px and centred beyond it: 60px at
   1440, 300px at 1920. Measured before this block: the hero-and-column pages
   (the-maison, how-it-works, marianella, for-categories, pricing, luminaries,
   questions) sat on a FIXED 56px and centred their content in a narrow column
   (820 / 900 / 1200px), so their text started at 366px or 270px on a laptop.
   Now every page sits on the same gutter; each block keeps a reading measure.
   Phones keep mobile.css's 22px — this block is desktop only. */
@media (min-width: 769px) {
  .page-hero, .page-content, .category-section, .metrics-section, .lum-card {
    padding-left: max(56px, calc((100% - 1320px) / 2)) !important;
    padding-right: max(56px, calc((100% - 1320px) / 2)) !important;
  }
  .page-content, .category-inner, .metrics-inner {
    max-width: none !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  /* the reading measure — sustainability's paragraphs at desktop; the pricing
     cards are the one block that spans the full width */
  .page-content > :not(.tier-strip), .category-inner > *, .metrics-inner > * { max-width: 860px; }
  /* the Board's and About's people were a centred 1000px / 900px flex box */
  .tp-person { margin-left: 0 !important; margin-right: 0 !important; }
}
@media (min-width: 901px) {
  /* the open profile's text lines up with the card text: gutter + the 152px
     portrait column + its 40px gap */
  .lum-profile-inner {
    padding-left: calc(max(56px, calc((100% - 1320px) / 2)) + 192px) !important;
    padding-right: max(56px, calc((100% - 1320px) / 2)) !important;
  }
}