/*
 * With Propshaft, every file in app/assets/stylesheets is linked by the layout
 * (stylesheet_link_tag :app). This one holds the element defaults and the
 * shared pieces: buttons, eyebrows, headings, handwriting.
 */

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* A faint paper grain under everything. */
body {
  margin: 0;
  background: var(--linen) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .11 0 0 0 0 .1 0 0 0 0 .09 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color: var(--ink);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
}

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

[hidden] { display: none !important; }

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--ember); }

input, textarea, select, button { font: inherit; color: inherit; }

/* Images carry width/height for their intrinsic ratio (no layout shift);
   height: auto lets the CSS aspect-ratio crops win over the attribute. */
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }

::selection { background: var(--sun); color: var(--ink); }

.daisy { display: block; flex: none; }

/* Buttons: square, monospaced, uppercase. */

.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 16px 24px;
  font: 700 13px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}

.button__arrow { font-size: 1.25em; }

.button--small { padding: 10px 16px; font-size: 12px; }
.button--large { padding: 18px 26px; font-size: 14px; gap: 14px; }

.button--ink { background: var(--ink); color: var(--paper); }
.button--ink:hover { background: var(--ember); border-color: var(--ember); color: var(--paper); }

.button--ember { background: var(--ember); border-color: var(--ember); color: var(--paper); }
.button--ember:hover { color: var(--paper); }

.button--ember-ink { background: var(--ember); border-color: var(--ember); color: var(--paper); }
.button--ember-ink:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.button--outline:hover { background: var(--ink); color: var(--linen); }

/* The ember call to action sits on a hard ink shadow and lifts on hover. */
.button--stamped { border: 0; box-shadow: 4px 4px 0 var(--ink); }
.button--stamped:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

.link-button {
  border: 0;
  background: transparent;
  padding: 10px 0;
  font: 400 14px/1 var(--font-mono);
  color: var(--ink-muted);
  cursor: pointer;
}

.link-button:hover { color: var(--ink); }
.link-button--underlined { text-decoration: underline; }

.mono-link { font: 400 13px/1 var(--font-mono); }

/* Type */

/* Eyebrows sometimes carry the real h1/h2 for search, so drop the heading margins. */
.eyebrow {
  margin: 0;
  font: 400 13px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.eyebrow--ruled {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.4;
}

.eyebrow__rule { width: 28px; height: 1px; background: var(--ink-muted); flex: none; }

.heading {
  margin: 0;
  font-weight: 400;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.heading--section { font: 400 clamp(36px, 4.8vw, 68px)/1.02 var(--font-serif); }
.heading--italic { font: italic 400 clamp(40px, 5.4vw, 76px)/1 var(--font-serif); }
.heading--smaller { font-size: clamp(36px, 4.6vw, 64px); }

.note { margin: 0; font: 400 14px/1.6 var(--font-mono); color: var(--ink-muted); }

.handwritten { font: 400 25px/1.3 var(--font-hand); color: var(--ink-soft); }
.handwritten--muted { color: var(--ink-muted); }
.handwritten--small { font-size: 24px; line-height: 1.2; }
.handwritten--large { font-size: 29px; padding-top: 8px; }