/* ============================================================
   Michy — base
   Everything every page shares: the design tokens lifted from the
   Figma variables, a small reset, the artboard scaffolding, the
   Figma text styles as utility classes, and the responsive
   navigation. Loaded first; each page's own sheet follows.
   ============================================================ */

:root{
  --surface-page:#ffffff;
  --surface-subtle:#fafafa;
  --surface-muted:#e8f0f5;
  --surface-tint:#dce9f8;
  --surface-tint-alt:#e4ecf7;
  --surface-dark:#0c1625;
  --surface-ink:#0f1621;
  --surface-brand:#1560c4;
  --surface-brand-deep:#0a2657;
  --brand-primary-mid:#1e7bd8;
  --brand-primary-light:#2e8ae6;
  --blue-300:#96b7e4;
  --accent-gold:#eba100;
  --accent-gold-deep:#bd8626;
  --text-primary:#0c1625;
  --text-secondary:#4c5256;
  --text-strong:#1b2b45;
  --text-subtle:#5a7392;
  --text-muted:#8a9aaf;
  --text-faint:#7b8ca3;
  --text-brand:#1560c4;
  --text-inverse:#ffffff;
  --text-inverse-subtle:#fafafa;
  --text-inverse-muted:#a8b3c2;
  --border-default:#d6dee3;
  --surface-divider:#d6dee3;
  --neutral-700:#5a7392;
  --neutral-950:#0c1625;
  --text-on-dark-heading:#ffffff;
  --font-display:'Lora',Georgia,serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-label:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-serif-alt:Georgia,'Times New Roman',serif;
  --stage-w:1440px;  --scale:1;

  /* layout: one content column and one header height for every page.
     The gutter runs 16px at 375 up to 72px, at which point the 1216px
     measure caps it — so from 1360 up the column is the Figma 1216. */
  --gutter:clamp(16px, 4.3vw, 72px);
  --head-h:68px;

  /* type ramps, interpolated between the 375 and 1440 frames */
  --fs-body:  clamp(14px, 13.30px + 0.19vw, 16px);
  --fs-micro: clamp(12px, 11.30px + 0.19vw, 14px);
  --fs-title: clamp(40px, 43.07px + 1.32vw, 62px);
  --fs-h2:    clamp(28px, 28.48px + 0.94vw, 42px);

  /* the sign-up section, shared by every page that carries it. The blog's
     mobile frame (4245:2) is the one that specifies it, so its numbers are
     the ones every page uses. */
  --signup-pad-t:  73px;   --signup-pad-b:   41px;
  --signup-lead-gap: 19px; --signup-note-gap: 31px;
  --signup-lead-w:  302px; --signup-note-w:  302px;  --signup-col-gap: 33px;

  /* the email capsule: a 5.3px inset holds the button inside the field */
  --field-pad:     5.3px;  --field-h:    40.34px;  --field-btn-w: 173.94px;
  --field-gap:       8px;

  /* footer */
  --foot-logo:      18px;  --foot-nav-gap:    32px;
  --foot-top-pad:   62px;  --foot-legal-gap:  99px;  --foot-legal-lift: 31px;

  /* the pill call to action */
  --pill-pad:     5.45px;  --pill-dot:   31.09px;
}

/* From 700 the column is wide enough for the sign-up's real measure, and
   for the footer to run its navigation as a row rather than a stack. */
@media (min-width: 700px) {
  :root {
    --signup-lead-w: 468px; --signup-note-w: 424px;
    --foot-logo:      22px;
    --foot-top-pad:    0px;  --foot-legal-gap:  0px;  --foot-legal-lift: 43px;
  }
}

@media (min-width:1024px){
  :root{
    --head-h:67px;
    --signup-pad-t: 123px;   --signup-pad-b:  140px;
    --signup-lead-gap: 21px; --signup-note-gap: 22px;
    --signup-lead-w:  468px; --signup-note-w:  424px;  --signup-col-gap:  0px;
    --field-pad:       0px;  --field-h:        56px;  --field-btn-w:  217px;
    --field-gap:      22px;
    --pill-pad:      5.9px;  --pill-dot:   36.18px;
  }
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{background:var(--surface-subtle)}
body{background:var(--surface-subtle);font-family:var(--font-sans);color:var(--text-primary);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:none;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:inherit;font-size:inherit}

/* one keyboard focus ring for the whole site, the shared nav included */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--accent-gold);outline-offset:3px;border-radius:4px}

/* ============================================================
   Menu overlay (< 1024px)
   The header's burger opens this; above 1024 neither shows and
   the header's own navigation takes over.
   ============================================================ */
.navx__panel { display: none; }

@media (max-width: 1023.98px) {
  /* Panel. The close control and the menu body share one grid cell, so the
     X sits in the corner without being taken out of flow. */
  .navx__panel {
    position: fixed; inset: 0; z-index: 100;
    display: grid; grid-template-areas: "panel"; padding: 18px 28px 40px;
    background: var(--surface-dark);
    opacity: 0; visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
  }
  .navx__panel[data-open="true"] { opacity: 1; visibility: visible; }
  .navx__panel > * { grid-area: panel; }
  .navx__body { align-self: center; display: flex; flex-direction: column; }
  .navx__panel nav { display: flex; flex-direction: column; }
  .navx__panel nav a {
    font: 500 24px/1.35 var(--font-display); color: var(--text-inverse);
    padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .navx__panel nav a:last-child { border-bottom: 0; }
  .navx__panel .navx__cta {
    display: flex; align-items: center; justify-content: center;
    margin-top: 28px; padding: 16px 22px;
    border-radius: 100px; background: var(--accent-gold);
    font: 500 16px/1.5 var(--font-sans); letter-spacing: -0.08px;
    color: var(--text-primary);
  }
  .navx__close {
    justify-self: end; align-self: start;
    display: grid; grid-template-areas: "x"; place-items: center;
    width: 44px; height: 44px; padding: 0; border: 0; background: none;
    cursor: pointer;
  }
  .navx__close span {
    grid-area: x; width: 22px; height: 2px; border-radius: 2px;
    background: var(--text-inverse);
  }
  .navx__close span:first-child { transform: rotate(45deg); }
  .navx__close span:last-child  { transform: rotate(-45deg); }

  .navx-open, .navx-open body { overflow: hidden; }
}

/* ============================================================
   Shared page furniture
   One content column, one header, one footer — flow layout, used
   by every page. Nothing here is positioned; the only fixed thing
   on the site is the menu overlay above.
   ============================================================ */

/* The content column: 343px at 375, 1216px from 1360 up. A section that
   runs wider than the measure — the blog's featured card — raises its own
   --wrap-max rather than reaching for a different centring rule. */
.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap-max, 1216px));
  margin-inline: auto;
}

/* --- masthead ---------------------------------------------------------
   The gradient is a background rather than an image element, so it needs
   no box of its own. It is 127% of the column width, matching the Figma
   frame's overscan, and anchored to the top so the crop stays put as the
   band grows. Below 1024 the hero grid overlays it, as the mobile frames have it. */
.masthead {
  background: var(--surface-brand-deep) url("../assets/shared/hero-gradient.jpg")
              center top / cover no-repeat;
  color: var(--text-inverse);
}

@media (min-width: 1024px) {
  .masthead { background-size: 126.9% auto; }
}

@media (max-width: 1023.98px) {
  .masthead {
    background-image: url("../assets/shared/grid-hero-mask.svg"),
                      url("../assets/shared/hero-gradient.jpg");
    background-position: center var(--head-h), center top;
    background-size: 1440px 500.486px, cover;
    background-repeat: no-repeat, no-repeat;
    
  }
}

/* the small caps line above a hero title */
.eyebrow {
  font: 500 var(--fs-micro)/1.5 var(--font-sans); letter-spacing: .05em;
}

/* --- site header ------------------------------------------------------
   Transparent, so the hero gradient runs behind it. Three tracks put the
   navigation on the page centre line rather than merely between its
   neighbours; below 1024 it collapses to logo + burger. */
.site-head {
  /* the hero is pulled up under this with a negative margin, and a later
     in-flow background paints over an earlier one's border - positioning
     lifts the header (and its rule) above the gradient */
  position: relative;
  height: var(--head-h);
  border-bottom: 1px solid rgba(235, 235, 235, .1);
  color: var(--text-inverse);
}
.site-head__in {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  height: 100%;
}
.site-head__logo { justify-self: start; font: 600 22px/1.2 var(--font-display); }
.site-head__nav, .site-head .site-head__cta { display: none; }

@media (min-width: 1024px) {
  .site-head__in { grid-template-columns: 1fr auto 1fr; }
  .site-head__nav {
    display: flex; justify-content: center; gap: 32px;
    font: 400 16px/1.5 var(--font-sans); letter-spacing: -.005em;
  }
  .site-head .site-head__cta { display: inline-flex; justify-self: end; }
  .site-head .burger { display: none; }
}

/* --- pill call to action ---------------------------------------------
   White capsule, label, then a dark disc holding the arrow. The disc is
   a grid so the arrow centres itself. The header's pill sits the disc
   against its right edge; the blog's featured card gives it the same
   inset as the label, so both are parameters. */
.pill {
  --pill-pad-r: var(--pill-pad);
  --pill-gap: 12px;
  display: inline-flex; align-items: center; gap: var(--pill-gap);
  padding: var(--pill-pad) var(--pill-pad-r) var(--pill-pad) 28.8px;
  border-radius: 100px;
  background: var(--surface-page); color: var(--text-primary);
  font: 500 14px/1.5 var(--font-label); letter-spacing: -.005em;
  white-space: nowrap;
}
.pill__dot {
  display: grid; place-items: center;
  width: var(--pill-dot); height: var(--pill-dot); border-radius: 50%;
  background: var(--surface-ink);
}
.pill__dot img { width: 11.46px; height: 7.36px; }
.pill--dark { background: var(--surface-brand-deep); color: var(--text-inverse); }

/* --- burger ----------------------------------------------------------- */
.burger {
  display: grid; gap: 4px; width: 24px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: inherit; /* a button does not inherit colour; the bars are currentcolor */
  -webkit-tap-highlight-color: transparent;
}
.burger span {
  height: 2px; border-radius: 2px; background: currentcolor;
  transition: transform .22s ease, opacity .18s ease, width .22s ease;
}
.burger span:nth-child(2) { width: 70%; justify-self: end; }
.burger span:nth-child(3) { width: 45%; justify-self: end; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { width: 100%; transform: translateY(-6px) rotate(-45deg); }

/* --- site footer ------------------------------------------------------
   A 74px navigation bar between two hairlines, then the oversized
   wordmark. The legal row and the wordmark share one grid cell, so
   the row sits over the mark without either leaving the flow. */
.site-foot {
  overflow: hidden;
  border-top: 1px solid var(--neutral-700);
  background: var(--surface-dark); color: var(--text-inverse);
}
.site-foot__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 74px;
}
.site-foot__logo { font: 600 var(--foot-logo)/1.2 var(--font-display); }
.site-foot__nav {
  display: flex; gap: var(--foot-nav-gap);
  font: 500 14px/1.5 var(--font-label); letter-spacing: -.005em;
}
/* The legal row and the wordmark share one grid cell at every width — both
   frames set the mark against the foot of the page and lay the row over it. */
.site-foot__bottom { display: grid; grid-template-areas: "stack"; }
.site-foot__bottom > * { grid-area: stack; align-self: end; }
.site-foot__legal { margin-block: var(--foot-legal-gap) var(--foot-legal-lift); }
.site-foot__note {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px;
  max-width: 939px;
  font: 400 var(--fs-micro)/1.5 var(--font-sans); letter-spacing: -.005em;
}
.site-foot__note a { color: inherit; text-underline-offset: 3px; }
.site-foot__sep { opacity: .55; }
/* the wordmark is a constant share of the viewport: 488px at 1440,
   127px at 375. The negative margin trims the line box's descent. */
.site-foot__mark {
  margin-bottom: -7.3vw; text-align: center;
  font: 600 33.9vw/1.2 var(--font-display); color: rgba(250, 250, 250, .1);
}

@media (max-width: 699.98px) {
  /* stacked, so the row gap becomes the logo-to-navigation gap */
  .site-foot__top { flex-direction: column; gap: 26px; padding-top: var(--foot-top-pad); }
  .site-foot__nav { flex-direction: column; text-align: center; }
}

@media (min-width: 700px) {
  .site-foot__bar { border-bottom: 1px solid var(--neutral-700); }
}

/* --- shared link feedback --------------------------------------------- */
.site-head a, .site-foot a { transition: opacity .18s ease; }
.site-head a:hover, .site-foot a:hover { opacity: .75; }

/* --- start with your model --------------------------------------------
   Three tracks in the proportion the frame uses — copy, the pointing
   arrow, the form — collapsing to a single column below 1140, where the
   form no longer has room to sit beside the copy. */
.signup {
  padding-block: var(--signup-pad-t) var(--signup-pad-b);
  background: var(--surface-dark); color: var(--text-inverse);
}
.signup__grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--signup-col-gap);
}

.signup__title {
  font: 500 var(--fs-h2)/1.1 var(--font-display); letter-spacing: -.03em;
}
.signup__lead {
  margin-top: var(--signup-lead-gap); max-width: var(--signup-lead-w);
  font: 400 var(--fs-body)/1.5 var(--font-sans); letter-spacing: -.005em;
}
.signup__note {
  margin-top: var(--signup-note-gap); max-width: var(--signup-note-w);
  font: 400 12px/1.5 var(--font-sans); letter-spacing: -.005em;
}
/* Until there is room for three columns the arrow shares row one with the
   copy, overlaying its bottom right corner — one grid cell, two items, the
   way both mobile frames draw it. */
.signup__arrow {
  display: block; width: 40.69px; height: 33.18px;
  grid-area: 1 / 2 / 2 / 3; align-self: end; justify-self: end;
  transform: rotate(-132.23deg) scaleX(-1);
}
.signup__intro  { grid-area: 1 / 1 / 2 / -1; }
.signup__action { grid-area: 2 / 1 / 3 / -1; }


.field__input {
  min-width: 0; height: var(--field-h);
  padding-left: 8px;
   padding-right: calc(var(--field-btn-w) + var(--field-gap));
  border: 0; border-radius: 100px; background: none;
  font: 400 var(--fs-body)/1.5 var(--font-sans); letter-spacing: -.005em;
  color: var(--text-secondary);
}
.field__input::placeholder { color: var(--text-secondary); opacity: 1; }
@media (max-width: 1139.98px) {
  .signup__grid { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (min-width: 1140px) {
  .signup__grid {
    grid-template-columns: minmax(0, 482fr) minmax(0, 256fr) minmax(0, 478fr);
    align-items: start;
  }
  .signup__intro  { grid-area: auto; }
  .signup__action { grid-area: auto; }
  /* percentage margins on a grid item resolve against its own track */
  .signup__arrow {
    grid-area: auto; align-self: start; justify-self: start;
    width: 53.47px; height: 43.45px;
    margin: 78.7px 0 0 21.1%; transform: rotate(80.8deg);
  }
  .field__input {
  padding-left:22px;

}
}

/* --- email capsule ----------------------------------------------------
   The field and the button share one grid cell, which is how the frame
   draws it: a full-width white capsule with the gold one sitting on its
   right end. The input keeps its whole width, so the placeholder is not
   cut short, and its right padding clears the button. */
.field {
  position: relative;
  display: grid; grid-template-areas: "field"; grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: var(--field-pad); border-radius: 100px;
  background: var(--surface-page);
}
.field > * { grid-area: field; }

.field__submit {
  justify-self: end;
  width: var(--field-btn-w); height: var(--field-h);
  border: 0; border-radius: 100px; background: var(--accent-gold);
  font: 500 var(--fs-body)/1.5 var(--font-sans); letter-spacing: -.005em;
  color: var(--text-primary); cursor: pointer;
  transition: background-color .18s ease;
}
.field__submit:hover { background: var(--accent-gold-deep); }
.field__submit:disabled { opacity: .6; cursor: default; }
.field__trap {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
.signup__error {
  margin-top: 12px;
  font: 400 12px/1.5 var(--font-sans);
  color: #f0c7c7;
}