/* Smonsters — smonsters.co
   Palette follows the 2026 brand doc: Bark, Linen, Grain, Ash, Ember. */

@font-face {
  font-family: 'Rubik';
  src: url('fonts/rubik-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --linen:     #F5F0E8;
  --paper:     #FBF8F3;
  --linen-2:   #EBE3D6;
  --grain:     #D9BC91;
  --bark:      #33291F;
  --bark-2:    #5C4E40;
  --ash:       #736759;  /* darkened from #9C9187 to clear 4.5:1 on linen */
  --ember:     #8E241C;
  --blush:     #DE8B84;

  --sans: 'Rubik', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --serif: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;

  --wrap: 68rem;
  --narrow: 40rem;
  --band-y: clamp(4.5rem, 11vw, 9.5rem);
  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--linen);
  color: var(--bark);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--grain); color: var(--bark); }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--bark); color: var(--linen);
  padding: .6rem 1rem; border-radius: 4px;
  text-decoration: none; font-size: .9rem;
  transition: top .2s var(--ease);
}
.skip:focus { top: 1rem; }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap.narrow { width: min(100% - 2.5rem, var(--narrow)); }

/* ---------- masthead ---------- */

.masthead {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem clamp(2rem, 5vw, 3.5rem);
}

/* Supplied wordmark art (images/wordmark-blk.png). White and red colourways
   sit alongside it as wordmark-wht.png / wordmark-red.png. */
.wordmark { line-height: 0; }
.wordmark img {
  width: clamp(13rem, 34vw, 22rem);
  height: auto;
  margin-inline: auto;
}

.tagline {
  margin-top: clamp(.9rem, 2vw, 1.3rem);
  font-family: var(--serif);
  font-size: clamp(1.05rem, .95rem + .7vw, 1.5rem);
  font-weight: 400;
  font-style: normal;
  color: var(--bark-2);
  letter-spacing: .005em;
}

/* ---------- hero ---------- */

.hero {
  margin: 0;
  width: min(100% - 2.5rem, 84rem);
  margin-inline: auto;
}
.hero img {
  width: 100%;
  border-radius: 3px;
}

/* ---------- bands ---------- */

.band { padding-block: var(--band-y); }
.band--paper { background: var(--paper); }
.band--grain { background: var(--linen-2); }
.band--bark  { background: var(--bark); color: var(--linen); }

/* ---------- manifesto ---------- */

.manifesto > * + * { margin-top: 1.35em; }

.manifesto .lede {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--bark);
  margin-bottom: .2em;
}

.manifesto p { color: var(--bark-2); }

/* ---------- eyebrow ---------- */

.eyebrow {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 1.1rem;
}
.eyebrow--center { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.eyebrow--light { color: var(--grain); margin-bottom: 1.1rem; }

/* ---------- names + bios ---------- */

.name {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
  line-height: 1;
  letter-spacing: -.025em;
  font-weight: 500;
}
.name--sm { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.25rem); }

.dot { color: var(--ember); }

.bio {
  font-family: var(--serif);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  color: var(--bark-2);
  margin-top: .55em;
  letter-spacing: -.005em;
}

.aside {
  color: var(--ash);
  font-size: .95rem;
  line-height: 1.6;
}

/* ---------- Axel feature ---------- */

.feature {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 52rem) {
  .feature { grid-template-columns: 1fr 1fr; }
}

.feature__img { margin: 0; }
.feature__img img { width: 100%; border-radius: 3px; }

.feature__copy > p + p { margin-top: 1.25em; }
.feature__copy .bio + p { margin-top: 1.75em; color: var(--bark-2); }
.feature__copy .aside { margin-top: 1.9em; }

/* ---------- the book ---------- */

.book {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 52rem) {
  .book { grid-template-columns: 1.35fr 1fr; }
}

.book__img { margin: 0; }
/* The render is a cream book on near-white, so it needs a shadow to sit off
   the page at all — see .band--grain on this section too. */
.book__img img {
  width: 100%;
  border-radius: 3px;
  box-shadow: 0 22px 45px -22px rgba(51, 41, 31, .35);
}

.book__head {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 500;
}
.book__sub {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + .55vw, 1.45rem);
  color: var(--bark-2);
  margin-top: .45em;
}
.book .aside { margin-top: 1.9em; }

/* ---------- Emma + Kevin ---------- */

.pair {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 44rem) {
  .pair { grid-template-columns: 1fr 1fr; }
}

.card__img { margin: 0 0 clamp(1.4rem, 3vw, 2rem); }
.card__img img { width: 100%; border-radius: 3px; }

/* ---------- roster ---------- */

.roster__head {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: -.018em;
  max-width: 26ch;
  color: var(--linen);
  margin-bottom: clamp(2.75rem, 6vw, 4.25rem);
}

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: clamp(.9rem, 2.2vw, 1.5rem) 1.25rem;
  border-top: 1px solid rgba(217, 188, 145, .22);
  padding-top: clamp(2rem, 4vw, 3rem);
}

.roster li {
  font-family: var(--serif);
  font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem);
  letter-spacing: -.01em;
  color: rgba(245, 240, 232, .56);  /* quiet, but still 4.5:1 on bark */
}

.roster .is-known {
  color: var(--linen);
  position: relative;
}
.roster .is-known::after {
  content: '';
  position: absolute;
  left: 0; bottom: -.28em;
  width: 1.1rem; height: 2px;
  background: var(--ember);
}

/* ---------- signup ---------- */

.signup__head {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  max-width: 20ch;
  margin-bottom: clamp(1.9rem, 4vw, 2.6rem);
}

.form {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: stretch;
}

.form__input {
  flex: 1 1 15rem;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--bark);
  background: var(--paper);
  border: 1px solid var(--linen-2);
  border-radius: 3px;
  padding: .85rem 1rem;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.form__input::placeholder { color: var(--ash); }
.form__input:hover { border-color: var(--grain); }
.form__input:focus {
  border-color: var(--bark-2);
  background: #fff;
  outline: none;
}
.form__input:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

.form__btn {
  flex: 0 0 auto;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--linen);
  background: var(--bark);
  border: 1px solid var(--bark);
  border-radius: 3px;
  padding: .85rem 1.6rem;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.form__btn:hover { background: var(--ember); border-color: var(--ember); }
.form__btn:active { transform: translateY(1px); }

.form__msg {
  flex: 1 0 100%;
  font-size: .9rem;
  color: var(--ember);
  min-height: 0;
}
.form__msg:empty { display: none; }

.signup .aside { margin-top: 1.5rem; }

/* ---------- footer ---------- */

.footer {
  padding-block: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--linen-2);
}
.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
}
.footer__mark { line-height: 0; }
.footer__mark img { width: 8.5rem; height: auto; }
.footer__meta { color: var(--ash); font-size: .9rem; }

/* ---------- reveal ---------- */

/* Visible by default. main.js adds .js-reveal to <html> only once it is ready to
   observe, so a failed or blocked script can never leave the page blank. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}