/* marieomann.com, shared foundation: tokens, reset, type, and the components
   that appear on more than one page.

   Every colour is read from the built atelier themes, none invented:
     Marie Omann Design = the NEUTRAL theme (dist/themes/neutral.css)
     Fondee             = the FOREST theme (dist/themes/forest.css)
   Radii follow neutral's radius scale of 0.4, so a card is 24 * 0.4 = 9.6px
   and a control is 10px.
   Mona Sans is the display face and Inter the body face, both self hosted so
   that no visitor request ever leaves this origin. */

/* Subset to Latin from the official OFL releases:
   Mona Sans 2.0.27 (github/mona-sans) and Inter 4.1 (rsms/inter).
   The licences sit beside the files in assets/fonts/.

   Mona Sans is the variable cut, not the two static weights. The approved
   prototypes were set with the variable font, and the static SemiBold is a
   shade narrower, which was enough to pull a pillar title onto one line where
   the design has two. One file also weighs less than two static ones. */
@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/mona-sans-var.7e1bccdee1.woff2") format("woff2-variations"),
       url("/assets/fonts/mona-sans-var.7e1bccdee1.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400.67f57c60d8.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-500.4271e61b8d.woff2") format("woff2");
}

:root {
  /* neutral theme */
  --page: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #faf9f7;
  --surface-3: #f1f0ee;
  --ink: #16171c;
  --ink-secondary: #66625b;
  --ink-tertiary: #868178;
  --line: #dbd9d4;
  --error: #a3251c;
  --action: #16171c;
  --action-hover: #000000;
  --ink-action: #fdfdfc;
  --radius-scale: .4;
  --radius-card: 9.6px;
  --radius-control: 10px;
  --radius-sm: calc(8px * var(--radius-scale));
  /* forest theme */
  --forest-ground: #034238;
  --forest-ground-hover: #002d23;
  --forest-ink: #f7fdfb;
  --forest-ink-2: #c5e7db;
  /* type */
  --font-display: "Mona Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure { margin: 0; padding: 0 }
ul { list-style: none }
a { color: inherit; text-decoration: none }
/* A form control does not inherit its font. Without this the Send button
   falls back to the browser's default face and draws its own border, which
   is how it came to look nothing like the Book a call buttons beside it. */
button, input, textarea, select { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px }

/* width:100% is load bearing. The quieter pages make the body a flex column
   so a short page still pins its footer to the bottom, and an auto margin on
   the cross axis of a flex container switches stretching off. Without this
   the whole page shrinks to the width of its longest line and sits in the
   middle of the window. */
.wrap { width: 100%; max-width: 1184px; margin: 0 auto; padding: 0 24px }

/* The skip link sits off the top of the page and only arrives on focus, so it
   changes nothing a sighted visitor sees until they reach for the keyboard. */
.skip {
  position: absolute;
  left: 24px;
  top: 0;
  z-index: 10;
  transform: translateY(-120%);
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-control);
  background: var(--action);
  color: var(--ink-action);
  font-size: 14px;
  font-weight: 500;
  transition: transform .2s var(--ease);
}
.skip:focus-visible { transform: translateY(12px) }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-control);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  background: var(--action);
  color: var(--ink-action);
  transition: background .2s var(--ease);
}
.btn:hover { background: var(--action-hover) }
.btn--sm { height: 38px; padding: 0 18px }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: border-color .2s var(--ease);
}
.textlink:hover { border-color: var(--ink) }
.textlink svg { transition: transform .2s var(--ease) }
.textlink:hover svg { transform: translateX(3px) }

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
}

/* The header and footer of every page inside /design/ and the legal pages.
   The intro page at / carries its own, narrower pair in intro.css. */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  position: relative;
  flex-wrap: wrap;
}
.head-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  color: var(--ink-secondary);
}
.head-nav a:not(.btn) {
  padding: 3px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.head-nav a:not(.btn):hover { color: var(--ink); border-color: var(--ink) }

.site-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 112px;
  padding: 32px 0 48px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-secondary);
}
/* the brand mark, inline so it takes the theme ink; never below 24px tall */
.foot-mark { display: block; height: 36px; width: auto; color: var(--ink) }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap }
.foot-links a, .site-foot .copy {
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.foot-links a:hover { color: var(--ink); border-color: var(--ink) }

/* A gentle settle as each section arrives, and nothing more. The rule sits
   behind .js, so with no JavaScript every section is simply visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.in { opacity: 1; transform: none }

@media (max-width: 900px) {
  .site-foot { margin-top: 64px }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important }
  .js .reveal { opacity: 1; transform: none }
  .textlink:hover svg { transform: none }
  .skip { transition: none }
}